1. HTML簡介

1.1. HTML超文本標記語言

HTML能用來做什麼

如果你要製作網站的話，學習HTML是不可避免的。HTML是用來製作網站的

HTML是Internet上用於設計網頁的主要語言,網頁可以由文本,圖片,動畫等內容組成,基礎架構都是HTML. 從事網頁製作或者相關工作,就要學習HTML

HTML是“HyperText Mark-up Language（超文本標記語言）”的縮寫

要製作網頁,就需要使用超文本標記語言編寫以.html 或者.htm結尾的文件

1.2. 人物簡介

Tim Berners-Lee蒂姆·伯納斯·李是HTML創始人，www之父，w3c創始人

HTML

HTML是由一名叫蒂姆·伯納斯·李的科學家發明的。他發明HTML的目的，是爲了方便世界各地的物理學家們可以更容易地獲取彼此的研究文檔。

蒂姆·伯納斯-李爲使世界各地的物理學家能夠方便的進行合作研究，在1982年發明了HTML。HTML取得了的巨大成功，大大超出了蒂姆·伯納斯-李的原本預計,後來成爲國際標準，由萬維網聯盟（W3C）維護。

HTML是一門語言, 它令我們可以在因特網上展示信息（例如科學研究信息）。

瀏覽器

在1990年, 蒂姆·伯納斯·李在日內瓦的歐洲粒子物理實驗室裏開發出了世界上第一個網頁瀏覽器。我們所看到的網頁，是瀏覽器對HTML進行解釋的結果。

WWW(萬維網)

也叫做“Web”、“WWW” 中文叫做萬維網。也叫環球信息網.

有了網頁,有了顯示網頁的瀏覽器,如何獲取網頁,如何發佈網頁. 蒂姆·伯納斯·李在瑞士的歐洲粒子物理實驗室發明了World Wide Web，即我們熟悉的WWW 簡單來說: 它允許用戶在一臺計算機上通過互聯網存取另一臺計算機上的信息(網頁)。

萬維網

