一 HTML 基本元素
基本結構
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312” />
<title>這是標題</title>
</head>
<body>
HTML 文檔正文內容
</body>
</html>
一 頭部元素 head
作用範圍整篇文檔。包含以下元素：
1 標題: <title>...</title>
2 基本設置: <base href=”http://www.baidu.com” target=”_blank”/> 用來定
義相對路徑的根目錄
3 元信息: <meta http-equiv=”Content-Type” content=”text/html; charset=文
字編碼” >
<meta name=”keywords” content=”關鍵字 1,關鍵字 2”>
<meta name=”description” content=”簡介”>
<meta name=”Copyright” content=”版權”>
<meta name=”author” content=”作者”>
4 樣式 style ：例：<style type=”text/css”>
#div table tr td{
text-align:center;（把所有表格內數據居中了）
}
</style>
5 鏈接 link：調用其它文檔內容
6 腳本 script : 也能放在<body>內
二 主體元素 body
<body bgcolor=” 背 景 色 ”
background=” 背 景 圖 ” text=” 文 字 顏 色 ”
link=”blue” alink=”red” vlink=”red”（三種鏈接顏色） leftmargin=”” topmargin=””
（頁面與瀏覽器之間距離）>...</body>
三 內容
1 註釋 ： <!-- ...-->
2 標題 ： <h1>...</h1> 從 1 到 6，由大到小。
3 字體 ： <font face=”字體” size=”字號” color=”顏色”>...</font>
4 格式化：<strong>加強 <b>加粗
<i> <em> <cite> 斜體
<sup> 上標 <sub> 下標
<big> 加大 <small> 縮小
<u> 下劃線
5 段落： <p>段落 <br>換行
6 圖像：
格式包括 PNG,GIF,JPEG
<img src=”圖像文件的路徑” alt=”加載失敗” title=”鼠標懸停顯示文本”
width=”圖像的寬度” height=”圖像的高度” border=”圖像邊框的寬度” align=”水平
對齊方式” hspace=”水平邊距”>
7 超鏈接：
可設置任意文字或任意位置的圖片
① <a href=”絕對路徑或相對路徑” target=”目標窗口的打開方式（一般用
_blank 或_self）” accesskey=”鍵盤上的鍵值（同時按 ALT 和定義的熱鍵激活，按
ENTER 打開）” tabindex=”激活順序數字值（數字小的優先，沒有值得排最
後）” >...</a>
② 頁面中的超鏈接：
同頁跳轉<a href=”#錨點的名稱”>...</a> 需要和<p id=”錨點的名稱”>...</p>
配合使用；
跨頁跳轉<a href=”路徑.html#錨點的名稱”>...其他一樣。
③ 圖像中的超鏈接
(1)圖像整體：<a href=”鏈接路徑”><img src=”圖片路徑” alt=”圖片說
明”>...</a>
(2)圖像局部：
<img src=”圖片路徑” usermap=”#map 中定義的 name 或 id”>
<map name=”名稱” id=”標記”>
<area sharp=”形狀” coords=”區域座標組” href=”鏈接路徑”
alt=”文本說明” target=”鏈接目標窗口”/>
</map>
附： sharp 取值
circle 圓
對應 coords 值
x,y,r
coly 多邊形
rect 矩形
x1,y1,x2,y2,...每個頂點座標
x1,y1,x2,y2 左上角、右下角
座標
二 HTML 表格
基本結構
<table>
<tr>
<td>單元格內容</td>
</tr>
</table>
一 表格構成
1 定義表格：<table>...</table>
2 行：<tr>...</tr>
3 單元格：<td>...</td>
4 標題：<caption>...</caption> 指定唯一標題。在<table>下<tr>上。
5 頭部：<th>...</th> 定義表頭。一般在第一行第一列，在<tr>替代<td>。
6 定義表首：<thead >...</thead> 在<table>裏唯一。包住<th>。
7 定義表尾：<tfoot>...</tfoot> 類似 Word 中的頁腳。
8 表體：<tbody>...</tbody> 將表格內容分割成各個獨立部分，在每個獨立
的部分定義特定的表現效果。
二 表格屬性
< table width=”表格寬” height=”表格高” align=”對齊方式” bgcolor=”背景色”
background=”背景圖片路徑” border=”表格邊框值” bordercolor=”邊框顏色”
bordercolorlight=”邊框亮邊線（影響左、頂的邊線）” bordercolordark=”邊框暗邊
線（影響右、底的邊線）” cellspacing=”每個單元格之間的間距值” cellpadding=”
各個單元格與其中的內容之間的間距值” frame=”具體顯示哪條表格外邊框（和
border 一起使用，常用取值：box 顯示所有、void 不顯示邊框）”
rules=”單元
格之間的邊框顯示方式（和 border 一起使用，常用取值：all 顯示所有、none 不
顯示邊框）”
三 行屬性
<tr height=”” align=”” valign=”” bgcolor=”” bordercolor=”” bordercolorlight=””
bprdercolordark=””>...</tr>
四 格屬性
<td
width=”” height=”” align=”” valign=”” bgcolor=”” background=””
bordercolor=”” bordercolorlight=””
rowspan=”合併行” >...</td>
注意：小單位的屬性能覆蓋大單位的
bordercolordark=””
colspan=” 合 並 列 ”
三 HTML 表單
基本結構
<form>表單控件和其他常規元素</form>
一 表單屬性
<form action=”處理表單的程序的路徑” method=”向服務器發送數據的方
式（包括 post 和 get 兩種）” name=”標記某個表單，方便程序處理（id 也能替
代）” enctype=”對發送前的數據編碼” target=”目標窗口打開方式”>...</form>
注意：name 相當於名字，id 相當於身份證號。id 是後來出現的，具有唯一
性。
二 控件
1
文本框：<input name=”控件名稱” type=”text” value=”默認取值”
size=”控件長度” maxlength=”最大字符數”/>
2 密碼：<input name=”控件名稱” type=”password” value=”默認取值”
size=”控件長度” maxlength=”最大字符數”/>
3
單選：<input name=”控件名稱” type=”radio” value=”默認取值”
checked（設置該屬性時，單選按鈕以選中狀態顯示）/>
4 複選：<input name=”控件名稱” type=”checkbox” value=”默認取值”
checked（同上）/>
5 提交：<input name=”控件名稱” type=”submit” value=”按鈕的字”/>
6 重置：<input name=”控件名稱” type=”reset” value=”按鈕的字”/>
7 圖像：<input name=”控件名稱” type=”image” src=”圖像路徑”/>
8 隱藏域：<input name=”控件名稱” type=”hidden” value=”隱藏域的取
值”/>
9
文 件 ： <input name=” 控 件 名 稱 ” type=”file” size=” 控 件 長 度 ”
maxlength=”最大字符數”
爲 multipart/form-data）/>
（要上傳，表單的 enctype 屬性必須
三 文本
<textarea name=”名稱” cols=”列數” rows=”行數”></textarea>
四 選擇
<select name=”下拉菜單名稱” size=”下拉出的文本行數目” multiple（多選）>
<option value=”選項值” selected（同 checked）>選擇列表內容</option>
</select>
四 HTML 框架
一 使用<frameset>框架實現多窗口頁面
它寫在<body>外面。
步驟：
1 如下寫好框架
實例：<frameset cols=”25%,50%” border=”5”>
<frame src=”….html” name=””>
……
</frameset>
注意：cols 和 rows 與<table>裏的同理，它們不能同時出現在一條標
籤裏。但 這個是分割，<table>裏的是合併。
2 給需要實現跳轉的頁面設置 name。
3 在導航頁裏，設置鏈接：
<a href=” 目 的 地 頁 面 ” target=” 要 實 現 跳 轉 的 頁 面 的
name”>...</a>
二 使用<iframe/>內嵌複用頁面
它寫在<body>裏面。
格式：
<iframe
src=” 引 用 頁 面 的 地 址 ” width=”” height=”” name=””
frameborder=”邊框（可有可無）” scrolling=”滾動條（no 的話頁面會被截斷）”/>
五 課堂筆記
1 常用的 4 種塊狀結構：div-ul(ol)-li 用於分類導航和菜單
div-dl-dt-dd 用於圖文混編
table-tr-td 用於圖文佈局或顯示數據
form-table-tr-td 用於佈局表單
2 w3c 的基本規範：內容（結構）和表現（樣式）分離；
HTML 內容結構要求語義化。
3 HTML 基本規範：標籤名和屬性名閉合；
屬性值用引號括起來；
標籤正確嵌套；
添加文檔類型聲明。