1. HTML

1.1. HTML概述

1.1.1. HTML是什麼

Html(HyperText Mark-up Language)就是超文本標記語言的簡寫，是最基礎的網頁語言。

Html是由w3c組織發佈的，到目前爲止，已經發展出多個 HTML 版本，其中包括html，html+，html2.0，html3.2，html4.01，html5等各種各樣版本。其中較重要的版本包括html4.01和html5。

可以登錄w3cschol網站 http://www.w3school.com.cn/ 查看最新的web技術。

實驗：查看網頁的源代碼

1.1.2. HTML基本結構

Html是通過標籤來定義的語言，代碼都是由標籤所組成。

Html代碼不用區分大小寫。

Html代碼由<html>開始</html>結束。裏面由頭部分<head></head>和體部分<body></body>兩部分組成。

頭部分是給Html頁面增加一些輔助或者屬性信息，它裏面的內容會最先加載。

體部分是真正存放頁面數據的地方。

練習：第一個HTML頁面

練習：修改頁面標題

1.1.3. HTML語法細節

多數標籤都是有開始標籤和結束標籤，也有個別標籤因爲只有單一功能，或者沒有要修飾的內容可以在標籤內結束。

標籤通常可以具有屬性，通過對屬性值的改變，控制標籤具體功能效果。

屬性與屬性值之間用“=”連接，屬性值可以用雙引號或單引號或者不用引號，一般都會用雙引號。

格式：

<標籤名屬性名="屬性值"> 數據內容 </標籤名>

<標籤名屬性名='屬性值'> 數據內容 </標籤名>

<標籤名屬性名=屬性值 />

Html中註釋的格式爲：

練習：html頁面中的換行

1.2. 字體標籤

1.2.1. Font標籤(瞭解)

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

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

圖-1

Size，範圍爲1-7，默認是3，也可以-2~+4

1.2.2. 標題標籤

因爲標題是文本中常用的內容，爲了方便操作而定義的。其實就是某個字號和粗體的組合。

1.2.3. 特殊字符

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

字符	轉義字符	字符	轉義字符
"	"	'	'
<	<	>	>
空格		&	&
®	®	©	©

1.2.4. 顏色表示

color rgb(x,x,x) #xxxxxx colorname 不贊成使用。請使用樣式取代它。規定文本的顏色。

size number 不贊成使用。請使用樣式取代它。規定文本的大小。 px 值爲1~7(或-2~+4)

face font_family 不贊成使用。請使用樣式取代它。規定文本的字體。

1.3. 列表標籤

1.3.1. 定義列表(瞭解)

<dt>：上層項目

<dd>：下層項目

例：

<dl>

</dl>

效果，如圖-2所示：

圖-2

1.3.2. 有序列表(瞭解)

例：

<ol>

<li>Coffee</li>

</ol>

效果:

如圖-3所示：

圖-3

1.3.3. 無序列表

例：

<ul>

<li>Coffee</li>

</ul>

如圖-4所示：

圖-4

1.4. 圖像

1.4.1. Img

如圖-5所示：

圖-5

1.5. 超鏈接

1.5.1. 超鏈接概述

<a> 標籤可定義錨。錨 (anchor) 有兩種用法：

通過使用 href 屬性，創建指向另外一個文檔的鏈接（或超鏈接）

通過使用 name 或 id 屬性，創建一個文檔內部的書籤（也就是說，可以創建指向文檔片段的鏈接），如圖-8所示：

圖-8

1.5.2. 鏈接資源<a href=””>

例：

href屬性值可以是url，也可以是本地文件，也可使用其他協議如mailto、thunder等等。

target屬性是指定在哪個窗口或者幀中打開。

1.5.3. 定位標記

一般在本頁面中使用，當網頁內容過長，定位標記會比拖動滾動條方便快捷。

注：定位標記要和超鏈接結合使用纔有效。

例：

<a href=”#標記”>返回標記位置</a>

注：使用定位標記時一定在href值的開始加入#標記名。

1.6. 表格

1.6.1. table

<table> 標籤定義 HTML 表格。

簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成。

tr 元素定義表格行，th 元素定義表頭，td 元素定義表格單元，如圖-6所示：

圖-6

1.6.2. caption

<caption>Monthly savings</caption>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

</tr>

</table>

如圖-7所示：

圖-7

1.7. 表單

1.7.1. form

表單標籤是最常用的標籤，用於與服務器端的交互，如圖-11所示：

圖-11

先定義form表單中的action屬性值，指定表單數據提交的目的地(服務端)。

明確提交方式，通過指定method屬性值。如果不定義，那麼method的值默認是get。

get和post這兩種最常用的提交方式的區別：

(1)get提交將數據顯示在地址欄，對於敏感信息不安全。

post提交不顯示在地址欄，對於敏感信息安全

(2)地址欄中存放的數據是有限，所以get方式對提交的數據體積有限制。

post可以提交大體積數據。

(3)對提交數據的封裝方式不同：

get：將提交數據封裝到了http消息頭的第一行，請求行中。

post：將提交的數據封裝到消息頭後，在請求數據體中。

1.7.2. input

如圖-12所示：

圖-12

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

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

radio 單選框如：性別選擇。

checkbox 複選框如：興趣選擇。

hidden 隱藏字段在頁面上不顯示，但在提交的時候隨其他內容一起提交。

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

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

button 按鈕可以爲其自定義事件。

file 文件上傳後期擴展內容，會自動生成一個文本框，和一個瀏覽按鈕。

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

1.7.3. textarea

在w3school，你可以找到你所需要的所有的網站建設教程。

</textarea>

如圖-13所示：

圖-13

1.7.4. select option

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

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

<option value ="volvo">Volvo</option>

</select>

如圖-14所示：

圖-14

WEB-1_XML