地址：http://note.youdao.com/noteshare?id=ca45c17e98435e0a6095f05bd7e7f565

下面是直接複製貼上過來的，沒有圖片和亂版了。

HTML5元素背景基本知識
1.語義與呈現分離
①HTML5中的一大主要變化是基本信念方面的：將元素的語義與元素對其內容呈現結果的影響分開。
簡單理解：HTML元素負責文件內容的結構和含義，CSS樣式應用於元素上來控制內容的呈現。
②HTML5中新增的大多數元素有具體的含義。
舉例：
article元素可以用來表示適於聯合供稿的獨立成篇的內容。
figure元素表示圖片。
③圓滑的定義，對應用廣泛的HTML4元素保留。HTML5成了一個“雙速”標準。
舉例：b元素
HTML4：指示瀏覽器以粗體顯示其開始標籤和結束標籤之間的內容。
HTML5：b元素表示一段文字（將這段文字從周圍文字中凸現出來並不表示特別的強調或重要性），習慣上使用粗體呈現，其使用場合包括文章提要中的關鍵字或產品評論中的產品名稱等。
（其實說白了也是粗體顯現）
2.元素選用原則
由於用HTML元素來標記的內容型別過多，不同內容的相同術語的含義可能不同。
舉例：section在技術規範、合同和部落格文章三種情況下的含義截然不同。

作者對於選擇用來標記內容的元素方面的幾條原則：
①少亦可為多：標記只應該應內容對語義的需要使用，不要亂用，把文件弄得標記密佈。
經驗法則：問問自己打算如何發揮一個元素的語義作用，如果不能馬上答出就不用這個元素。
②別誤用元素：每個元素針對的是一種特定型別的內容，只宜將元素用於它們原定的用途，不要創造自有的語義。
PS：若找不到適合自己所要含義的元素，可以考慮使用通用元素（如span或div），並且用全域性屬性class表明其含義。CSS樣式不是類屬性唯一的用途。
③具體為佳，一以貫之：用來標記內容的元素應該選擇最為具體的那個。能用已有元素就別用通用元素。
④對使用者不要想當然：使用者不僅僅是隻關心在瀏覽器中呈現的效果而已。

3.元素說明體例
元素摘要表。
4.元素速覽
1.文件和元資料元素
建立HTML文件的上層建築，向瀏覽器說明文件的情況，定義指令碼程式和CSS樣式，提供瀏覽器禁用指令碼時要顯示的內容。
元素 說明 型別 新增或有無變化
base 設定相對URL的基礎 元資料 無變化
body 表示HTML文件的內容 無 有變化
DOCTYPE 表示HTML文件的開始 無 有變化
head 包含文件的元資料 無 無變化
html 表示文件中HTML部分的開始 無 有變化
link 定義與外部資源(通常是樣式表或網站圖示)的關係 元資料 有變化
meta 提供關於文件的資訊 元資料 有變化
noscript 包括瀏覽器禁用指令碼或不支援指令碼時顯示的內容 元資料、短語 無變化
script 定義指令碼程式，可以是文件內嵌的也可以是外部文
件中的 元資料、短語 有變化
style 定義CSS樣式 元資料 有變化
title 設定文件標題 元資料 無變化

2.文字元素
用來為內容提供基本的結構和含義。
元素 說明 型別 新增或有無變化
a 生成超連結 短語、流 有變化
abbr 縮略詞 短語 無變化
b 不帶強調或著重意味地標記一段文字 短語 有變化
br 表示換行 短語 無變化
cite 表示其他作品的標題 短語 有變化
code 表示計算機程式碼片段 短語 無變化
del 表示從文件中刪除的文字 短語、流 新增
dfn 表示術語定義 短語 無變化
em 表示著重強調的一段文字 短語 無變化
i 表示與周邊內容秉性不同的一段文字，例如
來自另一種語言的詞語 短語 有變化
ins 表示加入文件的文字 短語、流 無變化
kbd 表示使用者輸入內容 短語 無變化
mark 表示一段因為與上下文中另一詞語相關而被
突出顯示的內容 短語 新增
q 表示引自他處的內容 短語 無變化
rp 與ruby元素結合使用，標記括號 短語 新增
rt 與ruby元素結合使用，標記注音符號 短語 新增
ruby 表示位於表意文字上方或右方的注音符號 短語 新增
s 表示文字已不再準確 短語 有變化
samp 表示計算機程式的輸出內容 短語 無變化
small 表示小號字型內容 短語 有變化
span 一個沒有自己的語義的通用元素。可以用在
希望應用一些全域性屬性卻又不想引入額外語義
的情況 短語 無變化
strong 表示重要內容 短語 無變化
sub 表示下標文字 短語 無變化
sup 表示上標文字 短語 無變化
time 表示時間或日期 短語 新增
u 不帶強調或著重意味地標記一段文字 短語 有變化
var 表示程式或計算機系統中的變數 短語 無變化
wbr 表示可安全換行的地方 短語 新增

3.對內容分組
用於分組的元素
元素 說明 型別 新增或有無變化
blockquote 表示引自他處的大段內容 流 無變化
dd 用在dl元素之中，表示定義 無 無變化
div 一個沒有任何既定語義的通用元素，是span元素
在流元素中的對應物 流 無變化
dl 表示包含一系列術語和定義的說明列表 流 無變化
dt 用在dl元素之中，表示術語 無 無變化
figcaption 表示figure元素的標題 無 新增
figure 表示圖片 流 新增
hr 表示段落級別的主題轉換 流 有變化
li 用在ul、ol和menu元素中，表示列表項 無 有變化
ol 表示有序列表 流 有變化
p 表示段落 流 有變化
pre 表示其格式應被保留的內容 流 無變化
ul 表示無序列表 流 有變化

4.劃分內容
讓每個概念、觀點或主題彼此分隔開。
用於劃分內容的元素
元素 說明 型別 新增或有無變化
address 表示文件或article的聯絡資訊 流 新增
article 表示一段獨立的內容 流 新增
aside 表示與周邊內容稍有牽涉的內容 流 新增
details 生成一個區域，使用者將其展開可以獲得更多細節
知識 流 新增
footer 表示尾部 流 新增
h1~h6 表示標題 流 無變化
header 表示首部 流 新增
hgroup 將一組標題組織在一起，以便文件大綱只顯示其
中第一個標題 流 新增
nav 表示有意集中在一起的導航元素· 流 新增
section 表示一個重要的概念或主題 流 新增
summary 用在details元素中，表示該元素內容的標題或說明 無 新增

