HTML5 常用的结构化标签整理

时间：2024-01-15 20:03:56

一、语义化结构化标签

结构化标签优点：

1、方便浏览器处理和识别，提升了网页的质量和语义。

2、减少了大量无意义的div标签，增强代码的可读性。

结构化标签：（header，nav，body，article，section，aside，hgroup,figure,figcaption,footer）

<header>定义文档的页眉
<nav>定义导航链接的部分

<article>定义外部的内容，可以是一篇新的文章
<section>定义文档的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

<aside>定义article以外的内容，aside的内容可用作文章的侧边栏

<figure>用于对元素进行组合，使用figcaption元素为元素组添加标题

<figcaption>定义figure元素的标题

<hgroup>用于对section或网页的标题进行组合，使用figcaption元素为元素添加标题

<time>定义日期或时间，或者两者。
<footer>定义section或文档的页脚

HTML5的文档结构

 <header>...</header>

 <nav>...</nav>

 <article>

 　　<section> ... </section>

 </article>

 <aside>...</aside>

 <footer>...</footer>

HTML5的图片结构

 <figure id="fig2">

   <legend>Figure 2. Install Mozilla XForms dialog</legend>

   <img alt="A Web site is requesting permission to install the ollowing item: Mozilla XForms 0.7 Unsigned" src="installdialog.jpg" />

 </figure>

　　虽然这些标签都有固定的用意，但具体情况还要具体分析。标签的使用可以根据自己的需求做适当的调整！

二、格式化文本标签

HTML5 常用的结构化标签整理

三、常用表格标签

HTML5 常用的结构化标签整理

四、常用列表标签

HTML5 常用的结构化标签整理

相关文章