仲灏小栈 仲灏小栈
首页
大前端
后端&运维
其他技术
生活
关于我
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

仲灏

诚意, 正心, 格物, 致知
首页
大前端
后端&运维
其他技术
生活
关于我
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 《前端项目基础建设》
  • HTML&CSS

    • Scss语言学习实用心得
    • H5 标签使用场景
      • 优缺点:
        • HTML4
        • HTML5
      • 常用标签的使用场景:
        • header:
        • nav:
        • footer:
        • section:
        • article:
        • aside:
        • figure:
        • time:
    • css常用命名单词
    • 项目基础建设 css与处理器scss
    • 项目基础建设 CSS公共样式
    • iframe
    • css 变量使用
    • css常见但不常用的属性
    • 躺着旋转动画
    • 边框渐变(圆形)
    • float 布局
    • 在 Javascript 和 Sass(或 CSS!)之间共享变量的方法
    • 看不见的html标签
    • 手写css预处理器
    • grid vs flex布局
  • JavaScript&TypeScript

  • Node

  • 构建

  • Vue

  • React

  • 小程序

  • 跨端

  • Electron

  • WebGL&GIS

  • 浏览器

  • 面经

  • 其他

  • 大前端
  • HTML&CSS
仲灏
2021-12-30
目录

H5 标签使用场景

# 优缺点:

# HTML4

img

HTML4 是采用“div+css”,网页的各个功能区域都是使用div标签进行排版的,而这些div的区分只是使用css类名称进行的,搜索引擎却不会读取他们,也不会理解类名称是有什么作用的。

# HTML5

img

HTML5的排版使用了新的标签,而这些标签都是可以被搜索引擎所理解的,这样,搜索引擎蜘蛛在我们的网页上爬行的时候,就会知道什么区域是顶部、什么区域是导航等等。这样就能够让搜索引擎更容易得到我们整个网站清晰的信息了。

# 常用标签的使用场景:

# header:

定义了站点的头部信息,也就是页眉,一般放置网站的站点名称以及LOGO和导航栏。搜索引擎更容易识别站点的类型。

# nav:

定义导航链接,也就是栏目或者频道的链接。搜索引擎可以更好了解网站的信息架构,分类等。良好的信息架构,更有利于蜘蛛的爬行和权重的分布。

# footer:

定义了底部信息,也就是页脚。放置页脚导航,一些比如公司介绍,联系我们之类的信息。一般来说对网站比较不重要,有可能搜索引擎会降低其位置的权重。

# section:

该元素用来表示网页中不同的分区。优势体现在每个部分都可以有其独立的HTML标题。这可以让搜索引擎更好的了解网页的结构是如何划分的。搜索引擎可能会根据网页中的section 标签找出其信息架构。(同左撇子)

# article:

定义文章区域,可以更有利于搜索引擎识别网页的内容以及判断相关性。

# aside:

定义页面内容之外的内容,在左侧或右侧边栏。比如知乎右侧的“相关问题”就属于aside 区域。aside标签的文字信息与article标签区域的文字信息最好是相关。可能会影响到该页面和目标页面的排名。这些结构元素有些在HTML4时代,一般是用div来定义。

# figure:

定义媒介内容的分组,以及它们的标题,figcaption 定义 figure 元素的标题。这两个元素可以说非常好的使媒介和文字说明联系在了一起。有利于搜索引擎理解内容。文字说明是可见的。

# time:

定义日期/时间,time标签可能会作为一个来判断网页文字源,也就是能够通过time标签来识别哪篇文章是原创的。

上次更新: 2022/06/05, 20:31:36
Scss语言学习实用心得
css常用命名单词

← Scss语言学习实用心得 css常用命名单词→

最近更新
01
vim日常使用记录
04-02
02
滑动窗口最大值
04-02
03
有效的字母异位词
04-02
更多文章>
Theme by Vdoing | Copyright © 2021-2025 izhaong | github | 蜀ICP备2021031194号
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式