5.製表
表格在HTML5中的主要變化是不能再用來控制頁面佈局，這項工作交給了CSS佈局特性。
表格元素
元素 說明 型別 新增或有無變化
caption 表示表格標題 無 有變化
col 表示一列 無 有變化
colgroup 表示一組列 無 有變化
table 表示表格 流 有變化
tbody 表示表格主體 無 有變化
td 表示單元格 無 有變化
tfoot 表示表腳 無 有變化
th 表示標題行單元格 無 有變化
thead 表示標題行 無 有變化
tr 表示一行單元格 無 有變化

6.建立表單
獲取使用者的輸入資料。HTML5中對這方面新增許多元素和特性（包括在使用者提交表單時在客戶端驗證輸入資料的功能）。
表單元素
元素 說明 型別 新增或有無變化
button 表示可用來提交或重置表單的按鈕（或一般按鈕） 短語 有變化
datalist 定義一組提供給使用者的建議值 流 有變化
fieldset 表示一組表單元素 流 有變化
form 表示HTML表單 流 有變化
input 表示用來收集使用者輸入資料的控制元件 短語 有變化
keygen 生成一對公鑰和私鑰 短語 新增
label 表示表單元素的說明標籤 短語 有變化
legend 表示fieldset元素的說明性標籤 無 無變化
optgroup 表示一組相關的option元素 無 無變化
option 表示供使用者選擇的一個選項 無 無變化
output 表示計算結果 短語 新增
select 給使用者提供一組固定的選項 短語 有變化
textarea 使用者可以用它輸入多行文字 短語 有變化

7.嵌入內容
嵌入元素
元素 說明 型別 新增或有無變化
area 表示一個用於客戶端分割槽響應圖的區域 短語 有變化
audio 表示一個音訊資源 無 新增
canvas 生成一個動態的圖形畫布 短語、流 新增
embed 用外掛在HTML文件中嵌入內容 短語 新增
iframe 通過建立一個瀏覽上下文在文件中嵌入另一個文件 短語 有變化
img 嵌入影象 短語 有變化
map 定義客戶端分割槽響應圖 短語、流 有變化
meter 嵌入數值在許可值範圍背景中的圖形表示 短語 新增
object 在HTML文件中嵌入內容。也可用於生成瀏覽上下
文和生成客戶端分割槽響應圖 短語、流 有變化
param 表示將通過object元素傳遞給外掛的引數 無 無變化
progress 嵌入目標進展或任務完成情況的圖形表示 短語 新增
source 表示媒體資源 無 新增
svg 表示結構化向量內容 無 新增
track 表示媒體的附加軌道（例如字幕） 無 新增
video 表示視訊資源 無 新增

5.未實現的元素
有兩個元素目前還沒有瀏覽器實現，而且在HTML5規範中也僅有含糊不清的說明。
command元素和menu元素：為了讓選單和使用者介面元素處理起來更簡單一些。

建立HTML文件
1.構築基本的文件結構
文件元素：只有4個，這些基礎成分確定了HTML文件的輪廓以及瀏覽器的初始環境。
①DOCTYPE元素
獨一無二，自成一類。每一個HTML文件都必須以DOCTYPE元素開頭。瀏覽器據此得知自己將要處理的是HTML內容。
用法只有一種：
這個元素告訴瀏覽器兩件事情：
1.它處理的是HTML文件
2.用來標記文件內容的HTML所屬的版本。
PS：
1.版本號不用寫瀏覽器也能識別是HTML5，因為這個元素的形式在HTML5和在先前的HTML版本中略有差異。
2.該元素沒有結束標籤，只有單個開始標籤。

②html元素
html元素更恰當的名稱是根元素，它表示文件中HTML部分的開始。
內容：head元素和body元素各一。
用法：

······此處省略內容和元素······

③head元素
head元素包含著文件和元資料。
元資料：向瀏覽器提供了有關文件內容和標記的資訊。此外還可以包含指令碼和對外部資源（比如CSS樣式表）的引用。
內容：必須有一個title元素，其他元資料元素可有可無。
用法：

④body元素
包裝文件的內容。
內容：所有短語元素和流元素
標籤用法：開始標籤和結束標籤
用法：

I like apples and organes.

Visit Apress.com

2.用元資料元素說明文件
1.元資料元素應放在head元素中。
2.元資料元素可以用來提供關於HTML文件的資訊。
3.它們本身不是文件內容，但提供了關於後面的文件內容的資訊。
①設定文件標題
title元素的作用是設定文件的標題或名稱。瀏覽器通常將該元素的內容顯示在其視窗頂端或標籤頁的標籤上。
內容：文件標題或對文件內容言簡意賅的說明。
標籤用法：開始標籤和結束標籤。內含文字
用法：

I like apples and organes.

Visit Apress.com

②設定相對URL的解析基準
1.base元素可用來設定一個基準URL，讓HTML文件中的相對連結在此基礎上進行解析。
2.相對連結省略了URL中的協議、主機和埠部分，需要根據別的URL（要麼是base元素中指定的URL，要麼是用以載入當前文件的URL）得出其完整形式。
3.base元素還能設定連結在使用者點選時的開啟方式，以及提交表單時瀏覽器如何反應。
元素：base
元素型別：元資料
允許具有的父元素：head
區域性屬性：href、target
內容：無
標籤用法：虛元素形式
HTML文件至少應該包含一個base元素。
1.使用href屬性
href屬性指定了解析文件此後部分中的相對URL要用到的基準URL。
例：使用base元素中的href屬性

I like apples and organes.

Visit Apress.com Page 2

PS：
1.titan：開發伺服器的名稱。
2.listings：伺服器上的檔案目錄。
3.a元素中的page2.html：相對URL，使用者點選這個連結時，瀏覽器就會把基準URL和相對URL拼接成完整的URL：http://titan/listings/page2.html。
4.不用base元素，則基準URL為當前HTML文件的URL。

2.使用target屬性
作用：告訴瀏覽器該如何開啟URL。
這個屬性的值：代表一個瀏覽上下文（browsing context）。

③用元資料說明文件
meta元素：定義文件的各種元資料。一個HTML文件可以包含多個meta元素。

1.指定名/值元資料對
meta元素的第一個用途是用名/值對定義元資料，為此需要用到其name和content屬性。
例：在meta元素中用名/值對定義元資料

I like apples and oranges.

Visit Apress.com Page 2

PS：
name屬性：表示元資料的型別
content屬性：提供值
供meta元素使用的幾種預定義元資料型別
元資料名稱 說明
application name 當前頁所屬Web應用系統的名稱
author 當前頁的作者名
description 當前頁的說明
generator 用來生成HTML的軟體名稱（通常用於以Ruby on Rails、
ASP.NRT等伺服器端框架生成HTML頁的情況下）
keywords 一批以逗號分開的字串，用來描述頁面的內容

