上海带大伙来了解下语义代码!

带大伙来了解下语义代码!

理解HTML中语义代码的正确使用将大大有助于确保所有内容均按预期显示。 虽然通常很容易使用 p or div 元素通常用于所有内容,通常会使用更适当和语义的元素。 例如,虽然将段落标签用于所有文本块可能更容易, li, h1 通过 h6 或任何其他元素可能是手头文字的更合适选择。 这篇文章将探讨语义代码为何重要,以及您在编写HTML时通常会使用的一些元素。

了解语义代码

一、语义代码 HTML

语义 HTML 是指使用 HTML 标签的 HTML 代码。 它是描述不同页面元素的目标的有效方式。 语义 HTML 代码向人类和计算机传达每个元素的含义。 因此,它使搜索引擎、人类开发人员、网络浏览器和辅助技术能够更好地理解网页的不同方面。

二、什么是语义代码?

在编程领域,语义传达代码的含义并将其上下文化。 这是语义代码继续受到关注并与前端开发人员高度相关的主要原因。

三、什么是 HTML 中的语义标签?

用外行的话来说 开发人员使用语义 HTML 标签 具有相关意义以创建特定页面。 这些页面比围绕标签的标签更好地传达信息. 了解开发人员在 HTML 中使用语义标签来传达特定含义而不是展示视觉呈现至关重要,这一点至关重要。

常见的语义 HTML 标签包括:

标签表格

缩写

缩写

定义

行情

文档中的作者地址

重点

插入的文字

内联样式容器

电传文本

逻辑除法

代码参考

大胆强调

删除文本

六级标题

第五层标题

四级标题

三级标题

二级标题

一级标题

样本输出

预先格式化的文本

用户定义的变量文本

用户输入文本

四、哪些 HTML 标签是语义化的?

HTML5 标签和大多数 HTML4 标签都包含语义。 使用 HTML 标签的目的是准确无误地传达预期含义。 当涉及到 HTML 标签时,无需担心网页的“外观”。 相反,重点是您计划遵循以使用每个标签的标准。

五、你如何在 HTML 中编写语义?

在 HTML 中编写完美语义的秘诀是使用语义标签。 语义 HTML 标签包含精确定位的名称 关于代码目的的机器或人. 例如,段落( ) 标签是典型的 HTML 语义标签。 这意味着从一开始的全部内容并结束标签代表段落块的文本。 它允许任何设备或个人阅读此标签并了解其目标。

1、文档结构或页面布局

为了高层次的页面或文档结构,使用适当的标签导航、部分、文章、主要、页眉、页脚和旁白。

2、内联文本语义

在内容方面,使用结构化标题和标签以确保正确的数据结构。 你也可以使用, , 和对于列表。 如果屏幕阅读器分解了段落,则您可以跳过多个部分。

但是,当您编写语义 HTML 时,需要考虑的因素不止一个。 例如,不要将表格用于复杂的布局,也不要跳过 alt 和 title 属性。 同时,确保准确验证 HTML 语义并描述要使用的语义元素的预期含义。

您还应该关注准确的 h1、h2、h3 等标题,以创建最合乎逻辑的大纲。 您还应该使用语义 id 值和类名。 此外,练习具有不同特征的表格数据。

六、语义 HTML 更好吗?

编写语义 HTML 有很多好处。 这是每个网页的战略方法,允许您考虑不同元素的放置。 最后,编写语义 HTML 值得付出努力和时间。

语义 HTML 可以影响网页的 SEO 并帮助搜索引擎在更大范围内确定优先级。 此外,语义 HTML 使受损个人更容易浏览网页。 它还通知开发人员随着时间的推移会增加的数据类型。 通过语义 HTML,寻找有意义的代码块比无休止地搜索更容易和简单.

七、语义 HTML SEO

由于爬虫必须区分数据,语义 HTML 标签可以更容易地发现网页上信息的性质及其与显式使用的相关性。 但是当您绘制语义 HTML 时,关键是确保信息是人类和计算机可读的。

使用语义 HTML,搜索引擎可以对“正确”的内容进行索引和优先排序。 例如,您可以使用 display Google 代码段列表的元素。 在过去几年中,语义 HTML 不断发展并补充了符合 Google 规则的标准 SEO 实践。

在 SEO 之上,适当的标签可以更轻松地以清晰的层次结构维护内容。 毕竟,搜索引擎会分析 Web 内容以对其进行索引。 好消息是 HTML5 的兴起为几个新的语义元素铺平了道路。 语义 HTML 代码在提高网站在 Google 等搜索引擎上的排名方面起着不可或缺的作用。

八、什么是新的 HTML5 语义元素?

有多种元素可供开发人员用于基本目的,例如列表和段落。 开发人员还使用诸如和用于特定的内容任务。

尽管 HTML5 可能相对较新,但使用非语义 HTML5 元素现在在网站上已经变得非常普遍。 一些常见的 HTML5 语义元素包括, , , , , , , , , , , ,

记住像这样的元素, , , , , 和作为元素。 这些元素将其他元素连接到页面部分。 还有一个典型的标签可以包含任何信息。 最终,开发人员更容易发现和导航语义中的分类信息区域。

九、为什么要关心语义代码

关于语义正确的HTML是否可以改善SEO,存在一些争论,但是一项重要的收获是,无论设备或用户的残障程度如何,确保所有人都可以尽可能地访问您的内容。 屏幕阅读器和其他工具会为可访问性提供平等机会,从而可以更好地处理语义代码。 编写语义代码可能需要更长的时间,并且需要更多的考虑,但是在为 网络可访问性.

十、语义代码的常见示例

缩略语

每当在页面上使用缩写或首字母缩写词时,都应使用缩写元素。 的 title 属性是缩写的完整值。 悬停在 abbr 元素将显示全部值:

JS WWW

下标和上标

下标和上标通常用于科学符号,印刷惯例和其他用途。 一些典型的例子:

高2 0 第2位

代码段

能够在HTML页面上表示代码摘录通常很有用-我们经常在此博客的教程中进行此操作。 的 code 以及 pre 元素都可以用于代码段。 code 对于应该作为代码一部分的单个值或单词更好(类似于 span 元素有效)。 与...结合使用 pre, code 然后将显示整个代码块,以及空格和换行符的相关格式:

您应该始终对图像元素使用img标签。 p { font-family: Helvetica; font-size: 16px; color: blue; }

本文内容由用户注册发布,仅代表作者或来源网站个人观点,不代表本网站的观点和立场,与本网站无关。本网系信息发布平台,仅提供信息存储空间服务,其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本网站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。如因作品内容侵权需删除与其他问题需要同本网联系的,请尽快通过本网的邮箱或电话联系。 
THE END
分享
二维码
< <上一篇
下一篇>>