詳解HTML
標簽和屬性
在HTML中，通常標簽都是由開始標簽和結束標簽組成的，開始標簽用“<標簽名>”表示，結束標簽用“</標簽名>”表示。
元素指的是包含標簽在內的整體，除去標簽的部分叫做內容。
屬性要在開始標簽中指定，用來表示該標簽的性質和特性。通常都是以“屬性名=”值””的形式來表示，用空格隔開后，還可以指定多個屬性。指定多個屬性時不用區分順序
顏色的指定方法
用HTML指定顏色有兩種方法
1、用16進制數值來指定：在#號的后面，把RGB的各個選項用十六進制的數值來表示，數值保持兩位數。
2、指定顏色的名稱：可以對基本的16色用名稱來指定其顏色
指定文件的位置
在對某部分設置鏈接的時候，需要指定鏈接端HTML文件的位置；同樣，如果想在該處顯示圖像也需要指定圖像的位置。在HTML中，這個位置用URL來表示，有以下兩種表示方法：
1、絕對URL：絕對URL就是用Web瀏覽器查看網頁時，地址欄中顯示的以http://開頭的路徑
2、相對URL：相對URL是在同一站點內進行設置，類似於在同一磁盤上管理文件的形式。這種方法是以當前文件的位置為基准。使用相對URL時，如果要指定的文件在當前文件的下級，就從目錄名開始一直寫到要指定的文件名，中間用“/”符號隔開。如果在當前文件的上級，每上一級就加一個“../”符號
2、基本內容
顯示HTML的版本
<!DOCTYPE~>
HTML的版本表明HTML文件是按照哪個版本進行編寫的（標明該HTML文件遵循的DTD文件），不同的版本和種類都有固定的書寫格式，要按照固定的格式輸入文件開頭，然后在文件開頭處寫明版本，按照這種版本的規定格式進行編寫
必須使用的標簽
<html>~</html>
<head>~</head>
<title>~</title>
<body>~</body>
HTML文件的開頭寫有<!DOCTYPE~>的部分，代表HTML的版本，其后是必須存在的四種標簽
首先，<!DOCTYPE~>后面的整個都要用html標簽(<html>~</html>)括起來，其中要按照head標簽(<head>~</head)和body標簽的順序(<body>~</body>)的順序進行排列。
在head標簽中填寫與該文件相關的信息，body標簽中填寫世紀要在瀏覽器上顯示的內容。另外，在head標簽中，只能有一個代表文件標題的title標簽
設置頁面的文字顏色
<body text=”顏色指定”>~</body>
設置頁面的背景顏色
<body bgcolor=”顏色指定”>~</body>
設置頁面的背景圖像
<body background=”圖像的URL”>~</body>
按照目的設定范圍
<div>~</div>
<span>~</span>
插入注釋
<!—注釋語句-->
3、設置文件信息
添加標題
<title>~</title>
title標簽用來給HTML文件添加標題
這個標簽一定要位於<head>~</head>圈定的范圍內。在這里指定的標題除了可以在通常的瀏覽器窗口的標題欄中顯示以外，還可以作為加入收藏夾時的標題
顯示文件編碼
<meta http-equiv="Content-Type" content="text/html; charset=文字編碼" />
meta標簽的charset屬性表示該HTML文件是用什么文字編碼編寫的
注意，該標簽一定要位於<head>~</head>范圍內
添加關鍵字、內容介紹及作者姓名
<meta name="keywords" content="關鍵字1，關鍵字2，…" />
<meta name="description" content="內容介紹" />
<meta name="author" content="作者姓名" />
這些信息都不會在畫面上顯示出來，但是搜索引擎在收集信息時要用到
注意，該標簽一定要位於<head>~</head>范圍內
設置樣式表和腳本語言的種類
<meta http-equiv="Content-Style-Type" content="樣式表的種類" />
<meta http-equiv="Content-Script-Type" content="腳本的種類" />
在HTML文件內可以設置樣式表和腳本的默認語言
注意，該標簽一定要位於<head>~</head>范圍內
設置進入網頁
<link rel=”關系” href=”URL”>
<link rev=”關系” href=”URL”>
rel：在本頁看到的，與URL標明的網頁之間的關系
rev：在URL標明的網頁中看到的，與本頁之間的關系
link標簽表示的是該文件和與其相關的其他文件之間的關系
注意，該標簽一定要位於<head>~</head>范圍內
設置標准URL
<base href=”絕對URL”>
<base href=”絕對URL” target=”目標名”>
base標簽用來設置將該頁中使用的相對URL的標准指向成絕對URL，指定了這個標簽之后，在該頁指定的相對URL就會全部認定為已在這里指定的絕對URL。如果不進行這項設置，就以當前頁的位置為標准，如果指定了Target屬性，就可以指定打開鏈接地址網頁的默認框架和窗口
注意，該標簽一定要位於<head>~</head>范圍內
設置自動倒入網頁功能
<meta http-equiv="refresh" content="秒數" />
<meta http-equiv="refresh" content="秒數"；URL=要移動到的URL />
在經過數秒后，自動開始導入網頁。如果指定了要移動到的URL，就會導入URL指定的網頁。如果沒有指定，就會再次導入相同的頁
注意，該標簽一定要位於<head>~</head>范圍內
4、設置文本類型
設置各級標題
<h1>~<h1>
…
設置段落
<p>~</p>
p標簽表示的是該部分為一個段落
設置聯系地址
<address>~</address>
address標簽表示的內容是該網頁制作者的聯系地址和有關網頁內容的咨詢地址等信息
設置強調內容
<em>~</em>
<strong>~</strong>
這兩個標簽所圈內容表示該部分是強調的內容
設置較短的引用文字
<q>~</q>
<q cite=”引用頁的URL”>~</q>
q標簽代表的意思是該部分為較短的引用文，在引用段落的某一部分的時候使用，如果使用cite屬性，還能夠把引用頁的URL顯示出來
設置較長的引用文章
<blockquote>~</blockquote>
<blockquote cite=”引用頁的URL”>~</blockquote>
設置文字內容的出處
<cite>~</cite>
設置縮略語
<abbr title=”字符串”>~</abbr>
<acronym title=”字符串”>~</acronym>
title：不處於省略狀態下的詞匯（字符串）
設置添加的內容
<ins cite=”URL” datetime=”添加日期時間”>~</ins>
設置需要刪除的內容
<de cite=”URL” datetime=”刪除日期時間”>~</del>
突出顯示段落中的術語
<dfn>~</dfn>
表示與程序關聯的文本
<kbd>~</kbd>：輸入文本
<samp>~</samp>：輸出樣本
<code>~</code>：源代碼
<var>~</var>：變量
顯示特殊符號
<：<
>：>
"：”
&：&
5、設置顯示方式
設置文字的換行
<br>
添加了br標簽之后，文本就會再該處換行。即使在HTML代碼中已經換行了，在瀏覽器上顯示的時候卻反映不出來，因此如果想在瀏覽器上換行的話，就要使用br標簽
添加不同橫線效果
<hr>
<hr size=”粗細” width=”長度” align=”對齊方式” noshade>
加入了hr標簽后，就可以在其標注的地方顯示橫線
設置文本格式
<b>~</b>：黑體字
<i>~</i>：斜體字
<tt>~</tt>：等大字體
<sup>~</sup>：上標
<sub>~</sub>：下標
<u>~</u>：下划線
<s>~</s>：刪除線
設置空格和換行
<pre>~</pre>
<pre>標簽可以保留文字在源代碼中的格式，使得頁面中顯示的內容和源代中的格式完全一致
設置居中效果
<center>~</center>
center標簽用於將指定范圍內的內容設置為居中
設置行對齊方式
<h1 align=”行對齊方式”>~<h1>
<p align=”行對齊方式”>~<p>
<div align=”行對齊方式”>~<div>
使用align屬性可以設置標題、段落以及指定范圍內的行對齊方式
設置文字顏色
<font color=”設置顏色”>~</font>
設置字體類型
<font>字體名”>~</font>
設置字體字號
<font size=”字號”>~</font>
相對改變字體大小
<big>~</big>：增大
<small>~</small>：減小
<font size=”+n”>：增大n號
<font size=”-n”>：減小n號
設置字號的基本大小
<basefont size=”字號”>
size：1~7
6、設置鏈接相關的屬性
鏈接到其他頁面
<a href=”鏈接目標URL”>~</a>
a標簽的href屬性能把指定的范圍鏈接到其他頁面上，鏈接部分的詞語要設置得讓人看到這個部分就能聯想到鏈接網頁上的具體內容
另外，在鏈接圖像的時候，一定要插入替代的文字（alt=”~”）使用戶能夠很明確的了解到鏈接的目標
鏈接到當前頁的特定位置
<a href=”#位置名”>~</a>：指定鏈接文件（從什么位置開始鏈接）
<a name=”位置名”>~</a>：指定鏈接的地址（要鏈接的位置）
如果一頁上的內容非常多，可以在一個網頁中給特定的位置命名，然后再鏈接到該位置（跳轉）。在給鏈接對象位置命名的時候要使用name屬性。然后，在鏈接的時候，要用href屬性在鏈接地址名稱的前面加上#號
設置鏈接到其他頁面的特定位置
<a href=”URL#位置名”>~</a>：指定鏈接源（從什么位置開始鏈接）
<a name=”位置名”>~</a>：指定鏈接的地址（要鏈接的位置）
在鏈接到其他網頁上的時候，可以先給那一頁上特定的位置命名，然后鏈接到該位置。在給鏈接對象位置命名的時候要使用name屬性。然后，在鏈接的時候，要用href屬性設置成”URL+#+位置名”這樣一種格式
設置鏈接文字的顏色
<body link=”指定顏色” vlink=”指定顏色” alink=”指定顏色”>~<body>
link：還沒有看見的鏈接部分的文字顏色
vlink：已經看見的鏈接部分的文字顏色
alink：鼠標單擊鏈接部分的文字顏色
body標簽用於設置網頁整體鏈接部分的文字顏色
在新窗口中打開鏈接網頁
<a href=” URL” target=”窗口名”>~</a>
利用target屬性可以設置打開鏈接窗口的方式
通過設置鏈接來啟動郵箱
<a href=”mailto：郵箱地址”>~</a>
7、制作不同類型的列表
為列表添加不同類型的標記
<ul><li>列表項目1</li><><li>列表項目2</li>…<ul>
ul標簽的作用是將列表（條款形式）加上圓點或方括號的標記。列表的整體要在<ul>~</ul>標簽范圍內，在這之間的各個項目要在<li>~</li>標簽之內
更改列表標記
<ul type=”標記種類”>~</ul>
<li type=”標記種類”>~</li>
標記的種類包括disc、cicle和square
制作帶序號的列表
<ol><li>列表項目1</li><><li>列表項目2</li>…<ol>
改變序號的樣式
<ol type=”序號樣式”>~</ol>
<li type=”序號樣式”>~</li>
改變序號的順序
<ol start=”開始序號”>~</ol>
<li value=”開始序號”>~</li>
制作包含專用語和解釋的列表
<dl><dt>專用語<dt><dd>對其解釋</dd>…<dl>
8、設置表格
表格的基本形式
<table border=”邊框的粗度”>~</table>：整個表格
<tr>~</tr>：單獨一行
<th>~</th>：單元格：標題用
<td>~</td>：單元格：數據用
表格的整體要圈在<table>~</table>之間顯示，表格當中某一個單元格用<th>~</th>表示或者<td>~</td>表示。每個單元格都在表的單獨以行，放置在<tr>~</tr>中。也就是說，table標簽的內容是由tr標簽構成的。各個tr標簽的內容是由表示單元格的th或者td標簽構成的。th標簽代表這個單元格的內容是標題。td標簽代表這個單元格的內容是數據
為表格添加標題
<caption>~</caption>
<caption align=”對齊方式”>~</caption>
caption標簽用來給表格添加標題
該標簽一定要放在table標簽的緊后面。標題的顯示位置（即對齊方式）可以指定在表格的上部，或者表格的下部
指定表格的大小
<table width=”寬度”>~</table>
寬度：針對像素或者窗口的百分比
指定單元格大小
<th width=”寬度” height=”高度”>~</th>
<td width=”寬度” height=”高度”>~</td>
合並單元格
<th rowspan=”垂直方向的合並數”>~</th>
<th colspan=”水平方向的合並數”>~</th>
<td rowspan=”垂直方向的合並數”>~</td>
<td colspan=”水平方向的合並數”>~</td>
垂直方向的合並數：從當前單元格開始向下合並的單元格數
水平方向的合並數：從當前單元格開始向右合並的單元格數
設置單元格之間的距離
<table cellspacing=”單元格的距離”>~</table>
設置單元格邊框與內容之間的距離
<table cellpadding=”單元格邊框與內容之間的距離”>~</table>
設置單元格中的行對齊方式和列對齊方式
align屬性用於設置單元格內的行對齊方式，valign屬性用來設置單元格內的列對齊方式
禁止在單元格內換行
<th nowrap>~</th>
<td nowrap>~</td>
設置表格和單元格的背景顏色
bgcolor屬性用於指定表格和單元格中的背景顏色
設置表格和單元格的背景圖像
background屬性用於指定表格和單元格中的背景圖像
設置表格外框的寬度
<table border=”外框的寬度”>~</table>
設置表格外框的顯示形式
<table frame=”外框的顯示形式”>~</table>
設置表格內補邊框線的顯示形式
<table rules=”內部邊框線的顯示形式”>~</table>
定義表格中的橫行
<thead>~</thead>：表頭部分
<tbody>~</tbody>：表體部分
<tfoot>~</tfoot>：表底部分
thead標簽、tbody標簽和tfoot標簽都是用來定義表格的橫行（tr標簽）的
這樣組合之后，就可以針對該組合的整體來應用屬性和樣式表。
使用這些標簽的時候，一定要以thead標簽、tfoot標簽和tbody標簽的順序進行排列。在一個表格里，只能放置一個thead標簽和一個tfoot標簽，而tbody標簽可以根據需要放置多個
利用縱列設置表格屬性和樣式表
<col span=”縱列數”>
<col span=”縱列數” width=”寬度”>
col標簽不僅可以用來改變表格的縱列結構，還可以用來根據縱列，來綜合指定寬和行對齊方式等屬性以及樣式表
該標簽放置的位置要在caption標簽的緊后面（如果沒有caption標簽，就放在table標簽的開始標簽的緊后面），以及thead標簽和tr標簽的前面
設置表格居中
<table align=”center”>~</table>
將表格嵌入到文本中
<table align=”對齊方式”>~</table>
位置：left,right
將table標簽的align屬性指定為left或者right后，就可以將表格以居左或居右的方式嵌入到文字中間
如果想要解除嵌入狀態，可以使用<br>標簽的clear屬性
解除表格的嵌套
<br clear=”解除表格那一側的嵌套”>
left：解除左側表格的嵌套
right：解除右側表格的嵌套
all：解除兩側表格的嵌套
設置表格與嵌套文字之間的距離
<table vspace=”垂直距離” hspace=”水平距離”>~</table>
垂直距離：表格的上下框與文字間的距離
水平距離：表格的左右框與文字間的距離
9、設置圖像與多媒體
插入圖像
<img src=”URL” width=”寬度” hignt=”高度” alt=”替代文字”>
使用img標簽，可以把圖像插入到HTML文件中
圖像的格式一般可以使用GIF格式、JPEG格式和PNG格式
不管圖像實際的大小如何，都會按照在這里所指定的寬度和高度來顯示
alt屬性是在不能顯示圖像的情況下，指定替代圖像所使用的文字
設置圖像的邊框
<img src=”URL” alt=”替代文字” border=”邊框的粗度”>
設置圖像與文字的垂直位置關系
<img src=”URL” alt=”替代文字” align=”對齊方式”>
在同一行中，如果有圖像和文字，那么就可以用align屬性來設置圖像和文字的垂直位置關系
制作圖像熱區
<img src=”URL” alt=”替代文字” usemap=”#map名”>
<map name=”map名”>~</map>
<area shape=”形狀” cords=”坐標” href=”URL” alt=”替代文字”>
在map標簽中，用來設置實際單擊的區域和鏈接地址的是area標簽
在area標簽中，一定要指定表示鏈接地址的替代文字，之后要用image標簽的usemap屬性指定定義后的image map的名稱（名稱前面要加#），這樣圖像就可以作為image map產生相應的效果
將圖像嵌套在文本中
<img src=”URL” alt=”替代文字” align=”對齊方式”>
位置：left,right
解除圖像的嵌套
<br clear=”解除哪一側圖像的嵌套”>
設置圖像與周圍文字之間的距離
<img src=”URL” alt=”替代文字” vspace=”垂直距離” hspace=”水平距離”>
放置Java小程序
<applet code=”類文件名” width=”寬度” height=”高度” >~</applet>
<param name=”參數名” value=”參數值”>
applet標簽是嵌入Java小程序時要使用的標簽
如果使用param標簽，在執行java小程序時，需事先指定一些必要值。這時，param標簽要位於<applet>~</applet>范圍的最開始部分
10、制作不同類型的表單
制作填寫表單
<form action=”URL” method=”發送形式” enctype=”MIME類型” target=”窗口名稱”>~</form>
URL：用來處理發送后表格的程序的URL
發送形式：get,post
MIME類型：以post方式發送內容時的MIME類型
窗口名稱：先是發送結果的窗口或框架名
form標簽表示在表單中填寫的內容是可以發送的
制作發送按鈕
<input type=”submit” value=”標簽” name=”名稱”>
標簽：在按鈕上顯示的文字
名稱：按鈕的名稱
將input標簽的type屬性設置為submit，再根據form標簽的設置，可以制作發送填寫在表單中數據的按鈕
制作重置按鈕
<input type=”reset” value=”標簽”>
制作通用按鈕
<input type=”button” name=”名稱” value=”標簽”>
通用按鈕通常與JavaScript等腳本語言組合使用
利用圖像來制作發送按鈕
<input type=”image” src=”URL” name=”名稱” alt=”替代文字” align=”對齊方式”>
通常，發送按鈕都使用input type=”submit”代碼，不過圖像也可以作為發送按鈕，具有發送功能。這時，圖像被單擊的位置將和表單的內容一起被發送
制作不同功能的發送按鈕
<button type=”類型” name=”名稱” value=”發送值”>~</button>
類型：submit,reset,button
button標簽是用來制作按鈕專用的
通過指定type屬性值，就可以產生具有不同功能的按鈕，包括發送按鈕、重置按鈕和通用按鈕。另外，在<button>~</button>中放置相應的內容，可以作為按鈕的標簽顯示出來。在需要進行其他處理並設置多個發送按鈕的情況下，根據name屬性和value屬性所顯示的值，接受方就可以分辨出單擊的是哪一個發送按鈕
制作單行文本框
<input type=”text” name=”名稱” value=”默認文字” size=”寬度” maxlength=”字符的最大輸入數量”>
制作多行文本框
<textarea name=”名稱” rows=”行數” cols=”寬度”>~</textarea>
制作輸入密碼的文本框
<input type=”password” name=”名稱” value=”默認文字” size=”寬度” maxlength=”字符的最大輸入數量”>
插入隱藏域
<input type=”hidden” name=”名稱” value=”發送值” >
制作單選按鈕
<input type=”radio” name=”名稱” value=”發送文字” >
<input type=”radio” name=”名稱” value=”發送文字” checked>
將input標簽的type屬性設置為radio，可以用來制作單選按鈕。單選按鈕是多個選項當中只能選擇其一的按鈕。作為公共項目的選項而使用的單選按鈕，要把它們都指定為同一名稱。另外，發送數據的時候，為了識別所選的是哪一項，要用value屬性來指定相應的值
制作復選框
<input type=”checkbox” name=”名稱” value=”發送文字” >
<input type=” checkbox” name=”名稱” value=”發送文字” checked>
將input標簽的type屬性設置為checkbox，可以用來制作復選框。復選框可以在多個選項當中進行多項選擇。作為公共項目的選項而使用的復選框，要把它們都指定為同一名稱。另外，發送數據的時候，為了識別所選的是哪一項，要用value屬性來指定相應的值
制作菜單
<select name=”名稱”>~</select>：菜單整體
<option value=”發送值”>~</option>：菜單項
<option selected>~</option>：菜單項
select標簽用來制作菜單
菜單的整體要在<select>~</select>范圍之內顯示，然后按需要的數量在其中放置表示選項的<option>~</option>。<option>~</option>范圍之內要寫上實際菜單要顯示的選項的名稱。另外，如果省略了value屬性，在這里記錄的文字本身就會作為所選值發送
組合菜單選項
<optgroup lable=”組合名稱”>~</optgroup>：制作組合菜單
<option lable=”次選項”>~</option>：組合內的選項
組合名稱：第一級顯示的組合標題
次選項：對應組合名稱下面的在第二級顯示出來的選項
制作的菜單選項可以利用<select>~</select>標簽組合起來
制作下拉列表
<select size=”行數” name=”名稱” multiple>~</select>：下拉列表框
<option value=”發送值”>~</option>：菜單項
<option selected>~</option>：菜單項
在用於制作菜單的select標簽中指定了size屬性后，就可以顯示下拉列表框
添加選擇文件的功能
<input type=”file” name=”名稱”accept=”MIME”類型>
將input標簽的type屬性設置為file，可以自動做成能夠選擇發送表單數據的文件按鈕和文本框
綜合利用菜單選項
<fieldset>~</fieldset>：組合
<legend align=”對齊方式”>~</legend>：組合的標題
field標簽用來把填寫在表單中需要包含的輸入內容和選項組合起來
在<fieldset>~</fieldset>的最開始部分放置legend標簽，並且給該組合加上標題
將標簽文字與項目一體化
<label for=”參照ID”>~</lable>
參照ID：添加了標簽的對象的id屬性值
lable標簽的作用是在輸入項和選項及其標簽文字之間建立起明確的關聯，並使其一體化
11、利用框架布局網頁
設置框架整體結構
<frameset rows=”高度”>~</frameset>
<frameset cols=”寬度”>~</frameset>
<frame src=”URL” name=”框架名稱”>
高度：在垂直方向上分布的多個框架的高度，按從上到下的順序依次用逗號隔開來指定
寬度：在水平方向上分布的多個框架的寬度，按從左到右的順序依次用逗號隔開來指定
URL：作為框架內容顯示的HTML文件的URL
框架名稱：在指定鏈接等顯示目標的時候使用的名稱
使用框架功能可以把窗口橫豎切割開，然后在不同的塊區域中顯示其他的HTML文件。在指定了框架的文件中，原來body標簽所在的位置，要放置frameset標簽，這主要是由於在框架頁面中不能使用body標簽
在<frameset>~</frameset>的范圍中要按照順序填入分割后框架內要填寫的內容。如果不需要再分割，就用frame標簽指定要導入的HTML文件，如果還要繼續分割的話，就需要放置frameset標簽（作為嵌套放置在里面，並且指定蓋框架如何分割）
設置框架的顯示方法
<frame scrolling=”滾動控制” noresize>
<frame marginwidth=”左右縮進” marginheight=”上下縮進”>
設置是否顯示邊框
<frame frameborder=”顯示指定框架的邊框”>
frameborder屬性用來設置分割開相鄰框架的邊框是否顯示
去除分割框架的邊框
<frameset frameborder=”0” framespacing=”0” border=”0”>
在不支持框架的環境中顯示所需內容
<noframes>~</noframes>
這個標簽要在<frameset>~</frameset>范圍的最開始或者最后處放置一個。在<noframes>~</noframes>范圍內要首先放置body標簽，並在其中填寫所要顯示的內容。
指定鏈接目標在哪一個框架內顯示
<a href=”URL” target=”框架名”>~</a>
如果對框架內的文件中指定的鏈接不進行設置的話，就會在原來的相同框架中顯示鏈接目標，如果想使這個鏈接目標在其他框架中顯示的話，就需要指定target屬性值，用想要顯示（frame標簽）的那個框架的name屬性來指定框架名稱
插入內嵌框架
<iframe src=”內容的URL” name=”框架名”>~</iframe>
iframe標簽不僅可以放置分割窗口形式的框架，還可以在窗口中放置獨立顯示的內嵌框架。在框架內還可以顯示src屬性所指定的內容
如果瀏覽器不支持這種框架，要在<iframe>~</iframe>之間指定要顯示的內容
12、關於腳本
在HTML中插入腳本
<script type=”MME類型”>~</script>
<script type=”MME類型” language=”語言名稱” src=”URL”>~</script>
在HTML文件中編寫腳本的時候要用到script標簽，腳本語言要寫在這個標簽的范圍內
這時，在不支持這個標簽的瀏覽器上會在畫面上顯示出腳本的部分，為了避免這種現象，通常把腳本整體作為HTML的注釋。這個標簽可以放在<head>~</head>和<body>~</body>范圍內的任意位置上
在不能執行腳本的環境中添加所需的內容
<noscript>~</noscript>
在腳本不能運行的時候，可以使用noscript標簽來指定替代顯示的內容
這個標簽要放置在<body>~</body>的范圍內