HTML5语义化结构标签

HTML和HTML5又有点区别,在于HTML5更具有结构化,编写代码的识别度更高,同时属性应用也比较的快。具体在于结构化标签的变化。

1.结构元素

header元素

具有引导和导航作用的结构元素,包含通常放在页面头部的内容。一个网页可以使用多个header,也可以为每一个内容块添加header元素。

    <header>
 <h1>网页主题</h1>
 </header>

nav元素

nav元素:用于定义导航链接,该元素可以将具**有导航性质的链接归纳在一个区域中,是页面元素的语义更加明确,只要应用于传统导航条,侧边导航条,页内导航条,翻页导航。列如下面这段实例代码:

<nav>
	<ul>
		<li>首页</li>
		<li>公司概况</li>
		<li>产品展示</li>
		<li>连系我们</li>
	</ul>
</nav>

article元素

代表文档、页面或者与上下文不相关的独立部分,通常用于多个section元素的划分,一个页面中的article元素可以出现多次。

<article>
	<header>
		<h2>第一章</h2>
	</header>
	<setion>
		<header>
			<h2>第1节</h2>
		</header>
	</setion>
	 <setion>
	 	<header>
  			<h2>第1节</h2>
  		</header>
 	</setion>
</article>
<article>
	 <header>
		  <h2>第一章</h2>
	 </header>
 
</article>

aside元素
用于定义当前页面或者文章的附属信息部分,包含当前页面的主要内容的相关引用、侧边栏、广告、导航条和其他有别于主要内容的部分。
aside元素主要分为两种:

  • 被包含在article元素内作为主要内容的附属信息。
  • 在article元素之外使用,作为页面或者站点全局的附属信息部分。
<article>
	<header>
 	 	 <h2>标题</h2>
 	 </header>
 	 <section>文章主要内容</section>
 	 <aside>其他相关文章</aside>
</article>
<aside>右侧菜单</aside>

section元素

对网页或程序中页面上的内容进行分块,通常由内容和标题组成。使用时应该注意:

  • 不要设置样式为页面容器,不是一个普通的容器元素。当被直接定义样式或者通过脚本定义行,建议使用div。
  • 如果article、aside、nav更符合条件,建议不要使用section。
  • 没有标题的内容块不要使用section元素定义。

footer元素

定义一个页面或者区域的底部,通常包含放在底部的内容。

2.分组元素

figure和figcaption元素
figure元素用于定义独立的流内容,一般只一个单独的单元。figcaption元素内容与该主要内容有关,删除对文档流产生的影响。figcaption用于为figure添加标题,一个figure最多允许使用一个figcaption,同时应该放在figure的第一个或者最后一个子元素的位置。

<figure>
<figcaption>北京鸟巢</figcaption>
	<p>被称作第四代体育馆的鸟巢国家体育馆是2008年北京奥运会标志性建筑</p>
	<img src="##">
</figure>

hgroup元素
用于将多个标题组成一个标题组,与h1~h6组合使用。
hgroup元素使用注意:

  • 只有一个标题元素不建议使用。
  • 出现一个或者一个以上的标题和元素时使用。
  • 当一个标题包含副标题、section、article时,建议使用hgroup和标题相关元素存放到header元素中。
<header>
	<hgroup>
		<h1>我的个人网站</h1>
		<h2>我的个人作品</h2>
	</hgroup>
	<p>开心快乐每一天</p>
</header>

3.页面交互元素

details和summary元素
details元素用于描述文档或者文档某个部分的细节。summary元素经常与details配合使用,作为details的第一个子元素,为details定义标题。点击会显示列表。

<details>
	<summary>显示列表</summary>
	<ul>
		<li>列表1</li>
		<li>列表1</li>
	</ul>
</details>

progress元素

<h1>我的工作进度</h1>
<p><progress min="0" max="100" value="50"></progress></p>

meter元素
表示指定范围内的数值。
high:度量位于界定为高的值
low :度量位于界定为低的值
max:定义最大值
min:定义最小值
value:定义度量的值|

4.文本层次语义元素

time元素:定义时间或者日期。有datetime:定义时间日期;pubdate:定义time中的日期/时间文档。
mark元素:标记文字
cite元素:引用

<p>我坚信的是,在我努力的时候我对自己是有所期待的,我知道我会成为更好的人,所以我从不怀疑我自己。</p>
<cite>——杨洋</cite>
发布了16 篇原创文章 · 获赞 2 · 访问量 604

猜你喜欢

转载自blog.csdn.net/weixin_45968014/article/details/104594914