HTML标签详细讲解说明[HTML语法]

xiaoniba • • 百度空间搬家来的

标签和属性
在HTML中，通常标签都是由开始标签和结束标签组成的，开始标签用“<标签名>”表示，结束标签用“</标签名>”表示。
元素指的是包含标签在内的整体，除去标签的部分叫做内容。
属性要在开始标签中指定，用来表示该标签的性质和特性。通常都是以“属性名=”值””的形式来表示，用空格隔开后，还可以指定多个属性。指定多个属性时不用区分顺序

颜色的指定方法
用HTML指定颜色有两种方法
1、用16进制数值来指定：在#号的后面，把RGB的各个选项用十六进制的数值来表示，数值保持两位数。
2、指定颜色的名称：可以对基本的16色用名称来指定其颜色

指定文件的位置
在对某部分设置链接的时候，需要指定链接端HTML文件的位置；同样，如果想在该处显示图像也需要指定图像的位置。在HTML中，这个位置用URL来表示，有以下两种表示方法：
1、绝对URL：绝对URL就是用Web浏览器查看网页时，地址栏中显示的以http://开头的路径
2、相对URL：相对URL是在同一站点内进行设置，类似于在同一磁盘上管理文件的形式。这种方法是以当前文件的位置为基准。使用相对URL时，如果要指 定的文件在当前文件的下级，就从目录名开始一直写到要指定的文件名，中间用“/”符号隔开。如果在当前文件的上级，每上一级就加一个“../”符号

显示HTML的版本
<!DOCTYPE~>
HTML的版本表明HTML文件是按照哪个版本进行编写的（标明该HTML文件遵循的DTD文件），不同的版本和种类都有固定的书写格式，要按照固定的格式输入文件开头，然后在文件开头处写明版本，按照这种版本的规定格式进行编写
必须使用的标签
<html>~</html>
<head>~</head>
<title>~</title>
<body>~</body>
HTML文件的开头写有<!DOCTYPE~>的部分，代表HTML的版本，其后是必须存在的四种标签
首先，<!DOCTYPE~>后面的整个都要用html标签(<html>~</html>)括起来，其中要按照 head标签(<head>~</head)和body标签的顺序(<body>~</body>)的顺序进 行排列。
在head标签中填写与该文件相关的信息，body标签中填写世纪要在浏览器上显示的内容。另外，在head标签中，只能有一个代表文件标题的title标签

设置页面的文字颜色
<body text=”颜色指定”>~</body>
设置页面的背景颜色
<body bgcolor=”颜色指定”>~</body>
设置页面的背景图像
<body background=”图像的URL”>~</body>

按照目的设定范围
<div>~</div>
<span>~</span>

插入注释
<!—注释语句-->

添加标题
<title>~</title>
title标签用来给HTML文件添加标题
这个标签一定要位于<head>~</head>圈定的范围内。在这里指定的标题除了可以在通常的浏览器窗口的标题栏中显示以外，还可以作为加入收藏夹时的标题

显示文件编码
<meta http-equiv="Content-Type" content="text/html; charset=文字编码" />
meta标签的charset属性表示该HTML文件是用什么文字编码编写的
注意，该标签一定要位于<head>~</head>范围内
添加关键字、内容介绍及作者姓名
<meta name="keywords" content="关键字1，关键字2，…" />
<meta name="description" content="内容介绍" />
<meta name="author" content="作者姓名" />
这些信息都不会在画面上显示出来，但是搜索引擎在收集信息时要用到
注意，该标签一定要位于<head>~</head>范围内
设置样式表和脚本语言的种类
<meta http-equiv="Content-Style-Type" content="样式表的种类" />
<meta http-equiv="Content-Script-Type" content="脚本的种类" />
在HTML文件内可以设置样式表和脚本的默认语言
注意，该标签一定要位于<head>~</head>范围内

设置进入网页
<link rel=”关系” href=”URL”>
<link rev=”关系” href=”URL”>
rel：在本页看到的，与URL标明的网页之间的关系
rev：在URL标明的网页中看到的，与本页之间的关系
link标签表示的是该文件和与其相关的其他文件之间的关系
注意，该标签一定要位于<head>~</head>范围内

设置标准URL
<base href=”绝对URL”>
<base href=”绝对URL” target=”目标名”>
base标签用来设置将该页中使用的相对URL的标准指向成绝对URL，指定了这个标签之后，在该页指定的相对URL就会全部认定为已在这里指定的绝对 URL。如果不进行这项设置，就以当前页的位置为标准，如果指定了Target属性，就可以指定打开链接地址网页的默认框架和窗口
注意，该标签一定要位于<head>~</head>范围内

