html5+css3ppt课件.ppt

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