001Html5基本结构.ppt

13-使用ARIA 改善可访问性 WAI-ARIA（Web Accessibility Initiative’s Accessible Rich Internet Applications， 无障碍网页倡议– 无障碍的富互联网应用，也简称ARIA）是一种技术规范，自称“有桥梁作用的技术”。 无障碍访问的意义是让所有的访问者都能获取网站的内容。你的网站的一部分访问者可能需要借助辅助设备（如屏幕阅读器）访问你的页面内容。 一个或多个ARIA role 属性——地标角色 role=banner（横幅） 面向全站的内容，通常包含网站标志、网站赞助者标志、全站搜索工具等。横幅通常显示在页面的顶端，而且通常横跨整个页面的宽度将其添加到页面级的header 元素，每个页面只用一次。 role=navigation（导航） 文档内不同部分或相关文档的导航性元素（通常为链接）的集合与nav 元素是对应关系。应将其添加到每个nav 元素，或其他包含导航性链接的容器。这个角色可在每个页面上使用多次，但是同nav 一样，不要过度使用该属性。 role=main（主体） 文档的主要内容与main 元素是对应关系。最好将其添加到main 元素，也可以添加到其他表示主体内容的元素（可能是div）。在每个页面仅使用一次。 role=complementary（补充性内容） 文档中作为主体内容补充的支撑部分。它对区分主体内容是有意义的与aside 元素是对应关系。应将其添加到aside 或div 元素（前提 是该div 仅包含补充性内容）。可以在一个页面里包含多个complementary 角色，但不要过度使用。 role=contentinfo（内容信息） 包含关于文档的信息的大块可感知区域这类信息的例子包括版权声明和指向隐私权声明的链接等将其添加至整个页面的页脚（通常为footer 元素）。每个页面仅使用一次 14-为元素指定类别或ID 名称 为元素添加唯一的ID 在元素的开始标签中输入id=“name ”，其中name 是唯一标识该元素的名称。name 几乎可以是任何字符，只要不以数字开头且不包含空格。 为元素指定类别的方法 在元素的开始标签中输入class=“name ”，其中name 是类别的名称。如果要指定多个类别，用空格将不同的类别名称分开即可，如class=“name anothername ”。（可以指定两个以上的类别名称。） 不管你打算如何使用id 和class，都应该为它们选择有意义的名称。例如，如果你使用class 是出于格式化目的，应避免使用描述表现样式的名称，如class=red，因为你可能在下周决定将配色方案改为蓝色。尽管在CSS 中对分配给某一类元素的颜色进行修改是相当容易的，但这样做会导致你的HTML 拥有一个名为红色却实际呈现为另一种颜色的class。同时，改变HTML 中所有的class 通常是一项繁琐的工作。 * HTML5 for Web前端 传习IT培训 第三章 第1课-基本HTML 结构 课程概要 开始编写网页 ?创建页面标题 ?创建分级标题 ?普通页面构成 ?创建页眉 ?标记导航 ?标记网页主要区域 ?创建文章 定义区块 ?指定附注栏 ?创建页脚 ?创建通用容器 ?使用 ARIA 改进可访问性 ?为元素指定类或 ID ?为元素添加 title 属性 ?添加注释 1-开始编写网页 !DOCTYPE html html lang=“zh head meta charset=utf-8 / title/title /head body /body /html HTML5的DOCTYPE不区分大小写。 有的人可能输入!doctype html，不过，使用!DOCTYPE html 是更常规的做法。 搜索引擎可能会根据lang 属性指定的语言区分搜索结果，从而仅显示与搜索词语言相同的页面。屏幕阅读器也可能通过指定的语言调整其发音。 HTML 4 和XHTML 1.0 时代，有好几种可供选择的DOCTYPE，每一种都会指明 HTML 的版本，以及使用的是过渡型还是严格型模式。 由于它们太难记，开发人员不得不每次都从某个地方把这些代码复制进来。 例如，下面是XHTML 严格型文档的DOCTYPE。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN / TR/xhtml1/DTD/xhtml1-strict.dtd 看起来令人费解。 幸好，所有的浏览器，无论新旧，都理解HTML5 的DOCTYPE，因此你可以坚持在所 有页面中使用它，忘掉过去的那些DOCTYPE。（唯一可能用到过去那些DOCTYPE 的情况是继承一个