常见的html语义化标签

html-css013

常见的html语义化标签,第1张

常见的语义化标签

因此我们在写页面结构时,应尽量使用有 语义的HTML 标签

<title>:页面主体内容。

<hn>:h1~h6,分级标题,<h1> 与 <title> 协调有利于搜索引擎优化。

<ul>:无序列表。

<li>:有序列表。

<header>:页眉通常包括网站标志、主导航、全站链接以及搜索框。

<nav>:标记导航,仅对文档中重要的链接群使用。

<main>:页面主要内容,一个页面只能使用一次。如果是web应用,则包围其主要功能。

<article>:定义外部的内容,其中的内容独立于文档的其余部分。

<section>:定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

<aside>:定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。

<footer>:页脚,只有当父级是body时,才是整个页面的页脚。

<small>:呈现小号字体效果,指定细则,输入免责声明、注解、署名、版权。

<strong>:和 em 标签一样,用于强调文本,但它强调的程度更强一些。

<em>:将其中的文本表示为强调的内容,表现为斜体。

<mark>:使用黄色突出显示部分文本。

<figure>:规定独立的流内容(图像、图表、照片、代码等等)(默认有40px左右margin)。

<figcaption>:定义 figure 元素的标题,应该被置于 figure 元素的第一个或最后一个子元素的位置。

<cite>:表示所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。

<blockquoto>:定义块引用,块引用拥有它们自己的空间。

<q>:短的引述(跨浏览器问题,尽量避免使用)。

<time>:datetime属性遵循特定格式,如果忽略此属性,文本内容必须是合法的日期或者时间格式。

<abbr>:简称或缩写。

<dfn>:定义术语元素,与定义必须紧挨着,可以在描述列表dl元素中使用。

<address>:作者、相关人士或组织的联系信息(电子邮件地址、指向联系信息页的链接)。

<del>:移除的内容。

<ins>:添加的内容。

<code>:标记代码。

<meter>:定义已知范围或分数值内的标量测量。(Internet Explorer 不支持 meter 标签)

<progress>:定义运行中的进度(进程)。

<>:

<>:

1.header:标签定义“网页”或“section”的页眉。

通常包含h1-h6元素或hgroup,作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分,一个搜索框,一个nav,或者任何相关logo。

2.nav:定义导航链接的部分。

3.footer标签:代表“网页”或“section”的页脚。

通常含有该节的一些基本信息,譬如:作者,相关文档链接,版权资料。

如果footer元素包含了整个节,那么它们就代表附录,索引,提拔,许可协议,标签,类别等一些其他类似信息。

4. hgroup元素:“网页”或“section”的标题

当元素有多个层级时,该元素可以将h1到h6元素放在其内,譬如文章的主标题和副标题的组合

5.section标签:定义文档中含有标题和段落的区域。(强调分段或分块)

6.article:代表独立、完整、可独自被外部引用的内容(博客或报刊中的文章、一遍论坛帖子、一段用户评论或独立的插件、或任何独立的内容)(强调的是独立性!可含有完整的标题、内容、脚注)

7. aside标签:表示当前页面或文章的附属信息部分,可包含于当前页面或主要内容相关的引用、侧边栏、广告、导航条、以及其他类似的有别于主要内容的部分。

8. figure标签:规定独立的流内容(图像、图表、照片、代码等等)。

figcaption标签:用于元素定义figure的标题。

1).一个figure元素内最多只允许放置一个figcaption元素,其他元素可无限放置。

2).figcaption 元素应该被置于 figure元素的第一个或最后一个子元素的位置。

9. time标签:定义时间或日期

10. address标签:代表区块容器,必须是作为联系信息出现,邮编地址、邮件地址等等,一般出现在footer。

语义类标签是纯文字的补充,如标题、自然段、章节、列表等。<section>、<p>、<nav>。

现代互联网产品中,HTML描述"软件界面"多过"富文本",而软件界面里的东西,几乎是没有语义的。在任何"软件界面的场景中",可以直接使用div和span。

语义标签的优点:在很多工作场景里,正确地使用语义标签可以带来很多好处:

作为自然语言和纯文本的补充,用来表达一定的结构或消除歧义

<ruby>、<rt>、<rp>、

<em>

HTML应支持 文章的结构的区分。语义化的HTML能够支持自动生成目录结构。

一篇文档会有一个属性的目录结构,由各级标题组成,此树形结构可能与HTML元素的嵌套关系不一致。

<h1>~<h6>、<hgroup>

<section>

越来越多的浏览器退出的"阅读模式",以及各种非浏览器终端的出现,语义化的HTML适合机器阅读的特性变得越来越重要。能让浏览器很好的支持"阅读视图功能",提升搜索引擎的命中率,对视障用户的读屏软件更加友好。

<header>、<nav>、<aside>、<footer>、<address>

<article>

所谓 元信息 ,是指描述自身的信息,

元信息类标签就是HTML用以描述文档自身的一类标签。通常在head标签中,不会在页面中显示出来。

元信息类标签多数情况下是给浏览器、搜索引擎等机器阅读的,有时这些信息会在页面之外展示给用户。

必须是html标签中的第一个标签(若head前面有标签,浏览器解析的时候 ,head标签中的内容会被移到body中),

内容需包含一个title标签(文档作为iframe或有其他方式指定了文档标题时,可不包含title)(多个title时 只有一第一个生效),

最多只能包含一个base(页面中所有 相对 链接的基准URL)(多个base时 只有第一个生效)。

可以改变全局的相对链接地址。不建议使用哦。

meta标签是一组键值对,是一种通用的元信息表示标签。

meta标签中的name表示元信息名,content表示元信息的值

有http-equiv属性的meta标签,表示执行一个命令,不需要name属性

除了content-type, 还有以下几种命令:

没有在HTML标准中定义,却是移动端开发的事实标准