在网页开发中，我们需要掌握的常用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>
<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出来后，新增了许多的新标签。但是，有些标签在我们开发中很少用到，所以，这里就没有做相应的介绍。
HTML常用标签概述（可用于网店装修）
-
HTML标签：
-
所有内容都在<html></html>标签之内；
-
<head></head>内放的是头部信息，是对页面的描述，不会直接显示在页面中。
-
<head></head>内的<title></title>中设置的是页面的标题，<title></title>只能放在<head></head>中；
-
<body></body>是页面的主体，大部分显示内容都定义在这里。
HTML注释：<!– –>：
-
注释不允许嵌套
html常用标签:
-
h标签（标题），HTML定义了<h1></h1>到<h6></h6>六个h标签，分别表示不同大小的字体。h1最大，h6最小。
-
<br/>只是回车，<p>是段落。<p>前后会有比较大的空白，而<br/>则没有。
-
<center>居中显示.
-
<b>、<strong>粗体，<i>、<em>斜体。<u>下划线。
-
<sub>2</sub>下标，如：H<sub>2</sub>O
-
<sup>2</sup>上标，如：10<sup>2</sup>
-
<font></font>字体标签，<font color=“red“ size=“7” face=“隶书”>红色</font>。color（设置颜色） size（1-7） face（设置字体,设置字体是注意用户计算机中必须有该字体才能正常显示）
-
<hr> color size（厚度） width（长度） align=left/center/right （默认为剧中显示）
-
<pre> 预格式化 保持本色;
-
HTML特殊字符：<（小于号，less than）；>（大于号，greater than）； （空格）。
-
超链接：<a>标签的一些常用属性：href、title、target、name
-
插入图片：<img src=“路径”/>
-
列表：dl→(定义列表)，ul→(无序列表)， ol→(有序列表)。
-
表格：<table>；创建行：<tr>；创建单元格：<td>；表页眉：<thead>；表主体：<tbody>；表页脚：<tfoot>；表头：<th>。
-
rowspan(合并行)、colspan（合并列）
-
<input>是主要的表单元素，type的可选值：submit（提交按钮）、button（普通按钮）、checkbox表单标签：（复选框）、file（文件选择框）、hidden（隐藏字段）、image（图片按钮）、password（密码框）、radio（单选按钮）、reset（重置按钮）、text（文本框）。
-
meta标签：（包括在head标签中。主要用来描述页面自身信息,元信息）
-
<meta name=\”keywords\” content=\”C#学习资料,4k8k.net,.net开发,软件开发,编程自学网\”/>
-
<meta name=\”description\” content=\”免费更新最新C#相关技术知识，主要包括：.net基础,网页前端,三层架构,SQL数据库…\”/>
-
<meta http-equiv=\”Content-Type\” content=\”text/html;charset=utf-8\” />网页编码
-
<meta http-equiv=\”Refresh\” content=\”3\” />三秒钟后刷新此网页。
-
<meta http-equiv=\”Refresh\” content=\”3;url=http://www.4k8k.net\” />三秒钟后重定向到新网页。
-
<meta http-equiv=\”Cache-Control\” content=\”no-cache\” /> 禁止浏览器缓存页面。
-
<meta name=\”名字\” content=\”值\” />关于网页的描述信息。
-
<meta http-equiv=\”名字\” content=\”值\” />模拟http响应头信息。
C#编程自学_做最好的.net自学资料站_更多文章请访问：http://www.4k8k.net/
欢迎订阅。
初识HTML——列表标签和表单标签
在html中列表分为无序列表、有序列表和自定义列表（项目列表）。接下来就看看他们有什么不同吧！
作用：如果说table标签是用来显示数据的，那么列表标签就是用来进行html页面布局的。
- 无序列表
语法：
<ul></ul>标签中只能且必须嵌套<li></li>标签。li标签之间没有先后顺序，是并列存在的。li标签里可以容纳文本、数据、图片、超链接等内容。跟table一样，列表标签也自带样式属性，但为了代码统一，我们还是会使用css来设置。
代码示例：
运行界面：
- 有序列表
语法：
<ol></ol>标签里面只能嵌套<li></li>标签，在这里li标签是有顺序的。
代码示例：
运行界面：
- 自定义列表
语法：
<dl></dl>标签：定义列表
<dt></dt>标签：列表标题
<dd></dd>标签：列表内容
一个dd标签是对dt标签标题的说明。这两个标签中可以包含任何标签。
代码示例：
运行界面：
作用：收集用户信息。一般用在注册界面等。
组成：一个完整的表单中包含表单域（整个填写界面所有信息）、表单控件（表单元素）和提示信息（表单控件的提示作用）3个部分。
- 表单域
表单域：是一个包含表单元素的区域。
<form>标签用于定义表单域，实现用户信息的收集和传递。
作用：将其区域范围内的信息收集并传送给服务器。
语法：
注：action：url地址，指定接收并处理表单数据的服务器程序的url地址。
method：用于设置表单数据的提交方式。
method=”get”：提交数据时，地址栏可查看到数据。数据量少且安全级别不高时使用。
method=”post”：提交数据时，地址栏数据是加密的。
name：表单域的名称。用于区分同一页面下的不同表单域。
- 表单控件
1.input输入表单元素：
语法：<input type=””>，依据type属性值不同区分不同控件。
文本框：<input type=”text”>。单行输入字段，默认宽度20个字符。输入的文字可见。
密码框：<input type=”password”>。输入内容默认不可见。
单选框：<input type=”radio”>，默认情况下选中后无法取消。
注：为实现多选一状态，需要将所有的单选框控件具有同一个name名。
复选框：<input type=”checkbox”>，选中后可以更改可以取消。
提交按钮：<input type=”submit”>，默认按钮中的提示文字是提交，可以通过value值进行更改内容。点击提交按钮后会把表单数据发送到服务器。
重置按钮：<input type=”reset”>，默认按钮中的提示文字是重置，可以通过value值进行更改内容。点击后会清楚表单中的所有数据。
普通按钮：<input type=”button”>
文件域：<input type=”file”>，用来选择文件，一般适用于文件上传。
label标签：标注标签，配合input控件一起使用
作用：绑定表单控件，扩大点击范围。
当点击label标签的内容时，系统会自动选中该表单控件。
代码示例：
运行界面：
Input控件属性：
name:用户自定义，提示input元素的名称。给后台工作人员的提示。
value：用户自定义，提示input元素的内容值。给后台的提示。在文本框控件中会显示该内容，单选框和复选框则显示不出来。
checked：默认选中状态。主要用于单选按钮和复选按钮中。
maxlength：正整数，规定输入字段中的字符最大长度。
input代码示例：
运行界面：
2.select下拉表单元素：
使用场景：地址选择、职业分类、学校分类等。
select标签：定义下拉列表。
语法：
代码示例：
运行界面：
3.textrea文本域表单控件
使用场景：留言、介绍、评论等。
语法：
跟文本框控件不同，它是多行文本输入框，可以自行设定行数以及一行容纳多少字数。
rows=“每行可输入的字符数”，
cols=“显示的行数”。
这两个样式属性实际开发中大多使用css就可以改变操作。
代码示例：
运行界面：
关于HTML基础内容就学习到这里了，明天练习一个综合案例。对了，现在跟学的是黑马前端的pink老师发布的基础视频，明天做的案例按照老师讲解的案例去做。
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
