《第4章 HTML5与响应式Web设计》由会员分享，可在线阅读，更多相关《第4章 HTML5与响应式Web设计（29页珍藏版）》请在金锄头文库上搜索。
1、响应式Web设计 HTML5+CSS3实战,第4章 HTML5与响应式 Web设计 软件工程教研室 主讲：罗良夫,目录,HTML5概述 HTML5网页头 HTML5语法新特性 HTML5的新语义元素 HTML5文本级元素 作废的HTML特性 WCAG和WAI-ARIA 在HTML5中嵌入媒体 响应式HTML5视频与内嵌框架 关于“离线优先”,4.1 HTML5概述,HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定 HTML5的设计目的是为了在移动设备上支持多媒体,4.1 HTML5概述,HTML5浏览器支持：现代的浏览器都支持 HTML5 所有浏览器，对无
2、法识别的元素会作为内联元素,4.1 HTML5概述,HTML5 中的一些有趣的新特性： 绘画元素：canvas 媒介回放元素：video 和 audio 对本地离线存储的更好的支持 新的语义元素：article、footer、header、nav、section 新的表单控件：calendar、date、time、email、url、search,4.2 HTML5网页头,doctype：告诉浏览器文档类型， HTML5： HTML4.01: ,4.2 HTML5网页头,HTML标签与lang属性：告诉浏览器语言 ,元素内容以及包含文本的元素属性的主语言,4.2 HTML5网页头,字符集 Wi
3、ndows 95 及其之前系统默认字符集：ANSI HTML4默认字符集：ISO-8859-1 HTML5默认字符集：UTF-8,4.3 HTML5语法新特性,属性值不用带双引号 结束不用反斜杠 大小写混用 ,省略type=”text/css”,4.3 HTML5语法新特性,a标签：允许将多个元素放到一个a标签中1 例：P66,a中不能放其它a、 button、表单,4.4 HTML5的新语义元素,大部分网站具有相同结构（页头、页脚、导航条），传统div方式不能很好区分 为了便于理解给不同部分设置语义标签 语义：标记具有的含义,4.4 HTML5的新语义元素,：表示页面主内容区，每个页面只能有
4、一个主内容区 主内容区：文档中特有的内容,不属于主内容区： 导航链接 版权信息 站点标志 广告 搜索表单 重复出现的内容,4.4 HTML5的新语义元素,：文档或应用中通用区域，一般不应用样式,包装联系信息、新闻源、可见组件,4.4 HTML5的新语义元素,：页面中的主导航链接，不一定要在页脚中, item1 item2 item3 item4 item5 ,4.4 HTML5的新语义元素,：页面中包含的独立内容块 ：页面中的侧边栏 ：包含注解、图示、照片、代码 ：figure的标题,4.4 HTML5的新语义元素,和：展开收起部件 example3 摘要 内容 ,面板默认打开,4.4 HTM
5、L5的新语义元素,：页面的头部的语义标记，或者它也可以是article元素的一部分，一个页面可以出现多次 ：一个页面脚部的语义标记。同样，它也可以是article元素的一部分,4.4 HTML5的新语义元素,：标记联系人信息,不包含邮政地址或其它联系信息 应放在p标签,4.4 HTML5的新语义元素,h1h6：标记标题，不能用于标记副标题、字幕、广告语 例：P72,4.5 HTML5文本级元素,：添加CSS样式，不能包含其它标记 ：表示需要强调的文本，给文本添加样式 ：突出不同文本形式,4.6 作废的HTML特性,两类： 兼容：能使用，会出现警告 不兼容：不能使用，可能出问题 https:/w
6、ww.w3.org/TR/html5/obsolete.html#warnings-for-obsolete-but-conforming-features,4.7 使用HTML5元素,example,4.8 WCAG和WAI-ARIA,WCAG：Web内容无障碍指南 WCAG宗旨：提供一份能满足个人、组织和政府间交流需求的Web内容无障碍的标准 原则：感知，可操作性，易于理解，稳定性,4.8 WCAG和WAI-ARIA,WAI-ARIA：无障碍的网页应用技术 目标：总体上解决网页动态内容的无障碍问题 技巧： 不要对语义元素使用角色 尽可能使用正确的元素,4.9 在HTML5中嵌入媒体,背景：
7、苹果拒绝在IOS设备中采用HTML5替代Flash渲染媒体 HTML5添加视频： Example preload=auto loop poster=myVideoPoster.png,4.9 在HTML5中嵌入媒体,video 元素支持三种视频格式：,4.9 在HTML5中嵌入媒体,audio 元素支持三种音频格式：,4.10 响应式HTML5视频与内嵌框架,响应式视频： 去掉width和height属性 添加max-width:100%;height:auto; 内嵌框架 P79,4.11 关于”离线优先”,离线优先(offline-first):保证网站和应用不上网也能加载到内容 原理：第一次加载后将数据缓存，在没有清除缓存前提下，下一次没有网络也可以加载 IE9浏览器目前是不支持的，移动端都能支持,
