目錄：
第一章：HTML5基礎
1.1 HTML5文件的基本結構和W3C標准
1.2 網頁的基本標簽
1.3 圖像標簽
1.4 超鏈接標簽
第二章：列表、表格與媒體元素
2.1 列表
2.2 表格
2.3 HTML5的媒體元素
2.4 HTML5的結構元素
2.5 <iframe>框架
第三章：表單
3.1 表單概述
3.2 表單的高級應用
3.3 表單的初級驗證
第四章：初識CSS3
4.1 CSS概述
4.2 CSS3的基本語法
4.3 在HTML中引入CSS樣式
4.4 CSS3的選擇器
第五章：CSS3美化網頁元素
5.1 編輯網頁文本
5.2 設置超鏈接和列表樣式
5.3 背景樣式
第六章：盒子模型
6.1 盒子模型
6.2 圓角邊框
6.3 盒子陰影
第七章：浮動
7.1 網頁布局
7.2 display屬性
7.3 浮動概述
7.4 清除浮動
第八章：定位網頁元素
8.1 定位在網頁中的應用
8.2 position屬性
8.3 z-index屬性
第九章：利用CSS3制作網頁動畫
9.1 CSS3變形
9.2 CSS3過渡
9.3 CSS3動畫
第一章：HTML5基礎
1.1 網頁的基本信息
1.1.1DOCTYPE聲明
約束HTML文檔結構，檢驗是否符合相關Web標准，同時告訴瀏覽器，使用哪種規范來解釋這個文檔中的代碼。DOCTYPE聲明必須位於HTML文檔的第一行。
<! DOCTYPE html>
1.1.2 < meta> 標簽
使用 <meta> 標簽描述網頁的摘要信息，包括文檔內容類型、字符編碼信息、搜索關鍵字、網站提供的功能和服務的詳細描述等。<meta>標簽描述的內容並不現實，其目的是方便瀏覽器解析或利於搜索引擎搜索，它采用“名稱/值”對的方式描述摘要信息。
<meta charset="UTF-8" />
當遇到頁面發生亂碼時，可以先觀察頁面中是否有些編碼方式的語句，然后使用記事本打開該亂碼文件，單機“另存為”按鈕，在彈出的“另存為”對話框中修改編碼方式，使其與頁面中的編碼方式一致。
搜索關鍵字：
<meta name="keywords" content=“2017” />
內容描述信息：
<meta name ="description" content=“今天是2017年9月21日”/>
1,2 網頁的基本標簽
標題標簽 <h1>~<h6>
段落標簽：<p> </p>
換行標簽：<br/>
水平線標簽：<hr/>
字體樣式標簽：<strong>字體加粗</strong> <em>字體傾斜</em>
特殊符號：
| 特殊符號 | 字符實體 |
| 空格 | |
| 大於號（>） | > |
| 小於號（<） | < |
| 引號（"） | " |
| 版權符號（） | © |
1.3 圖像標簽
圖像標簽的基本語法：
<img src ="圖片地址" alt = " 圖像的替代文字" title="鼠標懸停提示文字" width="圖片寬度" height="圖片高度" />
1.4 超鏈接標簽
1.4.1 超鏈接的基本用法
<a href="鏈接地址" target="目標窗口位置">鏈接文本或圖像</a>
根據連接地址是指向站外文件還是站內文件，鏈接地址又分為絕對路徑和相對路徑
絕對路徑：指向目標地址的完整描述，一般指向本站點外的文件。例如：<a href="http:// www.sohu.com/index.html">搜狐</a>
相對路徑：相對於當前頁面的路徑，一般指向本站點內的文件，所以一般不需要一個完整的URL地址的形式。例如：<a href="login/login.html">登錄</a>表示鏈接地址為當前頁面所在路徑的login目錄下的login.html頁面
另外："../"表示當前目錄的上級目錄；“../../”表示當前目錄的上上級目錄。
1.4.2 超鏈接的應用場合
① 頁面間鏈接：A頁到B頁
② 錨鏈接：A頁甲位置到A頁乙位置或A頁甲位置到B頁乙位置
③ 功能性鏈接：在頁面中調用其他程序功能，如電子郵件、QQ/MSN等。
錨鏈接語法：
<a name="marker">目標位置乙</a>
<a href="#marker">當前位置甲</a>
功能性鏈接語法：
<p><img src="image/logo.jpg" alt="logo"/>[<a href="mailto:bdqnWebmaster@bdqn.cn">聯系我們</a>] </p>
第二章：列表、表格與媒體元素
2.1 定義列表及其應用
<dl>
<dt>標題</dt>
<dd><dd>
</dl>
2.2 表格的基本語法
<table>
<tr> <th></th><th></th></tr>
<tr><td></td><td></td></tr>
</table>
表格的跨列與跨行：
表格的跨列：
<table><tr><td colspan="所跨的列數">單元格內容</td></tr></table>
表格的跨行：
<table><tr><td rowspan="所跨的行數">單元格內容</td></tr></table>
2.3 HTML5的媒體元素
2.3.1 視頻元素
<video controls>
<source src="video/video.webm"/>
<source src="video/video.mp4"/>
</video>
設置<video autoplay>后，不需要與用戶進行任何交互，就可以讓視頻文件加載完成后自動播放。
2.3.2 音頻元素
<audio controls>
<source src="music/music.mp3"/>
<source src="music/music.ogg"/>
</audio>
可以使用Loop屬性實現視頻的循環播放。
2.4 <iframe> 框架
語法：<iframe src="引用頁面地址" name="框架標識名"></iframe>
<iframe>屬性的使用
<iframe name="mainFrame" src="subframe/the_second.html"/>
< a href="subframe/the_second.html" target="mainFrame">下面顯示第二頁</a>
第三章：表單
最基本的表單：
1 <form method="post" action="result.html"> 2 <p> 名字： <input name="name" type="text" /> </p> 3 <p> 密碼： <input name="pass" type="password" /> </p> 4 <p> 5 <input type="submit" name="Button" value="提交"/> 6 <input type="reset" name="Reset" value="重填"/> 7 </p> 8 </form>
get方式提交和post方式提交的區別：
（1）post方法提交方式不會改變地址欄狀態，表單數據不會被顯示
（2）使用get方法提交方式，地址欄狀態發生變化，表單數據會在URL信息中顯示。
表單類型：
| type | 說明 |
| text | 文本框 |
| password | 密碼框 |
| radio | 單選按鈕 |
| checkbox | 復選框 |
| select[option] | 列表框 |
| reset | 重置按鈕 |
| button | 普通按鈕 |
| submit | 提交按鈕 |
| textarea(cols="顯示的列數" rows="顯示的行數" | 多行文本域 |
| files(form中必須有enctype="multipart/form-data") | 文件域 |
| 郵箱 | |
| url | 網址 |
| number | 數字 |
| range | 滑塊 |
| search | 搜索框 |
| hidden | 隱藏域 |
readonly:只讀 disabled:禁用
表單元素的標注
對表單元素進行標注，是為了增強鼠標的可用性。
語法： <label for="表單元素的id">標注的文本</label>
<form> 請選擇性別： <label for="male">男</label> <input type="radio" name="gender" id="male"/> <label for="female"> 女</label> <input type="radio" name="gender" id="female"/> </form>
3.3表單的初級驗證
1、placeholder
1 <form action="#" method="post"> 2 <p> 請輸入搜索的關鍵詞： 3 <input type="search" name="sousou" placeholder="請輸入要搜索的關鍵字"/> 4 <input type="submit" value="Go"/> 5 </p> 6 </form>
2、required 驗證表單元素非空
3、pattern 驗證input類型文本框中用戶輸入的內容是否與自定義的正則表達式想匹配
<form action="#" method="post"> <p> 電話號碼: <input type="text" name="tel" required pattern="^ 1[358]\d{9}"/> *以13、15、18開頭的11位數字 <br/> <input type="submit" value="提交"/> </p> </form>
^:開始
$:結束
\d:數字
\D:非數字
\s:空字符
\S：非空字符
\w:文字
\W:非文字
*:任意字符，0~N次
+:任意個字符 1~N次
？：是否有(0次或者1次)
{n}:N次重復
{n,}:至少n次
{n,m} n到m次
.：除了換行之外的所有字符，當需要用"."時，應寫為："\."