百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>html5教程> HTML对于构造语义化的题目
分享文章到:

HTML对于构造语义化的题目

发布时间:09/01 来源:未知 浏览: 关键词:
本文主要为大家分享一篇HTML关于构造语义化的问题,具有很好的参照 价值,但愿对大家有所帮忙。一起跟从小编过来看看吧。

为什么要web语义化?

第一,人可以通过视觉的划分推断内容的语义,搜索引擎看到的只是代码。搜索引擎只能通过标签来推断内容的语义。由于页面的很大一部分流量是来自搜索引擎的,要使页面尽大概地对搜索引擎友好,所以就要尽大概地使标签语义化。

所有的标签都是有本人的语义的,下面给出一部分标签的语义:


    • p 语义:pision(分隔)

    • span 语义:Span(范畴)

    • ol 语义:Ordered List(排序列表)

    • ul 语义:Unordered List(不排序列表)

    • li 语义:List Item(列表项目)

假如疏忽标签语义和默许样式,所有标签都用p,其实也是可以写出来视觉结果很好的页面,只要你灵敏使用CSS。但是那样的话虽然视觉上到达了要求,但是整个页面一点语义都没有,搜索引擎还是看不懂。所以,要记住:

构造(html)才是重点,样式(css)是用来润饰构造的。所以,要先肯定html,肯定标签,再来选用适宜的css

其次,SEO的时候我们经常用h1来突出标题,用strong来突出关键字,这确实就是语义化的表现。就当前的搜索引擎来说并不克不及想访客那样很直不雅的去查看网页,它只要剖析源码来表现或推测网站要表达的内容。比方我们想表达某篇文章的标题, 我们或许会这样写:

<p id=”title”>文章的标题</p>

访客或许能懂得我们的意思,但搜索引擎就要重复揣测了,更好的奉迎搜索引擎我们可以这样来写:

<h1>这是标题</h1>

小提醒:h1具有最高的权值,在一个页面中最好指使用1个h1来突出你的内容,太多的h1会分离其整个页面的权重,对搜索引擎也是非常的不友好。

语义化长处:

  • 易于会员阅读,样式丧失的时候能让页面显现清楚的构造。

  • 有益于SEO,搜索引擎按照标签来肯定上下文和各个关键字的权重。

  • 利便其他设备解析,如盲人阅读器按照语义渲染网页

  • 有益于开发和保护,语义化更具可读性,代码更好保护,与CSS3关系更和谐。

今天先介绍主体构造标签,如图所示:


1、<header>

<header>定义文档或者文档的部分区域的页眉,应作为介绍内容或者导航链接栏的容器。

在一个文档中,您可以定义多个<header>元素,但需要留意的是<header>元素不克不及作为<address>、<footer> 或 <header> 元素的子元素。

2、<nav>

<nav>描写一个含有多个超链接的区域,该区域包括跳转到其他页面或页面内部其他部分的链接列表。

在一个文档中,可定义多个<nav>元素。

3、<main>

<main> 定义文档的主要内容,该内容在文档中应当是唯一无二的,不包括任安在文档中反复的内容,比方侧边栏,导航栏链接,版权信息,网站logo,搜索框(除非搜索框作为文档的主要功效)。

需要留意的是在一个文档中不克不及显现多个<main>标签。

4、<article>

<article>元素表示文档、页面、利用或网站中的独立构造,是可独立分配的、可复用的构造,如在公布中,它大概是论坛帖子、杂志或新闻文章、博客、会员提交的评论、交互式组件,或者其他独立的内容项目。

当<article>元素嵌套使用时,则该元素代表与外层元素有关的文章。例如,代表博客评论的<article>元素可嵌套在代表博客文章的<article>元素中。

5、<aside>

<aside> 元素表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分且可以被独自的拆分出来而不会影响团体。平常展现为侧边栏或嵌入内容。

6、<footer>

<footer>定义比来一个章节内容或者根节点元素的页足。一个页足平常包括该章节作者、版权数据或者与文档相关的链接等信息。

使用footer插入联络信息时,应在 footer 元素内使用 <address> 元素。

留意不克不及包括<footer>或者<header>

7、<section>

<section>表示文档中的一个区域(或节),比方,内容中的一个专题组。

假如元素内容可以分为几个部分的话,应当使用 <article> 而不是 <section>。
不要把 <section> 元素作为一个一般的容器来使用,特殊是当<section>仅仅是为了美化样式或利便足本使用的时候,应使用<p>。

这几个标签,比力容易混淆的是<section>、<article>,所以这里特殊说明:

“Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the elemen.”

通俗来说就是<article>比<section>更具有独立性、完全性。可通过该段内容离开了所在的语境,可否完全、独立来推断。

以上就是HTML关于构造语义化的问题的具体内容,更多请关注百分百源码网其它相关文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有151人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板