更多請瀏覽元資料擴充套件清單網址：http://wiki.whatwg.org/wiki/MetaExtensions
有些使用較多，有些幾乎沒人用。
robots元資料：HTML文件的作者可以用它告訴搜尋引擎該如何對待該文件。
例：
robots元資料三個大多數搜尋引擎都認識的值：
noindex：表示不要索引本頁。
noarchive：表示不要將本頁存檔或快取。
nofollow：表示不要順著本頁中的連結繼續搜尋下去。

2.宣告字元編碼
meta元素的另一種用途是宣告HTML文件內容所用的字元編碼。
例：用meta元素宣告字元編碼

3.模擬HTTP標頭欄位
meta元素的最後一種用途是改寫HTTP（超文字傳輸協議）標頭欄位的值。
伺服器和瀏覽器之間傳輸HTML資料時一般用的就是HTTP。
例：用meta元素模擬HTTP標頭欄位

PS： 每隔5秒就再次載入頁面 http-equiv屬性：指定所要模擬的標頭欄位名稱。 content屬性：指定欄位值。 如果在重新整理間隔時間值後加上一個分號再加上一個URL，那麼瀏覽器在指定時間之後將載入指定的URL。 meta元素的http-equiv屬性允許使用的值 屬性值 說明 refresh 以秒為單位指定一個時間間隔，在此時過去之後將從伺服器重新載入頁面。也可 以另行指定一個URL讓瀏覽器載入。如 default-style 指定頁面優先使用的樣式表。對應的content屬性值應與同一文件中某個style元 素或link元素的title屬性值相同 content-type 這是另一種宣告HTML頁面所用字元編碼的方法。如

④定於CSS樣式
style元素可用來定義HTML文件內嵌的CSS樣式（link元素則是用來匯入外部樣式表中的樣式）。
例：使用style元素

I like apples and oranges.

Visit Apress.com Page 2

PS：
1.style元素可以出現在HTML文件中的各個部分。
2.一個文件可包含多個style元素。
3.不必把所有樣式定義塞進head部分。
（在使用模板引擎生成頁面的情況下這個特性很有幫助，因為這樣一來就可以用頁面特有的樣式為模板定義的樣式提供補充。）
①指定樣式型別
type屬性可以用來將所定義的樣式型別告訴瀏覽器。
但是瀏覽器支援的樣式機制只有CSS一種，所以這個屬性的值總是text/css。
②指定樣式作用範圍
1.如果style元素中有scoped屬性存在，那麼其中定義的樣式只作用於該元素的父元素及所有兄弟元素。
2.要是不用scoped屬性的話，在HTML文件中任何地方用style元素定義的樣式都將作用於整個文件。
③指定樣式適用的媒體
media屬性可用來表明文件在什麼情況下應該使用該元素中定義的樣式。
例：使用style元素的media屬性

I like apples and oranges.

Visit Apress.com Page 2

PS：程式碼中使用了兩個style元素，它們有不同的media屬性值。
1.瀏覽器在螢幕上顯示文件的時候用的是第一個style元素中的樣式。
2.在列印文件的時候用的是第二個中的樣式。
3.樣式的使用條件可以設計得非常細緻。首先要確定的是所針對的裝置型別。
供style元素的media屬性用的規定裝置值
裝置 說明
all 將樣式用於所有裝置（預設值）
aural 將樣式用於語音合成器
braille 將樣式用於盲文裝置
handheld 將樣式用於手持裝置
projection 將樣式用於投影機
print 將樣式用於列印預覽和列印頁面時
screen 將樣式用於計算機顯示器螢幕
tty 將樣式用於電傳打字機之類的等寬裝置
tv 將樣式用於電視機

media還有一些特性可以用來設計更具體的使用條件。
例：讓style元素的物件更加具體

I like apples and oranges.

Visit Apress.com Page 2

PS：程式碼中使用的media的width特性區分兩組樣式：
1.瀏覽器視窗寬度小於500畫素時使用的是第一組樣式。
2.視窗寬度大於500畫素時使用的是第二組。
3.AND：組合裝置和特性條件，類似有NOT和表示OR的逗號（，）。

供style元素的media屬性使用的特性
特性 說明 示例
width height 指定瀏覽器視窗的寬度和高度。單位為px，代表畫素 width:200px
device-width 指定整個裝置（而不僅僅是瀏覽器視窗）的寬度和高度。
device-height 單位為px，代表畫素 min-device-height：200px
resolution 指定裝置的畫素密度。單位為dpi（點/英寸）或
dpcm（點/釐米） max-resolution：600dpi
orientation 指定裝置的較長邊朝向。支援的值有portrait和
landscape。該特性沒有限定詞 orientation：portrait
aspect-ratio 指定瀏覽器視窗或整個裝置的畫素寬高比。其值
device-aspect-ratio 表示為畫素寬度與畫素高度的比值 min-aspect-ratio：16/9
color monochrome 指定彩色或黑白裝置上每個畫素佔用的二進位制位數 min-monochrome：2
color-index 指定裝置所能顯示的顏色數目 max-color-index：256
scan 指定電視的掃描模式。支援的值有progressive和
interlace。該特性沒有限定詞 scan：interlace
grid 指定裝置的型別。網格型裝置使用固定的網格顯示
內容，例如基於字元的終端和單行顯示的尋呼機。
支援的值有0和1（1代表網格型裝置）。該特性
沒有限定詞 grid：0

⑤指定外部資源
link元素可用來在HTML文件和外部資源（CSS樣式表是最典型的情況）之間建立聯絡。
link元素定義了6個區域性屬性，其中最重要的是rel，它說明了HTML頁與link元素所關聯資源的關係型別。
link元素的區域性屬性
屬性 說明
href 指定link元素指向的資源的URL
hreflang 說明所關聯資源使用的語言
media 說明所關聯的內容用於哪種裝置。該屬性使用的裝置和特性值與之前的表相同
rel 說明文件與所關聯資源的關係型別
sizes 指定圖示的大小。稍後會有一個用link元素載入網站標誌的例子
type 指定所關聯資源的MIME型別，如text/css 、image/x-icon

為rel屬性設定的值決定瀏覽器對待link元素的方式。
rel屬性值最全面的介紹參見http://iana.org/assignments/link-relations/link-relations.xml
link元素的rel屬性值選編
值 說明
alternate 連結到文件的替代版本，比如另一種語言的譯本
author 連結到文件的作者
help 連結到當前文件的說明文件
icon 指定圖示資源
license 連結到當前文件的相關許可證
pingback 指定一個回探（pingback）伺服器。從其他網站連結到部落格的時候它能自動得到
通知
prefetch 預先獲取一個資源
stylesheet 載入外部樣式表

1.載入樣式表。
例：styles.css檔案
a{
background-color: grey;
color: white;
padding: 0.5em;
}
例：用link元素載入外部樣式表

I like apples and oranges.

Visit Apress.com Page 2

