htmlcss新手入門（HTMLCSS詳細教程有這一篇文章就夠了）

2023-09-22 11:04:30

htmlcss新手入門?Html導入外部資源，現在小編就來說說關於htmlcss新手入門?下面內容希望能幫助到你，我們來一起看看吧!

htmlcss新手入門

Html

導入外部資源

塊狀標籤：,到,,,等等

行內標籤: ,,等等

換行

水平線

,粗體

斜體

特殊字符

用來顯示空格

表單

1）action用來指示由誰來處理表單，默認為當前頁面

2）post方式是將數據打包成一個數據快來發送，所以比較安全並且可以發送大量數據;

get方式不打包數據，只能發送少量數據，但是速度快；默認為get;

輸入控制項

注意：

1）同名的單選框會自動形成一組，一個組中只能選一個

2）在一個組中的複選框最好也同名

屬性說明：

1）type取值可以有多個，eg:

text:默認值,單行文本框

password:密碼框

radio:單選框

checkbox:複選框

file:文件域(用於上傳文件)

button:普通按鈕

submit:提交按鈕

reset:重置按鈕

image:圖像按鈕

2）value:提交的值

3）maxlength:允許輸入的最大長度

4）readonly:設置為只讀

5）disabled:設置為禁用

文字域

定義按鈕

select下拉框

1）格式

選項1

選項2

...

注意：

選項1和2不會提交，真正提交給伺服器的是value屬性的值;

selected表示下拉框的選項被選中;

checked表示複選框或單選框被選中;

表單驗證

1.required必填驗證

2.表單匹配驗證

3.驗證輸入範圍

4.設置自定義的提示信息

表單end

插入圖片

音頻標籤

1）格式：

您的瀏覽器不支持audio標籤

視頻標籤：將audio換成video即可

超連結

注意：

_self:表示在當前窗口打開;

_blank：表示在新窗口中打開

a:link 未點擊的超連結樣式

a:hover 滑鼠懸停在超連結上的樣式

a:active 點擊時未釋放的超連結樣式

a:visited 訪問後的超連結樣式

無序列表

有序列表

自定義列表標題標題的描述

表格

1）border:邊框

2）cellspacing:設置格子之間的距離

3）cellpadding:設置格子邊框和內容的

總表頭

行

單元格

表頭

表格內容

表注

css樣式

Css

背景

background複合屬性

background-color:關鍵字 | rgb| #6個十六進位的數 背景顏色

background-image:url(圖片路徑)背景圖片

background-position:參數1 參數2;背景圖片位置

參數1控制水平方向x定位

參數2控制垂直方向y定位

background-repeat:repeat | no-repeat |repeat-x | repeat-y背景圖片如何重複

background-size背景圖片大小

1.線性漸變

1）不重複

background:linear-gradient(角度或方向,顏色1，顏色2...);

2）重複

background:repeating-linear-gradient(...)

2.徑向漸變(注意：當容器是正方形時，徑向漸變永遠是正圓形)

1）不重複 radial-gradient(...)

2）重複 repeating-radial-gradient(...)

邊框

border複合屬性

border-style: solid/dashed/none邊框樣式

border-width:邊框的寬度

border-color:邊框的顏色

border-bottom下邊框

border-left左邊框

border-right右邊框

border-top上邊框

border-radius圓角矩形

border-image邊框圖片

盒子

box-shadow:水平距離 垂直距離 模糊半徑 顏色；盒子陰影

Color

opacity透明度

尺寸

height元素高度

max-height最大高度

min-height最小高度

width元素寬度

max-width最大寬度

min-width最小寬度

列表

list-style列表屬性

list-style-image:url(圖片路徑)列表圖像

list-style-position列表項位置

list-style-type列表項形狀

外邊距

margin複合屬性

margin-bottom下邊距

margin-left左邊距

margin-right右邊距

margin-top上邊距

內邊距

padding複合屬性

padding-bottom下邊距

padding-left左邊距

padding-right右邊距

padding-top上邊距

定位屬性

bottom下距離

top上距離

right右距離

left左距離

cursor光標顯示形狀

display轉變元素類型

1）block:塊狀

2）inline:行級

3）none:無（隱藏並且不佔據位置）

float：left/right/none浮動

overflow當元素溢出時發生事件

position定位類型

1.static靜態定位(默認值)

1)保持在標準文檔流中默認的位置，不做任何移動

2)left,top等屬性無效

2.relative相對定位

1)相對於原來的位置進行偏移，可以用left,top,right,bottom設置偏移量

2)不會脫離標準文檔流

3.absolute絕對定位

1)默認以瀏覽器的左上角為坐標原點，水平向右是X正軸,垂直向下是Y正軸線

2)會脫離標準文檔流

3)z-index決定元素的疊放次序,值越大越在上面

4.fixed固定定位

1)脫離了標準文檔流

2)始終以瀏覽器左上角為坐標原點

vertical-align垂直對齊方式

visibility設置元素是否可見

z-index元素堆疊順序

字體

font-family字體

font-size字體大小

font-weight字體粗細

color: 字體顏色

文本屬性

direction書寫方向

letter-spacing字符間距

line-height行高

text-align文本水平對齊方式

text-decoration設置文本修飾(下劃線)

text-indent首行縮進

text-shadow:水平距離 垂直距離 模糊半徑 顏色; 文本陰影

text-transform文本的大小寫