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

    xiaoxiao2022-07-12  168

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

    文章目录

    一、新的语义标签1、为何需要新的语义标签2、新增的语义标签 二、新增语义标签详解1、<article>标签2、<header>标签3、<footer>标签4、<nav>标签5、<aside>标签6、<section>标签7、<main>标签8、<figure>标签和<figcaption>标签9、<time>标签

    一、新的语义标签

    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>标签,可以为<body>、<article>、<section>和<aside>添加<header>元素。<header>标签不一定非要显示在页面的上方,它的内容决定这个需要使用<header>标签,位置并不重要。

    3、<footer>标签

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

    4、<nav>标签

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

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

    5、<aside>标签

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

    6、<section>标签

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

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

    7、<main>标签

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

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

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

    9、<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:39T表示时间,意义同上2015-06-30T14:54:39ZZ表示使用UTC标准时间,UTC标准时间+8小时=北京时间
    最新回复(0)