HTML（Hyper Text Mark-up Language 超文本标记语言）的缩写，标记：就是用来描述网页内容的一些特定符
号。HTML不是编程语言，而是一种描述性的标记语言，用于描述网页中内容的显示方式，比如文字以什么颜色
、大小来显示，这些都是利用html标记来实现。
lHtml文档的创建方式：用html语言创建的文档
手工直接编写（例如记事本）。
通过图形化的HTML开发软件 Dreamweaver。
由Web服务器上的动态网页程序生成。
HTML 标记的类型：单标记与双标记
一、单标记
(1).<标记名称 >
单一型 , 无属性值。
如： <br/>
(2).<标记名称属性 = ” 属性值 ” >
单一型，有属性值。
如： <hrwidth= ” 80% ” / >
二、双标记
(3).<标记名称 >… </ 标记名称 >
没有属性值。
如： <title>… </title>
(4).<标记名称属性 = ” 属性值 ” >… </ 标记名称 >
有属性值。
如： <bodybgcolor= ”red ” > … </body>
<fontsize= ” 7 ” > … </font>
1、双标记：<开始标记>内容</结束标记>
2、 单标记：<标记>
3、标记的属性： <标记 属性1=参数1 属性2=参数2…>内容</标记>
说明：
A、标记与属性、属性之间以空格分隔
B、属性不区分先后顺序；且属性不是必需的
重点强调：虽然在HTML中标记不区别大小写，但在XHTML中所有标记都必须小写，所以建议从现在开始，所有标
记都采用小写
1、文档结构
所有的网页文件,通常由四对标记来构成,文档的骨架，它们是：
<html>
<head>
<title>
标题
</title>
</head>
<body>
正文
</body>
</html>
l<html>……</html>标识网页文件的开始与结束，所有的html元素都要放在这对标记中
l<head>……</head>标识网页文件的头部信息，如标题、搜索引擎关键字等
l<title>……</title>标识网页文件的标题
l<body>……</body>标识网页文件的主体部分
Meta标记用于定义文件信息
Meta标记用于定义文件信息，对网页文件进行说明，便于搜索引擎查找。放置于<head></head>之间
设置关键字：
<meta name=”keywords” content=”value”>多个关键字内容之间可以用“，”分隔
设置描述：<meta name=”description” content=”value”>
设置作者：<meta name=”author” content=”作者名”>
设置字符集：<meta http-equiv=”content-type” content=”text/html;charset=gb2312”>
设置页面定时跳转：<meta http-equiv="Refresh" content="2;URL=http://www.itcast.cn" />
网页主体标记body
（1）、注释
<!--注释内容-->
（2）、body属性
<body bgcolor=“背景颜色” background=“背景图像” text=“文本颜色” link=“链接文本颜色” vlink=
“访问过的文本颜色” alink=“激活的链接文本颜色” leftmargin=“左边界” rightmargin=“右边
界”topmargin=“上边界” bottommargin=“下边界”>
字体修饰
(1)、<font>标记
语法：
<font color="文本颜色" size="字号" face="字体">文本</font>
注：网页中的文本字体、字号一般通过CSS修饰
(2)、字符格式
加粗
倾斜
加强语气(加粗)
加强语气(倾斜)
下划线
删除线
上标
下标
（3）、段落标记：
格式： <p align= ” 对齐方式 “ > … </p>
属性名称 属性值 说明
align left 左对齐（默认）
center 居中
right 右对齐
（4）、段落标题
<hx align= ” 对齐方式 “ > … </hx>：段落标题
说明：
X取值[1~6] hx内的文本会自动加粗显示。
hx针对的对象是段落，而font针对的对象的任意文本。
（5）、<br />：换行（换行不换段）
(6). 水平直线 <hr />
属性名称 属性值 说明
size 像素 绝对设置，以数字表示，属性值越大，线越粗
百分比 相对设置，以 % 表示，属性值越大，线越粗
width 像素 绝对设置，长度不会应视窗的改变而改变
百分比 相对设置，长度会随着视窗宽度而改变
noshade="noshade" 实体线
定义一个块引用：使用文本缩进
格式： <blockquote>...</blockquote>优化有点用
属性名称 属性值 说明
cite url 被引用的地址
居中标记 <center>内容</center>(被废弃的标签)
预格式化 <pre></pre>
显示已经格式化好的文字。不加此标记的话，HTML浏览器会忽略所有空格和制表符。
在HTML文档中使用特殊字符:
空格
版权号 ©©
注册商标 ®®
“"
&&
<<
>>
1、列表标记用途：
[1]、无序列表 <ul>…</ul>
[2]、有序列表 <ol>…</ol>
[3]、定义列表 <dl>…</dl>
无序列表语法：
<ul type=“项目符号类型”>
<li type=“项目符号类型”>内容1</li>
<li> 内容2</li>
…
</ul>
<li></li> 表示一个项目
有序列表语法：
<ol start=“列表起点” type=“项目符号类型”>
<li >内容1</li>
<li >内容2</li>
…
</ol>
4、定义列表语法：
<dl> <dt>标题1</dt> <dd>内容1</dd>
<dd>内容2</dd> <dt>标题1</dt> <dd>内容1</dd>
<dd>内容2</dd> </dl>
<dl></dl>定义列表
<dt></dt>表示一个项目
<dd></dd>表示一个项目下的更详细的内容的解释
图片Web上支持的图片格式
GIF（图形交换格式）：GIF格式文件最多只能保存256种颜色。该格式支持透明色，支持动画效果。
JPEG（联合图像专家组）：该格式不支持透明色及动画，颜色可达1670万种
PNG（网络可移植格式）：该格式支持透明色，但不支持动画，颜色从几种至1670万种。
图片标记
<img src=“图片的路径” />
路径
绝对路径：提供目标文档的完整主机名称、路径信息、及文档全称
相对路径:从当前文档开始的路径
如果当前文档和目标文档位置平行，则直接书写目标文档全称
如果当前文档和目标文档所在文件夹位置平行，则书写为 文件夹名称/目标文档全称
如果当前文档所在文件夹和目标文档位置平行，则书写为 ../目标文档全称
根相对路径:从站点根目录开始的路径，以"/"开头
src图片的路径
alt规定图片的替代文本[图片无法显示时]
title鼠标悬停时显示的内容
width设置图片宽
height设置图片高
border设置图象边框
align
vspace定义图像顶部和底部的空白（垂直边距）
hspace定义图像左侧和右侧的空白（水平边距）
号。HTML不是编程语言，而是一种描述性的标记语言，用于描述网页中内容的显示方式，比如文字以什么颜色
、大小来显示，这些都是利用html标记来实现。
lHtml文档的创建方式：用html语言创建的文档
手工直接编写（例如记事本）。
通过图形化的HTML开发软件 Dreamweaver。
由Web服务器上的动态网页程序生成。
HTML 标记的类型：单标记与双标记
一、单标记
(1).<标记名称 >
单一型 , 无属性值。
如： <br/>
(2).<标记名称属性 = ” 属性值 ” >
单一型，有属性值。
如： <hrwidth= ” 80% ” / >
二、双标记
(3).<标记名称 >… </ 标记名称 >
没有属性值。
如： <title>… </title>
(4).<标记名称属性 = ” 属性值 ” >… </ 标记名称 >
有属性值。
如： <bodybgcolor= ”red ” > … </body>
<fontsize= ” 7 ” > … </font>
1、双标记：<开始标记>内容</结束标记>
2、 单标记：<标记>
3、标记的属性： <标记 属性1=参数1 属性2=参数2…>内容</标记>
说明：
A、标记与属性、属性之间以空格分隔
B、属性不区分先后顺序；且属性不是必需的
重点强调：虽然在HTML中标记不区别大小写，但在XHTML中所有标记都必须小写，所以建议从现在开始，所有标
记都采用小写
1、文档结构
所有的网页文件,通常由四对标记来构成,文档的骨架，它们是：
<html>
<head>
<title>
标题
</title>
</head>
<body>
正文
</body>
</html>
l<html>……</html>标识网页文件的开始与结束，所有的html元素都要放在这对标记中
l<head>……</head>标识网页文件的头部信息，如标题、搜索引擎关键字等
l<title>……</title>标识网页文件的标题
l<body>……</body>标识网页文件的主体部分
Meta标记用于定义文件信息
Meta标记用于定义文件信息，对网页文件进行说明，便于搜索引擎查找。放置于<head></head>之间
设置关键字：
<meta name=”keywords” content=”value”>多个关键字内容之间可以用“，”分隔
设置描述：<meta name=”description” content=”value”>
设置作者：<meta name=”author” content=”作者名”>
设置字符集：<meta http-equiv=”content-type” content=”text/html;charset=gb2312”>
设置页面定时跳转：<meta http-equiv="Refresh" content="2;URL=http://www.itcast.cn" />
网页主体标记body
（1）、注释
<!--注释内容-->
（2）、body属性
<body bgcolor=“背景颜色” background=“背景图像” text=“文本颜色” link=“链接文本颜色” vlink=
“访问过的文本颜色” alink=“激活的链接文本颜色” leftmargin=“左边界” rightmargin=“右边
界”topmargin=“上边界” bottommargin=“下边界”>
字体修饰
(1)、<font>标记
语法：
<font color="文本颜色" size="字号" face="字体">文本</font>
注：网页中的文本字体、字号一般通过CSS修饰
(2)、字符格式
加粗
倾斜
加强语气(加粗)
加强语气(倾斜)
下划线
删除线
上标
下标
（3）、段落标记：
格式： <p align= ” 对齐方式 “ > … </p>
属性名称 属性值 说明
align left 左对齐（默认）
center 居中
right 右对齐
（4）、段落标题
<hx align= ” 对齐方式 “ > … </hx>：段落标题
说明：
X取值[1~6] hx内的文本会自动加粗显示。
hx针对的对象是段落，而font针对的对象的任意文本。
（5）、<br />：换行（换行不换段）
(6). 水平直线 <hr />
属性名称 属性值 说明
size 像素 绝对设置，以数字表示，属性值越大，线越粗
百分比 相对设置，以 % 表示，属性值越大，线越粗
width 像素 绝对设置，长度不会应视窗的改变而改变
百分比 相对设置，长度会随着视窗宽度而改变
noshade="noshade" 实体线
定义一个块引用：使用文本缩进
格式： <blockquote>...</blockquote>优化有点用
属性名称 属性值 说明
cite url 被引用的地址
居中标记 <center>内容</center>(被废弃的标签)
预格式化 <pre></pre>
显示已经格式化好的文字。不加此标记的话，HTML浏览器会忽略所有空格和制表符。
在HTML文档中使用特殊字符:
空格
版权号 ©©
注册商标 ®®
“"
&&
<<
>>
1、列表标记用途：
[1]、无序列表 <ul>…</ul>
[2]、有序列表 <ol>…</ol>
[3]、定义列表 <dl>…</dl>
无序列表语法：
<ul type=“项目符号类型”>
<li type=“项目符号类型”>内容1</li>
<li> 内容2</li>
…
</ul>
<li></li> 表示一个项目
有序列表语法：
<ol start=“列表起点” type=“项目符号类型”>
<li >内容1</li>
<li >内容2</li>
…
</ol>
4、定义列表语法：
<dl> <dt>标题1</dt> <dd>内容1</dd>
<dd>内容2</dd> <dt>标题1</dt> <dd>内容1</dd>
<dd>内容2</dd> </dl>
<dl></dl>定义列表
<dt></dt>表示一个项目
<dd></dd>表示一个项目下的更详细的内容的解释
图片Web上支持的图片格式
GIF（图形交换格式）：GIF格式文件最多只能保存256种颜色。该格式支持透明色，支持动画效果。
JPEG（联合图像专家组）：该格式不支持透明色及动画，颜色可达1670万种
PNG（网络可移植格式）：该格式支持透明色，但不支持动画，颜色从几种至1670万种。
图片标记
<img src=“图片的路径” />
路径
绝对路径：提供目标文档的完整主机名称、路径信息、及文档全称
相对路径:从当前文档开始的路径
如果当前文档和目标文档位置平行，则直接书写目标文档全称
如果当前文档和目标文档所在文件夹位置平行，则书写为 文件夹名称/目标文档全称
如果当前文档所在文件夹和目标文档位置平行，则书写为 ../目标文档全称
根相对路径:从站点根目录开始的路径，以"/"开头
src图片的路径
alt规定图片的替代文本[图片无法显示时]
title鼠标悬停时显示的内容
width设置图片宽
height设置图片高
border设置图象边框
align
vspace定义图像顶部和底部的空白（垂直边距）
hspace定义图像左侧和右侧的空白（水平边距）
扫一扫
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
