HTML自学文档

HTML标记总结

//文件开始标记 //文件的头部开始标记 //头部

//头部结束标记 //文件的主体开始标记 hello!

//主体结束标记 //文件结束标记

编写时的注意事项

（1）元素的标记都要用尖括号 < >括起来，成对使用的标记的结束标记是在开始标记之前加一反斜杠，如

与。

（2）代码不分大小写，如与都是正确的，但是所有符号如< > 、“ ”都必须是英文输入

法。

（3）标记表示其中的内容

是注释语句，在浏览器中不会显示出来。

4、页面的头部标记和主体标记 （1）页面的头部标记

HTML文档的头部内容

一般来说 位于头部的内容都不会在网页上显示，而是通过别的方式体现。常用的头部标记有以下几个： 当前文档的URL全称（基底网址） 设定基准的文字字体，字号和颜色

在HTML 里是位于html文档头部的，即和之间。

（2）信息标记

1）定义编辑工具

generator定义编辑器 ， content 定义编辑器的名称。

2）设定关键字

keywords是定义关键字，

content 是关键字的具体内容，作用就是方便搜索引擎来搜索到此页面。

3）设定页面描述，作者等信息。

4）设定字符集

html页面能够以不同的字符集来表示，如GB,BIG5,ISO8859-1等就是几种不同的编码，在charset属性里面定义以后浏览器就能够以相应的内码来显示页面的内容。

如果charset设定的字符集不包含在浏览器里，那么浏览器就会自动弹出对话框提示用户要下载安装相应的语系。

5）设定自动刷新与自动跳转

Refresh表示动作为刷新，时间值就是刷新间隔的秒数，若是跳转，要加上跳转的url地址。 （2）、页面的主体标记

主体内容（使用HTML语言编写的Web页面文件）

1)背景色彩和文字色彩

bgcolor 背景色彩

text 非可链接文字的色彩

link 可链接文字的色彩（默认的没有单击过的链接所显示的文字的颜色） alink 正被点击的可链接文字的色彩（鼠标按下时链接文字显示的颜色） vlink 已经点击(访问)过的可链接文字的色彩 #=rrggbb

背景图象 背景不滚动

16种标准颜色

色彩名

16进制值 色彩名

Aqua（水蓝色） #00FFFF Navy（藏青色） Black（黑色） #000000 Olive（茶青色） Blue（蓝色） #0000FF Purple（紫色） Fuchsia（樱桃色） #FF00FF Red（红色） Gray（灰色） #808080 Silver（银色） Green（绿色） #008000 Teal（茶色） Lime（石灰色） #00FF00 White（白色） Maroon（褐红色） #800000

Yellow（黄色）

2)关于页面背景

页面背景

3)链接 (link) 链接

5、HTML标记语言——文本格式(这些标记都是包含在…中的) （1）格式标记

1）段落标记与(不)换行标记

段落标记

?

换行标记
不换行标记 ?

2）段落标记的对齐属性

段落左对齐

?

段落居中

?

16进制值 #000080 #808000 #800080 #FF0000 #C0C0C0 #008080 #FFFFFF #FFFF00

段落右对齐

?

3）预格式标记

?

预格式化：就是保留文字在源代码中的格式，页面中显示的效果和源代码中的效果完全一致。

4）居中标记

居中标记

? 5）缩排标记

缩排标记

?

使用缩排标记，可以实现页面文字的段落缩排。

（2）文字标记 1）文字标记 字体:

… 字号：

… 颜色：

…

2）特殊符号的输入

特殊符号

空格 & < > “ ? ?

符号码

  & < > " © ®

3）标题字标记

标记

…

…

…

…

…

…

4）标题字的对齐属性

标题左对齐

? 标题居中

? 标题右对齐

?

5）文字的修饰标记 粗体 ?

? 斜体 ? ? ? 上标

? 下标

描述

一级标题 二级标题 三级标题 四级标题 五级标题 六级标题

? 大字号 ? 小字号

? 删除线 ?

? 下划线 ?

6）使用图像

1插入图片： ○

src 属性指定路径 file_name 为要插入图片的路径 ○2图像控制

属性

ALT Width/Height Border Vspace Hspace Align

○3HR标记

---

---

作用是在页面上加一条水平线。

水平线排列属性

---

---

---

水平线宽度属性

---

---

描述

用于说明或者描述图片的提示性文字

图片的宽度 高度

边框

图片和文字垂直间距

水平间距 排列

默认情况下，水平线的宽度为100％水平线的宽度可以以绝对的像素为单位，也可以以相对的百分比为单位。

水平线高度属性

---

水平线的高度只能使用绝对的像素定义。 水平线去掉阴影属性

---

默认的水平线是空心立体的效果，利用此属性可以将其设置为实心并且不带阴影的水平线。

水平线颜色属性

---

○4滚动字幕效果

…