设置自动倒入网页功能
<meta http-equiv="refresh" content="秒数" />
<meta http-equiv="refresh" content="秒数"；URL=要移动到的URL />
在经过数秒后，自动开始导入网页。如果指定了要移动到的URL，就会导入URL指定的网页。如果没有指定，就会再次导入相同的页
注意，该标签一定要位于<head>~</head>范围内

设置各级标题
<h1>~<h1>

设置段落
<p>~</p>
p标签表示的是该部分为一个段落

设置联系地址
<address>~</address>
address标签表示的内容是该网页制作者的联系地址和有关网页内容的咨询地址等信息

设置强调内容
<em>~</em>
<strong>~</strong>
这两个标签所圈内容表示该部分是强调的内容

设置较短的引用文字
<q>~</q>
<q cite=”引用页的URL”>~</q>
q标签代表的意思是该部分为较短的引用文，在引用段落的某一部分的时候使用，如果使用cite属性，还能够把引用页的URL显示出来

设置较长的引用文章
<blockquote>~</blockquote>
<blockquote cite=”引用页的URL”>~</blockquote>

设置文字内容的出处
<cite>~</cite>
设置缩略语
<abbr title=”字符串”>~</abbr>
<acronym title=”字符串”>~</acronym>
title：不处于省略状态下的词汇（字符串）
设置添加的内容
<ins cite=”URL” datetime=”添加日期时间”>~</ins>
设置需要删除的内容
<de cite=”URL” datetime=”删除日期时间”>~</del>

突出显示段落中的术语
<dfn>~</dfn>
表示与程序关联的文本
<kbd>~</kbd>：输入文本
<samp>~</samp>：输出样本
<code>~</code>：源代码
<var>~</var>：变量

显示特殊符号
&lt：<
&gt：>
&quot：”
&amp：&

设置文字的换行
<br>
添加了br标签之后，文本就会再该处换行。即使在HTML代码中已经换行了，在浏览器上显示的时候却反映不出来，因此如果想在浏览器上换行的话，就要使用br标签

添加不同横线效果
<hr>
<hr size=”粗细” width=”长度” align=”对齐方式” noshade>
加入了hr标签后，就可以在其标注的地方显示横线

设置文本格式
<b>~</b>：黑体字
<i>~</i>：斜体字
<tt>~</tt>：等大字体
<sup>~</sup>：上标
<sub>~</sub>：下标
<u>~</u>：下划线
<s>~</s>：删除线

设置空格和换行
<pre>~</pre>
<pre>标签可以保留文字在源代码中的格式，使得页面中显示的内容和源代中的格式完全一致
设置居中效果
<center>~</center>
center标签用于将指定范围内的内容设置为居中
设置行对齐方式
<h1 align=”行对齐方式”>~<h1>
<p align=”行对齐方式”>~<p>
<div align=”行对齐方式”>~<div>
使用align属性可以设置标题、段落以及指定范围内的行对齐方式

设置文字颜色
<font color=”设置颜色”>~</font>
设置字体类型
<font>字体名”>~</font>
设置字体字号
<font size=”字号”>~</font>
相对改变字体大小
<big>~</big>：增大
<small>~</small>：减小
<font size=”+n”>：增大n号
<font size=”-n”>：减小n号

设置字号的基本大小
<basefont size=”字号”>
size：1~7

链接到其他页面
<a href=”链接目标URL”>~</a>
a标签的href属性能把指定的范围链接到其他页面上，链接部分的词语要设置得让人看到这个部分就能联想到链接网页上的具体内容
另外，在链接图像的时候，一定要插入替代的文字（alt=”~”）使用户能够很明确的了解到链接的目标

链接到当前页的特定位置
<a href=”#位置名”>~</a>：指定链接文件（从什么位置开始链接）
<a name=”位置名”>~</a>：指定链接的地址（要链接的位置）
如果一页上的内容非常多，可以在一个网页中给特定的位置命名，然后再链接到该位置（跳转）。在给链接对象位置命名的时候要使用name属性。然后，在链接的时候，要用href属性在链接地址名称的前面加上#号

设置链接到其他页面的特定位置
<a href=”URL#位置名”>~</a>：指定链接源（从什么位置开始链接）
<a name=”位置名”>~</a>：指定链接的地址（要链接的位置）
在链接到其他网页上的时候，可以先给那一页上特定的位置命名，然后链接到该位置。在给链接对象位置命名的时候要使用name属性。然后，在链接的时候，要用href属性设置成”URL+#+位置名”这样一种格式

