《响应式Web设计：HTML5和CSS3实战(第2版)》04章 - 学习笔记

响应式Web设计:HTML5和CSS3实战(第2版)

第四章 HTML5 和 响应式Web设计

4.1 得到普遍支持的HTML5标签

腻子脚本

• 作用是弥补老旧浏览器对H5的支持
• Modernizr

4.2 H5 结构

4.2.1 Doctype

• • 大小写无所谓
  • 告诉浏览器以“标准模式”渲染页面
    × 在标准模式中，浏览器以其支持的最高标准呈现页面
    × 在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。

4.2.2 lang

4.2.3 字符编码

4.3 宽容的H5

• 没有结束标签的反斜杠

• 没有引号

• 大小写混用

• 甚至是省略head标签

• ...

• 依然有效

• 推荐H5模板：HTML5 Boilerplate

  • 预置了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元素的标题
    
>

4.4.7 detail 和 summary 元素

• 页面中展开收起的部件

    

        
概要
        
详细内容
    

• 支持这两个元素的浏览器一般都会加一些默认样式，可以手动清除：

    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来标记标题和副标题
• 不能用于副标题、字幕、广告语，除非想把他们用作新区块或子区块的标题
• 如：

    
title
    
vice title
    
body ...

• 应该改为：

    
title
    
vice title
    
body ...

4.5 文本级元素

4.5.1 元素

• 只表示为引人注意而标记的文本，不传达更多的重要信息，也不用于表达其他愿望和情绪

4.5.2 元素

• 表示页面中需要强调的内容

4.5.1 元素

• 可以表示斜体
• 还可以标记出罕见的文本

4.6 H5中嵌入媒体

视频和音频

• 最简单形式：
• 控件 —— 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实现