html5+css3课件

元素的title属性
• 可以使用title属性（ 与title元素不同）为 网站上任何部分加上 提示标签。而且它们 并不只是提示标签， 加上它们之后屏幕阅 读器可以为用户朗读 title文本，因此使用 title可以提升无障碍 访问功能。
作业：
用Dreamweaver制作一个简单的网页。
要求：根据语义在合适地方用上今天所学到的标签， 包括：div、title、hn(可选任意数量)、header、 footer、nav、main、article、section、aside、role 、li.
• 使用aside的例子还包括重要引述、侧栏， 指向相关文章的一组链接Biblioteka Baidu等。
创建页脚：footer
• footer元素代表嵌套它的最近的 article、aside、blockquote、body 、details、fieldset、figure、nav、 section或td元素的页脚。只有当它 最近的祖先是body时，它才是整个 页面的页脚。 • 如果一个footer包着它所在的区块的 所有内容，它代表的是像附录、索 引、版权、许可协议这样的内容。 • 不能再footer里面嵌套header或另 一个footer。同时，也不能将footer 嵌套在header或address元素里。
role=”complementary” (补充性内容）
与aside元素对应关系。应将其添 加到aside或div（前提是该div中仅 包含补充性内容）中。可以在一个 页面多包含几个complementary,不 要过度使用
将其添加至整个页面的页脚，每个 页面仅使用一次。
role=”contentinfo” (内容信息）
第三章
基本html结构
标题：hn
• html提供了六级标题用于 创建页面信息的层级关系 。使用h1、h2、h3、h4、 h5和h6元素对各级标题进 行标记，其中h1最高,后面 依次递减。
页眉
• 如果页面中有一块包含一组 介绍性或导航性内容的区域 ，应该用header元素进行标 记。一个页面可以有任意数 量的header元素，它们根据 其含义不同位置也不同，处 于页面顶端或者接近这个位 置的header可能代表整个页 面的页眉。
role=”banner” (横幅） role=”navigation” (导航）
如何使用及何时使用
将其添加到页面级的header元素，每个页面只用一次 与nav元素是对应关系。应将其添加到每一个nav元素，或 其他包含导航性链接的容器。
role=”main” (主体）
与main元素对应关系。最好将其添加到main元素，也可以 添加到其他表示主体内容的元素（可能是div),只能用一次
• section元素代表文档或应用的一个一般的 区块。在这里section是具有相似主题的一 组内容，通常包含一个标题。
• section用在文章里的可以这样理解， article包含整个文章，section则包含一篇 文章的一个小节，若干个段落组成一个 section。
附注栏：aside
• 有时候，页面中有一部分内容与主题内容 相关性不强但可以独立存在，就可以使用 aside标签。
文章：article
• article元素表示文档、页 面、应用或网站中一个独 立的容器，原则上是可独 立分配或可再用的，就像 聚合内容中的各部分。它 可以是一篇论坛帖子、一 篇杂志或报纸文章、一篇 博客条目、一则用户提交 的评论、一个交互式的小 部件或小工具，或者任何 其他独立的内容项。
定义块区：section
标记导航：nav
• nav中的链接可以指向页面中的 内容，也可以指向其他页面或资 源，或者两者兼而有之。无论哪 种情况，应该仅对文档中重要的 链接群使用nav。 • 用法：<nav>一组链接</nav>
标记页面主要区域：main
• 一个页面仅有一个部分代表其 主要内容。可以将这样的内容 包在main元素中，该元素在一 个页面中仅使用一次。 • 不能将main放置在article、 aside、footer、header或nav元 素中
通用容器：div
• 有时需要在一段内容外围包一个容器，从而 可以为其应用css样式或者javascript效果。 如果没有这个容器，页面就会不一样。div 是一个完全没有任何语义含义的容器。
地标角色：role
• WAI-ARIA(Web Accessibility Initiative's Accessible Rich Internet Applications,无障碍网页协议-无障碍富互联网应用，简称ARIA)是 一种技术规范，在html提供相应的语义功能之前，它会使用属性来 填补一些语义上的空白。 地标角色