第 2 章基本格式 · 李炎恢 HTML CSS JavaScript PHP Bootstrap 教程

# 第 2 章基本格式學習要點： 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 屬性，里面替換網址即可鏈接到不同的網站。當然一個元素里面可以設置多個屬性，甚至自定義屬性。