PS：使用link元素的好處：
一個HTML文件可使用多個link元素載入多個外部資源，這樣可以讓多個文件使用同一套樣式而不必將這些樣式複製到每一個文件中。

2.為頁面定義網站標誌
例：用link元素新增網站標誌

PS：如果網站標誌檔案位於/favicon.ico（即Web伺服器的根目錄），那就不必用到link元素。

3.預先獲取資源
可以要求瀏覽器預先獲取預計很快就要用到的資源。
例：預先獲取關聯的資源

PS：為使用者點選某個連結以執行其他需要這個頁面的操作做好準備。

3.使用指令碼元素
與指令碼相關的元素有兩個：
1.script：用於定義指令碼並控制其執行過程。
2.noscript：用於規定在瀏覽器不支援指令碼或禁用了指令碼的情況下的處理方法。
作者建議：
script元素可以放在HTML文件中的任意位置，但建議把所有指令碼元素都集中到文件的head部分。

①script元素
script元素在頁面中加入指令碼的兩種方式：
1.在文件中定義指令碼
2.引用外部檔案中的指令碼
最常用的指令碼型別：JavaScript。
標籤用法：必須使用開始標籤和結束標籤。不能使用自閉標籤，就算引用外部JavaScript庫也是如此。
元資料元素：位於head元素中的script元素。
短語元素：位於其他元素（如body或section）中的script元素。

script元素的區域性屬性
屬性 說明
type 表示所引用或定義的指令碼型別，對於JavaScript指令碼這個屬性可以省略
src 指定外部指令碼檔案的URL
defer、async 設定指令碼的執行方式。這兩個屬性只能與src屬性一同使用
charset 說明外部指令碼檔案所用字元編碼，該屬性只能與src屬性一同使用

1.定義文件內嵌指令碼
定義指令碼最簡單的方式是內嵌定義，也即將JavaScript語句內嵌在HTML頁面中。
例：定義文件內嵌指令碼

I like apples and oranges.

Visit Apress.com Page 2

PS：
1.不使用type屬性時，瀏覽器會假定使用的是JavaScript。
2.預設情況下，瀏覽器在頁面中一遇到指令碼就會執行。

2.載入外部指令碼庫
可以把指令碼放到單獨的檔案中，然後用script元素載入HTML文件。
這些檔案有小（如下例子）有大（如jQuery這種複雜的庫）
例：指令碼檔案simple.js的內容
document.write(“This is from the script”);
用script元素的src屬性引用這個檔案。設定了src屬性的script元素不能含有任何內容。不能用同一個script元素既定義內嵌指令碼又引用外部指令碼。
例：用src屬性載入外部指令碼

I like apples and oranges.

Visit Apress.com Page 2

PS：
1.src屬性的值應為所要載入的指令碼檔案的URL。
2.由於simple.js檔案與這個HTML檔案位於同一個目錄，所以此例中可以使用一個相對URL。

3.推遲指令碼的執行
可以用async和defer屬性對指令碼的執行方式加以控制。
defer屬性：告訴瀏覽器要等頁面載入和解析完畢之後才能執行指令碼。
舉例說明defer的好處：
例：指令碼檔案simple2.js所含語句
document.getElementById(“applecode”).innerText = “cherries”;
PS：此段語句執行的時候會查詢一個id屬性值為applecode的元素並且將其內部內容改為cherries。
例：引用指令碼檔案

I like apples and oranges.

Visit Apress.com Page 2

PS：結果不是預想的那樣。
原因：
預設情況下，瀏覽器一遇到script元素就會暫停處理HTML文件，轉而載入指令碼檔案並執行其中的指令碼。在指令碼執行完畢之後瀏覽器才會繼續解析HTML。

這個問題有個顯而易見的方法是將script元素放在文件最後：

I like apples and oranges.

Visit Apress.com Page 2

PS：已經生效。
另一個方法：使用defer屬性：

I like apples and oranges.

Visit Apress.com Page 2

PS：defer屬性只能用於外部指令碼檔案，它對文件內嵌指令碼不起作用。

4.非同步執行指令碼
async屬性解決的是另一類問題。瀏覽器預設處理script元素方式：各個script元素依次（即按其定義的次序）同步（即在指令碼載入和執行程序中不再管別的事情）執行。
對於不需要預設方式的指令碼，對這類指令碼可以使用async屬性提高其效能。
這方面典型例子是跟蹤指令碼（tracking script）。這類指令碼自成一體，一般不需要與HTML文件中的元素互相作用。為等待它們載入然後向自己的伺服器發回報告而推遲顯示頁面沒有任何意義。

使用async屬性後：瀏覽器將在繼續解析HTML文件中其他元素（包括其他script元素）的同時非同步載入和執行指令碼。
例：使用async屬性

I like apples and oranges.

Visit Apress.com Page 2

②noscript元素
noscript元素可以用來向禁用了JavaScript或瀏覽器不支援JavaScript的使用者顯示一些內容。
與script元素類似，noscript元素所屬型別取決於它在文件中的位置。
noscript元素作用：顯示不需要JavaScript功能的內容或提示需要啟用JavaScript才能使用此網站或頁面。

Javascript is required!

You cannot use this page without Javascript

I like apples and oranges.

Visit Apress.com Page 2

chrome禁用JavaScript方法：

PS：一個頁面中可以加入多個noscript元素，以便與需要指令碼控制的各個功能區域相對應。在提供不依賴於JavaScript的備用標記內容時這尤其有用。

此外，還有一種選擇是在瀏覽器不支援JavaScript時將其引至另一個URL。這需要在noscript元素中加入一個meta元素。
例：用noscript元素重定向瀏覽器

I like apples and oranges.

Visit Apress.com Page 2 PS：這段程式碼會在不支援JavaScript或禁用了JavaScript的瀏覽器試圖載入頁面時將使用者引至www.apress.com網站

標記文字
本章介紹文字層面的元素（簡稱文字元素）。
1.生成超連結
超連結是HTML中的關鍵特性，是使用者賴以在內容中（在同一文件中的不同頁面間）導航的基礎。超連結用a元素生成。
a元素
元素型別：包含短語內容時被視為短語元素，包含流內容時被視為流元素。
區域性屬性：href、hreflang、media、rel、target、type

a元素的區域性屬性
屬性 說明
href 指定a元素所指資源的URL
hreflang 說明所連結資源使用的語言
media 說明所連結資源用於哪種裝置，該屬性使用的裝置和特性值見之前的表
rel 說明文件與所連結資源的關係型別。與link元素的rel屬性使用相同的值
target 指定用以開啟所連結資源的瀏覽環境
type 說明所連結資源的MIME型別（比如text/html）

①生成指向外部的超連結
將a元素的href屬性設定為以http://開頭的URL即可生成到其他HTML文件的超連結。
使用者點選該超連結時，瀏覽器就會載入指定的頁面。
例：使用ａ元素連結到外部資源

