一、web標准
web標准-網頁制作的標准，它是由一系列標准組成的，主要包含三個方面：結構（html,xhtml）,表現（css）,行為（javascript）
注：結構和表現的標准由w3c（萬維網聯盟）制定，行為標准由ECMA（歐洲電腦廠商聯合會）制定
二、html相關概念
1.html—超文本標記語言
2.xhtml—可擴展的超文本標記語言
3.html5—html的第五次重大修改
注：html和xhtml的區別：
XHTML規范：必須小寫，有開始結束標簽，屬性也用雙引號。
HTML規范：不區分大小寫，有開始和結束標簽，也可把結束標簽放在開始標簽里，如：<input type='text' /> 。屬性可用雙引號、單引號(必須配對使用)。
xhtml相對於html並沒有增加新的標簽，只是語法要求更加嚴格，比如：標簽必須閉合，標記名稱必須小寫等
三、html基本結構
1.文檔聲明
html5的文檔聲明語法： <!DOCTYPE html>
作用：告知瀏覽器文檔使用哪種 HTML 或 XHTML 規范
2.html是網頁的根元素或根標簽,所有的網頁內容和標簽都放在html標簽之間
語法： <html></html>
3.html包含了兩大部分：head部分和body部分
head部分：一般設置meta頭元素或引入一些外部的css文件，js文件等以及關鍵詞，描述
設置字符編碼：
<meta charset="utf-8"/> 防止網頁出現亂碼
其他編碼格式：gb2312,gbk
body部分：所有要在網頁中顯示的內容及放置內容的標簽都放在body部分
HTML5 基本結構 （新建一個html文件時默認有那些代碼）
<!DOCTYPE html>命名文檔類型
<html></html>說明我們寫的是標記語言
<head></head>文件頭部
<title></title>文件標題（顯示在狀態欄上的內容）
<meta charset="utf-8" />編碼格式
<body></body>文件主體(所有要寫的內容)
四、html基本語法
1.常規標記
語法： <標記 屬性="屬性值" 屬性="屬性值"></標記>
eg: <div class="box" id="main"></div>
2.空標記
語法： <標記 屬性="屬性值" />
eg: <img src="1.jpg"/>
注：a）屬性和屬性值用等號連接，屬性值要放在雙引號中（所有標點符號都必須是英文狀態下的）
b）標記名稱全部使用小寫（標准）
c) 屬性和屬性之間用空格隔開，不分先后順序
五、html常用標記
1.網頁標題語法： <hx>網頁標題內容</hx> (x為1-6)
eg： <h3>我是標題</h3>
2.段落文本語法： <p>段落文本內容</p>
3.空格html轉義字符：
注：常用其他轉義字符：
">" => "<" =< 版權聲明=©
4.強制換行語法： <br/> (空標記)
5.加粗語法：
<strong>加粗文本內容</strong>
<b>加粗文本內容</b>
6.傾斜語法：
<em>傾斜文本內容</em>
<i>傾斜文本內容</i>
7.水平分隔線語法： <hr/>
<hr align="left" size="3" width="50%"/><!--水平線，起到分割的作用-->
<hr align="center" size="3" width="50%"/>
<hr align="right" size="3" width="50%"/>
<hr noshade/>
<!--align 左對齊 右對齊 居中-->
<!--size 粗細 單位像素-->
<!--color顏色-->
<!--width寬度（就是這條線有多長） 50%表示的是父層寬度的50%-->
<!--noshade (沒有屬性值的屬性) 不要陰影 -->
8.上標和下標語法： <sup></sup> 上標 <sub></sub> 下標
9.無序列表語法：
<ul>
<li>aaa</li>
<li>bbb</li>
...
</ul>
ul：type 有：circle 空心圓，disc 實心圓，square 實心正方形， none ：前面無符號;
10.有序列表語法：
<ol type="a" start="2">
<li>aaa</li>
<li>bbb</li>
...
</ol>
注：type用來設置序號的類型，可以設置A,a,i,I,1
start用來設置從幾開始
eg:代碼：
<ol type="a" start="2">
<li>今天天氣不錯，陽光明媚！適合敲代碼！</li>
<li>今天天氣不錯，陽光明媚！適合敲代碼！</li>
<li>今天天氣不錯，陽光明媚！適合敲代碼！</li>
<li>今天天氣不錯，陽光明媚！適合敲代碼！</li>
<li>今天天氣不錯，陽光明媚！適合敲代碼！</li>
<li>今天天氣不錯，陽光明媚！適合敲代碼！</li>
</ol>
效果：（默認序號類型是數值 ，設置屬性type=“a”起作用，是從b開始 start屬性作用）
11.自定義列表
語法： <dl>
<dt>A</dt>
<dd>a1</dd>
<dd>a2</dd>
...
<dt>B</dt>
<dd>b1</dd>
<dd>b2</dd>
...
</dl>
注：dt和dd是並列關系
在dl中可以存在多組dt,dd,每組中只能存在一個dt，可以存在多個dd
12.圖片語法： <img src="圖片路徑" width="數值" height="數值" alt="替換文本" title="提示文本"/>
注：alt和title的區別
title是當鼠標懸停在圖片上時要顯示的提示信息
alt是當圖片由於某些原因無法正常加載時要顯示的替換信息
<img src="images/picture.jpg" border="2" width="200">
<!-- 圖片路徑 src(相對路徑) 寬度 width 高度 height 邊框粗細 border 水平對齊方式 align left/center/right -->
<!--如果想要等比例縮放，就只能給寬或高，二者中的一個-->
<!--img align="center" 不可以實現圖片居中的-->
<!--div做橋,將圖片放在div中，然后設置div中的內容居中-->
<div style="text-align:center;">
<img src="images/picture.jpg" align="left"/>
</div>
相對路徑的三種寫法：
1.當當前文件和目標文件在同一目錄下，寫法如下： 目標文件名+擴展名
2.當當前文件和目標文件所處文件夾在同一目錄下，寫法如下： 目標文件所處文件夾名/目標文件名+擴展名
3.當當前文件所處文件夾和目標文件所處文件夾在同一目錄下，寫法如下：../目標文件所處文件夾名/目標文件名+擴展名
注：../是指返回到上一級目錄
13.超鏈接語法：<a href="http://鏈接地址或鏈接文件" target="_blank" title="提示信息">鏈接文本或圖片</a>
注： target屬性用來設置超鏈接是否在新窗口打開
target="_blank" 鏈接在新窗口打開
target="_self" 默認值，在本窗口打開
注：空鏈接 <a href="#">新聞資訊</a> （跳轉到頁面的頂部）
14.表格作用：顯示數據（多用於后台管理）
標簽釋義：<caption></caption>：表頭信息。
<tr></tr> ：定義一個表格行；
<th></th> ：定義一個表格頭；自帶居中效果，若是純文字，默認會以粗體的樣式表現。
<tbody></tbody> ：可以理解為表格的內容區域，在Chrome、FF瀏覽器通過DOM進行表格動態插入行的時候，要使用這個。如果不進行DOM操作，可不用添加。
<td></td> ：定義一個單元格；
語法：
<table border=0 title="測試">
<caption> 表格標題</caption>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td>張三</td>
<td>22</td>
</tr>
<tr>
<td><input type=text /></td>
<td><input type=text /></td>
</tr>
</table>
注：*表格相關屬性：
（1）border 設置邊框的寬度
（2）cellspacing 設置單元格之間的間距
（3）cellpadding 設置內容和單元格之間的空隙
（4）align="left|center|right" 設置單元格內容的對齊方式
（5）width 設置單元格的寬度
（6）height 設置單元格的高度或者tr的高度
（7）colspan="數值" 合並列（給td加）☆
（8）rowspan="數值" 合並行（給td加）☆
高級屬性
（1）合並相鄰單元格邊框☆
語法： border-collapse:collapse(合並相鄰單元格邊框)|separate(邊框分開);
注： border-collapse給table加
eg：
不設置border-collapse 屬性，默認值separate
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格高級屬性</title>
<style type="text/css"> .tab{
/*border: 1px solid black;*/
} .tab td{ border:1px solid black; padding:5px 10px; text-align: center;
}
</style>
</head>
<body>
<table class="tab" cellpadding="0" cellspacing="5" >
<caption>測試數據</caption>
<tr>
<td>測試數據</td>
<td>測試數據</td>
<td>測試數據</td>
<td>測試數據</td>
</tr>
<tr>
<td>測試數據</td>
<td>測試數據</td>
<td>測試數據</td>
<td>測試數據</td>
</tr>
<tr>
<td>測試數據</td>
<td>測試數據</td>
<td>測試數據</td>
<td>測試數據</td>
</tr>
</table>
</body>
</html>
瀏覽器顯示：
當我們設置border-collapse ：collapse時瀏覽器顯示的效果：
2.定義表格標題的位置(給table加)語法：caption-side:top|bottom|left|right;
注：left和right只有火狐識別
caption是一個塊狀元素
3.設置單元格的間距(給table加)語法：border-spacing:數值+單位;
注：當設置了border-collapse:collapse;時,border-spacing會失效
4.隱藏或顯示無內容單元格(給table加)語法：empty-cells:show(顯示)|hide(隱藏);
5.表格布局算法(給table加)語法： table-layout:fixed|auto;
注：當設置為fixed的時候，單元格寬度固定，不隨內容多少發生變化
.tab3{ table-layout: fixed; } <table class="tab3" width="400" border="1" cellspacing="0" cellpadding="0">
<tr height="30">
<td width="300">jkfdjkdsjfkdsjfkdsjfkjdsfkjdskfjdskfjdskfjdskfjdskfjdskfjdskjfdsjfdsfds</td>
<td width="100">1010101020030020303030004004</td>
</tr>
</table>
瀏覽器顯示效果：
表格相關html屬性
1.設置單元格內容水平對齊方式
align="left|center|right"
2.設置單元格內容垂直對齊方式
valign="top|middle|bottom"
3.設置表格分隔線
rules="rows|cols|all|groups|none"
rows 行分隔線 cols 列分隔線 all 行分隔線和列分隔線 groups 組分隔線 none 沒有分隔線
4.表格行分組
<thead></thead> <tbody></tbody> <tfoot></tfoot>
5.表格列分組
<colgroup span="數值"></colgroup>
<col span="數值"/>
注：推薦使用colgroup進行列分組
span的默認屬性值為1，一列為一組，設置為幾即為幾列為一組
着重釋義：
colspan : 表示橫向合並單元格 (
) rowspan ：表示縱向合並單元格 ( 
)
六、表單
作用：用來搜集用戶信息
語法：<form method="" action=""></form>
注：所有的表單控件都要放在form標簽之間
1.文本框
語法： <input type="text" value="admin" name="username"/>
注：value用來設置默認值
name屬性主要供后端獲取輸入的內容或信息
2.密碼框
語法：<input type="password"/>
3.提交按鈕
語法： <input type="submit" value="登錄"/>
注：提交按鈕的默認value值為提交或提交查詢，可重新設置需要的value值
4.重置按鈕
語法： <input type="reset"/>
5.單選按鈕
語法：<input type="radio" name="***" checked="checked"/>
注：使用單選按鈕時，一組中的單選按鈕必須添加一致的name屬性值，才能實現多選一的效果
設置checked屬性可以實現頁面加載完成后添加默認選中狀態
當屬性和屬性值相同時，可以省略屬性值，如checked="checked" 可以簡寫為checked
6.復選框（復選按鈕）
語法：<input type="checkbox" checked disabled/>
注：checked屬性主要應用在單選和復選按鈕上
disabled屬性用來設置input控件的禁用狀態
7.下拉列表
語法： <select>
<option>a</option>
<option selected>b</option>
...
</select>
注：selected用來設置下拉列表的默認選中項
8.文本域
語法：<textarea cols="字符寬度" rows="行數"></textarea>
擴展：禁止用戶通過拖拽改變文本域的大小
textarea{resize:none;}
9.普通按鈕
語法：<input type="button" value="***"/>
注：普通按鈕不具備提交的功能，通常結合js使用
普通按鈕默認value值為空，可以重新設置value屬性
10.提示信息：
a）可以將單選或復選按鈕和文字進行關聯，點擊文字也可選中單選，復選按鈕
eg: <input type="radio" name="sex" id="boy"/><label for="boy">男</label>
<input type="checkbox" id="ball"/> <label for="ball">籃球</label>
b）將提示信息放置在label標簽中可以設置我們想要的樣式
c) label標簽是內聯元素
11.表單字段集及表單字段集標題
語法：<fieldset>
<legend>用戶注冊</legend>
...
</fieldset>
作用：將form中的表單控件進行分組， 並添加一個標題
12.上傳文件
語法： <input type="file"/>
13.隱藏字段
語法：<input type="hidden"/>
注: 主要供后端修改數據時使用
14.圖像域
語法：<input type="image" width="***" height="***" src="圖片路徑"/>
作用：使用圖像作為提交按鈕，具備提交功能
form標簽上的相關屬性解釋：
1.method 用來設置數據傳送方式，一般為get和post方式
注：get和post的區別
1. get是從服務器上獲取數據，post是向服務器傳送數據。
2. get是把參數數據隊列加到提交表單的ACTION屬性所指的URL中，值和表單內各個字段一一對應，在URL中可以看到。post是通過HTTP post機制，將表單內各個字段與其內容放置在HTML HEADER內一起傳送到ACTION屬性所指的URL地址。用戶看不到這個過程。
3. 對於get方式，服務器端用Request.QueryString獲取變量的值，對於post方式，服務器端用Request.Form獲取提交的數據。
4. get傳送的數據量較小，不能大於2KB。post傳送的數據量較大，一般被默認為不受限制。但理論上，IIS4中最大量為80KB，IIS5中為100KB。
5. get安全性非常低，post安全性較高。但是執行效率卻比Post方法好。
2.action 用來設置數據要發送到的位置，一般為后端文件
eg： <form method="get/post" action="http://www.qfedu.com/index.php"></form>
七、div
作用：在布局網頁時用來划分板塊
語法： <div></div>
八、span
語法：
<span>標簽被用來組合文檔中的行內元素。在行內定義一個區域，也就是一行內可以被<span>划分成好幾個區域，從而實現某種特定效果。<span>本身沒有任何屬性。
在IE6下，span元素浮動時一定要把span元素放在a標簽之前，不然，會出現瀏覽器兼容問題，IE6下，浮動過后的span元素會向下錯位一行。
提示和注釋：
提示：請使用<span>來組合行內元素，以便通過樣式來格式化它們。
注：span沒有固定的表現格式，只有在對它應用樣式時，才會產生視覺上的差異
span可以實現將文本的某一部分獨立出來
九、iframe框架和<frameset> 標簽
1.iframe框架
語法： <iframe src="3.表單.html" width="500" frameborder="0" scrolling="auto"></iframe>
注：width：iframe框架的寬度
height：iframe框架的高度
frameborder 設置iframe框架的邊框
scrolling = "no" 隱藏（去掉）iframe的滾動條
2.frameset 定義一個框架集，包含多個框架，每個框架都有獨立的文檔。
2.1 格式
<frameset >
<frame src="a.html" />
<frame src="b.html" />
<noframes>框架無效</noframes>
</frameset>
2.2 子項說明
<frame src="a.html" /> ：子框架
<noframes></noframes>：瀏覽器不支持此框架的時，顯示的內容。
2.3 屬性
frameset 屬性：
rows ：表示子框架按行的樣式布局（
）。以2個子框架為例：rows="30%,*" ，表示第一個框架占整個頁面30%的高度，第二個占剩下的；
cols ：表示子框架按列的樣式布局(
)。以2個子框架為例：cols="30%,*" ，表示第一個框架占整個頁面30%的長度，第二個占剩下的；
noresize="noresize" ：表示不調整子框架的范圍。
frame 屬性：
src ：指向一個資源(如頁面、圖片等)的URI；
name ：指定框架的名稱，以便進行框架間的操作。
十、html注釋
語法： <!--注釋內容-->