WWW（萬維網）是分佈式信息資源網絡，採用HTML語言描述超文本文件。（超文本文件指的是包含有鏈接關係和多媒體對象的文件）

WWW有3個基本組成部分：

URL（Universal Resource Locators, 統一資源定位器），提供在Web上進入資源的統一方法和路徑，使得用戶所要訪問的站點具有唯一性，說明了鏈接所指向的每個文件的類型及其準確位置。
HTTP（Hypermedia Transfer Protocol，超文本傳輸協議）是一種網絡上傳輸數據的協議，專門用於傳輸以超文本（Hypertext）或超媒體（Hypermedia）的形式提供的信息。
HTML（Hypertext Markup Language，超文本標記語言）是一種文本類、依靠解釋的方式執行的語言。

基本結構

一個HTML文件是由一系列的元素和標籤組成的，元素名不區分大小寫，HTML用標籤來規定元素的屬性和它在文件中的位置。

HTML標籤分爲單獨標籤和成對標籤兩種：

成對標籤的語法格式：

＜元素名稱　屬性１＝＂值１＂　屬性２＝＂值２＂＞元素資料＜／元素名稱＞

　　　成對標籤僅對包含在其中的文件部分發生作用。

單獨標籤的語法格式：

＜元素名稱　屬性１＝＂值１＂　屬性２＝＂值２＂＞

作用：在相應的位置插入元素。

（ＰＳ：設置各屬性所使用的“＂＂”可省略。）

文件結構：

<html> -- 文件開始標籤—— 表示給文件是HTML編寫的，位於文件最開始和最後面，該標籤不帶有任何屬性。

<head> -- 文件頭 —— 說明文件的標題和整個文件的一些公共屬性

<title>文件標題<title> -- 文件標題 —— 顯示在瀏覽器的標題欄中，用以說明文件的用途

</head>

<body> -- 文件體 —— 文件的主體部分

文件正文

</body>

</html> -- 文件結束

HTML文件基本標記

HTML頭部標記

在HTML語言的頭元素中，一般需要包括標題、基底信息、元信息等。HTML的頭元素是以<head>爲開始標記，以</head>爲結束標記的。一般情況下，CSS和JavaScript都定義在頭元素中，而定義在HTML語言頭部的內容往往不會在網頁上直接顯示。它用於包含當前文檔的相關信息。

表2-1頭部標記

標記	描述
<base>	當前文檔的URL全稱（基底網址）
<basefont>	設定基準的文字字體、字號和顏色
<title>	設定顯示在瀏覽器左上方的標題內容
<isindex>	表明該文檔是一個可用於檢索的網關腳本，由服務器自動建立
<meta>	有關文檔本身的元信息，如用於查詢的關鍵字、獲取該文檔的有效期等
<style>	設定CSS層疊樣式表的內容
<link>	設定外部文件的鏈接
<script>	設定頁面中程序的腳本內容

元信息標記<meta>

設置頁面關鍵字

語法：<meta name=”keyname” content=”具體的關鍵字”>

設置頁面描述

語法：<meta name=”description” content=”對頁面的描述語言”>

設置編輯工具

語法：<meta name=”generator” content=”編輯軟件的名稱”>

設定作者信息

語法：<meta name=”author” content=”作者的姓名”>

限制搜索方式

限制搜索引擎對頁面的搜索方式；

語法：<meta name=”robots” content=”搜索方式”>

語法解釋：

表2-2 content值與其對應的含義

content 的值	描述
All	表示能搜索當前網頁及其鏈接的網頁
Index	表示能搜索當前網頁
Nofollow	表示不能搜索當前網頁鏈接的網頁
Noindex	表示不能搜索當前網頁
None	表示不能搜索當前網頁及其鏈接的網頁

設置網頁文字及語言

語法：

第一種方法：<meta http-equiv=“Content-Type”content=”text/html;charset=字符集類型”>

第二種方法：<meta http-equiv=”Content-Language”conten=”語言”>

語法解釋：

在該語法中，http-equiv用於傳送HTTP通信協議的標頭，也就是設定標頭屬性的名稱，而在content中才設置具體的屬性值。在charset中設置網頁的內碼語系，也就是字符集的類型，charset往往設置爲gb2312，即簡體中文。英文是ISO-8859-1字符集。如果採用第二種方法，則簡體中文的設置爲：

設置網頁的定時跳轉

語法：<meta http-equiv=”refresh” content=”跳轉時間;url=鏈接地址”>

語法解釋：

refresh表示網頁的刷新，而在content中設定刷新的時間和刷新後的地址，時間和鏈接地址之間用分號隔開。默認情況下，跳轉時間是以秒爲單位的。

設定有效期限

語法：<meta http-equiv=”expires” content=”到期的時間”>

語法解釋：

到期的時間必須是GMT時間格式，即星期，日月年時分秒，這些時間都是用英文和數字進行設定。

例：<meta http-equiv=”expires” content=”Wed,14 september 2011 16:20:00 GMT”>

禁止從緩存中調用-(用戶可以隨時查看到最新的網頁內容)

語法：

刪除過期的cookie

如果網頁過期，則刪除存盤的cookie。Cookie是由Internet站點創建的、將信息存儲在計算機上的文件，如訪問站點時的首選項。

語法：<meta http-equiv=”set-cookie” content=”到期的時間”>

到期的時間 GMT時間格式

強制打開新窗口

強制網頁在當前窗口中以獨立的頁面顯示，可以防止自己的網頁被別人當做一個frame頁調用。

語法：<meta http-equiv=”windows-target” content=”-top”>

語法解釋：windows-target表示新網頁的打開方式，而content中設置-top則代表打開的是一個獨立頁面。

設置網頁的過渡效果

