第4章 HTML5与响应式Web设计

1、第四章网页设计软件工程教学与研究演讲人：罗，内容，网页标题，语法，新功能，新语义元素，文本级元素，废弃的超文本标记语言功能，在超文本标记语言中嵌入媒体响应的超文本标记语言5视频和嵌入帧，关于“离线优先级”，4.1超文本标记语言5概述，超文本标记语言5是超文本标记语言的最新版本，2014年10月，万维网联盟(W3C)完成了标准制定。HTML5的设计目的是支持移动设备上的多媒体。4.1HTML5概述，HTML5浏览器支持：所有现代浏览器都支持HTML5浏览器，不可识别的元素将是内联元素。4.1HTML5概述，HTML5中一些有趣的新特性：绘画元素：画布媒体回放元素：视频和音频更好地支持本地离线存储

2、；新的语义元素：文章、页脚、页眉、导航、章节；新的表单控件：日历、日期、时间、电子邮件、url、搜索、4.2htm5页眉、doctype:告知浏览器文档类型、HTML5: HTML4.013360、4.2htm5页眉、HTML标记和lang属性：告知浏览器语言、元素内容和包含文本元素属性的主要语言、4.2htm5页眉、字符集窗口95和早期系统默认字符集：ANSIHTML4默认字符集：ISO-8859-1HTML5默认字符不要混合反斜线大小写，省略4.3 HTML 5语法新功能，一个标签：多个元素可以放在一个标签中。 例1: p66，其他A，按钮和表单不能放在A中，新的语义元素4.4HTML5。

3、大多数网站都有相同的结构(页眉、页脚和导航栏)。传统的div方法不能很好地区分。语义标签是为不同的部分设置的，以便于理解：标签的含义，4.4HTML5的新语义元素，表示页面的主要内容区域。每个页面只能有一个主要内容区域。主要内容区域：文档中的唯一内容，不属于主要内容区域：导航链接、版权信息网站、广告搜索表单中的重复内容、4.4HTML5的新语义元素、文档或应用程序中的一般区域、一般没有应用的样式、打包联系人信息、新闻来源、可见组件、4.4HTML5的新语义元素、页面中的主要导航链接，不一定在页脚中。Item1item2tem3item4item5，4.4htm5新语义元素：页面中包含的独立内容

4、块：页面中的侧栏：包含批注、图标、照片、代码的标题：图，4.4htm5的新语义元素，以及：展开和折叠组件示例的抽象内容3，面板默认打开，4.4htm5的新语义元素，页面头部的语义标记，或类似地，它也可以是文章元素的一部分，4.4HTML5的新语义元素：标记联系信息，不包括邮政地址或其他联系信息，应该放在P标签中，4.4HTML5的新语义元素，h1h6:标记标题，不能用于标记字幕、副标题和广告语言。示例：P72，4.5HTML5文本级元素：添加CSS样式。不能包含其他标签：指示需要强调的文本，向文本添加样式，突出显示不同的文本形式，4.6无效的HTML功能，两个类别：兼容：可用，警告将显示为不兼

5、容：不可用，可能的问题/tr/HTML5/obsolete.html #过时但符合的警告功能，4.7使用HTML5元素，例如，4.8WCAG和WAI-ARIA，WCAG:网页内容可访问性指南WCAG旨在提供一个标准的网页内容可访问性原则，可以满足个人、组织和政府的交流需求：感知、可操作性、易于理解、易于理解WAI-ARIA:无障碍网络应用技术目标：解决网页动态内容的无障碍问题一般技能：不要使用语义元素的角色，尽可能使用正确的元素，4.9在HTML5中嵌入媒体，背景：苹果拒绝使用HTML5代替闪存渲染媒体HTML5在IOS设备中添加视频：示例预加载=自动循环演示者=myvideoposter.png，4.9在HTML5中嵌入媒体，视频元素支持三种视频格式，4.9在HTML5中嵌入媒体， 音频元素支持三种音频格式：4.10响应HTML5视频和嵌入式帧，响应视频：删除宽度和高度属性，并添加最大宽度：100%； height:auto嵌入式框架p79，4月11日关于“离线第一”，离线第一