设置链接文字的颜色
<body link=”指定颜色” vlink=”指定颜色” alink=”指定颜色”>~<body>
link：还没有看见的链接部分的文字颜色
vlink：已经看见的链接部分的文字颜色
alink：鼠标单击链接部分的文字颜色
body标签用于设置网页整体链接部分的文字颜色
在新窗口中打开链接网页
<a href=” URL” target=”窗口名”>~</a>
利用target属性可以设置打开链接窗口的方式
通过设置链接来启动邮箱
<a href=”mailto：邮箱地址”>~</a>

为列表添加不同类型的标记
<ul><li>列表项目1</li><><li>列表项目2</li>…<ul>
ul标签的作用是将列表（条款形式）加上圆点或方括号的标记。列表的整体要在<ul>~</ul>标签范围内，在这之间的各个项目要在<li>~</li>标签之内
更改列表标记
<ul type=”标记种类”>~</ul>
<li type=”标记种类”>~</li>
标记的种类包括disc、cicle和square

制作带序号的列表
<ol><li>列表项目1</li><><li>列表项目2</li>…<ol>
改变序号的样式
<ol type=”序号样式”>~</ol>
<li type=”序号样式”>~</li>
改变序号的顺序
<ol start=”开始序号”>~</ol>
<li value=”开始序号”>~</li>

制作包含专用语和解释的列表
<dl><dt>专用语<dt><dd>对其解释</dd>…<dl>

表格的基本形式
<table border=”边框的粗度”>~</table>：整个表格
<tr>~</tr>：单独一行
<th>~</th>：单元格：标题用
<td>~</td>：单元格：数据用
表格的整体要圈在<table>~</table>之间显示，表格当中某一个单元格用<th>~< /th>表示或者<td>~</td>表示。每个单元格都在表的单独以行，放置在<tr>~< /tr>中。也就是说，table标签的内容是由tr标签构成的。各个tr标签的内容是由表示单元格的th或者td标签构成的。th标签代表这个单 元格的内容是标题。td标签代表这个单元格的内容是数据

为表格添加标题
<caption>~</caption>
<caption align=”对齐方式”>~</caption>
caption标签用来给表格添加标题
该标签一定要放在table标签的紧后面。标题的显示位置（即对齐方式）可以指定在表格的上部，或者表格的下部

指定表格的大小
<table width=”宽度”>~</table>
宽度：针对像素或者窗口的百分比
指定单元格大小
<th width=”宽度” height=”高度”>~</th>
<td width=”宽度” height=”高度”>~</td>
合并单元格
<th rowspan=”垂直方向的合并数”>~</th>
<th colspan=”水平方向的合并数”>~</th>
<td rowspan=”垂直方向的合并数”>~</td>
<td colspan=”水平方向的合并数”>~</td>
垂直方向的合并数：从当前单元格开始向下合并的单元格数
水平方向的合并数：从当前单元格开始向右合并的单元格数
设置单元格之间的距离
<table cellspacing=”单元格的距离”>~</table>
设置单元格边框与内容之间的距离
<table cellpadding=”单元格边框与内容之间的距离”>~</table>
设置单元格中的行对齐方式和列对齐方式
align属性用于设置单元格内的行对齐方式，valign属性用来设置单元格内的列对齐方式
禁止在单元格内换行
<th nowrap>~</th>
<td nowrap>~</td>

设置表格和单元格的背景颜色
bgcolor属性用于指定表格和单元格中的背景颜色
设置表格和单元格的背景图像
background属性用于指定表格和单元格中的背景图像
设置表格外框的宽度
<table border=”外框的宽度”>~</table>
设置表格外框的显示形式
<table frame=”外框的显示形式”>~</table>
设置表格内补边框线的显示形式
<table rules=”内部边框线的显示形式”>~</table>
定义表格中的横行
<thead>~</thead>：表头部分
<tbody>~</tbody>：表体部分
<tfoot>~</tfoot>：表底部分
thead标签、tbody标签和tfoot标签都是用来定义表格的横行（tr标签）的
这样组合之后，就可以针对该组合的整体来应用属性和样式表。
使用这些标签的时候，一定要以thead标签、tfoot标签和tbody标签的顺序进行排列。在一个表格里，只能放置一个thead标签和一个tfoot标签，而tbody标签可以根据需要放置多个

利用纵列设置表格属性和样式表
<col span=”纵列数”>
<col span=”纵列数” width=”宽度”>
col标签不仅可以用来改变表格的纵列结构，还可以用来根据纵列，来综合指定宽和行对齐方式等属性以及样式表
该标签放置的位置要在caption标签的紧后面（如果没有caption标签，就放在table标签的开始标签的紧后面），以及thead标签和tr标签的前面

