HTML5语义化标签

最新推荐文章于 2024-09-23 23:31:48 发布

wendZzz

最新推荐文章于 2024-09-23 23:31:48 发布

阅读量5.9k

点赞数 18

分类专栏： HTML HTML 和 CSS基础知识文章标签： HTML5

本文链接：https://blog.csdn.net/bertZuo/article/details/82726944

版权

HTML 和 CSS基础知识同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

HTML

10 篇文章 0 订阅

订阅专栏

1、HTML5简化的标签

（1）DOCTYPE文档声明

<!DOCTYPE html>

相较于之前的版本，HTML5没有指定具体版本，这就表示了最新的HTML版本。

（2）<meta>声明

HTML4.01中的meta声明决定了HTML文档中字符的编码方式，HTML5直接一个charset属性即可，

<meta charset="UTF-8">

（3）<link>标签

用来引入外部的CSS文件，在HTML4.01中

<link rel="stylesheet" type="text/CSS" href="xxx.css">

而在HTML5中无需type属性，浏览器会自动检测出CSS文本的类型。

（4）<script>标签

用于引入外部的JavaScript文档，HTML4.01中

<script type="text/javascript" src="xxx.js"></script>

而在HTML5中无需type属性，浏览器会自动检测出javascript文本的类型。

2、引入语义化元素的原因

先看HTML4.01中一般对于网站模板定义的结构，

<body>
	<div class="header">页面标题</div>
	<div class="nav">主导航区</div>
	<div class="aside">侧边栏</div>
	<div class="main">主内容区</div>
	<div class="footer">页脚区</div>
</body>

可见布局容器都是由<div>构成，它们的区别都是用class来作用。因此引入语义化元素，它们有丰富的含义，可以让开发人员了解每部分功能，并且搜索引擎和视觉障碍人员使用的屏幕阅读器也能够方便的识别页面的每一部分。

<body>
	<header>页面标题</header>
	<nav>主导航栏</nav>
	<aside>侧边栏</aside>
	<main>主内容区</main>
	<footer>页脚</footer>
</body>

3、语义化标签

新增的语义化标签
块标签	区块元素	article	header	footer	aside	section	nav
块标签	内容分组标签	figure	figcaption	main
内联标签	文本级标签	time

1.<article>

表示包含一个文档、页面、应用程序或网站中的一段独立的内容，也就是说，它能够独立地被发布或重新使用。可适用的地方有：一篇博客、一个论坛帖子、一篇新闻报道、一个用户评论...

2.<header>

一般被放置在页面的顶部，或者页面中某个区块元素的顶部，包含整个页面或某个区块的标题、简介等信息。

一个文档中可以包含多个header标签
header标签不一定只能显示在页面的上方，它的内容决定该地方是否需要使用header标签
可以为body、article、section和aside增加header标签

3.<footer>

一般被放置在页面的底部，或者页面中某个区块元素的底部。

4.<nav>

表示页面的导航，可以通过导航连接到网站的其他页面，或当前页面的其他部分。搜索引擎和屏幕阅读器会根据nav标签确定网站内容，但并不是任何一组超链接都适合放在nav标签中，譬如登录、隐私权政策与使用条款...可实际去一些网站上检查，却发现大多都是使用div，很少用到这些，但新标准新趋势，学习学习没错。

5.<aside>

包含的内容不是页面的主要内容，具有独立性，是对页面内容的补充。可适用的地方有：页面侧边栏、广告、友情链接、文章引语（内容摘要）...

6.<section>

一个主题性的内容分组，通常包含一个头部（header），也有可能包含一个尾部（footer）。

div 和 section 区别

div应用更广泛，如果需要定义一个区域样式即可使用
section包含一个明确的主题，通常含有一个标题

7.<main>

8.<figure>

标签规定独立的流内容（图像、图表、照片、代码等等），figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

9.<figcaption>

<figcaption> 标签定义 figure 元素的标题（caption），"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

10.<time>

表示一个日期，或者一个时间，或者同时表示一个日期和时间值。

<header>
    <h3>这就是个测试</h3>
    <time datetime="2018-09-17">2018年9月17日</time>
</header>

datetime属性中格式固定的日期或时间值，可以被搜索引擎、屏幕阅读器等方便识别。标签中的文本只需要是用户识别的信息就可以，可以为“今天”、“一小时前”、“结婚纪念日”等，若没有datetime属性则其中的文本需要固定格式。

time格式
指定年月日	2018-09-17
指定年月	2018-09
指定时间（24小时制）	14：03：52
指定时间（24小时制）	14：03
指定日期和时间	2018-09-17 14：03：52
T表示时间，等同上	2018-09-17T14：03：52
Z表示使用UTC标准时间	2018-09-17T14:03Z