一、標(biāo)簽語義化

html標(biāo)簽語義化是讓大家直觀的認(rèn)識(shí)標(biāo)簽和屬性的用途和作用，好處最主要的是對(duì)搜索引擎友好。

Eg:

1、如果你想在頁面中突出"奧巴馬"這三個(gè)字，讓搜索引擎重視它，如果你這么寫：

<div> 奧巴馬</div>

對(duì)于搜索引擎來說，它也只是一個(gè)普通得不能再普通的三個(gè)字而已，盡管它是指代美國(guó)總統(tǒng)。

那么應(yīng)該怎樣才能讓搜索引擎知道它的重要性呢？來看看語義化的寫法吧：

<h1>奧巴馬</h1>

奧巴馬看了后，樂了，哥本來就應(yīng)該備受關(guān)注的！

2、如果文字要加粗顯示，<em> 是用作強(qiáng)調(diào)的，strong是用作重點(diǎn)強(qiáng)調(diào)的。

3、對(duì)于標(biāo)簽<s>只是表示一個(gè)普通的刪除線，而<del>標(biāo)簽更具語義化，它表示刪除一個(gè)內(nèi)容，并且del還帶有cite和datetime來表明刪除的原因以及刪除的時(shí)間。

......

So，標(biāo)簽語義化其實(shí)就是把你想要表達(dá)的東西更容易被搜索引擎理解和重視，讓你想表達(dá)的東西，to be girlfriend,not to be friend。

二、HTML標(biāo)簽補(bǔ)充

1、縮寫說明

<abbr title="Hyper text Markup Language">HTML</abbr>

2、定義列表（一般用于內(nèi)容解釋）

<dl><dt>子曰：“巧言令色，鮮矣仁！”</dt><dd>孔子說：“花言巧語，裝出和顏悅色的樣子，這種人的仁心就很少了。”</dd><dt>季</dt><dd>1、兄弟排行次序最小的：季弟（小弟）.季父（小叔叔）</dd><dd>2、三個(gè)月為一季,一年分春夏秋冬四季</dd> </dl>

3、預(yù)格式文本標(biāo)簽

被包圍在 pre 元素中的文本通常會(huì)保留空格和換行符

<pre> 1、這是一溝絕望的死水 2、清風(fēng)吹不起半點(diǎn)漪淪 3、不如多扔些破銅爛鐵 4、爽性潑它的剩菜殘羹 </pre>

4、版權(quán)符

&copy;

5、對(duì)html進(jìn)行轉(zhuǎn)義

&lt;body&gt;

三、H5新增標(biāo)簽

1、多媒體標(biāo)簽：video、audio、canvas

1.1 音頻標(biāo)簽video

不同瀏覽器對(duì)于html5 audio標(biāo)簽和音頻格式的兼容性（一般提供ogg和mp3格式，就可以支持所有主流瀏覽器了。）?

<audio src="1.mp3" controls="controls"> <audio controls="controls" autoplay loop><source src="1.mp3" type="audio/mpeg"/><source src="1.ogg" type="audio/ogg"/> </audio>

編解碼工具：FFmpeg（下載地址：www.ffmpeg.org）

mp4轉(zhuǎn)ogg方法同上。

1.2 視頻標(biāo)簽video

<video src="1.mp3" controls="controls" autoplay> <video controls="controls"><source src="1.mp4" type="video/mpeg"/><source src="1.mp4" type="video/ogg"/> </video>

音視頻播放、暫停、停止方法：

var audio = document.getElementById('music1'); audio.play();//播放 audio.pause();//暫停 audio.pause(); audio.currentTime=0;//停止

1.3 畫布標(biāo)簽:Canvas （需要配合js來做效果，后續(xù)再總結(jié)）

2、主體結(jié)構(gòu)標(biāo)簽

2.1 nav元素代表頁面的導(dǎo)航鏈接區(qū)域。用于定義頁面的主要導(dǎo)航部分。

<nav><ul><li>HTML 5</li><li>CSS3</li><li>JavaScript</li></ul> </nav>

