響應(yīng)式Web設(shè)計(jì):HTML5和CSS3實(shí)戰(zhàn)(第2版)
第四章 HTML5 和 響應(yīng)式Web設(shè)計(jì)
4.1 得到普遍支持的HTML5標(biāo)簽
膩?zhàn)幽_本
- 作用是彌補(bǔ)老舊瀏覽器對(duì)H5的支持
- Modernizr
4.2 H5 結(jié)構(gòu)
4.2.1 Doctype
-
<!DOCTYPE html>- 大小寫(xiě)無(wú)所謂
- 告訴瀏覽器以“標(biāo)準(zhǔn)模式”渲染頁(yè)面
× 在標(biāo)準(zhǔn)模式中，瀏覽器以其支持的最高標(biāo)準(zhǔn)呈現(xiàn)頁(yè)面
× 在混雜模式中，頁(yè)面以一種比較寬松的向后兼容的方式顯示逆甜。混雜模式通常模擬老式瀏覽器的行為以防止老站點(diǎn)無(wú)法工作距帅。
4.2.2 lang
<html lang="en">
4.2.3 字符編碼
<meta charset="utf-8">
4.3 寬容的H5
沒(méi)有結(jié)束標(biāo)簽的反斜杠
沒(méi)有引號(hào)
大小寫(xiě)混用
甚至是省略head標(biāo)簽
...
<img SRC=SSS.jpg aLt=fff>依然有效-
推薦H5模板：HTML5 Boilerplate
- 預(yù)置了HTML5“最佳實(shí)踐”
× 基礎(chǔ)的樣式
× 膩?zhàn)幽_本
× 可選的工具 - 閱讀這個(gè)模板倔叼，可以學(xué)到很多有用的技巧
- 預(yù)置了HTML5“最佳實(shí)踐”
4.3.1 理性編寫(xiě)HTML5
- 清晰勝于簡(jiǎn)潔
4.3.2 強(qiáng)大的a標(biāo)簽
- 可以在a標(biāo)簽中放block元素
- 但是不能把另一個(gè)a標(biāo)簽或者button之類的交互性元素放到同一個(gè)a標(biāo)簽中
- 也不能把表單放到a標(biāo)簽中
4.4 H5中的新語(yǔ)義元素
4.4.1 main 元素
- 表示頁(yè)面主內(nèi)容區(qū)
- 每個(gè)頁(yè)面只有一個(gè)main元素
- 不能作為article毫蚓、header棠赛、footer樊销、nav框弛、aside等其他H5語(yǔ)義元素的后代妻味，但這些元素可以放入main中
4.4.2 section 元素
- 定義文檔或應(yīng)用中一個(gè)通用的區(qū)塊
- 此元素不是應(yīng)用特殊樣式存在的
- 如果只是為了添加樣式而包裝內(nèi)容凸丸，還是要用div
- 一般用section包裝可見(jiàn)組件
- 判別標(biāo)準(zhǔn)：看一個(gè)區(qū)塊內(nèi)是否有標(biāo)題的需求很钓，如h2，如果沒(méi)有允趟，最好還是用div
4.4.3 nav 元素
- 用于包裝指向其他頁(yè)面或同一頁(yè)面不同部分的主導(dǎo)航鏈接
- 不一定要用在頁(yè)腳中
- 如果平時(shí)用ul和li來(lái)寫(xiě)導(dǎo)航，可以轉(zhuǎn)為用nav嵌套多個(gè)a標(biāo)簽
4.4.4 article 元素
- 用于包含一個(gè)獨(dú)立的內(nèi)容塊
- 即可以整個(gè)拿到其他頁(yè)面鸦致，卻不會(huì)造成信息缺失的內(nèi)容
- 此元素中的內(nèi)容與頁(yè)面其他部分弱耦合
4.4.5 aside 元素
- 包含與旁邊內(nèi)容不相關(guān)的內(nèi)容
- 可以用來(lái)包裝側(cè)邊欄
- 也適合包裝“突出引用”潮剪、“廣告”或“導(dǎo)航”元素
- 基本上和主內(nèi)容沒(méi)有直接關(guān)系的，都可以放在這里
- 電商網(wǎng)站分唾，可以把“購(gòu)買(mǎi)了這種商品的其他用戶還購(gòu)買(mǎi)了抗碰。。绽乔』∮”放入
4.4.6 figure 和 figcaption 元素
<figure>包含注解、圖示折砸、照片看疗、代碼等
<figcaption>父figure元素的標(biāo)題</figcaption>
</figure>>
4.4.7 detail 和 summary 元素
- 頁(yè)面中展開(kāi)收起的部件
<details>
<summary>概要</summary>
<p>詳細(xì)內(nèi)容</p>
</details>
- 支持這兩個(gè)元素的瀏覽器一般都會(huì)加一些默認(rèn)樣式，可以手動(dòng)清除：
summary::-webkit-details-marker{
display: none;
}
4.4.8 header 元素
- 可以在一個(gè)頁(yè)面中出現(xiàn)多次
- 每個(gè)section中都可以有一個(gè)header
4.4.9 footer 元素
- 同header元素一樣睦授，應(yīng)該包含于主內(nèi)容相關(guān)的信息
- 作者聯(lián)系信息不適合放在這里
4.4.10 address 元素
- 用于標(biāo)記聯(lián)系人信息两芳，為最接近的article或body所用
4.4.11 h1 - h6
- 規(guī)范不推薦用h1-h6來(lái)標(biāo)記標(biāo)題和副標(biāo)題
- 不能用于副標(biāo)題、字幕去枷、廣告語(yǔ)怖辆，除非想把他們用作新區(qū)塊或子區(qū)塊的標(biāo)題
- 如：
<h1>title</h1>
<h2>vice title</h2>
<p>body ...</p>
- 應(yīng)該改為：
<h1>title</h1>
<p>vice title</p>
<p>body ...</p>
4.5 文本級(jí)元素
4.5.1 <b> 元素
- 只表示為引人注意而標(biāo)記的文本，不傳達(dá)更多的重要信息删顶，也不用于表達(dá)其他愿望和情緒
4.5.2 <em> 元素
- 表示頁(yè)面中需要強(qiáng)調(diào)的內(nèi)容
4.5.1 <i> 元素
- 可以表示斜體
- 還可以標(biāo)記出罕見(jiàn)的文本
4.6 H5中嵌入媒體
視頻和音頻
- 最簡(jiǎn)單形式：
<vedio src="sss.mp4" width="600" height="320"></vedio>
- 控件 —— controls
- 自動(dòng)播放 —— autoplay
- 預(yù)加載 —— preload
- 重復(fù)播放 —— loop
- 首屏圖片 —— poster
- audio 不包括寬高和poster屬性竖螃，其他很近似
4.7 響應(yīng)式H5視頻與內(nèi)嵌框架
- H5視頻不是響應(yīng)式的
- 解決辦法：
- 刪掉寬高屬性
- css中寫(xiě)“max-width: 100%; height: auto;”
- 這個(gè)方法能解決本地視頻，但是不能解決youtube或者優(yōu)酷轉(zhuǎn)來(lái)的嵌入式視頻
- 解決辦法是推薦用在線服務(wù)： http://embedresponsively.com
4.8 關(guān)于離線優(yōu)先
- H5離線web應(yīng)用
- 一般是web應(yīng)用和LocalStorage結(jié)合
- 現(xiàn)在可以用Service Workers實(shí)現(xiàn)
