1-構築基本的文檔結構
1.1 DOCTYPE元素
| DOCTYPE元素 | |
|---|---|
| 元素類型 | 無 |
| 允許具有的父元素 | 無 |
| 局部屬性 | 無 |
| 內容 | 無 |
| 標籤用法 | 單個開始標籤 |
| 是否爲HTML5新增 | 否 |
| 在HTML5中的變化 | HTML4中要求要有的DTD 已不再使用 |
| 習慣樣式 | 無 |
例子：
<!--這個元素告訴瀏覽器兩件事情： 第一， 它處理的是HTML文檔；第二，用來標記文檔內容的HTML所屬的版本-->
<!DOCTYPE html>1.2 html元素
| html元素 | |
|---|---|
| 元素類型 | 無 |
| 允許具有的父元素 | 無 |
| 局部屬性 | manifest (詳見第40章） |
| 內容 | head元素和body元素各一 |
| 標籤用法 | 開始標籤和結束標籤、內含其他元素 |
| 是否爲HTML5新增 | 否 |
| 在HTML5中的變化 | manifest屬性是HTML5 中新增的。HTML4版本中的屬性已不再使用 |
| 習慣樣式 | html { display: block; } html:focus { outline: none;} |
例子：
<!DOCTYPE HTML>
<!--html元素更恰當的名稱是根元素，它表示文檔中HTML部分的開始-->
<html>
</html>1.3 head 元素
| head元素 | |
|---|---|
| 元素類型 | 無 |
| 允許具有的父元素 | html |
| 局部屬性 | 無 |
| 內容 | 必須有一個title元素，其他元數據元素可有可無 |
| 標籤用法 | 開始標籤和結束標籤。內含其他元素 |
| 是否爲HTML5新增 | 否 |
| 在HTML5中的變化 | 無 |
| 習慣樣式 | 無 |
例子：
<!DOCTYPE HTML>
<html>
<!--head元素包含着文檔的元數據。在HTML 中， 元數據向瀏覽器提供了有關文檔內容和標記的
信息， 此外還可以包含腳本和對外部資源（ 比如css樣式表）的引用-->
<head>
</head>
</html>1.4 body元素
| body元素 | |
|---|---|
| 元素類型 | 無 |
| 允許具有的父元素 | html |
| 局部屬性 | 無 |
| 內容 | 所有短語元素和流元素 |
| 標籤用法 | 開始標籤和結束標籤 |
| 是否爲HTML5新增 | 否 |
| 在HTML5中的變化 | alink 、background 、bgcolor 、link 、margintop 、marginbottom 、marginleft 、marginright 、marginwidth 、text和vlink屬性已不再使用。這些屬性的效果可用css實現 |
| 習慣樣式 | body { display: block; margin: 8px; } body:focus { outline: none; } |
例子：
<!DOCTYPE html>
<html>
<head>
</head>
<!--文檔的內容包裝在body元素中-->
<body>
</body>
</html>2 用元數據元素說明文檔
2.1 設置文檔標題（title元素）
| title元素 | |
|---|---|
| 元素類型 | 元數據 |
| 允許具有的父元素 | head |
| 局部屬性 | 無 |
| 內容 | 文檔標題或對文檔內容言簡意骸的說明 |
| 標籤用法 | 開始標籤和結束標籤。內含文字 |
| 是否爲HTML5新增 | 否 |
| 在HTML5中的變化 | 無 |
| 習慣樣式 | title { display: none; } |
例子：
<!DOCTYPE HTML>
<html>
<head>
<!-- 使用title元素設置文檔標題和名稱-->
<title>Example</title>
</head>
</html>2.2 設置相對URL的解析基準（base元素）
| base元素 | |
|---|---|
| 元素類型 | 元數據 |
| 允許具有的父元素 | head |
| 局部屬性 | href 、target |
| 內容 | 無 |
| 標籤用法 | 虛元素形式 |
| 是否爲HTML5新增 | 否 |
| 在HTML5中的變化 | 無 |
| 習慣樣式 | 無 |
例子：
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<base href="http://titan/listings/" target="_blank"/><!--設置好URL後在下面的a元素就會用到這裏的路徑-->
</head>
<body>
<!--瀏覽器就會把基準URL和相對URL拼接成完整的URL: http://titan/listings/page2. htm1 。-->
<a href="page2.html">Page 2</a><!--這裏會使用上面base的路徑-->
</body>
</html>2.3 用元數據說明文檔（meta元素）
| meta元素 | |
|---|---|
| 元素類型 | 元數據 |
| 允許具有的父元素 | head |
| 局部屬性 | name 、content 、charset和http-equiv |
| 內容 | 無 |
| 標籤用法 | 虛元素形式 |
| 是否爲HTML5新增 | 否 |
| 在HTML5中的變化 | charset屬性是HTML5 中新增的。在HTML4 中， http-equiv屬性可以有任意多個不同值。而在HTML5 中情況有所不同，只有本小節所說的值才能使用。HTML4 中的scheme屬性在HTML5 中已不再使用。此外，現在已不再使用meta元素來指定網頁所用的語言（本章稍後會介紹HTML5 中的做法） |
| 習慣樣式 | 無 |
例子：
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<!--1、在meta元素中用名／值對定義元數據-->
<meta name="author" content="Adam Freeman" />
<!--
供meta 元素使用的預定義元數據類型
application name 當前頁所屬Web應用系統的名稱
author 當前頁的作者名
description 當前頁的說明
generator 用來生成HTML的軟件名稱（通常用於以Ruby on Rails 、ASP.NET等服務器端框架生成HTML頁的情況下）
keywords 一批以逗號分開的字符串，用來描述頁面的內容-->
<!--2、聲明字符編碼-->
<meta charset="utf-8" />
<!--3、模擬HTTP標頭文字-->
<!--http-equiv屬性的用途是指定所要模擬的標頭字段名稱，字段值則由content屬性指定。此例
將標頭字段refresh 的值設置爲5, 其作用是讓瀏覽器每隔5秒就再次載入頁面。-->
<meta http-equiv="refresh" content="5" />
<!--
meta元素的http-equiv屬性允許使用的值
refresh 以秒爲單位指定一個時間間隔，在此時間過去之後將從服務器重新載入當前頁面。也可以另行指定一個URL讓瀏覽器載入。如<meta http-equiv="refresh" content="5" http://apress.com" />
default-style 指定頁面優先使用的樣式表。對應的content屬性值應與同一文檔中某個style元素或link元素的title屬性值相同
content-type 這是另一種聲明HTML頁面所用字符編碼的方法。如<meta http-equiv="content-type" content="text/html charset=UTF-8" />
-->
</head>
<body>
</body>
</html>2.4 定義css樣式（style元素）
| style元素 | |
|---|---|
| 元素類型 | 無 |
| 允許具有的父元素 | 任何可包含元數據元素的元素，包括head 、div 、noscript 、section 、article 、aside |
| 局部屬性 | type 、media 、scoped |
| 內容 | css樣式 |
| 標籤用法 | 開始標籤和結束標籤。內含文字 |
| 是否爲HTML5新增 | 否 |
| 在HTML5中的變化 | scoped展性爲HTML5 中新增 |
| 習慣樣式 | 無 |
例子：
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<!--使用style元素指定樣式
type屬性指定樣式類型
scoped屬性指定樣式作用範圍（尚無主流瀏覽器支持style元素的scoped屬性）
media屬性指定樣式適用的媒體-->
<style media="screen AND (max-width:500px)" type="text/css">
a {
background-color: grey;
color: white;
padding: 0.5em;
}
</style>
<style media="screen AND (min-width:500px)" type="text/css">
a {
color: Red;
font-style: italic;
}
</style>
<!--供style元素的media屬性用的規定設備值
all 將樣式用於所有設備（默認值）
aural 將樣式用於語音合成器
braille 將樣式用於盲文設備
handheld 將樣式用於手持設備
projection 將樣式用於投影機
print 將樣式用於打印預覽和打印頁面時
screen 將樣式用於計算機顯示器屏幕
tty 將樣式用於電傳打字機之類的等寬設備
tv 將樣式用於電視機-->
<!--供style元素的media屬性使用的特性 AND（可以是NOT和OR）後面的值
width height 指定瀏覽器窗口的寬度和高度。單位爲px, 代表像素
device-width 指定整個設備（而不僅僅是瀏覽器窗口）的寬度和高度。單位爲px, 代表像素
device-height
resolution 指定設備的像素密度。單位爲dpi ( 點瑛寸）或dpcm( 點／釐米）
orientation 指定設備的較長邊朝向。支持的值有portrait和landscape。該特性沒有限定詞
aspect-ratio 指定瀏覽器窗口或整個設備的像素寬高比。其值表示爲像素寬度與像素高度的比值
device-aspect-ratio
color monochrome 指定彩色或黑白設備上每個像素佔用的二進制位數
color-index 指定設備所能顯示的顏色數目
scan 指定電視的掃描模式。支持的值有progressive和interlace。該特性沒有限定詞
grid 指定設備的類型。網格型設備使用固定的網格顯示內容，例如基於字符的終端和單行顯示的尋呼機。支持的值有0和l ( l 代表網格型設備） 。該特性沒有限定詞-->
</head>
<body>
</body>
</html>
2.5 指定外部資源（link元素）
| link元素 | |
|---|---|
| 元素類型 | 元數據 |
| 允許具有的父元素 | head 、noscript |
| 局部屬性 | href 、rel 、hreflang 、media 、type 、sizes |
| 內容 | 無 |
| 標籤用法 | 虛元素形式 |
| 是否爲HTML5新增 | 否 |
| 在HTML5中的變化 | 新增了sizes屬性。原來的charset 、rev和target屬性在HTML5 中已不再使用 |
| 習慣樣式 | 無 |
例子：
<!--
link元素的局部屬性
href 指定link元素指向的資源的URL
hreflang 說明所關聯資源使用的語言
media 說明所關聯的內容用於哪種設備。該屬性使用的設備和特性值與《7.2.4 定義css樣式（style元素）》中介紹的相同
rel 說明文檔與所關聯資源的關係類型
sizes 指定圖標的大小。本章後面有一個用link元素載人網站標誌的例子
type 指定所關聯資源的MlME類型，如text/css 、image/x-icon
link元素的rel屬性值選編
alternate 鏈接到文檔的替代版本，比如另一種語言的譯本
author 鏈接到文檔的作者
help 鏈接到當前文檔的說明文檔
icon 指定圖標資源，參見下面所示
license 鏈接到當前文檔的相關許可證
pingback 指定一個回探( pingback) 服務器。從其他網站鏈接到博客的時候它能自動得到通知
prefetch 預先獲取一個資源
stylesheet 載入外部樣式表
-->
<!DOCTYPE HTML>
<html>
<head>
<!--用link元素載入外部樣式表-->
<link rel="stylesheet" type="text/css" href="styles.css" />
<!--用link元素添加網站標誌-->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<!--預先獲取關聯的資源（只有Firefox 支持link元素的預先獲取功能）-->
<link rel="prefetch" href="/page2.html" />
</head>
<body>
</body>
</html>3 使用腳本元素
3.1 script 元素
| script元素 | |
|---|---|
| 元素類型 | 元數據/短語 |
| 允許具有的父元素 | 可以包含元數據或短語元素的任何元素 |
| 局部屬性 | type 、src 、defer 、async 、charset |
| 內容 | 腳本語言語句。用於導入外部JavaScript庫時元素沒有內容 |
| 標籤用法 | 必須使用開始標籤和結束標籤。不能使用自閉合標籤，就算引用外部JavaScript庫也是如此 |
| 是否爲HTML5新增 | 否 |
| 在HTML5中的變化 | 在HTML5中type屬性可有可無， async屬性是新增的， HTML中的屬性language在HTML5中已不再使用 |
| 習慣樣式 | 無 |
例子：
<!--
script元素的局部屬性
type 表示所引用或定義的腳本的類型，對於JavaScript腳本這個屬性可以省略
src 指定外部腳本文件的URL, 參見後面的例子
defer 設定腳本的執行方式，參見後面的例子。這兩個屬性只能與src屬性一同使用
async
charset 說明外部腳本文件所用字符編碼，該屬性只能與src屬性一同使用
-->
<!DOCTYPE html>
<html>
<head>
<!--1. 定義文檔內嵌腳本-->
<script>
document.write("This is from the script");
</script>
<!--2 載入外部腳本庫，用src屬性載入外部腳本-->
<script src="simple.js"></script>
<!--3. 推遲腳本的執行，使用帶defer屬性的script元素
瀏覽器在遇到帶有defer屬性的script元素時，會將腳本的加載和執行推遲到HTML文檔中所有元素都已得到解析之後-->
<script defer src="simple2.js"></script>
<!--4 異步執行腳本，使用async屬性
使用async屬性的一個重要後果是頁面中的腳本可能不再按定義它們的次序執行。因此如果
腳本使用了其他腳本中定義的函數或值，那就不宜使用async屬性-->
<script async src="simple2.js"></script>
</head>
<body>
</body>
</html>3.2 noscript元素
| noscript元素 | |
|---|---|
| 元素類型 | 元數據／短語／流 |
| 允許具有的父元素 | 任何可以包含元數據元素、短語元素或流元素的元素 |
| 局部屬性 | 無 |
| 內容 | 短語元索或流元素 |
| 標籤用法 | 開始標籤和結束標籤都需要 |
| 是否爲HTML5新增 | 否 |
| 在HTML5中的變化 | 無 |
| 習慣樣式 | 無 |
例子：
<!DOCTYPE html>
<html>
<head>
<!--使用noscript元素，當腳本被禁用時顯示-->
<noscript>
<h1>Javascript is required!</h1>
<p>You cannot use this page without Javascript</p>
</noscript>
<!--用noscript元素重定向瀏覽器，瀏覽器不支持JavaScript時將其引至另一個URL-->
<noscript>
<meta http-equiv="refresh" content="0; http://www.apress.com" />
</noscript>
</head>
<body>
</body>
</html>