2.2 article元素展示網(wǎng)頁中獨(dú)立的一塊內(nèi)容，譬如論壇的帖子、博客的文章、一篇用戶評(píng)論。

<article><h1>一篇文章</h1><p>文章內(nèi)容..</p><footer><p><small>版權(quán)：html5jscss網(wǎng)所屬，作者：小北</small></p></footer> </article> <article><header><h1>一篇文章</h1><p><time pubdate datetime="2012-10-03">2012/10/03</time></p></header><p>文章內(nèi)容..</p><article><h2>評(píng)論</h2><article><header><h3>評(píng)論者: XXX</h3><p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p></header><p>哈哈哈</p></article><article><header><h3>評(píng)論者: XXX</h3><p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p></header><p>哈？哈？哈？</p></article></article> </article>

2.3 section元素代表文檔中的“節(jié)”或“段”，“段”可以是指一篇文章里按照主題的分段；“節(jié)”可以是指一個(gè)頁面里的分組。

<article><h1>前端技術(shù)</h1><p>前端技術(shù)有那些</p><section><h2>CSS</h2><p>樣式..</p></section><section><h2>JS</h2><p>腳本</p></section> </article>

2.4 aside?元素被包含在article元素中作為主要內(nèi)容的附屬信息部分，其中的內(nèi)容可以是與當(dāng)前文章有關(guān)的相關(guān)資料、標(biāo)簽、名次解釋等、

<article><p>內(nèi)容</p><aside><h1>作者簡(jiǎn)介</h1><p>小北，前端一枚</p></aside> </article>

2.5 header元素展示一個(gè)區(qū)域的頭部分

2.6 footer元素展示一個(gè)區(qū)域的尾部分

2.7 hgroup元素代表“網(wǎng)頁”或“section”的標(biāo)題，當(dāng)元素有多個(gè)層級(jí)時(shí)，該元素可以將h1到h6元素放在其內(nèi)，譬如文章的主標(biāo)題和副標(biāo)題的組合

<hgroup><h1>這是一篇介紹HTML 5語義化標(biāo)簽和更簡(jiǎn)潔的結(jié)構(gòu)</h1><h2>HTML 5</h2> </hgroup>

2.8?figure標(biāo)簽規(guī)定獨(dú)立的流內(nèi)容（圖像、圖表、照片、代碼等等）。figure 元素的內(nèi)容應(yīng)該與主內(nèi)容相關(guān)，但如果被刪除，則不應(yīng)對(duì)文檔流產(chǎn)生影響。figcaption?標(biāo)簽定義 figure 元素的標(biāo)題（caption）。"figcaption" 元素應(yīng)該被置于 "figure" 元素的第一個(gè)或最后一個(gè)子元素的位置。

<figure> <figcaption>黃浦江上的的盧浦大橋</figcaption> <img src="shanghai_lupu_bridge.jpg" width="350" height="234" /> </figure>

?3、非主體結(jié)構(gòu)標(biāo)簽

3.1?<datalist> 標(biāo)簽定義選項(xiàng)列表。

<input type="text" list="taglist" /> <datalist id="taglist"> <option>蘋果</option> <option>橘子</option> <option>西紅柿</option> </datalist>

3.2 details標(biāo)簽定義文檔細(xì)節(jié)

<details> <summary>Copyright 2011.</summary> <p>All pages and graphics on this web site are the property of W3School.</p> </details>

3.3 menu標(biāo)簽定義列表

<menu><li>home</li><li>home</li><li>home</li> </menu>

3.4 address地址標(biāo)簽

<address> Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address>

3.5?progress進(jìn)度條標(biāo)簽

下載進(jìn)度： <progress> </progress>

3.6?mark高亮顯示

<mark>中國(guó)</mark>人民最偉大

3.7?<time> 標(biāo)簽定義日期或時(shí)間，或者兩者

<p> 我們?cè)诿刻煸缟?<time>9:00</time> 開始營(yíng)業(yè)。 </p>

