H5新特性之语义化标签

最新推荐文章于 2022-02-12 23:33:25 发布

Mr._Dang

最新推荐文章于 2022-02-12 23:33:25 发布

阅读量133

点赞数 2

分类专栏：小白基础文章标签： html css

本文链接：https://blog.csdn.net/m0_55832273/article/details/115461164

版权

小白基础专栏收录该内容

18 篇文章 0 订阅

订阅专栏

   在日常生活看报，或浏览网页，都有着固定的样式，如：头部，导航，标题等。在html5中，为了方便划分板块结构，增加了新的语义化标签。

1.header（重点）

header表示表示一个页面或者一个区域块的标题。通常是一些引导和导航信息。

例：

<header>
    <p>this is the page Logo</p>
	<nav>this is page navigation</nav>
</header>

2.nav（重点）

nav 标签定义显示导航链接，不是所有的成组的超链接都需要放在nav标签里。nav标签里应该放入一些当前页面的主要导航链接。例如在页脚显示一个站点的导航链接（如首页，服务信息页面，版权信息页面等等），就可以使用nav标签，当然，这不是必须的。

例：

<nav>
      <h2>导航</h2>
       <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
       </ul>
 </nav>

3.article

article标签装载显示一个独立的文章内容。例如一篇完整的论坛帖子，一则网站新闻，一篇博客文章等等，一个用户评论等等 artilce可以嵌套，则内层的artilce对外层的article标签有隶属的关系。

例：

<article>
	<h1>文章标题</h1>
	这是一篇文章
  	<article>评论1...</article>
  	<article>评论2...</article>
</article>

4.aside

aside表示在article之外的，与article内容相关的辅助信息。可以存放一些图文和次要信息。最典型的是侧边栏，其中的内容可以是日志串连，其他组的导航，甚至广告，这些内容相关的页面。

例：

<body>
	<aside>
		热门文章
	</aside>
	<aside>
		广告
	</aside>
	<article>
		<h1>文章标题</h1>
		这是一篇文章
   		<article>评论1...</article>
    	<article>评论2...</article>
	</article>
</body>

5.section（重点）

section 标签定义文档中的节或者区域（section、区段）。比如章节、页眉、页脚或文档中的其他部分。大号的div来使用。

例：

<body>
	<section>   
		<h1>章节一</h1>
		<p>详细内容...</p></section><section>
		<h1>章节二</h1>
		<p>详细内容...</p>
	</section>
</body>

6.footer（重点）

footer一般为页面的页脚，通常是链接或版权信息等。

例：

<footer>底部</footer>

7.hgroup

hgroup 标签用于对网页或区段的标题元素（h1-h6）进行组合。例如，在一个区段中你有连续的h系列的标签元素，则可以用hgroup将他们括起来。

例：

<hgroup>
	<h1>The reality dysfunction</h1>
	<h2>Space is not the only void</h2>
</hgroup>

我们可以给这些语义化标签添加属性，来完成我们想要的版式，相较于一般的div标签结构划分，语义化标签更能展示结构的作业，同时可减少div元素

Mr._Dang

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
H5新特性之语义化标签

在日常生活看报，或浏览网页，都有着固定的样式，如：头部，导航，标题等。在html5中，为了方便划分板块结构，增加了新的语义化标签。1.header（重点）header表示表示一个页面或者一个区域块的标题。通常是一些引导和导航信息。例：<header> <p>this is the page Logo</p> <nav>this is page navigation</nav></header>2.na...
复制链接

扫一扫