學習要點： 1.HTML5 文檔結構 2.文檔結構解析 3.元素標簽探討 主講教師：李炎恢 本章主要先從 HTML5 的文檔結構談起。 這些基礎元素確定了 HTML 文檔的輪廓以及瀏覽器的初始環境。幾乎所有頁面都必須首先鍵入這些元素。 一．HTML5 文檔結構 1.第一步：打開 Sublime Te ...
學習要點：
1.HTML5 文檔結構
2.文檔結構解析
3.元素標簽探討
主講教師：李炎恢
本章主要先從 HTML5 的文檔結構談起。 這些基礎元素確定了 HTML 文檔的輪廓以及瀏覽器的初始環境。幾乎所有頁面都必須首先鍵入這些元素。
一．HTML5 文檔結構
1.第一步：打開 Sublime Text 3，打開指定文件夾；
2.第二步：保存 index.html 文件到磁碟中，.html 是網頁尾碼；
3.第三步：開始編寫 HTML5 的基本格式。
<!DOCTYPE html> //文檔類型聲明 <html lang="zh-cn"> //表示 HTML 文檔開始 <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
3.head 元素
用來包含元數據內容，元數據包括：<link>、<meta>、<noscript>、<script>、<style>、<title>。這些內容用來瀏覽器提供信息，比如 link 提供 CSS 信息，script提供
JavaScript 信息，title 提供頁面標題等。
<head>...</head> //這些信息在頁面不可見
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 屬性，裡面替換網址即可鏈接到不同的網站。當然一個元素裡面可以設置多個屬性，甚至自定義屬性。
