1.什么是語義化標(biāo)簽?(就是用合理恩尾、正確的使用標(biāo)簽來展示內(nèi)容)
那么什么叫做語義化呢厚柳，說的通俗點(diǎn)就是：明白每個(gè)標(biāo)簽的用途（在什么情況下我可以使用這個(gè)標(biāo)簽才合理）比如砸泛，
網(wǎng)頁上的文章的標(biāo)題就可以用標(biāo)題標(biāo)簽凯砍，網(wǎng)頁上的各個(gè)欄目的欄目名稱也可以使用標(biāo)題標(biāo)簽愤炸。
文章中內(nèi)容的段落就得放在段落標(biāo)簽中，在文章中有想強(qiáng)調(diào)的文本矾睦，就可以使用em標(biāo)簽表示強(qiáng)調(diào)等等晦款。
2.為啥使用語義化標(biāo)簽?
有利于SEO，搜索引擎根據(jù)標(biāo)簽來確定上下文和各個(gè)關(guān)鍵字的權(quán)重
有利于開發(fā)和維護(hù)枚冗，語義化更具可讀性缓溅，代碼更好維護(hù)，與CSS3關(guān)系更和諧赁温。
易于用戶閱讀坛怪，樣式丟失的時(shí)候能讓頁面呈現(xiàn)清晰的結(jié)構(gòu)。
兼容性更好股囊，支持更多的網(wǎng)絡(luò)設(shè)備
3.html語義化標(biāo)簽
1):<a>標(biāo)簽:實(shí)現(xiàn)超鏈接
強(qiáng)調(diào):title屬性的作用袜匿，鼠標(biāo)滑過鏈接文字時(shí)會(huì)顯示這個(gè)屬性的文本內(nèi)容。這個(gè)屬性在實(shí)際網(wǎng)頁開發(fā)中作用很大稚疹，主要方便搜索引擎了解鏈接地址的內(nèi)容（語義化更友好）
2):<p>標(biāo)簽:文章段落放到<p>標(biāo)簽中
3):<hx>標(biāo)簽:文章標(biāo)題,欄目標(biāo)題用<hx>表示
標(biāo)題標(biāo)簽一共有6個(gè)居灯，h1、h2内狗、h3怪嫌、h4、h5柳沙、h6分別為一級標(biāo)題岩灭、二級標(biāo)題、三級標(biāo)題赂鲤、四級標(biāo)題川背、五級標(biāo)題、六級標(biāo)題蛤袒。并且依據(jù)重要性遞減熄云。<h1>是最高的等級。
4):<strong>和<em>標(biāo)簽:特別強(qiáng)調(diào)某幾個(gè)文字
但兩者在強(qiáng)調(diào)的語氣上有區(qū)別:<em> 表示強(qiáng)調(diào)妙真，<strong> 表示更強(qiáng)烈的強(qiáng)調(diào)缴允。并且在瀏覽器中<em> 默認(rèn)用斜體表示，<strong> 用粗體表示珍德。
兩個(gè)標(biāo)簽相比练般，目前國內(nèi)前端程序員更喜歡使用<strong>表示強(qiáng)調(diào)。
5):<q>標(biāo)簽:短文本引用
注意要引用的文本不用加雙引號锈候，瀏覽器會(huì)對q標(biāo)簽自動(dòng)添加雙引號
6):<blockquote>標(biāo)簽:長文本引用
注意瀏覽器對<blockquote>標(biāo)簽的解析是縮進(jìn)樣式
7):<address>標(biāo)簽:為網(wǎng)頁加入地址信息
8):<ul>標(biāo)簽:無序列表
9):<ol>標(biāo)簽:有序列表
10):<caption>標(biāo)簽:為表格添加標(biāo)題和摘要
摘要的內(nèi)容是不會(huì)在瀏覽器中顯示出來的薄料。它的作用是增加表格的可讀性(語義化)，使搜索引擎更好的讀懂表格內(nèi)容泵琳，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內(nèi)容摄职。
語法：<table summary="表格簡介文本">
標(biāo)題用以描述表格內(nèi)容誊役，標(biāo)題的顯示位置：表格上方。
語法：<caption>標(biāo)題文本</caption>
4.Html5語義化標(biāo)簽
html5相較于之前的版本提供了一些新的語義化標(biāo)簽谷市，下面進(jìn)行總結(jié)下蛔垢。
1. <header>
定義了文檔的頭部區(qū)域，在一個(gè)文檔中可以定義多個(gè)<header>元素迫悠。它是塊元素
<header>
<p>這是文檔的頭部</p>
</header>
2.<footer>
定義文檔頁腳鹏漆，它不只是頁面的最底部，在文檔中也可以定義多個(gè)创泄。
<header>
<address>南京鼓樓</address>
</header>
3.<article>
定義頁面獨(dú)立的內(nèi)容區(qū)域艺玲，標(biāo)簽定義的內(nèi)容本身必須是有意義且必須獨(dú)立于文檔的其他部分，可用在的地方：博客文章鞠抑，新聞饭聚，評論等。
<article>
<h2>五一勞動(dòng)節(jié)</h2>
<div>
今天是五一勞動(dòng)節(jié)
</div>
</article>
4.<aside>
定義頁面的側(cè)邊欄內(nèi)容
<aside>
<ul>
<li>騰訊</li>
<li>阿里</li>
<li>百度</li>
</ul>
</aside>
5.<time>
定義時(shí)間或日期碍拆，time標(biāo)簽中的datetime屬性定義的時(shí)間不會(huì)被顯示若治，但可能被其他應(yīng)用使用
<time datetime="2018-01-17">今天是我生日</time>
6.<ruby>
加注釋慨蓝，ruby標(biāo)簽有兩個(gè)子元素感混，rt注釋的內(nèi)容，rp是該標(biāo)簽不顯示時(shí)顯示的文字
<ruby>
人<rt>ren</rt>
<rp>該標(biāo)簽無法顯示</rp>
</ruby>
7.<details>
用于描述文檔或者文檔某一部分細(xì)節(jié)礼烈，summary是details元素的標(biāo)題
<details>
<summary>點(diǎn)擊查看更多</summary>
<p>這是點(diǎn)擊后的內(nèi)容</p>
</details>
8.<mark>
定義帶有幾號的文本弧满，它會(huì)給你想要突出顯示的文本加個(gè) 背景色
<p>我最喜歡<mark>數(shù)學(xué)</mark></p>
9.<nav>
定義導(dǎo)航欄
<nav>
<a >百度</a>
<a >360</a>
<nav>
10.<progress>
progress顯示數(shù)據(jù)的進(jìn)度，屬性value指定當(dāng)前值此熬，max最大值庭呜，最小值0不用設(shè)置
<progress value="30" max="100"></progress>
11.<section>
section一般有兩個(gè)作用，1.定義文檔中的節(jié)犀忱，和div類似募谎。2.定義文章，這時(shí)一般帶有標(biāo)題
<section>
<h1></h1>
<p></p>
</section>
12.<video>
定義視頻阴汇，屬性src引入資源数冬，controls視頻的控制控件
<video src="" controls="controls">你的瀏覽器不支持video標(biāo)簽</video>
以防用戶瀏覽的視頻不支持某些格式的視頻，可以為用戶多準(zhǔn)備些格式的視頻,目前支持的視頻格式video/ogg搀庶，video/mp4拐纱，video/webm其他格式需要轉(zhuǎn)換
<video controls="controls">
<source src="" type="video/ogg">
<source src="" type="video/mp4">
<source src="" type="video/webm">
你的瀏覽器不支持video標(biāo)簽
</video>
13.<audio>
該標(biāo)簽可定義聲音，及其他的音頻文件哥倔，不加controls不顯示音頻的控制界面
<audio src="" controls="controls">你的瀏覽器不支持audio標(biāo)簽</audio>
<video controls="controls">
<source src="xx.ogg" type="audio/ogg">
<source src="xx.mp3" type="audio/mpeg">
你的瀏覽器不支持audio標(biāo)簽
</video>
目前音頻可用類型audio/ogg秸架，audio/mpeg
14.<datalist>
提示可能的值，datalist及其選項(xiàng)不會(huì)被顯示出來咆蒿，它僅僅是合法輸入值的列表使用input元素的list屬性來邦定datalist东抹，下面選項(xiàng)使用option定義
<input type="text" list="cars">
<datalist id="cars">
<option value="寶馬"></option>
<option value="奔馳"></option>
<option value="奧迪"></option>
</datalist>
15.<embed>
定義插入的內(nèi)容蚂子，如插件，flash府阀，標(biāo)簽中間不要加內(nèi)容會(huì)顯現(xiàn)出來
<embed src="swf/flash5924.swf" tyep="application/x-shockwave-flash">
</embed>
16.<canvas>
canvas畫布只是個(gè)容器缆镣，你可以通過控制坐標(biāo)在canvas上繪制圖形，一般配合js可以實(shí)現(xiàn)非常復(fù)雜的動(dòng)畫效果
Forms
email : 電子郵箱文本框试浙，跟普通的沒什么區(qū)別,當(dāng)輸入不是郵箱的時(shí)候董瞻，驗(yàn)證通不過.移動(dòng)端的鍵盤會(huì)有變化
tel : 電話號碼,移動(dòng)端的鍵盤
url : 網(wǎng)頁的URL
search : 搜索引擎
range : 特定范圍內(nèi)的數(shù)值選擇器
min、max田巴、step( 步數(shù) )钠糊、value
用JS來顯示當(dāng)前數(shù)值
新的表單特性和函數(shù)
placeholder : 輸入框提示信息
例子 : 密碼框提示
autocomplete : 是否保存用戶輸入值默認(rèn)為on，關(guān)閉提示選擇off
autofocus : 指定表單獲取輸入焦點(diǎn)
list和datalist : 為輸入框構(gòu)造一個(gè)選擇列表
list值為datalist標(biāo)簽的id
required : 此項(xiàng)必填壹哺，不能為空帶有必填字段的表單
Pattern : 正則驗(yàn)證 pattern="\d{1,5}“
formaction 在submit里定義提交地址
五抄伍、HTML5相比HTML新增了哪些功能？
- 簡化的語法
HTML5簡化了很多細(xì)微的語法管宵，例如doctype的聲明截珍，你只需要寫<!doctype html>就行了。HTML5與HTML5箩朴，XHTML1兼容岗喉，但是與SGML不兼容。
- 更加語義化標(biāo)簽(開發(fā)者可以更加優(yōu)雅炸庞，網(wǎng)頁結(jié)構(gòu)更清晰)
header钱床、footer、nav埠居、article查牌、figure...但這些表情不兼容ie6-8，（兼容處理：html5.min.js滥壕；）
- 新增<audio> 和<video> 標(biāo)簽
這兩個(gè)標(biāo)簽可能是HTML5里面最有用的兩個(gè)標(biāo)簽了纸颜。從意思上不難理解，這兩個(gè)標(biāo)簽是用來播放音頻和視頻的绎橘。
- 表單元素的升級
傳統(tǒng)的表單元素：form胁孙、laber、textarea金踪、select浊洞、button...
input（text、password胡岔、radio法希、checkbox、file靶瘸、submit苫亦、reset毛肋、button）
Html5給input新增加一些類型（search、email屋剑、number润匙、tell、range唉匾、color孕讳、date）
升級：給表單元素新增加屬性placeholder（給表單元素設(shè)置提示信息）
升級：提供了新的下拉框方式
- 新增canvas標(biāo)簽
我們可以基于js，把它作為一個(gè)畫布巍膘，繪制出想要的圖形或者動(dòng)畫厂财，F(xiàn)lash給很多Web開發(fā)者帶來了麻煩，要在網(wǎng)頁上播放Flash需要一堆代碼和插件峡懈。<canvas>標(biāo)簽使得開發(fā)者只要使用一個(gè)標(biāo)簽就能和用戶產(chǎn)生UI交互璃饱。雖然目前<canvas>標(biāo)簽還不能實(shí)現(xiàn)Flash的所有功能。
Echarts圖表插件（http://echarts.baidu.com）肪康，它是基于canvas實(shí)現(xiàn)
刪除<b> 和<font> 標(biāo)簽
刪除<frame>, <center>, <big> 標(biāo)簽
新增一些API（主要是供js使用的）
webstorage：localStorage荚恶、seessionStorage 本地存儲(chǔ)解決方案
web socket：新的客戶端和服務(wù)器端通信方案
獲取地理位置或者重力感應(yīng)等API
