这些常用的HTML标签，你还不知道吗？

着互联网的不断发展与前端开发技术的不断进步，越来越多的人想在前端开发市场中分一杯羹，而HTML语言凭着它简单易懂的特性成为了不少计算机萌新的入门语言。那么什么是HTML呢？

什么是HTML

HTML，即超文本标记语言，是一种标识性的语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

使用HTML语言，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。而HTML标签是HTML语言中最基本的单位，是HTML最重要的组成部分。

什么是HTML标签

HTML标签是由一对尖括号括起来的关键词，像<html>、<body>等。
HTML标签通常是成对出现的，第一个标签是开始标签，第二个标签是结束标签。
标签不区分大小写，最好用小写。
标签可以嵌套，但是不可以交叉嵌套，如<a><b></a></b>。
有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭合标签.如<br/> <hr/> <img />等。

标签分类

标签一般分为两种：

1. 块级标签

占一整行的标签。如<h>、<p>、<div>、<form>等

2. 行内标签

可以多个标签共同占用一行的标签。比如：<span>,<a>,<input>,<img>,<label>等

3. 块级标签特点

总是在新行上开始
宽度缺省是它的容器的100%，除非设定一个宽度
它可以容纳内联元素和其他块元素

4. 行内标签特点

和其他元素都在一行上
宽度就是它的文字或图片的宽度，不可改变
内联元素只能容纳文本或者其他内联元素

HTML特殊字符

平时写代码很少用到HTML的特殊字符，最常用的可能是（空格）了，但有时在移动端为了节省时间，可能会用这些字符实现某种特殊效果。

使用方法：

这些字符属于unicode字符集，所以，你的文档需要声明为UTF-8；
编号用在HTML中时，需要在前面加上&#符号；
用于CSS文件中，但是需要用反斜杠\转义；
用于JavaScript，和CSS用法一样，不过要用\u来转义。

常用HTML特殊字符

HTML基本标签简介

<!DOCTYPE html>标签

作用：声明文档的解析类型(document .compatMode)，避免浏览器的怪异模式。

浏览器有怪异模式（BackCompat）和标准模式（CSS1Compat）两种模式，那么何为怪异模式和标准模式呢？

BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。

CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,，如果是这样的话那就很麻烦了-------浏览器按照自己的方式解析渲染页面，即在不同的浏览器显示不同的样式。

但是如果你的页面添加了<!DOCTYPE html>，那么就等同于开启了标准模式，浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。

这就是<!DOCTYPE html>的作用。

<meta>标签

http-equiv属性

顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

页面编码：

页面刷新和跳转

解决IE浏览器兼容性问题

name属性

name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

供搜索引擎使用（关键词）

网站信息描述

<title>标签

title标签写网站头部信息，即网页标签的名称：

<title>开云见日</title>

<link>标签

link标签有两个作用：

1.设置标签页图标：

2.外联CSS文件：

<style>标签

用于存放或编写css文件：

<style type="text/css"></style>

<script>标签

1.引进文件

<script type="text/javasvript" src="http://www.ncerp.cn/js/main.js"></script>

2.写js代码

<script type="text/javascript">...</script>

常用标签

<hn>：n的取值范围是1~6; 从大到小. 用来表示标题.
<p>：段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.
<b> <strong>：加粗标签.
<strike>：为文字加上一条中线.
<em>：文字变成斜体.
<sup>和<sub>：上角标和下角表.
<br>：换行.
<hr>：水平线
<div>：白板，本身没有特性，块级标签。
<span>：白板，本身没有特性，行内标签。

<sup>和<sub>的使用

<p>这个文本包含 <sub>下标</sub>文本。</p>

<p>这个文本包含 <sup>上标</sup> 文本。</p>

<a>标签

作超链接：跳转到指定url

作锚点：条转到指定id

<img>标签

属性如下：

src: 要显示图片的路径.

alt: 图片没有加载成功时的提示.

title: 鼠标悬浮时的提示信息.

width: 图片的宽

