1.概念：超文本標記語言
2.功能：定義Web文檔。
3.HTML組成：HTML標記
HTML語法
1.標準封閉語法
<標記名 屬性名=”值” 屬性名=”值” 屬性名=”值”>
<body bgcolor="red" onload="add()" ></body>2.自封閉語法
<標記名 屬性名=”值” 屬性名=”值” 屬性名=”值” />
案例：
<input type="text" name="userid" id="userid" />HTML文檔組成
1.文檔類型說明：
<!DOCTYPE html> 表明HTML5文檔版本
2.<html>
</html>
3.文檔頭
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
4.文檔體
<body>
<h1>OA自動化系統</h1>
</body>HTML標記
1.HTML文檔的定義
(1)<html>
(2)<head>
(3)<body>2.文字格式標記
(1) 標題標記：<h1>...<h6>
(2) 文本的大小標記：<b> <strong>
(3) 字體樣式標記：<i>，
(4)上標，下標：<sup>， <sub>3.超鏈接
(1)語法：
<a 屬性="值">xxxx</a>
(2)常見的屬性
href=“url”
指定URL方式 {
本站點內的文檔：使用相對路徑
<a href="../index.html">主頁</a>
訪問站點外的文檔：使用URL。
<a href="http://www.baidu.com">百度</a>
}4.圖片標記
(1)語法：<img 屬性="值" />
(2)常用的屬性：
src="圖片的路徑"
alt="圖片的說明"
width="寬度"
height="高度"
border="邊框的寬度"5.多媒體
HTML5直接支持視頻和音頻
(1)播放視頻
<video src="m.mp4" width="500" height="100">
(2)播放音頻：
<audio src="m01.mp3" autoplay />6.表格標記
(1)語法
<table>
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr>
<td>劉明</td>
<td>20</td>
</tr>
<tr>
<td>趙明</td>
<td>21</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>7.表單標記
(1)功能：用於收集用戶的輸入信息
(2)處理：需要服務器端動態技術進行處理。如Servlet，JSP，ASP.NET,PHP等。
(3)表單的定義
<form action="add.jsp" method="get" >
</form>
(4)表單元素的分類
非限定輸入表單元素
限定輸入表單元素
按鈕元素
(5)非限定輸入表單元素
<1>文本框：
<input type="text" name="userid" id=""><br/>
<2>密碼框：
<input type="password" name="userid" id=""><br/>
<3>文本域：
<textarea name="resume" rows="5" cols="20">請輸入簡歷</textarea>
<4>文件域：
<input type="file" name="photo" />
<5>隱藏域：
<input type="hidden" name="info" value="ABV" />
(6)限定輸入表單元素
<1>單選按鈕：
<input type="radio" name="sex" value="女" checked>女
<2>複選框：
<input type="checkbox" name="behave" value="旅遊" />
<3>下拉框：
<select name="dept" >
<option value="1">財務部</option>
<option value="2" selected>生產部</option>
<option value="3">銷售部</option>
<option value="3">銷售部</option>
<option value="3">銷售部</option>
<option value="3">銷售部</option>
<option value="3">銷售部</option>
</select>
(7)按鈕元素
<1>提交按鈕
<input type="submit" value="提交" />
<2>重置按鈕
<input type="reset" value="重置" />
<3>普通按鈕
<input type="button" value="增加" />表單案例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>增加員工表單</h1>
<hr/>
<form action="add.jsp" method="post" enctype="multipart/form-data" id="employeeaddform">
<fieldset style="width:300">
<legend align="left">非限定輸入</legend> <br/>
賬號:<input type="text" name="userid"><br/>
密碼:<input type="password" name="password"><br/>
簡歷:<textarea name="resume" rows="5" cols="20"></textarea><br/>
照片:<input type="file" name="photo" /><br/>
</fieldset>
<fieldset style="width:300">
<legend align="left">限定輸入</legend> <br/>
性別: <input type="radio" name="sex" value="男" >男
<input type="radio" name="sex" value="女" checked>女<br/>
愛好：<input type="checkbox" name="behave" value="旅遊" /> 旅遊
<input type="checkbox" name="behave" value="旅遊" /> 旅遊
<input type="checkbox" name="behave" value="旅遊" /> 旅遊<br/>
部門:<select name="dept" >
<option value="1">財務部</option>
<option value="2" selected>生產部</option>
<option value="3">銷售部</option>
<option value="4">開發部</option>
<option value="5">市場部</option>
<option value="6">人事部</option>
</select><br/>
</fieldset>
<input type="hidden" name="info" value="ABV" />
</form>
<hr/>
<a href="../index.html">返回主頁</a>
</body>
</html>8.列表標記
(1)無序列表
語法：
<ul type="">
<li>XXXX </li>
<li>XXXX </li>
</ul>
(2)有序列表
<ol type="">
<li>XXXX </li>
<li>XXXX </li>
</ol>
(3)定義列表
<dl>
<dt>Coffee</dt>
<dd>Blank hot drink</dd>
<dt>Milk</dt>
<dd>white cold drink</dd>
</dl>
(4)列表的嵌套：
9.頁面分區標記：
(1)<div>: 分割一個矩形區域(縱向)
(2)<span>: 橫向分區
(3) <p> 文字分割成段落
DIV的使用重點在CSS中介紹。
10.頁面框架標記(frame)
(1)頁面分區標記
<frameset rows="10%,*,10%" border="0">
需要注意的是：有<frameset>的頁面不能有<body>。
橫向分區屬性：
rows="分區寬度,分區寬度,分區寬度,..."
寬度可以使用:點陣，%，*，可以混合使用。但是*只能使用一次。
案例：
<frameset rows="100,*,20%" border="0">
<frameset rows="10%,*,10%" border="0">
縱向分區屬性：將頁面按縱向分區。
cols="分區寬度,分區寬度,分區寬度,..."
案例：
<frameset rows="10%,*,10%" cols="500,40%" border="0">
<frameset cols="10%,*,10%" border="0">
(2)分區內頁面的顯示標記:<frame>
用於在分區內顯示指定的頁面
案例：
<frame src="../dept/main.html">頁面分區案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Frame案例</title>
</head>
<frameset rows="10%,*,10%" border="0">
<frame src="../common/top.html">
<frameset cols="15%,*,15%" >
<frame src="../common/top.html">
<frame src="../common/top.html">
<frame src="../common/top.html">
</frameset>
<frame src="../common/footer.html">
</frameset>
</html>
11.頭部標記
(1)<meta>
(2)<style>
(3)<link>
(4)<script>
常見的頁面佈局方式
1.東西南北中：一般的Web管理系統。
2.南北西中：一般的信息管理系統。
3.門戶頁面佈局：如新浪網。
頁面佈局的實現方式
1.frame
2.div+css
3.table
4.JSP include指令
5.JSP include動作
6.服務器端佈局框架：Tiles，SiteMash
7.客戶端佈局框架：Bootstrap, jQueryLayout, jQueryEasyUI等