?1、html元素(包含lang屬性,該屬性不是必需的,但推薦加上)、?head元素、?說明字符編碼的meta元素 琉朽、title元素 毒租、body元素，以下為Html的基本格式
<!DOCTYPE html>
<html>
<head lang="en">
? ? ? ? <meta charset="UTF-8">
? ? ? ? <title>初學(xué)Html5</title>
</head>
<body>
</body>
</html>
初學(xué)Html5
2箱叁、<main 元素>大多數(shù)網(wǎng)頁都有一些不同的區(qū)塊,如頁眉墅垮、頁腳、包含額外信息的附注欄耕漱、指向其他網(wǎng)站的鏈接,等等算色。不過,一個頁面只有一個部分代表其主要內(nèi)容∶唬可以將這樣的內(nèi)容包在main元素中,該元素在一個頁面僅使用一次灾梦。
3、<article 元素>article元素表示文檔妓笙、頁面若河、應(yīng)用或網(wǎng)站中一個獨立的容器,原則上是可獨立分配或可再用的,就像聚合內(nèi)容中的各部分。它可以是一篇論壇帖子寞宫、一篇雜志或報紙文章萧福、一篇博客條目、一則用戶提交的評論辈赋、一個交互式的小部件或小工具,或者任何其他獨立的內(nèi)容項鲫忍。
4膏燕、<section 元素>section元素代表文檔或應(yīng)用的一個一般的區(qū)塊。在這里,section是具有相似主題的一組內(nèi)容,通常包含一個標(biāo)題悟民。section的例子包含章節(jié)坝辫、標(biāo)簽式對話框中的各種標(biāo)簽頁、論文中帶編號的區(qū)塊逾雄。比如網(wǎng)站的主頁可以分成介紹阀溶、新聞條目、聯(lián)系信息等區(qū)塊鸦泳。
5银锻、<aside 元素>使用aside的例子還包括重要引述、側(cè)欄做鹰、指向相關(guān)文章的一組鏈接(通常針對新聞網(wǎng)站)击纬、廣告、nav元素組(如博客的友情鏈接),Twitter源钾麸、相關(guān)產(chǎn)品列表(通常針對電子商務(wù)網(wǎng)站),等等更振。
6、<footer 元素>當(dāng)你想到頁腳的時候,你大概想的是頁面底部的頁腳(通常包括版權(quán)聲明,可能還包括指向隱私政策頁面的鏈接以及其他類似的內(nèi)容)饭尝。HTML5的footer元素可以用在這樣的地方,但它同header一樣,還可以用在其他的地方肯腕。footer元素代表嵌套它的最近的article、aside钥平、blockquote实撒、body、details涉瘾、fieldset知态、figure、nav立叛、section或td元素的頁腳负敏。只有當(dāng)它最近的祖先是body時,它才是整個頁面的頁腳。 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<提 示:不能在footer里嵌套header或另一個footer秘蛇。同時,也不能將footer嵌套在header或address元素里其做。注意只有頁面級頁腳有role="contentinfo">
7、<div 元素>有時需要在一段內(nèi)容外圍包一個容器,從而可以為其應(yīng)用CSS樣式或JavaScript效果赁还。如果沒有這個容器,頁面就會不一樣庶柿。在評估內(nèi)容的時候,考慮使用article、section秽浇、aside浮庐、nav等元素,卻發(fā)現(xiàn)它們從語義上講都不合適。這時,你真正需要的是一個通用容器,一個完全沒有任何語義含義的容器。這個容器就是div(來自division一詞)元素,有了div,就可以為其添加樣式或JavaScript效果了审残。（div是塊級內(nèi)容的無語義容器）
8梭域、一些可用的地標(biāo)角色
? ? ? <1>role="banner"(橫幅) 面向全站的內(nèi)容,通常包含網(wǎng)站標(biāo)志、網(wǎng)站贊助者標(biāo)志搅轿、全站搜索工具等病涨。橫幅通常顯示在頁面的頂端,而且通常橫跨整個頁面的寬度 ? <將其添加到頁面級的header元素,每個頁面只用一次>
? ? ? <2>role="navigation"(導(dǎo)航) 文檔內(nèi)不同部分或相關(guān)文檔的導(dǎo)航性元素(通常為鏈接)的集合 ? <與nav元素是對應(yīng)關(guān)系，應(yīng)將其添加到每個nav元素或其他包含導(dǎo)航性鏈接的容器璧坟。這個角色可在每個頁面上使用多次,但是同nav一樣,不要過度使用該屬性>
? ? ? <3>role="main"(主體)文檔的主要內(nèi)容? <與main元素是對應(yīng)關(guān)系既穆。最好將其添加到main元素,也可以添加到其他表示主體內(nèi)容的元素(可能是div)。在每個頁面僅使用一次>
? ? ? <4>role="complementary"(補充性內(nèi)容)文檔中作為主體內(nèi)容補充的支撐部分雀鹃。它對區(qū)分主體內(nèi)容是有意義的? ? <與aside元素是對應(yīng)關(guān)系幻工。應(yīng)將其添加到aside或div元素(前提是該div僅包含補充性內(nèi)容)±杈ィ可以在一個頁面里包含多個complementary角色,但不要過度使用>
? ? ? <5>role="contentinfo"(內(nèi)容信息)包含關(guān)于文檔的信息的大塊可感知區(qū)域這類信息的例子包括版權(quán)聲明和指向隱私權(quán)聲明的鏈接等? <將其添加至整個頁面的頁(通常為footer元素)囊颅。每個頁面僅使用一次>
9、<small 元素>根據(jù)HTML5,small表示細(xì)則一類的旁注(side comment),“通常包括免責(zé)聲明傅瞻、注意事項踢代、法律限制、版權(quán)信息等嗅骄。有時我們還可以用它來表示署名,或者滿足許可要求胳挎。”small通常是行內(nèi)文本中的一小塊,而不是包含多個段落或其他元素的大塊文本溺森。
10慕爬、標(biāo)記重要和強調(diào)的文本－<strong 元素 em 元素>strong元素表示內(nèi)容的重要性,而em則表示內(nèi)容的著重點。根據(jù)內(nèi)容需要,這兩個元素既可以單獨使用,也可以一起使用儿惫。? ? ? ? <HTML5中重新定義的b和i元素HTML5強調(diào)元素的語義,而非表現(xiàn)澡罚。b和i元素是早期HTML遺留下來的產(chǎn)物,它們分別用于將文本變?yōu)榇煮w和斜體(那時CSS還未出現(xiàn))伸但。HTML 4和XHTML 1當(dāng)然拋棄了它們,因為它們本質(zhì)上是用于表現(xiàn)的肾请。當(dāng)時的規(guī)范建議編碼人員用strong替代b,用em替代i。不過,事實證明,em和strong有時在語義上并不合適更胖。為此,HTML5重新定義了b和i铛铁。傳統(tǒng)出版業(yè)里的某些排版規(guī)則在現(xiàn)有的HTML語義中還找不到對應(yīng)物,其中就包括用斜體表示植物學(xué)名(如“Ulmus americanais the Massachusetts state tree.”)、具體的交通工具名稱(如“We rode theOrient Express.”)及外來語(如“The couple exhibited ajoie de vivrethat was infectious.”)却妨。這些詞語不是為了強調(diào)而加上斜體的,只是樣式上的慣例饵逐。為了應(yīng)對這些情況,HTML5沒有創(chuàng)建一些新的語義化元素(進一步把事情搞復(fù)雜),而是采取了一種很實際的做法,直接利用現(xiàn)有元素:em用于所有層次的強調(diào),strong用于表示重要性,而其他情況則使用b和i。這意味著,盡管b和i并不包含任何明顯的語義,但讀者仍能發(fā)現(xiàn)它們與周邊文字的差別彪标。而且你還可以通過CSS改變它們粗體或斜體的樣式倍权。HTML5強調(diào),b和i應(yīng)該是其他元素(如strong、em捞烟、cite等)都不適用時的最后選擇薄声。>
11当船、<b 元素>b元素表示出于實用目的提醒讀者注意的一塊文字,不傳達(dá)任何額外的重要性,也不表示其他的語態(tài)和語氣,用于如文檔摘要里的關(guān)鍵詞、評論中的產(chǎn)品名默辨、基于文本的交互式軟件中指示操作的文字德频、文章導(dǎo)語等。------b元素默認(rèn)顯示為粗體缩幸。
12壹置、<i 元素>i元素表示一塊不同于其他文字的文字,具有不同的語態(tài)或語氣,或其他不同于常規(guī)之處,用于如分類名稱、技術(shù)術(shù)語表谊、外語里的慣用語钞护、翻譯的散文、西方文字中的船舶名稱等铃肯。------i元素默認(rèn)顯示為斜體患亿。
13、<figure 元素 figcaption 元素>你一定在報紙押逼、雜志步藕、報告等其他媒介上看到過圖。通常,圖是由頁面上的文本引述出來的挑格。通過引入figure和figcaption,HTML5可以表示圖可以是圖表咙冗、照片、圖形漂彤、插圖雾消、代碼片段,以及其他類似的獨立內(nèi)容。figcaption是figure的標(biāo)題,可選,出現(xiàn)在figure內(nèi)容的開頭或結(jié)尾處挫望。
14立润、<cite 元素>使用cite元素可以指明對某內(nèi)容源的引用或參考。例如,戲劇媳板、腳本或圖書的標(biāo)題,歌曲桑腮、電影、照片或雕塑的名稱,演唱會或音樂會,規(guī)范蛉幸、報紙或法律文件等----cite元素默認(rèn)以斜體顯示
15破讨、<blockquote 元素 q 元素> 引述文本--有兩個特殊的元素用以標(biāo)記引述的文本。blockquote元素表示單獨存在的引述(通常更長,但也可能不是),它默認(rèn)顯示在新的一行奕纫。而q元素則用于短的引述,如句子里面的引述提陶。
16、<address 元素>address元素是用以定義與HTML頁面或頁面一部分(如一篇報告或新文章)有關(guān)的作者匹层、相關(guān)人士或組織的聯(lián)系信息,通常位于頁面底部或相關(guān)部分內(nèi)隙笆。
17、<ins 元素 del 元素 s 元素>有時可能需要將在前一個版本之后對頁面內(nèi)容的編輯標(biāo)出來,或者對不再準(zhǔn)確、不再相關(guān)的文本進行標(biāo)記撑柔。有兩種用于標(biāo)注編輯的元素:代表添加內(nèi)容的ins元素和標(biāo)記已刪除內(nèi)容的del元素煤率。這兩個元素既可以單獨使用,也可以一起使用。s元素表示不在準(zhǔn)確的內(nèi)容乏冀。
18蝶糯、<mark 元素>我們都在某些時候用過熒光筆——也許是在復(fù)習(xí)考試,抑或是在審查合同。無論是哪種情況,熒光筆標(biāo)記的都是一些與任務(wù)有關(guān)的關(guān)鍵字詞辆沦。HTML5使用新的mark元素實現(xiàn)同樣的目的昼捍。試著將mark想象成熒光筆的語義化對照物。換句話說,重要的是對特定的詞語進行標(biāo)注,與它們?nèi)绾物@示無關(guān)肢扯。
19妒茬、<br 元素>插入換行的方法在需要換行的地方輸入<br/>。沒有單獨的br結(jié)束標(biāo)簽,因為它是所謂的空元素,沒有任何內(nèi)容蔚晨。
20乍钻、<span 元素>同div一樣,span元素是沒有任何語義的。不同的是,span只適合包圍字詞或短語內(nèi)容,而div適合包含塊級內(nèi)容铭腕。
