8000 HTML系列之语义化的理解 · Issue #4 · yuanyuanbyte/Blog · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

HTML系列之语义化的理解 #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
yuanyuanbyte opened this issue Nov 12, 2021 · 0 comments
Open

HTML系列之语义化的理解 #4

yuanyuanbyte opened this issue Nov 12, 2021 · 0 comments

Comments

@yuanyuanbyte
Copy link
Owner
yuanyuanbyte commented Nov 12, 2021 •
edited
Loading

前言

很多面试官会问：

谈谈你对 HTML5语义化标签的理解。

那么本篇博客可以对你理解HTML5语义化标签有所帮助。

一：什么是语义元素？

语义元素清楚地向浏览器和开发者描述其意义。

非语义元素的例子：<div> 和 <span> - 无法提供关于其内容的信息。

语义元素的例子：<form>、<table> 以及 <img> 清晰地定义其内容。

二：为什么要语义化？

  • 代码结构: 使页面没有css的情况下，也能够呈现出很好的内容结构
  • 有利于SEO: 爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息
  • 提升用户体验： 例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。
  • 便于团队开发和维护: 语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。
  • 方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。

三：常用的语义元素

HTML5提供了新的语义元素来定义网页的不同部分，它们被称为“切片元素”，如图所示
在这里插入图片描述

四：文档结构标签

在这里插入图片描述

  • <main> 定义文档的主体部分
  • <nav> 定义导航链接

HTML 标签列表（功能排序） | 菜鸟教程 https://www.runoob.com/tags/ref-byfunc.html

五：参考
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@yuanyuanbyte
0