3.8 新增的表單元素

<input type="email" /> <input type="url" /> <input type="tel" /> <input type="number" min="1" max="20" step="4" /> <input type="range" min="1" max="20" step="4" /> <input type="search" /> <input type="color" /> <input type="date" /> <input type="month" /> <input type="week" /> <input type="time" />

3.9 新增的input屬性

3.9.1 用戶輸入自動(dòng)完成功能

<form autocompelete="on"> <input type="text" list="citylist" /> <datalist id="citylist"><option>BeiJing</option><option>QingDao</option><option>QingZhou</option><option>QingHai</option> </datalist> </form>

3.9.2 頁面加載的時(shí)候獲取焦點(diǎn)

<input type="text" autofocus="autofocus" />

3.9.3 form外也可以做數(shù)據(jù)提交

?

<form action="" method="get" id="form1"> </form> <input type="text" name="address1" form="form1" />

?

3.9.4 form內(nèi)的內(nèi)容也可以改action地址

<form action="1.aspx"><input type="submit" value="提交" formaction="2.aspx" /> </form>

3.9.5 file可以支持多文件上傳了

<input type="file" name="img" multiple="multiple" />

3.9.6 支持自定義驗(yàn)證功能了

<form action="1.aspx">請(qǐng)輸入郵政編碼：<input type="text" pattern="[0-9]{6}" title="請(qǐng)輸入6位數(shù)的郵編" /><input type="submit" /> </form>

3.9.4 新增默認(rèn)內(nèi)容提示了

<input type="text" placeholder="請(qǐng)輸入用戶名"/>

3.9.5 新增不能為空屬性

<form action="1.aspx">請(qǐng)輸入郵政編碼：<input type="text" required="required" /><input type="submit" /> </form>

3.10 新增全局屬性

3.10.1?contenteditable 屬性規(guī)定是否可編輯元素的內(nèi)容。

<p contenteditable="true">這是一段可編輯的段落。請(qǐng)?jiān)囍庉嬙撐谋尽?span style="color:#0000ff;"></p>

3.10.2?hidden 屬性規(guī)定對(duì)元素進(jìn)行隱藏。

<p hidden="hidden">這是一段隱藏的段落。</p> <p>這是一段可見的段落。</p>

3.10.3?tabindex 屬性規(guī)定當(dāng)使用 "tab" 鍵進(jìn)行導(dǎo)航時(shí)元素的順序。

<a href="http://www.w3school.com.cn/" tabindex="2">W3School</a><br /> <a href="http://www.google.com/" tabindex="1">Google</a><br /> <a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>

3.11 其他屬性

3.11.1?ol的reversed屬性對(duì)列表順序進(jìn)行降序

<ol reversed start="5" ><li>SHUFFLE!/三界戀曲</li><li>撲殺天使</li><li>零之使魔</li><li>不要撒嬌哦/極樂天師/純情和尚俏尼姑</li><li>to love/出包王女</li> </ol>

3.11.2 js的async 屬性規(guī)定一旦腳本可用，則會(huì)異步執(zhí)行。

<p id="p1">Hello World!</p> <script type="text/javascript" src="/example/html5/demo_async.js" async="async"></script>

3.11.3 js的defer 屬性規(guī)定當(dāng)頁面已完成加載后，才會(huì)執(zhí)行腳本。

<script type="text/javascript" src="/example/html5/demo_defer.js" defer="defer"></script> <p>上面的腳本從下面的段落請(qǐng)求信息。通常，這是不可能的，因?yàn)槟_本在段落加載之前已經(jīng)執(zhí)行了。</p> <p id="p1">Hello World!</p> <p>不過，defer 屬性規(guī)定腳本稍后執(zhí)行。這樣腳本就可以從段落中請(qǐng)求信息了。</p>

轉(zhuǎn)載于:https://www.cnblogs.com/ruanmou/p/4821894.html

總結(jié)

以上是生活随笔為你收集整理的html你可能还不知道的一些知识点的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。