在网页开发中，我们需要掌握的常用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出来后，新增了许多的新标签。但是，有些标签在我们开发中很少用到，所以，这里就没有做相应的介绍。

例

使用 <cite> 标签来定义作品的标题：

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

浏览器支持

所有主流浏览器都支持 <cite> 标签。

标签定义及使用说明

<cite> 标签定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题。

注释：人名不属于作品的标题。

HTML 4.01 与 HTML5之间的差异

在 HTML5 中，<cite> 标签定义作品的标题。

在 HTML 4.01 中，<cite> 标签定义一个引用。

全局属性

<cite> 标签支持 HTML 的全局属性。

事件属性

<cite> 标签支持 HTML 的事件属性。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

TML是一种用来描述网页的标记性语言。学习HTML可能并不难，主要是要记一些HTML标签和标签代表的含义。下面PHP程序员雷雪松根据使用的情况，整理出平时常用的HTML标签。

HTML基础之HTML常用标签-PHP程序员雷雪松的博客

1、最基本的HTML结构

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

2、最常用的HTML标签

a、布局标签

div标签定义文档中的分区或节（division/section），可以把文档分割为独立的、不同的部分，主要用于布局。

aside标签的内容可用作文章的侧栏，<span style="color: #ff0000;">html5新增标签</span>。

header标签定义页面的头部（介绍信息），<span style="color: #ff0000;">html5新增标签</span>。

section标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分，<span style="color: #ff0000;">html5新增标签</span>。

footer 标签定义文档或节的页脚，通常包含文档的作者、版权信息、使用条款链接、联系信息等等，<span style="color: #ff0000;">html5新增标签</span>。

article标签规定文章独立的其他内容，比如：标题、内容、评论，<span style="color: #ff0000;">html5新增标签</span>。

b、文本标签

h1-h6标签可定义标题

p标签定义段落

b/strong标签加粗

em标签来表示强调的文本，斜体

strong标签表示重要文本

u标签下划线

s标签删除线

br标签表示回车换行

hr标签表示水平线

span标签被用来组合文档中的行内元素。

blockquote标签表示块引用

pre标签可定义预格式化的文本，保持原有格式的一种标签。

sub标签下标，

sup>标签上标

 表示一个空格

©表示版权符

<表示<

>表示>

c、a标签定义超链接，指定页面间的跳转。链接可以指向外部链接或者页面内部id锚点，可以在当前页面打开，新开窗口。

d、多媒体标签

img标签主要在网页中插入图像，可以定义图片替换文本、显示宽度和高度、是否带边框，建议等比例设置，否则图像会变形。

audio标签定义声音，比如音乐或其他音频流。<span style="color: #ff0000;">html5新增标签</span>。

<audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>

video标签定义视频，比如电影片段或其他视频流。<span style="color: #ff0000;">html5新增标签</span>。

<video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video>

e、序列化标签

ul和li无序列表标签

<ul>

</ul>

ol和li有序列表标签，可以使用type属性规定有序列表符号的类型。1 按数字有序排列，为默认值，（1、2、3、4）；a 按小写字母有序排列，（a、b、c、d）；A 按字母大写有序排列，（A、B、C、D）。i 按小写罗马字母有序，（i, ii, iii, iv）；I 按小写罗马字母有序，（I, II, III, IV）。

<ol>

</ol>

dl标签定义了定义列表（definition list），dl标签用于结合 dt（定义列表中的项目）和 dd（描述列表中的项目）。

<dl>

<dd>用来计算的仪器 ... ...</dd>

</dl>

f、表格标签

table标签和tr标签，th标签和td标签，合并单元格。

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

g、表单标签

form标签定义提交方式、提交地址、表单字符集以及如何对其进行编码，需要提交的表单一定要放在form标签内。

input标签用于搜集用户信息

密码，输入的字符会被掩码（显示为星号或原点）

文件类型的表单，上传文件时，form表单一定要设置为enctype="multipart/form-data"

隐藏表单

提交

重置

radio单选

<input name="sex" type="radio" value="1" />男

<input name="sex" type="radio" value="2" checked="checked" />女

checkbox多选

<input name="skill" type="checkbox" value="1" checked="checked" />PHP

<input name="skill" type="checkbox" value="2" />前端

<input name="skill" type="checkbox" value="2" />数据库

<span style="color: #ff0000;">注：checked="checked"可以简写成checked</span>

label标签为input元素定义标注，如果您点击label元素文本，就会触发此input控件。

textarea标签，设置文本区内的可见行数和宽度

<textarea name="content" cols="30" rows="10">大段文本输入框</textarea>

button标签定义一个按钮

提交按钮

重置按钮

select标签和option标签下拉列表

单选菜单列表框

<option value="2" selected="selected">raykaeso</option>

</select>

多选列表下拉框，shift加鼠标单击，可以连续选择多个选择，CTRL+鼠标点击，可以点击多个。

<option value="3">raykaeso</option>

</select>

注:selected="selected"可简写成selected，表示选中

3、其他HTML事项

a、HTML标签和属性是不区分大小写的，建议HTML标签和属性都小写，属性值必须用双引号包围。

b、HTML标签都是以开始标签起始，以结束标签终止。大部分HTML标签都是成对出现的，称为双标签，比如：p标签、div标签，也有的HTML标签在开始标签中结束的标签，称为单标签，比如：hr标签、br标签。大多数 HTML 元素可拥有属性，文本内容都是写在开始标签与结束标签之间。

c、HTML标签之间尽量缩进与换行，每行代码不要过长，方便阅读和维护。

d、HTML标签使用必须符合标签嵌套规则。禁止a标签嵌套a标签，p标签嵌套div标签。

e、建议不使用HTML已经废弃的或者不赞成使用的标签，少使用table布局、iframe框架嵌套以及flash播放器。

来源：PHP程序员雷雪松的博客 -HTML基础之HTML常用标签（http://www.leixuesong.cn/2045）

在线咨询

上一篇：如何在Word中批量添加填空题的下划线？
下一篇：经典技术回顾和借鉴-JSP编程

您的项目需求

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

整合营销服务商

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

一、文档类型声明。

二、html主标签。

三、双标签和单标签。

四、head头部标签。

五、body主体标签。

1、最基本的HTML结构

2、最常用的HTML标签

3、其他HTML事项

您的项目需求