相關知識瞭解：
WWW：(world wide web)：萬維網，是基於Internet的信息服務系統，官方定義爲"WWW is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents",簡而言之，WWW是一個以Internet爲基礎的計算機網絡，它允許用戶在一臺計算機上通過Internet訪問另一臺計算機上的信息。從技術上講，萬維網是Internet上那些支持WWW協議和超文本傳送協議的客戶機與服務器的集合，通過它可以訪問世界各地的超文本文件，包括文字， 圖形，聲音，動畫，資料庫以及各種內容。
Internet:是由計算機連接起來的物理網絡，它們依靠標準和固定的規則進行通信。
W3C:(world wide web consortium)：萬維網聯盟，創建於1994年，是Web技術領域最具權威和影響力的國際中立性技術標準機構。到目前爲止，W3C已發佈了200多項影響深遠的Web技術標準及實施指南，如廣爲業界採用的超文本標記語言（標準通用標記語言下的一個應用）、可擴展標記語言（標準通用標記語言下的一個子集）
ip地址：HTTP TCP/IP IP地址是指互聯網協議地址（英語：Internet Protocol Address，又譯爲網際協議地址），是IP Address的縮寫。IP地址是IP協議提供的一種 統一的地址格式，它爲互聯網上的每一個網絡和每一臺主機分配一個邏輯地址。例如：192.168.189.1
域名：IP地址是Internet主機的作爲路由尋址用的數字型標識，人不容易記憶。因而產生了域名（domain name）這一種字符型標識。
商務應用類： 電子商務 （天貓，京東）、 人才招聘 （趕集網，智聯招聘）、 網絡教育 （極客學院）、第三方支付 （支付寶）
其他類： 由於"互聯網+"概念的提出，互聯網將滲入到醫療，教育，農業等傳統行業
瞭解HTML：
分析簡單的HTML結構
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
</body>
</html>
HTML1.0~2.0 1989~1991 概念不明確
HTML3 1995 瀏覽器戰爭年代，Netscape和Microsoft都在試圖爭霸世界
HTML4 1998 瀏覽器大戰結束，萬維網協會(W3C)解救我們，他們的計劃是創建一個唯一的HTML標準。計劃的關鍵是將HTML的結構和表現分解爲兩種語言， 一種語言用於實現結構（HTML）一種語言用於表現（CSS）.
HTML4.01 1999 這段日子過得很愜意，HTML4.01在1999年閃亮登場，稱爲接下來十年中HTML"必備"版本
XHTML1.0 2001 正當我們感覺安逸的時候一個新興事物引起所有人注意，即XML。它讓HTML開始心煩意亂，最終兩者結合，XHTML1.0誕生。XHTML承諾，由於它的 嚴格，再加上它提供的一些新方法，只要遵循這個標準，WEB的所有爭端將就此平息。但是，大多數人都很討厭XHTML，Web開發人員對HTML的靈活 性更感興趣，而不是XHTML的嚴格性。
HTML5 由於沒有得到大家的祝福，這場婚姻的結局並不好，很快被HTML的新版本取代，即HTML5.它支持HTML4.01標準的大部分特性，還提供一些新特性。基於一些新特性， 如支持類似博客的元素，新的視頻和圖形功能，以及一大堆用來構建web應用的功能，HTML5註定成爲大家公認的標準。
① 可以使用.html與.htm作爲html文件的後綴名（擴展名）
② 可以使用任意文本編輯器創建HTML
2）註釋
標籤：
① 標籤用來標記內容。
② 標籤使用"<",">"包圍。
③標籤分爲成對標籤和單標籤
元素：一個元素通常是由一個開始標籤，內容，其他元素以及一個結束標籤組成的
屬性：與元素相關的特性稱爲屬性，屬性由鍵值對組成。
<元素名 屬性名="值1" 屬性名="值2"></元素名>
大多數元素都可以使用的屬性。
id 唯一標識
class 標識一類元素
style 樣式
title 描述信息
規範：元素名和屬性名都不區分大小寫。
4）文檔結構
文檔類型聲明: 版本和文檔類型聲明，版本和文檔類型聲明是對應的，文檔類型使用DTD來指定
1）嚴格的文檔類型
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
2）寬鬆的文檔類型(過渡的文檔類型)
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
3）frameset框架文檔類型
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
4）html5文檔類型
<!DOCTYPE html>
html：標識HTML文檔
head : 標識HTML文檔的頭部，可以包含該文檔的標題，文檔使用的腳本，樣式定義，元數據等信息
body：標識HTML文檔的體部，body中的內容可以顯示到瀏覽器中。
例如：
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>標題</title>
</head>
<body>
</body>
</html>
5）meta元素
定義文檔元數據
1，定義元數據關鍵字
<meta name="Author" content="briup">
<meta name="Copyright" content="版權信息">
<meta name="Description" content="描述信息">
<meta name="keywords" lang="zh-cn" content="精品圖書">
<meta name="keywords" lang="en-us" content="good book">
2，報頭規範
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
將會創建如下的消息頭
Content-Type:text/html;charset=utf-8
<meta http-equiv="Content-Languaga" content="zh-CN">
將會創建如下的消息頭
Content-Language:zh-CN
<meta http-equiv="Refresh" content="n;url=http://yourlink">
定時讓網頁在指定的時間n內跳轉到頁面http://yourlink
<meta http-equiv="Pragma" content="no-cache">
設置網頁禁用瀏覽器緩存
Pragma: no-cache可以應用到http 1.0 和http 1.1
將會創建如下的消息頭：Pragma:no-cache
<meta http-equiv="Cache-Control" content="no-cache">
設置網頁禁用瀏覽器緩存
Cache-Control: no-cache只能應用於http 1.1.
顏色由紅(R)、綠(G)、藍(B)組成，每個顏色的最低值爲0(十六進制爲00)，最高值爲255(十六進制爲FF)。十六進制值的寫法爲#號後跟三個或六個十六進制字符。
3位十六進制 6位16進制 rgb 顏色
#000 #000000 rgb(0,0,0) 黑色 black
#F00 #FF0000 rgb(255,0,0) 紅色 red
#FFF #FFFFFF rgb(255,255,255) 白色 white
2）大小 （ px 像素）
HTML 頁面結構 沒穿衣服（素顏）
CSS 頁面表現 化妝
JS 頁面動作 跳舞
<div></div>
特點：獨佔一行
h1~h6 標題
特點: ①有字體大小的設置
②文本有加粗強調設置
③上下文之間有較大間距
p 段落
特點：
①獨佔一行
②上下文之間具有距離
ul li (無序列表)
特點：
①配合使用
② ul li都獨佔一行空間
③ ul 上下文之間有很大空間
④ li與列表的樣式顯示(默認點狀)，並且由文本縮進
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
ol li (有序列表)
<ol>
<li>列表1</li>
<li>列表2</li>
</ol>
dl dt dd（自定義列表）
特點：
①dl dt dd獨佔一行空間
②dl上下文之間有很大歐諾關鍵
③dd有文本縮進
<dl>
<dt>列表標題</dt>
<dd>列表內容</dd>
<dd>列表內容</dd>
<dd>列表內容</dd>
</dl>
2)行內（內聯inline）標籤
span
特點：①最乾淨的內聯標籤（沒有任何修飾）
②不獨佔一行
a 超鏈接
特點:
①不獨佔一行
②點擊可以發生跳轉（或進行對應操作），語法顏色爲綠色
③文本具有顏色，具有下劃線，指向後光標爲手型，有狀態的色彩提示
文本修飾標籤
<u>下劃線修飾</u>
<i>斜體修飾</i>
<b>加粗</b>
<em>強調</em>
<strong>加粗</strong>
<s>刪除線</s>
<sup>上標</sup>
<sub>下標</sub>
img
src="圖片地址"
絕對路徑
http://www.baidu.com/car.jpg
http://www.briup.com/demo/one.html
<img src="http://www.baidu.com/car.jpg">
相對路徑 one.html ../a.jpg
絕對路徑： 每個網頁都有一個唯一的地址，稱爲URI 統一資源定位符，也稱爲該網頁的絕對路徑。如 http://ip:port/目錄/文件名
相對路徑： 相對於當前文檔所在的路徑 。如① ../imgs/a.jpg ②./imgs/a.jpg ③imgs/a.jpg
本地連接： file:///d:/html/index.html 。 超鏈接中不允許寫本地連接
服務器路徑： http://localhost:8888/test/index.html
1）a 超鏈接
連接狀態： ①未訪問 ②懸停 ③點擊未鬆開 ④點擊後
<a href="">內容顯示</a>
屬性：
href 定義連接的目標URI
絕對路徑：http://www.baidu.com
相對路徑：b.html
郵件地址：mailto:[email protected]
錨點 ：#mao
空連接 ：javascript:void(0);
target 定義連接的目標窗口
_blank
_parent
_self
_top
自定義目標名
title 定義連接的提示信息
type 連接到任何類型的文件以供下載
<a href="../docs/myWord.doc" type="application/msword">報名表</a>
錨點：
錨點可以讓用戶在文檔中設置標記，這些標記通常放在文檔的特定主題處或頂部，然後創建到這些錨點的連接，指向網頁中的特點位置。
例如：
<h2 id="section1">1,什麼是萬維網</h2>
<p>萬維網，是基於Internet的信息服務系統，官方定義爲"WWW is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents",簡而言之，WWW是一個以Internet爲基礎的計算機網絡，它允許用戶在一臺計算機上通過 Internet訪問另一臺計算機上的信...</p>
<a href="#section1">查看第一部分內容</a>
2）link 文檔關係連接
只能出現在head標籤中，定義了當前文檔和另一個資源之間的聯繫。通常用於鏈接到外部樣式表<link rel="stylesheet" href="style.css" type="text/css">
屬性：
href： 定義關係鏈接地址
rel: 定義當前文檔與所連接文檔之間的關係。
type: 文檔類型
3）base 基準鏈接地址
設置頁面中所有文檔相對路徑相對的基準URI。如果設定了基準鏈接地址，當前頁面中的所有相對路徑都基於該路徑
<base href="http://localhost:8888/test/">
4）圖片
1，圖片類型
適合在網站上進行快速查看的圖片格式
GIF （graphics interchange format,圖形交換格式）可以將背景設置爲透明的，圖片最多使用256中顏色，最適合顯示色調不連續或具有大面積單一 顏色的圖片，如導航條，按鈕，圖標等。由於GIF圖片中存儲的顏色信息較少，因此佔用空間極小，使用起來更方便。
JPEG（joint photographic experts group,聯合圖像專家組）最適合攝影或連續色調圖像的彩色照片，jpeg文件可以包含數百萬中顏色，保證圖片不失真。JPEG圖片無法擁有透明的背景
PNG（portable network graphics,可移植網絡圖形）PNG可以包含256種以上的顏色，並可以具有透明的背景。PNG文件可保留所有原始層，矢量，灰度， 顏色和效果信息，並且在任何時候所有元素都是可以編輯的。
2，鏈入圖片文字
<img src="" alt="">
屬性：
src : 圖片的源地址
title : 對圖片的文字說明，當用戶把鼠標放在圖片上稍作停留，alt屬性的值就會以浮動的形式顯示出來。
width : 圖片的寬度
height : 圖片的高度
alt : 當圖片文件找不到的時候顯示的文本信息
border ：圖片的邊框
align ：圖片和文字的對齊
當align值爲left時，圖片靠在最左方，周圍的文字顯示在右側上方
當align值爲right時，圖片靠在最右方，周圍的文字顯示在左側上方
當align值爲top時，圖片靠在最上方，周圍的文字顯示在上方
當align值爲bottom時，圖片靠在最上方，周圍的文字顯示在下方
hspace ：圖片的水平間距
vspace ：圖片的垂直間距
爲圖片添加鏈接
<a href=""><img src="" alt=""></a>
2，表格
1）table 定義表格
屬性：
border: 設置表格邊框線條寬度
align: 表格在頁面中對齊
width: 設置表格寬度
bgcolor:表格背景色
cellspacing: 單元格之間的間距
cellpadding: 單元格邊沿與其內容之間的距離
frame: 表格中邊框線的顯示
void 不顯示邊框
above 上邊框
below 下邊框
hsides 上下邊框
vsides 左右邊框
lhs 左邊框
rhs 右邊框
box 四個邊框
border 四個邊框
rules: 表格中分割線的顯示
none 無分割線顯示
groups 僅在列分組間和行分組間顯示分割線
rows 僅在行間顯示分割線
cols 僅在列間顯示分割線
th 定義單元格
td 定義內容單元格
屬性：
colspan 跨列(合併列)
rowspan 跨行(合併行)
align 單元格內容水平對齊
left,center,right, justify 兩端對齊
valign 單元格內容垂直對齊
top,middle,bottom, baseline 基準
對齊的繼承
1）內容自身的設置具有最高優先級
2）th,td元素的對齊設置
3）tr,thead,tfoot,tbody元素的對齊設置
4）table元素的對齊設置具有全局性
thead 表格頭
tbody 表格主體
tfoot 表格尾
3，框架文檔
一個框架文檔由四部分組成，文檔聲明，html元素，head元素，frameset元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
1）frameset 框架集
rows：用來定義將框架水平分隔爲子框架的數量和這些子框架的寬度
cols：用來定義將框架垂直分隔爲子框架的數量和這些子框架的高度。
<frameset rows="10%,90%">
<frame src="">
<frameset cols="15%,85%">
<frame src="">
<frame src="">
</frameset>
屬性
src: 設置框架的初始內容
frameborder:框架窗口邊框線
marginwidth: 在框架的邊緣和邊框的內容之間可以出現的空白（左右邊）
marginheight: 在框架的邊緣和邊框的內容之間可以出現的空白（上下邊）
srolling: 框架視圖的滾動條設置
auto 必要時提供，默認值
yes 始終提供滾動條
no 不提供滾動條
noresize: 改變框架窗口大小
name: 框架名稱，作爲該框架的標識
注意之前說的超鏈接<a>的target屬性
target: 框架目標
_blank -- 在新窗口中打開鏈接
_parent -- 在父窗體中打開鏈接
_self -- 在當前窗體打開鏈接,此爲默認值
_top -- 在當前窗體打開鏈接，並替換當前的整個窗體(框架頁)
一個對應frame名稱 -- 在對應框架頁中打開
注意 一般_parent和_top在iframe的嵌套中才會起作用
3）iframe 內聯框架
iframe允許用戶在一個文本中插入一個框架，iframe元素可以使用frame元素的所有屬性，實現功能也相同。
<body>
<iframe src="" frameborder="0"></iframe>
</body>
1.body元素中不能出現frameSet元素
2.frame不能脫離frameSet單獨使用
3.iframe基本上放在頁面的任何地方都行
一般frame和frameSet都是配合使用的,而iframe則是會單獨使用
4，表單
主要用於收集來自用戶的信息，並將收集的信息發送給服務器端處理程序處理。表單是客戶端和服務器端傳遞數據的橋樑，是用於實現與服務器互動的最主要方式。
1）form表單控件的容器
<form action="">
</form>
屬性
action 設定處理表單數據URI的地址
method 設定數據傳送到服務器的方式
get 將輸入的數據追加到action地址後面
post將輸入的數據保存到HTTP協議的報文中
name 設定表單的名稱
enctype 設定表單數據的內容類型
application/x-www-form-urlencoded 在發送前編碼所有字符（默認）
編碼方式：
1）控件的名稱和值都被轉義，空白字符使用【+】替換，保留的字符一般都是用來實現特定的目的，例如（: / ? ; @ = & 等）。非數字和字母
的字符使用%HH（這裏HH表示兩個十六進制數字，代表該字符的ASCII碼）進行轉換，
2）控件的"名稱/值"對按照它們在文檔數據流中出現的順序列出來。"名稱""值"使用"="分割，兩個"名稱/值"之間使用&隔開。
multipart/form-data 不對字符編碼。在使用包含文件上傳控件的表單時，必須使用該值。
數據分成多個部分，每個部分代表一個結構良好的控件，作爲文檔數據流的一部分，每一個部分都按照它們在文檔數據流中出現的順序依次發送到
服務器端，並且，每一部分的邊界不會出現在數據中。每一部分有一個content-desposition標題頭，它的值的格式是：
Content-Disposition:form-data;name="myControl"
text/plain 空格轉換爲 "+" 加號，但不對特殊字符編碼。
accept-charset 設置服務器端可以處理的字符編碼
2）input 基本表單控件
<input type="text">
屬性：type 控件類型
text 單行文本框
textarea 多行文本框
password 密碼框
checkbox 複選框
radio 單選按鈕
submit 提交按鈕
reset 重置按鈕
file 文件
hidden 隱藏域
image 圖像按鈕
button 普通按鈕
name：控件名稱，這個名稱將與控件的當前值形參"名稱/值"對 一同隨表單提交
value：用於設定初始化，可選。
checked ：單選框，複選框默認選中屬性
size：當前控件的初始寬度，這個寬度以像素爲單位。除非控件類型是text,password，這時寬度是整數值，表示字符的數目
maxlength:指定可以輸入的字符的最大值。適用於控件類型爲text,password。
3）button 按鈕控件
<button></button>
屬性
name 控件名稱
value 控件初始值
type 控件類型
button 普通按鈕
submit 提交按鈕
reset 重置按鈕
圖片按鈕:<button><img src="" alt=""></button>
4）select 下拉列表
<select name="" id="">
<option value=""></option>
<option value=""></option>
</select>
屬性
name: 控件名稱
size: 列表框中行的顯示數量
multiple: 是否允許多選
如果select元素不包含屬性size和屬性multiple時，表單類型顯示爲菜單
如果使用了屬性size和屬性multiple中的任意一個，則表單類型顯示爲列表框,如果有multiple的話,就表示可以多選（按住ctrl可以多選）
selected: 默認選中
option 下拉列表選項
屬性：
value: 定義控件的初始值。提交表單時，初始值會被提交給服務器。
optgroup 分組選項
<select name="" id="">
<optgroup label="大洋">
<option value="">太平洋</option>
<option value="">大西洋</option>
<option value="">印度洋</option>
</optgroup>
<optgroup label="大海">
<option value="">東海</option>
<option value="">南海</option>
<option value="">渤海</option>
</optgroup>
</select>
4）textarea 多行文本框
屬性
name: 控件名稱
rows: 定義文本框行數
cols: 定義文本框列數
warp: 是否自動換行。
off 不自動換行
hard自動硬回車換行，換行元素一同被傳送到服務器中
soft自動軟回車換行，換行元素不會傳到服務器中
5）label 爲表單控件定義標籤
一些表單控件內建有標籤，當內建有標籤時，一般使用value屬性的值作爲標籤，而另外一些表單控件沒有標籤，則直接使用文本作爲標籤來說明控件的意義。
每個label元素都要和表單控件關聯到一起
<table>
<tr>
<td><label for="username">用戶名：</label></td>
<td><input type="text" id="username" name="username"></td>
</tr>
<tr>
<td><label for="passwold">密碼：</label></td>
<td><input type="password" id="password" name="password"></td>
</tr>
</table>
6）fieldset 爲表單添加結構
一般與legend元素配合使用，fieldset元素可以包含其他的表單控件，在這些表單控件周圍畫一個方框，而legend元素可以顯示一個標籤說明被包含的這些
表單控件。
7）其他控件特性
disabled 禁用
支持該屬性的控件：button,input,optgroup,option,select,textarea
1）禁止的元素不接受節點
2）禁止的控件的值不與表單一起被提交
readonly 只讀
支持該屬性的控件：input,textarea
1）可以接受焦點，但是不能被用戶修改
2）只讀元素的值可以與表單一起被提交。
1 WWW、Internet、W3C、ip、域名
WWW：(world wide web)：萬維網，是基於Internet的信息服務系統，官方定義爲"WWW is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents",簡而言之，WWW是一個以Internet爲基礎的計算機網絡，它允許用戶在一臺計算機上通過Internet訪問另一臺計算機上的信息。從技術上講，萬維網是Internet上那些支持WWW協議和超文本傳送協議的客戶機與服務器的集合，通過它可以訪問世界各地的超文本文件，包括文字， 圖形，聲音，動畫，資料庫以及各種內容。
Internet:是由計算機連接起來的物理網絡，它們依靠標準和固定的規則進行通信。
W3C:(world wide web consortium)：萬維網聯盟，創建於1994年，是Web技術領域最具權威和影響力的國際中立性技術標準機構。到目前爲止，W3C已發佈了200多項影響深遠的Web技術標準及實施指南，如廣爲業界採用的超文本標記語言（標準通用標記語言下的一個應用）、可擴展標記語言（標準通用標記語言下的一個子集）
ip地址：HTTP TCP/IP IP地址是指互聯網協議地址（英語：Internet Protocol Address，又譯爲網際協議地址），是IP Address的縮寫。IP地址是IP協議提供的一種 統一的地址格式，它爲互聯網上的每一個網絡和每一臺主機分配一個邏輯地址。例如：192.168.189.1
域名：IP地址是Internet主機的作爲路由尋址用的數字型標識，人不容易記憶。因而產生了域名（domain name）這一種字符型標識。
com:商業組織公司 edu:教研機構 gov:政府部門 net:網絡服務商
org:非盈利組織 cn:中國 jp:日本 uk:英國
2 網站(B/S架構項目)
是構成web的基礎，指在萬維網上根據一定的規則，使用html,css,java等語言製作的用於展示特定內容的相關網頁的集合。
3 網頁
是網站中的一個頁面，是構成網站的基礎，網頁是純文本文件，但是具有一定的格式，也就是HTML語言定義的格式，由於HTML被翻譯爲超文本標記語言，因此網頁也被稱爲超文本文件，用於展示文本，圖片，影音等內容。
4 互聯網產業分類
行業服務類： 新聞資訊（網易）、 信息搜索（百度，Google）、 郵箱 （163）、 購票類 （12306）商務應用類： 電子商務 （天貓，京東）、 人才招聘 （趕集網，智聯招聘）、 網絡教育 （極客學院）、第三方支付 （支付寶）
其他類： 由於"互聯網+"概念的提出，互聯網將滲入到醫療，教育，農業等傳統行業
瞭解HTML：
1 html概念
超文本標記語言，是一種解釋執行的文本類標記語言，是Internet上用於編寫網頁的主要語言。“超文本”就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。 html也是一種規範，一種標準，它通過標記符號來標記要顯示的網頁中的各個部分。網頁文件本身是一種文本文件，通過在文本文件中添加標記符，可以告訴瀏覽器如何顯示 其中的內容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。瀏覽器按順序閱讀網頁文件，然後根據標記符解釋和顯示其標記的內容，對書寫出錯的標記不會指出其錯誤， 且不停止其解釋執行過程，編制者只能通過顯示效果來分析出錯原因和出錯部位。分析簡單的HTML結構
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
</body>
</html>
2 html發展歷程
版本 年份HTML1.0~2.0 1989~1991 概念不明確
HTML3 1995 瀏覽器戰爭年代，Netscape和Microsoft都在試圖爭霸世界
HTML4 1998 瀏覽器大戰結束，萬維網協會(W3C)解救我們，他們的計劃是創建一個唯一的HTML標準。計劃的關鍵是將HTML的結構和表現分解爲兩種語言， 一種語言用於實現結構（HTML）一種語言用於表現（CSS）.
HTML4.01 1999 這段日子過得很愜意，HTML4.01在1999年閃亮登場，稱爲接下來十年中HTML"必備"版本
XHTML1.0 2001 正當我們感覺安逸的時候一個新興事物引起所有人注意，即XML。它讓HTML開始心煩意亂，最終兩者結合，XHTML1.0誕生。XHTML承諾，由於它的 嚴格，再加上它提供的一些新方法，只要遵循這個標準，WEB的所有爭端將就此平息。但是，大多數人都很討厭XHTML，Web開發人員對HTML的靈活 性更感興趣，而不是XHTML的嚴格性。
HTML5 由於沒有得到大家的祝福，這場婚姻的結局並不好，很快被HTML的新版本取代，即HTML5.它支持HTML4.01標準的大部分特性，還提供一些新特性。基於一些新特性， 如支持類似博客的元素，新的視頻和圖形功能，以及一大堆用來構建web應用的功能，HTML5註定成爲大家公認的標準。
3 基本語法
1）特性① 可以使用.html與.htm作爲html文件的後綴名（擴展名）
② 可以使用任意文本編輯器創建HTML
2）註釋
<!-- 註釋內容 -->
標籤：
① 標籤用來標記內容。
② 標籤使用"<",">"包圍。
③標籤分爲成對標籤和單標籤
元素：一個元素通常是由一個開始標籤，內容，其他元素以及一個結束標籤組成的
屬性：與元素相關的特性稱爲屬性，屬性由鍵值對組成。
<元素名 屬性名="值1" 屬性名="值2"></元素名>
大多數元素都可以使用的屬性。
id 唯一標識
class 標識一類元素
style 樣式
title 描述信息
規範：元素名和屬性名都不區分大小寫。
4）文檔結構
文檔類型聲明: 版本和文檔類型聲明，版本和文檔類型聲明是對應的，文檔類型使用DTD來指定
1）嚴格的文檔類型
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
2）寬鬆的文檔類型(過渡的文檔類型)
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
3）frameset框架文檔類型
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
4）html5文檔類型
<!DOCTYPE html>
html：標識HTML文檔
head : 標識HTML文檔的頭部，可以包含該文檔的標題，文檔使用的腳本，樣式定義，元數據等信息
body：標識HTML文檔的體部，body中的內容可以顯示到瀏覽器中。
例如：
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>標題</title>
</head>
<body>
</body>
</html>
5）meta元素
定義文檔元數據
1，定義元數據關鍵字
<meta name="Author" content="briup">
<meta name="Copyright" content="版權信息">
<meta name="Description" content="描述信息">
<meta name="keywords" lang="zh-cn" content="精品圖書">
<meta name="keywords" lang="en-us" content="good book">
2，報頭規範
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
將會創建如下的消息頭
Content-Type:text/html;charset=utf-8
<meta http-equiv="Content-Languaga" content="zh-CN">
將會創建如下的消息頭
Content-Language:zh-CN
<meta http-equiv="Refresh" content="n;url=http://yourlink">
定時讓網頁在指定的時間n內跳轉到頁面http://yourlink
<meta http-equiv="Pragma" content="no-cache">
設置網頁禁用瀏覽器緩存
Pragma: no-cache可以應用到http 1.0 和http 1.1
將會創建如下的消息頭：Pragma:no-cache
<meta http-equiv="Cache-Control" content="no-cache">
設置網頁禁用瀏覽器緩存
Cache-Control: no-cache只能應用於http 1.1.
4 顏色與大小
1）顏色顏色由紅(R)、綠(G)、藍(B)組成，每個顏色的最低值爲0(十六進制爲00)，最高值爲255(十六進制爲FF)。十六進制值的寫法爲#號後跟三個或六個十六進制字符。
3位十六進制 6位16進制 rgb 顏色
#000 #000000 rgb(0,0,0) 黑色 black
#F00 #FF0000 rgb(255,0,0) 紅色 red
#FFF #FFFFFF rgb(255,255,255) 白色 white
2）大小 （ px 像素）
HTML 頁面結構 沒穿衣服（素顏）
CSS 頁面表現 化妝
JS 頁面動作 跳舞
5. 標籤介紹
1)塊級(block)標籤<div></div>
特點：獨佔一行
h1~h6 標題
特點: ①有字體大小的設置
②文本有加粗強調設置
③上下文之間有較大間距
p 段落
特點：
①獨佔一行
②上下文之間具有距離
ul li (無序列表)
特點：
①配合使用
② ul li都獨佔一行空間
③ ul 上下文之間有很大空間
④ li與列表的樣式顯示(默認點狀)，並且由文本縮進
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
ol li (有序列表)
<ol>
<li>列表1</li>
<li>列表2</li>
</ol>
dl dt dd（自定義列表）
特點：
①dl dt dd獨佔一行空間
②dl上下文之間有很大歐諾關鍵
③dd有文本縮進
<dl>
<dt>列表標題</dt>
<dd>列表內容</dd>
<dd>列表內容</dd>
<dd>列表內容</dd>
</dl>
2)行內（內聯inline）標籤
span
特點：①最乾淨的內聯標籤（沒有任何修飾）
②不獨佔一行
a 超鏈接
特點:
①不獨佔一行
②點擊可以發生跳轉（或進行對應操作），語法顏色爲綠色
③文本具有顏色，具有下劃線，指向後光標爲手型，有狀態的色彩提示
文本修飾標籤
<u>下劃線修飾</u>
<i>斜體修飾</i>
<b>加粗</b>
<em>強調</em>
<strong>加粗</strong>
<s>刪除線</s>
<sup>上標</sup>
<sub>下標</sub>
img
src="圖片地址"
絕對路徑
http://www.baidu.com/car.jpg
http://www.briup.com/demo/one.html
<img src="http://www.baidu.com/car.jpg">
相對路徑 one.html ../a.jpg
6 其他常用的html標籤
1 超鏈接
從一個web資源到另外一個web資源的連接絕對路徑： 每個網頁都有一個唯一的地址，稱爲URI 統一資源定位符，也稱爲該網頁的絕對路徑。如 http://ip:port/目錄/文件名
相對路徑： 相對於當前文檔所在的路徑 。如① ../imgs/a.jpg ②./imgs/a.jpg ③imgs/a.jpg
本地連接： file:///d:/html/index.html 。 超鏈接中不允許寫本地連接
服務器路徑： http://localhost:8888/test/index.html
1）a 超鏈接
連接狀態： ①未訪問 ②懸停 ③點擊未鬆開 ④點擊後
<a href="">內容顯示</a>
屬性：
href 定義連接的目標URI
絕對路徑：http://www.baidu.com
相對路徑：b.html
郵件地址：mailto:[email protected]
錨點 ：#mao
空連接 ：javascript:void(0);
target 定義連接的目標窗口
_blank
_parent
_self
_top
自定義目標名
title 定義連接的提示信息
type 連接到任何類型的文件以供下載
<a href="../docs/myWord.doc" type="application/msword">報名表</a>
錨點：
錨點可以讓用戶在文檔中設置標記，這些標記通常放在文檔的特定主題處或頂部，然後創建到這些錨點的連接，指向網頁中的特點位置。
例如：
<h2 id="section1">1,什麼是萬維網</h2>
<p>萬維網，是基於Internet的信息服務系統，官方定義爲"WWW is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents",簡而言之，WWW是一個以Internet爲基礎的計算機網絡，它允許用戶在一臺計算機上通過 Internet訪問另一臺計算機上的信...</p>
<a href="#section1">查看第一部分內容</a>
2）link 文檔關係連接
只能出現在head標籤中，定義了當前文檔和另一個資源之間的聯繫。通常用於鏈接到外部樣式表<link rel="stylesheet" href="style.css" type="text/css">
屬性：
href： 定義關係鏈接地址
rel: 定義當前文檔與所連接文檔之間的關係。
type: 文檔類型
3）base 基準鏈接地址
設置頁面中所有文檔相對路徑相對的基準URI。如果設定了基準鏈接地址，當前頁面中的所有相對路徑都基於該路徑
<base href="http://localhost:8888/test/">
4）圖片
1，圖片類型
適合在網站上進行快速查看的圖片格式
GIF （graphics interchange format,圖形交換格式）可以將背景設置爲透明的，圖片最多使用256中顏色，最適合顯示色調不連續或具有大面積單一 顏色的圖片，如導航條，按鈕，圖標等。由於GIF圖片中存儲的顏色信息較少，因此佔用空間極小，使用起來更方便。
JPEG（joint photographic experts group,聯合圖像專家組）最適合攝影或連續色調圖像的彩色照片，jpeg文件可以包含數百萬中顏色，保證圖片不失真。JPEG圖片無法擁有透明的背景
PNG（portable network graphics,可移植網絡圖形）PNG可以包含256種以上的顏色，並可以具有透明的背景。PNG文件可保留所有原始層，矢量，灰度， 顏色和效果信息，並且在任何時候所有元素都是可以編輯的。
2，鏈入圖片文字
<img src="" alt="">
屬性：
src : 圖片的源地址
title : 對圖片的文字說明，當用戶把鼠標放在圖片上稍作停留，alt屬性的值就會以浮動的形式顯示出來。
width : 圖片的寬度
height : 圖片的高度
alt : 當圖片文件找不到的時候顯示的文本信息
border ：圖片的邊框
align ：圖片和文字的對齊
當align值爲left時，圖片靠在最左方，周圍的文字顯示在右側上方
當align值爲right時，圖片靠在最右方，周圍的文字顯示在左側上方
當align值爲top時，圖片靠在最上方，周圍的文字顯示在上方
當align值爲bottom時，圖片靠在最上方，周圍的文字顯示在下方
hspace ：圖片的水平間距
vspace ：圖片的垂直間距
爲圖片添加鏈接
<a href=""><img src="" alt=""></a>
2，表格
1）table 定義表格
屬性：
border: 設置表格邊框線條寬度
align: 表格在頁面中對齊
width: 設置表格寬度
bgcolor:表格背景色
cellspacing: 單元格之間的間距
cellpadding: 單元格邊沿與其內容之間的距離
frame: 表格中邊框線的顯示
void 不顯示邊框
above 上邊框
below 下邊框
hsides 上下邊框
vsides 左右邊框
lhs 左邊框
rhs 右邊框
box 四個邊框
border 四個邊框
rules: 表格中分割線的顯示
none 無分割線顯示
groups 僅在列分組間和行分組間顯示分割線
rows 僅在行間顯示分割線
cols 僅在列間顯示分割線
all 在所有行列間顯示分割線
2）tr 定義表格行
th 定義單元格
td 定義內容單元格
屬性：
colspan 跨列(合併列)
rowspan 跨行(合併行)
align 單元格內容水平對齊
left,center,right, justify 兩端對齊
valign 單元格內容垂直對齊
top,middle,bottom, baseline 基準
對齊的繼承
1）內容自身的設置具有最高優先級
2）th,td元素的對齊設置
3）tr,thead,tfoot,tbody元素的對齊設置
4）table元素的對齊設置具有全局性
5）默認的設置
4）caption 表格的標題
thead 表格頭
tbody 表格主體
tfoot 表格尾
3，框架文檔
一個框架文檔由四部分組成，文檔聲明，html元素，head元素，frameset元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
1）frameset 框架集
rows：用來定義將框架水平分隔爲子框架的數量和這些子框架的寬度
cols：用來定義將框架垂直分隔爲子框架的數量和這些子框架的高度。
<frameset rows="10%,90%">
<frame src="">
<frameset cols="15%,85%">
<frame src="">
<frame src="">
</frameset>
</frameset>
屬性
src: 設置框架的初始內容
frameborder:框架窗口邊框線
marginwidth: 在框架的邊緣和邊框的內容之間可以出現的空白（左右邊）
marginheight: 在框架的邊緣和邊框的內容之間可以出現的空白（上下邊）
srolling: 框架視圖的滾動條設置
auto 必要時提供，默認值
yes 始終提供滾動條
no 不提供滾動條
noresize: 改變框架窗口大小
name: 框架名稱，作爲該框架的標識
注意之前說的超鏈接<a>的target屬性
target: 框架目標
_blank -- 在新窗口中打開鏈接
_parent -- 在父窗體中打開鏈接
_self -- 在當前窗體打開鏈接,此爲默認值
_top -- 在當前窗體打開鏈接，並替換當前的整個窗體(框架頁)
一個對應frame名稱 -- 在對應框架頁中打開
注意 一般_parent和_top在iframe的嵌套中才會起作用
3）iframe 內聯框架
iframe允許用戶在一個文本中插入一個框架，iframe元素可以使用frame元素的所有屬性，實現功能也相同。
<body>
<iframe src="" frameborder="0"></iframe>
</body>
1.body元素中不能出現frameSet元素
2.frame不能脫離frameSet單獨使用
3.iframe基本上放在頁面的任何地方都行
一般frame和frameSet都是配合使用的,而iframe則是會單獨使用
4，表單
主要用於收集來自用戶的信息，並將收集的信息發送給服務器端處理程序處理。表單是客戶端和服務器端傳遞數據的橋樑，是用於實現與服務器互動的最主要方式。
1）form表單控件的容器
<form action="">
</form>
屬性
action 設定處理表單數據URI的地址
method 設定數據傳送到服務器的方式
get 將輸入的數據追加到action地址後面
post將輸入的數據保存到HTTP協議的報文中
name 設定表單的名稱
enctype 設定表單數據的內容類型
application/x-www-form-urlencoded 在發送前編碼所有字符（默認）
編碼方式：
1）控件的名稱和值都被轉義，空白字符使用【+】替換，保留的字符一般都是用來實現特定的目的，例如（: / ? ; @ = & 等）。非數字和字母
的字符使用%HH（這裏HH表示兩個十六進制數字，代表該字符的ASCII碼）進行轉換，
2）控件的"名稱/值"對按照它們在文檔數據流中出現的順序列出來。"名稱""值"使用"="分割，兩個"名稱/值"之間使用&隔開。
multipart/form-data 不對字符編碼。在使用包含文件上傳控件的表單時，必須使用該值。
數據分成多個部分，每個部分代表一個結構良好的控件，作爲文檔數據流的一部分，每一個部分都按照它們在文檔數據流中出現的順序依次發送到
服務器端，並且，每一部分的邊界不會出現在數據中。每一部分有一個content-desposition標題頭，它的值的格式是：
Content-Disposition:form-data;name="myControl"
text/plain 空格轉換爲 "+" 加號，但不對特殊字符編碼。
accept-charset 設置服務器端可以處理的字符編碼
2）input 基本表單控件
<input type="text">
屬性：type 控件類型
text 單行文本框
textarea 多行文本框
password 密碼框
checkbox 複選框
radio 單選按鈕
submit 提交按鈕
reset 重置按鈕
file 文件
hidden 隱藏域
image 圖像按鈕
button 普通按鈕
name：控件名稱，這個名稱將與控件的當前值形參"名稱/值"對 一同隨表單提交
value：用於設定初始化，可選。
checked ：單選框，複選框默認選中屬性
size：當前控件的初始寬度，這個寬度以像素爲單位。除非控件類型是text,password，這時寬度是整數值，表示字符的數目
maxlength:指定可以輸入的字符的最大值。適用於控件類型爲text,password。
3）button 按鈕控件
<button></button>
屬性
name 控件名稱
value 控件初始值
type 控件類型
button 普通按鈕
submit 提交按鈕
reset 重置按鈕
圖片按鈕:<button><img src="" alt=""></button>
4）select 下拉列表
<select name="" id="">
<option value=""></option>
<option value=""></option>
</select>
屬性
name: 控件名稱
size: 列表框中行的顯示數量
multiple: 是否允許多選
如果select元素不包含屬性size和屬性multiple時，表單類型顯示爲菜單
如果使用了屬性size和屬性multiple中的任意一個，則表單類型顯示爲列表框,如果有multiple的話,就表示可以多選（按住ctrl可以多選）
selected: 默認選中
option 下拉列表選項
屬性：
value: 定義控件的初始值。提交表單時，初始值會被提交給服務器。
optgroup 分組選項
<select name="" id="">
<optgroup label="大洋">
<option value="">太平洋</option>
<option value="">大西洋</option>
<option value="">印度洋</option>
</optgroup>
<optgroup label="大海">
<option value="">東海</option>
<option value="">南海</option>
<option value="">渤海</option>
</optgroup>
</select>
4）textarea 多行文本框
屬性
name: 控件名稱
rows: 定義文本框行數
cols: 定義文本框列數
warp: 是否自動換行。
off 不自動換行
hard自動硬回車換行，換行元素一同被傳送到服務器中
soft自動軟回車換行，換行元素不會傳到服務器中
5）label 爲表單控件定義標籤
一些表單控件內建有標籤，當內建有標籤時，一般使用value屬性的值作爲標籤，而另外一些表單控件沒有標籤，則直接使用文本作爲標籤來說明控件的意義。
每個label元素都要和表單控件關聯到一起
<table>
<tr>
<td><label for="username">用戶名：</label></td>
<td><input type="text" id="username" name="username"></td>
</tr>
<tr>
<td><label for="passwold">密碼：</label></td>
<td><input type="password" id="password" name="password"></td>
</tr>
</table>
6）fieldset 爲表單添加結構
一般與legend元素配合使用，fieldset元素可以包含其他的表單控件，在這些表單控件周圍畫一個方框，而legend元素可以顯示一個標籤說明被包含的這些
表單控件。
7）其他控件特性
disabled 禁用
支持該屬性的控件：button,input,optgroup,option,select,textarea
1）禁止的元素不接受節點
2）禁止的控件的值不與表單一起被提交
readonly 只讀
支持該屬性的控件：input,textarea
1）可以接受焦點，但是不能被用戶修改
2）只讀元素的值可以與表單一起被提交。
