共计 2971 个字符,预计需要花费 8 分钟才能阅读完成。
继续输入内容,等你来撩~
什么是语义元素?
语义是指对一个词或者句子含意的正确解释。很多 html 标签也具备语义的意义,也就是说元素自身传播了对于标签所蕴含内容类型的一些信息。例如,当浏览器解析到 <h1></h1> 标签时,它将该标签解释为蕴含这一块内容的最重要的题目。h1 标签的语义就是用它来标识特定网页或局部最重要的题目。
为什么要语义化?
- 代码构造: 使页面没有 css 的状况下,也可能呈现出很好的内容构造
- 有利于 SEO: 爬虫依赖标签来确定关键字的权重,因而能够和搜索引擎建设良好的沟通,帮忙爬虫抓取更多的无效信息
- 晋升用户体验: 例如 title、alt 能够用于解释名称或者解释图片信息,以及 label 标签的灵活运用。
- 便于团队开发和保护: 语义化使得代码更具备可读性,让其余开发人员更加了解你的 html 构造,缩小差异化。
- 不便其余设施解析: 如屏幕阅读器、盲人阅读器、挪动设施等,以有意义的形式来渲染网页。
HTML5 罕用的语义元素
HTML5 提供了新的语义元素来定义网页的不同局部,它们被称为“切片元素”,如图所示
大概有 100 多个 HTML 语义元素可供选择,以下是罕用的语义元素
构造体 | 文本 | 统一 |
---|---|---|
header、h1、h2、h3、nav、footer、article、section | p、ul、ol、li、blockquote | a、strong、em、q、abbr、small |
<h1>~<h6> 元素
定义页面的题目,h1 元素具备最高等级,h6 元素具备最低的等级
<h1>top level heading</h1>
<section>
<h2>2nd level heading</h2>
<h3>3nd level heading</h3>
<h4>4th level heading</h4>
<h5>5th level heading</h5>
<h6>6th level heading</h6>
</section>
<header> 元素
用于定义页面的介绍展现区域,通常包含网站 logo、主导航、全站链接以及搜寻框。也适宜对页面外部一组介绍性或导航性内容进行标记。
<header>
<h1>HTML Reference</h1>
<nav>
<a>Home</a>
<a>About</a>
<a>Contact</a>
</nav></header>
<nav> 元素
定义页面的导航链接局部区域,不是所有的链接都须要蕴含在 <nav> 中,除了页脚再次显示顶级全局导航、或者蕴含招聘信息等重要链接。
<nav>
<a>Home</a>
<a>About</a>
<a>Contact</a>
</nav>
<main> 元素
定义页面的次要内容,一个页面只能应用一次。如果是 web 利用,则突围其次要性能。
<main>
<h1>My blog test</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
<p>etc.</p>
</main>
<article> 元素
定义页面独立的内容,它能够有本人的 header、footer、sections 等,专一于单个主题的博客文章,报纸文章或网页文章。article 能够嵌套 article,只有外面的 article 与里面的是局部与整体的关系。
<article>
<header>
<h3>
<a href="">My blog post</a>
</h3>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.
</p>
</section>
<footer>
<small>
Posted on
<time datetime="2017-04-29T19:00">Apr 29</time> in <a href="">Code</a>
</small>
</footer>
</article>
<section> 元素
元素用于标记文档的各个局部,例如长表单文章的章节或次要局部。
<section>
<h2>Section title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.
</p>
</section>
<aside> 元素
定义与次要内容相干的内容块。通常显示为侧边栏。
<aside>
<h3>About the author</h3>
<p>Frontend Designer from Bordeaux, currently working for Improbable in sunny London.
</p>
</aside>
<footer> 元素
定义文档的底部区域,通常蕴含文档的作者,著作权信息,链接的应用条款,分割信息等
<footer> COPYRIGHT@dingFY_Demi</footer>
元素
为较不重要的内容定义小字体。如果被突围的字体曾经是字体模型所反对的最小字号,那么 标签将不起任何作用。
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.
</p>
<small>Posted on <time datetime="2017-04-29T19:00">Apr 29</time>
in
<a href="/category/code">Code</a>
</small>
元素
把文本定义为语气更强的强调的内容,以示意内容的重要性。
HTML should only be used to write
<strong>content</strong>,
and keep CSS for
<strong>styling</strong>
the web page.
元素
标记内容着重点(大量用于晋升段落文本语义),通常出现为斜体文字。
HTML should only be used to write
<em>content</em>,
and keep CSS for
<em>styling</em>
the web page.
<blockquote> 元素
定义块援用,浏览器会在 blockquote 元素前后增加换行,并减少外边距。cite 属性可用来规定援用的起源
<blockquote cite="https://en.wikiquote.org/wiki/Marie_Curie"> Here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation.</blockquote>
<abbr> 元素
解释缩写词。应用 title 属性可提供全称,只在第一次呈现时应用就 ok。
The <abbr title="People's Republic of China">PRC</abbr>
was founded in 1949.
对于标签语义化的内容就到这啦~