語法：<meta http-equiv=”過渡事件” content=”revealtrans(duration=過渡效果持續時間,transition=過渡方式”>

語法解釋：

過渡事件可以是進入頁面活或者離開頁面。進入頁面的http-equiv值爲page-enter，離開頁面的http-equiv值爲page-exist。過渡效果的持續時間默認以秒爲單位，過渡方式爲編號。

（ps：貌似不支持）

基底網址標記<base>

HTML頁面通過基底網址能夠把當前HTML頁面中所有的相對URL轉換成絕對URL。一般情況下，通過基底網址標記<base>設置HTML頁面的絕對路徑，那麼在頁面中的鏈接地址只需設置成相對地址即可。當在瀏覽器瀏覽頁面時，會通過<base>標記將相對地址附在基底網址後面，從而轉化成絕對地址。

因此，在HTML置基底標記時不應該多於一個，而且要將其放置在頭部以及任何包含URL語句前。

語法：<base href=”鏈接地址get=”新窗口的打開方式”>

語法解釋：

鏈接地址就是要設置的頁面的基底地址，而新窗口的打開方式可以設置爲不同的效果。

表 2-3 鏈接窗口的打開方式

屬性值	打開方式
_parent	在上一級窗口中打開，一般常用在分幀的框架頁中
_blank	在新窗口打開
_self	在同一個窗口打開，可以省略
_top	在瀏覽器的整個窗口打開，忽略任何框架

頁面主體標記<body>

表2-4 <body>元素的屬性

屬性	描述
text	設定頁面文字的顏色
bgcolor	設定頁面背景的顏色
background	設定頁面的背景圖片
bgproperties	設定頁面的背景圖像爲固定，不隨頁面的滾動而滾動
link	設定頁面默認的鏈接顏色
alink	設定鼠標正在單擊時的鏈接顏色
vlink	設定訪問過後的鏈接顏色
topmargin	設定頁面的上邊距
leftmargin	設定頁面的左邊距

設定文字顏色——text

語法：<body text=”顏色代碼”>

背景顏色屬性——bgcolor

語法：<body bgcolor=”顏色代碼”>

背景圖像屬性——background

語法：<body background=”文件鏈接地址” bgproperties=”背景圖片固定屬性”>

bgproperties 可省略，設置爲fixed時，那麼當滾動頁面時，背景圖像也會移動，想對於瀏覽者來說，總停留在相同的位置上。

背景圖片默認重複覆蓋整個頁面，設置背景圖片不重複一般需要用CSS：

body{background-repeat:no-repeat;

background-size:100%;

}

</style>

設置鏈接文字屬性——link

在默認情況下，瀏覽器以藍色作爲超鏈接文字的顏色；訪問過的文字則變爲暗紅色。

語法：<body link=”顏色代碼”>

設置邊距—margin

語法：<body topmargin=”上邊距的值” leftmargin=”左邊距的值”>

默認情況下，邊距的值都是以像素爲單位的。

設計網頁文本內容

標題文字標記<h>

標題文字標記<h>

語法：

1級標題：<h1>…</h1>

2級標題：<h2>…</h2>

3級標題：<h3>…</h3>

一次下去，到6級標題。

語法解釋：1級標題使用最大的字號表示，6級標題使用的是最小的字號。

標題文字的對齊方式——align

默認情況下，標題文字是左對齊的。

語法：<align=”對齊方式”>

設置文字格式

文字格式標記<font>

設置文字字體——face

語法：<font face=”字體1，字體2，…”>應用了該字體的文字</font>

語法解釋：face 屬性的值可以是多個，默認使用第一種字體進行顯示，如果第一種字體不存在，則使用第二種字體顯示，如果設置的幾種字體在瀏覽器中都不存在，則會以默認字體顯示。（儘量不適用特殊字體，宋體、黑體多用）

設置字號——size

語法：<font size=”文字字號”></font>

語法解釋：字號是指字體的大小，其大小隻是相對於默認字體而言，默認文字的大小與3號字相同。文字的字號可以設置爲1~7、+1~+7或-1~-7，數值越大，文字越大。

設置文字顏色——color

語法：<font color=”顏色代碼”></font>

粗體、斜體、下劃線——strong、em、u

語法：

粗體：<strong>粗體的文字</strong>

<b>粗體的文字</b>

斜體字：<em>斜體字</em>

下劃線：<u>帶下劃線的文字</u>

上標與下標——sup、sub

語法：上標標記：<sup>…</sup>

下標標記：<sub>…</sub>

語法解釋：數學公式常用。

設置刪除線——strike

語法：<strike>文字</strike>或<s>文字</s>

等寬標記——code

語法：<code>文字</code> 或 <samp>文字</samp>

語法解釋：等寬文字標記常用於設置英文效果。

空格——

語法： 

語法解釋：在HTML中，空格不會累加，只算一個，HTML實體空格會累加。

表3-1 常用的空格佔位符

	空格佔位符
	不換行空格	佔據寬度受字體影響明顯而強烈
&ensp;	半角空格	1/2箇中文寬度，而且基本上不受字體影響
&emsp;	全角空格	1箇中文寬度，而且基本上不受字體影響
	窄空格	em的六分之一寬

其他特殊符號

一般情況下，特殊符號代碼由前綴“&”、字符名稱和後綴“;”組成。

表3-2 特殊符號的表示

符號	符號代碼	說明
"	"	引號
<	<	左尖括號
>	>	右尖括號
×	×	乘號
§	§	小節符號
©	©	版權所有符號
®	®	已註冊的符號
™	™	商標符號

設置段落格式

段落標記——p

語法：<p>段落文字</p>

語法解釋：既可以使用成對的<p>標記來包含段落，也可以使用單獨的<p>標記來劃分段落。

取消文字換行標記——nobr

語法：<nobr>文字</nobr>

換行標記——br

語法：<br/>

保留原始排版方式標記——pre

語法：<pre>…</pre>

居中對齊標記——center

語法：<center>…</center>

向右縮進標記——blockquote

語法：<blockquote>文字</blockquote>

水平線標記

添加水平線——hr

語法：<hr>

語法解釋：默認情況下，插入的水平線是100%的寬度，1像素的高度。

設置水平線的寬度和高度——width、height

語法：<hr width=”水平線的高度” height=”水平線的高度”>

語法解釋：寬度值可以是像素值，也可以是窗口寬度值的百分比。高度值只能夠是像素值。如果只設置一個參數，另一個會採用默認值。

設置水平線的顏色——color

語法：<hr color=”顏色代碼”>

設置水平線的對齊方式——align

語法：<hr align=”對齊方式”>

去掉水平線陰影——noshade

語法：<hr noshade=”noshade”>

其他文字標記

1、文字標註標記——ruby

語法：<ruby>

被說明的文字

<rt>文字的標註</rt>

</ruby>

語法解釋：被說明的文字就是需要添加標註的那段文字，而文字的標註則是真正的說明文字。

2、聲明變量標記——var

爲了統一突出變量，常設置爲斜體。

語法：<var>變量</var>

3、忽視HTML標記——plaintext、xmp

語法：<plaintext>或<xmp>

語法解釋：忽視HTML標記主要是用來使HTML標記失去作用，而直接顯示在頁面中。

使用列表

表4-1 列表的主要標記

標記	描述	標記	描述
<ul>	無序列表	<menu>	菜單列表
<ol>	有序列表	<dt>、<dd>	定義列表的標記
<dir>	目錄列表	<li>	列表項目的標記
<dl>	定義列表

無序列表

1、無序列表標記——ul

語法：<ul>

…

</ul>

語法解釋：使用<ul>…<ul>標記表示這一個無序列表的開始和結束，而<li>則表示這是一個列表項的開始。

2、無序列表的符號類型——type

語法：<ul type=”符號類型”>

…

</ul>

語法解釋：type屬性決定了列表項開始的符號。

表4-2 無序列表的符號類型

類型值	列表項目的符號
disc	●
circle	○
square	¢

有序列表

1、有序列表標記——ol

語法：<ol>

…

</ol>

語法解釋：<ol>和</ol>標記着有序列表的開始和結束，而<li>標記這是一個列表項的開始。默認情況下，採用數字序號進行排列。

2、有序列表的屬性——type

語法：<ol type=”序號類型”>

…

</ol>

表4-3 有序列表的序號類型

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…

有序列表的起始數值——start

語法：<ol start=”起始數值”>

…

</ol>

語法解釋：不論列表編號的類型是數字、英文字母還是羅馬數字，起始數值只能是數字。

定義列表——dl

語法：<dl>
<dt>名詞1</dt>解釋1

<dt>名詞2</dt>解釋2

…

</dl>

語法解釋：<dl>和</dl>分別定義了定義列表的開始和結束，<dt>後面就是解釋的名稱，而在<dd>後面則添加該名詞的具體解釋。作爲解釋的內容在顯示時會自動縮進。

菜單列表——menu

菜單列表主要用於設計單列的菜單列表，在瀏覽器中的顯示效果和無序列表是相同的，因此它的功能也可以通過無序列表來實現。

語法：

<menu>

…

</menu>

語法解釋：<menu>和</menu>標誌着菜單列表的開始和結束。

目錄列表——dir（HTML5不支持）

目錄列表用於顯示文件內容的目錄大綱，通常用於設計一個壓縮窄列的列表，用於顯示一系列的列表內容。

語法：

<dir>

…

</dir>

超鏈接

超鏈接的建立

超鏈接的鏈接根據其鏈接對象不同而有所變化，但都是基於<a>標記的。

1、基本語法：

鏈接元素可以是文字、圖片或者其他頁面元素。

2、建立文本超鏈接

語法：<a href=”鏈接地址”>鏈接文字</a>

語法解釋：鏈接地址可以是絕對地址，也可以是相對地址。

3、設置超鏈接的目標窗口

在創建網頁的過程中，有時並不希望超鏈接的目標窗口將原來的窗口覆蓋，如在打開新的窗口時，主頁面的窗口仍保留在原處。這是可以通過target參數設置目標窗口的屬性。

語法：<a href=”鏈接地址” target=”目標窗口的打開方式”>鏈接元素</a>

表5-1 target參數的取值和說明

target值	目標窗口的打開方式
_parent	在上一級窗口打開，常在分幀的框架頁面中使用
_blank	新建一個窗口打開
_self	在同一窗口打開，與默認設置相同
_top	在瀏覽器的整個窗口打開，將會忽略所有的框架結構

書籤鏈接

用途：網頁內容較多，拖拽滾動條很不方便，瀏覽者可以通過點擊目錄上的項目就能自動跳轉到網頁相應的位置上進行閱讀。

建立書籤鏈接的步驟：一是建立書籤，二是爲書籤製作鏈接。

1、建立書籤

語法：<a name=”書籤名稱”>文字</a>

語法解釋：書籤名稱就是對於後面要跳轉所創建的書籤，而文字則是設置鏈接後跳轉的位置。

2、書籤鏈接

語法：同一頁面 <a href=”#書籤名稱”>鏈接的文字</a>

不同頁面 <a href=”鏈接的文件地址#書籤的名稱”>鏈接的文字</a>

外部鏈接

所謂外部鏈接，是指跳轉到當前網站外部，與其他網站中頁面或其他元素之間的鏈接關係。這種鏈接在一般情況下需要書寫絕對的鏈接地址。

表5-2 絕對地址的設置格式及含義

格式	含義
http://	採用WWW服務進入萬維網站點
ftp://	通過FTP訪問文件傳輸服務器
telnet://	啓動Telnet
mailto://	直接啓動郵件系統E-mail

1、通過HTTP協議

網頁中最常使用HTTP協議進行外部鏈接的是設置友情鏈接。

語法：<a href=”http://...”>鏈接文字</a>

2、通過FTP協議

語法：<a href=”ftp://...”>文字鏈接</a>

3、發送E-mailàmailto標籤

在網站醒目位置寫上自己的郵箱地址，瀏覽者點擊時，就能自動打開計算機系統中默認的電子郵件客戶端軟件。

語法：<a href=”mailto:電子郵件地址”>鏈接文字</a>

語法解釋：電子郵件後還可以增加一些參數。

表5-3 mailto標籤的參數

參數	含義	語法
CC	抄送收件人	<a href=”mailto:電子郵件地址？CC=電子郵件地址”>鏈接文字</a>
Subject	電子郵件主題	<a href=”mailto:電子郵件地址？Subject=主題文字”>鏈接文字</a>
BCC	暗送收件人	<a href=”mailto:電子郵件地址？BCC=電子郵件地址”>鏈接文字</a>
Body	電子郵件內容	<a href=”mailto:電子郵件地址？Body=郵件內容”>鏈接文字</a>

4、下載文件

語法：<a href=”文件所在地址”>鏈接文字</a>

語法解釋：在文件所在地址中設置文件的路徑，可以是相對路徑，也可以是絕對路徑。

其他鏈接

1、腳本鏈接

腳本來實現HTML語言實現不了的功能，以JavaScript爲例，

語法：<a href=”javascript:…”>文字鏈接</a>

例：<a href="javascript:window.close()">關閉窗口</a>

2、空鏈接

所謂空鏈接是指指向鏈接後，鼠標會變成手形，但單擊鏈接後，仍停留在當前頁面。在代碼中，可以通過#號實現空鏈接。

語法：<a href=”#”>文字鏈接</a>

使用圖像

圖像

GIF格式：無壓縮損失，適合商標、新聞式的標題或其他小於256色的圖像。

JPEG格式：有壓縮損失，超過256色的圖像格式。

PNG格式：無壓縮損失，非破壞性，支持48-bit色彩，交錯顯示，跨平臺圖像亮度控制，更多層的透明度設置。

插入—>img標籤

語法：<img src=”圖像文件的地址”>à相對路徑/絕對路徑

設置圖像屬性

1、圖像高度——height

語法：<img src=”圖像文件的地址” height=”圖像的高度”>

語法解釋：默認情況下，改變高度的同時，其寬度也會等比例進行調整；圖像高度單位是像素。

2、圖像寬度——width

語法：<img src=”圖像文件的地址” width=”圖像的寬度”>

語法解釋：默認情況下，改變寬度的同時，其高度也會等比例進行調整；圖像寬度單位是像素。

3、圖像邊框——border

在默認情況下，頁面中插入的圖像是沒有邊框的，可以通過border屬性爲圖像添加邊框。

語法：<img src=”圖像文件的地址” border=”圖像邊框的寬度”>

4、圖像的水平間距——hspace

作用：調整文字與圖像之間的水平間距。

語法：<img src=”圖像文件的地址” hspace=”水平間距”>

5、圖像的垂直間距——vspace

作用：調整文字與圖像之間的垂直間距。

語法：<img src=”圖像文件的地址” vspace=”垂直間距”>

6、圖像相對於文字基準線的對齊方式——align

相對文字對齊方式是指圖像與一行文字的相對位置。

語法: <img src=”圖像文件的地址” align=” 相對文字對齊方式”>

語法解釋：align的取值如表6-1。

表6-1 圖像相對文字的對齊方式

align取值	對齊方式
top	把圖像的頂部和同行的最高部分對齊（可能是文本的頂部，也可能是圖像的頂部）
middle	把圖像的中部和同行的中部對齊（通常是文本行的基線，並不是實際的行的中部）
bottom	把圖像的底部和同行文本的底部對齊
texttop	把圖像的頂部和同行中最高的文本頂部對齊
absmiddle	把圖像的中部和同行中最大項的中部對齊
baseline	把圖像的底部和文本的基線對齊
absbottom	把圖像的底部和同行中最低項的底部對齊
left	使圖像和左邊界對齊（文本環繞圖像）
right	使圖像和右邊界對齊（文本環繞圖像）

7、圖像的提示文字——alt

語法: <img src=”圖像文件的地址” alt=”提示文字的內容”>

如果圖片由於下載或者路徑的問題無法顯示，也可以在圖片的位置顯示定義的說明提示文字。

圖像的超鏈接

1、設置圖像的超鏈接

語法：<a href=”鏈接地址” target=”目標窗口打開方式”><img src=”圖像文件的地址” ></a>

2、設置圖像熱區鏈接

將圖像劃分成不同的區域進行鏈接設置。

語法：

首先需要在圖像文件中設置映射圖像（即包含熱區的圖像）名，在圖像的屬性中使用<usemap>標記添加圖像要引用的映射圖像的名稱，

然後需要定義熱區圖像以及熱區的鏈接屬性，

...

</map>

表格的應用

創建表格

1、表格的基本構成

表7-1 表格標記
標記	描述
<table>…</table>	表格標記
<tr>…</tr>	行標記
<td>…</td>	單元格標記

2、表格的標題——caption

語法：<caption>表格的標題</caption>

3、表格的表頭——th

一般位於表格第一行，用來說明該列的內容類型。

th中內容加粗顯示。

設置表格基本屬性

1、表格寬度高度對齊方式

語法：<table width=”表格寬度” height=”表格高度” align=”對齊方式”>

語法解釋：表格寬度和高度值都可以設置爲具體的像素值或者百分比數。

2、設置表格的邊框的寬度、顏色

語法：<table border=”邊框寬度” bordercolor=”邊框顏色”>

語法解釋：邊框寬度單位爲像素。

3、設置表格內框的寬度，表格內文字與邊框的間距

表格內框寬度是指表格內部各個單元格之間的寬度。

默認情況下，表格內的文字會緊貼着表格的邊框，使用cellpadding參數調整距離。

語法：<table cellspacing=”內框寬度” cellpadding=”文字與邊框的距離”>

設置表格的背景

1、表格背景的顏色——bgcolor

語法：<table bgcolor=”顏色代碼”>

2、表格的背景圖像——background

語法：<table background=”背景圖像的地址”>

設置表格的行屬性

<tr>----height(高度)、bordercolor(行的邊框顏色)、bgcolor(行的背景顏色)、align(行文字的水平對齊方式 left right center)、valign(行文字的垂直對齊方式 top bootom)。

<caption>----align(表格標題的垂直對齊方式)

調整單元格屬性

<td>----width、height、align、valign、bgcolor、bordercolor、background.

1、單元格的水平跨度——colspan

單元格佔據多少列。

語法：<td colspan=”跨的列數”>

2、單元格的垂直跨度——rowspan

單元格佔據多少行。

語法：<td rowspan=”跨的列數”>

3、單元格的亮邊框——bordercolorlight

單元格的亮邊框就是單元格邊框向光的部分。

語法：<td bordercolorlight=”顏色代碼”>

4、單元格的暗邊框——bordercolordark

單元格的亮邊框就是單元格邊框背光的部分。

語法：<td bordercolordark=”顏色代碼”>

（ps：谷歌火狐不支持 IE 支持）

表格的結構

1、表格的表頭標記——thead

語法：<thead bgcolor=”顏色代碼” align=”水平對齊方式” valign=”垂直對齊方式”>…</thead>

語法解釋：align:left、center、right；

valign:top、middle、bottom;

一個表元素中只能有一個<thead>標記。

2、表格的表主體標記——tbody

與表頭樣式的標記功能類似，表主體樣式用來統一設計表主體部分的樣式。

語法：<tbody bgcolor=”顏色代碼” align=”水平對齊方式” valign=”垂直對齊方式”>…</tbody>

語法解釋：align:left、center、right；

valign:top、middle、bottom;

一個表元素中只能有一個<tbody>標記。

3、表格的表尾標記——tfoot

定義表尾樣式。

語法：<tfoot bgcolor=”顏色代碼” align=”水平對齊方式” valign=”垂直對齊方式”>…</tfoot>

語法解釋：align:left、center、right；

valign:top、middle、bottom;

一個表元素中只能有一個<tfoot>標記。

層標記——div

層屬於網頁中的塊級元素，層元素中可以包含所有其他的HTML代碼。層提供了一種分塊控制網頁內容的方法。層中的內容與網頁其他元素內容不同之處是，各層之間可以彼此疊加，各層在Z座標（垂直於頁面的方向上）的次序可以改變。

層的分類：

在Dreamweaver中，層有兩類，即CSS層和Netscape層。

CSS層：使用div和span標籤定位頁面內容。
Netscape層：使用layer和ilayer標籤定義頁面內容。

定義數據塊：

創建層的首要工作是定義認爲是同一層的數據塊。定義數據塊的方法是通過使用<div>標籤，在<div>標籤定義數據塊時，會通過瀏覽器進行轉換。

<div>標籤的屬性

div元素是用來爲HTML文檔內大塊（block-level）的內容提供結構和背景的元素。div中包含元素的特性由<div>標籤的屬性來控制，或者是通過樣式表（Style Sheet）格式化這個塊來進行控制的。[楊4]

語法：<div id=”value” align=”value” class=”value” style=”value”>

…

</div>

表8-1 <div>標籤的屬性
屬性	說明
accesskey	設置或檢索對象的快捷鍵
align	設置或檢索對象相對於顯示或表格的排列方式
atomicselection	指定元素及其內容是否可以以不可見形式統一選擇
begin	設置或檢索時間線在該元素上播放前的延遲時間
class	設置或檢索對象的類
contenteditable	設置或檢索表明用戶是否可編輯對象內容的字符串
datafld	設置或檢索由datasrc屬性指定的綁定到指定對象的給定數據源的字段
dataformatas	設置或檢索如何渲染提供給對象的數據
datasrc	設置或檢索用於數據綁定的數據源
dir	設置或檢索對象的閱讀順序
disabled	設置或檢索控件的狀態
end	設置或檢索表明元素結束時間的值，或者元素設置爲重複的簡單持續終止時間
hidefocus	設置或檢索表明對象是否顯示錶明焦點的值
id	檢索標記對象的字符串
lang	設置或檢索要使用的語言
language	設置或檢索當前腳本編寫用的語言
nowrap	設置或檢索瀏覽器是否自動執行換行
style	爲該元素設置內嵌樣式
syncmaster	設置或檢索時間容器是否必須在此元素上同步回放
systembitrate	檢索系統中大約可用帶寬的bps（比特率）
systemcaption	表明是否要顯示文本來代替演示的音頻部分
systemlanguage	表明是否在用戶計算機上的選項設置中選中了給定語言
systemoverduborsubtitle	指定針對那些正在觀看演示但對被播放的音頻所使用的語言並不熟悉的用戶來說是否要渲染配音或字幕
tabindex	設置或檢索定義對象的tab順序的索引
timecontainer	設置或檢索與元素關聯的時間線類型
title	設置或檢索對象的諮詢信息（工具提示）
unselectable	指定該元素不可被選中

1、align屬性 ——改變<div>標籤的水平對齊方式

2、id屬性——用於定義一個元素獨特的樣式，即設置標籤的標記（名字）。

3、class屬性——用於指定元素屬於何種樣式的類，即設置標籤的類。

class屬性與id屬性的區別：

id屬性是先找到結構和內容，再給它定義樣式。id屬性通常用於定義頁面和是哪個一個僅出現一次的標籤。
class屬性是先定義好一種樣式，再套給多個結構和內容。class屬性用於根據用戶定義的標準對一個或多個元素進行定義。
在一個結構文檔中，可以多處使用同一個class名，而id名必須是唯一的。
在實際應用中，class可能對文字的排版等比較有用，而id則對宏觀佈局和設計放置各種元素比較有用。

4、style屬性——用於設置對象的內嵌樣式。

div標籤style屬性的常用參數說明
參數值	說明
overflow	溢出控制：visible（默認、可見）、auto（自動）、scroll（顯示滾動條）
width	寬度：數值
height	高度：數值
color	字體顏色：色彩代碼
font-size	字體大小：數值
line-height	行高：數值
border	邊框：寬度、類型和顏色，其中，類型主要支持none、dotted、dashed、solid、double、groove、ridge、inset、window-inset、outset
font-weight	字體粗細：normal、bold、bloder、lighter
font-family	字體類型：Arial、Tahoma、Verdana、仿宋_GB2312等
background	背景顏色：色彩代碼
scrollbar-base-color	滾動條各部分的顏色：色彩代碼
Filter:chroma	Chroma過濾器：色彩代碼，該顏色將對象轉換成透明效果
word-break	斷字：normal(默認、正常斷字)、keep-all(嚴格不斷字)、brea-all(嚴格斷字)
direction	文字方向：ltr(默認、從左向右)、rtl(從右向左)
position	設置定位方式，取值absolute、relative
display	設置元素的浮動特徵

1）position屬性

style屬性最常用的功能之一就是進行<div>標籤的定位，其對應的屬性爲position屬性。

語法：position : static | absolute | relative

static:無特殊定位，對象遵循HTML定位規則。

absolute：將對象從文檔流中拖出，使用left、right、top、bottom等屬性進行絕對定位，而其層疊通過z-index屬性定義。此時對象不具有邊距，但仍有補白和邊框。

relative：對象不可層疊，但將依據left、right、top、bottom等屬性在正常文檔流中偏移位置。

position屬性的參數說明
left	相對於窗口左邊的位置，單位爲像素（pixels）
top	相對於窗口上邊的位置，單位爲像素（pixels）
width	<div>標籤的寬度。所有在<div>標籤裏的文字或HTML元素都包含在裏面。
height	<div>標籤的高度。該屬性很少用，除非想要對層進行分割
clip	給出層的可見部分。該屬性能夠使得<div>標籤顯示爲一個定義的很準確的方塊區域，其參數爲rect(top,right,bottom,left)
visibility	隱藏或顯示<div>標籤中的元素，其值爲visible、hidden和inherit
z-index	<div>標籤的立體位置，值越大，<div>標籤的位置越高
background-color	<div>標籤的背景顏色
layer- background-color	Netscape的<div>標籤的背景顏色
background-image	<div>標籤的背景圖像
layer- background- image	Netscape的<div>標籤的背景圖像

2）display屬性

用於設置元素的浮動特徵

display屬性可以用來設置或檢索對象是否顯示以及如何顯示。

display屬性的參數說明
參數值	描述
block	默認值。用該值爲對象之後添加新行
none	隱藏對象。與visibility屬性的hidden值不同，它不爲被隱藏的對象保留其物理空間
inline	內聯對象的默認值。用該值將從對象中刪除行
compact	分配對象爲塊對象或基於內容之上的內聯對象
marker	指定內容在容器對象之前或之後。要使用此參數，對象必須和:after及:before僞元素一起使用
inline-table	將表格顯示爲無前後換行的內聯對象或內聯容器
list-item	將塊對象指定爲列表項目。並可以添加可選項目標誌
run-in	分配對象爲塊對象或基於內容之上的內聯對象
table	將對象作爲塊元素級的表格顯示
table-caption	將對象作爲表格標題顯示
table-cell	將對象作爲表格單元格顯示
table-column	將對象作爲表格列顯示
table-column-group	將對象作爲表格列組顯示
table-header-group	將對象作爲表格標題組顯示
table-footergroup	將對象作爲表格腳註組顯示
table-row	將對象作爲表格行顯示
table-row-group	將對象作爲表格行組顯示

3）display 屬性和 visibility 屬性的對比

visibility 屬性被設置爲隱藏時，元素雖然被隱藏了，但它仍然佔據它原來所在的位置。（當元素被隱藏後，就不能再接收其他事件了。）
visibility 屬性是隱藏元素但保持元素的浮動位置，而display實際上是設置元素的浮動特徵。

<span>標籤與<div>標籤

相同之處：HTML中組合用的標籤，可以作爲插入CSS這類風格的容器，或插入class.id等語法內容的容器。
不同之處：

div是一個塊級元素，分塊結束處，系統自動換行，span是行內元素，span前後不會換行，它沒有結構意義，純粹是應用樣式。
div標籤一般用來做佈局，span標籤一般用來做文字效果，尤其是標題和鏈接的效果。
塊元素和行元素不是一成不變的，只要給塊元素定義display:inline，塊元素便成爲內嵌元素；同樣，給內嵌元素定義display:block後，內嵌元素便成爲塊元素。

<iframe>標籤 –只適用於IE

語法：<iframe>…<iframe>

語法：<iframe src=”文件” height=”數值” width=”數值” name=”框架名稱” scrolling=”值” frameborder=”值”></iframe>

<iframe>標籤的屬性說明
屬性	說明
align	用於對齊包含在<iframe>標籤中的數據，並且可以取left、right、center以及justify值。因支持使用CSS對齊元素而過時
class	一個以逗號分隔的樣式類別表，這些樣式類將標籤實例化爲已定義的類的一個實例。
frameborder	取0或者1值以判斷是否應該在幀四周畫一個框
height	指定<iframe>的高度
id	通常由樣式單來定義應該被應用於標籤中的數據的樣式類型
logndesc	到一個標籤內容的一個較長描述的鏈接
marginhergh	幀的內容與邊框的上、下邊之間的像素數
marginwidth	幀的內容與邊框的左、右邊之間的像素數
name	用於給快命名。它可以有JavaScript用來對層進行操作
noresize	禁止用戶重新調整幀的大小
scrolling	取auto、yes或no的值爲判斷滾動條是否顯示
src	指定包含<iframe>的內容的URL
style	允許在標籤內指定一個樣式定義，而不是在一個樣式表內指定
title	允許爲標籤提供一個比<iframe>標籤更有信息量的標題，它應用於整個文檔
width	指定<iframe>的寬度

1、浮動框架的文件路徑屬性 src

語法：<iframe src=”file_name”>

file_name：指明浮動框架文件的文件名或者其他超鏈接的網址。

2、浮動框架的名稱屬性 name

語法：<iframe src=”file_name” name=”frame_name”>

frame_name：定義的浮動框架名稱。

3、浮動框架的對齊屬性 align

語法：<iframe src=”file_name” align=”left/right/center”>

4、浮動框架的寬度和高度屬性 width、height

語法：<iframe src=”file_name” width=”value” height=”value”>

5、浮動框架滾動條顯示屬性 scrolling

語法：<iframe src=”file_name” scrolling=”value”>

value：值爲yes代表顯示滾動條，值爲no代表不顯示滾動條，值爲auto代表根據窗口內容決定是否顯示滾動條。

6、浮動框架邊框屬性 frameborder

語法：<iframe src=”file_name” frameborder=”value”>

value：值爲yes代表顯示框架邊框，值爲no代表隱藏框架邊框。

7、浮動框架邊緣的寬度和高度屬性 marginwidth、marginheight

語法：<iframe src=”file_name” marginwidth =”value” marginheight=”value”>

marginwidth：設定浮動框架左右邊緣距離邊框的寬度。

marginheight：設定浮動框架上下邊緣距離邊框的高度

<layer>標籤和<ilayer>標籤

在Navigator中定義層。<layer>標籤和<ilayer>標籤允許在一個頁面上精確地定位一個層，<layer>標籤和<ilayer>標籤可以出現在文檔的流程的任何地方。

作用：用來重疊顯示Web內容的各個實體。

語法：<layer>…</layer>

<layer>標籤和<ilayer>標籤中有一系列屬性。

<layer>標籤和<ilayer>標籤的屬性說明
above	在文檔中的所有層的z-order中較高的Layer對象（如果層是最頂的，爲null）
background	用作層的背景圖的URL
below	在文檔中的所有層的z-order中較低的Layer對象（如果層是最低的，爲null）
bgcolor	層的背景色
clip	定義剪切長方形。這個長方形是層的可見區域，區域之外的任何東西都被人爲地從視野中剪掉
height	以像素爲單位的層的高度
left	以像素爲單位的層相對於它的父層的區域的x軸的位置
name	層的名字
src	層的內容來源的URL
top	以像素爲單位的層相對於它的父層的區域的y軸的位置
visibility	定義層的可見性屬性。show顯示層，hide隱藏層，inherit繼承它的父層的可見性
width	以像素爲單位的層的寬度
z-index	層相對於它的兄弟元素和父元素的相對z-order

編輯表單

使用表單標籤——form

表單用於獲取不同類型的用戶輸入。

處理動作——action

真正處理表單的數據腳本或程序在action屬性裏，這個值可以是程序或者腳本的一個完整的URL。

語法：<form action=”表單的處理程序”>…</form>

語法解釋：表單的處理程序興義的是表單要提交的地址。可以是絕對、相對地址或者其他地址（如郵箱等。）

表單名稱、傳送方法——name、method

語法：<form name=”表單名稱” method=”傳送方式”>…</form>

語法解釋：表單的method屬性用來定義處理程序從表單獲得信息的方式，它決定了表單中已收集的數據是用什麼方法發送到服務器的。傳送方式的值有兩種選擇：get、post。

使用get時，表單數據會被視爲CGI或ASP的參數發送，也就是來訪者輸入的數據會附加在URL之後，由用戶端發送到服務器，所以速度比post塊，但缺點是數據長度不能太長；使用post時，表單數據是與URL分開發送的，客戶端的計算機會通知服務器來讀取數據，所以通常沒有數據長度上的限制，缺點是速度比get慢。默認值爲get。

編碼方式——enctype

語法: <form entype=”編碼方式”>…</form>

語法解釋：entype屬性用來設置表單信息提交的編碼方式。

編碼方式的取值
entype的值	含義
text/plain	以純文本的形式傳送
Application/x-www-form-urlencoded	默認的編碼方式
multipart/form-data	MIME編碼，上傳文件的表單必須選擇該項

目標顯示方式——tartget

Target 屬性用來指定目標窗口的打開方式，表單的目標窗口往往用來顯示錶單的返回信息，如是否提交了表單的內容、是否出錯等。

語法：<form target=” 目標窗口的打開方式”>…</form>

語法解釋：目標窗口的打開方式包含4個取值：_blank、_parent、_self和_top。_blank是指將返回的信息顯示在新打開的窗口中；_parent是指將返回信息顯示在父級的瀏覽器窗口中；_self則表示將返回信息顯示在當前瀏覽器窗口；_top表示將返回信息顯示在頂級瀏覽器窗口中。

添加控件

填寫方式分類：輸入類（input）和菜單列表類（select）；

表現形式分類：文本類、選項按鈕和菜單。

輸入類控件中，input是最常用的控件標籤。

其基本語法：<form><input name=”控件名稱” type=”控件類型”/></form>

輸入類控件的type取值
type取值	含義
text	文字字段
password	密碼域，用戶在頁面輸入時不顯示具體的內容，都以“*”代替
radio	單選按鈕
checkbox	複選框
button	普通按鈕
submit	提交按鈕
reset	重置按鈕
image	圖形域，也稱爲圖像提交按鈕
hidden	隱藏域，其並不顯示在頁面上，只將內容傳遞到服務器中
file	文件域
data	獲取時間
color	獲取顏色值

文字字段——text

語法：<input type=”text” name=”控件名稱” size=”控件的長度” maxlength=”最長字符數” value=”文字字段的默認取值”>

text文字字段的參數表
name	文字字段的名稱，用於和頁面中其他控件加以區別，命名時不能包含特殊字符，也不能以HTML預留作爲名稱
size	定義文本框頁面中顯示的長度，以字符作爲單位
maxlength	定義在文本框中最多可以輸入的字符數
value	定義文本框中的默認值

密碼域、單選按鈕、複選框——password、radio、checkbox

語法：<input type=”password” name=”控件名稱” size=”控件的長度” maxlength=”最長字符數” value=”文字字段的默認取值”/>

語法解釋：checked參數表示默認情況下已經被選中。

單選按鈕中的name屬性用於將選項放置在一個組中，實現單選。

普通按鈕、提交按鈕、重置按鈕——button、submit、reset

語法：<input type=”button” name=”按鈕名” value=”按鈕的取值” οnclick=”處理程序”/>

語法解釋：處理程序是window.close()、window.open()等。

圖像域、隱藏域、文件域——image、hidden、file

語法:

語法解釋：

表單中的隱藏域主要用來傳遞一些參數，而這些參數不需要在頁面中顯示，當用戶提交表單時，隱藏域的內容會一起提交給處理程序。

列表/菜單標記（下拉菜單）

列表和菜單都是通過<select><option>標記來實現的。

語法：

<option value=”” selected=”selected”>選項顯示內容</option>

<option value=”” >選項顯示內容</option>

</select>

列表和菜單標記屬性
菜單和列表標記屬性	描述
name	菜單和列表的名稱
size	顯示的選項數目
multiple	列表中的項目能否多選
value	選項值
selected	默認選項被選中

文本域

語法：

<textarea name=”文本域的名稱” rows=”行數” cols=”列數”>文本域的默認值</textarea>

多媒體頁面

網頁的多媒體元素一般包括動態文字、動態圖像、聲音以及動畫等。

設置滾動文字

marquee—HTML5中廢除，用JavaScript編程的方式替代。

滾動文字標籤、背景顏色屬性——marquee、bgcolor

語法：<marquee bgcolor=”顏色代碼”>滾動文字</marquee>

滾動方向屬性、滾動方式屬性、滾動速度屬性——direction、behavior、scrollamount

默認情況下是從右向左滾動。

語法：<marquee direction=”滾動方向” behavior=”滾動方式” scrollamount=”滾動速度” >滾動文字</marquee>

語法解釋：

direction ：up(文字向上)、down(文字向下)、left(文字向左，默認)、right(文字向右)

behavior ：scroll(循環滾動，默認效果)、slide(只滾動一次就停止)、alternate(來回交替進行滾動)

scrollamount ：以像素爲單位。

滾動延遲屬性、滾動循環屬性——scrolldelay、loop

語法：<marquee scrolldelay=”時間間隔” loop=”循環次數” >滾動文字</marquee>

語法解釋：

scrolldelay 設置滾動文字滾動的時間間隔，單位是毫秒；

loop屬性設置滾動次數，默認無限循環。

滾動範圍屬性、空間屬性——width、height、hspace、vspace

語法：<marquee width=”100px” height=”20px” hspace=”水平範圍” vspace=”垂直範圍”>滾動文字</marquee>

語法解釋：

如果不設置滾動北京的面積，默認情況下，水平滾動的文字背景與文字同高，與瀏覽器窗口同寬；在滾動文字周圍，可以設置空白空間。

添加背景音樂

設置背景音樂、循環播放次數——bgsound（#廢除）、loop

語法：<bgsound src=”背景音樂的地址”loop=”循環次數”/>

語法解釋：如果希望無限次循環播放，將loop的值設置爲true、-1。

語法：<audio src=" 背景音樂的地址" controls="controls">您的瀏覽器不支持</audio>

添加多媒體文件

使用<embed>標記可以將多媒體文件嵌入到網頁中，無須客戶端安裝相應的播放軟件。

多媒體文件標記、自動運行、循環播放——embed、autostart、loop

語法：<embed src=" 多媒體文件的地址" width="播放界面的寬度" height="播放界面的高度" loop=" true/false " autostart="true/false"></embed>

隱藏面板——hidden

語法：<embed src=" 多媒體文件的地址" hidden=“是否隱藏面板”></embed>

hidden : true false

HTML簡記

HTML頭部標記

定義列表——dl

菜單列表——menu

目錄列表——dir（HTML5不支持）

<span>標籤與<div>標籤

<layer>標籤和<ilayer>標籤

使用表單標籤——form