HTML5骨架
DTD: <!DOCTYPE html>
DTD 寫(xiě)法中 html不要加5麦备,表示網(wǎng)頁(yè)對(duì)于不支持html5新特性的瀏覽器采用標(biāo)準(zhǔn)模式解析王滤。
標(biāo)準(zhǔn)模式解析即對(duì)于不認(rèn)識(shí)的標(biāo)簽或?qū)傩圆嵛瑁捎渺o默處理不報(bào)錯(cuò),對(duì)于支持的直接顯示聋丝。
<!DOCTYPE html>
<!-- 設(shè)置語(yǔ)言為英文,這里的語(yǔ)言對(duì)應(yīng)標(biāo)簽為英文 -->
<html lang="en">
<head>
<title>網(wǎng)頁(yè)標(biāo)題</title>
<!-- 設(shè)置字符集為utf-8 -->
<meta charset="UTF-8">
</head>
<body>網(wǎng)頁(yè)主體</body>
</html>
新的語(yǔ)言特性
- 標(biāo)簽允許使用大寫(xiě)字母 (不推薦使用)
<!-- 標(biāo)簽全小寫(xiě) -->
<div>內(nèi)容</div>
<!-- 標(biāo)簽全大寫(xiě) -->
<DIV>內(nèi)容</DIV>
<!-- 標(biāo)簽大小寫(xiě)兼容 -->
<diV>內(nèi)容</diV>
- 標(biāo)簽的屬性值可以不用雙引號(hào)包裹 (不推薦使用)
<img src=images/1.png width=100 height=100>
- 單標(biāo)簽可以省略關(guān)閉符號(hào)
<!-- 有關(guān)閉符號(hào) -->
<img src="" alt="" />
<img src="" alt=""> </img>
<!-- 無(wú)關(guān)閉符號(hào) -->
<img src="" alt="">
- 部分標(biāo)簽可以省略類(lèi)型type屬性
<style></style>
<link rel="stylesheet" href="">
新的語(yǔ)義化標(biāo)簽
h5之前的語(yǔ)義標(biāo)簽: ul、dl肛搬、ol、table毕贼、p温赔、h、span鬼癣、a陶贼、img、em待秃、u拜秧、b、i 等等章郁。
HTML5增加了很多語(yǔ)義化標(biāo)簽枉氮,下面也列些大概:
- figure 定義媒介內(nèi)容的分組,以及它們的標(biāo)題暖庄。
- figcaption 定義 figure 元素的標(biāo)題聊替。
- time 定義時(shí)間。
- mark 定義有記號(hào)的文本培廓。
- details 定義元素惹悄,文檔或者文檔的某個(gè)部分的細(xì)節(jié)。
- summary 定義 details 元素的標(biāo)題肩钠。
- section 定義區(qū)域泣港。
- article 定義文章。
- nav 定義導(dǎo)航鏈接蔬将。
- header 定義section 或 page的頁(yè)眉爷速。
- footer 定義section 或 page的頁(yè)腳。
- aside 定義頁(yè)面內(nèi)容之外的內(nèi)容霞怀, 例如定義側(cè)邊欄惫东。
表單的變化
- 表單元素可以不寫(xiě)在form標(biāo)簽內(nèi)部
<!-- 表單元素可以不書(shū)寫(xiě)在form標(biāo)簽之內(nèi),通過(guò)表單元素的form屬性對(duì)應(yīng)form標(biāo)簽的id屬性來(lái)進(jìn)行綁定提交對(duì)應(yīng)的form -->
<form id="bd1" action="" method=""></form>
<input type="text" form="bd1">
- label 可以不使用 label for
<!-- 通過(guò)使用label包裹對(duì)應(yīng)的元素和文字來(lái)實(shí)現(xiàn) label for的功能 -->
<label><input type="radio" name="sex">男</label>
- 占位符 placeholder
<input type="text" placeholder="請(qǐng)輸入內(nèi)容...">
- 自動(dòng)獲取焦點(diǎn) autofocus
<!-- autofocus 自動(dòng)獲取焦點(diǎn)屬性只能存在一個(gè) -->
<input type="text" placeholder="請(qǐng)輸入內(nèi)容..." autofocus>
- 必填項(xiàng) required
<!-- 表單提交時(shí)會(huì)進(jìn)行驗(yàn)證非空 -->
<input type="text" placeholder="請(qǐng)輸入內(nèi)容..." required>
- input的輸入類(lèi)型增加
<input type="text"> <!-- 定義文本框(基本) -->
<input type="password"> <!-- 定義密碼框 -->
<input type="submit"> <!-- 定義form提交 -->
<input type="radio"> <!-- 定義單選框 -->
<input type="checkbox"> <!-- 定義復(fù)選框 -->
<input type="button"> <!-- 定義按鈕 -->
<!-- h5新增type 當(dāng)瀏覽器不支持輸入類(lèi)型時(shí),會(huì)被視為輸入類(lèi)型 text -->
<input type="number"> <!-- 用于應(yīng)該包含數(shù)字值的輸入字段廉沮。 -->
<input type="date"> <!-- 用于應(yīng)該包含日期的輸入字段颓遏。 -->
<input type="color"> <!-- 用于應(yīng)該包含顏色的輸入字段。 -->
<input type="range" min="1" max="100" value="10"> <!-- 用于應(yīng)該包含一定范圍內(nèi)的值的輸入字段滞时。拖拽條 -->
<input type="month"> <!-- 允許用戶選擇月份和年份叁幢。 -->
<input type="week"> <!-- 允許用戶選擇周和年。 -->
<input type="time"> <!-- 允許用戶選擇時(shí)間(無(wú)時(shí)區(qū))坪稽。 -->
<input type="datetime"> <!-- 允許用戶選擇日期和時(shí)間(有時(shí)區(qū))曼玩。 -->
<input type="datetime-local"> <!-- 允許用戶選擇日期和時(shí)間(無(wú)時(shí)區(qū))。 -->
<input type="email"> <!-- 用于應(yīng)該包含電子郵件地址的輸入字段窒百。 -->
<input type="search"> <!-- 用于搜索字段(搜索字段的表現(xiàn)類(lèi)似常規(guī)文本字段)黍判。 -->
<input type="tel"> <!-- 用于應(yīng)該包含電話號(hào)碼的輸入字段。 -->
<input type="url"> <!-- 用于應(yīng)該包含 URL 地址的輸入字段 -->