一、路徑
1.1 相對路徑
1.2 絕對路徑
二、列表
2.1 無序列表
<!-- 無序列表ul -->
<h3>我喜歡的水果：</h3>
<ul>
<li>蘋果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
2.2 有序列表
<!-- 有序列表ol -->
<ol>
<li>美國</li>
<li>英國</li>
<li>中國</li>
<li>俄羅斯</li>
</ol>
2.3 自定義列表
<!-- 自定義列表 -->
<dl>
<dt>定義標題</dt>
<dd>定義描述、解釋</dd>
</dl>
<h2>籍貫</h2>
<dl>
<dt>北京</dt>
<dd>昌平區</dd>
<dd>海淀區</dd>
<dd>大興區</dd>
</dl>
三、表格
3.1 表格屬性
<table border="1" cellspacing="0" cellpadding="5" width="500" height="100" align="center">
<tr>
<td>姓名</td>
<td>性別</td>
<td>年齡</td>
</tr>
<tr>
<td>小光光</td>
<td>男</td>
<td>52</td>
</tr>
</table>
3.2 表頭標籤
<table border="1" cellspacing="0" cellpadding="5" width="500" height="100" align="center">
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
<tr>
<td>小光光</td>
<td>男</td>
<td>52</td>
</tr>
</table>
3.3 表格結構
<table border="1" cellspacing="0" cellpadding="5" width="500" height="100" align="center">
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr>
<td>小光光</td>
<td>男</td>
<td>52</td>
</tr>
<tr>
<td>小光光</td>
<td>男</td>
<td>52</td>
</tr>
</tbody>
</table>
3.4 表格標題標籤
<table border="1" cellspacing="0" cellpadding="5" width="500" height="100" align="center">
<caption>表格的標題</caption> <!-- 表格標題標籤 -->
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr>
<td>小光光</td>
<td>男</td>
<td>52</td>
</tr>
</tbody>
</table>
3.5 合併單元格
3.5.1 跨列合併
<table border="1" cellspacing="0" cellpadding="5" width="500" height="100" align="center">
<caption>表格的標題</caption>
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr>
<td>小光光1</td>
<td>男</td>
<td>52</td>
</tr>
<tr>
<td>小光光2</td>
<td>男</td>
<td>52</td>
</tr>
<tr>
<td>小光光3</td>
<td colspan="2"align="center">男，52</td>
</tr>
</tbody>
</table>
3.5.2 跨行合併
<table border="1" cellspacing="0" cellpadding="5" width="500" height="100" align="center">
<caption>表格的標題</caption>
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr>
<td>小光光1</td>
<td>男</td>
<td rowspan="2">52</td>
</tr>
<tr>
<td>小光光2</td>
<td>男</td>
</tr>
<tr>
<td>小光光3</td>
<td>男</td>
<td>52</td>
</tr>
</tbody>
</table>
四、表單和表單控件
4.1 表單
4.2 文本框和密碼框
<!-- 單行文本框 --> <!-- value默認值 -->
<p>用戶名：<input type="text" value="小光光"></p>
<!-- 密碼框 -->
<p>密 碼：<input type="password"></p>
4.3 單選按鈕和複選按鈕
<!-- 單選按鈕 -->
性 別：
<input type="radio" name="sex"> 男
<input type="radio" name="sex"> 女
<br>
<!-- 複選按鈕 -->
愛 好：
<input type="checkbox" name="hobby"> 足球
<input type="checkbox" name="hobby"> 籃球
<input type="checkbox" name="hobby"> 游泳
4.4 默認選中表單屬性
<!-- 單選按鈕 -->
性 別：
<input type="radio" name="sex" checked="checked"> 男
<input type="radio" name="sex"> 女
<br><br>
<!-- 複選按鈕 -->
愛 好：
<input type="checkbox" name="hobby" checked="checked"> 足球
<input type="checkbox" name="hobby"> 籃球
<input type="checkbox" name="hobby" checked="checked"> 游泳
4.5 input按鈕組
<!-- 普通按鈕 -->
搜 索：<input type="button" value="搜索"> <br><br>
<!-- 提交按鈕 -->
提 交：<input type="submit"> <br><br>
<!-- 重置按鈕 -->
重 置：<input type="reset"> <br><br>
<!-- 圖片形式的提交按鈕 -->
圖片按鈕：<input type="image" src="xxx.jpg"> <br><br>
<!-- 文件域 -->
上傳文件：<input type="file">
4.6 label標籤
①label直接包裹input
<!-- label直接包裹input -->
<label>輸入賬號：<input type="text"></label>
②label內有多個input，通過for id來具體定位
<!-- label內有多個input，具體定位 -->
<label for="two">輸入賬號：<input type="text" id="one"><input type="text" id="two"></label>
4.7 文本域
留言板：<textarea>請輸入留言</textarea>
4.8 下拉菜單
<!-- 下拉菜單 -->
籍貫：
<select>
<option value="">北京</option>
<option value="">廣州</option>
<option value="" selected="selected">上海</option> <!-- 默認選中項 -->
</select>
4.9 表單域
<form action="demo.php" method="get" name="register">
用戶名：<input type="text" name="username" id=""> <br>
密 碼：<input type="password" name="pwd" id=""> <br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
Notes：
get速度快，但是會顯示錶單裏面的內容，不安全，不能用作密碼提交；
posst速度慢一些，但是不會顯示錶單內容，安全一些。
五、HTML5新增的標籤和屬性
5.1 查看手冊及其新增標籤
w3c手冊中文官網：HTML5中的新標籤
<header> 頁面頭部-頁眉 </header>
<nav> 導航欄 </nav>
<footer> 頁面底部-頁腳 </footer>
<article> 文章 </article>
<section> 小區塊 </section>
<aside> 側邊 </aside>
5.2 datalist標籤
datalist標籤定義選項列表，與input元素配合使用。
<input type="text" placeholder="請輸入明星" list="star">
<datalist id="star">
<option value="劉德華"></option>
<option value="劉曉慶"></option>
<option value="郭富城"></option>
</datalist>
5.3 fieldset元素
fieldset元素可將表單內的相關元素分組，打包。
<fieldset>
<legend>用戶登錄</legend>
用戶名：<input type="text" name="" id=""> <br><br>
密 碼：<input type="password" name="" id="">
</fieldset>
5.4 HTML5新增的input表單
<fieldset>
<legend>HTML5新增的input表單</legend>
<form action="">
郵箱：<input type="email" name="" id=""><br>
手機號碼：<input type="tel" name="" id=""><br>
url：<input type="url" name="" id=""><br>
數字：<input type="number" name="" id=""><br>
搜索：<input type="search" name="" id=""><br>
自由拖動滑塊：<input type="range" name="" id=""><br>
小時分鐘：<input type="time" name="" id=""><br>
年月日：<input type="date" name="" id=""><br>
時間：<input type="datetime" name="" id=""><br>
月年：<input type="month" name="" id=""><br>
星期 年：<input type="week" name="" id=""><br>
顏色：<input type="color" name="" id=""><br>
<input type="submit" value="提交">
</form>
</fieldset>
5.5 HTML5新增的屬性
<!-- 佔位符 -->
用戶名1：<input type="text" placeholder="請輸入用戶名"><br>
<!-- 當頁面加載時，input元素自動獲得焦點 -->
用戶名2：<input type="text" autofocus><br>
<!-- 多文件上傳 -->
上傳頭像：<input type="file" multiple><br>
<!-- 表單是否啓用自動完成功能
1.autocomplete需要提交按鈕
2.給表單一個名稱
-->
<form action="">
姓名：<input type="text" name="userName" autocomplete="on"><br>
<input type="submit" value="提交信息">
</form>
<!-- 必填項 -->
暱稱：<input type="text" required><br>
<!-- 獲得焦點快捷鍵—alt+字母 -->
暱稱1：<input type="text" accesskey="s">
5.6 多媒體標籤
5.6.1 embed引入網上視頻
5.6.2 音頻audio
5.6.3 視頻video
