第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 屬性，裡面替換網址即可連結到不同的網站。當然一個元素裡面可以設定多個屬性，甚至自訂屬性。

 

第2 章 基本格式