I like apples and oranges

PS：URL不一定都要指向其他網頁。

②使用相對URL
如果href屬性值不是以類似http://這樣的已知協議開頭，那麼瀏覽器會將該超連結視為相對引用。
預設情況下，瀏覽器會假定目標資源與當前文件位於同一位置。
例：在超連結中使用相對URL

I like apples and oranges You can see other fruits I like here.

PS：在當前HTML文件的URL後面追加。這種預設行為可以通過用base元素提供一個基礎URL加以改變。

③生成內部超連結
超連結也可用來將同一文件中的另一個元素移入視野。為此需要用到形如CSS中針對目標元素的ID選擇器的表示式：#
例：生成內部超連結

I like apples and oranges You can see other fruits I like here.

	<p id="#fruits">
		I also like bananas,mangoes,cherries,apricots,plums,peaches and grapes.
	</p>
</body>

PS：超連結的href屬性值設定為#fruits。使用者點選這個連結時，瀏覽器將在文件中查詢一個id屬性值為fruits的元素。如果該元素不在視野之中，那麼瀏覽器會將文件滾動到能看見它的位置。

④設定瀏覽環境
target屬性的用途是告訴瀏覽器希望將所連結的資源顯示在哪裡。
預設情況下，瀏覽器使用的是顯示當前文件的視窗、標籤頁或窗框（frame），所以新文件將會取代現在顯示的文件，不過還有其他選擇。
供a元素的target屬性使用的值
屬性值 說明
_blank 在新視窗或標籤頁中開啟文件
_parent 在父窗框組（frameset）中開啟文件
_self 在當前視窗中開啟文件（這是預設行為）
_top 在頂層視窗開啟文件

在指定窗框中開啟文件 PS：以上每一個值都代表一個瀏覽環境（browsing context）。

2.用基本的文字元素標記內容
①表示關鍵詞和產品名稱
b元素可以用來標記一段文字，但並不代表特別的強調或重要性。
例：使用b元素

I like apples and oranges.

②加以強調
em元素表示對一段文字的強調。這可以用來向讀者提供關於句子或段落含義的一種語境。
例：使用em元素

I like apples and oranges.

PS：
1.這個元素的習慣樣式是斜體字。
2.把句子大聲讀出來，並且虛擬一個提問，假設要新增em元素的內容就是答案。
3.例如：誰愛吃蘋果和橙子。答案：我。

③表示外文詞語或科技術語
i元素表示一段文字與周圍內容有本質區別。
這個定義比較含糊，不過這個元素常用的地方包括外文詞語、科技術語甚至某人的想法（與言語相區別）。
例：使用i元素

I like apples and oranges. My favorite kind of orange is the mandarin,properly known as citrus reticulata.

PS：
1.i元素的習慣樣式與em相同。
2.這是元素的含義有別於呈現的好例子。

④表示不準確或校正
s元素用來表示一段文字不再正確或準確。其習慣樣式是在文字上顯示一條刪除線。
例：使用s元素

I like apples and oranges. My favorite kind of orange is the mandarin,properly known as citrus reticulata. Oranges at my local store cost $1 each $2 for 3.

⑤表示重要的文字
strong元素表示一段重要文字。

I like apples and oranges. Warning: Eating too many oranges can give you heart burn.

PS：
1.strong元素的習慣樣式與b元素相同。
2.b元素並未賦予其包圍的文字任何重要性。

⑥為文字新增下劃線
u元素讓一段文字從周圍內容中凸現出來，但並不表示強調或其重要性有所增加。
例：使用u元素

I like apples and oranges. Warning: Eating too many oranges can give you heart burn.

PS：u元素的習慣樣式與a元素類似。因此使用者往往會把加下劃線的文字誤認為超連結。為了防止引起混淆，應該儘量避免使用u元素。

⑦新增小號字型內容
small元素表示小號字型內容（fine print），常用於免責宣告和澄清宣告。
例：使用small元素

Oranges at my local store are $1 each (plus tax)

⑧新增上標和下標
sub和sup元素分別用於表示下標和上標。
例：使用sub元素和sup元素

The point x ₁₀ is the 10 ^th point.

3.換行
有兩個元素可以用來控制內容換行：br和wbr元素。
①強制換行
br元素會引起一次換行。其習慣樣式是將後續內容轉移到新行上。
PS：br元素只宜用在換行也是內容的一部分的情況。
例：使用br元素

I WANDEREN lonely as a cloud
That floats on high o'er vales and hills,
When all at once I saw a crowd,
A host, of golden daffodils;

②指明可以安全換行的建議位置
wbr元素的HTML5中新增的，用來表示長度超過當前瀏覽器視窗的內容適合在此換行，究竟換不換行由瀏覽器決定。wbr元素只不過是對恰當的換行位置的建議而已。
例：使用wbr元素

This is a very long word:Super califragilistic expialidocious. We can help the browser display long words with the wbr element.

PS；有了wbr元素，瀏覽器就能將一個長單詞分成幾小截，從而更加得體地換行。

4.表示輸入和輸出
有四個元素暴露了HTML的極客起源。它們代表的是計算機的輸入和輸出。
用於輸入和輸出的文字元素
元素 說明 習慣樣式
code 表示計算機程式碼片段 code{font-family：monospace:}
var 在程式設計語境中表示變數。也可表示一個供讀者在想 var{font-style：italic:}
象中插入一個指定值的佔位符
samp 表示程式或計算機系統的輸出 samp{font-family：monospace:}
kbd 表示使用者輸入 kbd{font-family：monospace:}

例：使用code、var、samp和kbd元素

var fruits = ["apples","oranges","mangoes","cherries"];
document.writeln("I like " + fruits.length + "fruits");

The variable in this example is fruits

The output from the code is:I like 4 fruits

When prompted for my favorite fruit,I typed:cherries

5.使用標題引用、引文、定義和縮寫
在科學和學術領域的文章中經常使用。
①表示縮寫
addr元素用來表示縮寫。其title屬性表示的是該縮寫代表的完整詞語。
例：使用abbr元素

I like apples and oranges. The FDDC regulates the Florida citrus industry.

PS：abbr元素沒有習慣樣式，因此它包含的內容看上去沒有什麼特別之處。

②定義術語
dfn元素表示定義中的術語，也即在用來解釋一個詞（或短語）的含義的句子中的詞（或短語）。
PS：dfn元素有一些使用規則。如果要為dfn元素設定title屬性，那麼必須將其設定為所定義的術語。
例：使用dfn元素

I like apples and oranges. The FDDC regulates the Florida citrus industry.

The apple is the pomaceous fruit of the apple tree. species Malus domestica in the rose family.

