第4章 HTML5与响应式Web设计

武汉传媒学院武汉传媒学院目录•HTML5概述•HTML5网页头•HTML5语法新特性•HTML5的新语义元素•HTML5文本级元素•作废的HTML特性•WCAG和WAI-ARIA•在HTML5中嵌入媒体•响应式HTML5视频与内嵌框架•关于“离线优先”武汉传媒学院4.1HTML5概述•HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定•HTML5的设计目的是为了在移动设备上支持多媒体武汉传媒学院4.1HTML5概述•HTML5浏览器支持：现代的浏览器都支持HTML5•所有浏览器，对无法识别的元素会作为内联元素武汉传媒学院4.1HTML5概述•HTML5中的一些有趣的新特性：•绘画元素：canvas•媒介回放元素：video和audio•对本地离线存储的更好的支持•新的语义元素：article、footer、header、nav、section•新的表单控件：calendar、date、time、email、url、search武汉传媒学院4.2HTML5网页头•doctype：告诉浏览器文档类型，•HTML5：!DOCTYPEhtml•HTML4.01:!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN武汉传媒学院4.2HTML5网页头•HTML标签与lang属性：告诉浏览器语言htmllang=”en”!--中文:zh--元素内容以及包含文本的元素属性的主语言武汉传媒学院4.2HTML5网页头•字符集•Windows95及其之前系统默认字符集：ANSI•HTML4默认字符集：ISO-8859-1•HTML5默认字符集：UTF-8武汉传媒学院4.3HTML5语法新特性•属性值不用带双引号•结束不用反斜杠•大小写混用linkhref=CSS/main.cssrel=stylesheetdivid=wrapperimgSRC=img.jpg省略type=”text/css”武汉传媒学院4.3HTML5语法新特性•a标签：允许将多个元素放到一个a标签中1例：P66a中不能放其它a、button、表单武汉传媒学院4.4HTML5的新语义元素•大部分网站具有相同结构（页头、页脚、导航条……），传统div方式不能很好区分•为了便于理解给不同部分设置语义标签•语义：标记具有的含义武汉传媒学院4.4HTML5的新语义元素•main：表示页面主内容区，每个页面只能有一个主内容区•主内容区：文档中特有的内容不属于主内容区：导航链接版权信息站点标志广告搜索表单重复出现的内容武汉传媒学院4.4HTML5的新语义元素•section：文档或应用中通用区域，一般不应用样式包装联系信息、新闻源、可见组件武汉传媒学院4.4HTML5的新语义元素•nav：页面中的主导航链接，不一定要在页脚中navahref=#item1/aahref=#item2/aahref=#item3/aahref=#item4/aahref=#item5/a/nav武汉传媒学院4.4HTML5的新语义元素•article：页面中包含的独立内容块•aside：页面中的侧边栏•figure：包含注解、图示、照片、代码figurecaption：figure的标题武汉传媒学院4.4HTML5的新语义元素•detail和summary：展开收起部件example3detailsopensummary摘要/summaryp内容/p/details面板默认打开武汉传媒学院4.4HTML5的新语义元素•header：页面的头部的语义标记，或者它也可以是article元素的一部分，一个页面可以出现多次•footer：一个页面脚部的语义标记。同样，它也可以是article元素的一部分武汉传媒学院4.4HTML5的新语义元素•address：标记联系人信息不包含邮政地址或其它联系信息应放在p标签武汉传媒学院4.4HTML5的新语义元素•h1~h6：标记标题，不能用于标记副标题、字幕、广告语例：P72武汉传媒学院4.5HTML5文本级元素•b：添加CSS样式，不能包含其它标记•em：表示需要强调的文本，给文本添加样式•i：突出不同文本形式武汉传媒学院4.6作废的HTML特性•两类：•兼容：能使用，会出现警告•不兼容：不能使用，可能出问题•武汉传媒学院4.7使用HTML5元素example武汉传媒学院4.8WCAG和WAI-ARIA•WCAG：Web内容无障碍指南•WCAG宗旨：提供一份能满足个人、组织和政府间交流需求的Web内容无障碍的标准•原则：感知，可操作性，易于理解，稳定性武汉传媒学院4.8WCAG和WAI-ARIA•WAI-ARIA：无障碍的网页应用技术•目标：总体上解决网页动态内容的无障碍问题•技巧：•不要对语义元素使用角色•尽可能使用正确的元素武汉传媒学院4.9在HTML5中嵌入媒体•背景：苹果拒绝在IOS设备中采用HTML5替代Flash渲染媒体•HTML5添加视频：Examplevideowidth=640height=480controls-!默认播放控件-preload=auto-!预加载-loop-!重复播放-poster=myVideoPoster.png-!首屏图像-武汉传媒学院4.9在HTML5中嵌入媒体•video元素支持三种视频格式：格式IEFirefoxOperaChromeSafariOggNo3.5+10.5+5.0+NoMPEG49.0+NoNo5.0+3.0+WebMNo4.010.6+6.0+No武汉传媒学院4.9在HTML5中嵌入媒体•audio元素支持三种音频格式：IE9Firefox3.5Opera10.5Chrome3.0Safari3.0Ogg√√√MP3√√√Wav√√√武汉传媒学院4.10响应式HTML5视频与内嵌框架•响应式视频：•去掉width和height属性•添加max-width:100%;height:auto;•内嵌框架P79武汉传媒学院4.11关于”离线优先”•离线优先(offline-first):保证网站和应用不上网也能加载到内容•原理：第一次加载后将数据缓存，在没有清除缓存前提下，下一次没有网络也可以加载•IE9浏览器目前是不支持的，移动端都能支持