视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
HTML关于结构语义化的问题
2020-11-27 15:25:41 责编:小OO
文档


访客或许能理解我们的意思,但搜索引擎就要反复揣摩了,更好的讨好搜索引擎我们可以这样来写:

<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>更具有性、完整性。可通过该段内容脱离了所在的语境,是否完整、来判断。

    下载本文
    显示全文
    专题