web前端培训:什么是语义HTML标记以及如何使用它们?

更新时间: 2021-09-09 09:50:47来源: 粤嵌教育浏览量:10085

语义HTML标记允许您向标记添加含义,以便搜索引擎、屏幕阅读器和web浏览器能够理解它。默认情况下,当用户代理读取您的内容时,它不理解上下文和含义。语义HTML标记允许您向用户提供结构化内容,这对于页面搜索引擎优化和可访问性尤其重要。想要对语义HTML标记了解更多,建议参加web前端培训,可以在短时间内获得快速提升。

尽管语义标记存在于早期的HTML版本中,但HTML5规范在块级和内联级的语法中都添加了一些新的语义元素。

最常用的语义标记

最常用的语义元素是HTML5出现之前就已经存在的,这也许并不奇怪。实际上,没有三个语义标记,您甚至无法创建HTML文档:

<html>这封信包含了整页,

<head>包含呈现页面所需的所有信息,

<body>包含页面内容的。

这三个语义元素构成了每个HTML文档的主干。在web前端培训,你可以学习使用语义元素来创建HTML文档。除此之外,以下是最流行的语义元素,所有这些元素都由早期的HTML规范定义:

<ul>、<ol>和<li>用于定义有序和无序列表,

<p>对于段落,

<table>对于表,

<form>对于表单,

<img>对于图像,

<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,用于不同级别的标题。

上面的一些元素也有补充标记,它们也是语义标记。例如,<table>具有<thead>、<tbody>和<tfoot>,可用于标记表格的页眉、正文和页脚。想要学习更多关于html语言标记的知识,不妨报个web前端培训班,有专业讲师指导教学,可以让你更全面掌握这部分的技能。

HTML 5中的块级语义元素

块级语义标记有两种主要类型:分段元素、语义流元素

1.分段元素在HTML文档中创建一个不同的分段。它们的内容在文档大纲中被视为单独的块,因此它们可以有自己的标题和页脚标记。其中有四项:

<article>对于博客帖子和文章等自包含块,

<aside>用于侧边栏,

<nav>对于导航块,

主题内容块的<section>。

2.语义流元素具有语义,但不会在文档中创建不同的块,因此它们不能有自己的标题和页脚元素。它们有很多,以下是使用最广泛的:

<main>用于文档的主内容块(一页只能使用一次),

<header>用于页面或分段元素的页眉部分,

<footer>用于页面或分区元素的页脚部分,

<audio>用于音频嵌入,

<video>用于视频嵌入,

<figure>用于块级图像块。

想要了解这两种元素是如何使用的,可以参加web前端培训学习一下,理论课程+项目课程,双管齐下,提高学习效率,在最短的时间内学到最多最有效的知识。

HTML5中的内联级语义标记

可以在块级元素中使用内联标记,例如段落或列表中的强调文本字符串。除了块级语义元素外,HTML5还引入了两个语义内联标记,尽管之前的规范也包括语义内联标记,例如超链接的<a>或缩写的<abbr>。

HTML5的语义内联元素的创建目标是替换以前经常使用的非语义内联标记,分别是粗体文本的<b>标记和斜体文本的<i>。但是,根据经验,HTML应该只用于定义含义和结构。所有的样式都应该用CSS来完成。

HTML语义的最终目标是创建用户代理(如web浏览器、屏幕阅读器和搜索引擎机器人)可以轻松浏览和理解的文档大纲。为此,您需要明智地使用语义和非语义标记。对HTML感兴趣的同学,建议报名参加web前端培训,这里有清晰的学习路线,课程紧跟市场和企业需求,让你学有所成,快速找到满意的工作。

免费预约试听课