这 12 个实用的 HTML标签（组件）建议尽早用上
大家好，今天给大家分享一篇阅读的文章，本篇文章主要讲了 12 个 HTML 标签（组件），通过这些标签避免你在项目中集成复杂第三方组件，比如日历组件、颜色选择、进度条等…，简单的标签就能很方便的调用系统组件。
在项目中，你可能希望通过调色板组件动态调整颜色，这时你可以使用 <input type=\”color\”> 就可以轻松调用一个调色板组件，省去你在找第三方组件，示例效果如下：
示例地址：https://codepen.io/madarsbiss/pen/vYJBqeX
在文章排版时，有时候我们需要引用一些信息，这时我们需要用特殊的样式进行强调，这时你可以使用<blockquote> 标签来强调你用的内容，示例效果如下所示
示例地址：https://codepen.io/madarsbiss/pen/JjyPQBd
如果从头写个音频播放器是一个费时费力又有挑战性的工作，但是你现在可以使用<audio>标签就能很轻松的调用。系统的音频播放器，示例效果如下所示：
示例地址：https://codepen.io/madarsbiss/pen/oNevrEb
我们不仅能很方便的调用系统的音频组件，我们还可以使用<video> 标签调用视频组件，示例效果如下所示：
示例地址：https://codepen.io/madarsbiss/pen/BadBgxJ
折叠列表的需求也是比较常见的，点击标题展开对应的信息内容，这时 <details> 标签就派上用场了，示例效果如下所示：
gif
项目地址：https://codepen.io/madarsbiss/pen/zYdOVPV
日期选择组件可以说是项目中必备的组件，想必大家都有自己比较常用的日期组件，如果没有复杂的样式和交互需求，使用<input type=\”date\”> 这个标签就能轻松的胜任，示例效果如下所示：
示例地址：https://codepen.io/madarsbiss/pen/qBXWzXE
滑块组件也是一个比较常见的组件，主要应用在数值范围的筛选上，方便用户进行选择，这时我们可以使用 <input type=\”range\”> ，我们可以设置最小值、最大值以及当前值，示例效果如下所示：
示例地址：https://codepen.io/madarsbiss/pen/GRvKbXv
为了让内容具有编辑性，你可以不必使用表单组件，比如 input、textarea 标签，你可以在可编辑的容器(div) 上添加 contenteditable 属性，就能很轻松的完成当前容器及所见即所得的编辑，示例如下所示：
示例地址：https://codepen.io/madarsbiss/pen/ExvYBwB
有时候需要在不同的分辨率下显示不同的图片，如果你使用<img> 标签的话，你需要做的工作就会许多，但是使用<picture> 标签就能很轻松的完成在不同分辨率下显示不同图片的设置，调整浏览器的大小，就会根据窗口的大小显示不同大小的图片，示例效果如下所示：
示例地址：https://codepen.io/madarsbiss/pen/abybomY
十、进度条（Progress Bar）
进度条组件也是个很常见的组件，你可以使用<progress> 标签就能轻松完成相关外观的设置，示例效果如下：
示例地址：https://codepen.io/madarsbiss/pen/oNevKdp
如果下拉组件选项比较多，用户选择就会比较困难，用户可能希望结合输入，能很方便的定位到下拉组件的内容，这时候你可以使用 <datalist> 标签就能满足上述需求，示例效果如下所示：
示例地址：https://codepen.io/madarsbiss/pen/eYEOwdQ
如果你需要对页面某部分进行详细介绍时，你可能需要鼠标经过此区域显示详细的提示框效果，这时我们可以使用 title 属性就能轻松实现，示例效果如下所示：
示例地址：https://codepen.io/madarsbiss/pen/VwzwZvE
今天的文章就分享到这里，希望在日后的项目中你能想起今天分享的这12个标签（组件），感谢你的阅读。
参考：
https://javascript.plainenglish.io/12-simple-html-snippets-to-avoid-complex-libraries-7f2965087312
作者：Madza
「HTML」什么是 HTML 中的 div 标签
1：语法
2：作用
div 标签可以用来划分 HTML 结构，从而配合 CSS 来整体控制某一块的样式。
div 标签是块级元素，它可用做组合其它 HTML 元素的容器。
div 标签可以用作严格的组织工具，如果用 id 或 class 来标记 div 标签，则 div 标签的作用会更加完美。
3：例子
我们以 “坚持就是胜利” 这句话的中英文书写方式为例，看一下 div 是如何划分结构的
首先先看一下编辑器效果，如下
再来看一下浏览器的运行效果，如下
如果我们把 div 标签去掉，只用段落标签 p 来实现，其实浏览器的运行效果是一样的，那我们为什么还要用 div 标签呢 ，这不是多此一举吗？
其实不然，这是在代码量比较少的情况下，两者的差距不明显，但如果代码有成百上千行的时候，就体现到了 div 标签划分结构的作用，同时也使代码更具有逻辑性。
总结来说，div 标签最重要的用途是划分区域，然后再结合 CSS ，针对指定区域进行样式控制。
我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取
原文链接：https://blog.csdn.net/qq_42351033/article/details/102680545
HTML中的标签
讲一下html中文件标签和文本标签的使用
目的是学会使用，所以借助工具可以省好多时间
1.文件标签：构成html最基本的标签
html:html文档的根标签
head：头标签。用于引入html文档的一些属性。引入外部的一些资源
title：标题标签
body：体标签
<!DOCTYPE html>:html5中定义该文档是html
2.文本标签：和文本有关的标签
注释:<!– 注释内容 –->
<h1> 到<h6>:标题标签自带换行的效果
<p>：表示段落的标签
<br>：换行标签<br/>和<br>的写法都不会报错
<hr>：显示一条水平线（也是一个自闭和标签）水平线有一些属性我们可以控制它的样式。hr里面表示高度是size而不是height.对齐方式默认是居中的。
<b>：字体加粗
<i>：斜体
<font>:字体标签（通过属性来修改字体的字号，大小，颜色，以及字体的样式）
<center>:文本居然标签
这里讲下网页下面的版权标签是如何写出来的。
3.图片标签：用来展示图片的（图片也是一个自闭合标签）
属性:src:用来指定图片的位置
什么都不写默认就是./的形式
../表示上一级目录
4.列表标签：
有序列表:ol,li(li表示的是列表的每一项)
无序列表:ul,li
5.链接标签：
a:定义一个超链接
属性：
href:指定访问资源的URL(统一资源定位符，就是路径的表示形式)
target：（是目标的意思）指定打开资源的方式
_self:在当前页面打开
_blank:在空白页面打开
6.表格标签：在HTML中的表格只有行的概念，没有列的概念，将表格以行的形式进行分割，然后再对行进行操作。
table:定义表格
width:表格的宽度
border:边框
cellpadding:单元格内容左对齐（定义内容和单元格的距离）
cellspacing:边框合并(定义单元格之间的距离，如果指定为0，单元格的线会合为一条)
bgcolor:背景色
align:表格的对齐样式
tr:定义行
bgcolor:背景色
align:表格的对齐样式(是用来修改文本的对齐方式的)
td:定义单元格
colspan:合并列
rowspan:合并行
th:定义表头单元格
<caption>:表格标题
<thread>:表示表格的头部分
<tbody>:表示表格的体部分
<tfoot>:表示表格的脚部分
7.块标签：div和span是结合css使用的
span:文本信息在一行显示，行内标签，内联标签(意思就是它不会换行)
div:是会换行的。每一个div占满一整行。块级别的标签
8.语义化标签：html5中为了提高程序的可读性，提高了一些标签
<header>
<footer>
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
