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

义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前端培训，这里有清晰的学习路线，课程紧跟市场和企业需求，让你学有所成，快速找到满意的工作。

了解更多

TML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。

1 HTML骨架格式

日常生活的书信，我们要遵循共同的约定。

同理：HTML 有自己的语言语法骨架格式：

<HTML>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</HTML>

html结构：包括head body
html标签是以尖括号包围的关键字
html标签通常是成对出现的，有开始就有结束，包含成对标签、独立标签
html通常都有属性，格式：属性名＝“属性值”(多个属性之间空格隔开)
html标签不区分大小写,建议小写

2 html基本标签

HTML标签

作用：所有HTML中标签的一个根节点。

head标签

作用：用于存放：title,meta,base,style,script,link

注意：在head标签中我们必须要设置的标签是title

title标签

作用：让页面拥有一个属于自己的标题。

body标签

作用：页面在的主体部分，用于存放所有的HTML标签：p,h,a,b,u,i,s,em,del,ins,strong,img

3 颜色的表示方式

color:文本的颜色
bgcolor:背景色
background:背景图片

第一种方式：使用颜色名称: 仅仅有16种颜色名可用英文字母，其余的要用16进制值。

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

第二种方式：RGB模式

第三种：十六进制

#000000 #ffffff #325687 #377405

4 文档类型<!DOCTYPE>（重点）

<!DOCTYPE html>这句话就是告诉我们使用哪个html版本，我们使用的是 html 5 的版本。 html有很多版本，那我们应该告诉用户和浏览器我们使用的版本号。

标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，必需在开头处使用标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能按指定的文档类型进行解析。

5 HTML标签的语义化（重点）

所谓标签语义化，就是指标签的含义。

为什么要有语义化标签：方便代码的阅读和维护，同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容，使用语义化标签会具有更好地搜索引擎优化

核心：合适的地方给一个最为合理的标签。

语义是否良好： 当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性，不管是谁都能看懂这块内容是什么。

遵循的原则：先确定语义的HTML ，再选合适的CSS。

6 总结：（重要知识点）

双标签

<html></html>
<head></head>
<title></title>
<body></body>
<table></table>
<tr></tr>
<td></td>
<span></span>
<p></p>
<form></form>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<object></object>
<style></style>
<b></b>
<u></u>
<strong></strong>
<i></i>
<div></div>
<a></a>
<script></script>
<center><center>

单标签

<br>
<hr>
<img>
<input>
<param>
<meta>
<link>

排版标签

1.注释标签：<!–注释–>
-------------------------------------
2.换行标签：<br/>
-------------------------------------
3.段落标签：<p>文本文字
   特点：段与段之间有行高
   属性：align对齐方式
           (left：左对齐 center：居中 right：右对齐)
-------------------------------------
4.水平线标签:<hr/>
   属性:
        width：水平线的长度(两种:第一种:像素表示；第二种，百分比表示)
        size: 水平线的粗细 (像素表示，例如：10px)
        color: 水平线的颜色
        align:水平线的对齐方式(left：左对齐 center：居中 right：右对齐)
-------------------------------------
5.容器标签（重点）
     <div>:块级标签，独占一行，换行
     <span>:行级标签，所有内容都在同一行作用
     <div>:主要是结合css页面分块布局
     <span>:进行友好提示信息

标题标签 (熟记)

为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，随着数字增大文字逐渐变小，字体是加粗的，内置字号，默认占据一行；

<h1>、<h2>、<h3>、<h4>、<h5>和<h6>

列表标签

容器里面装载着文字或图表的一种形式，叫列表。列表最大的特点就是整齐、整洁、有序

无序列表 ul （重点）

无序列表标签： <ul></ul>
    属性：type :三个值，分别为：
           circle(空心圆) ,disc(默认,实心圆),square(黑色方块)
    列表项：<li></li>
注意：
<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
<li>与</li>之间相当于一个容器，可以容纳所有元素。

无序列表会带有自己样式属性，放下那个样式，一会让CSS来！

有序列表 ol

有序列表标签：<ol>
      属性：type：1、A、a、I、i（数字、字母、罗马数字）
      列表项： <li></li>

定义列表dl

\dl>
<dt>名词1
<dd>名词1解释1
<dd>名词1解释2
…
<dt>名词2
<dd>名词2解释1
<dd>名词2解释2
…
</dl>

dl>
名词1
名词1解释1
名词1解释2
... 名词2
名词2解释1
名词2解释2
...

图片标签

独立标签

属性:
src：图片地址： 相对路径 （同一个网站） 绝对路径 （不同网站）
width:宽度height:高度border:边框align:对齐方式，代表图片与相邻的文本的相当位置（有三个属性值：top middle bottom）
alt:图片的文字说明hspace 和 vspace 设定图片边沿上下左右空白，以免文字或其它图片过于贴近

链接标签

超链接可以是文本，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。（不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接）

属性：
href:跳转页面的地址(跳转到外网需要添加协议)；
name:名称，锚点(回到锚点: 顶部，底部，中间)，在访问锚点的书写格式:#name的值
target:_self(自己) _blank(新页面，之前页面存在) _
__parent top 默认
self_search相等于给页面起一个名字，如果再次打开时，如果页面存在，则不再打开新的页面。可以是任意名字。

如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。

TML(超文本标记语言)的历史可以追溯到互联网的早期。以下是HTML的主要历史事件和版本：

·HTML2.0于1993年发布，引入了一些新元素和属性如表格表单和图像。

·HTML3.0于1995年发布，增加了更多的标记和样式选项，以支持更复杂的页面布局和样式。

·HTML4.0于1997年发布，引入了框架样式表和脚本等新特性，使得网页设计更加灵活和丰富。在HTML 4.0之后HTML标准进一步发展为XHTML(可扩展超文本标记语言)1.0。XHTML1.0更加严格，强调语法和文档结构的一致性，使其更适合XML应用。

·HTML5于2010年正式发布标志着HTML的重大转变。HTML5引入了许多新的元素和API，如<video><audio><canvas><local storage>等，使网页开发更加丰富和交互。此外HTML5还引入了语义元素，如：NY NEOL以提高文档结构的语义化。

自HTML5发布以来，HTML已经成为一个不断发展的标准，被维护为"HTML Living Standard"，这意味着HTML不再按照传统的版本号发布，而是持续演进新特性和改进不断加入。

HTML的历史反映了互联网的不断发展和网页技术的演进，从最初的简单文本链接到，现代的富媒体和互动性网页一直是构建网页的基础，为全球互联网的发展做出了重要贡献。

在线咨询

上一篇：「前端小技巧」用CSS隐藏元素的几种方法
下一篇：Excel图表+Html网页制作动态看板

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

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

您的项目需求