HTML语法大全
卷標 , 屬性名稱 , 簡介
<! - - ... - -> 批注
<!> 跑馬燈
<marquee>...</marquee>普通卷動
<marquee behavior=slide>...</marquee>滑動
<marquee behavior=scroll>...</marquee>預設卷動
<marquee behavior=alternate>...</marquee>來回卷動
<marquee direction=down>...</marquee>向下卷動
<marquee direction=up>...</marquee>向上卷動
<marquee direction=right></marquee>向右卷動
<marquee direction=left></marquee>向左卷動
<marquee loop=2>...</marquee>卷動次數
<marquee width=180>...</marquee>設定寬度
<marquee height=30>...</marquee>設定高度
<marquee bgcolor=FF0000>...</marquee>設定背景顏色
<marquee scrollamount=30>...</marquee>設定卷動距離
<marquee scrolldelay=300>...</marquee>設定卷動時間
<!>字體效果
<h1>...</h1>標題字(最大)
<h6>...</h6>標題字(最小)
<b>...</b>粗體字
<strong>...</strong>粗體字(強調)
<i>...</i>斜體字
<em>...</em>斜體字(強調)
<dfn>...</dfn>斜體字(表示定義)
<u>...</u>底線
<ins>...</ins>底線(表示插入文字)
<strike>...</strike>橫線
<s>...</s>刪除線
<del>...</del>刪除線(表示刪除)
<kbd>...</kbd>鍵盤文字
<tt>...</tt> 打字體
<xmp>...</xmp>固定寬度字體(在文件中空白、換行、定位功能有效)
<plaintext>...</plaintext>固定寬度字體(不執行標記符號)
<listing>...</listing> 固定寬度小字體
...字體顏色
...最小字體
<font style =font-size:100 px>...無限增大
<!>區斷標記
<hr>水平線
<hr size=9>水平線(設定大小)
<hr width=80%>水平線(設定寬度)
<hr color=ff0000>水平線(設定顏色)
<br>(換行)
<nobr>...</nobr>水域(不換行)
<p>...</p>水域(段落)
<center>...</center>置中
<!>連結格式
<base href=地址>(預設好連結路徑)
<a href=地址>外部連結
<a href=地址 target=_blank>外部連結(另開新窗口)
<a href=地址 target=_top>外部連結(全窗口連結)
<a href=地址 target=頁框名>外部連結(在指定頁框連結)
<!>貼圖/音樂
<img src=圖片地址>貼圖
<img src=圖片地址 width=180>設定圖片寬度
<img src=圖片地址 height=30>設定圖片高度
<img src=圖片地址 alt=提示文字>設定圖片提示文字
<img src=圖片地址 border=1>設定圖片邊框
<bgsound src=MID音樂文件地址>背景音樂設定
<!>表格語法
<table aling=left>...</table>表格位置,置左
<table aling=center>...</table>表格位置,置中
<table background=圖片路徑>...</table>背景圖片的URL=就是路徑網址
<table border=邊框大小>...</table>設定表格邊框大小(使用數字)
<table bgcolor=顏色碼>...</table>設定表格的背景顏色
<table borderclor=顏色碼>...</table>設定表格邊框的顏色
<table borderclordark=顏色碼>...</table>設定表格暗邊框的顏色
<table borderclorlight=顏色碼>...</table>設定表格亮邊框的顏色
<table cellpadding=參數>...</table>指定內容與網格線之間的間距(使用數字)
<table cellspacing=參數>...</table>指定網格線與網格線之間的距離(使用數字)
<table cols=參數>...</table>指定表格的欄數
<table frame=參數>...</table>設定表格外框線的顯示方式
<table width=寬度>...</table>指定表格的寬度大小(使用數字)
<table height=高度>...</table>指定表格的高度大小(使用數字)
<td colspan=參數>...</td>指定儲存格合并欄的欄數(使用數字)
<td rowspan=參數>...</td>指定儲存格合并列的列數(使用數字)
<!>分割窗口
<frameset cols="20%,*">左右分割,將左邊框架分割大小為20%右邊框架的大小瀏覽器會自動調整
<frameset rows="20%,*">上下分割,將上面框架分割大小為20%下面框架的大小瀏覽器會自動調整
<frameset cols="20%,*">分割左右兩個框架
<frameset cols="20%,*,20%">分割左中右三個框架
<分割上下兩個框架
<frameset rows="20%,*,20%">分割上中下三個框架
<! - - ... - -> 批注
<A HREF TARGET> 指定超級鏈接的分割窗口
<A HREF=#錨的名稱> 指定錨名稱的超級鏈接
<A HREF> 指定超級鏈接
<A NAME=錨的名稱> 被連結點的名稱
<ADDRESS>....</ADDRESS> 用來顯示電子郵箱地址
<B> 粗體字
<BASE TARGET> 指定超級鏈接的分割窗口
<BASEFONT SIZE> 更改預設字形大小
<BGSOUND SRC> 加入背景音樂
<BIG> 顯示大字體
<BLINK> 閃爍的文字
<BODY TEXT LINK VLINK> 設定文字顏色
<BODY> 顯示本文
<BR> 換行
<CAPTION ALIGN> 設定表格標題位置
<CAPTION>...</CAPTION> 為表格加上標題
<CENTER> 向中對齊
<CITE>...<CITE> 用于引經據典的文字
<CODE>...</CODE> 用于列出一段程序代碼
<COMMENT>...</COMMENT> 加上批注
<DD> 設定定義列表的項目解說
<DFN>...</DFN> 顯示"定義"文字
<DIR>...</DIR> 列表文字卷標
<DL>...</DL> 設定定義列表的卷標
<DT> 設定定義列表的項目
<EM> 強調之用
<FONT FACE> 任意指定所用的字形
<FONT SIZE> 設定字體大小
<FORM ACTION> 設定戶動式窗體的處理方式
<FORM METHOD> 設定戶動式窗體之資料傳送方式
<FRAME MARGINHEIGHT> 設定窗口的上下邊界
<FRAME MARGINWIDTH> 設定窗口的左右邊界
<FRAME NAME> 為分割窗口命名
<FRAME NORESIZE> 鎖住分割窗口的大小
<FRAME SCROLLING> 設定分割窗口的滾動條
<FRAME SRC> 將HTML文件加入窗口
<FRAMESET COLS> 將窗口分割成左右的子窗口
<FRAMESET ROWS> 將窗口分割成上下的子窗口
<FRAMESET>...</FRAMESET> 劃分分割窗口
<H1>~<H6> 設定文字大小
<HEAD> 標示文件信息
<HR> 加上分網格線
<HTML> 文件的開始與結束
<I> 斜體字
<IMG ALIGN> 調整圖形影像的位置
<IMG ALT> 為你的圖形影像加注
<IMG DYNSRC LOOP> 加入影片
<IMG HEIGHT WIDTH> 插入圖片并預設圖形大小
第一章：HTML 語言的結構
html文件是標準的ASCII文件，它看起來象是加入了許多被稱為鏈接簽(tag)的特殊字符串的普遍文本文件。
從結構上講，html文件由元素(element)組成，組成html文件的元素有許多種，用于組織文件的內容和指導文件的輸出格式。絕大多數元素是“容器”， 即它有起始標記和結尾標記。元素的起始標記叫做起始鏈接簽(start tag)，元素結束標記叫做結尾鏈接簽(end tag)。
在起始鏈接簽和結尾鏈接簽中向的部分是元素體。 每一個元素都有名稱和可選擇的屬性，元素的名稱和屬性都在起始鏈接簽內標明。 比如體元素(body)
<body backgroud＝"back-ground.gif">
<h2> demo </h2>
This is my first html file. <p>
</body>
第一行是體元素的起始鏈接簽，它標明體元素從此開始。因為所有的鏈接簽都具有相同的結構，所以我們將仔細分析這個鏈接簽的各個部分，以便讀者對鏈接簽的寫法有一大概了解。
< 起始鏈接簽開始 body 元素名稱，由于元素和鏈接簽一一對應，所以元素名也叫鏈接簽名。需要注意的是<和body之間不能有空格。元素名稱不分大小寫。background屬性名。一個元素可以有多個屬性，屬性及其屬性值不分大小寫。本屬性指明用什么方法來填充背景。
＝指明屬性值
“background.gif”屬性值，表示用background.gif文件來填充背景。
屬性名,＝,屬性值合起來構成一個完整的屬性，一個元素可以有多個屬性，各個屬性用空格分開。
> 起始鏈接鏈結束。
第二行和第三行是body元素的元素體，最后一行是body元素的結尾鏈接簽。結尾鏈接簽用</開始，隨后是元素名，然后是大于號>。
從上面的例子中，我們可以看出，一個元素的元素體中可以有另外的元素。(上例中第二行的標題元素<h2>…</h2>和第三行的分段元素<p>。實際上，html文件僅由一個html元素組成， 即文件以<html>開始，以</html>結尾，文件其部分都是 html的元素體。html元素的元素體由兩大部分，即頭元素<head>..</head>和體元素<body>…</body>和一些注釋組成。頭元素和體元素的元素體又由其它的元素和文本及注釋組成。也就是說，一個html文件應具有下面的結構：
<html> html文件開始
<head> 文件頭開始
文件頭
</head> 文件頭結束
<body> 文件體開始
文件體
</body> 文件體結束
</html> html文件結束
需要說明的是，html是一門發展很快的語言，早期的html文件并沒有如此嚴格的結構，因而現在流行的瀏覽器(如Netscape,Mosaic等)為保持對早期html文件的兼容性，也支持不按上述結構編寫的html文件。還需要說明的是，各種瀏覽器對html元素及其屬性的解釋也不完全一樣。
一般來講，html的元素有下列三種表示方法：
1)<元素名>文件或超文本<／元素名>
2)<元素名 屬性名＝“屬性值…>文本成超文本<／元素名>
3)<元素名>
第三種寫法僅用于一些特殊的元素,比如分段元素P，它僅僅通知www瀏覽器在此處分段，因而不需要界定作用范圍， 所以它沒有結尾鏈接簽。htlm3.0標準中，也定義了</p> 鏈接簽，它用于需要界定作用范圍的段落，比如增加對齊方式屬性的段落。
html文件中，有些元素只能出現在頭元素中，絕大多數元素只能出現在體元素中。在頭元素中的元素表示的是該html文件的一般信息，比如文件名稱，是否可檢索等等。這些元素書寫的次序是無關緊要的，它只表明該html有還是沒有該屬性。與此相反，出現在體元素中的元素是次序敏感的，改變元素在html文件中的次序會改變該html文件的輸出形式。
第二章：構成網頁的基本元素
2.1題目(TITLE)
Title元素是文件頭中唯一一個必須出現的元素，它也只
能出現在文件頭中。title元素的格式為：
<title>文件題目</title>title標明該html文件的題目，是對文件內容的概括。一個好的題目應該能使讀者從中判斷出該文件的大概內容。文件的題目一般不會顯示在文本窗口中，而以窗口的名稱顯示出來。
除了標識窗口外，當將某一 homepage 存入書簽或文件時，title還用作書簽名或缺省的文件名。
title的長度沒有限制，但過長的題目會導致折行，一般情況下它的長度不應超過64個字符。由于title的作用是標明文件內容，所以太短的title也是不可取的，比如：introduction 這個題目，讀者不可能根據它判斷出本文介紹的是什么。一個好的例子是：
<title> An Introduction to HTML 2.0 </title>
在頭元素中還可以出現其他元素，如<isindex>，<meta>等等。這些元素都不是必須的，而且也不常用。這些元素的用法和它們的含義可以參考有關文獻。
下面是一個最簡單的html文件
<html>
<title>the simplest html file</title>
This is my first html file.
</html>
§2.2 標題(hn)
標題元素有6種，分別為h1, h2,…h6，用于表示文章中的各種題目。標題號越小，字體越大。一般情況下，瀏覽器對標題作如下解釋：
h1 黑體，特大字體，居中，上下各有兩行空行。
h2 黑體，大字體，上下各有一到兩行空行
h3 黑體(斜體)，大字體，左端微縮進，上下空行
h4 黑體，普通字體，比h3更多縮進，上邊一空行
h5 黑體(斜體)，與h4相同縮進，上邊一空行
h6 黑體，與正文有相同縮進，上邊一空行
Netscape 2.0為hn的解釋為，一律黑體，字體越來越小。
hn可以有對齊屬性，align＝#，#表示：left 標題居左；center 標題居中；right 標題居右
例: <h2 align=center>Chapter 2 </h2>
下面給出hn的例子及其輸出：
<h1>Today is fine!<／h1>
Today is fine!
<h2>Today is fine!<／h2>
Today is fine!
<h3>Today is fine!<／h3>
Today is fine!
<h4>Today is fine!<／h4>
Today is fine!
<h5>Today is fine!<／h5>
Today is fine!
<h6>Today is fine!<／h6>
Today is fine!
§2.3 分段<P>
html的瀏覽器是基于窗口的，用戶可以隨時改變顯示區的大小，所以html將多個空格以及回車等效為一個空格，這是和絕大多數字處理器不同的。html的分段完全依賴于分段元素<P>。比如下面兩段源文件有相同的輸出。
<h2>This is a level Two Heading </h2>
paragraphy one <p>paragraph two <p>
… … … … … … … … … …
<h2>This Is a Level Two Heading</h2>
paragraph one <p>
paragraph Two <p>
<p>也可以有多種屬性，比較常用的屬性是：
aligh＝# #可以是left,center,right,其含義同上文。
例 <p align=center>This is a centeredparagraph <／p>
當 html文件中有圖形，圖形可能占據了窗口的一端，圖形的周圍可能還有較大的空白區。這時，不帶clear屬性的<p>可能會使文章的內容顯示在該空白區內。為確保下一段內容顯示在圖形的下方，可使用clear屬性。clear屬性的含義為：
clear=left 下一段顯示在左邊界處空白的區域
clear=right 下一段顯示在右邊界處空白的區域
clear=all 下一段的左右兩邊都不許有別的內容
§2.4 清單List
清單用于列舉事實，常用的清單有3種格式，即無序清單(unordered List)，有序清單(ordered list)和定義清單(definition list)
2.4.1 無序清單(ul)
無序清單用(ul)開始，每一個清單條目用<li>引導，最后是</ul>，注意清單條目不需要結尾鏈接簽</Li>。輸出時每一清單條目縮進，并且以黑點標示。
例 ：
源文件
<ul>
<li>Today
<li>Tommorow
</ul>
輸出為：
Today
Tommorow
2.4.2 有序清單<ol>
有序清單與無序清單相比，只是在輸出時清單條目用數字標示，下面是一個例子及其輸出：
<ol>
<li>Today
<li>Tommorow
</ol>
輸出為：
Today
Tommorow
2.4.3 定義清單<dl>
定義清單用于對清單條目進行簡短說明的場合，用<dl>開始，清單條目用<dt>引導，它的說明用<dd>引導。
<dl>
<dt>Item 1
<dd>The definition of item 1
<dt>Item 2
<dd>Definition or explaination of item 2
</dl>
輸出為：
Item 1
The definition of item 1
Item 2
Definiton or explaination of item 2
2.4.4 改變條目標記
1.改變無序清單條目標記
無序清單輸出時，每一條目前都有一個黑色圓點，用戶可以用type序性修改條目的標記。type可以是：
disc：實心圓點； circle：圓圈 square：實心方點
<ul>
<li type=disc>ONE
<li type=circle>TWO
<li type=square>THREE
</ul>
輸出為：
ONE
TWO
THREE
2.改變有序清單條目標記
有序清單條目標記的缺省值是阿拉伯數字，可以用type屬性修改。方法為:
<Litype=#>
#=A, 大寫字母
a, 小寫字母
I, 大寫羅馬數字
i, 小寫羅馬數字
l, 缺省,阿拉伯數字
<ol><li type=A>ONE-ONE
<li>ONE-TWO</ol>
ONE-ONE
ONE-TWO
<ol><li type=a>ONE-ONE
<li>ONE－TWO</ol>
ONE-ONE
ONE-TWO
<ol><li type=I>ONE-ONE
<li>ONE=TWO<／ol>
ONE-ONE
ONE-TWO
3.改變有序清單條目的超始數字
有序清單的條目數字在缺省情況下是從1開始的，用start屬性可修改這一值。方法為<ol start=#> #是條目起始號 <ol start=5>
<li type=A>ONE-ONE
<li>ONE-TWO
<ol start=10>
<li>TWO-ONE
<li type=i>TWO-ONE
</ol></ol>
ONE-ONE
ONE-TWO
TWO-ONE
TWO-TWO
2.4.5 清單的嵌套
各種清單可以相互嵌套，每一個清單條目都可以是一個單獨的清單。每嵌套一層，清單條目的輸出就會有更大的縮進。請參照上面的例子。
§2.5 預排版文本<pre>
html的輸出是基于窗口的，因而html文件在輸出時都是要重新排版的，若確實不需要重新排版的內容，可以用<pre>…<／pre>通知瀏覽器。瀏覽器在輸出時，對這部分內容幾乎不做修改地輸出，輸出的字體電傳打字機字體。早期的html規范規定在預排版區內不能出現格式化輸出的元素。如hn等，Netscapr2.0在遇到預排版元素時，允許其中有其他元素。
<pre>
please use your card.
VISA Master
<b>Here is an order form.</b>
<ul><li>Fax
<li>Air Mail </ul>
</pre>
§2.6 塊引用<BQ>
塊引用表示其中的內容是引用。瀏覽器內對塊引用的解釋一般為左右縮進，上下各有一空行，有些瀏覽器還采 用斜體字。
§2.7 居中<center>
很多元素都有對齊方式屬性，如hn 、p等。也可以直接用居中鏈接簽<center>…<／center>
<h3 align=center> Wonderful!! </h3>
<center> This must be my dream. </center>
Wonderful!!
This must be my dream.
第三章：超文本鏈接指針
超文本鏈接指針是html最吸引人們優點之一。使用超文本鏈接指針可以使順序存放的文件具有一定程度上隨機訪問的能力，這更加符合人類的思維方式。人的思維是跳躍的、交叉的，而每一個鏈接指針正好代表了作者或者讀者的思維跳躍。因而組織得好的鏈接指針不僅能使讀者跳過他不感興趣的章節(比如一些枯燥的數據)，而且有助于更好地理解作者的意圖。
一個超文本鏈接指針由兩部分組成。一是被指向的目標，它可以是同一文件的另一部分，也可以是世界另一端的一個文件，還可以是動畫或音樂；另一部分是指向目標的鏈接指針。
§3.1 統一資源定位器URL
統一資源定位器(uuiform Resource Locator)是文件名的擴展。在單機系統中，定位一個文件需要路徑和文件名，對于遍布全球的Internet網，顯然還需要知道文件存放在哪個網絡的哪臺主機中才行。與單機系統不一樣的是在單機系統中，所有的文件都由統一的操作系統管理，因而不必給出訪問該文件的方法；而在Internet上，各個網絡，各臺主機的操作系統都不一樣，因此必須指定訪問該文件的方法。一個URL包括了以上所有的信息。它的構成為：
protocol:// machine.name[:port]／directory／filename
其中protocol是訪問該資源所采用的協議，即訪問該資源的方法，它可以是：
http 超文本傳輸協議，該資源是html文件
file 文件傳輸協議,用ftp訪問該資源
ftp 文件傳輸協議,用ftp訪問該資源
gopher gopher協議,該資源是gopher文件
news 表明該資源是網絡新聞組
madcine.name 是存放該資源主機的IP 地址,通常以字符形式出現,如 sun.ihep.ac.cn port端口號，是服務器在該主機所使用的端口號。一般情況下端口號不需要指定。只有當服務器所使用的端口號不是缺省的端口號時才指定。
directory和filename是該資源的路徑和文件名。
一個典型的URL為:http://www.ihep.ac.cn 它表示中科院高能所WWW服務器上的起始html文件。(文件具體存放的路徑及文件名取決于該WWW服務器的配置情況)。
與單機系統絕對路徑，相對路徑的概念類似，統一資源定位器也有絕對URL和相對URL之分。上文所述的是絕對URL。相對URL是相對于你最近訪問的URL。比如你正在觀看一個URL為http://www.inep.ac.cn/index.html的文件，如果想看同一個目錄下的另一個文件china.html，你可以直接使用china.html，這時china.html就是一個相對url，它的絕對url為http://www.ihep.ac.cn/china.html
§3.2 指向一個目標<a>
在html文件中用鏈接指針指向一個目標。其基本格式為：
<a href="url">字符串</a>
href屬性中的統一資源定位器(url)是被指向的目標，隨后的“字符串”在html文件中充當指針的角色， 它一般顯示為藍色。當讀者用鼠標點這個字符串時，瀏覽器就會將url處的資源顯示在屏幕上。例如：
<a href="http://www:ihep.ac.cn">IHEP CHINA homepage</a>
用戶用鼠標點取IHEP china homepage，即可看到高能所編寫的關于中國情況的介紹。在這個例子中， 充當指針的是IHEP china homepage，下面我們將看到用圖象做為指針的例子。
在編寫html文件時，需要知道目標的url。如何才能得到目標的url呢？對于自己主機內的文件，它的url 可以根據該文件的實際情況決定。對于Interner上的資源，我們在用瀏覽器觀看時，它的url會在瀏覽器的Location一欄中顯示出來，把它抄下來寫到你的html文件中即可。
在編寫html文件時，對有能確定關系的一組資源(比如在同一個目錄中)應采用相對url， 這不僅簡化你的html文件，而且便于維護。比如當你需要將某個目錄整個搬到另外一個地方或把某一主機的資源移到另一臺主機時，用相對url寫的html文件用不看更新其中的url(只要它們的相對關系沒有改變)。但如果你用絕對url編寫html，你就不得不逐字修改每個鏈接指針中的url，這是一件很乏味也很容易出錯的工作。
對于各個資源之間沒有固定的關系，比如你的html文件是介紹各大學情況的，它所指向的目標分布在全球的主機中，這時你就只能用絕對url了。
在本章的末尾，作者給出一個完整的html文件，該文件使用了前三章介紹的全部元素，以便于讀者理解。
§3.3 標記一個目標
上節提到的鏈接指針可以使讀者在整個Interner網上方便地鏈接。但如果你編寫了一個很長的html文件，從頭到尾地讀很浪費時間，能不能在同一文件的不同部分之間也建立起鏈接，使用戶方便地在上下方之間跳轉呢？答案是肯定的。前面曾提到過一個超文本鏈接指針包括兩個部分，一個指向目標的鏈接指針，另一個是被指向的目標。對于一個完整的文件，我們可以用它的url來唯一地標識它， 但對于同一文件的不同部分，我們怎樣來標識呢？下面的內容將介紹鏈接指針元素的另外的一個用途，標識目標。
標識一個目標的方法為：
<a name="name">text<／a>
name屬性將放置該標記的地方標記為“name”，name是一個全文唯一的標記串，text部分可有可無。這樣，我們就把放置標記的地方做了一個叫做“name”的標記。
做好標記后，可以用下列方法來指向它，<a href="url#name">text </a>
url是放置標記的html文件的url name是標記名，對于同一個文件，可以寫為<a href="#name">text </a>
這時就可以點取text跳轉到標記名為name的部分了。
§3.4 目標窗口
如果希望被指向的目標在一個新的窗口中顯示，可以使用target屬性來修飾鏈接指針元素。
<a href="url" target="window-name">text </a>
將url代表的資源顯示在一個新的窗口中，該窗口的名字叫window-name。
§3.5 圖象鏈接指針
圖象也可以做為鏈接指針。格式為：<a href="url"><img src="url"></a>
可以看出，上例中用<img src="url">取代了鏈接指針中text的位置。
<img src="url">是圖象元素，它表明顯示url代表的圖象文件，參見圖象一章。
下面是一個簡單的圖象鏈接指針。
總結
- 上一篇： Http请求报头设置(C#)
- 下一篇： 一个优雅的占位图解决方案。适用于 UIT