HTML及CSS学习笔记 16 - 用于布局的语义标签

最新推荐文章于 2024-03-14 16:08:22 发布

chodenke

最新推荐文章于 2024-03-14 16:08:22 发布

阅读量803

点赞数

分类专栏： HTML及CSS学习笔记文章标签： HTML5 CSS3 语义标签区块标签

本文链接：https://blog.csdn.net/cgl125167016/article/details/90483358

版权

HTML及CSS学习笔记专栏收录该内容

16 篇文章 5 订阅

订阅专栏

本文是HTML及CSS课程的第十六课。主要介绍HTML5中新增的用于布局的语义标签，这些标签可以让开发人员和浏览器更加直观的了解网页的每个部分

一、新的语义标签

1、为何需要新的语义标签

以下是一个常见的页面草图，它由几个功能区域组成，页面标题，导航区，侧边栏，主内容区，页脚。这些功能区域也是一般网站基本都应具有的部分。如下：
页面布局草图
如果要实现上面的页面布局效果，在HTML5以前的时代，代码一般会是下面的样子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title> 页面草图 </title>
  </head>
  <body>
    <div class="header">页面标题</div>
    <div class="nav">主导航区</div>
    <div class="aside">侧边栏</div>
    <div class="main">主内容区</div>
    <div class="footer">页脚</div>
  </body>
</html>

而在HTML5中，我们可以使用新增的更具语义化的标签，如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 页面草图 </title>
  </head>
  <body>
    <header>页面标题</header>
    <nav>主导航区</nav>
    <aside>侧边栏</aside>
    <main>主内容区</main>
    <footer>页脚</footer>
  </body>
</html>

可以看到，使用了<header>、<nav>、<aside>、<main>、<footer>这些比<div>更具语义的标签表示网页的各个部分，让开发人员更直观的了解页面每个部分的功能，同时，搜素引擎也可以更方便的理解页面的各个部分。

2、新增的语义标签

HTML5中新增的常用语义标签包括：

区块标签：<article>、<section>、<nav>、<aside>、<header>、<footer>
内容分组标签：<figure>、<figcaption>、<main>
文本级别标签：<time>
说明：
区块标签和内容分组标签均为块标签，文本级别的标签是行标签。
通过恰当合理的用于这些标签，我们可以将新的，丰富的含义添加到我们的网页中。

二、新增语义标签详解

我们将以下面的页面为例，说明HTML5中新增语义标签的具体用法，示例页面如下：

1、<article>标签

<article>标签为文章标签，一个<article>标签可以表示一个文档，页面、应用程序或网站中的一段独立的内容，也就是说，它能够独立的被发布或重新使用；例如：一篇博客，一个论坛帖子，一篇新闻报道，一个用户评论等。
如下：

<article>标签也可以表示用户评论，如果想把一篇文章和它的评论都表示出来，可以嵌套使用，如：

<article>
  <!--文章内容-->
  <article>
    <!--文章评论-->
  </article>
  <article>
    <!--文章评论-->
  </article>
</article>
<article>
  <!--文章内容-->
  <article>
    <!--文章评论-->
  </article>
  <article>
    <!--文章评论-->
  </article>
</article>

2、<header>标签

<header>标签一般放置在页面的顶部，或者页面中某一个区块元素的顶部，包含整个页面或某个区块元素的标题，简介等信息。比如：
<header>标签
或者：

说明：

一个页面中可以包含一个或多个<header>标签，可以为<body>、<article>、<section>和<aside>添加<header>元素。
<header>标签不一定非要显示在页面的上方，它的内容决定这个需要使用<header>标签，位置并不重要。

3、<footer>标签

<footer>标签表示页脚，注脚等，该标签一般放置在页面的底部，或者页面中某个区块元素的底部。如：
<footer>标签
或者：

4、<nav>标签

<nav>标签表示页面的导航，可以通过导航链接到网站的其他页面，或者当前页面的其他部分。比如：
<nav>标签
说明：

<nav>标签常用于这些场景：作为页面中独立的导航区域，作为页面头部区域的一部分（如上例），显示在侧边栏中的导航区域或综合以上的场景（同时显示在页面头部和侧边栏中等）。
搜索引擎经常根据<nav>标签来确定网页中的主要内容，因此，并不是任何一组超链接都适合放在<nav>标签中，比如，很多网站顶部靠左或靠右的登陆条，或者很多网站会在页脚显示一些隐私条款，免责声明，友情链接等的信息，它们都不是网站的主要内容，虽然也可以使用<nav>标签，但是完全没有必要。

5、<aside>标签

<aside>标签包含的内容不是页面的主要内容，具有独立性，是对页面内容的补充。一些使用<aside>标签的例子，如页面侧边栏，广告，友情链接，文章引语（内容摘要）。如下：
<aside>标签

6、<section>标签

<section>标签在HTML5中表达的意义比较抽象，它表示一个主题性的内容分组，通常包含一个头部（<header>），可能会有一个尾部（<footer>）。如下：
<section>标签
说明：

<section>标签有点类似<div>标签，都是将一定的区块内容组织到一起，但也有很大的不同：
1. <div>标签应用更广泛，只要你想为一个区域定义一个样式，就可以使用<div>标签。
2. <section>标签包含的内容应该具有要给明确的主题，通常会带有一个标题区域。
上面的例子中，左侧边栏可以分为两部分，每一部分都可以用一个<section>标签来表示。

7、<main>标签

<main>标签用来表示页面的主体内容，每一个页面只能包含一个<main>标签，<main>标签中不不包括网站的标题，logo，主导航，版权声明等信息。如下：
<main>标签

8、<figure>标签和<figcaption>标签

figure本身为图像的意思，figcaption就是图像标题。顾名思义，<figure>标签和<figcaption>标签用来表示一副图片及标题。在真正运用中，不只有图片可以放置于<figure>标签中，以后我们学习的<viedo>（视频）也常常放置于<figure>中。如下：
<figure>标签和<figcaption>标签

9、<time>标签

<time>标签用来表示日期，或者一个时间，或者同时表示一个日期和时间值。如下：
<time>标签
说明：

<time>标签中有一个重要的属性datetime，它的属性值必须是一个固定格式的时间值，可以被浏览器、搜索引擎等方便的识别。
如果<time>添加了datetime属性，那么标签中间的文本只要人可以识别就可以了，比如“今天”，“结婚纪念日”，“情人节”或者“1小时前”等。
如果<time>标签中没有定义datetime属性，那么标签中间的文本就需要一个固定格式的时间值。

固定格式的时间值常用写法如下：

常用写法	说明
`2015-06-30`	指定年月日
`2015-06`	指定年月
`15-06-30`	年份可以是两位数字
`14:54:39`	指定时分秒（24小时制）
`14:54`	指定时分（24小时制）
`2015-06-30 14:54:39`	指定日期和时间
`2015-06-30T14:54:39`	T表示时间，意义同上
`2015-06-30T14:54:39Z`	Z表示使用UTC标准时间，UTC标准时间+8小时=北京时间