《响应式Web设计：HTML5和CSS3实战(第2版)》04章
2017-11-07 本文已影响0人
Revontulet
响应式Web设计:HTML5和CSS3实战(第2版)
第四章 HTML5 和 响应式Web设计
4.1 得到普遍支持的HTML5标签
腻子脚本
- 作用是弥补老旧浏览器对H5的支持
- Modernizr
4.2 H5 结构
4.2.1 Doctype
-
<!DOCTYPE html>- 大小写无所谓
- 告诉浏览器以“标准模式”渲染页面
× 在标准模式中，浏览器以其支持的最高标准呈现页面
× 在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。
4.2.2 lang
<html lang="en">
4.2.3 字符编码
<meta charset="utf-8">
4.3 宽容的H5
-
没有结束标签的反斜杠
-
没有引号
-
大小写混用
-
甚至是省略head标签
-
...
-
<img SRC=SSS.jpg aLt=fff>依然有效 -
推荐H5模板：HTML5 Boilerplate
- 预置了HTML5“最佳实践”
× 基础的样式
× 腻子脚本
× 可选的工具 - 阅读这个模板，可以学到很多有用的技巧
- 预置了HTML5“最佳实践”
4.3.1 理性编写HTML5
- 清晰胜于简洁
4.3.2 强大的a标签
- 可以在a标签中放block元素
- 但是不能把另一个a标签或者button之类的交互性元素放到同一个a标签中
- 也不能把表单放到a标签中
4.4 H5中的新语义元素
4.4.1 main 元素
- 表示页面主内容区
- 每个页面只有一个main元素
- 不能作为article、header、footer、nav、aside等其他H5语义元素的后代，但这些元素可以放入main中
4.4.2 section 元素
- 定义文档或应用中一个通用的区块
- 此元素不是应用特殊样式存在的
- 如果只是为了添加样式而包装内容，还是要用div
- 一般用section包装可见组件
- 判别标准：看一个区块内是否有标题的需求，如h2，如果没有，最好还是用div
4.4.3 nav 元素
- 用于包装指向其他页面或同一页面不同部分的主导航链接
- 不一定要用在页脚中
- 如果平时用ul和li来写导航，可以转为用nav嵌套多个a标签
4.4.4 article 元素
- 用于包含一个独立的内容块
- 即可以整个拿到其他页面，却不会造成信息缺失的内容
- 此元素中的内容与页面其他部分弱耦合
4.4.5 aside 元素
- 包含与旁边内容不相关的内容
- 可以用来包装侧边栏
- 也适合包装“突出引用”、“广告”或“导航”元素
- 基本上和主内容没有直接关系的，都可以放在这里
- 电商网站，可以把“购买了这种商品的其他用户还购买了。。。”放入
4.4.6 figure 和 figcaption 元素
<figure>包含注解、图示、照片、代码等
<figcaption>父figure元素的标题</figcaption>
</figure>>
4.4.7 detail 和 summary 元素
- 页面中展开收起的部件
<details>
<summary>概要</summary>
<p>详细内容</p>
</details>
- 支持这两个元素的浏览器一般都会加一些默认样式，可以手动清除：
summary::-webkit-details-marker{
display: none;
}
4.4.8 header 元素
- 可以在一个页面中出现多次
- 每个section中都可以有一个header
4.4.9 footer 元素
- 同header元素一样，应该包含于主内容相关的信息
- 作者联系信息不适合放在这里
4.4.10 address 元素
- 用于标记联系人信息，为最接近的article或body所用
4.4.11 h1 - h6
- 规范不推荐用h1-h6来标记标题和副标题
- 不能用于副标题、字幕、广告语，除非想把他们用作新区块或子区块的标题
- 如：
<h1>title</h1>
<h2>vice title</h2>
<p>body ...</p>
- 应该改为：
<h1>title</h1>
<p>vice title</p>
<p>body ...</p>
4.5 文本级元素
4.5.1 <b> 元素
- 只表示为引人注意而标记的文本，不传达更多的重要信息，也不用于表达其他愿望和情绪
4.5.2 <em> 元素
- 表示页面中需要强调的内容
4.5.1 <i> 元素
- 可以表示斜体
- 还可以标记出罕见的文本
4.6 H5中嵌入媒体
视频和音频
- 最简单形式：
<vedio src="sss.mp4" width="600" height="320"></vedio>
- 控件 —— controls
- 自动播放 —— autoplay
- 预加载 —— preload
- 重复播放 —— loop
- 首屏图片 —— poster
- audio 不包括宽高和poster属性，其他很近似
4.7 响应式H5视频与内嵌框架
- H5视频不是响应式的
- 解决办法：
- 删掉宽高属性
- css中写“max-width: 100%; height: auto;”
- 这个方法能解决本地视频，但是不能解决youtube或者优酷转来的嵌入式视频
- 解决办法是推荐用在线服务： http://embedresponsively.com
4.8 关于离线优先
- H5离线web应用
- 一般是web应用和LocalStorage结合
- 现在可以用Service Workers实现
