首页 > 编程知识 正文

html5标签属性大全,html5语义化标签有哪些

时间:2023-05-04 15:16:31 阅读:8877 作者:1018

许多面试者表示:“谈论对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.

 

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。