1.第一步：打開開發工具，打開指定文件夾；
2.第二步：保存index.html 文件到磁盤中，.html 是網頁後綴；
3.第三步：開始編寫HTML5 的基本格式。
<!DOCTYPE html> //文檔類型聲明<html lang=zh-cn> //表示HTML 文檔開始。 1. <head> //包含文檔元數據開始<meta charset=utf-8> //聲明字符編碼<title>基本結構</title> //設置文檔標題</head> //包含文檔元數據結束<body> //表示HTML 文檔內容<a href=http://www.baidu.com>百度</a> //一個超鏈接元素（標籤）</body> //表示HTML</html> / /表示HTML 文檔結束二．文檔結構解析1.Doctype
文檔類型聲明（Document Type Declaration，也稱Doctype）。它主要告訴瀏覽器
所查看的文件類型。在以往的HTML4.01 和XHTML1.0 中，它表示具體的HTML 版本和風格。
而如今HTML5 不需要表示版本和風格了。
<!DOCTYPE html> //不分區大小寫
2.html 元素首先，元素就是標籤的意思，html 元素即html 標籤。 html 元素是文檔開始和結尾的元素。它是一個雙標籤，頭尾呼應，包含內容。
這個元素有一個屬性和值：lang=zh-cn，
表示文檔採用語言為：簡體中文。
<html lang=zh-cn> //如果是英文則為en '
簡體中文頁面：html lang=zh-cmn-Hans
繁體中文頁面：html lang=zh-cmn-Hant
英語頁面：html lang=en
3.head 元素用來包含元數據內容，元數據包括：<link>、<meta>、<noscript>、<script>、
<style>、<title>。這些內容用來瀏覽器提供信息，比如link 提供CSS 信息，script
提供JavaScript 信息，title 提供頁面標題等。
<head>...</head> //這些信息在頁面不可見
<noscript>元素用來定義在腳本未被執行時的替代內容（文本）。
此標籤可被用於可識別<script> 標籤但無法支持其中的腳本的瀏覽器。
4.meta 元素這個元素用來提供關於文檔的信息，起始結構有一個屬性為：charset=utf8。表示
告訴瀏覽器頁面採用的什麼編碼，一般來說我們就用utf8。當然，文件保存的時候也是
utf8，而瀏覽器也設置utf8 即可正確顯示中文。
<meta charset=utf-8> //除了設置編碼，還有別的
5.title 元素這個元素很簡單，顧名思義：設置瀏覽器左上角的標題。
<title>基本結構</title>
6.body 元素用來包含文檔內容的元素，也就是瀏覽器可見區域部分。所有的可見內容，都應該在這
個元素內部進行添加。
<body>...</body>
7.a 元素一個超鏈接，後面會詳細探討。
<a href=http://www.baidu.com>百度</a>
三．元素標籤探討HTML 是一種標記語言，剛才的結構我們已經詳細探討過。這裡，我們再剖析一下這些
標記或者叫標籤，書面上經常稱作為元素的東西是怎麼構成的。
1.元素元素就是一組告訴瀏覽器如何處理一些內容的標籤。每個元素都有一個關鍵字，比如
<body>、<title>、<meta>都是元素。不同的標籤名稱代表不同的意義，後面將會涉及到段落標籤、文本標籤、鏈接標籤、圖片標籤等。
元素一般分為兩種：單標籤（空元素）和雙標籤。單標籤一般用於聲明或者插入某個元
素，比如聲明字符編碼就用<meta>，插入圖片就用<img>；雙標籤一般用於設置一段區域的內容，將其包含起來，比如段落<p>...</p>。
2.屬性和值元素除了有單雙之分，元素的內部還可以設置屬性和值。這些屬性值用來改變元素某些
方面的行為。比如超鏈接：<a>中的href 屬性，裡面替換網址即可鏈接到不同的網站。
四．實體HTML 實體就是將有特殊意義的字符通過實體代碼顯示出來。
顯示結果實體名稱實體編號描述
空格
< < < 小於號
> > > 大於號
& & & 和號
引號
' ' ' 撇號
￠ ¢ ¢ 分
£ £ £ 鎊
¥ ¥ ¥ 日圓
€ € € 歐元
§ § § 小節
© © © 版權
® ® ® 註冊商標
™ ™ ™ 商標
× × × 乘號
÷ ÷ ÷ 除號
五. 新增結構標籤article元素
表示頁面中一塊與上下文不相關的獨立內容。比如一篇文章,一篇博文,一篇論壇帖子,可以嵌套使用的
section元素
表示頁面中的一個內容區塊,比如章節、頁眉、頁腳或頁面的其他部分。可以和h1、 h2……等元素結合起來使用，表示文檔結構。例：HTML5中<section>……</section>;HTML4 中<div> ……</div>。
aside元素
表示article元素內容之外的、與article元素內容相關的輔助信息。
header元素
表示頁面中一個內容區塊或真個頁面的標題。
hgroup元素
表示對真個頁面或頁面中的一個內容區塊的標題進行組合。
footer元素
表示整個頁面或頁面中一個內容區塊的腳註。一般來說，他會包含創作者的姓名、創作日期以及創作者的聯繫信息。
nav元素
表示頁面中導航鏈接的部分。
figure元素
表示一段獨立的流內容，一般表示文檔主體流內容中的一個獨立單元。使用figcaption元素為figure元素組添加標題。例如：
<figure> <figcaption>PRC</figcaption> <p>The People's Republic of China was born in 1949</p> </figure>五．元數據
<meta>元素可以定義文檔中的各種元數據，而且一個HTML 頁面可以包含多個<meta>
元素。
1.指定名/值元數據對<meta name=author content=bnbbs><meta name=description content=這是一個HTML5 頁面><meta name=keywords content=html5,css3,響應式><meta name=generator content=sublime text 3>
元數據名稱說明
author 當前頁面的作者
description 當前頁面的描述
keywords 當前頁面的關鍵字
generator 當前頁面的編碼工具
2.聲明字符編碼<meta charset=utf-8>
3.模擬HTTP 標頭字段//5 秒跳轉到指定URL<meta http-equiv=refresh content=5;http://li.cc>//另一種聲明字符編碼<meta http-equiv=content-type content=text/html charset=utf-8>
屬性值說明
refresh 重新載入當前頁面，或指定一個URL。單位秒。
content-type 另一種聲明字符編碼的方式
六．全局屬性在此之前，我們涉及到的元素都講解了它的局部數據，當然也知道一些全局屬性，比如
id。全局屬性是所有元素共有的行為，HTML5 還提供了一些其他的全局屬性。
1.id 屬性<p id=abc>段落</p>
解釋： id 屬性給元素分配一個唯一標識符。 這種標識符通常用來給CSS 和JavaScript
調用選擇元素。一個頁面只能出現一次同一個id 名稱。
2.class 屬性<p class=abc>段落</p><p class=abc>段落</p><p class=abc>段落</p>
解釋：class 屬性用來給元素歸類。通過是文檔中某一個或多個元素同時設置CSS 樣
式。
3.accesskey 屬性<input type=text name=user accesskey=n>
解釋：快捷鍵操作，windows 下alt+指定鍵，前提是瀏覽器alt 並不衝突。
4.contenteditable 屬性<p contenteditable=true>我可以修改嗎</p>
解釋：讓文本處於可編輯狀態，設置true 則可以編輯，false 則不可編輯。或者直接
設置屬性。
5.dir 屬性<p dir=rtl>文字到右邊了</p>
解釋：讓文本從左到右（ltr），還是從右到左（rtl）。
6.hidden 屬性<p hidden>文字到右邊了</p>
解釋：隱藏元素。
7.lang 屬性<p lang=en>HTML5</p>
解釋：可以局部設置語言。
8.title 屬性<p type=application/x-shockwave-flash></object>3.range 4.autofocus 5. mark
<mark>主要用來在視覺上向用戶呈現那些需要突出的文字。 <mark>標籤的一個比較典型的應用就是在搜索結果中向用戶高亮顯示搜索關鍵詞。
HTML5: <mark></mark>
HTML4: <span></span>
6. summary<summary> 標籤包含details 元素的標題，details 元素用於描述有關文檔或文檔片段的詳細信息。 summary 元素應該是details 元素的第一個子元素。
HTML5: <details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details>
HTML4: none
7. detalist<datalist> 標籤定義可選數據的列表。與input 元素配合使用，就可以製作出輸入值的下拉列表。
datalist 及其選項不會被顯示出來，它僅僅是合法的輸入值列表。
請使用input 元素的list 屬性來綁定datalist。
<input list=cars /><datalist id=cars><option value=BMW><option value=Ford><option value=Volvo></datalist>9. command
表示命令按鈕
只有當command 元素位於menu 元素內時，該元素才是可見的。否則不會顯示這個元素，但是可以用它規定鍵盤快捷鍵
<menu><command onclick=alert('Hello World')>Click Me!</command></menu>八．廢棄的標籤表現性元素
basefont
big
center
font
s
strike
tt
u
建議用語義正確的元素代替他們，並使用CSS來確保渲染後的效果
框架類元素
因框架有很多可用性及可訪問性問題，HTML5規範將以下元素移除。
frame
frameset
noframes
但html5支持iframe。
屬性類
很多表現性的屬性也被新規範移除，如下：
align
body標籤上的link、vlink、alink、text屬性
bgcolor
height和width
iframe元素上的scrolling屬性
valign
hspace和vspace
table標籤上的cellpadding、cellspacing和border屬性
header標籤上的profile屬性
鏈接標籤a上的target屬性
img和iframe元素的longdesc屬性
abbr取代acronym（用於表示縮寫）
object取代了applet
ul取代了dir
其他
以上所述是小編給大家介紹的HTML5的文檔結構和新增標籤完全解析，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VeVb武林網網站的支持！