文檔類型設定（document）
- HTML：sublime輸入 html:4s
- XHTML：sublime輸入 html:xt
- HTML5：sublime輸入 html5:5 <!DOCTYPE html>
字符設定
- <meta http-equlv="charset" content="utf-8">：HTML與XHTML中建議這樣去寫
- <meta charset="UTF-8">：HTML5中的標籤建議這樣寫
HTML5 中常用新標籤
W3C手冊中文官網：https://www.w3school.com.cn/
- header：定義文檔的頁眉 頭部
- nav：定義導航鏈接的部分
- footer：定義文檔或節的頁腳 底部
- article：定義文章
- section：定義文檔中的節（section、區段）
- aside：定義其所處內容之外的內容 側邊
- datalist：標籤定義選項列表。與input元素配合使用
- filedset：元素可將表單內的相關元素分組，打包。與legend搭配使用
- 、、、
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <header>語義：定義文檔的頁眉 頭部</header> <nav>語義：定義導航鏈接的部分</nav> <footer>語義：定義文檔或節的頁腳 底部</footer> <article>語義：定義文章</article> <section>語義:定義文檔中的節（section、區段）</section> <aside>語義:定義其所處內容之外的內容 側邊</aside> <!-- input裏面用list、datalist裏面用id 來實現和input的鏈接 --> <!-- 有點類似與下拉菜單，但比select友好，會有提示信息 --> <input type="text" value="輸入明星" list="star"/> <datalist id="star"> <option>楊紫</option> <option>唐嫣</option> <option>王俊凱</option> <option>胡歌</option> <option>王嘉爾</option> </datalist> <fieldset> <legend>用戶登錄</legend> 用戶名：<input type="text"><br/><br/> 密 碼：<input type="password"> </fieldset> </body> </html>
頁面展示如下
HTML5新增的input type屬性值
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <fieldset> <legend>HTML5新增的input type類型</legend> <form action=""> <!--[email protected] --> 郵箱：<input type="email" /> <!--移動端彈出數字鍵盤 --> 手機：<input type="tel" /><br><br> <!--只能接收數字 --> 數字：<input type="number" /> <!--只能輸入網址格式 --> url：<input type="url" /><br><br> <!--與之前不同之處：輸入框會在輸入字符後，在最右邊出現一個小 × 號，實現快速清除輸入框 --> 搜索：<input type="search" /> <!--區域：其實就是一個滑塊 --> 區域：<input type="range" /><br><br> <!-- 獲取小時、分鐘 --> 時間：<input type="time" /> <!-- 年月日 --> 年月日：<input type="date" /><br><br> <!-- 月份 --> 月份：<input type="month" /> <!-- week：周 --> 星期：<input type="week" /><br><br> <!-- color：顏色 會自動彈出調色板 --> 顏色：<input type="color" /><br><br> </form> </fieldset> </body> </html>
頁面展示如下
常用新屬性
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- placeholder：佔位符；默認爲灰色；當用戶輸入時，裏面的文字自動消失；刪除所有文字，提示信息自動返回 --> <!-- autofocus：自動獲取焦點 --> <!-- autocomplete：自動記錄完成； 1、需要提交按鈕； 2、這個表單必須給定name值； 3、autocomplete="on/off"：on：自動記錄；off：關掉自動記錄 --> <!-- required：必填項，不能爲空，爲空時會有提示 --> <!-- accesskey：規定激活（是元素獲得焦點）元素的快捷鍵。 當按下鍵盤中的alt+字母（下面示例爲s） 的組合鍵，便會自動將光標放在輸入框。 --> 用戶名：<input type="text" placeholder="請輸入用戶名" autofocus autocomplete name="userName" required accesskey="s" /> <input type="submit"/> <!-- multiple:多文件上傳 --> 上傳頭像：<input type="file" multiple/> </body> </html>