在网页开发中，我们需要掌握的常用HTML标签有哪些？

果想开发一个网站，除了要精通后端开发语言（如：php）外，还要精通HTML代码。那么，什么是HTML呢？HTML是一种超文本标记语言，它包含有众多的标签，我们可以通过这些标签，把不同的internet资源（如：文字、图片、视频、音频、表单等等）整合在一个统一的文档中，这就形成了我们可以看得见的网页。那么，HTML都有哪些常用的标签呢？

一、文档类型声明。

html5文档类型声明：<!doctype html>

html4文档类型声明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

二、html主标签。

这个标签是html最外层的标签，所有其它的HTML标签都要放在这个标签的内部。

<html>

</html>

三、双标签和单标签。

在HTML标签中，有的标签是成双成对的，如：<html></html>（如下图）；而有的标签是单个的，如：<hr>横线标签。

四、head头部标签。

head头部有以下几种常用标签：

meta：主要提供有关页面的元信息。

link：用来定义文档与外部资源的关系，最常用的是调用CSS样式文件。

title：页面标题的标签。

script：用来调用JS文件或JS代码。当然，script标签也可以在body主体中使用。

五、body主体标签。

1、块级标签。

块级标签的特性是：独自占有一行；标签的高与宽、边距可以修改；没有设置宽与高时，默认继承父标签。例如：

<div>div1</div>
<div>div2</div>
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>

前端页面显示的效果如下图：

常用的块级标签有：div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。

2、内联标签。

内联标签与块级标签不同，它不能独自占有一行，会与其它内联标签在同一样展示；内联标签的高与宽、上下边距是不能修改的，它里面的文字或图片有多高，它就是多高。例如如下代码：

<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<span>span1</span>
<span>span2</span>

CSS样式代码跟块级标签的例子是一样的，而显示的效果就不一样了，宽与高、上下边距没有效果。如下图：

常用的内联标签有：span、a、b、strong、i、em 。

3、内联块级标签。

内联块级标签，既有一些内联标签的特性，也有一些块级标签的特点：它不能独自占有一行，但是可以修改它的宽度和高度。例如下面这段代码：

<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<img src="w5.jpg" alt="">
<img src="w5.jpg" alt="">

CSS样式代码跟块级标签的那个例子仍然是一样的，图片的宽和高、上下边距修改成功，而2个图片不能独自占有一行，而是在同一行。如下图：

常用的内联块级标签有：img、input、textarea。

4、区域标签。

所谓区域标签，就是主要用来划分布局页面区域的。如：头部、主体内容、侧边栏、底部。这样划分的好处是：让页面布局更加清晰明了。

常用的区域标签有：header（头部）、footer（底部）、nav（导航）、aside（侧边栏）、section（主体）、article（独立内容）。

5、表单标签。

这个表单标签我们也是会经常用到的，如：登录网站的时候、提交数据的时候。如下图的评论表单：

表单常用的标签有：form、input、select、option、textarea 。

以上就是我们开发网页时，会常用到的HTML标签。当然，HTML标签远不止这些，尤其是html5出来后，新增了许多的新标签。但是，有些标签在我们开发中很少用到，所以，这里就没有做相应的介绍。

、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 时，是这样的：

家好，今天给大家分享一篇阅读的文章，本篇文章主要讲了 12 个 HTML 标签（组件），通过这些标签避免你在项目中集成复杂第三方组件，比如日历组件、颜色选择、进度条等...，简单的标签就能很方便的调用系统组件。

一、颜色选择组件（Color Picker）

在项目中，你可能希望通过调色板组件动态调整颜色，这时你可以使用 <input type="color"> 就可以轻松调用一个调色板组件，省去你在找第三方组件，示例效果如下：

示例地址：https://codepen.io/madarsbiss/pen/vYJBqeX

二、引用标签（Blockquote）

在文章排版时，有时候我们需要引用一些信息，这时我们需要用特殊的样式进行强调，这时你可以使用<blockquote> 标签来强调你用的内容，示例效果如下所示

