整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
HTML 標題（Heading）是通過<h1> - <h6>標簽來定義的。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Web前端</title></head><body>
<h1>這是一個標題</h1>
<h2>這是一個標題</h2>
<h3>這是一個標題</h3></body></html>
HTML 段落是通過標簽<p>來定義的。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Web前端</title></head><body>
<p>這是一個段落。</p>
<p>這是另外一個段落。</p></body></html>
HTML 鏈接是通過標簽<a>來定義的。
提示:在href屬性中指定鏈接的地址。
<body>
<a href="https://www.ictliuxiao.com">這是一個鏈接</a></body></html>
HTML 圖像是通過標簽<img>來定義的。
注意： 圖像的名稱和尺寸是以屬性的形式提供的。
<body>
<img src="images/one.png" /></body></html>
多復雜的網頁都是由若干個區域構成的，在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，html的最新版本，定義了新的標簽、css、JavaScript，html5新標簽IE9以上版本瀏覽器才兼容，因此在實際開發中要問老板是否兼容低版本瀏覽器。
擴展內容：語義化標簽、本地儲存、兼容特性、2D 3D、動畫 過渡、CSS3新特性、性能與集成
HTML5常用新標簽：
HTML5標簽多為語義化標簽，主要是針對瀏覽器搜索引擎，IE9瀏覽器中主要將所有語義化標簽都轉化為塊級元素，語義化標簽在移動端支持比較好，后面會有更多語義化標簽學習。
HTML5常用新標簽：
datalist選項輸入框:
此標簽和input標簽搭配可以實現input輸入提示，注意：input標簽中必須要有list屬性，其值綁定的是datalist的id值，option標簽中的value值不能為空，否則此功能失效。
<body>
<input type="text" value="輸入科目" list="lis" >
<datalist id='lis'>
<option value="科目1"></option>
<option value="科目2"></option>
<option value="科目3"></option>
<option value="科目4"></option>
</datalist>
</body>fieldset表單元素分組:
此標簽和legend標簽搭配可以將表單內相關元素分組（外部用一個矩形的方框包裹）
<body>
<fieldset>
<legend>用戶信息</legend> <!-- 矩形框邊插入的文本信息,去掉此標簽則為 封閉的矩形 -->
<input type="text" value="user"><br>
<input type="password" value="password">
</fieldset>
</body>html5中input標簽的type屬性新增屬性值：
input中新增屬性：
提示：本文圖片等素材來源于網絡，若有侵權，請發郵件至郵箱：810665436@qq.com聯系筆者 刪除。
筆者：苦海123
其它問題可通過以下方式聯系本人咨詢：
QQ：810665436
微信：ConstancyMan
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