height:图片的高 (宽高两个属性只用一个会自动等比缩放

HTML还有很多标签，像<ul>、<ol>、<dl>、<li>、<br>等等。在目前的移动应用开发大潮下，使用web技术进行移动应用开发正变得越来越流行，慢慢会变成以HTML为核心的技术栈配合数据库的天下。让我们找准时代发展方向，努力学习，成为时代的弄潮儿吧!

、abbr

abbr 全称是 abbreviations，意思是缩写。应用场景也很简单，为一些文章中的缩写增加注释。

以前在文章中对于缩写的解释经常会这么做：

DAU（Daily Active User），日活跃用户数 ......

那我们用 abbr 标签呢？

<abbr title="Daily Active User">
    DAU
</abbr>
<span>，日活跃用户数 ......</span>

展示的效果如下：

这个标签就可以把全称隐藏掉，弱化信息量，让真正不知道该缩写的用户主动去获取缩写的具体意思，这个在 markdown 里经常会出现。

二、mark

<mark/> 在 markdown 中也是很常用的，用于将包裹的文本高亮展示。

<mark>高亮文本</mark>

效果如下：

如果全文统一高亮样式，可以专门对 mark 标签进行样式重置，这样就不用对你用的每个 div 加一个 highlight 的类名了，又不语义化，又徒增文档大小。

三、sup、sub

<sup/>和<sub/>分别表示上标和下标，在 markdown 中出现得也很频繁，比如数学公式和引用。

<div>3<sup>[2]</sup></div>
<div>4<sub>2</sub></div>

效果如下：

上标和下标的样式原理也比较简单，主要就是利用了 vertical-align 的 top 和 sub 属性值，然后将字号缩小，不过有现成的标签，干嘛不用呢？

四、figure

figure 是用于包裹其它标签的内容的，然后再利用另一个标签 figcaption ，可以对包裹的内容进行一个文本描述，例如：

<figure>
    <img src="/media/cc0-images/elephant-660-480.jpg"
         alt="大象">
    <figcaption>这是一张大象的照片</figcaption>
</figure>

效果如下：

那要是图片挂了呢？

再友好点处理，我们把 img 标签的 alt 属性去掉。

漂亮，终于把我一直厌烦的图裂 icon 给干掉了，样式还巨好看。

当然不止能包裹 img 标签，其它任何都是可以的。

嘿嘿，给大家在本文来个实战，下面这个可以点击，样式也是利用了 figure 这个标签。

我是figure标签产生的

五、progress

说到 <progress/> 这个标签就很有意思了，去年有段时间我做的业务里涉及到了进度条，当时是前同事做的，然后有一些性能问题，我就在研究如何优化，减少进度条改变带来的性能问题。

虽然最后问题是解决了，但是也有幸收到了张鑫旭大佬的评论，他告诉我 progress 这个标签就足够了，既有语义化，又有进度条的功能，性能还好，兼容性也很不错。后来经过一番尝试，还真是，当时是我孤陋寡闻了，也安利给大家。

<!-- 进度条最大值为100，当前进度为60，即60% -->
<progress max="100" value="60"/>

浏览器自带的样式就已经很好看了，效果如下：

业务中我们也就可以通过控制 value 属性，来改变进度条的进度了。

六、area

area 这个标签也非常有意思，它的作用是为图片提供点击热区，可以自己规定一张图的哪些区域可点击，且点击后跳转的链接，也可以设置成点击下载文件，我们来举个例子：

  <img src="example.png" width="100" height="100" alt="" usemap="#map">

  <map name="map">
    <area shape="rect" coords="0,0,100,50" alt="baidu" href="https://www.baidu.com">
    <area shape="rect" coords="0,50,100,100" alt="sougou" href="https://www.sogou.com/">
  </map>

area 一般要搭配 map 标签一起使用，每个 area 标签表示一个热区，例如上面代码中，我们定义了两个热区，热区形状都为rect（矩形），他们的热区分别是：

坐标 (0,0) 到坐标 (100,50) 的一个矩形
坐标 (0,50) 到坐标 (100,100) 的一个矩形

我们都知道，默认的坐标轴是这样的：

因此，我们划分的两个热区就是:

最后再来看一下我们的实际效果：

七、details

details 字面意思是 "详情"，在 markdown 里也经常用，用该标签包裹了的内容默认会被隐藏，只留下一个简述的文字，我们点击以后才会展示详细的内容。

<details>
  <p>我是一段被隐藏的内容</p>
</details>

效果如下：

这还没有加任何一行的 js 代码，我们点击后，details 标签上会多一个 open 的属性，被隐藏的内容就展示出来了。

默认情况下，简要文字为 "详情"，想要修改这个文字，要搭配 summary 标签来使用。

<details>
  <summary>点击查看更多</summary>
  <p>我是一段被隐藏的内容</p>
</details>

就搞定了！

八、dialog

浏览器自带弹窗方法 alert、confirm、prompt，样式固定且每个浏览器不同，同时还会阻塞页面运行，除了这个还提供了一个 dialog 标签，它的使用方式有点类似于现在各大组件库的 Modal 组件了，浏览器还为该标签提供了原生的 dom 方法：showModal、close，可以直接控制弹窗的展示和隐藏。

<dialog id="dialog">
    <input type="text">
    <button id="close">ok</button>
</dialog>
<button id="openBtn">打开弹框</button>

<script>
    const dialog = document.getElementById('dialog')
    const openBtn = document.getElementById('openBtn')
    const closeBtn = document.getElementById('close')
  
    openBtn.addEventListener('click', () => {
        // 打开弹框
        dialog.showModal()
    })
    closeBtn.addEventListener('click', () => {
        // 隐藏弹框
        dialog.close()
    })
</script>

效果如下：

细心的你有没有发现，这原生的弹框还自带背景蒙层，点击是关闭不掉的，但起码它不会阻塞页面。

然后我们在弹窗展示时，也可以通过 esc 键来关闭弹窗。

九、datalist

datalist 是用于给输入框提供可选值的一个列表标签，类似咱们常用的 Select 组件。

我可以用其实现一个 "输入联想" 的功能。

<label> 输入C开头的英文单词：</label>
<input list="c_words"/>

<datalist id="c_words">
  <option value="China">
  <option value="Click">
  <option value="Close">
  <option value="Const">
  <option value="Count">
</datalist>

来试一试：

刚点击时会把所有推荐的选项都列出来，然后根据后面输入的内容，会过滤掉不匹配的选项，比如我输入 cl，会过滤掉不是 cl 开头的单词，最后只剩下 Click 和 Close 了。

最后我发现，他这个下拉框有点好看啊？为啥这原生的 input 框默认样式那么丑，啥时候改改。

十、fieldset

fieldset 标签是用于分组管理 form 表单内的元素的，若 fieldset 设置了 disabled 属性，则被其包裹的所有表单元素都会被禁用置灰，且不会随着表单一起提交上去，是的就成了摆设。

什么意思呢？看个例子：

<form action="/example">
  <fieldset disabled>
    <legend>被禁用区域</legend>
    <label>ID：</label>
    <input type="text" name="id" value="1">
    <label>邮箱：</label>
    <input type="text" name="email" value="1234567@163.com">
  </fieldset>
  <label>名字：</label>
  <input type="text" name="name">
  <button type="submit">提交</button>
</form>

这里我们把 ID 和邮箱的表单包裹了起来，且设置了 disabled，只开放了一个 name 的输入控件，此时界面如下：

可以看到除了 name 输入框，其它的两个输入框都被禁用了，此时点提交会是什么样子呢？

嗯，只提交了 name 字段。

十一、noscript

这个标签是在浏览器不支持或禁用了 javascript 时才展示的，大多用于对 js 强依赖的应用，比如现在大部分的 SPA 页面，一旦不支持 javascript，页面基本上什么内容都没了，此时可以靠这个标签做友好提示。

一般我们不需要特地去使用，大多都是在打包过程中自动插入到 html 静态文件里去的，例如：

// init.js
const root = document.getElementById('root')
const button = document.createElement('button')
button.innerText = '点击出弹窗'
root.appendChild(button)

<!-- index.html -->
<script defer src="./init.js"></script>

<noscript>
  不好意思，你的浏览器不支持或禁用了 JavaScript，请更换浏览器或启用 JavaScript
</noscript>

<div id="root"></div>

未禁用 javascript 时，页面是这样的：

禁用了 javascript 时，是这样的：

.标签语义化

提到标签，很多刚入门前端开发的人，肯定都会很纳闷，这么多HTML标签我如何记住呢？我又应该根据什么依据去正确使用它呢？其实这样的问题，我刚开始和大家一样苦闷，但是在我学习Web页面开发的过程中，然后不断的积累，不断的总结，发现要想记住HTML标签以及怎样更好的去使用这些标签，需要做到以下三点：

第一点：不要死记硬背，没意义，只需要记住常用的哪几个足矣。

第二点：根据内容选择使用HTML标签，什么意思呢？见下文分解。

第三点：遵循W3C的规范。

首先，第一点咱们就不用说，不让死记硬背，就是要多写页面，多敲代码，久而久之孰能生巧，巧能生花，慢慢的你就能记住这些标签了，而且在开发页面的过程中，你们会发现，咱们最常用的也就是那么几个而已。

其次，第二点根据内容选择使用HTML标签，这一点非常关键，因为你掌握了这一点，你能很好地去使用HTML标签，并且能让页面变得很优质，这也会提高你网页被搜索引擎收录。

最后，也就是第三点，这一点自然不用怀疑，如果要想让页面更好的在不同的浏览器中呈现出一致的效果，那么必须遵循W3C的规范。

说了这么多，只是一些学习需要注意的问题，下面才是真正解开怎样去使用和记住标签这个谜团的方法。

我们在使用标签的过程中，大家会发现类似的标签，比如标题标签（h1-h6）、p（段落标签）、a（超链接标签）以及图片标签（img）等，通过这些标签的名称，咱们是不是不难理解吧，很直观的就知道这些标签该怎么，用于何处。而这些名称的含义就是我们所说的标签语义化。随着智能手机的出来，移动Web都是通过H5去开发页面，而H5中的HTML标签就比之前版本的HTML标签更加具有语义化。

那么什么是标签语义化呢？所谓的标签语义化，指的就是标签所代表的含义。咱们可以通过标签的含义，正确地去使用它。

标签语义化的作用：

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

如下图所示，通过使用语义化标签和没使用任何标签，就能直观感受到语义化标签的好处。

普通的文本和使用语义化标签后的效果对比图

那么如何去判断一个页面中，语义化是否良好呢？很简单，直接扒掉CSS这层漂亮的衣服，当我们把CSS去掉后，如果页面中的结构依然组织有序，并且有良好的可读性，那么它就是非常良好的。

如何去使用这些标签呢？首先根据内容确定语义化的标签，其次再根据呈现需求，使用CSS样式。因此HTML标签并非通过死记硬背，而是通过在使用的过程中，利用HTML标签的语义化去记忆。如下图所示，通过使用语义化标签，瞬间就能把普通的文本，以更清晰的结构呈现出来。

使用语义化的普通文本，变得更为结构清晰

2.常用标签分类汇总

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

在开发中，排版标签主要是和CSS搭配使用，主要是用于显示网页的整体结构，也是网页布局中常用的标签。下面我一一了解一下。

排版标签：

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

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

标题标签的使用

呈现的效果如下：

呈现的效果

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

【2】段落标签（p）

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

p标签语法格式

【3】水平线标签（hr）

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

【4】换行标签（br）

缩写来源：br的英文单词是break，打断、换行的意思。
语义：表示换行的意思。在html中，一个段落的文字会从左到右依次排列显示，直到浏览器窗口的最右端，才会自动换行。如果我们在实际开发中碰到需要将文本内容强制换行显示的，此时就可以使用换行标签实现。
语法格式：<br />。
标签特点：它也是一个单标签。
示例：将以下内容通过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标签主要是用于在网页中插入图像，它是一个单标签。
知识点扩展：通过img标签，我们会发现，html标签除了自身外，它们还具有一些属性，这些属性，我们称为标签属性，通过标签属性可以设置标签的一些外在特性。标签属性的基本语法格式：<标签名属性1="值1" 属性2="值2" ...>内容 </标签名>。

标签属性的特点：

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

图片标签属性使用

链接标签

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

a标签的常见属性

提示：

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

内部链接地址

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

注释标签

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

注释标签

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

好了，各位小伙伴，今天我就给大家分享到这儿了，希望我给大家总结的内容，能帮到正在浏览我这篇内容的前端开发者，也希望你们有所收获。如果喜欢的，可以点击关注，会继续给大家分享更多的内容。

在线咨询

上一篇：肖sir_html之基本使用（1）
下一篇：「HTML4」HTML入门

您的项目需求

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

整合营销服务商

这些常用的HTML标签，你还不知道吗？

什么是HTML

什么是HTML标签

标签分类

HTML特殊字符

HTML基本标签简介

<sup>和<sub>的使用

、abbr

二、mark

三、sup、sub

四、figure

五、progress

六、area

七、details

八、dialog

九、datalist

十、fieldset

十一、noscript

您的项目需求