PS：
1.如果dfn元素包含一個abbr元素，那麼該縮寫詞就是要定義的術語。
2.如果元素內容為文字並且沒有title屬性，那麼其文字內容就是要定義的術語。
3.該元素沒有習慣樣式，因此其內容看上去沒有什麼特別之處。

③引用來自其他處的內容
q元素表示引自他處的內容。
q元素的cite屬性可以用來指定來源文章的URL。
例：使用q元素

I like apples and oranges. The FDDC regulates the Florida citrus industry.

The apple is the pomaceous fruit of the apple tree. species Malus domestica in the rose family.

PS：q元素的習慣樣式使用CSS中的：before和：after這兩個偽元素選擇器在引文前後生成引號。

④引用其他作品的標題
cite元素表示所引用作品（如圖書、文章、電影和詩歌）的標題。
例：使用cite元素

I like apples and oranges. The FDDC regulates the Florida citrus industry.

The apple is the pomaceous fruit of the apple tree. species Malus domestica in the rose family.

My favorite book on fruit is Fruit: Edible,Inedible,Incredible by Stuppy & kesseler.

PS：習慣樣式：斜體。

6.使用語言元素
有五個HTML元素（其中四個是HTML5中新增的）的用途是為使用非西方語言提供支援。
①ruby、rt和rp元素
注音符號（ruby character）是用來幫助讀者掌握表意語言（如漢語和日語）文字正確發音的符號，位於這些文字上方或右方。ruby元素表示一段包含注音符號的文字。
ruby元素需要與rt元素和rp元素搭配使用。
1.rt元素：用來標記注音符號。
2.rp元素：用來標記供不支援注音符號特性的瀏覽器顯示在注音符號前後的括號。
例：使用ruby、rt和rp元素

魑(chī) 魅(mèi) 魍(wǎng) 魎(liǎng)

PS：支援注音符號的瀏覽器的效果，rp元素及其內容會被忽略。
作者用Firefox瀏覽器演示了不支援注音符號功能的瀏覽器開啟是什麼情況，這裡我不演示。

②bdo元素
bdo元素可以用來撇開預設的文字方向設定，明確地指定其內容中文字的方向。
使用bdo元素必須加上dir屬性。該屬性允許使用的值有rtl（從右到左）和ltr（從左到右）。
例：使用bod元素

I like apples and oranges. The FDDC regulates the Florida citrus industry.

This is left-to-right:I like oranges

This is right-to-left:I like oranges

③bdi元素
bdi元素表示一段出於文字方向考慮而與其他內容隔離開來的文字。
這個元素適用於欲顯示內容的文字方向未知的情況。在這種情況下，瀏覽器會自動確定文字方向，這有可能攪亂頁面佈局。
例：未使用bdi元素的情況

I like apples and oranges. Here are some users and the fruit they purchased this week:

Adam:3 applies and 2 oranges

ゑ，お:2 apples

Joe:6 apples

PS：作者是拉丁文，顯示的是2ゑ，おapples。我找不到拉丁文。

例：使用bdi元素

I like apples and oranges. Here are some users and the fruit they purchased this week:

Adam:3 applies and 2 oranges

ゑ，お:2 apples

Joe:6 apples

7.其他文字元素
①表示一段一般性的內容
span元素本身沒有任何含義。它可以用來把一些全域性屬性應用到一段內容上。
例：使用span元素

I like apples and oranges.

②突出顯示文字
mark元素的HTML5中新增的，用來表示因為與某段上下文相關而被突出顯示的一段文字。
例：使用mark元素

Homophones are words which are pronounced the same,but have different spellings and meanings.For example:

I would like a pair of pears

③表示新增和刪除的內容
ins元素和del元素可以分別用來表示文件中新增和刪除的文字。
ins和del元素定義了相同的屬性。cite屬性用來指定解釋新增或刪除相關文字原因的文件的URL。datetime屬性則用來設定修改時間。
例：使用del元素和ins元素

Homophones are words which are pronounced the same,but have different spellings and meanings.For example:

I would like a pair of pears

I can sea the see I can see the sea

④表示時間和日期
time元素可以用來表示時間和日期。
1.如果布林屬性pubdate存在，那麼time元素表示的是整個HTML文件或離該元素最近的article元素的釋出日期。
2.datetime屬性以RFC3339規定的格式（參見http://tools.ietf.org/html/rfc3339）指定日期或時間。
3.有了datetime，就能在元素中以便於閱讀的形式設定日期或時間，同時又確保計算機能無歧義地解析指定的日期和時間。
例：使用time元素

I still remember the best apple I ever tasted. I bought it at 3 o'clock on December 7th.

組織內容
1.為什麼要對內容分組
HTML要求瀏覽器將連在一起的幾個空白字元折算為一個空格。
這樣可以把HTML文件的佈局與文件內容在瀏覽器視窗中的佈局分開。
例：HTML文件中的大段內容

	I like apples and oranges.

	I also like bananas,mangoes,cherries,apricots,plums,peaches and grapes.
	You can see other fruits I like <a href="fruitlist.html">here</a>.

	<strong>Warning:</strong> Eating too many oranges can give you heart burn.

	My favorite kind of orange is the mandarin,properly known
	as <i>citrus reticulata</i>.
	Oranges at my local store cost <s>$1 each</s> $2 for 3.

	The <abbr title="Florida Department of Citrus">FDDC</abbr> regulates the Florida
		citrus industry.

	I still remember the best apple I ever tasted.
	I bought it at <time datetime="15:00">3 o'clock</time>
	on <time datetime="1984-12-7">December 7th</time>.
</body>

PS：此例body元素中的文字散佈在許多行上。有些設定了縮排，並且在行組之間還有換行。但瀏覽器會忽略所有這些結構，將其內容全部顯示在一行上。

2.建立段落
p元素代表段落段落包含著一個或多個相關句子，這些句子圍繞的是一個觀點或論點。組成一個段落的句子也可以涉及多個論點，但它們都有一些共同的主題。
例：使用p元素

	<p>I like apples and oranges.

	I also like bananas,mangoes,cherries,apricots,plums,peaches and grapes.
	You can see other fruits I like <a href="fruitlist.html">here</a>.</p>

	<p><strong>Warning:</strong> Eating too many oranges can give you heart burn.</p>

	<p>My favorite kind of orange is the mandarin,properly known
	as <i>citrus reticulata</i>.
	Oranges at my local store cost <s>$1 each</s> $2 for 3.</p>

	<p>The <abbr title="Florida Department of Citrus">FDDC</abbr> regulates the Florida
		citrus industry.</p>

	<p>I still remember the best apple I ever tasted.
	I bought it at <time datetime="15:00">3 o'clock</time>
	on <time datetime="1984-12-7">December 7th</time>.</p>
</body>

