Python項目-Day32-HTML5-語義化標籤-智能表單-選擇器
HTML5是什麼?
HTML5是一個新的網絡標準，目標是取代現有的HTML 4.01和XHTML 1.0 標準。它希望能夠減少互聯網富應用（RIA)對Flash、Silverlight、JavaFX等的依賴，並且提供更多能有效增強網絡應用的API。
HTML5的標識
<!DOCTYPE html>#該句爲HTML5標識 <html lang="en"> <head> <meta charset="UTF-8">meta標籤
meta標籤的作用
\ 元素可提供有關頁面的元信息（meta-information），比如針對搜索引擎和更新頻度的描述和關鍵詞。
\ 標籤位於文檔的頭部，不包含任何內容。 標籤的屬性定義了與文檔相關聯的名稱/值對。
HTML 與 XHTML 之間的差異
在 HTML 中， 標籤沒有結束標籤。
在 XHTML 中， 標籤必須被正確地關閉。
提示和註釋：
註釋： 標籤永遠位於 head 元素內部。
註釋：元數據總是以名稱/值的形式被成對傳遞的。
必需的屬性
屬性 值 描述 content some_text 定義與 http-equiv 或 name 屬性相關的元信息 meta舉例
<meta name="Keywords" content="網易,郵箱,遊戲,新聞,體育,娛樂,女性,亞運,論壇,短信,數碼,汽車,手機,財經,科技,相冊" /> <meta name="Description" content="網易是中國領先的互聯網技術公司，爲用戶提供免費郵箱、遊戲、搜索引擎服務，開設新聞、娛樂、體育等30多個內容頻道，及博客、視頻、論壇等互動交流，網聚人的力量。" />
HTML5語義化標籤
作用:創建結構清晰的頁面可以建立良好的語義化基礎，也降低了使用css的難度,也能針對搜索引擎和更新頻度的描述和關鍵詞。
![]()
header標籤
header標記一般放置在頁面的頂部，或者頁面中某個區塊元素的頂部，包含整個頁面或區塊的標題、簡介等信息。
一篇文檔中可以包含多個header標記
可以爲body、article、section、aside標記增加header標記
header標記未必位於頁面的頂部
footer標籤
footer標記一般放置在頁面的底部，或者頁面中某個區塊元素的底部。
nav標籤
nav標記表示頁面的導航，可以通過導航連接到網站的其它頁面，或當前頁面的其它部分。
aside標籤
aside包含的內容不是頁面的主要內容，具有獨立性，是對頁面內容的補充。
應用:
頁面的側邊欄
文章引語（內容摘要）
廣告
友情鏈接
article
article標籤表示的是一個獨立完整的內容區域，比如一張報紙的某個獨立版塊。
應用:
一篇博客
一個論壇帖子
一片新聞報道
一個用戶論壇
section標籤
section表示一個主題性的內容分組，通常包含一個頭部（header），可能還會有一個尾部（footer）。
figure標籤
figure表示頁面中的插圖，通常結合figcaption一起使用。
time標籤
time表示一個日期、時間，或日期和時間值。
可以被搜索引擎、屏幕閱讀器等識別。main標籤
main標籤定義一個頁面的主要內容，在一個頁面中只能使用一次。
html語義化示例
<div class="container"> <header> <div class="logo"></div> <nav></nav> </header> <div class="main"> <aside></aside> <section> <article> <header></header> <div class="content"></div> <h6></h6> </article> </section> </div> <footer></footer> </div>
智能表單
H5新增input的form屬性，用於指向特定form表單的id，實現input無需放在form標籤之中，即可通過表單進行提交。
<FORM id=foo> … </FORM> <INPUT … form="foo">input標籤有:button
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week![]()
![]()
input標籤配合datalist標籤，能實現自動補全的效果
<input type="search" list="search"> <datalist id="search"> <option >黑老師的由來</option> <option >男人緣何腎虛</option> <option >佳佳婕婕不得不說的故事</option> </datalist>HTML5的選擇器
屬性選擇器
/*<!--屬性選擇器-->*/ .container [id^='book00']{ color: #0d78ff; } .container [id='book001']{ color: red; } .container [id$='4']{ color: black; } .container [id*='5']{ color: #4C4C4C; } /* =直接相等 ^以什麼開頭 $以什麼結尾 *包含什麼內容 */Element[attr]
Element[attr = “value”]
Element[attr ^= “value”]：以value開頭
Element[attr $= “value”]：以value結尾
Element[attr *= “value”]：只要包含value
Element[attr ~= “value”]：必須有value這個詞，
Element[attr |= “value”]： 屬性值以value-開頭，比如：zh-cn
<p data-text="one web-js">不走尋常路？美國邁入“特朗普時代”的5大猜想</p> <p data-text="web-js one">不走尋常路？美國邁入“特朗普時代”的5大猜想</p> <p data-text="two web-css">河北一假信用點捲走500戶村民2000餘萬存款</p> <p data-text="web-css two">河北一假信用點捲走500戶村民2000餘萬存款</p> <p data-text="three web-html">馬來西亞警方搗毀一組織中國籍殘疾人行乞團伙</p> <p data-text="web-html three">馬來西亞警方搗毀一組織中國籍殘疾人行乞團伙</p> <p data-text="four xxx">揭祕四川巡山騎警：聽狼嚎追馬賊 每次任務都是玩命</p> <p data-text="five ccc xxx">成都地面沉降最快地方1.4釐米/年 專家剖析主因</p> <p data-text="six ccc ttt">成都地面沉降最快地方1.4釐米/年 專家剖析主因</p> p{ line-height: 24px; font-size: 12px;} p[data-text]{border-bottom: 1px solid #000;} p[data-text = "one"]{background: pink;} p[data-text ^= "t"]{background: green} p[data-text $= "x"]{background: grey} p[data-text *= "r"]{color: red} p[data-text ~= "ccc"]{color: blue} p[data-text |= "web"]{font-weight: bold; font-size: 20px;}層級選擇器
子選擇器
.div-a>div相鄰兄弟選擇器
.div-a+div後代選擇器
.div-a div通用選擇器
.div-a~div
子選擇器與後代選擇器的區別:
作用於元素的第一代後代，空格作用於元素的所有後代
僞選擇器
![]()
befor選擇器
“:before” 僞元素可以在元素的內容前面插入新內容。
.container:before{ content: ""; display: block; width: 200px; height: 200px; background-color: #1eff06; }after選擇器
“:after” 僞元素可以在元素的內容之後插入新內容。
.container:after{ content: ""; display: block; width: 200px; height: 300px; background-color: #4C4C4C; }錨僞類
a:link {color: #FF0000} /* 未訪問的鏈接 */ a:visited {color: #00FF00} /* 已訪問的鏈接 */ a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */ a:active {color: #0000FF} /* 選定的鏈接 */ a: focus{color: #0000FF} 匹配當前獲得焦點的元素
必須按照lvhc的順序來寫
結構性僞類選擇器
first-chile僞類
.div01-css p:first-childlast-child僞類
匹配最後一個字元素
only-child僞類
子元素選擇器，匹配父元素包含的唯一子元素
only-of-type
.div01-css h1:only-of-type /*表示唯一的一個h1標籤*/: nth-child(n)
匹配父元素中的第幾個孩子
:nth-last-child(n)
匹配父元素中倒數第幾個孩子
: nth-of-type(n)
.div01-css h1:nth-of-type(1)匹配順數的第一個h1標籤
: nth-last-of-type(n)
.div01-css h1:nth-last-of-type(1)匹配順數的第一個h1標籤
UI僞類選擇器
: enabled 匹配處於啓用狀態的元素
: disabled 匹配處於禁用狀態的元素
: checked 匹配處於選中狀態的元素
: default 匹配默認狀態的元素
![]()
