web前端新手需要了解的常用标签知识，一起来看一下吧！

提到标签，很多刚入门web前端开发的人，肯定都会很纳闷，什么是标签，HTML标签有哪些？接下来小编就带你详细了解一下

HTML基本标签，即超文本标记语言（HyperText Markup Language）。

标签是由小于号(<)+中间字符+大于号(>)组成的代码（英文字符）组成的，主要是用来标记内容模块的，也可以用来标明元素内容的意义。标签一般使用尖括号包围，例如：、,这两个标签都是表示一个HTML文件。

作用是给用户展示特定内容或是告诉浏览器与搜索引擎关于网页的部分信息。

标签语义化的作用：

• 通过使用语义化标签，更能精准地将其把内容呈现出来。
• 通过使用语义化标签，让页面结构更加的清晰，方便代码的阅读和维护。
• 能让浏览器或网络爬虫更好地解析，从而更好地分析和抓取网页中的内容。
• 使用语义化标签还能让搜索引擎得到更好的优化。

常用标签分类汇总

通常我们常见的标签有标题标签、段落标签、水平线标签、换行标签以及div和span标签，这些标签又被统称为排版标签。

排版标签：

【1】标题标签（h1-h6）

• 缩写来源：标题标签的英文单词是head，因此它使用它的缩写h来表示。
• 语义：标题标签主要是用于突显标题内容，它是h1-h6（分为1级标题、2级标题、3级标题......6级标题），级别依次递减。级别越小，标题就会越小。
• 语法格式如下：

呈现的效果如下：

一句话总结：使用了标题标签的文字会加粗，会根据级别显示文字的大小，并且一行只能放一个标题。

【2】段落标签（p）

• 缩写来源：p标签的英文单词是paragraph，表示段落的意思。
• 语义：p标签可以把html文档分割为若干段落。在网页中要想把文字以段落的形式呈现，并且有条不紊的，那么段落就是必备的标签。
• 语法格式如下：

【3】水平线标签（hr）

• 缩写来源：hr的英文单词是horizontal，表示横线的意思。
• 语义：它表示分隔线，用于将文字内容分隔开，让文档结构看起来更加清晰，层次分明。当然在网页中除了使用分隔线（hr）标签来实现，还可以通过图片插入以及CSS样式来实现，只不过使用hr标签是最简单的方式。提示：CSS样式是页面中的重点，此处主要是介绍HTML，因此暂不做详细说明。
• 语法格式：<hr />。
• 标签特点：它是一个单标签，hr标签默认是以水平线的样式进行显示。

【4】换行标签（br）

• 缩写来源：br的英文单词是break，打断、换行的意思。
• 语义：表示换行的意思。在html中，一个段落的文字会从左到右依次排列显示，直到浏览器窗口的最右端，才会自动换行。如果我们在实际开发中碰到需要将文本内容强制换行显示的，此时就可以使用换行标签实现。
• 语法格式：<br />。
• 标签特点：它也是一个单标签。
• 示例：将以下内容通过br标签强制换行

呈现效果：

【5】div和span标签

• 缩写来源：div的英文是division，表示分割、分区的意思。span没有缩写，表示跨度、跨距和范围的意思。
• 语义：div和span标签，没有任何语言，主要是用于网页布局使用。
• 语法格式：<div>这是一个div盒子</div> <span>这是一个span盒子</span>
• div和span的区别：div标签，主要是用于布局，在没有使用其它干预的情况下，一行只能放一个div。而span标签，也是用来布局，在没有任何其它的干预的情况下，一行上可以放很多span标签。此处的效果，大家可以根据语法，自行在实现查看一下对比效果。

最后给大家来一个完美的总结：

难道这就完了吗？咱们的标签就只有这些常用的吗？那当然不是，咱们接下来再看我们的文本格式化标签。

文本格式化标签

文本格式化标签的作用：通常文本格式化标签主要用于网页中文字样式的设置，比如字体加粗、斜体或下划线等效果，当然后期也会通过CSS样式来实现，会更加完美。

常见的文本格式化标签如下：

它们分别的区别：

• b和strong：b标签只是加粗，strong除了加粗，还具有强调的意思，更具语义化。
• i和em：i只是让文本显示斜体的效果，而em在斜体的效果上加强了语义。
• s和del：s只是让文本显示删除线，而得了不仅显示删除线，还加强了语义。
• u和ins：u只是添加了下划线，而ins不仅显示了下划线，还加强了语义。

我么网页中除了排版标签、文本格式化标签，当然还少不了图片标签（img），通过图片的展示，会让整个页面更加的生动形象。那么下面再来看一下这个标签吧。

图片标签（img）

• 缩写来源：img的英文单词是image，表示图像、影像的意思。
• 语义：用于显示图片内容。
• 语法格式：<img src='图像url' />，在这个的语法中，我们发现img标签使用了src属性，这个属性主要是用于指定图像的文件路径，也是img的必须属性。
• img标签常见属性如下所示：

• 标签特点：img标签主要是用于在网页中插入图像，它是一个单标签。
• 知识点扩展：通过img标签，我们会发现，html标签除了自身外，它们还具有一些属性，这些属性，我们称为标签属性，通过标签属性可以设置标签的一些外在特性。标签属性的基本语法格式：<标签名 属性1="值1" 属性2="值2" ...>内容 </标签名>。

标签属性的特点：

• 一个标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
• 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
• 任何标签的属性都有默认值，省略该属性则使用默认值。
• 标签的属性采用的是键值对的格式key="value"的形式。

链接标签

• 缩写来源：a标签的英文单词是anchor，表示锚、铁锚的意思。
• 语义：表示超文本链接。
• 语法格式：<a href ="跳转目标" target="目标窗口的弹出方式">文本或图像</a>。
• 常见的属性：

提示：

• 比如添加今日头条作为外部链接，需要添加外部地址。
• 内部链接，就是页面直接内部相互链接，因此只需要使用名称即可，比如

• 如果没有确定链接目标，通常使用"#"表示暂时空链接。
• 除了可以创建文本链接，还可以给网页中的元素，如图像、表格、音频、视频都可以添加超链接。

注释标签

• 注释标签：用于在HTML文档中添加一些便于阅读和理解，但又不需要显示在页面中的文字说明，此时就需要使用注释标签。它是HTML中的一种特殊标签，它不会在浏览器中显示，但是会在源代码中查看到。
• 语法格式：

• 提示：注释通常是给咱们开发者看的，程序是不会执行这个代码的。

以上就是“web前端新手需要了解的常用标签知识，一起来看一下吧！”的详细内容，想要了解更多web前端内容欢迎持续关注编程学习网