頁面的基本結(jié)構(gòu)
1 .文檔類型
<!DOCTYPE html>
1 .這里要使用HTML5文檔.簡短，容易記住而且向后兼容
2 .
2 .文件語言
<html lang='en-us'>
1 .使用元素lang上的屬性設(shè)置文檔語言
2 .可以有利于可訪問性和搜索引擎硼讽，有助于本地化內(nèi)容，并提醒人們使用最佳實(shí)踐
3 .文檔字符集
<meta charset="utf-8">
1 .頁面使用urf-8編碼
2 .一定要在html內(nèi)盡早指定字符head集浪藻∠凡郑可以防止ie的安全漏洞
4 .視口源標(biāo)記
1 .則是為了兼容移動端的設(shè)備
編寫小技巧
1 .雖然元素的標(biāo)簽和屬性都是支持大小寫的，但是最好是全部小寫毙死，這樣看起來更加整潔
2 .尾隨斜杠。不需要為空元素提供尾部斜杠喻鳄，這樣會減慢渲染速度扼倘。也會破壞舊瀏覽器
<input type='text'>
<hr>
//推薦
<hr />
3 .屬性。將所有熟悉值放在雙引號中除呵，雖然省略引號很誘人再菊，但是有標(biāo)記更整潔，易于閱讀理解.注意颜曾，還要使用雙引號纠拔。
4 .類和id名稱:使用連字符分隔多個單詞，不要使用駝峰式
<p class="editorial-summary"></p>
//好的
<p class=="bigRedBox"></p>
html元素分類
1 .會列出全部元素泛豪，也會分類
根元素
1 .html:代表HTML文檔的根稠诲，是頂級元素，所有其他元素都必須是該元素的后代
文檔元數(shù)據(jù)
1 .元數(shù)據(jù)包括有關(guān)頁面的信息诡曙。這包括幫助軟件臀叙，瀏覽器，搜索引擎等使用和呈現(xiàn)頁面的樣式价卤，腳本和數(shù)據(jù)的信息劝萤。
1 .base：html元素指定用于文檔中所有相對url的基本url，文檔只能有一個base元素
2 .head：包含有關(guān)文檔的機(jī)器可讀信息慎璧，例如標(biāo)題床嫌，腳本，樣式表
3 .link:元素執(zhí)行當(dāng)前文檔和外部資源之間的關(guān)系胸私。此元素最常用于鏈接到css厌处，但也用于建立站點(diǎn)圖表等等
4 .style:元素包含文檔或文檔的一部分樣式信息。他包含css,應(yīng)用于包含該元素的文檔的內(nèi)容
5 .title:定義了顯示在瀏覽器標(biāo)題欄或者頁面選項(xiàng)卡中的文檔標(biāo)題.只包含文本岁疼。元素內(nèi)的標(biāo)簽被忽略
6 .meta:表示無法由html表示的一些元數(shù)據(jù)阔涉。常見的有charset="utf-8"
切根
1 .body：HTML元素表示HTML文檔的內(nèi)容。文檔中只能有一個元素body
內(nèi)容分割
1 .內(nèi)院分段元素允許你將文檔內(nèi)容組織成邏輯片段。使用分段元素為您的頁面內(nèi)容創(chuàng)建一個粗略的大綱洒敏，包括頁眉和頁腳導(dǎo)航，以及用于標(biāo)識內(nèi)容部分的標(biāo)題元素
2 .address
3 .nav
4 .aside
5 .footer
6 .header
7 .h1-h6
8 .main
9 .article:表示文檔疙驾、頁面凶伙、應(yīng)用程序或站點(diǎn)中的自包含組合，旨在獨(dú)立分發(fā)或重復(fù)使用（例如它碎，在聯(lián)合中）函荣。示例包括：論壇帖子、雜志或報(bào)紙文章扳肛、博客條目傻挂、產(chǎn)品卡片、用戶提交的評論挖息、交互式小部件或小工具金拒，或任何其他獨(dú)立的內(nèi)容項(xiàng)目
1 .特殊的section標(biāo)簽，具有更加明確的語義套腹，代表一個獨(dú)立的绪抛，完成的相關(guān)內(nèi)容塊
2 .一般來說會有以下幾部分，標(biāo)題电禀，內(nèi)容幢码，footer
3 .如果一個內(nèi)容可以脫離上下文，作為完整的結(jié)構(gòu)體獨(dú)立存在一段內(nèi)容尖飞，就可以使用article
4 .使用article的地方症副，也能使用section
10 .section:html元素表示文檔的通用獨(dú)立部分，他沒有更具體的語義元素來表示它政基。章節(jié)應(yīng)該總是有一個標(biāo)題贞铣，只有極少數(shù)有例外
1 .比div有一點(diǎn)語義，一般會帶有副標(biāo)題沮明。當(dāng)一個標(biāo)簽只是為了樣式化或者方便腳本使用的時(shí)候咕娄，應(yīng)該用div
2 .文章的章節(jié)，標(biāo)簽對話框的標(biāo)簽頁珊擂。
3 .https://developer.mozilla.org/en-US/docs/Web/HTML/Element#content_sectioning 可以看看這個網(wǎng)址的dom結(jié)構(gòu)圣勒，就是符合這個的
文字內(nèi)容-文本內(nèi)容的標(biāo)簽基本都是塊級元素
1 .使用HTML文本內(nèi)容來組織放置在開始body和結(jié)束body標(biāo)記之間的內(nèi)容塊或部分。對于可訪問性和SEO來說非常重要摧扇，這些元素確定了該內(nèi)容的目的或結(jié)構(gòu)
2 .blockquote
3 .dd,dl,dt
4 .div
5 .figure
6 .figcaption
7 .hr
8 .li
9 .meun
10 .ol
11 .p
12 .pre
13 .ul
內(nèi)聯(lián)文本語義-這個才是大部分都是內(nèi)聯(lián)元素-看起來這個和seo沒有關(guān)系啊
1 .a
2 .abbr
3 .b
4 .bdi
5 .bdo
6 .br
7 .cite
8 .code
9 .data
10 .dfn
11 .em
12 .i
13 .kbd
14 .mark
15 .q
16 .rp:用于為不支持使用該元素顯示 ruby 注釋的瀏覽器提供備用括號圣贸。一個元素應(yīng)包含每個左括號和右括號，這些括號包裹包含注釋文本的元素扛稽。<rp> ruby``<rp>``rt
17 .rt:指定了 ruby 注釋的ruby 文本組件吁峻，用于為東亞排版提供發(fā)音、翻譯或音譯信息。元素必須始終包含在元素中
18 .ruby:示在基本文本上方用含、下方或旁邊呈現(xiàn)的小注釋矮慕，通常用于顯示東亞字符的發(fā)音。它也可以用于注釋其他類型的文本啄骇，但這種用法不太常見
19 .s:呈現(xiàn)帶有刪除線或者穿過他的線的文本痴鳄。使用元素來表示不在相關(guān)或不在準(zhǔn)確的事物
20 .samp:用于包含表示來自計(jì)算機(jī)程序的示例（或引用）輸出的內(nèi)聯(lián)文本。它的內(nèi)容通常使用瀏覽器的默認(rèn)等寬字體（例如 Courier 或 Lucida Console）呈現(xiàn)
21 .small,big,strong
22 .span
23 .sub,sup
24 .time
25 .u:段內(nèi)聯(lián)文本缸夹，應(yīng)該以表明它具有非文本注釋的方式呈現(xiàn)痪寻。這默認(rèn)呈現(xiàn)為簡單的實(shí)線下劃線，但可以使用 CSS 進(jìn)行更改.但是這種好像沒有必要了虽惭，因?yàn)檫€是老原因橡类，僅僅是自己加了一個css樣式。沒有實(shí)際語義狀況芽唇。我們看標(biāo)簽現(xiàn)在感覺都是通過class顾画，不是通過標(biāo)簽了。他本來的標(biāo)簽是這個用處的匆笤。但是語義內(nèi)聯(lián)標(biāo)簽實(shí)際上沒有seo的狀況
26 .var:元素表示數(shù)學(xué)表達(dá)式或編程上下文中的變量名稱亲雪。它通常使用當(dāng)前字體的斜體版本呈現(xiàn)，盡管該行為取決于瀏覽器
27 .wbr:素代表一個分詞機(jī)會——文本中瀏覽器可以選擇換行的位置疚膊，盡管它的換行規(guī)則不會在該位置創(chuàng)建換行符
圖像和多媒體
1 .embed:元素在文檔中的指定點(diǎn)嵌入 外部內(nèi)容义辕，此內(nèi)容由無額愛步應(yīng)用程序或其他交互內(nèi)容源提供，比如瀏覽器插件寓盗，目前還沒見到過這個東西
2 .iframe
3 .object:表示一個外部資源灌砖，可以把他視為圖像，嵌套瀏覽器上下文或由插件處理的資源.這個也從來都沒用過
4 .param:定義元素的參數(shù).這個也沒用過
5 .picture:包含零個或者多個元素用于為不同的顯示傀蚌、設(shè)備場景提供圖像的替代版本
6 .portal:允許另一個html頁面順暢的嵌入當(dāng)前頁面中基显，以便順暢的導(dǎo)航到新頁面。全都不支持善炫，不看了撩幽。但是這個和iframe系施恩么關(guān)系呢
1 .他嵌入的網(wǎng)頁內(nèi)容是不能交互的。
7 .source:元素指定多個媒體資源箩艺。通常為多種文件格式提供相同的媒體資源窜醉，已提供和各種瀏覽器的兼容性。
SVG和MathML
1 .svg是一個定義新坐標(biāo)系和視口的容器艺谆。被用作svg文檔的最外層元素榨惰，但他可以用在SVG或html文檔中嵌入SVG片段
2 .MathML 中的頂級元素是<math>. 每個有效的 MathML 實(shí)例都必須包含在<math>標(biāo)簽中。此外静汤，您不能<math>在另一個元素中嵌套第二個元素琅催，但您可以在其中包含任意數(shù)量的其他子元素居凶。看起來是a2+b2=c2,應(yīng)該是用來表示數(shù)學(xué)公式的吧藤抡，但是好像幾乎所有的瀏覽器都不支持.
3 .
腳本
1 .為了創(chuàng)建動態(tài)內(nèi)容和web應(yīng)用程序侠碧，html支持使用腳本語言，最突出的是js
2 .canvas:這個竟然也算腳本缠黍。結(jié)合canvas腳本api和webGL api一起來繪制圖形和動畫
3 .noscript:這個也沒用過弄兜。如果頁面上的腳本類型不受支持或當(dāng)前在瀏覽器中關(guān)閉腳本。則HTML元素定義要插入的HTML部分嫁佳。
4 .script:元素用于嵌入可執(zhí)行代碼或數(shù)據(jù)。還可以和其他語言一起使用谷暮，比如GLSL著色編輯器
劃分編輯
1 .這些元素可以讓你指定文本的特定部分已被修改,比如todolist中已經(jīng)做的事情一般都是這樣
<del>123</del>
<ins>456</ins>
表格元素
1 .這個直接過濾蒿往，以后遇到表格的時(shí)候在看吧。
2 .目前想到的就是做一些合并單元格的時(shí)候需要湿弦。
表單元素
1 .button
2 .datalist
3 .fieldset
4 .form
5 .input
6 .label
7 .legend
8 .meter
9 .optgroup
10 .option
11 .output
12 .progress
13 .select
14 .textarea
互動元素
1 .html提供了一系列有助于創(chuàng)建交互式用戶界面對象的元素
2 .detalist:一個顯示小部件瓤漏，其中的信息僅在小部件切換到打開狀態(tài)時(shí)才可見。必須使用該元素提供摘要或標(biāo)簽
3 .summary:為元素的顯示框指定摘要颊埃，標(biāo)題或圖例蔬充。單擊元素可切換元素的打開和關(guān)閉狀態(tài)
網(wǎng)頁組件
1 .Web Components是一種與Html相關(guān)的技術(shù)，從本質(zhì)上講班利，他可以像普通html一樣創(chuàng)建和使用自定義元素饥漫。這個額沒有使用過
2 .slot
//可以看到，整個流程上罗标，其實(shí)沒有什么創(chuàng)新庸队，和復(fù)制粘貼沒啥本質(zhì)區(qū)別，需要寫的還是那么多代碼闯割，只是調(diào)用的時(shí)候方便一點(diǎn)彻消，看起來語義化一點(diǎn)
過時(shí)和廢棄的元素
1 .終于遇到了這些東西，可以從之前的那么多刪掉一些了
2 .accronym:允許作者清除的指示組成單詞首字母縮寫詞或縮寫的字符序列
3 .applet:可以將java小程序鑲嵌到文檔里面宙拉，但是這個元素已經(jīng)被棄用宾尚，取而代之是obejct
4 .basefont:繼承父元素的其他元素設(shè)置默認(rèn)字體，大小和顏色谢澈。有了這個設(shè)置煌贴，字體的大小就可以相對于使用元素的基本大小而改變
5 .bgsound:設(shè)置一個生硬文件在頁面使用時(shí)在后臺播放
6 .big
7 .blink:是一個非標(biāo)準(zhǔn)元素，會導(dǎo)致封閉的文本緩慢閃爍
8 .center:是塊級元素锥忿，在其包含元素中水平居中顯示其塊級或內(nèi)聯(lián)內(nèi)容
9 .content:在shadow DOM內(nèi)部用作插入點(diǎn)崔步，并不打算在普通html中使用，現(xiàn)在已經(jīng)被元素替換缎谷，該元素在DOM中創(chuàng)建一個可以插入影子DOM的點(diǎn)
10 .dir:用作文件或文件夾目錄的容器井濒，可能帶有用戶應(yīng)用的樣式和圖標(biāo)灶似。不要使用這個過時(shí)的元素，應(yīng)該使用ul
11 .font:定義了其內(nèi)容的字體大小瑞你，顏色和外觀
12 .frame:定義一個可以顯示另一個html文檔的特性區(qū)域.現(xiàn)在應(yīng)該使用frameset
13 .frameset
1 .<iframe>標(biāo)簽規(guī)定一個內(nèi)聯(lián)框架,一個內(nèi)聯(lián)框架被用來在當(dāng)前 HTML 文檔中嵌入另一個文檔,通過使用框架酪惭，你可以在同一個瀏覽器窗口中顯示不止一個頁面。iframe是一個內(nèi)聯(lián)框架者甲，是在頁面里生成內(nèi)部框架
<iframe id="mainIframe" style="width:100%;height:100%; " name="mainIframe" src="input.html" frameborder="0" scrolling="auto" ></iframe>
2 .frameset定義一個框架集春感，包含多個子框架，每個框架都是獨(dú)立的文檔
3 .通常上來說都是把這個當(dāng)成了布局空間
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm"></frame>
<frame src="frame_b.htm"></frame>
<frame src="frame_c.htm"></frame>
<noframes></noframes>
</frameset>
4 .原來是爹和兒子的關(guān)系
14 .hgroup:元素代表文檔部分的多級標(biāo)題虏缸，對一組元素進(jìn)行分類
15 .image;也是很老的一個元素鲫懒，不應(yīng)該被使用。直接img
16 .keygen:提交表單的時(shí)候攜帶一個自己的密匙材料
17 .marquee:用于插入文本的滾動區(qū)域刽辙，可以使用屬性控制文本到達(dá)內(nèi)容邊緣時(shí)發(fā)生的情況窥岩。這個還是走馬燈啊宰缤？颂翼？？
18 .menuitem:用戶能夠通過彈出菜單調(diào)用的命令慨灭、
19 .nor：防止文本自動換行朦乏，這可能導(dǎo)致用戶必須水平滾動才能看到文本的整個寬度
20 .noframes:提供不支持在瀏覽器中顯示的內(nèi)容。
21 .plaintext:元素將開始標(biāo)記之后的所有內(nèi)容呈現(xiàn)為原始文本氧骤，忽略任何后續(xù)HTML.沒有結(jié)束標(biāo)簽呻疹，因?yàn)樗蟮乃袃?nèi)容都被視為原始文本
22 .rb:用于分割注釋的基本文本組件。即被注釋的問呢
23 .rtc
24 .shadow:用作影子DOM插入點(diǎn)筹陵。在普通HTML中沒有用
25 .spacer:允許在頁面上行插入空格
26 .strike:允許在文本上防止一個刪除線
27 .tt:創(chuàng)建用戶代理默認(rèn)等寬字體顯示的內(nèi)聯(lián)文本诲宇。創(chuàng)建此元素是為了呈現(xiàn)文本，因?yàn)樗鼘@示在固定寬度的顯示器上惶翻，例如電傳打字機(jī)姑蓝，純文本屏幕或行式打字機(jī)。還以為是表格的一個被標(biāo)簽樣式吕粗。
28 .xmp:在開始和結(jié)束標(biāo)記之間呈現(xiàn)文本纺荧，而無需解釋中間的HTML并使用等寬字體。
