奇怪了为什么现在很少有网站使用HTML5的语义化标签

最新推荐文章于 2022-04-05 16:52:48 发布

一个很穷的站长

最新推荐文章于 2022-04-05 16:52:48 发布

阅读量1.4k

点赞数

分类专栏： HTML 文章标签： HTML5语义化标签语义化标签运用 HTML5新增标签

本文链接：https://blog.csdn.net/weixin_42869379/article/details/81392765

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

今天学了HTML5的一些新的标签，了解一番后感觉非常的强大也非常的实用。

将网站每个区域用语义化的标签来代替满屏的DIV布局，不仅阅读起来非常爽，而且很多时候甚至可以不用追加一堆的class样式来控制，直接用css控制标签即可，结构开起来非常好，新手看起来都不头晕了！

下面简单布局一个页面：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>语义化结构标签</title>
<style type="text/css">
footer {
	height: 50px;
	background: #abcdef;
	line-height: 50px;
	text-align: center;
	font-size: 24px;
	font-weight: bold;
	color: #696969;
}
</style>
</head>
<body>
<header>/*头部标签*/
	<div>Logo</div>
	<nav>/*导航条*/
		<a href="index.html">首页</a>
		<a href="#">介绍</a>
		<a href="#">案例</a>
		<a href="#">链接</a>
		<a href="#">关于</a>
	</nav>
</header>
<section>/*定义块状区域*/
	<hgroup>/*用于包裹标题标签，可以直观了解到这是一个标题集合*/
		<h1>织梦菜鸟网模板下载</h1>
		<h3>dedenoob</h3>
		<h4>织梦模板很多可以下载……</h4>
	</hgroup>
	<aside>/*可以用于文章侧栏目*/
		<a href="#se1">Section One</a>
		<a href="#se2">Section Two</a>
		<a href="#se3">Section Three</a>
	</aside>
	<article>/*文章*/
	    文章内容区域，织梦模板下载学习www.dedenoob.com,整站模板安装即可使用，大量响应式模板，学习、建站兼职均可使用！！
	</article>
</section>
<section>
	<figure>/*多媒体并可附带标题*/
		<figcaption>标题</figcaption>
		<div class="video">...</div>
	</figure>
</section>
<section>
	<dialog>/*用于对话集合*/
		<dt>你好，那个模板网站怎么样？</dt>
		<dd>还不错，挺全的</dd>
		<dt>你好，那个模板网站怎么样？</dt>
		<dd>还不错，挺全的</dd>
        <dt>你好，那个模板网站怎么样？</dt>
		<dd>还不错，挺全的</dd>
	</dialog>
	<dialog>
		<dt>你好，那个模板网站怎么样？</dt>
		<dd>还不错，挺全的</dd>
		<dt>你好，那个模板网站怎么样？</dt>
		<dd>还不错，挺全的</dd>
        <dt>你好，那个模板网站怎么样？</dt>
		<dd>还不错，挺全的</dd>
	</dialog>
</section>
<footer>/*用于尾部*/
	Copyright,,,,,
</footer>
</body>
</html>

页面中基本全部用了语义化标签代替了DIV，最后写了一个样式控制footer，说明其它元素也一样能直接控制。这样一来阅读真的方便了许多，而且应该还对搜索引擎的抓取非常有利，别看它是机器，但是好的代码结构提高了蜘蛛处理数据的速度。

页面中的标签具体含义在代码中已经标明。