示例地址：https://codepen.io/madarsbiss/pen/JjyPQBd

三、音频播放器（Audio Player）

如果从头写个音频播放器是一个费时费力又有挑战性的工作，但是你现在可以使用<audio>标签就能很轻松的调用。系统的音频播放器，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/oNevrEb

四、视频播放器（Video Player）

我们不仅能很方便的调用系统的音频组件，我们还可以使用<video> 标签调用视频组件，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/BadBgxJ

五、折叠组件（Accordion）

折叠列表的需求也是比较常见的，点击标题展开对应的信息内容，这时 <details> 标签就派上用场了，示例效果如下所示：

gif

项目地址：https://codepen.io/madarsbiss/pen/zYdOVPV

六、日期选择（Date Picker）

日期选择组件可以说是项目中必备的组件，想必大家都有自己比较常用的日期组件，如果没有复杂的样式和交互需求，使用<input type="date"> 这个标签就能轻松的胜任，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/qBXWzXE

七、滑块组件（Slider）

滑块组件也是一个比较常见的组件，主要应用在数值范围的筛选上，方便用户进行选择，这时我们可以使用 <input type="range"> ，我们可以设置最小值、最大值以及当前值，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/GRvKbXv

八、内容编辑（Content Editor）

为了让内容具有编辑性，你可以不必使用表单组件，比如 input、textarea 标签，你可以在可编辑的容器(div) 上添加 contenteditable 属性，就能很轻松的完成当前容器及所见即所得的编辑，示例如下所示：

示例地址：https://codepen.io/madarsbiss/pen/ExvYBwB

九、图片标签（Picture Tag）

有时候需要在不同的分辨率下显示不同的图片，如果你使用<img> 标签的话，你需要做的工作就会许多，但是使用<picture> 标签就能很轻松的完成在不同分辨率下显示不同图片的设置，调整浏览器的大小，就会根据窗口的大小显示不同大小的图片，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/abybomY

十、进度条（Progress Bar）

进度条组件也是个很常见的组件，你可以使用<progress> 标签就能轻松完成相关外观的设置，示例效果如下：

示例地址：https://codepen.io/madarsbiss/pen/oNevKdp

十一、下拉组件（Dropdown）

如果下拉组件选项比较多，用户选择就会比较困难，用户可能希望结合输入，能很方便的定位到下拉组件的内容，这时候你可以使用 <datalist> 标签就能满足上述需求，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/eYEOwdQ

十二、提示框（Tooltip）

如果你需要对页面某部分进行详细介绍时，你可能需要鼠标经过此区域显示详细的提示框效果，这时我们可以使用 title 属性就能轻松实现，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/VwzwZvE

结束语

今天的文章就分享到这里，希望在日后的项目中你能想起今天分享的这12个标签（组件），感谢你的阅读。

参考：
https://javascript.plainenglish.io/12-simple-html-snippets-to-avoid-complex-libraries-7f2965087312
作者：Madza

在线咨询

上一篇：如何在GitHub上开源一套受欢迎的组态软件
下一篇：HTML 文本格式化

您的项目需求

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

整合营销服务商

在网页开发中，我们需要掌握的常用HTML标签有哪些？

一、文档类型声明。

二、html主标签。

三、双标签和单标签。

四、head头部标签。

五、body主体标签。

、abbr

二、mark

三、sup、sub

四、figure

五、progress

六、area

七、details

八、dialog

九、datalist

十、fieldset

十一、noscript

一、颜色选择组件（Color Picker）

二、引用标签（Blockquote）

三、音频播放器（Audio Player）

四、视频播放器（Video Player）

五、折叠组件（Accordion）

六、日期选择（Date Picker）

七、滑块组件（Slider）

八、内容编辑（Content Editor）

九、图片标签（Picture Tag）

十一、下拉组件（Dropdown）

十二、提示框（Tooltip）

结束语

您的项目需求