Width/height align behavior bgcolor direction Hspace/vspace loop scrollamount scrolldelay

6、列表与超级链接的建立

有序列表：一种在各项内容前显示有数字或字母的缩排列表。

无序列表：也称强调式列表，它是一种在各项内容前显示有特殊项目符号的缩排列表 定义列表：各项并列而不加任何符号的列表，也属于无序列表。 （1）有序列表

项目一 项目二 …

有序列表的特征：

1列表项部分和上下段文本之间各有一行空白。 ○

滚动区域高度/宽度 滚动字幕对齐方式 滚动字幕如何移动 滚动区域背景色 文本滚动方向

滚动字母水平垂直间隙 滚动重复次数 滚动间的步进像素 两次文本重复间的延迟

2列表项目向右缩进并左对齐。 ○

3各项前面带有序号。 ○

在

或者标记内使用type属性可以设定5种序号: (默认时是以阿拉伯数字显示)

Type取值

1

意义

阿拉伯数字（默认）

a 小写字母

A 大写字母

i 小写罗马数字

I 大写罗马数字

注：

的作用域为整个标记范围。
1. 的作用域为当前项。 实际应用中多使用在
   标记内设定的方法。

   设定起始序号

   默认情况有序列表是从1开始计数，我们可以用START属性设定列表从任意一个数字开始。

   (2)无序列表

   项目1 项目2 … 无序列表的特征：

   ○1项目部分和上下段文本之间各有一行空白。 ○2项目自动向右缩进而且是左对齐。 ○3各项前面带加重记号。

   无序列表的加重记号：

   在无序列表中，使用type属性可以改变表项前面的加重符号。

   定义所有表项的符号
   • 定义一项的符号 属性值有三种：disc ----实心圆点 circle----空心圆点 square----实心小矩形

     （3）菜单列表标记

     菜单列表也是一种无序列表，它使用标记

     来建立菜单列表。

     项目1 项目2 …

     注：以下两种方式的显示结果一致： WWW BROWSER HTML HOME PAGE

     WWW BROWSER HTML HOME PAGE

     （4）目录列表标记

     它也是一种无序列表，使用也与一样。

     项目1 项目2 …

     （5）定义项目列表标记

     此标记定义了两个层次的列表，第二层次的内容为第一层次的解释。

     定义名词 1 名词1的说明

     定义名词 2 名词2的说明 定义名词 3 名词3 的说明 …

     注意： 与是单标记。定义项目，自动换行并且左对齐。

     （6）列表的嵌套

     名词1 解释1 解释2 名词2 解释1 解释2 ??

     （7）超链接的建立

     1）链接至本机另一Web页面 文字

     2）链接到另外一台机器上的Web页面 XX主页

     3）链接到链接到同一Web页面的其他段落

     需要先做出一个“锚”标记，即链接的目标地，再做到“锚”的链接。到“锚”的链接与平常相同。（eg.如下）

     从这里可链接到第一章 “锚”标记

     4）链接到不同网页的其他段落

     假如在B1文章里建立链接“链接到第一章”，而锚标记“第一章”在B2文章中，则链接可写为： 链接文字

     7、网页表格的使用 （1）表格的基本构造

     （2）表格的组成 … … …… ……

     表格标记符table

     表格行 tr （table row） 单元格数据 td （table data）

     1）标题 … 水平对齐——Align：

     … Value值为left、center、right

     垂直对齐——VAlign

     …

     Value值为top(居上)、bottom(居底)

     2）表格的表头 … …… … …… ……

     表头是指表格的第一行，其中的文字可以实现居中并且加粗显示。 注意：使用替代，惟一不同就是标记中的内容居中加粗显示。

     3）行标记

     属性

     Align VAlign Bgcolor Background Bordercolor Bordercolorlight

     描述

     行内容的水平对齐 行内容的垂直对齐 行的背景颜色 行的背景图像 行的边框颜色 行的亮边框颜色

     Bordercolordark 行的暗边框颜色

     4）单元格

     属性

     Align VAlign Bgcolor Background Bordercolor

     描述

     单元格内容的水平对齐 单元格内容的垂直对齐 单元格的背景颜色 单元格的背景图像 单元格的边框颜色

     Bordercolorlight Bordercolordark Width Height

     （3）表格的合并

     单元格的亮边框颜色 单元格的暗边框颜色 单元格的宽度 单元格的高度

     在 TH 或TD 标记符中使用 rowspan 属性进行行合并，它的取值表示纵向被合并的行数。 在 TH 或TD 标记符中使用 colspan 属性进行列合并，它的取值表示横向被合并的列数。

     跨多行、多列的表元(Table Span)

     Morning Menu

     Food Drink Sweet

     ABC

     （4）表格的构造步骤：

     1整个表格使用TABLE标记符，表格标题用CAPTION标记。 ○

     2表格有几行就写几个TR标记，行数就是表格在垂直方向上的最大单元格个数。 ○

     3在每一行内，依次写出具体的单元格内容，遇到跨行或跨列的用rowspan/colspan标记。 ○

     4逐行处理，直到结束。 ○

     (5)表格的属性

     属性

     border border width/height

     描述

     表格边框设置 表格尺寸设置

     border cellspacing border cellpadding

     align bordercolor Bordercolorlight Bordercolordark

     frame

     frame属性

     表格间隙设置 表格内部空白设置 在页面中的对齐和布局设置

     表格边框颜色设置 单元格的亮边框颜色 单元格的暗边框颜色 表格边框外线设置

     表格最外层的四条框线，可以用frame属性进行控制；默认取值是void，不显示边框。

     属性值 说明

     void above below hsides vsides lhs rhs box border

     rules属性

     无边框 仅有顶框 仅有底框 仅有顶、底框 仅有左、右框 仅有左框 仅有右框 4个边框都有

     同上

     用于控制是否显示单元格之间的分隔线；取值有none/yes/rows/cols /groups 。。。 Rules=cols/rows只显示竖直/水平的间隔线

     Rules= groups 显示竖直和水平的间隔线

     Border属性

     用于设置边框的宽度，其值为像素数。

     如果设置border=“0”，则意味着frame=“void”，rules=“ none ”。

     (6)控制单元格的空白 Cellspacing

     控制单元格之间的空白，可以控制表格分隔线和数据之间的距离，这两个属性之间的取值通常采用像素数。

     Cellpadding

     控制表格内部空白设置

     (7)立体的表格

     把bordercolor设为浅色一点，表格就会凸起来

     (8)表格的作用

     1)显示列表数据 2)页面的元素定位 3)排版布局

     (9)表格使用技巧

     1)使用表格排版网页，可以使你的网页更美观。 （将表格的宽设为100%,可以使网页的兼容性更好）

     2)不要把整个网页放在一个大的表格里，因为一个大表格里的内容要全部LOAD完才会显示，如果整个网页放在一个表格里，那么你的网页就只会两种情况： 1全部不显示 ○2全部显示出来。 ○

     8、页面排版之框架

     （1）框架的定义：在同一个浏览器窗口中同时显示多个网页的交互式结构。通过为超链接指定目标框架，

     可以为框架之间建立起内容的联系，从而实现页面导航的功能。

     （2）框架（Frames）技术主要是通过两种类型的元素来实现的：

     1）框架集： 在一个网页文档内定义了一组框架结构的HTML网页，定义了网页显示的框架数量、框架的

     大小、载入框架的网页源等属性。

     2） 框架： 框架是浏览器中的一个区域，可以显示与浏览器窗口的余部分中所显示内容无关的HTML文

     档。

     注：任何框架都可以显示任何网页文档。

     （3）框架结构 框架集

     框架 格式：

     ...

     框架集的定义：

     Rows 定义行结构框架 Rows 和 cols 的取值： Cols 定义列结构框架 % * 像素数 Frameborder

     用于设定框架有无边框，其值可以为0或1，0表示不要边框，1表示要显示边框（默认值），避免使用yes或no。 Border

     设定框架边框宽度，以像素数pixels为单位。 Bordercolor 设定框架的边框颜色 Framespacing

     定框架与框架间保留的空白距离。

     框架的初始化

     注：标记是一个单标记符。

     scrolling 框架显示控制条属性 frameborder框架边框显示属性

     noresize 代表禁止改变框架的尺寸大小,鼠标无法拖动框架的边框

     框架名称属性

     框架的名称不会影响显示的效果,是用于页面的链接和脚本的描述.它的命名有如下规则: 1框架名必须是单个单词,允许使用下划线 _ 但是不允许使用连字符 - 句点 . 和空格 ; ○

     2框架名必须以字母开始,而不能以数字开始; ○

     3框架名称区分大小写; ○

     4不要使用javascript中的保留字(如top或 navigator)作为框架名称. ○

     (4)超链接的目标框架

     目标框架，是指单击框架网页中放置的超链接时，对应的目标文件显示在当前的那个框架中。

     在超链接标记符 A 中指定 target 属性，属性值就是你想将页面显示在的框架frame的名称，当单击热点文本时，目标文件就会显示在由target指定的框架内。

     target有4个特殊的值：_blank、_self、_parent和_top。

     _blank： 它强迫超链接调用的文档在新窗口中打开。(新窗口）

     _self： 它使超链接调用的文档在当前窗口中打开。（本窗口）

     _parent：使超链接调用的窗口在当前窗口的父窗口中打开。如果没有父窗口，就在当前窗口中打开。（父

     窗口）

     _top： 使超链接在整个浏览器窗口打开。（整个窗口）

     新窗口 本窗口 父窗口 整个浏览器窗口

     (5)使用页内框架(浮动框架)

     用 iframe 标记符可以设置页内框架,也可以指定页内框架为目标框架