HTML语义化的理解

最新推荐文章于 2024-06-18 18:33:33 发布

番茄大大~

最新推荐文章于 2024-06-18 18:33:33 发布

阅读量968

点赞数 2

分类专栏：前端基础知识要点文章标签： html

本文链接：https://blog.csdn.net/qq_41926464/article/details/131202414

版权

前端基础知识要点专栏收录该内容

11 篇文章 0 订阅

订阅专栏

HTML语义化涉及使用恰当的标签来描述网页内容，提升可读性、SEO效果和无障碍访问。它包括使用<h1>到<h6>定义标题，<ul>和<li>组织列表，以及HTML5的新标签如<header>,<nav>,<article>等来构建结构清晰的网页。语义化还有助于团队开发和维护，遵循W3C标准。

摘要由CSDN通过智能技术生成

话不多说，开门见山。想了解html语义化的伙伴，首先需要对html有基础的认识，那么什么是html呢？html是超文本标记语言，它的设计初衷是为了让网页开发更加简单和易于维护，所以html的任务就是定义网页的基本结构和内容。有点类似于建模的骨架，人体的骨架等。

一、什么是html语义化？

官方解释：html语义化是指用合理的html标记以及其特有的属性去格式化文档内容。

通俗的讲：就是用合理、正确的标签来展示内容。（标签指一种标记方式，如<title>，表示标题信息；也可以理解为人体骨架的某一块骨头，专属名称叫什么）。

二、为什么需要语义化？

1）易读，易书写，易理解（多数情况，标签英文翻译的含义就是其功能含义）；

2）利于SEO搜索：语义化可以和搜索引擎建立良好的联系，有利于爬虫抓取有效信息；因为爬虫依赖于语义化标签来确定上下文和各个关键字的权重。

3）易于跨设备解析，进而完成渲染网页（如屏幕阅读器、盲人阅读器、移动设备）；

4）利于规范化：方便团队开发和维护，也遵循W3C规范。

三、语义化的基本标签？

使用这些常见标签，即可构建没有css的页面。

1）语义结构标签

2）基本标签

        <title>：页面主体内容。
        <hn>：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。
        <ul>：无序列表。
        <li>：有序列表。
        <main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
        <small>：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。
        <strong>：和 em 标签一样，用于强调文本，但它强调的程度更强一些。
        <em>：将其中的文本表示为强调的内容，表现为斜体。
        <mark>：使用黄色突出显示部分文本。
        <figcaption>：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。
        <cite>：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
        <blockquoto>：定义块引用，块引用拥有它们自己的空间。
        <q>：短的引述（跨浏览器问题，尽量避免使用）。
        <time>：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。
        <abbr>：简称或缩写。
        <dfn>：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。
        <address>：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。
        <del>：移除的内容。
        <ins>：添加的内容。
        <code>：标记代码。
        <meter>：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）
        <progress>：定义运行中的进度（进程）。