文檔類型設定
-
document
-
HTML:
-
XHTML:
-
HTML5
-
字符設定
-
<meta http-equiv="charset" content="utf-8">：HTML與XHTML中建議這樣去寫
-
<meta charset="utf-8">：HTML5的標簽中建議這樣去寫
常用新標簽
-
header：定義文檔的頁眉
-
nav：定義導航鏈接的部分
-
footer：定義文檔或節的頁腳
-
article：標簽規定獨立的自包含內容
-
section：定義文檔中的節（section、區段）
-
aside：定義其所處內容之外的內容
常用新屬性
| 屬性**** | 用法**** | 含義**** |
|---|---|---|
| placeholder**** | <input type="text" placeholder="請輸入用戶名"> | 占位符提供可描述輸入字段預期值的提示信息 |
| autofocus**** | <input type="text" autofocus> | 規定當頁面加載時 input 元素應該自動獲得焦點 |
| multiple**** | <input type="file" multiple> | 多文件上傳 |
| autocomplete**** | <input type="text" autocomplete="off"> | 規定表單是否應該啟用自動完成功能 |
| required**** | <input type="text" required> | 必填項 |
| accesskey**** | <input type="text" accesskey="s"> | 規定激活（使元素獲得焦點）元素的快捷鍵 |
新增的type屬性值：
| 類型**** | 使用示例**** | 含義**** |
|---|---|---|
| email**** | <input type="email"> | 輸入郵箱格式 |
| tel**** | <input type="tel"> | 輸入手機號碼格式 |
| url**** | <input type="url"> | 輸入url格式 |
| number**** | <input type="number"> | 輸入數字格式 |
| search**** | <input type="search"> | 搜索框（體現語義化） |
| range**** | <input type="range"> | 自由拖動滑塊 |
| time**** | <input type="time"> | |
| date**** | <input type="date"> | |
| datetime**** | <input type="datetime"> | |
| month**** | <input type="month"> | |
| week**** | <input type="week"> |
綜合案例
<form action="">
<fieldset>
<legend>學生檔案</legend>
<label for="userName">姓名:</label>
<input type="text" name="userName" id="userName" placeholder="請輸入用戶名"> <br>
<label for="userPhone">手機號碼:</label>
<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br>
<label for="email">郵箱地址:</label>
<input type="email" required name="email" id="email"><br>
<label for="collage">所屬學院:</label>
<input type="text" name="collage" id="collage" list="cList" placeholder="請選擇"><br>
<datalist id="cList">
<option value="前端與移動開發學院"></option>
<option value="java學院"></option>
<option value="c++學院"></option>
</datalist><br>
<label for="score">入學成績:</label>
<input type="number" max="100" min="0" value="0" id="score"><br>
<label for="level">基礎水平:</label>
<meter id="level" max="100" min="0" low="59" high="90"></meter><br>
<label for="inTime">入學日期:</label>
<input type="date" id="inTime" name="inTime"><br>
<label for="leaveTime">畢業日期:</label>
<input type="date" id="leaveTime" name="leaveTime"><br>
<input type="submit">