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