HTML5元素表
HTML5元素表
文本元素
超鏈接
- 頁面目標
<a href ="目標">內容 </a>
鏈接的目標（路徑）可以是相對地址也可以是絕對地址。
emment插件
CTRL+D 復制光標所在行的內容
- 錨點
當前頁面的跳轉
格式：
1.ID屬性的元素
2.a中href的值是 （# + 1的屬性值）
- 功能
a元素書寫格式：
<a target="頁面打開位置" href="目標">內容 </a>
頁面打開位置指點擊後哪裏打開新文檔。
_blank指在新窗口打開。
<a href="#">內容</a>|
表示返回頁面頂部
<a href="Tel:13434354544">聯系我們</a>
表示撥打電話
-
blockquote 整段引用
-
q 小段引用
-
abbr 縮寫引用 ：顯示縮寫內容（關鍵字），title屬性是鼠標懸浮點顯示全部內容。
-
cite 參考文獻引用
<a><cite></cite><a>
cite作為屬性時，表示引用內容的來源，瀏覽器會忽略，但屏幕閱讀器可以識別，搜索引擎會識別。
-
Strong 著重書寫，若有語言瀏覽器，會著重閱讀strong內容
-
B 粗體
-
i 斜體
-
em 斜體，若有語言瀏覽器，會著重閱讀i內容
DIV元素
它是一個非常常見的元素
它沒有任何的語義
它僅僅表示一個容器，用於包含其他元素，嵌套結構
在網站布局時，它通常用於表示頁面區塊
僅表示區域，不產生任何效果
語義化標簽
它們和DIV沒有本質區別，具有語義
- header用於表示頁面或某個區域的頭部，在頁面可以出現多次，通常情況下有兩種樣式：
1.網頁的頭部（頁眉）
2.內容的標題
-
nav 用於導航欄，一般是唯一的
-
aside 用於表示分周圍主題相關的附加信息，與周圍文本沒有密切關系的內容（AD，相關鏈接）
-
article 用於表示文章或其他可能獨立頁面存在的內容，表示一個完整的或自成一體的內容塊，比如內容（博客）或新聞報道。
-
section 用於表示一個整體的一部分主題，適合以任何標題開頭的內容塊。
section和div的區別：如果是標題開頭的內容塊，其他的語義化標簽都不適用，那section比div更適用。
- footer 用於表示頁面或某個區域的腳註。
無語義標簽
-
div 表示頁面中的一塊區域
-
spam 僅用於給一段文本添加樣式
-
br 空元素，用於在頁面中換行（行間距沒法控制，不建議使用）。
-
hr 空元素，用於在頁面中制造一個分割線（沒法控制樣式，不建議使用）。
-
pre 預格式化元素，保留文字在源代碼中的格式
實體字符
書寫格式：&實體名稱；或&#實體編號；
常見實體字符：
- 顯示結果 實體名稱 實體編號 描述 - 空格 & nbsp； &# 160; - < 小於符號 & lt； &# 60; - > 大於符號 & gt; &# 62; - & 並且符號 & amp; &# 38; - ? 版權符號 & copy ; &# 168;
CSS選擇器
基本選擇器
元素選擇器
類選擇器
ID[不推薦使用,預留給JS]
通配符選擇器
格式: *+{聲明塊}
例子: *{ color:red;}
適用性範圍等同於html
並集選擇器/組合選擇器
格式: 元素或類或id+","+元素或類或id+","+元素或類或id","+{聲明塊}
例子: h1,.cc,h3{ color:red;}
層次選擇器
[子級選擇器]
格式:父級元素名稱+">"+子級元素名稱+{聲明塊}
例子: div>p{color:red;}
[後代選擇器]
格式:祖先元素名稱+空格+後代元素名稱+{聲明塊}
例子: div p{color:red;}
[兄弟選擇器]
格式: A元素名稱+"+"+B元素名稱+{聲明塊}
例子: div+P{color:red;}
註:選擇A元素後的B元素,AB之間不許有其他元素.
[通用選擇器]
格式:同級元素A+"~"+同級元素B+{聲明塊}
例子: div~p{color:red;}
註:表示選擇與A元素同級別的所有B元素(B的位置是在A後面)
偽類選擇器
[動態偽類選擇器]
未訪問
a:link{color:black;}
鼠標懸停
a:hover{color:pink;}
鼠標點擊時
a:active{color:green;}
點擊後
a:visited{color:五顏六色;}
註:hover是可以用於多個元素身上的,但其他三個只能用於具有點擊功能的元素上.
a:focus{color:pink;}
多用於輸入框或鏈接,tab鍵換選
註:IE7以前不支持:focus
註:IE6以前不支持:hover active
以上5個的順序要求:
A: link,visited,focus,hover,active
B: visited,link,focus,hover,active
[結構偽類選擇器]
格式:元素名稱+":nth-child(n)"+{聲明塊}
例子: section:nth-child(2){color:deeppink;}
表示選中html裏的第二個section元素,文字設置為deeppink
選中第一個
格式:元素名稱+":first-child"+{聲明塊}
例子: p:first-child{color:red;}
選中最後一個
格式:元素名稱+":last-child"+{聲明塊}
例子: p:last-child{color:red;}
選中奇數項
格式:元素名稱+":nth-child(odd)"+{聲明塊}
例子:section:nth-child(odd){color:deeppink;}
選中偶數項
格式:元素名稱+":nth-child(even)"+{聲明塊}
例子:section:nth-child(even){color:deeppink;}
偽元素選擇器
元素後面加內容
格式:元素名稱+":after"+{content:"要添加的內容";}
例子: i:after
{content:"姓名";}
元素前面加內容
格式:元素名稱+":before"+{content:"要添加的內容";}
例子: i:before
{content:"姓名";}
元素第一行添加樣式
格式:元素名稱+":first-line"+{聲明塊}
例子: p:first-line{color:red;}
元素第一個字母或第一個漢字
格式:元素名稱+":first-letter"+{聲明塊}
例子: p:first-letter{color:red;}
註:為了解決兼容性,偽元素選擇器,建議打兩個冒號
疊層概述
比較優先級
每一個聲明都有一個優先級，當發生沖突時，優先級高的保留。一個聲明的優先級，與它的來源和重要性有關。
若屬性值後跟上！importment,則表示一條重要聲明，否則為普通聲明。
{color:red !importment ；}
- 優先級
1.用戶樣式表重要聲明
2.作者樣式表重要聲明
3.作者樣式表普通聲明
4.用戶樣式表普通聲明
5.瀏覽器默認樣式表
比較特殊性
每一個聲明都有一個特殊性（特指度，特指值 Specificity），當發生沖突時，特殊性高的會保留，特殊性低會被淘汰。
一個聲明的特殊性，取決於規則適用範圍的大小。規則適用範圍越大，特殊性越低，適用範圍小，特殊性越高。
- 行內樣式>ID選擇器>類選擇器>元素選擇器>通配選擇器
在比較特殊性時，每一個沖突的聲明，會生成4個數字（a.b.c.d）
依次比較特殊性a越大。特殊性越高，若a相同，比較b，依次類推。
當計算選擇器分組的時候，要分開計算。
a:若聲明中是行內樣式，則為1，否則為0.
b:規則中ID選擇器的個數
c:規則中類選擇器，偽類選擇器和屬性選擇器的個數
d:規則中元素選擇器，偽元素選擇器的個數
HTML5元素表