- 網頁設計與制作項目教程（微課版）
- 湯智華
- 3字
- 2019-09-12 15:05:34
HTML入門
2.1 HTML文檔基本格式、HTML標記及其屬性、頭部標記
2.1.1 認識HTML文檔基本格式
學習任何一門語言，都要首先掌握它的基本格式，就像寫信需要符合書信的格式要求一樣。HTML 也不例外，同樣需要遵從一定的規范。
使用Dreamweaver新建默認文檔時會自帶一些源代碼，代碼如下所示。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<body>
</body>
</html>
這些源代碼構成了HTML文檔的基本格式，其中主要包括<!DOCTYPE>文檔類型聲明、<html>根標記、<head>頭部標記、<body>主體標記。
<!DOCTYPE>標記位于文檔的最前面，用于向瀏覽器說明當前文檔使用哪種HTML或XHTML標準規范。該標簽可聲明3種DTD類型，分別表示嚴格版本、過渡版本以及基于框架的HTML文檔。
<html>標記標志著HTML文檔的開始，</html>標記標志著HTML文檔的結束。
<head>標記用于定義HTML文檔的頭部信息，也稱為頭部標記。
<body>標記用于定義HTML文檔所要顯示的內容，也稱為主體標記。
最重要的4個HTML標記：<html>、<head>、<title>和<body>已經簡要介紹過了。下面，我們將學習HTML的基本標記。
2.1.2 HTML標記及其屬性
在HTML頁面中，帶有“< >”符號的元素被稱為HTML標記，HTML標記要有語義性。HTML標記可以分為單標記、雙標記、注釋標記。
一、單標記
單標記也稱空標記，是指用一個標記符號即可完整地描述某個功能的標記。其基本語法格式如下：
< 標記名 />
例如代碼：
<hr />
二、雙標記
雙標記也稱體標記，是指由開始和結束兩個標記符組成的標記。其基本語法格式如下：
<標記名>內容</標記名>
例如代碼：
<h2>中國禁止進口洋垃圾 美國恐慌：放廢金屬一馬</h2>
三、注釋標記
如果需要在HTML文檔中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字，就需要使用注釋標記。其基本語法格式如下：
<!-- 注釋語句 -->
瀏覽器窗口只顯示普通的段落文本，而不會顯示注釋文本。
2.1.3 頭部標記
制作網頁時，經常需要設置頁面的基本信息，如頁面的標題、作者、和其他文檔的關系等。為此HTML提供了一系列的標記，這些標記通常都寫在head標記內，因此被稱為頭部相關標記。
一、設置頁面標題標記<title>
<title>標記用于定義HTML頁面的標題，即給網頁取一個名字，必須位于<head>標記之內。一個HTML文檔只能含有一對<title></title>標記，<title></title>之間的內容將顯示在瀏覽器窗口的標題欄中。其基本語法格式如下：
<title>網頁標題名稱</title>
二、定義頁面元信息標記<meta />
<meta />標記用于定義頁面的元信息，可重復出現在<head>頭部標記中，在HTML中是一個單標記。<meta />標記本身不包含任何內容，通過“名稱/值”的形式成對地使用其屬性可定義頁面的相關參數，例如為搜索引擎提供網頁的關鍵字、作者姓名、內容描述，以及定義網頁的刷新時間等。
下面介紹<meta />標記常用的幾組設置，具體如下：
<meta name="名稱" content="值" />
在<meta>標記中使用name/content屬性可以為搜索引擎提供信息，其中name屬性提供搜索內容名稱，content屬性提供對應的搜索內容值。
<meta http-equiv="名稱" content="值" />
在<meta>標記中使用http-equiv/content屬性可以設置服務器發送給瀏覽器的HTTP頭部信息，為瀏覽器顯示該頁面提供相關的參數。其中，http-equiv屬性提供參數類型，content屬性提供對應的參數值。
其中http-equiv屬性的值為refresh，content屬性的值為數值和url地址，中間用“;”隔開，用于指定在特定的時間后跳轉至目標頁面，該時間默認以秒為單位。
三、引用外部文件標記<link>
一個頁面往往需要多個外部文件的配合，在<head>中使用<link>標記可引用外部文件，一個頁面允許使用多個<link>標記引用多個外部文件。其基本語法格式如下：
<link 屬性="屬性值" />
例如，使用<link>標記引用外部CSS樣式表：
<link rel="stylesheet" type="text/css" href="style.css" />
上面的代碼，表示引用當前HTML頁面所在文件夾中，文件名為“style.css”的CSS樣式表文件。
四、內嵌樣式標記<style>
<style>標記用于為HTML文檔定義樣式信息，位于<head>頭部標記中，其基本語法格式如下：
<style 屬性="屬性值">樣式內容</style>
在HTML中使用style標記時，常常定義其屬性為type，相應的屬性值為text/css，表示使用內嵌式的CSS樣式。