整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
果想开发一个网站，除了要精通后端开发语言（如：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>
<head></head>
<body></body>
</html>
在HTML标签中，有的标签是成双成对的，如：<html></html>（如下图）；而有的标签是单个的，如：<hr>横线标签。
head头部有以下几种常用标签：
meta：主要提供有关页面的元信息。
link：用来定义文档与外部资源的关系，最常用的是调用CSS样式文件。
title：页面标题的标签。
script：用来调用JS文件或JS代码。当然，script标签也可以在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出来后，新增了许多的新标签。但是，有些标签在我们开发中很少用到，所以，这里就没有做相应的介绍。
家好，今天给大家分享一篇阅读的文章，本篇文章主要讲了 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呢？
HTML，即超文本标记语言，是一种标识性的语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
使用HTML语言，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。而HTML标签是HTML语言中最基本的单位，是HTML最重要的组成部分。
标签一般分为两种：
1. 块级标签
占一整行的标签。如<h>、<p>、<div>、<form>等
2. 行内标签
可以多个标签共同占用一行的标签。比如：<span>,<a>,<input>,<img>,<label>等
3. 块级标签特点
4. 行内标签特点
平时写代码很少用到HTML的特殊字符，最常用的可能是 （空格）了，但有时在移动端为了节省时间，可能会用这些字符实现某种特殊效果。
使用方法：
常用HTML特殊字符
作用：声明文档的解析类型(document .compatMode)，避免浏览器的怪异模式。
浏览器有怪异模式（BackCompat）和标准模式（CSS1Compat）两种模式，那么何为怪异模式和标准模式呢？
如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,，如果是这样的话那就很麻烦了-------浏览器按照自己的方式解析渲染页面，即在不同的浏览器显示不同的样式。
但是如果你的页面添加了<!DOCTYPE html>，那么就等同于开启了标准模式，浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。
这就是<!DOCTYPE html>的作用。
<meta>标签用于提供关于 HTML 文档的元数据（元数据是关于数据的信息），元数据不会显示在页面上，但是对于机器是可读的。例如meta被用于设置关键字、设置页面描述、设置作者、设置字符集、设置页面定时跳转等等。meta标签放置在head标签中，对meta的设置对搜索引擎注册、搜索引擎优化排名等有至关重要的作用。
<meta>有两个属性，分别是http-equiv属性和name属性，不同属性有不同的参数，这些不同的参数使得名，meta标签有不同的功能：
http-equiv属性
顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
name属性
name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<title>开云见日</title>
link标签有两个作用：
1.设置标签页图标：
2.外联CSS文件：
用于存放或编写css文件：
<style type="text/css"></style>
1.引进文件
<script type="text/javasvript" src="http://www.ncerp.cn/js/main.js"></script>
2.写js代码
<script type="text/javascript">...</script>
属性如下：
HTML还有很多标签，像<ul>、<ol>、<dl>、<li>、<br>等等。在目前的移动应用开发大潮下，使用web技术进行移动应用开发正变得越来越流行，慢慢会变成以HTML为核心的技术栈配合数据库的天下。让我们找准时代发展方向，努力学习，成为时代的弄潮儿吧!
*请认真填写需求信息，我们会在24小时内与您取得联系。
