【HTML5学习笔记】6：文档元素的使用

来源：互联网发布：unity3d跳跃代码编辑：程序博客网时间：2024/06/06 15:48

文档元素可以用来划分各个不同的内容，让整个页面布局变得清晰。其本身多数没有什么实际作用效果，完全是为了配合语义，以强调它的结构性。用来替代没有语义的div。只有和后面学习的CSS使用才能起到布局和样式的效果。

因为没有用CSS这些都看不出效果，所以以下都直接截一下教学视频里的老师用画图画的图来看一下大致效果。

双标签<header>用来设置页面的标头部分。

*看看是内联还是区块

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8"><title>文档元素</title></head><body><header>这里存放页面的标头部分：LOGO，标题，导航等</header>这句用来测试测试header是内联还是区块</body></html>

运行结果：

发现这两句话发生了换行，说明<header>标签是有定义的，也就是属于区块<div>，而如果将header该成header1等没有定义的表情，发现这两句话将是连在一起的

那样就是属于内联<span>。说明了标签不能随便写。

大致效果：

*<footer>用来存放页面的尾部

<!-- 在body中加入 --><footer>这里存放页面的尾部：版权声明，友情链接等</footer>

大致效果：

双标签<h1>~<h6>用来添加标题，实际上就是加粗并改变字体大小。

*<h1>~<h6>的使用

<!-- 在<header>中加入代码 --><h1>这里是一个大标题</h1><h4>这里是一个副标题</h4><!-- 在<footer>中加入代码 --><h4>这里是尾部的副标题</h4>

运行结果：

为了让两个h4分离开，并且使第一个h4和h1绑定在一起。就要对它们进行组合。双标签<hgroup>的作用就是当多个标题出现，干扰到一对或多个本身需要整合的标题时进行整合。

做法就是将<h1>和第一个<h4>那两句放在双标签<hgroup>里，后面的<h4>也因此而不被干扰，不贴代码了。

*<section>定义一个文档的主题内容

<!-- 在body中加入 --><section>这里是文档的主题部分</section>

目前的大致效果：

双标签<nav>用于添加导航，如在头部添加导航，则可以在<header>里加入

<nav>这里是一个导航<nav>

大致效果：

双标签<article>用来添加一个独立成篇的文档，相当于body里面有小的body。里面可以添加头、尾、主题等一系列内容。比如博文列表，每篇博文都有自己的头、尾、主题。还有论坛的帖子、用户的评论等等都是。

*添加一个article

<!-- 在body中加入 --><article><header>...</header><section>...</section><footer>...</footer></article>

目前的大致效果：

双标签<aside>用于生成注释栏，它常常是可有可无的。如博客系统就会有侧栏，有最近评论，最近发的帖子之类的。

侧栏里也可以包含导航<nav>，也可以包含<footer>尾部栏。

目前的大致效果：

双标签<address>用来表示联系信息，既可以放在文档(body)中，又可以放在小文档(article)中，本身具有斜体的作用。常常用在<footer>里。

双标签<details>生成详情区域，其子标签<summary>在其内部生成说明标签。这个大多数主流浏览器都未支持。

本来就不该有所谓的期待，人会变得过于依赖未来。

0 0