目錄
1、HTML5標簽
H5前的DIV+CSS布局
H5解決的問題
H5新標簽header、footer、nav、aside、article、address、main、figure、figcaption等
2、CSS的引用
CSS的定義
CSS的工作原理
CSS的引用：行內樣式、內部樣式、外部樣式
CSS的優先級(層疊)：三個來源、兩種聲明、繼承
3、CSS的選擇器
簡易選擇器（simple selectors）：*，class，id，element
屬性選擇器（attribute selectors）：屬性/屬性值
偽類選擇器（pseudo-classes selectors）：狀態偽類、結構偽類
偽元素選擇器（pseudo-elements selectors）
組合選擇器（combinators selectors）：組合兩個/更多的選擇器
多重選擇器（multiple selectors）：p.last
"="：全部；"~"：其中之一；"|"：首字母開頭
內容
1、HTML5標簽
1.1DIV+CSS布局
1 <div id="header">頁面頭部</div> 2 <div id="content"> 3 <div id="left"></div> 4 <div id="right"></div> 5 </div> 6 <div id="footer">頁腳</div>
1.2H5解決的問題
1.2.1定義語義性的章節的div元素（section）
1.2.2改變H4內所有章節都為文檔一部分，H5使得文檔可包含不是大綱但與文檔相關的特殊章節，如廣告區和解釋區域（aside）
1.2.3產生與文檔無關但與網站相關的節段，如logo、menus、目錄、版權信息和法律聲明（nav；header；footer）
1.3header標簽
1.3.1用法：定義頁眉或章節頭部，用於展示介紹性內容，通常為導航、標題元素或其他（logo；搜索框；作者名稱）
1.3.2注意點：header元素通常用於包含周圍部分的標題（h1-h6），但非必需
可放在section、article等段落標簽內作為章節頭部
不可放在<footer>、<address>或者另一個 <header> 元素內部
1.3.3基本語法：
1 <header class="page-header"> 2 <h1>Cute Puppies Express!</h1> 3 </header> 4 或 5 <article> 6 <header> 7 <h2>The Planet Earth</h2> 8 <p>Posted on Wednesday, 4 October 2017 by Jane Smith</p> 9 </header> 10 <p>We live on a planet that's blue and green, with so many things still unseen</p> 11 <p> 12 <a href="https://janesmith.com/the-planet-earth/">Continue reading....</a> 13 </p> 14 </article>
1.4nav標簽
1.4.1用法：定義導航欄，描繪一個含有多個超鏈接的區域
1.4.2注意點：一個網頁內可含多個nav元素，可以一個是網站內導航，一個是本頁面導航
1.4.3基本語法：
1 <nav> 2 <ul> 3 <li><a href="#">Home</a></li> 4 <li><a href="#">About</a></li> 5 <li><a href="#">Contact</a></li> 6 </ul> 7 </nav>
1.5footer標簽
1.5.1用法：定義頁腳或章節的底部，用於描述作者、版權數據或與文檔相關的鏈接等信息
1.5.2基本語法：
1 <footer> 2 Some copyright info or perhaps some author info for an <article>? 3 </footer>
1.6section標簽
1.6.1用法：定義文檔的章節或段落，一般會包含一個標題（heading）
1.6.2注意點：元素內容若分為幾部分時，應使用article
不可當做普通容器使用，特別是僅為當成片段（the sectioning）美化（不要直接在section上設置樣式，請內嵌div設置樣式）
應出現在文檔大綱中
一定不可作為address元素的子節點
1.6.3基本語法：
1 <section> 2 <h1>Heading</h1> 3 <p>Bunch of awesome content</p> 4 </section>
1.7article標簽
1.7.1用法：表示文檔、頁面、應用或網站中的可獨立分配或可復用結構，如：論壇帖子、雜志新聞、博客中用戶提交的評論；交互式組件
1.7.2注意點：當<article>元素嵌套使用時，則該元素代表與外層元素有關的文章，如代表博客評論的<article>元素可嵌套在代表博客文章的<article>元素中
<article>元素的作者信息可通過address元素提供，但是不適用於嵌套的<article>元素
<article>元素的發布日期和時間可通過time元素的pubdate屬性表示
1.7.3基本語法：
1 <article class="film_review"> 2 <header> 3 <h2>Jurassic Park</h2> 4 </header> 5 <section class="main_review"> 6 <p>Dinos were great!</p> 7 </section> 8 <section class="user_reviews"> 9 <article class="user_review"> 10 <p>Way too scary for me.</p> 11 <footer> 12 <p> 13 Posted on <time datetime="2015-05-16 19:00">May 16</time> by Lisa. 14 </p> 15 </footer> 16 </article> 17 <article class="user_review"> 18 <p>I agree, dinos are my favorite.</p> 19 <footer> 20 <p> 21 Posted on <time datetime="2015-05-17 19:00">May 17</time> by Tom. 22 </p> 23 </footer> 24 </article> 25 </section> 26 <footer> 27 <p> 28 Posted on <time datetime="2015-05-15 19:00">May 15</time> by Staff. 29 </p> 30 </footer> 31 </article>
1.8aside標簽
1.8.1用法：表示<article>元素的內容之外的，與<article>元素的內容相關的輔助信息，被認為是獨立於該內容的一部分並且可以被單獨的拆分出來而不會使整體受影響，如側邊欄或者標注框（call-out boxes）
1.8.2注意點：不要使用<aside>元素去標記括號內的文本 ，因為括號內的文本被認為是主要流內容的一部分（如下圖：雖然綠框內為補充內容但還是主要內容不可分割的部分）
1.8.3基本語法：
1 <p>Salamanders are a group of amphibians with a lizard-like appearance, including short legs and a tail in both larval and adult forms.</p> 2 <aside> 3 <p>The Rough-skinned Newt defends itself with a deadly neurotoxin.</p> 4 </aside> 5 <p>Several species of salamander inhabit the temperate rainforest of the Pacific Northwest, including the Ensatina, the Northwestern Salamander and the Rough-skinned Newt. Most salamanders are nocturnal, and hunt for insects, worms and other small creatures.</p>
1.9address標簽
1.9.1用法：表示其中的HTML提供了某個人或某組織等的聯系方式
1.9.2基本語法：
1 <p>Contact the author of this page:</p> 2 <address> 3 <a href="mailto:jim@rock.com">jim@rock.com</a><br/> 4 <a href="tel:+311-555-2368">+311-555-2368</a><br/> 5 </address>
1.0main標簽
1.0.1用法：定義body或應用的主體部分，主體部分由與文檔直接相關，或者擴展於文檔的中心主題、應用的主要功能部分的內容組成
1.0.2注意點：該標簽的內容在文檔中應當是獨一無二的，不包含任何在一系列文檔中重復的內容，比如側邊欄，導航欄鏈接，版權信息，網站 Logo，搜索框（除非搜索框為文檔的主要功能）
1.0.3基本語法：
1 <!-- 其他內容 --> 2 3 <main> 4 <h1>Apples</h1> 5 <p>The apple is the pomaceous fruit of the apple tree.</p> 6 7 <article> 8 <h2>Red Delicious</h2> 9 <p>These bright red apples are the most common found in many 10 supermarkets.</p> 11 <p>... </p> 12 <p>... </p> 13 </article> 14 15 <article> 16 <h2>Granny Smith</h2> 17 <p>These juicy, green apples make a great filling for 18 apple pies.</p> 19 <p>... </p> 20 <p>... </p> 21 </article> 22 23 </main> 24 25 <!-- 其他內容 -->
1.11figure與figcaption標簽
1.11.1用法：figure定義獨立的流內容（圖像、圖表、照片、代碼等等），其內容應該與主內容相關，但如果被刪除，則不應對文檔流產生影響
figcaption定義figure的說明/標題
1.11.2基本語法：
1 <figure> 2 <img src=“路徑” alt=“” width=“304” height=“228“ /> 3 <figcaption>標題</figcaption> 4 </figure>
1.12embed標簽
1.12.1用法：定義了一個容器，用來嵌入外部應用或者互動程序（插件）
1.12.2屬性：width、height
type：MIME、src：URL
1.13base標簽
1.13.1用法：為頁面上的所有鏈接規定默認地址或默認目標
1.13.2注意點：通常情況下，瀏覽器會從當前文檔的 URL 中提取相應的元素來填寫相對 URL 中的空白，使用 <base> 標簽后，瀏覽器將不再使用當前文檔的 URL，而使用指定的基本 URL 來解析所有的相對 URL（包括 <a>、<img>、<link>、<form> 標簽中的 URL）
1.13.3屬性：href、target
1.13.4基本語法：
1 <head> 2 <base href=“/images/xx..." target="_blank"/> 3 </head>
1.14bdo標簽
1.14.1用法：用於覆蓋當前文本的朝向，它使得字符按給定的方向排列
1.14.2屬性： ltr（ 從左往右寫，與現代漢語的書寫習慣相同）
rtl（從右往左寫，與古代漢語書寫習慣相同）
1.14.3基本語法：
1 <!-- 改變文本方向 --> 2 <p>This text will go left to right.</p> 3 <p> 4 <bdo dir="rtl">This text will go right to left.</bdo> 5 </p>
1.15canvas標簽
1.15.1用法：定義一個圖形容器，用於圖形的繪制，通過腳本 (通常是JavaScript)來完成，可繪制路徑,盒、圓、字符以及添加圖像
1.15.2屬性：width、height、id
參考文獻：https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document
https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list
2、CSS的引用
2.1CSS的定義
CSS（Cascading Style Sheets）：層疊樣式表，用於靜態修飾網頁，還可配合腳本語言動態地格式化網頁各元素
2.2CSS的工作原理
當瀏覽器顯示文檔時，必將文檔的內容與其樣式信息結合，分兩個階段處理文檔（如下圖）：
瀏覽器將HTML和CSS轉成DOM（文檔對象模型）
瀏覽器顯示DOM的內容
2.3CSS的語法結構
CSS 語法由三部分構成：選擇符、屬性和值
2.3CSS的引用
2.3.1行內樣式表（style屬性）
<body style="background-color:#ccccc;">
2.3.2內部樣式表（style元素）
1 <head> 2 <style type="text/css"> 3 body { 4 background-color:#ccccc; 5 } 6 </style> 7 </head>
2.3.3外部樣式表（樣式表文件.css）
1 style.css: 2 3 body { 4 background-color:#cccccc; 5 } 6 7 index.html: 8 9 <head> 10 <link rel="stylesheet" type="text/css" href="style.css" /> 11 </head>
2.4CSS的優先級（cascading order）
2.4.1定義：CSS的優先級，即層疊順序。css規則由選擇器和聲明塊組成,寫在選擇器后面大括號里的就叫聲明。css繼承是從一個元素向其后代元素傳遞屬性值所采用的機制。確定應當向一個元素應用哪些值時，瀏覽器不僅要考慮繼承，還要考慮聲明的特殊性，另外需要考慮聲明本身的來源。這個過程就稱為層疊。——《css權威指南》
2.4.2user agent內部如何給屬性賦值
在user agent解析完文檔並生成DOM樹后，需給DOM樹上的每個元素所有屬性賦值，大致分4步驟：
A.specified value：根據指定得到特殊值
A.1若cascade可產生一個值，則specified value=cascade_value
A.2否則，若該屬性是可以繼承的並且該元素不是DOM樹的根元素，則specified value=computed value（繼承）
A.3否則，使用該屬性的initial value，而initial value來自規范中屬性的定義
B.computed value：specified value被解析為可用於繼承的值，即computed value
B.1specified value通過層疊被轉換成computed value，即計算computed value時無需user agent去渲染文檔。（如：在css代碼中使用em和ex單位的資源在這個階段可以被計算為pixel或者絕對長度）
B.2若user agent無法將specified value轉成絕對值，則computed value=specified value
C.used value：若有必要時，computed value轉成絕對值，即used value
C1.由上可得：user agent在計算computed value時，會盡可能不格式化文檔，但有些時候，某些屬性值只能在布局完成時確定（如：A元素的 width: 50%, 而具體的 width計算需要獲得A的containing block的width）
C2.used value就是將computed value與其相關依賴結合獲得一個絕對值，若computed value本身無依賴，已為絕對值，則used value=computed value
D.actual value：最后根據本地環境的限制，used value轉成actual value
D.1通常，used value就是最終用來去渲染的值，但有時user agent無法在給定的環境當中使用該值。（如：user agent可能只能使用整數像素來渲染 border，如果used value是浮點數，就不得不對該值進行近似處理）而actual value就是經過近似處理后可使用的used value
2.4.3繼承
屬性值的繼承主要出現在獲取 specified value 的第二步。即在層疊無法給出一個值的情況下，若該屬性是可繼承的並且該元素不是DOM樹的根元素，specified value就等於父元素的 computed value
在繼承發生的情況下， 子元素屬性繼承父元素的 computed values。即該子元素的這個屬性的 specified value 和 computed value 都等於其父元素該屬性的 computed value
<style> body {font-size: 10pt} h1 {font-size: 130%} </style> <body> <h1>A <em>large</em> heading</h1> </body>
根據規范，h1 element的font-size屬性的computed value 為 13pt（130% * 10pt）
em element的 font-size屬性值可以繼承，因此em element的 font-size的 specified value 和 computed value 都為 13pt. 如果user agent 沒有可用的13pt字體，那么 font-size 的 actual value 可能是其他值，比如 12pt
注意：繼承遵循DOM樹, 並且不會被 anonymous boxes 給截斷。
2.4.3如何查找element property的值
A.找出target media type下面，所有適用於該元素和目標屬性的聲明
B.根據importance(normal or important)和origin(author, user, user agent)來升序優先級排序
C.對於相同importance 和 origin的規則按照選擇器的specificity來排序
D.最后按照指定的順序（即出現的先后順序）來排序
2.4.3.1importance(normal or important)和origin(author, user, user agent)的優先級（升序）
A.user agent 聲明
B.user normal 聲明
C.author normal 聲明
D.author important 聲明
E.user important 聲明
瀏覽器默認樣式(default style)：user agent 聲明：Default style sheets are supplied by the browser vendor.
網站自制樣式(author style)：author 聲明：Author style sheets are supplied by the author of a webpage.
用戶自定義樣式(user style)：user 聲明：User style sheets are supplied by the user of the browser.（如字體加大、改個顏色什么的，主要是滿足 Web accessibility（網絡無障礙）要求，以實現失能人士可以順利獲取信息的一般權利）
重要性樣式：！important：
A.author樣式表和user樣式表都包含!important聲明，那么user的!important聲明會覆蓋author的!important規則。目的是給與用戶在表現上的特殊需求的控制，來提高用戶的訪問效果
B.賦予簡寫屬性(如background)!important規則，等價於給其所有的子屬性都賦予!important規則
2.4.3.2計算選擇器的specificity
CSS規范當中在計算選擇器的specificity時候采用了a，b，c，d四個變量，優先級為降序
A.聲明來自元素的line-style屬性而不是選擇器樣式規則，則a=1，否則a=0
B.計算選擇器中ID屬性的數量（=b）
C.計算選擇器中屬性和偽類的數量（=c）
D.計算選擇器中元素名和偽元素的數量（=d）
1 * {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */ 2 li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */ 3 li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ 4 ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ 5 ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */ 6 h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */ 7 ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */ 8 li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */ 9 #x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */ 10 style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
2.4.4特殊部分
2.4.4.1:not偽類：在計算選擇器數量時，把其中的選擇器當做普通選擇器進行計數，即:not(selector)中依靠selector計算
2.4.4.2基於形式的優先級：選擇器的specificity只根據選擇器的形式來定（如：[id=p33]形式的選擇器只被算作是一個屬性選擇器(a=0, b=0, c=1, d=0),盡管id屬性在源文檔的DTD中被定義為ID）
2.4.4.3無視DOM樹中的距離
CSS部分：
1 body h1 { 2 color: green; 3 } 4 html h1 { 5 color: purple; 6 }
HTML部分：
<html> <body> <h1>Here is a title!</h1> </body> </html>
展示效果：
參考文獻：https://www.w3.org/TR/CSS21/cascade.html
https://blog.csdn.net/weixin_33712881/article/details/87977330
https://www.jianshu.com/p/2df386092620
https://www.cnblogs.com/qiuchen/p/4573055.html
3、CSS的選擇器
3.1簡易選擇器（simple selectors）：*，class，id，element
3.2屬性選擇器（attribute selectors）：屬性/屬性值
3.3偽類選擇器（pseudo-classes selectors）：狀態偽類、結構偽類
3.3.1nth-child與nth-of-type的區別
ele：nth-child（n）指父元素下的第n個元素且該元素為ele
ele：nth-of-type（n）指父元素下第n個元素
1 <style> 2 .demo li:nth-child(2) { 3 color: #ff0000; 4 } 5 6 .demo li:nth-of-type(2) { 7 color: #00ff00; 8 } 9 </style> 10 <body> 11 <div> 12 <ul class="demo"> 13 <p>zero</p> 14 <li>one</li> 15 <li>two</li> 16 <p>four</p> 17 </ul> 18 </div> 19 </body>
上圖說明，li:nth-child：表示父元素的第二個孩子one，li:nth-of-type：表示父元素的<li>標簽的第二個two，去掉li再試一次
<style> .demo :nth-child(2) { color: red; } .demo :nth-of-type(2) { color: green; } </style>
上圖說明，nth-child：依舊表示父元素的第二個孩子one，nth-of-type：表示父元素的<li>標簽的第二個two與<p>標簽的第二個four
3.3.2:placeholder的兼容性寫法
1 input::-webkit-input-placeholder { 2 color: green;} 3 input:-ms-input-placeholder { // IE10+ 4 color: green;} 5 input:-moz-placeholder { // Firefox4-18 6 color: green;} 7 input::-moz-placeholder { // Firefox19+ 8 color: green;}
3.4偽元素選擇器（pseudo-elements selectors）
3.4.1::before與::after需要寫上content=""
3.5組合選擇器（combinators selectors）：組合兩個/更多的選擇器
3.5.1A B：被A元素包含的B元素
3.5.2A > B：所有作為B元素的子元素A
3.5.3A + B：選擇緊貼在A元素之后B元素
3.5.4A ~ B：選擇A元素所有兄弟B元素
3.6多重選擇器（multiple selectors）：p.last
3.7選擇器權重表
3.7.1規律：選擇符越仔細，權重越高
行內樣式 > 內部樣式 > 外部樣式
詳細列表：http://www.wenkaiqing.com/bokeyuannotes/selectors.html