前端程序员《HTML》学习笔记(4)之语义化标签

每天浪漫主义

提示:来自哔哩哔哩博主 旺仔大哥哥
前端程序员《HTML》学习笔记(4)之语义化标签_第1张图片

【TOS2021】光遇/Meet light


计划:

  • 一周把HTML复习一遍,并明确其含义并能够解释

语义化标签

  • 没有语义的布局标签
    • div
    • span
  • 有语义的布局标签
    • 元素
    • 元素
    • 元素
  • 字符实体

在 HTML5 中推出了很多语义化的标签,所谓语义化就是标签能够对内容有所表达,比如 p 标签就是段落 paragraph 的意思。其实如果只是实现页面的效果,只使用 div 和 span 就可以做到。但是语义化的好处就是对开发者比较友好,文档的结构清晰,各部分功能一目了然,便于开发和维护。同时语义化的文档也能够对 SEO 起到更好的效果。

语义化标签的优势:

  1. 代码结构清晰,方便阅读,有利于团队合作开发。
  2. 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以语义的方式来渲染网页。
  3. 有利于搜索引擎优化(SEO)。

没有语义的布局标签

提示:在实际网页开发时会大量频繁的使用div和span这两个没有语义的布局标签

div

提示:

是一个块级元素。这意味着它的内容自动地开始一个新行。也就是说,浏览器通常会在 div 元素前后放置一个换行符。实际上,换行是
固有的唯一格式表现。可以通过
的 class 或 id 应用额外的样式。
作为一个 “容器”,

元素在语义上不表示任何特定类型的内容。 我们称之为没有语义的布局表签 然而,其可以将内容分组,从而可以使用class或是id属性方便的定义内容的格式。

<body>
    <div>div>
body>

span

span标签是超文本标记语言(HTML)的行内标签,被用来组合文档中的行内元素。 span没有固定的格式表现。当对它应用样式时,它会产生视觉上的变化。

<span>span>
  • 标签本身并不产生任何视觉效果。
  • 它只是提供一种途径,令你可以对文档中的一部分进行引用。这样,你便可以引用部分文本,并对它们设置样式,或用JavaScript对它们进行处理。

有语义的布局标签

HTML5提供了新的语义元素来定义网页的不同部分,它们被称为“切片元素”。

前端程序员《HTML》学习笔记(4)之语义化标签_第2张图片

元素

用于定义页面的介绍展示区域,通常包括网站logo、主导航、全站链接以及搜索框。也适合对页面内部一组介绍性或导航性内容进行标记。
前端程序员《HTML》学习笔记(4)之语义化标签_第3张图片

HTML

你可能感兴趣的:(前端学习,html,css,html5)