標題標籤<h1>~<h6>
段落標籤<p>
換行標籤<br/>
水平線標籤<hr/>
字體加粗標籤<strong>
文字傾斜標籤<em>
註釋<!—註釋內容-->
特殊符號：
空格： 
大於號：>
小於號：<
引號："
版權符號：©
1) 超鏈接標籤<a>
語法：<a href=”鏈接地址” target=”目標窗口位置”>鏈接文本或圖像<a/>
target：屬性值爲_self（自身窗口）_blank（新建窗口）
頁面間鏈接：直接鏈接文件或網站
錨鏈接：
一、 在頁面乙位置設置標記
語法：<a name=“標記名”>目標位置乙<a/.>
二、 設置甲位置鏈接路徑href屬性值爲
語法：<a name=“#標記名”>當前位置甲<a/.>
功能性鏈接：電子郵箱鏈接的用法：mailto:電子郵箱地址
2) 圖像標籤<img/>
語法：<img src=”圖片地址” alt=”圖像的替代文字” title=”鼠標懸停提示文字” width=”圖片寬度” height=”圖片高度”
二、 網頁佈局
1) 列表
無序列表語法：
<ul>
<li>第一項<li/>
<li>第二項<li/>
<li>第三項<li/>
<ul/>
有序列表語法：
<ol>
<li>第一項<li/>
<li>第二項<li/>
<li>第三項<li/>
<ol/>
定義列表語法：
<dl>
<dt>標題一<dt/>
<dd>第一項<dd/>
<dd>第二項<dd/>
<dt>標題二<dt/>
<dd>第一項<dd/>
<dd>第二項<dd/>
<dl/>
2) 表格
參加表格的語法：
<table>
<tr>
<th>單元格的標題<th/>
<tr/>
<tr>
<td>第一個單元格的內容<td/>
<td>第二個單元格的內容<td/>
<tr/>
<table/>
單元格的跨列語法：
<table>
<tr>
<td colspan=“所跨的列數”>單元格內容<th/>
<tr/>
<table/>
單元格的跨行語法：
<table>
<tr>
<td rowspan=“所跨的行數”>單元格內容<th/>
<tr/>
<table/>
3) HTML5媒體元素
視頻元素：video元素的基本語法：
<video src=“視頻路徑” controls></video>
音頻元素：audio元素的基本語法：
<audio src=“音頻路徑” controls></audio>
autoplay屬性（自動播放）
loop屬性（循環播放）
4) HTML5結構標籤
header元素：標題頭部區域的內容
footer元素：標記腳部區域的內容
section元素：web頁面中的一塊獨立區域
article元素：獨立的文章內容
aside元素：相關內容或應用（常用於側邊欄）
nav元素：導航類輔助內容
5) 內聯框架
<iframe>語法：
<iframe src=“引用頁面地址” name=“框架標識名”><iframe/>
三、 表單
1) 表單頁面的基本結構
使用<form>標籤創建表單
<form>標籤的屬性：
action：提交的地址
method：如果將數據發送到服務器。屬性值：post方法（不會改變地址欄狀態，表單數據不會被顯示）get方法（會改變地址欄狀態，表單數據會被顯示）
2) 表單元素
<input>元素常用屬性：
type：指定表單元素的類型
屬性值：
文本框（text）
密碼框（password）
單選按鈕（radio）
複選框（checkbox）
重置表單元素按鈕（reset）
提交按鈕（submit）
普通按鈕，需要與事件關聯使用（button）
圖片按鈕（image）
文件域，實現文件的選擇（file）
name: 指定表單元素的名稱
value: 指定表單元素的初始值
size: 指定表單元素的初始寬度
maxlength: 指定可在text或password元素中輸入的最大字符數
checked: 指定按鈕是否是被選中的
number：提供輸入數字的文本框
number類型的屬性值：
規定的默認值（value）
規定允許的最小值（min）
規定允許的最大值（max）
規定合法的數字間隔（Step）
Range：滑塊
Range類型的屬性值：
規定的默認值（value）
規定允許的最小值（min）
規定允許的最大值（max）
規定合法的數字間隔（Step）
Search：搜索框
Hidden：創建隱藏域
列表框：
語法：<select name=“指定列表名稱” size=“行數”>
<option value=“可選項的值”>……</option>
<select>
多行文本域：
語法：<textarea name=”textarea” cols=“顯示的列數” rows=“顯示的行數”>
文本內容
</textarea>
3) 表單元素的高級用法
只讀效果：readonly
禁用效果：disabled
表單元素的註釋：
語法：<label for=“表單元素的id”>標註的文本</label>
4) 表單初級驗證
Placeholder：用於爲input類型的文本框提供一種提示
Required：規定文本不能爲空
Pattern：用於驗證input類型的文本框中輸入的內容是否與自定義的正則表達式相匹配
四、 CSS3基礎語法
1) CSS選擇器
僞類選擇器：
E：first-child：作爲父元素的第一個子元素的元素E
E：last-child：作爲父元素的最後一個子元素的元素E
E F：nth-child（n）：選擇父級元素E的第N個子元素F
E：first-fo-type：選擇父元素內具有指定類型的第一個E元素
E：last-of-type：選擇父元素內具有指定類型的最後一個元素E
E F：nth-of-type（n）：選擇父級元素內具有指定類型的第N個F元素
屬性選擇器：
E[attr]：選擇匹配具有屬性attr的E元素
E[attr=val]：選擇匹配具有屬性attr的E元素，並且屬性值爲val
E[attr^=val]：選擇匹配元素E，且E元素定義了屬性attr，其屬性值是以val開頭的任意字符串
E[attr$=val]：選擇匹配元素E，且E元素定義了屬性attr，其屬性值是以val結尾的任意字符串
E[attr*=val]：選擇匹配元素E，且E元素定義了屬性attr，其屬性值包含了val
五、 文本與圖像
1) CSS字體樣式
字體類型：font-family
字體大小：font-size
字體加粗：font-weight
屬性值：默認值（normal）、粗體（bold）、更粗的（bolder）、更細的（lighter）
字體風格;font-style
屬性值：標準（normal）、斜體字體樣式（italic）、傾斜的字體樣式（oblique）
2) CSS文本應用樣式
文本顏色：color
元素水平對齊方式：text-align
屬性值：把文本排列到左邊（left）、把文本排列到右邊（right）、把文本排列到中間（center）、兩端對齊文本效果（justify）
首行縮進：text-indent
文本行高：line-height
文本裝飾：text-decoration
屬性值：默認值（none）、文本的下劃線（underline）、文本的上劃線（overline）、文本的刪除線（line-through）
垂直對齊：vertical-align
文本陰影：text-shadow
語法：text-shadow:color x軸位移（x-offset） y軸位移（y-offset） 模糊半徑（blur-radius）；
3) CSS超鏈接和列表樣式
超鏈接僞類：
a:link：單擊訪問前的超鏈接樣式
a:visited：單擊訪問後的超鏈接樣式
a:hover：鼠標懸浮其上的超鏈接樣式
a:active：單擊未釋放的超鏈接樣式
列表樣式：
List-style-type屬性值：
none：無標記符號
disc：實心圓
circle：空心圓
square：實心正方形
decimal：數字
背景樣式：
Background-color：背景顏色
Background-image：背景圖像
Background-repeat：背景重複方式
屬性值：沿水平和垂直兩個方向平鋪（repeat）、不平鋪（no-repeat）、只沿水平方向平鋪（repeat-x）、只沿垂直方向平鋪（repeat-y）
背景定位：Background-position
背景尺寸：Background-size屬性值：默認值（auto）、百分值（percentage）、放大填充（cover）、縮放（contain）
CSS線性漸變：
語法：linear-gradient（position，color1，color2）
漸變方向：從頂部到底部（to bottom）、從左到右（to left）、從右下方到左上方（to top left）、從左下方到右上方（to top rignt）、從右上方到左下方（to bottom）、從左上方到右下方（to bottom right）
六、 盒子模型
1) 盒子模型屬性
Border-color：邊框顏色
Border-width：邊框粗細
Border-style-邊框樣式，屬性值：無邊框（none）、點線邊框（dotted）、虛線邊框（dashed）、實線邊框（solid）
Margin：外邊距
Padding：內邊距
2) 盒子模型尺寸
盒子模型內盒總尺寸=border+padding+內容寬度
盒子模型總尺寸=border+padding+margin+內容寬度
Box-sizing：定義盒子模型的尺寸解析方式
語法：box-sizing：content-box|border-box|inherit
3) 圓角邊框
圓角屬性;border-radius
製作圓形要點：元素的寬度和高度必須相同
圓角的半徑爲元素寬度的一半，或者直接設置圓角半徑值爲50%
製作半圓形的要點：製作上半圓或下半圓時，元素寬度是高度的2倍，而且圓角半徑爲元素的高度值。製作左半圓或右半圓時，元素的高度是寬度的2倍，而且圓角半徑爲元素的寬度值
4) 盒子陰影
Box-shadow：盒子陰影，語法;box-shadow:inset x-offset y-offset blur-radius color
七、 浮動與定位
標準文檔流：
display屬性的屬性值：塊級元素的默認值（block）、行內元素的默認值（inline）、行內塊元素（inline-block）、隱藏元素（none）
1) 浮動
Float屬性定義浮動：
屬性值：left：元素向左移動、right：元素向右移動、none：默認值
清除浮動（clear）：屬性值：left：在左側不允許浮動、right：在右側不允許浮動、both：在左右兩側不允許浮動、none：默認值
2) 定位
position定位屬性：
屬性值：static：默認值、relative：相對定位、absolute：絕對定位、fixed：固定定位
z-iindex屬性的應用：用於調整元素定位時層疊層的上下位置
設置層的透明度：
Opacity：x：x值爲0~1，值越小越透明，filter：alpha（opacity=x）：x值爲0~100，值越小越透明
八、 製作網頁動畫
1) 變形
transform：變形函數：
translate（）平移，基於x、y座標重新定位元素的位置
scale（）縮放，可以是任意元素對象尺寸發生變化
roeate（）旋轉，取值是一個度數值
skew（）傾斜，取值是一個度數值
2) 過渡
過渡動畫transition
語法
transition：過渡屬性 過渡所需時間 過渡動畫函數 過渡延遲時間
過渡屬性值：IDENT：指定的CSS屬性、all：指定所有元素支持
過渡動畫值：ease：默認值、linear：勻速運動、ease-in：漸顯效果、ease-out：漸隱效果、ease-in-out：漸顯漸隱效果
觸發機制：
僞類觸發：hover、active、focus、checked等
媒體查詢：可以通過@media屬性判斷設備的尺寸、方向等
JavaScript觸發：用JavaScript腳本觸發
3) 動畫
animation屬性（動畫）製作動畫的步驟：通過@keyframes來聲明一個動畫。
找到要調用動畫的元素，並且調用關鍵幀聲明的動畫