Web前端开发与应用第3章 页面元素和属性

•
</ul>
•
</nav>
• </header>
WEB前端开发与应用教程（HTML5+CSS3+JAVASCRIPT）
12
3.1.2 article元素
• HTML5 的另一个新元素便是 article。article元素在页面 中用来表示结构完整且独立的内容部分，如论坛的一个帖 子，杂志或者报纸的一篇文章。
•
<li><a href="#" title="花茶及文化">花茶及文化</a></li>
•
<li><a href="#" title="饮品及美食">饮品及美食</a></li>
•
<li><a href="#" title="俱乐部">俱乐部</a></li>
•
<li><a href="form.html" title="在线订购">在线订购</a></li>
WEB前端开发与应用教程（HTML5+CSS3+JAVASCRIPT）
7
3.1 结构元素
WEB前端开发与应用教程（HTML5+CSS3+JAVASCRIPT）
8
3.1.1 header元素
• header元素是一种具有引导和导航作用的辅助元素，通常， header元素可以包含一个区块的标题，但也可以包含其他 的内容。
WEB前端开发与应用教程（HTML5+CSS3+JAVASCRIPT）
11
3.1.1 header元素
• <header >
• <img src="images/logo.png" alt="茗茶馆">
•
<nav>
•
<ul>
•
<li ><a href="home.html" title="主页">主页</a></li>
WEB前端开发与应用教程（HTML5+CSS3+JAVASCRIPT）
15
3.1.4 footer元素
footer标签定义section或document的页脚，包含了与页 面、文章或是部分内容有关的信息，比如说文章的作者或者 日期。作为页面的页脚时，一般包含了版权、相关文件和链 接。它和<header>标签使用基本一样，可以在一个页面中 多次使用，如果在一个区段的后面加入footer，那么它就相 当于该区段的页wenku.baidu.com了。
第3章 页面元素和属性
第3章 页面元素和属性
3.1 结构元素 3.2 页面节点 3.3 交互元素 3.4 文本层次语义元素 3.5 分组元素 3.6 全局属性 3.7 练习
WEB前端开发与应用教程（HTML5+CSS3+JAVASCRIPT）
2
3.1 结构元素
WEB前端开发与应用教程（HTML5+CSS3+JAVASCRIPT）
3
3.1 结构元素
HTML5的目标是通过一些新标签，新功能为开发更加简单、 独立、标准的通用Web应用提供了标准。新的标准解决了 三大问题：浏览器兼容问题，解决了文档结构不明确的问题， 解决了Web应用程序功能受限等问题。本章介绍的元素都 是HTML5为了解决问题而新增的。有了新的结构性的标签 的标准，可以让HTML文档更加清晰，可阅读性更强，更利 于SEO，也更利于视障人士阅读。
WEB前端开发与应用教程（HTML5+CSS3+JAVASCRIPT）
4
3.1 结构元素
• 在之前的HTML页面中，大家基本上都是用了Div+CSS的 布局方式。而搜索引擎去抓取页面的内容的时候，它只能 猜测某个Div内的内容是文章内容容器，或者是导航模块 的容器，或者是作者介绍的容器等等。也就是说整个 HTML文档结构定义不清晰，HTML5中为了解决这个问题， 专门添加了：页眉、页脚、导航、文章内容等跟结构相关 的结构元素标签。
WEB前端开发与应用教程（HTML5+CSS3+JAVASCRIPT）
9
3.1.1 header元素
• 一个页面可以有任意数量的header元素，它们的含义可以 根据其上下文而有所不同。例如，处于页面顶端或接近这 个位置的 header 可能代表整个页面的页眉（有时称为页 头）。通常，页眉包括网站标志、主导航和其他全站链接， 甚至搜索框。
•
</header>
•
<p>
•
祁门红茶简称祁红，茶叶原料选用当地的中叶、中生种茶树“槠叶种”（又名祁门种）制作，是中国
历史名茶，著名红茶精品。祁门红茶是红茶中的极品，享有盛誉，是英国女王和王室的至爱饮品，高香美誉，
香名远播，美称“群芳最”、“红茶皇后”。
•
</p>
•
<footer>
•
<span>阅读(99)</span>
•
</footer>
• </article>
WEB前端开发与应用教程（HTML5+CSS3+JAVASCRIPT）
14
3.1.3 aside元素
aside标签用来装载非正文的内容，被视为页面里面一个单 独的部分。它包含的内容与页面的主要内容是分开的，可以 被删除，而不会影响到网页的内容、章节或是页面所要传达 的信息。例如广告，成组的链接，侧边栏等等。
• article元素是可以嵌套使用的，内层的内容在原则上需要 与外层内容相关联。
WEB前端开发与应用教程（HTML5+CSS3+JAVASCRIPT）
13
3.1.2 article元素
• <article>
•
<header>
•
<h3>茗茶推荐——祁门红茶</h3>
•
<time datetime="2016-10-10">2016年10月10日</time>
WEB前端开发与应用教程（HTML5+CSS3+JAVASCRIPT）
5
3.1 结构元素
• <div>页面布局
WEB前端开发与应用教程（HTML5+CSS3+JAVASCRIPT）
6
3.1 结构元素
• HTML5新标签带来的新的布局则是下面这种情况： 通常页面的构成有四个主要组件：带导航的页头、显示在 主体内容区域的文章、显示次要信息的辅助栏以及页脚。
WEB前端开发与应用教程（HTML5+CSS3+JAVASCRIPT）
10
3.1.1 header元素
• <header>标签定义文档的页眉，通常是一些引导和导航 信息。它不局限于写在网页头部，也可以写在网页内容里 面。通常<header>标签至少包含（但不局限于）一个标 题标记（<h1>-<h6>），还可以包括<hgroup>标签， 还可以包括表格内容、标识、搜索表单、<nav>导航等。