HTML5新增特性
阿新 • • 發佈：2021-01-12
文件型別設定（document）
- HTML：sublime輸入 html:4s
- XHTML：sublime輸入 html:xt
- HTML5：sublime輸入 html5:5 <!DOCTYPE html>
字元設定
- <metahttp-equlv="charset"content="utf-8">：HTML與XHTML中建議這樣去寫
- <metacharset="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>