3.使用div元素
1.div元素沒有具體含義。
2.找不到其他恰當的元素可用時可以使用這個元素為內容建立結構並賦予其含義。
3.它的含義是由全域性屬性提供的，通常用的是class或id屬性。
4.div元素相當於流元素中的span。
5.建立自定義結構的確定：其含義只限於設計者的網頁或Web應用系統，別人並不瞭解。
6.具有自定義結構的HTML文件由第三方處理或設計樣式時可能會碰到麻煩。
例：使用div元素

	<p>I like apples and oranges.

	I also like bananas,mangoes,cherries,apricots,plums,peaches and grapes.
	You can see other fruits I like <a href="fruitlist.html">here</a>.</p>

	<p><strong>Warning:</strong> Eating too many oranges can give you heart burn.</p>

	<p>My favorite kind of orange is the mandarin,properly known
	as <i>citrus reticulata</i>.
	Oranges at my local store cost <s>$1 each</s> $2 for 3.</p>

	</div>

	<p>The <abbr title="Florida Department of Citrus">FDDC</abbr> regulates the Florida
		citrus industry.</p>

	<p>I still remember the best apple I ever tasted.
	I bought it at <time datetime="15:00">3 o'clock</time>
	on <time datetime="1984-12-7">December 7th</time>.</p>
</body>

PS：div元素將幾個不同型別的元素組織在一起以便統一應用樣式。

4.使用預先編排好的格式的內容
pre元素可以改變瀏覽器處理內容的方式，阻止合併空白字元，讓源文件中的格式得以保留。
pre元素跟code元素搭配在一起的時候尤其有用。程式語言中的格式通常都很重要，不宜用元素重新編排其樣式。
例：使用pre元素

	<pre><code>
		var fruits = ["apples","oranges","mangoes","cherries"];
		for(var i = 0;i < fruits.length;i++){
			document.writeln("I like "+fruits[i]);
		}
	</code></pre>

	<div class="favorites">

	<p>I like apples and oranges.

	I also like bananas,mangoes,cherries,apricots,plums,peaches and grapes.
	You can see other fruits I like <a href="fruitlist.html">here</a>.</p>

	<p><strong>Warning:</strong> Eating too many oranges can give you heart burn.</p>

	<p>My favorite kind of orange is the mandarin,properly known
	as <i>citrus reticulata</i>.
	Oranges at my local store cost <s>$1 each</s> $2 for 3.</p>

	</div>

	<p>The <abbr title="Florida Department of Citrus">FDDC</abbr> regulates the Florida
		citrus industry.</p>

	<p>I still remember the best apple I ever tasted.
	I bought it at <time datetime="15:00">3 o'clock</time>
	on <time datetime="1984-12-7">December 7th</time>.</p>
</body>

PS：
1.JavaScript程式碼沒有放在script元素中，所以不會執行。
2.瀏覽器保留空格，所以pre元素中的各條程式語句都沒有與HTML文件保持一致的縮排結構。

5.引用他處內容
blockquote元素表示引自他處的一片內容。用途與q元素類似。
該元素的cite屬性可以用來指定所引用的內容的來源。
例：使用blockquote元素

I like apples and oranges.

	I also like bananas,mangoes,cherries,apricots,plums,peaches and grapes.
	You can see other fruits I like <a href="fruitlist.html">here</a>.</p>

	<p>My favorite kind of orange is the mandarin,properly known
	as <i>citrus reticulata</i>.
	Oranges at my local store cost <s>$1 each</s> $2 for 3.</p>

	<blockquote cite="https://en.wikipedia.org/wiki/Apple">

The apple is a deciduous tree, generally standing 6 to 15 ft (1.8 to 4.6 m) tall in cultivation and up to 30 ft (9.1 m) in the wild. When cultivated, the size, shape and branch density are determined by rootstock selection and trimming method. The leaves are alternately arranged dark green-colored simple ovals with serrated margins and slightly downy undersides.[4]

Apple blossom
Blossoms are produced in spring simultaneously with the budding of the leaves, and are produced on spurs and some long shoots. The 3 to 4 cm (1.2 to 1.6 in) flowers are white with a pink tinge that gradually fades, five petaled, with an inflorescence consisting of a cyme with 4–6 flowers. The central flower of the inflorescence is called the “king bloom”; it opens first, and can develop a larger fruit.[4][5]

The fruit matures in late summer or autumn, and cultivars exist with a wide range of sizes. Commercial growers aim to produce an apple that is 2 3⁄4 to 3 1⁄4 in (7.0 to 8.3 cm) in diameter, due to market preference. Some consumers, especially those in Japan, prefer a larger apple, while apples below 2 1⁄4 in (5.7 cm) are generally used for making juice and have little fresh market value. The skin of ripe apples is generally red, yellow, green, pink, or russetted although many bi- or tri-colored cultivars may be found.[6] The skin may also be wholly or partly russeted i.e. rough and brown. The skin is covered in a protective layer of epicuticular wax.[7] The exocarp (flesh) is generally pale yellowish-white,[6] though pink or yellow exocarps also occur.

	<p><strong>Warning:</strong> Eating too many oranges can give you heart burn.</p>

	<p>The <abbr title="Florida Department of Citrus">FDDC</abbr> regulates the Florida
		citrus industry.</p>

	<p>I still remember the best apple I ever tasted.
	I bought it at <time datetime="15:00">3 o'clock</time>
	on <time datetime="1984-12-7">December 7th</time>.</p>
</body>

PS：瀏覽器會忽略blockquote元素中的內容的格式。要在引用的內容中建立結構，可以使用其他一些組織元素，如p和hr。

6.新增主題分隔
hr元素代表段落級別的主題分隔（paragraph-level thematic break），這又是一個在語義和呈現分離要求驅使下冒出來的奇特術語。其實就是一條直線。
有效用法：
1.故事中地點的改變。
2.工具書某一部分中主題的改變。

例：使用hr元素

I like apples and oranges.

	I also like bananas,mangoes,cherries,apricots,plums,peaches and grapes.
	You can see other fruits I like <a href="fruitlist.html">here</a>.</p>

	<p>My favorite kind of orange is the mandarin,properly known
	as <i>citrus reticulata</i>.
	Oranges at my local store cost <s>$1 each</s> $2 for 3.</p>

	<blockquote cite="https://en.wikipedia.org/wiki/Apple">

The apple is a deciduous tree, generally standing 6 to 15 ft (1.8 to 4.6 m) tall in cultivation and up to 30 ft (9.1 m) in the wild. When cultivated, the size, shape and branch density are determined by rootstock selection and trimming method. The leaves are alternately arranged dark green-colored simple ovals with serrated margins and slightly downy undersides.[4]

---

Apple blossom Blossoms are produced in spring simultaneously with the budding of the leaves, and are produced on spurs and some long shoots. The 3 to 4 cm (1.2 to 1.6 in) flowers are white with a pink tinge that gradually fades, five petaled, with an inflorescence consisting of a cyme with 4–6 flowers. The central flower of the inflorescence is called the "king bloom"; it opens first, and can develop a larger fruit.[4][5]

