许多面试者表示:“谈论对HTML5语义化标签的理解。 那么,在这个博客中专门解答一下这个问题吧。
什么是语义要素? 意思是正确解释词语和句子的意思。 很多html标签也有意义。 这意味着元素本身传达了有关标签中包含的内容类型的信息。 例如,当浏览器解析为h1/h1标签时,该标签将被解释为包含该内容的最重要标题。 h1标记的含义用于标识特定网页或部分最重要的标题。
为什么要语义化? 内容结构代码结构:爬虫的有效信息3358 www.Sina.com/http://,其依赖于标签来确定关键字的权重,即使在3358www.Sina.com/页面上没有css 以有意义的方式呈现网页,包括有利于SEO:屏幕阅读器、盲人阅读器和移动设备。 HTML5中常用的语义元素HTML5提供了定义网页不同部分的新语义元素,如图所示。 这些被称为“切片元素”
可以选择约100多个HTML语义元素。 一般意义要素如下
http://www.Sina.com/http://www.Sina.com/http://www.Sina.com/header h1 H2 H3 navfooterarticlesectionpulollllliblockquoteasteasteationa
定义页面的标题。 h1要素为最高级别,h6要素为最低级别
h1 toplevel heading/h1 sectionh 22 ndlevelheading/h2h 33 ndlevelheading/h3h 44 thlevelheading/h4h 55 thlevelheading/h5h 66 thlevelhelhelhelheading
用于定义页面的介绍展区。 通常包括网站徽标、主导航、全站链接和搜索框。 它还适用于标记页面中的一系列介绍性或导航性内容。
header h1 html参考/h1 nava home/aa about/aa contact/a/nav/header 3358 www.Sina.com /
定义页面的导航链接部分区域。 所有链接都不需要包含在nav中。 再次显示重要链接,如顶级全球导航或招聘信息(页脚除外)。
nava home/aa about/aa contact/a/nav http://www.Sina.com /
定义页面的主要内容。 一个页面只能使用一次。 在web APP应用程序的情况下,包围主要功能。
main h1my blogtest/h1 ploremipsumdolorsitamet,consecteturadipiscingelit.donecviverranecnullavitaemollis./ppetc./p/mmm
定义可以有博客文章、新闻文章或网络文章的页面的独立内容,重点放在一个主题上,如自己的标题、文章、章节等。 如果内部article和外部article是部分和整体关系,则可以嵌套article。
articleheaderh 3a 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 rel="external nofollow" 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_哭泣的芒果</footer><small>元素
为较不重要的内容定义小字体。如果被包围的字体已经是字体模型所支持的最小字号,那么 <small> 标签将不起任何作用。
<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 rel="external nofollow" href="/category/code">Code</a></small><strong>元素
把文本定义为语气更强的强调的内容,以表示内容的重要性。
HTML should only be used to write <strong>content</strong>, and keep CSS for <strong>styling</strong> the web page.<em>元素
标记内容着重点(大量用于提升段落文本语义),通常呈现为斜体文字。
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.