整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
謂語(yǔ)義化就是一看就知道是做什么的。以前布局只有div,span,ul,li等，div，span對(duì)于搜索引擎來(lái)說(shuō)是不具有語(yǔ)義的。
新增的布局類(lèi)標(biāo)簽，更加具有語(yǔ)義性：
<div class='header'></div>
<div class='nav'></div>
<div class='content'></div>
<div class='footer'></div>
w3c 手冊(cè)中文官網(wǎng) : http://w3school.com.cn/
<header>頭部標(biāo)簽：定義文檔的頁(yè)眉</header>
<nav>導(dǎo)航標(biāo)簽：定義導(dǎo)航鏈接的部分</nav>
<article>內(nèi)容標(biāo)簽：標(biāo)簽規(guī)定獨(dú)立的自包含內(nèi)容</article>
<section>塊級(jí)標(biāo)簽：定義文檔中的節(jié)、區(qū)段</section>
<aside>側(cè)邊欄標(biāo)簽：定義其所處內(nèi)容之外的內(nèi)容</aside>
<footer>底部標(biāo)簽：定義文檔或節(jié)的頁(yè)腳</footer>
<input type="text" value="輸入水果名稱" list="star"/> <!-- input里面用 list -->
<datalist id="star"> <!-- datalist 里面用 id 來(lái)實(shí)現(xiàn)和 input 鏈接 -->
<option>Apple</option>
<option>Banana</option>
<option>Orange</option>
<option>Grape</option>
<option>Pear</option>
</datalist>
<fieldset>
<legend>用戶登錄</legend>
用戶名: <input type="text"><br /><br />
密 碼: <input type="password">
</fieldset>
多復(fù)雜的網(wǎng)頁(yè)都是由若干個(gè)區(qū)域構(gòu)成的，在HTML5中，為了使網(wǎng)頁(yè)的文檔結(jié)構(gòu)更加清晰明了，新增了頁(yè)眉、內(nèi)容、頁(yè)腳等與文檔結(jié)構(gòu)相關(guān)的主體結(jié)構(gòu)元素。在本次的教學(xué)中，我們就來(lái)學(xué)習(xí)HTML5元素中新增的主體結(jié)構(gòu)的一些方法和演示案例。
1.nav元素
nav元素用于定義導(dǎo)航鏈接的內(nèi)容，可以作為頁(yè)面導(dǎo)航的鏈接組，其中的導(dǎo)航元素鏈接到其他頁(yè)面或者當(dāng)前頁(yè)面的其他部分，使HTML代碼的語(yǔ)義化方面更加精準(zhǔn)，同時(shí)對(duì)于屏幕閱讀器等設(shè)備的支持也更好。
在html5之前，通常情況下我們會(huì)使用＜div＞元素或者＜ul id="nav"＞這樣的代碼來(lái)表示頁(yè)面的導(dǎo)航，而在HTML5中，我們可以直接將導(dǎo)航鏈接列表放在＜nav＞元素中，比如下面這個(gè)例子：
HTML5中的nav元素
nav元素在網(wǎng)頁(yè)中有著非常重要的作用，比如網(wǎng)頁(yè)頂部的導(dǎo)航條，其作用是在多個(gè)頁(yè)面間進(jìn)行跳轉(zhuǎn)鏈接；網(wǎng)頁(yè)側(cè)邊欄導(dǎo)航，其作用是從當(dāng)前頁(yè)面跳轉(zhuǎn)到其他頁(yè)面；網(wǎng)頁(yè)內(nèi)頁(yè)導(dǎo)航，其作用是在一個(gè)網(wǎng)頁(yè)中的多個(gè)主要部分進(jìn)行跳轉(zhuǎn)；翻頁(yè)導(dǎo)航，其作用是在多個(gè)網(wǎng)頁(yè)間實(shí)現(xiàn)實(shí)現(xiàn)前后頁(yè)滾動(dòng)。
2.time元素
time即時(shí)間，該元素用于定義日期和時(shí)間。由于時(shí)區(qū)的問(wèn)題，網(wǎng)頁(yè)上顯示的時(shí)間如果處理不好，就會(huì)讓人產(chǎn)生歧義，比如應(yīng)該是上午9點(diǎn)15分，卻顯示成下午22點(diǎn)30分。為了在網(wǎng)頁(yè)上能準(zhǔn)確低顯示時(shí)間，讓所有人都不會(huì)產(chǎn)生歧義，因此HTML5新增了time元素。time元素可以表示帶時(shí)區(qū)的時(shí)間，還可以定義多種格式的日期和時(shí)間，代碼和效果如圖所示：
HTML5中的time元素
3.article元素
article元素用于定義外部的內(nèi)容，可以是一篇新的文章、一篇博文、一個(gè)帖子、一段評(píng)論等等，還可以是來(lái)自其他外部源的內(nèi)容。一個(gè)article元素可以有它自己的標(biāo)題、內(nèi)容和腳注，還可以與其他的article元素嵌套使用。演例代碼如下圖所示：
HTML5中的article元素
在這段代碼中，header元素中嵌入了文章的標(biāo)題部分，p元素嵌入了文章的正文，嵌套的article元素又引用了另外一篇文章，最后在結(jié)尾處，footer元素嵌入了一下版權(quán)信息。
4.section元素
section元素定義文檔中的節(jié)，比如章節(jié)、頁(yè)眉、頁(yè)腳或文檔中的其他部分。一個(gè)section元素通常由內(nèi)容及其標(biāo)題組成。代碼演示如下圖：
HTML5中的section元素
在這段代碼中，＜h1＞元素嵌入了這段文字的標(biāo)題，＜p＞元素嵌入了這段文字的正文，標(biāo)題和正文構(gòu)成了文檔內(nèi)容一個(gè)獨(dú)立的塊，這個(gè)快使用section元素表示。
section元素用于表示文章的段，是一個(gè)獨(dú)立的塊，而article元素用于表示文章外部的內(nèi)容，雖然它也是獨(dú)立的，請(qǐng)不要把這兩者相混淆。比如要在一篇文章中如果需要引用另一篇文章的某些段落時(shí)，其代碼如下圖所示：
HTML5中的section元素
在比如你要在一個(gè)段落中引用一篇文章時(shí)，其代碼如下圖：
HTML5中的section元素
5.aside元素
aside元素用來(lái)定義article元素以外的內(nèi)容，其內(nèi)容應(yīng)該與article的內(nèi)容相關(guān)。這樣的情況在生活中很常見(jiàn)，像文章中的名詞解釋。名詞解釋作為文章中的一部分，其內(nèi)容與文章相關(guān)，所以這種情況下就可以使用aside元素。其代碼和效果如下圖所示：
HTML5中的aside元素
HTML5中的aside元素
另外，aside元素的內(nèi)容還可以用作文章的側(cè)欄，其內(nèi)容作為文章的附屬信息。例如nav元素導(dǎo)航作為aside元素的內(nèi)容，這樣就實(shí)現(xiàn)了一個(gè)側(cè)邊欄導(dǎo)航條。代碼及效果圖如下：
HTML5中的aside元素
HTML5中的aside元素
這些元素就是HTML5元素中新增的主體結(jié)構(gòu)了。我們?cè)趯W(xué)習(xí)這些代碼的時(shí)候一定要勤加練習(xí)，這樣才能夠記住它們。下一期我們介紹HTML5元素中新增的非主體結(jié)構(gòu)。了解更多動(dòng)態(tài)資訊請(qǐng)加我們的官方微信號(hào)：pyyuanxing。謝謝大家的觀看，祝大家生活愉快、身體健康。
天發(fā)了一篇干貨，似乎沒(méi)人看，好吧，我們來(lái)說(shuō)說(shuō)技術(shù)吧。
HTML5專(zhuān)題是隨性更新，不一定每天更新這個(gè)專(zhuān)題。
一個(gè)HTML5文檔的最簡(jiǎn)單結(jié)構(gòu)是：
結(jié)構(gòu)
相比常規(guī)的html更為精簡(jiǎn)
<header><section><footer><nav><article><aside>
1、頁(yè)眉header、整個(gè)頁(yè)面的頭部
2、正文article、博文或者新聞的展現(xiàn)
3、頁(yè)腳footer、一般用于呈現(xiàn)頁(yè)面底部的相關(guān)信息，可以放在body最下面，也可以放在article的最下面，只要記住它的作用是呈現(xiàn)其他信息，且不能相互嵌套
4、導(dǎo)航nav、可以出現(xiàn)在header，也可以出現(xiàn)在footer，也可以出現(xiàn)在section，只要保證語(yǔ)義化，即用作導(dǎo)航功能，如配合footer就可以表示為如下形式
5、側(cè)邊欄aside、用于頁(yè)面上一些與主題聯(lián)系不大而相對(duì)獨(dú)立的區(qū)域，通常用于邊欄，例如展示以下內(nèi)容：快速鏈接、最多訪問(wèn)、登錄注冊(cè)等
6、文檔中的節(jié)section、通常表示一段專(zhuān)題性的內(nèi)容，一般會(huì)帶有標(biāo)題，應(yīng)用的典型場(chǎng)景有文章的章節(jié)、標(biāo)簽對(duì)話框中的標(biāo)簽頁(yè)、或者論文中有編號(hào)的部分，section可以說(shuō)語(yǔ)義化強(qiáng)于div，但是弱于article，也可以這么說(shuō)吧，article標(biāo)簽是特殊的section，section是特殊的div，語(yǔ)義遞減。對(duì)于 section 和 article 的區(qū)分乍看比較難，其實(shí)重點(diǎn)就是看看這段內(nèi)容脫離了整體是不是還能作為一個(gè)完整的、獨(dú)立的內(nèi)容而存在，這里面的重點(diǎn)又在完整身上。因?yàn)槠鋵?shí)說(shuō)起來(lái) section 包含的內(nèi)容也能算作獨(dú)立的一塊，但是它只能算是組成整體的一部分，article 才是一個(gè)完整的整體。
那么section所用到的結(jié)構(gòu)可以如下幾種形式：
①
②
通過(guò)上面可以看出，section可以應(yīng)用的場(chǎng)景很多，但是需要注意的就是保證語(yǔ)義化。
通過(guò)第三點(diǎn)所列出的標(biāo)簽，可以對(duì)網(wǎng)站的大綱做一個(gè)總結(jié)，并不代表正確的大綱就是如此，但是可以起到借鑒作用。
當(dāng)然了，頁(yè)面結(jié)構(gòu)的設(shè)計(jì)完全取決于開(kāi)發(fā)人員，但是為了更好的體現(xiàn)HTML5的語(yǔ)義化原則，清楚的認(rèn)識(shí)每個(gè)標(biāo)簽所代表的語(yǔ)義就很重要，這里所列出的文檔結(jié)構(gòu)只是一種代表，在<section>里面可以包含更多的新的標(biāo)簽，諸如<figure><video><hgroup>等，都需要根據(jù)需求來(lái)確定。
對(duì)于使用不支持HTML5的瀏覽器的用戶，同樣有解決的辦法：
可以在<head></head>內(nèi)部以注釋的形式(這樣的注釋只對(duì)IE(包括那些國(guó)產(chǎn)的IE內(nèi)核的瀏覽器)有效)引用這樣一個(gè)js，它托管在Google開(kāi)源服務(wù)器上，它可以讓IE8及以下版本的ie也支持那些新的html5標(biāo)簽(包括IE6).
以上全部還必須使用CSS形成自己的樣式，所謂語(yǔ)義，僅僅是開(kāi)發(fā)人員在查看的頁(yè)面的時(shí)候可以很清晰的知道頁(yè)面結(jié)構(gòu)，何處為頭部何處為內(nèi)容。
更多前端小知識(shí)，盡在https://blog.imcyk.com
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