---

The fruit matures in late summer or autumn, and cultivars exist with a wide range of sizes. Commercial growers aim to produce an apple that is 2 3⁄4 to 3 1⁄4 in (7.0 to 8.3 cm) in diameter, due to market preference. Some consumers, especially those in Japan, prefer a larger apple, while apples below 2 1⁄4 in (5.7 cm) are generally used for making juice and have little fresh market value. The skin of ripe apples is generally red, yellow, green, pink, or russetted although many bi- or tri-colored cultivars may be found.[6] The skin may also be wholly or partly russeted i.e. rough and brown. The skin is covered in a protective layer of epicuticular wax.[7] The exocarp (flesh) is generally pale yellowish-white,[6] though pink or yellow exocarps also occur.

	<p><strong>Warning:</strong> Eating too many oranges can give you heart burn.</p>

	<p>The <abbr title="Florida Department of Citrus">FDDC</abbr> regulates the Florida
		citrus industry.</p>

	<p>I still remember the best apple I ever tasted.
	I bought it at <time datetime="15:00">3 o'clock</time>
	on <time datetime="1984-12-7">December 7th</time>.</p>
</body>

7.將內容組織為列表
HTML定義了幾個用來生成內容專案列表的元素。列表的型別有有序列表、無序列表和說明列表。
①ol元素
ol元素表示有序列表。列表專案用li元素表示。
例：用ol元素生成一個簡單的列表

I like apples and oranges. I also like:

1. bananas
2. mangoes
3. cherries
4. plums
5. peaches
6. grapes

You can see other fruits I like here.

PS：列表專案可以通過ol元素定義的屬性加以控制。
1.start屬性：設定的是列表首項的編號值。如果不用這個屬性，那麼首項的編號為1.
2.type屬性：用來設定顯示在各列表項旁的編號的型別。
ol元素的type屬性支援的值
值 說明 示例
1 十進位制數（預設） 1、2、3、4.
a 小寫拉丁字母 a、b、c、d.
A 大寫拉丁字母 A、B、C、D.
i 小寫羅馬數字 i、ii、iii、iv.
I 大寫羅馬數字 I、II、III、IV.
如果使用了reversed屬性，那麼列表編號採用降序。

②ul元素
ul元素表示無序列表。和ol元素一樣，ul元素中的列表項用li元素表示。
ul元素包含著一批li元素，該元素沒有定義任何區域性屬性，其呈現形式由CSS控制。
例：使用ul元素

I like apples and oranges. I also like:

• bananas
• mangoes
• cherries
• plums
• peaches
• grapes

You can see other fruits I like here.

③li元素
li元素表示列表中的專案。它可以與ul、ol和menu元素搭配使用。
li元素表示父元素中的一個列表項。其value屬性可以用來生成不連續的有序列表。
例：生成不連續的有序列表

I like apples and oranges. I also like:

1. bananas
4. mangoes
5. cherries
7. plums
8. peaches
9. grapes

You can see other fruits I like here.

④生成說明列表
說明列表包含著一系列術語/說明組合（也即一系列附帶定義的術語）。
定義說明列表要用到三個元素：dl、dt和dd元素。
這些元素沒有定義區域性屬性。
說明列表中的元素
元素 說明
dl 表示說明列表
dt 表示說明列表中的術語
dd 表示說明列表中的定義
注意：一個dt元素可以搭配多個dd元素，這樣就能為一個術語提供多個定義。
例：生成說明列表

I like apples and oranges. I also like:

Apple

The apple is the pomaceous fruit of the apple tree

Malus domestica

Banana

The banana is the parthenocarpic fruit of the banana tree

Musa acuminata

Cherry

The cherry is the stone fruit of the genus Prunus

You can see other fruits I like here.

⑤生成自定義列表
結合CSS中的counter特性和：before選擇器，可以用ul元素生成複雜的列表。
例：帶自定義計數器的巢狀列表

I like apples and oranges. I also like:

• bananas
• mangoes,including:
• Haden mangoes
• Keitt mangoes
• Kent mangoes
• cherries
• plums,including:
  • Elephant Heart plums
  • Stanley plums
  • Seneca plums
• peaches
• grapes

You can see other fruits I like here.

PS：
1.這個HTML文件中的列表都是用ul元素生成的無序列表，因此才可以禁用標準的專案符號（使用list-style-type屬性）並依靠用：before選擇器生成的內容。
2.外層列表的編號始於7，以2的步長迭增。用標準的ol元素無法做到這一點。
3.CSS的counter特性用起來有點彆扭，但非常靈活。
4.內層列表的編號是連續的。用li元素的value屬性或ol元素的start屬性也能實現同樣的效果，但是這兩種方法都需要事先知道列表項的數目，這個條件在Web應用系統中未必總能滿足。

⑧使用插圖
插圖定義：一個獨立的內容單元，可帶標題。通常作為一個整體被文件的主體引用，把它從文件主體中刪除也不會影響文件的意思。
這個定義相當籠統，外延不限於傳統意義上的插圖——某種圖表或圖示。
插圖用figure元素定義。
figure元素可以包含一個figcaption元素，後者表示插圖的標題。
例：使用figure和figcaption元素

I like apples and oranges.

var fruits = ["apples","oranges","mangoes","cherries"];
document.writeln("I like " + fruits.length + "fruits");

You can see other fruits I like here.

PS：
1.此例用figure元素生成一個將code元素裹在其中的插圖。
2.用figcaption元素為其添加了一個標題。
3.注意，figcaption元素必須是figure元素的第一個或最後一個子元素。

文件分節
表示內容的不同部分的元素。
外觀上對內容的影響微乎其微，甚至沒有影響。
它們構成了語義和呈現分離實踐的重要基礎。
1.新增基本的標題
h1元素表示標題。HTML定義了一套標題元素體系，從h1一直到h6，h1級別最高。
1.同級標題：將內容分作幾個部分，每個部分一個主題。
2.各級標題：表示一個主題的各個方面。
好處：構成了文件的大綱，便於預覽。
例：使用元素h1、h2和h3

Fruits I like

I like apples and oranges.

Additional fruits

I also like bananas,mangoes,cherries,apricots,plums,peaches and grapes.

More information

You can see other fruits I like here.

	<h1>Activities I like</h1>
	<p>I like to swim,cycle and run.I am in training for my first triathlon,
	but it is hard work.</p>
	<h2>Kinds of Triathlon</h2>
	There are different kinds of triathlon - sprint,Olympic and so on.
	<h3>The kind of triathlon I am aiming for</h3>
	I am aiming for Olympic, which consists of the following:
	<ol>
		<li>