WWW是一個資料空間。在這個空間中一樣有用的事物，稱爲一樣“資源”；並且由一個叫做“統一資源標識符”（URI）來標識。這些資源通過超文本傳輸協議(Hypertext Transfer Protocol）傳送給使用者，而後者通過點擊鏈接來獲得資源。

簡單的說WWW就是一個世界性的信息庫。在這個信息庫中，信息不僅能被全球的人們存取，而且能輕鬆地鏈接到其他地方的信息，使用戶可以方便快捷地獲得重要的信息。

W3C

萬維網聯盟（World Wide Web Consortium，簡稱W3C），又稱W3C理事會。1994年10月蒂姆·伯納斯·李在麻省理工學院計算機科學實驗室成立了該組織。

萬維網聯盟是國際著名的標準化組織。1994年成立後，至今已發佈近百項相關萬維網的標準，對萬維網發展做出了傑出的貢獻。

備註：www.w3c.org

1.3. HTML體驗

打開瀏覽器：輸入www.baidu.com

在頁面處鼠標右鍵查看頁面源代碼

1.4. HTML運行原理

使用記事本編寫一個簡單的頁面進行體驗。

運行原理

本地運行：直接通過瀏覽器打開本地以.Html後綴的文件。

遠程訪問（Tomcat）通過瀏覽器，輸入打開web服務器上的文件。

1.5. 開發HTML

需要使用HTML編輯工具開發HTML頁面：

一:基本文本編輯軟件：如記事本、Editplus等

二:所見即所得軟件：如dreamweaver Aptana 等

2. HTML的語法

HTML是一門標記語言,用於控制頁面結構,HTML 通過標記告訴了瀏覽器以什麼方式或者結構顯示內容,作爲初學者掌握HTML的一些常用標記是必要的.

2.1. 標記（標籤）

2.1.1. <> </>

HTML用於描述功能的符號稱爲“標記”。如“HTML”、“BODY”、“TABLE”等。

標記是由W3C組織定義好的並具有特定的含義的符號.

格式：

標記在使用時必須用尖括號“<>”括起來，而且是成對出現，無斜槓的標記表示該標記的作用開始，有斜槓的標記表示該標記的作用結束。

所以應當遵循：<開始標籤> 標籤體 </結束標籤>

特點

標籤的特點：不區分大小寫，標籤名是固定的。

例如<TABLE>表示一個表格的開始，</TABLE>表標一個表格的結束。如<TABLE>和<table>都是表示一個表格的開始。不區分大小寫。

2.1.2. 標籤分類

帶標籤體的標籤如： <p> XX </p>

不帶標籤體的標籤如： <br/>

2.1.3. 標籤屬性

寫在開始標籤上的名=“值”對代表該標籤的屬性 <font color=“red”></font>。

一個標籤可以有多個屬性，多個屬性之間使用空格隔開。

注意：屬性值最好使用單引號或者雙引號引起來。

注意事項：

1:所有標記都要用<> 尖括號括起來

2:成對出現的標記,最好開始和結束標記同時寫完.

3:HTML中不區分大小寫

4: 5:標記中不要有空格.

錯誤的例子：

<html>

<head>

<title>這是我的第一個網頁</title>

</head>

<body>

< a href="http://gz.itcast.cn" target="_blank">廣州傳智播客</a>

</body>

</html>

標籤 <a> 開頭多了空格。

2.2. HTML註釋

2.3. HTML正文

HTML正文分爲文檔頭和文檔體兩部分。文檔頭<head> 可以定義標題,關鍵字等等.文檔體<body> 定義要將要顯示在瀏覽器中的各種信息。

案例：

<html>

<head>

<title>這是我的第一個html</title>

</head>

<body>

<p>HelloWorld</p>

<body>

</html>

註釋：

<html> 與 </html> 之間的文本描述網頁

<head> 與 </head> 之間的用於定義文檔的頭部

<title> 與 </title> 定義文檔的標題

<body> 與 </body> 之間的文本是可見的頁面內容

<p> 與 </p> 之間的文本被顯示爲段落

2.3.1. 文件頭<head>

一個完整的html文件包括頭部文件(head)和文件主體(body),頭部標記是<head></head>。在這對標記中的內容爲頭部內容,HTML中的頭部內容不直接在網頁上顯示。

可以用在 head 部分的標籤：<title>,<base>, <link>, <meta>, <script>, <style>, 以及文本標籤

例如: title

代碼：

<html>

<head>

<title>這是網頁的標題</title>

</head>

<body>

</body>

</html>

本例中：在<head><head>標籤中中包含了<title></title> 標籤。<title>中的內容是網頁的標題,沒有顯示在網頁中,顯示在了網頁的標題欄上。

2.3.2. 文件體<body>

我們可以可以直接在body中添加文件並編輯內容

<html>

<head>

<title>這是網頁的標題</title>

</head>

<body>

hello,world

</body>

</html>

可以改變顏色的背景

<html>

<head>

</head>

請看: 改變了顏色的背景。

</body>

</html>

可以添加背景圖片

<html>

有了背景圖片

</body>

</html>

style="background-repeat:no-repeat;(不平鋪)

background-position:center;(定位居中)

background-attachment:fixed" (絕對定位)

但是這樣的文本內容是用瀏覽器打開後沒有任何的效果，想要換行，想要段落，等等怎麼辦？就需要學習文本標籤了。

2.4. 文本標籤

2.4.1. 標題(h1~h6)

<h1> - <h6> 標籤可定義標題<h1> 定義最大的標題。<h6> 定義最小的標題。

<html>

<body>

<h1>廣州傳智播客 1</h1>

<h2>廣州傳智播客 2</h2>

<h3>廣州傳智播客 3</h3>

<h4>廣州傳智播客 4</h4>

<h5>廣州傳智播客 5</h5>

<h6>廣州傳智播客 6</h6>

</body>

</html>

注意：標題標籤用於標題文本。不要僅僅爲了產生粗體文本而使用它們。

2.4.2. 段落(p)

<p> 標籤定義段落。p 元素會自動在其前後創建一些空白。

<html>

<body>

<p>這是段落一。</p>

<p>這是段落二。</p>

<p>這是段落三。</p>

<p>段落元素由 p 標籤定義。</p>

</body>

</html>

屬性:title

例如: <p title="段落的說明">這是一個段落</p

2.4.3. 段落縮進(blockquote)

<html>

<body>

這是長的引用：

孫子曰:兵者，國之大事，死生之地，存亡之道，不可不察也。故經之以五事，校之以計，而索其情：一曰道，二曰天，三曰地，四曰將，五曰法。兵者，詭道也。

故能而示之不能，用而示之不用，近而示之遠，遠而示之近。</blockquote>

這是短的引用：孔子曰:

<q>三人行必有我師</q>

<p>使用 blockquote 元素的話，瀏覽器會插入換行和外邊距，而 q 元素不會有任何特殊的呈現。</p>

</body>

</html>

使用 blockquote 元素的話，瀏覽器會插入換行(兩個br)和外邊距( )，而 q 元素不會有任何特殊的呈現。

關於：q

<html>

<body>

孔子曰:

<q>三人行必有我師</q>

<br />

孔子曰:三人行必有我師

</body>

</html>

2.4.4. 上下標(sup和sub)

Superscript 上標

Subscript 下標

當需要在網頁中顯示：

x₁=1

2³=8

的文本時，可以使用上下標

<html>

<body>

</body>

</html>

<sub> 標籤可定義下標文本。 Subscript 下標

<sup> 標籤可定義上標文本。 Superscript 上標

2.4.5. 換行(br)

<br> 回車換行

<br> 可插入一個簡單的換行符。br標記沒有任何內容,作用就是換行,所以是空的.由於沒有內容所以只寫一個<br>即可。

例如:

<html>

<body>

中國<br />

美國<br />

日本<br />

俄羅斯<br />

</body>

</html>

2.4.6. 原樣輸出(pre)

pre 元素可定義預格式化的文本。

<html>

<body>

<pre>

class Demo{

public static void main(String[] args){

System.out.println("hello,world");

}

</pre>

<p>pre 標籤很適合顯示計算機代碼：</p>

<pre>

for (int i = 1; i<10;i++){

System.out.println("hello,world");

}

</pre>

</body>

</html>

2.4.7. 線條(hr)

水平分隔線（horizontal rule）可以在視覺上將文檔分隔成各個部分

可以通過屬性設置線條的顏色,粗細,寬度,對齊方式.

color="#FF0000" size="5" width="400" align="left"

<html>

<body>

<p>hr 標籤定義水平線：</p>

<hr />

<hr />

<hr />

</body>

</html>

2.4.8. 文本列表(ul和ol)

列表標籤：<dl>

<dt>：上層項目

<dd>：下層項目

<dl>

</dl>

效果：

列表中項目符號對應的標籤

<ul>：符號標籤（○●■）

<ol>：數字標籤（a A 1 i I）

<li>：具體項目內容標籤。此標籤只在<ol> <ul>中有效。

<ul> 默認的是●

<html>

<body>

<h4>一個無序列表：</h4>

<ul>

</ul>

</body>

</html>

通過type屬性更改項目符號可以更改項目符號，分別顯示○●■

<html>

<body>

<h4>Disc 項目符號列表：</h4>

</ul>

<h4>Circle 項目符號列表：</h4>

</ul>

<h4>Square 項目符號列表：</h4>

</ul>

</body>

</html>

嵌套列表：

<html>

<body>

<h4>一個嵌套列表：</h4>

<ul>

<li>茶

<ul>

</ul>

</li>

</ul>

</body>

</html>

數字編號

<ol>

<li>Coffee</li>

</ol>

案例：可以使用數字，字母，羅馬字母等進行編號。

<html>

<body>

<ol>

</ol>

</ol>

<h4>小寫字母列表：</h4>

</ol>

<h4>羅馬字母列表：</h4>

</ol>

<h4>小寫羅馬字母列表：</h4>

</ol>

</body>

</html>

2.4.9. 字體(font)

設置文字的字體,字號,顏色

例：<font size=5 color=red>字體標籤示例</font>

簡單顏色可是直接寫對應的英文，複雜顏色用16進製表示，表現形式#FF0000兩個數爲一組，按紅，綠，藍排列，如：#00FF00表示綠色。建議用工具選取。

<html>

<body>

<h1><font face="Courier New" ,size="6" ,color="#00aaaa">hello,world</font>

</h1>

<p></p>

</body>

</html>

2.5. 特殊字符

如何在HTML 中空格? 在html中空格無效,想要實現空格有專用標記,例如:

如果要在網頁上顯示一些特殊符號，比如< > & 等。因爲這些符號在代碼中會被瀏覽器識別並解釋，所以用一些特殊的方式來表示。

<	<	>	>	&	&
"	“	®	®	©	©
™	™		空格

2.6. 表格標籤

我們可以將表單想象爲網格,表由行和列組成.

<table>標記表示表格,以<table>開始以</table>結束

<caption>標題標籤,給表格提供標題。

<th> 表頭標籤一般對錶格的第一行或者第一列進行格式化，就是粗體顯示。並不常用。

<tr> 行標籤

<td> 單元格標籤, 加載行標籤的裏面。可以簡單理解爲，先有行，在行中在加入單元格。

2.6.1. 簡單的表格

<body>

<table>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

效果如下:

2.6.2. table的border屬性

我們可以做在table中使用 border 以像素爲單位,會在單元格和表的周圍創建邊框.如果將該值設置爲0,或者沒有使用該屬性,就會出現上述的效果.

<tr>

</tr>

<tr>

</tr>

</table>

效果:

2.6.3. table的width 屬性

該屬性可以指定表的寬度,單位是像素或者百分比.區別在於百分比百分比可以讓

表格的寬度隨瀏覽器窗口的大小變化

<tr>

</tr>

<tr>

</tr>

</table>

效果:

2.6.4. table的align屬性:

可以指定 center left right

<tr>

</tr>

<tr>

</tr>

</table>

指定center會顯示在瀏覽器中間.

注意:也可以通過 bordercolor 屬性設置邊框顏色

2.6.5. <caption>標籤添加表頭標題

<body>

員工信息表

</caption>

<tr>

</tr>

<tr>

</tr>

</table>

效果:

2.6.6. <th>表頭標籤

粗體顯示並居中.

<body>

員工信息表

</caption>

<tr>

</tr>

<tr>

</tr>

</table>

效果如下:

2.6.7. <tr>的align 屬性

可以指定該行中所有單元格的內容的位置.

員工信息表

</caption>

<tr >

</tr>

</tr>

</table>

效果如下:

2.6.8. <table>標籤的cellspacing

單元格間距,單元格和邊框之間的空格,單位是像素或者百分比

員工信息表

</caption>

<tr >

</tr>

<tr >

</tr>

</table>

效果如下:

2.6.9. <table>標籤的cellspadding

單元格的邊和它的內容之間的間隔,單位是像素或者百分比

員工信息表

</caption>

<tr >

</tr>

<tr >

</tr>

</table>

效果如下:

2.6.10. 合併列colspan

合併列合併單元格

<td>和<th> 的colspan屬性

colspan屬性用於指定一個單元格將跨越的列的數量.

效果:

2.6.11. 合併行rowspan

<td>和<th> 的rowspan屬性

<tr >

</tr>

<tr >

</tr>

<tr >

</tr>

</table>

效果如下:

注意：

每個表格可以有一個表頭、一個表尾和一個或多個表體（即正文），分別以THEAD、TFOOT和TBODY元素表示。

THEAD、TFOOT包含關於表格列的信息。

TBODY作用是：可以控制表格分行下載，從而提高下載速度。（網頁的打開是先表格的的內容全部下載完畢後，才顯示出來，分行下載可以先顯示部分內容，這樣會減少用戶等待時間。）

使用TBODY的目的是可以使得這些包含在內的代碼不用在整個表格都解析後一起顯示，就是說如果有多個行，那麼如果得到一個TBODY行，就可以先顯示一行。

TBODY這個標籤可以控制表格分行下載，當表格內容很大時比較實用，在需要分行下載處加上<tbody>和</tbody>。

以下表格的書寫可以提高表格在下載的顯示效率

<html>

<head>

</head>

<body>

<caption>表格的標題</caption>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

<td>XML基礎</td>

</tr>

</tbody>

<tfoot>

<tr>

</tr>

</tfoot>

</table>

</body>

</html>

效果如下:

2.7. HTML表單

表單，在網頁中主要負責數據採集的功能，比如你可以採集訪問者的名字和e－mail地址、調查表、留言簿等等。

表單以<form> 開始,以</form>結束,主要有一些表單控件(文本輸入框,密碼框,單選框,複選框,下拉列表,文本域,提交按鈕等)

2.7.1. <form>的Action屬性

action屬性表明提交表單時如何處理數據,通常用戶註冊完表單時,需要數據提交給web服務器,就需要將action的值定義爲服務器的url

2.7.2. <form>的method屬性:

將表單數據提交給服務器的方式有2種,get 和post

get 方法它將數據作爲URL的一部分進行發送

post方法,將數據隱藏發送.

2.7.3. 常見的表單控件

2.7.4. input標籤

l type 屬性

指定創建的輸入控件的類型,例如文本框是text 密碼是password

單選是radio多選是checkbox 上傳文件時file

name 屬性

用戶輸入的值對應的名稱,會以name=用戶輸入值的形式發送給服務器.

value 文本輸入框的默認顯示信息

size 指定文本輸入框的寬度,字符爲單位.

2.7.5. 文本字段

例如: google 主頁的文本輸入框.

如何在網頁中做出一個文本框?需要使用input 標籤,並且將input的屬性值設置爲text.

輸入的文本信息直接顯示在框中。

例如: <input type=“text” name=“” value=“”/>

2.7.6. 密碼字段

input的屬性值設置爲password.

password。輸入的文本以原點或者星號的形式顯示。

注意:雖然密碼在屏幕上是隱藏的,但是他們仍然是以純文本形式發送的.

2.7.7. 單選按鈕

input的屬性值設置爲radio 例如：性別選擇。

單選按鈕需要使用相同的名稱,這樣一次就只能選擇一個選項.也就是相同name的radio只能選一個

上傳數據需要使用name 和value屬性.

注意:同一個組中的單選按鈕name應該一直, 使用value區分.

2.7.8. 多選按鈕

input的屬性值設置爲checkbox 如：興趣選擇。

上傳數據需要使用name 和value屬性

注意：同一個多選範圍的，應該使用同一個name,每個具體選項指定具體的value.

2.7.9. 文件選擇框

Input 的屬性值爲file

需要上傳文件到服務器,需要使用文件選項框會自動生成一個文本框，和一個瀏覽按鈕。

2.7.10. 下拉列表

<select>：選擇標籤提供用戶選擇內容。如：用戶所在的省市。size 屬性爲顯示項目個數。

<option>：子項標籤屬性 selected 沒有屬性值，加在子項上，其中一個子項上，子項就變成默認被選項。

服務器如何獲取該下拉列表數據:

需要給select 中添加name屬性.在每個option中添加value屬性.即可

2.7.11. 文本輸入域

如果希望用戶輸入多行文本信息,就需要使用文本域.

<textarea>如：個人信息描述

<textarea> 的屬性

name 該文本域的名稱.

rows 指定文本域大小,指定行數.

Cols 指定文本域大小,指定列數.

提交數據需要給指定文本域的name屬性

name=文本信息.

2.7.12. 按鈕

按鈕通常用於提交表單,也可以清除表單.可以使用三種形式創建按鈕

使用<input>元素,type屬性值設置爲 submit reset

提交按鈕 submit 用於提交表單中的內容。

重置按鈕 reset 將表單中填寫的內容設置爲初始值。

圖像 image 它可以替代submit按鈕。

按鈕的屬性:

name 設置按鈕的名稱

value 按鈕上顯示的文本

size 按鈕的寬度,像素爲單位.

使用圖像作爲按鈕:

可以使用圖像作爲按鈕,例如

2.7.13. 隱藏字段hidden

有時候需要頁面傳遞信息不希望用戶看到,可以使用隱藏字段,在頁面上不顯示，但在提交的時候隨其他內容一起提交。

2.7.14. 代碼

<form>

用戶名:

<br />

密碼:

<br/>

性別:

男

女

<br/>

愛好:

吃飯

睡覺

看電影

<br>

城市:

</select>

<br/>

上傳文件:

</input>

<br/>

自我介紹:

<br />

<br/>

</form>

2.7.15. 表單提交數據

需要指定form表單的actin屬性

form表單的actin屬性

一般是表單提交的服務器

form表單的method屬性

可以是get 和post

get 可以再地址欄中看到用戶提交的數據以鍵值對形式.

服務器如何識別用戶提交的數據?

我們需要給所有的控件起名字就是input的name屬性

input中的name屬性.

例如: 用戶名 name=”username”

密碼框 name=”pwd”

　如果默認不填傳遞的字符串是空.

注意: 由於性別和興趣等是單選框和多選框,name屬性的值一樣,必須一樣,纔可以實現單input的value屬性

例如:單選和多選.性別的input 的name屬性都是 name=”gender”; 服務器如何區分用戶選擇的數據,很顯然,我們需要給每個選項定義一個值,這就是屬性value

當用戶選擇具體的選項時,會向服務器傳遞 name =value 的形式.

value 值確定了要向服務器傳遞具體的值.

select 的name屬性

同樣道理,列表中的選項是不固定的,我們也需要給每一個具體的option 都定義一個值.同時在selct 中使用name屬性. 如果用戶有了具體的選擇,那麼向服務器發送的數據就是 name=value 的形式.

代碼:

姓名:

<br />

密碼:

<br />

性別: 男

女

<br />

愛好: 吃飯

睡覺

看電影

<br />

城市:

<option value="">請選擇城市</option>

</select>

<br />

文件路徑:

自我介紹:

<br />

<br />

</form>

效果如下：

提交數據:

GET

POST

最後使用

<fieldset> <lengend> 元素來結構化表單

<fieldset> 元素用於創建邊框

<lengend> 元素用於爲<fieldset>指定一個標題

代碼:

<legend>註冊新用戶:</legend>

姓名:

<br />

密碼:

<br />

性別: 男

女

<br />

愛好: 吃飯

睡覺

看電影

<br />

城市:

<option value="">請選擇城市</option>

</select>

<br />

文件路徑:

自我介紹:

<br />

<br />

</fieldset>

</form>

效果如下:

2.8. HTML超鏈接

2.8.1. 鏈接標籤

<a></a>

2.8.2. 基本連接

通過標籤<a>和<a/>和在<a>和<a/>中的文本組成連接內容,用戶在瀏覽器中可以點擊.

超鏈接格式： <a href="e:/itcast/a.html"></a>

2.8.3. 連接到其他文檔

<a>標籤的屬性href

使用<a> 標籤開始, 需要使用屬性href

href 屬性的值是連接目的頁面的地址.

例如:

</head>

<body>

</body>

</html>

效果:

點擊百度一下就會跳轉到百度頁面

<a>標籤的屬性title

title 屬性的值能夠描述連接的目的頁面.

<body>

</body>

<a>標籤的target屬性:

該屬性指定連接指定的頁面應當以和彙總方式在哪一個窗口中打開,如果想要再新窗口中打開,需要經target屬性的值設置爲_blank

target="_self"默認。在相同的框架中打開被鏈接文檔。

2.8.4. 連接到e-mail

郵件格式： <a href="mailto:email"></a>

使用<a>標籤,使用href 屬性,但是href屬性的值要以關鍵字mailto 開頭.然後是右鍵地址.

<body>

<a href="mailto:[email protected]" title="發送郵件">發送郵件[email protected]</a>

</body>

打開QQ:

<a href="tencent://message?uin=1299148007">QQ聯繫我</a>

啓動迅雷:

2.8.5. <a>錨鏈接

錨鏈接：<a name=“標記名”></a> 和 <a href="#標記名"></a>

普通的連接,連接會從一個頁面到達另外一個頁面.如果頁面很長,希望連接頁面的特定部分.就可以使用錨鏈接.

例如: 長頁面底部的返回頂部連接

可以使用<a>標籤創建目的錨.需要使用到name 和id屬性

<h1 id="top">鏈接和導航</h1>

2.8.6. 連接的目標位置

URL : 統一資源定位符, 也被稱爲網頁地址

URL組成: http://www.itcast.cn

模式:

Http://

表示連接到URL的類型,Web頁面使用HTTP協議傳遞信息,所以就是以http://開頭.

模式:

HTTP: //超文本傳輸協議(HTTP)向web服務器請求頁面,並將頁面從web服務器發送回瀏覽器.

HTTPS:// 安全的超文本傳輸協議,使用數字證書加密在瀏覽器和web服務器之間發送數據

FTP:// 文件傳輸協議.上傳和下載文件

file:// 文件位於本地硬盤或者局域網中.

主機地址:

www.itcast.cn

主機地址是Web站點的地址. 主機地址可以是ip地址也可以是域名.

文件路徑:

文件路徑以/ 開始.可能是包含一個或者多個目錄名

每個目錄名以/隔開.

例如: http://gz.itcast.cn/gz/java/course.shtml

2.9. 圖像標籤

使用<img> 標籤將圖像添加到網頁中,該標籤要使用src屬性指定圖片的來源,並且需要附帶alt屬性. alt屬性是用於,當用戶加載圖片失敗時顯示的文字信息.

圖像標籤格式： <img src="" alt="“ title=“” width=“”/>

1. src屬性

a) src=”url”;

可以是相對路徑也可以是絕對路徑.

2. alt屬性

圖片說明,由於瀏覽器無法下載圖片,找不到圖片,就會顯示該信息.

3. align屬性

圖像的對其方式,

left right top 等

4. border屬性

指定圖像的邊框的寬度,以像素爲單位

例如 border=”2”;

5. height和width屬性

指定圖像的高度和寬度,以像素爲單位

height=”100”
width=”50”;

1. 圖像地圖：<map>

應用：當要在圖像中選取某一部分作爲鏈接的時候。如：中國地圖每個省所對應的區域。

map標籤要和img標籤聯合使用。Href是超連接

</map>

2.10. 框架

3. 框架標籤：<frameset>

注：框架標籤不可以放到<body>，一般爲了代碼的可讀性，會到<head>和<body>之間。

例：

</frameset>

這段代碼會需要已經存在的3個html頁面，分別是：1.html,2,html,3.html

效果：

注：當框架大小不想被鼠標拖動而改變，可以在frame標籤中加入noresize屬性，這個屬性沒有屬性值，稱爲標記屬性，加上就爲固定。在XHTML的規範中，所有的屬性都要有屬性值，那麼標記屬性的屬性值就是自身，如：noresize=”noresize”

4. 畫中畫標籤：<iframe>

很遺憾，畫中畫你沒有看到，因爲你的瀏覽器不支持iframe標籤。

</iframe>

屬性: src="../success.html" frameborder="1" height="300" width="400" scrolling="no"

框架標籤現在不是很常用，佈局都用div+css+table。框架很少使用了。

3 HTML版本

超文本置標語言（第一版）——在1993年6月作爲互聯網工程工作小組（IETF）工作草案發布（並非標準）

HTML 2.0——1995年11月作爲RFC 1866發佈，在RFC 2854於2000年6月發佈之後被宣佈已經過時

HTML 3.2——1996年1月14日，W3C推薦標準

HTML 4.0——1997年12月18日，W3C推薦標準

HTML 4.01（微小改進）——1999年12月24日，W3C推薦標準

ISO/IEC 15445:2000（“ISO HTML”）——2000年5月15日發佈，基於嚴格的HTML 4.01語法，是國際標準化組織和國際電工委員會的標準。

HTML 5現在仍處於發展階段,用於取代1999年所制定的 HTML 4.01 和 XHTML 1.0 標準的 HTML 標準版本但由於HTML5並沒有正式發佈所以目前最新版仍爲HTML 4.01,

不過現在最新的瀏覽器支持部分html5的標籤與屬性了。

4文檔類型的聲明

DOCTYPE是document type(文檔類型)的簡寫，用來說明你用的XHTML或者HTML是什麼版本。其中的DTD叫文檔類型定義，裏面包含了文檔的規則，瀏覽器就根據你定義的DTD來解釋你頁面的標識，並展現出來。要建立符合標準的網頁，DOCTYPE聲明是必不可少的關鍵組成部分；

<!DOCTYPE>聲明位於文檔中的最前面的位置，處於 <html> 標籤之前。此標籤可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規範。

該標籤可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文檔。

簡單來說:<!DOCTYPE> 聲明可以幫助瀏覽器正確地顯示網頁。

文檔類型告知瀏覽器當前文檔所使用的是哪種超文本或可擴展超文本規範。

語法：<!DOCTYPE HTML PUBLIC|SYSTEM "URI" "具體的約束文檔的路徑">

特點：可以不寫

細節：要保證整個網站中所有的頁面的文檔類型聲明保持一致

例如:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Transitional(過渡)

HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。

HTML Strict DTD(嚴格)

Strict DTD(嚴格型)要求，你不能使用任何表現層(樣式)的標識和屬性。

HTML Transitional DTD(過渡)

過渡的(Transitional):要求非常寬鬆的DTD，它允許你繼續使用HTML4.01的標識。

HTML Frameset DTD(框架)

框架的(Frameset):專門針對框架頁面設計使用的DTD，如果你的頁面中包含有框架，需要採用這種DTD。

5 HTML 和XHTML

HTML語法要求比較鬆散，這樣對網頁編寫者來說，比較方便，但對於機器來說，語言的語法越鬆散，處理起來就越困難，對於傳統的計算機來說，還有能力兼容鬆散語法，但對於許多其他設備，比如手機，難度就比較大。因此產生語法要求更加嚴格的XHTML。

XHTML擴展超文本標籤語言（The Extensible HyperText Markup Language ）XHTML 的目標是取代 HTML。但是Internet上用HTML寫的網頁太多，無法替代。XHTML 與 HTML 4.01 幾乎是相同的。XHTML 是更嚴格更純淨的 HTML 版本。同時XHTML 是一個 W3C 標準。

XHTML和HMTL最主要的不同：

XHTML 元素必須被正確地嵌套。

XHTML 元素必須被關閉。

標籤名必須用小寫字母。

XHTML 文檔必須擁有根元素。

XHTML 元素必須被嵌套於 <html> 根元素中

HTML基礎學習

1. HTML簡介

1.1. HTML超文本標記語言

1.2. 人物簡介

1.3. HTML體驗

1.4. HTML運行原理

1.5. 開發HTML

2. HTML的語法

2.1. 標記（標籤）

2.1.1. <> </>

2.1.2. 標籤分類

2.1.3. 標籤屬性

2.2. HTML註釋

2.3. HTML正文

2.3.1. 文件頭<head>

2.3.2. 文件體<body>

2.4. 文本標籤

2.4.1. 標題(h1~h6)

2.4.2. 段落(p)

2.4.3. 段落縮進(blockquote)

2.4.4. 上下標(sup和sub)

2.4.5. 換行(br)

2.4.6. 原樣輸出(pre)

2.4.7. 線條(hr)

2.4.8. 文本列表(ul和ol)

2.4.9. 字體(font)

2.5. 特殊字符

2.6. 表格標籤

2.6.1. 簡單的表格

2.6.2. table的border屬性

2.6.3. table的width 屬性

2.6.4. table的align屬性:

2.6.5. <caption>標籤添加表頭標題

2.6.6. <th>表頭標籤

2.6.7. <tr>的align 屬性

2.6.8. <table>標籤的cellspacing

2.6.9. <table>標籤的cellspadding

2.6.10. 合併列colspan

2.6.11. 合併行rowspan

2.7. HTML表單

2.7.1. <form>的Action屬性

2.7.2. <form>的method屬性:

2.7.3. 常見的表單控件

2.7.4. input標籤

2.7.5. 文本字段

2.7.6. 密碼字段

2.7.7. 單選按鈕

2.7.8. 多選按鈕

2.7.9. 文件選擇框

2.7.10. 下拉列表

2.7.11. 文本輸入域

2.7.12. 按鈕

2.7.13. 隱藏字段hidden

2.7.14. 代碼

2.7.15. 表單提交數據

2.8. HTML超鏈接

2.8.1. 鏈接標籤

2.8.2. 基本連接

2.8.3. 連接到其他文檔

2.8.4. 連接到e-mail

2.8.5. <a>錨鏈接

2.8.6. 連接的目標位置

2.9. 圖像標籤

2.10. 框架

3 HTML版本

4文檔類型的聲明

5 HTML 和XHTML