表格居中
<table align=”center”>~</table>
将表格嵌入到文本中
<table align=”对齐方式”>~</table>
位置：left,right
将table标签的align属性指定为left或者right后，就可以将表格以居左或居右的方式嵌入到文字中间
如果想要解除嵌入状态，可以使用<br>标签的clear属性

解除表格的嵌套
<br clear=”解除表格那一侧的嵌套”>
left：解除左侧表格的嵌套
right：解除右侧表格的嵌套
all：解除两侧表格的嵌套
设置表格与嵌套文字之间的距离
<table vspace=”垂直距离” hspace=”水平距离”>~</table>
垂直距离：表格的上下框与文字间的距离
水平距离：表格的左右框与文字间的距离

插入图像
<img src=”URL” width=”宽度” hignt=”高度” alt=”替代文字”>
使用img标签，可以把图像插入到HTML文件中
图像的格式一般可以使用GIF格式、JPEG格式和PNG格式
不管图像实际的大小如何，都会按照在这里所指定的宽度和高度来显示
alt属性是在不能显示图像的情况下，指定替代图像所使用的文字

设置图像的边框
<img src=”URL” alt=”替代文字” border=”边框的粗度”>
设置图像与文字的垂直位置关系
<img src=”URL” alt=”替代文字” align=”对齐方式”>
在同一行中，如果有图像和文字，那么就可以用align属性来设置图像和文字的垂直位置关系
制作图像热区
<img src=”URL” alt=”替代文字” usemap=”#map名”>
<map name=”map名”>~</map>
<area shape=”形状” cords=”坐标” href=”URL” alt=”替代文字”>
在map标签中，用来设置实际单击的区域和链接地址的是area标签
在area标签中，一定要指定表示链接地址的替代文字，之后要用image标签的usemap属性指定定义后的image map的名称（名称前面要加#），这样图像就可以作为image map产生相应的效果

将图像嵌套在文本中
<img src=”URL” alt=”替代文字” align=”对齐方式”>
位置：left,right
解除图像的嵌套
<br clear=”解除哪一侧图像的嵌套”>
设置图像与周围文字之间的距离
<img src=”URL” alt=”替代文字” vspace=”垂直距离” hspace=”水平距离”>

放置Java小程序
<applet code=”类文件名” width=”宽度” height=”高度” >~</applet>
<param name=”参数名” value=”参数值”>
applet标签是嵌入Java小程序时要使用的标签
如果使用param标签，在执行java小程序时，需事先指定一些必要值。这时，param标签要位于<applet>~</applet>范围的最开始部分

制作填写表单
<form action=”URL” method=”发送形式” enctype=”MIME类型” target=”窗口名称”>~</form>
URL：用来处理发送后表格的程序的URL
发送形式：get,post
MIME类型：以post方式发送内容时的MIME类型
窗口名称：先是发送结果的窗口或框架名
form标签表示在表单中填写的内容是可以发送的

制作发送按钮
<input type=”submit” value=”标签” name=”名称”>
标签：在按钮上显示的文字
名称：按钮的名称
将input标签的type属性设置为submit，再根据form标签的设置，可以制作发送填写在表单中数据的按钮

制作重置按钮
<input type=”reset” value=”标签”>
制作通用按钮
<input type=”button” name=”名称” value=”标签”>
通用按钮通常与JavaScript等脚本语言组合使用

利用图像来制作发送按钮
<input type=”image” src=”URL” name=”名称” alt=”替代文字” align=”对齐方式”>
通常，发送按钮都使用input type=”submit”代码，不过图像也可以作为发送按钮，具有发送功能。这时，图像被单击的位置将和表单的内容一起被发送
制作不同功能的发送按钮
<button type=”类型” name=”名称” value=”发送值”>~</button>
类型：submit,reset,button
button标签是用来制作按钮专用的
通过指定type属性值，就可以产生具有不同功能的按钮，包括发送按钮、重置按钮和通用按钮。另外，在<button>~< /button>中放置相应的内容，可以作为按钮的标签显示出来。在需要进行其他处理并设置多个发送按钮的情况下，根据name属性和value属 性所显示的值，接受方就可以分辨出单击的是哪一个发送按钮

制作单行文本框
<input type=”text” name=”名称” value=”默认文字” size=”宽 ...

版权声明：
作者：xiaoniba
链接：https://blog.xiaoniba.com/2008/03/05/html%e6%a0%87%e7%ad%be%e8%af%a6%e7%bb%86%e8%ae%b2%e8%a7%a3%e8%af%b4%e6%98%8ehtml%e8%af%ad%e6%b3%95/
来源：小泥吧的博客
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>