什么标签语义化?前端的基础功

现在的组件化开发前端真的让人很无语,大家都去开发组件了。都忘记了语义化的存在,看到代码真的好头痛

什么是HTML语义化标签?

语义化标签,就是让标签有自己的含义,利用本身传达它所包含内容的一些信息,使浏览器和搜索引擎直观的认识标签和属性的用途和作用。

我们普遍说div+css,就是简单的页面布局,但是div是没有自己的意思的,就是一个块的意思。

这样如果网速加载慢,或者丢失css样式的话,就是一个堆在一起的文字,用户体验不是很好。

为什么要用语义化标签?

代码结构清晰,可读性高,减少差异化,便于团队开发和维护。

在页面没有加载CSS的情况下,也能呈现良好的内容结构,提升用户体验。

对搜索引擎友好,良好的结构和语义,有助于爬虫抓取更多的有效信息。

HTML5常用语义化标签

header页眉,通常包括网站标志、主导航、全站链接以及搜索框

nav 标记导航,仅对文档中重要的链接群使用

main页面主要内容,一个页面只能使用一次

article用来定义独立于文档且有意义的来自外部的内容

section定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

aside定义article标签外的内容,可用作文章的侧边栏

footer页脚,只有当父级是body时,才是整个页面的页脚。

title定义文档的标题

h1~h6创建文档结构的层级关系

ul无序列表

ol有序列表

strong强调文本,表现为粗体

em强调文本,表现为斜体

p段落

后记

当然现在都是模块话开发前端,但你的代码要让团队看起来舒服啊!~~~~~~~~~~写的像屎一样的命名和页面布局

cZWKPS.png

cZWrrR.png

  • 1.本站主要是为了记录工作、学习中遇到的问题,可能由于本人技术有限,有些不正确的地方,仅供参考。
  • 2.本站中会转载我认为有用的博客文章,添加一些外链网站地址,但这些博客文章、论坛和网站上的内容和我没有关系,不代表我的意见,请网友自己多注意辨别。
  • 3.本站中转载文章会写明来源(点击下方链接按钮即可),感谢原作者的辛苦写作,如果有异议,及时联系我处理,谢谢!
  • 4.欢迎指出有问题的地方,我会尽快修正,谢谢!

系统由 Nginx + Next.js + React + Node + TailWindCss 驱动

沪ICP备20021316号