html学习计划

我听了整整一个国庆假期的张鹏老师课程后,今天晚上我急于想高仿一个网站的主页.从下午到晚上六个小时左右的实践证明我是错的,眼高手低,看着简单,但是一写代码,脑子里一片空白.所以我决定做一个学习计划,要从html最基础开始,每一个常用知识点都不能遗漏,蜗牛式的爬行,一直爬到div+css终级,并在此记录我的学习历程.

第一天学习内容：

HTML 基础教程

HTML 教程

HTML 简介

HTML 基础

HTML 元素

HTML 属性

HTML 标题

HTML 段落

HTML 格式化

第二天学习内容：

HTML 编辑器

HTML 样式

HTML 链接

HTML 图像

HTML 表格

HTML 列表

HTML 块

HTML 布局

第三天学习内容： HTML 表单 HTML 框架 HTML 内联框架 HTML 背景 HTML 颜色 HTML 颜色名 HTML 速查手册

第四天学习内容： HTML 高级教程 HTML 文档类型 HTML 头部 HTML 脚本 HTML 实体 HTML URL HTML URL 编码 HTML Web 服务器第五天学习内容： HTML 媒体 HTML 媒体 HTML 对象 HTML 音频 HTML 视频

第六天学习内容： HTML XHTML XHTML 简介 XHTML 元素 XHTML 属性

第二篇：Html学习手册

HTML学习手册

参考文献

.cn/h.asp

.cn/tags/tag_comment.asp

HTML简介

全称： HyperText Mark-up Language

中文名：超文件标记语言

标记定义语法格式：

? 任何标记皆由"<"及">"所包围，如 <P> 标记名与小于号之间不能留有空白字符。某些标记要加上参数，某些则不必。如 <font size="+2">Hello</font> 参数只可加于起始标记中。在起始标记之标记名前加上符号"/"便是其终结标记，如 </font> 标记字母不区分大小写。

标记按型态分为围堵标记与空标记

1. 围堵标记

顾名思义，它以起始标记及终结标记将文字围住，令其达到预期显示效果。例如： <b>此段文字加粗</b>此段文字不加粗

显示成：此段文字加粗此段文字不加粗

其中 <b></b> 便称为围堵标记。

它以标记<b>起始以标记</b>终结，如果两个标记失去任何一个均达不到预期效果。

2. 空标记

是指标记单独出现，只有起始标记没有终结标记。

例如：第一行<br>第二行

显示成：

第一行

第二行

其中换行标记<br>便属于空标记。

它的作用便是将标记后所有东西移到下一行显示，可见终结标记对<br>是没意义的，但也可将空标记加上终结标记，这仅仅为便记认而己，对 HTML 没有影响。

文件标记

以下 HTML Source Code 便是一份 HTML 文件的基本架构：

<HTML>

<HEAD>

<TITLE> 网页的标题 </TITLE>

</HEAD>

<BODY>

网页的内容

</BODY>

</HTML>

格式说明：

整份文件处于标记<HTML>与</HTML>之间。

<HTML>用以声明这是 HTML 文件，让浏览器认出并根据标记所标识的范围正确处理该HTML文件。

? 文件分两部分，由<HEAD>至</HEAD>称为开头，<BODY>至</BODY>称本文。

两者分别拥有其适用的标记，如<TITLE>标记只可出现于<HEAD>至</HEAD>部分。

? 开头部分用以存载重要资讯，其内容信息将不会被显示到网页中，只有本

文部分的内容会被显示。

所以大部分标记会运用于本文部分。

? <TITLE>所标识的是文件的标题。

会出现于浏览器顶部，同时也是用户收藏时的名称，所以每个页面最好有不同而明确的标题。 ?

<HEAD>至</HEAD>中的元素

1．<BASEFONT> 用于文件的开头部分，即 <HEAD>与</HEAD>之间的位置，是一个空标记，用以改变字体显示的内定值，影响全文中的字体设置。

参数列表：

face="Arial"

设定文字的字体。Arial 是常用的一种，请不要使用 Window内建字体以外的字体。如没有设定为 Gb2312 Encoding 的中文网页，Netscape Netvigator不会显示此标记所指明的任何中文字形。

※注：Netscape :一种浏览器

size="+2"

设定文字的字号。其值是绝对的，绝对的意思便是标记自己决定文字的大小，如 size="5" 表示其大小便是 5，默认设置值为3。当设置size="3"时和没有设定是一样的。 color="#008000"

设定文字的颜色。#008000 表示绿色，颜色设置参照后面颜色设置列表

2．<BASE> 是一个链接基准标记，用以改变文件中所有链接标记的参数内定值。其设置于文件的开头部分，即标记 <HEAD> 与 </HEAD> 之间。

参数列表：

例如 <base href="/" target="_top">

href="/"

设定该页网页中所有 HTTP 文件及图形（包括相对路径链接及<IMG>图形标记等）的内定路径，其他如 ftp:// 及 gopher:// 等则不受影响。该参数只可填入一个相对或绝对的路径。一般相对路径链接及<IMG>图形标记等是内定以该页网页所在的目录作为起点，若依这例子，该文件中所有链接将会以 /作为起点，若其中有链接如 <a href="index.html">返回首页</a>，那么它将会连到 Microsoft 的首页，而不会连到当前目录下的index.html。

target="_top"

设定该页网页中所有链接被点击之结果所要显示的视窗，免得分别为所有链接加上该参数，常应用于后面介绍的框架框架标记中。其设定与 <A> 链接标记中target参数相同。后面详细介绍。

3．<ISINDEX> 可让某些 Web Server找寻网页内的关键字，假如你的 Web Server提供这样的找寻功能，使用者的浏览器也支援这些找寻功能，那么，载入网页时就会看到一个简单的找寻方块。其用法直接，没有参数，通常放置在<HEAD>标记内，但把它放在 <BODY> 标记内也可以使用。不推荐使用该标记。

4．<META> 是放于 <HEAD> 与 </HEAD>之间的标记

参数列表：

该网页的描述，作用于搜索引擎的登录

该网页的关键字，作用于搜索引擎的登录

设定这是 HTML 文件及其编码语系，中文网页请使用 big5，或者不设定，纯英文网页建议使用 iso-8859-1。如果计算机中没有定义的字符集，则IE浏览器将提示用户进行下载。 <meta name="GENERATOR" content="Mozilla/4.04 [en] (Win95; I) [Netscape]"> <meta name="GENERATOR" content="Microsoft FrontPage 3.0">

这只表示该网页由何种编辑器写成。

该行较为实用，能使当前网页于预定秒数内自动转到当前网页或者指定的网址。原始码中10表示10秒。

Html学习手册

其他常用参数

Html学习手册

5．<LINK> 用来将目前文件与其它 URL 作链接，但不会有链接按钮，用于 <HEAD> 标记间，格式如下：

详细参看：.cn/tags/tag_link.asp

<BODY>标签详解：

参数列表：

text="#000000"

用以设定文字颜色。#000000代表黑色，也可采用颜色名称，即 text="black" 。 link="#0000FF"

设定一般文字链接颜色。

alink="#FF0000"

设定刚按下时文字链接颜色。

vlink="#0000FF"

设定链接后的颜色。（被按过）。

background="bg1.gif"

设定背景墙纸。GIF 或 JPEG 皆可，可以是绝对途径或相对途径。

bgcolor="#FFFFFF"

设定背景颜色。当己设定背景墙纸时会失去作用，除非墙纸有透明部分。 leftmargin=2

设定整份文件显示画面的左方边沿空间，单位为像素。

topmargin=2

设定整份文件显示画面的上方边沿空间。

bgproperties="fixed"

固定背景墙纸，当卷动文字时墙纸不会跟著卷动。

排版标记

注释标记

像很多电脑语言一样，HTML 文件亦提供注解功能。浏览器会忽略此标记中的文字而不作显示，一般使用目的：

为文中不同部份加上说明，方便日后修改。

这对较复杂或非私人网页尤其重要，它不单是提醒自已，亦提醒你的同事这部分做什么，那部分做什么。

假如你不希望别人使用或复制你的网页，可加上警告字眼。

<P> 段落标记

作用：为字、画、表格等之间留一空白行。

本来<P>是一围堵标记，标于一段落的头尾，但从 HTML 2.0 开始己不需要</P>作结尾。参数列表：

align="center"

可选值：right, left, center。

内定值： align="left"

<BR> 换行标记

作用：令字、画、表格等显示于下一行。

由于浏览器会自动忽略原始码中空白和换行的部分，这令到<BR>成为最常用的标记之

一。无论你在原始码中编好了多漂亮的文章，若不适当地加上换行标记或段落标记，浏览器只会将它显示成一大段。

<HR> 水平线

作用：插入一条水平线。

参数列表：

<HR align="LEFT" size="2" width="70%" color="#0000FF" noshade> 为例。 align="LEFT"

设定线条置放位置，可选择：left；right；center 三种设定值。

size="2"

设定线条厚度，以像素作单位，内定为 2。

width="70%"

设定线条长度，可以是绝对值（以像素作单位）或相对值，内定为 100%。

color="#0000FF"

设定线条颜色，内定为黑色。 #0000FF 代表蓝色，亦可以采用颜色的名称，即 text="blue" 。 noshade

设定线条为平面显示，若删去则具阴影或立体，这是内定值。

<PRE> 预设格式标记

作用：令文件按照原始码的排列方式显示。

这标记允许保留你于原始码中输入的空白及换行。它可以很轻松的使用户制作出所进即所得的网页效果。

<DIV> 区域/层标记

作用：设定字、画、表格等的摆放位置。

<DIV>的目的是给设计者另一种组织能力，其结构比较复杂。

参数列表：

align="center"

可选值：center ; left ; right 。决定字、画、表格等居中、靠左或靠右。

<DIV align="center"> 的作用和居中标记 <CENTER>一样，前者是由 HTML3.0 开始的标准，后者是通用己久的标示法。

<NOBR> 不折行标记

作用：令某些文字不因太长而绕行，一显示于同一行或下一行。它对住址、数学算式、一行数字、程式码等尤为有用。

<WBR> 建议折行标记

作用：预设折行部位。

它没有侵犯到 <BR> 的责任，只是作建议而已，若观者的系统解像度够高的话，那么它是不会折行的。

<LISTING> 预格式化标记

作用：令文件按照原始码的排列方式显示。

该标记已经被淘汰，强烈建议不要使用该标记，后面所有被淘汰的标记将不再详细介绍。

<XMP> 该标记已被淘汰

<SPACER> 创建空白 IE浏览器不支持

参数使用实例：

<MULTICOL> 多列文本 IE浏览器不支持

参数使用实例：

列数目为2

列间空白为100

列的宽度为400

<BLOCKQUOTE> 块引用

<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进，而且有时会使用斜体。也就是说，块引用拥有它们自己的空间，换言之该标记经常会在文本的两端产生缩进。

参数使用实例：

被包裹的文字内容，两端会产生缩进效果

</blockquote>

字体标记

实体标记与逻辑标记的区别：

1. 实体标记有固定的显示效果，逻辑标记则依不同浏览器而不同。

例如逻辑标记的 <EM> 由于浏览器的不同它所标示的文字不一定出现斜体效果，它可能是加底线、粗体或反白等。

2. 多个实体标记亦可有效标示同一字句，逻辑标记则通常于旧浏览器不能有效显示多

重的标示。

例如两个逻辑标记 <EM> 及 <STRONG> 同时标示一字句于旧浏览器常失去作用。 ?

? 实体标记有： <I> <B> <U> 逻辑标记有：

若要求真确的效果当然以实体标记为佳。

<H1> <H2> <H3> <H4> <H5> <H6>：

这些是标题标记，由 <H1> 至 <H6> 变粗变大加宽的程度逐渐减小。每个标题标记所标示的字句将独占一行且上下留一空白行。

<hn>---</hn> 这些标记显示黑体字。

<hn>---</hn> 这些标记自动插入一个空行，不必用 <p> 标记再加空行。因此在一行中无法使用不同大小的字体。

<STRONG> <B> ：

两者皆能产生字体加粗的效果，但必须注意的是当文件被设为 gb2312 Encoding 时，两者所标示的中文字不会于 Netscape Netvigator 显示粗体效果。

<I> <EM> <VAR> <CITE> <DFN> <ADDRESS>：

这些标记于 Internet Explorer 都产生斜体效果，而只有 </DFN> 于 Netscape Netvigator 失去作用。这些标记中只有 <ADDRESS> 较为特别，因它包括换行效果所以不必在它前面加上 <BR> 标记。

<TT> <SAMP> <CODE> <KBD> 可令每字母有相等宽度且每字母之间的距离稍为加宽。 <U>

<U> 是加底线的标记，一些特别的浏览器并不支援，因顾虑到与链接混淆。

<STRIKE> 加上删除线的标记。

<BIG> 令字体加大。 <SMALL> 令字体变细。

<SUB> 为下标字， <SUP> 则为上标字，仅剩的数学标记。

<FONT>字体标记：

参数列表：

例子： <font face="Arial" size="+2" color="#008000">Creation of Webpage</font> face="Arial"

设定文字的字形。Arial 是常用的一种，请不要使用 Window 内建字形以外的字形。于没有设定为 Gb2312 Encoding 的中文网页，Netscape Netvigator 不会显示此标记所指明的任何中文字形。

size="+2"

设定文字的大小。其值可以是绝对或相对，绝对的意思便是标记自己决定文字的大小，不受 <BASEFONT> 的影响，如 size="5" 表示其大小便是 5，而html内定值为 3，即 size="3"和没有设定是一样的。相对的意思便是在内定值 3 的基础上增加或减少大小级数，如 size="+2" 便等同绝对表示法的 size="5"，但若已设定 <BASEFONT size="n"> 则其实际大小便是 n+2 不再是 3+2 了。<BASEFONT>只有绝对表示法。

color="#008000"

设定文字的颜色。#008000 表示绿色

清单标记

<OL> <LI> ：

<OL>称为顺序清单标记。<LI>则用以标示清单项目。

所谓顺序清单就是在每一项前面加上 1,2,3... 等数目，又称编号清单。

<OL> 的参数设定（常用）：

例如： <ol type="i" start="4"></ol>

type="i"

设定数目款式，其值有五种，请参考右表，内定为 type="1"。

start="4"

设定开始数目，不论设定了哪一数目款式，其值只能是 1,2,3.. 等整数，内定为 start="1"。

参数列表：

例如： <li type="square" value="4">

type="square"

只适用于非顺序清单，设定符号款式，其值有三种，分别是 disc circle square value="4"

只适用于顺序清单，设定该一项的数目，其後各项将以此作为起始数目而递增，但前面各项则不受影响，其值只能是 1,2,3.. 等整数，没有内定值。

<UL>称为无序清单标记。

所谓无序清单就是在每一项前面加上特殊符号，故又称符号清单。

参数列表：

例如： <UL type="square">

type="square"

设定符号款式，其值有三种，其值有三种，分别是 disc circle square

注意：由于 <UL> 及 <LI> 都有 type 这个参数，两者尽可能选用其一。

<DL> <DT> <DD> ：

<DL>称为定义清单标记。 <DT> 用以标示定义条目，<DD> 则用以标示定义内容。所谓定义清单就是一种分二层的项目清单，其不故符号及数目。

三个标记都没有常用的参数，而 <DT> <DD> 可以独立使用。常用的如 <DD> 标记可用以制造段落第一个字前面的空白。

表格标记

<TABLE> <TR> <TD> ：

<TABLE>是一个容器标记，意思是说它用以声明这是表格而且其他表格标记只能在他的范围内才适用，属容器标记的还有其他。

<TR>用以标示表格列（row）

<TD>用以标示储存格（cell）

<TABLE> 的参数设定（常用）：

例如： <table width="400" border="1" cellspacing="2" cellpadding="2"

align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#0000FF"

bordercolor="#FF00FF" bordercolorlight="#00FF00" bordercolordark="#00FFFF" cols="2">

width="400"

表格宽度，接受绝对值（如 80）及相对值（如 80%）。

border="1"

表格边框厚度，不同浏览器有不同的内定值，故请指明。

cellspacing="2"

表格格线厚度

cellpadding="2"

文字与格线的距离

align="CENTER"

表格的摆放位置（水平），可选值为： left, right, center，

valign="TOP".

表格内字画等的摆放贴位置（垂直），可选值为： top, middle, bottom。

background="myweb.gif"

表格壁纸，与 bgcolor 不要同用。

bgcolor="#0000FF"

表格底色，与 background 不要同用。

bordercolor="#FF00FF"

表格边框颜色，NC 与 IE 有不同的效果。

bordercolorlight="#00FF00"

表格边框向光部分的颜色。

bordercolordark="#00FFFF"

表格边框背光部分的颜色，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。

cols="2"

表格栏位数目，只是让浏览器在下载表格是先画出整个表格而己。

<TR> 的参数设定（常用）：

例如：<tr align="RIGHT" valign="MIDDLE" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#808080" bordercolordark="#FF0000">

align="RIGHT"

该一列内字画等的摆放贴位置（水平），可选值为： left, center, right。 valign="MIDDLE"

该一列内字画等的摆放贴位置（垂直），可选值为： top, middle, bottom。 bgcolor="#0000FF"

该一列底色。

bordercolor="#FF00FF"

该一列边框颜色

bordercolorlight="#808080"

该一列边框向光部分的颜色

bordercolordark="#FF0000"

该一列边框背光部分的颜色，使用 bordercolorlight 或 bordercolordark 时

bordercolor 将会失效。

<TD> 的参数设定（常用）：

例如：<td width="48%" height="400" colspan="5" rowspan="4" align="RIGHT" valign="BOTTOM" bgcolor="#FF00FF" bordercolor="#808080"

bordercolorlight="#FF0000" bordercolordark="#00FF00" background="myweb.gif"> width="48%"

该一储存格宽度，接受绝对值（如 80）及相对值（如 80%）。

height="400"

该一储存格高度。

colspan="5"

该一储存格向右打通的栏数。

rowspan="4"

该一储存格向下打通的列数。

align="RIGHT"

该一储存格内字画等的摆放贴位置（水平），可选值为： left, center, right。 valign="BOTTOM"

该一储存格内字画等的摆放贴位置（垂直），可选值为： top, middle, bottom。 bgcolor="#FF00FF"

该一储存格底色。

bordercolor="#808080"

该一储存格边框颜色。

bordercolorlight="#FF0000"

该一储存格边框向光部分的颜色。

bordercolordark="#00FF00"

该一储存格边框背光部分的颜色。使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。

background="myweb.gif"

该一储存格壁纸，与 bgcolor 任用其一。

<TH> ：

<TH>与<TD>同样是标示一个储存格，唯一不同的是<TH>所标示的储存格中的文字是以粗体出现，通常用于表格第一列以标示栏目。它的用法是取代<TD>的位置便可以，其参数设定请参考<TD>。

当然若为<TD>所标示的储存格中的文字加上粗体标记<B>便等如<TH>的效果。

<CAPTION>：

<CAPTION> 的作用是为表格标示一个标题列，有如在表格上方加上一没格线的打通列。当然亦可置于下方，通常用以存放该表格的标题。

<CAPTION> 的参数设定（常用）：

例如：<caption align="TOP" valign="TOP"></caption>

align="TOP"

该表格标题列相对于表格的摆放贴位置（水平），可选值为： left, center, right, top, middle, bottom，若 align="bottom" 的话标题列便会出现对表格的下方，不管你的原始码中把 <caption> 放在 <table> 中的头部或尾部。

valign="TOP"

该表格标题列相对于表格的摆放位置（上下），可选值为： top, bottom。和 align="TOP" 或 align="BOTTOM" 是一样的，虽然功能重复了，但如果你要标题列置于下方及向右或向左贴，那末两个参数便可一用了。当只一个参数时，请首选 align，因为 valign 是由 HTML 3.0 才开始的参数。

表格高级设置：

对于表格内部可以设置其对齐模式

表格内的水平对齐：

表格内的垂直对齐：

表格内的空白

<table vspace=10 hspace=10> IE不支持

表格边框的颜色

表格边框的色彩的亮度控制

表格行分组

可以将表格中的标签进行分组

<thead>??</thead>标题组

<tbody>??</tbody>正文组

<tfoot>??</ tfoot >脚注组

例子：

<thead>

</thead>

<tbody>

<tr><td>red</td><td>green</td><td>blue</td></tr>

<tr><td>red1</td><td>green1</td><td>blue1</td></tr>

</tbody>

</ table >

表格列分组

<thead>

</thead>

<tbody>

<tr><td>red</td><td>green</td><td>blue</td></tr>

<tr><td>red1</td><td>green1</td><td>blue1</td></tr>

</tbody>

</ table >

列分组属性控制

<col align=center span=2> //设置两行的属性为相同的，不需要重复设定内容 <colgroup align=right>

<thead>

</thead>

<tbody>

<tr><td>red</td><td>green</td><td>blue</td></tr>

<tr><td>red1</td><td>green1</td><td>blue1</td></tr>

</tbody>

</ table >

表格的边框显示

frame参数值列表

box 显示4个边框

hsides 显示上下边框

above 显示上边框

below 显示下边框

vsides 显示左右边框

lhs 显示左边框

rhs 显示右边框

void 不显示边框

表格分隔线设置

rules 参数值列表

all 显示左右分隔线

groups 只显示组分隔线

rows 只显示行间分隔线

cols 只显示列间分隔线

none 不显示分隔线

表单标记

表单的用处很多，于网上无处不见，当然是配合 CGI 使用为佳，所以馈下有意使用或学习 CGI 的话，表单设计见必需的，这一节介绍的标记不多，但其参数变化很多。一份表单的基本架构是：在 <FORM> 标记的包围下加上一种或以上的表单输入方式及一个或以上的按键。

<FORM>称为表单标记，用以宣告此为表单模式，属于一个容器标记，表示其它表单标记需要在它的包围中才有效，<INPUT>便是其中的一个，用以设定各种输入资料的方法。它是一个空标记。

<FORM> 的参数设定（常用）：

例如： <form action="/cgi-local/example.cgi" method="POST"> action="/cgi-local/example.cgi"

表单通常是与 CGI 配合使用的，参数 action 便是用以指明该 CGI 程式的位置，这样此表单所填的资料才能正确传给 CGI 作处理。若馈下没有 CGI 以进行测试，可设定此参数为 ACTION="mailto:your@email.com" 那样该表单所填的资料将会寄至此电邮地址（红色部分）。

method="POST"

传送资料给 CGI 的的方式，可选值为 POST, GET。你只需记住POST容许传送大量资料，但 GET则只接受低于 1K 的资料，所以你若看过别人的表单原始码的话，你会发现申请表单用的是POST 而搜找器用的是 GET。

<INPUT> 的参数设定（常用）：

由于其第一个参数 type 己有很多的选择，而不同的选择表示出不同的输入方式，且其它参数亦因此而异，故以下将独立介绍不同输入方式及其它参数设定。

type="Text"

可选值为 Text, Radio,Checkbox, Password, Submit/Reset, , , , 。

输入方式一： Text （单行文字盒）

例如<input type="Text" name="age" value="20" align="MIDDLE" size="2"

maxlength="255">

type="Text"

输入方式为 Text，能产生一单行文字盒，上限为 255 字元。

name="age"

此一单行文字盒名称，这是最重要的一个，方便 CGI 辨认由表单传来的资料，虽说可随便命名，但通常 CGI 程式中都有指定名称，若转用其它名称便需要修改该 CGI 程式了，名称可为没空白没特别符号的英文或数字，有大小写的分别，可以写成 Your_Age，若有访客于此表单此一文字盒填入 40 的话，那末传给 CGI 的字串便是 Your_Age=40。

value="20"

此一单行文字盒内定值。若不填写则文字盒是空白的，等待访客亲自键入，若 value="20" 的话， 20 便会出现在文字盒中，当然访客可以修改之。

align="MIDDLE"

可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle. 没太大有处。

size="2"

此一单行文字盒显示的长度，若馈下是采用 Big5 编码的中文网页便要小心，同 size 的文字盒 NC 会显示得比 IE 狻长。

maxlength="255"

此一单行文字盒可输入字元的上限，为方便编排资料或避免错输入等，宜设定上限，例如输入电话或 ICQ UIN 的可设为 8，年龄为 2 等。

※补：在文本框或者密码框后面通常带有提示性信息，这些信息往往采用如下标签进行标注 <input type=text><kbd>请输入英文字母</kbd>

输入方式二： Radio （单一选择）

例如：<input type="Radio" name="gender" value="female" align="MIDDLE" checked> type="Radio"

输入方式为 Radio，能产生一单一选择，以供点选。

name="gender"

此一 Radio 名称，参考 Text 部分的说明。

value="female"

内定值。每一个 radio 必须及仅有一个 value，通常有同时采用两个或以上同 name 不同 value 的 Radio 输入方式，可让使用使任选其一。

align="MIDDLE"

可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle。 checked

设该 Radio 为内定被选。同 name 的各个 Radio 中只能有一个使用，或全不使用这参数。

输入方式三： Checkbox （确认盒）

例如：<input type="Checkbox" name="idol" value="Leon" align="RIGHT" checked> type="Checkbox"

输入方式为 Checkbox，能产生一确认盒，以供剔选。

name="idol"

此一 Checkbox 名称，参考 Text 部分的说明。

value="Leon"

内定值。每一个 Checkbox 必须及仅有一个 value，当被剔选时这值便会传及 CGI，例如所传字串 idol=Leon 。

align="RIGHT"

可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle。 checked

设该 Checkbox 为内定被选。每个 Checkbox 都是独立的，所以每一个都可使用这参数，不像 Radio。

输入方式四： Password （密码输方盒）

例如：<input type="Password" name="pw" value="999" align="MIDDLE" size="5" maxlength="9">

Password 的其他参数和 Text 是完全相同的。

两者作用不同，Password 所输入的字元全以 * 号表示。

输入方式五： Submit （传送键）及 Reset （清除键）

这是表单上重要的两个按键，两者所附带的参数相同，但用处不大。

例如：<input type="Submit" name="other_funtion" value="确定" align="MIDDLE"> <input type="Reset" value="清除" align="MIDDLE">

type="Submit"

设定输入方式为 Submit 或 Reset。

name="other_funtion"

Submit 的功能随 name 的不同而不同，须和 CGI 配合。若你只需要普通的传送键，则是其内定，不必用此参数。

value="确定"

这个值不是输给 CGI 的，而是显示在按键上，可以不用，传送键的内定值为 Submit Query，清除键的内定值为 Reset。

align="MIDDLE"

可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle。

输入方式六： Image （图片按钮）

这通常用以取代 Submit 及 Reset 两个按键，因为由程式产生的按键并不漂亮，这 Image 参数便容许你采用自已制造的按键。

例如：<input type="Image" name="submit" align="BOTTOM" src="ex_icon.gif"> type="Image"

输入方式为 Image。

name="submit"

所要代表的按键，可以是 submit, reset, 或其它。

align="BOTTOM"

可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle。 src="ex_icon.gif"

按键图片来源，若此图片文件不与该 html 文件在同一目录下，请加上相对或绝对途径。对图象按钮的操作可以象操作图象标签一样设定其宽度高度和边框线等属性来丰富其效果。

输入方式七： File

例如：<input type="File" name="upload" align="BOTTOM" size="20" maxlength="100" accept="text/html">

input type="File"

输入方式为 Image。通常用以传输文件。

name="upload"

这文件传输的名称，用以识别之用。

align="BOTTOM"

可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle。 size="20"

所显示文字盒的长度。

maxlength="100"

可输入字元的上限。

accept="text/html"

所接受的文件类别，有二十六种选择，但可不设定。

输入方式八： Hidden

例如：<input type="Hidden" name="ID" value="6618">

type="Hidden"

输入方式为隐藏或内定。它不会显示任何输入介面，而是一个内定值随表单一起传给 CGI，列如由 CGI 产生的会员号码，或传入可更改的参数以调整 CGI 而避免修改 CGI 程式码。 name="ID"

这文件传输的名称，用以识别之用。

value="6618"

内定值，会以如 ID=6618 形式传给 CGI。

输入方式九： Button

例如：<input type="Button" name="useless" value="Back">

type="Button"

输入方式为一般按键。常配合 Java Script 作为其启动按键。

name="useless"

这文件传输的名称，用处不大。

value="Back"

按键显示名称。

<SELECT> <OPTION> ：

<SELECT>是卷动选单标记，每一选项皆由 <OPTION> 所标示，把它当作围堵标记或空标记使用都可以。

<SELECT> 的参数设定（常用）：

例如： <select name="where" size="6" multiple>

name="where"

这卷动选单的名称，作识别之用，将会传及 CGI。

size="6"

这卷动选单的列数，即其高度，请自行修改。

multiple

令这卷动选单容许多重选择。

<OPTION> 的参数设定（常用）：

例如： <option value="tw" selected>

value="tw"

这选项的值，将会传及 CGI,即可以进行地址访问，如果value=””。请自行修改，但不同选项必须有不同的值。

selected

设该选项为内定被选。一个单选卷动选单只能有一项或零可内定被选。

<TEXTAREA> ：

<TEXTAREA>是表单文字区块标记，常用于 bug report, feedback 等需要填写大量资料的用途。

<TEXTAREA> 的参数设定（常用）：

例如： <textarea name="comments" cols="40" rows="4" wrap="VIRTUAL">

name="comments"

这文字区块的名称，作识别之用，将会传及 CGI。

cols="40"

这文字区块的宽度，请自行修改。

rows="4"

这文字区块的列数，即其高度，请自行修改。

wrap="VIRTUAL"

设定其折行问题，可选值为： off, physical, virtual。off 表示不换行，是缺省值，physical 时则会强迫浏览器在送资料到CGI（Web 服器端）必须将实体文字中的换行并送出，设为 virtual 时则送出连续成串的字（除非使用者按了键盘的 RETURN / ENTER）。 soft表示软回车,如同word中的软回车。hard表示硬回车,如同word中的硬回车。

图形标记

<IMG> ：

<IMG> 称图形标记，主要用以插入图片于网页中，至于其它用处如配合影片文件等的播放及影像地图（Image Map 或称一图多链接）则于不会在这节提及，请看【影像地图】及【其他标记】。

<IMG> 的一般参数设定：

例如 <img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif">

src="logo.gif"

图片来源，接受 .gif, .jpg 及 .png 格式，前两者通行己久，后者由 96 年开始发展，于未来取代前两者。若图片文件与该 html 文件同处一目录则只写上文件案名称，否则必须加上正确的途径，相对及绝对皆可。

width=100 height=100

设定图片大小，此宽度、及高度一般采用 pixels 作单位。通常只设为图片的真实大小以免失真，若要改变图片大小最好事先使用图像编辑工具。

hspace=5 vspace=5

设定图片边沿空白，以免文字或其它图片过于贴近。hspace 是设定图片左右的空间，vspace 则是设定图片上下的空间，高度采用 pixels 作单位。

border=2

图片边框厚度。

align="top"

调整图片旁边文字的位置，你可以控制文字出现在图片的偏上方、中间、底端、左右等，可选值：top, middle, bottom, left, right，内定为 bottom。Netscape 还支持 texttop, baseline, absmiddle, absbottom，

texttop 表示图片和文字依顶线对，

baseline 表示图片对到目前文字行底线值，

absmiddle 表示图片对到目前文字行绝对中央，

absbottom 表示图片对到目前文字行绝对底部，（绝对底部意指它考虑到比方 y 、g、q 等字的下缘）。

<br clear=all> 停止文本环绕直到没有对齐左页边的图象停止文本环绕直到没有对齐右页边的图象停止文本环绕直到两边都没有图象

alt="Logo of PenPal Garden"

这是用以描述该图形的文字，若用者使用文字浏览器，由于不支持图片，这些文字更会代替图片而被显示。若于支持图片显示的浏览器，当鼠标移至图片上该些文字亦会显示。 lowsrc="pre_logo.gif"

设定先显示低解像图片，若所加入的是一张很大的图片，下载时很长，这张低解像图片会先被显示以免浏览失却兴趣，通当是原图片灰阶版本。

※客户端图象映射图（WEB游戏,地图导航,网站导航条中的常用设置,具有很强的实用性）

<area shape="rect" href="page.html" coords="140,20,280,60"> <area shape="poly" href="image.html"

coords="100,100,180,80,200,140">

</map>

链接标记

<A> 称链接标记，由 <A> 与 </A> 所围的文字、图片等等可以成为一个链接。

<A> 的一般参数设定：

例如 <a href="index.html" name="hello" target="_top">

href="index.html"

这参数不能与另一参数 name 同时使用，使用这参数才能造成可按的链接。

当作为一外部链接时： href 所设定的是该链接所要连到的文件名称，若该文件与此 html 档不是同在一目录请加上适当的路径，相对绝对皆可。

当作为一内部链接时： href 所设定的是该链接所要连到的同文件内参考点或指定文件之参考点，且不要包围任何字画只加上结束标示 </a>便可以，例如 <a

href="#there"></a> 、 <a href="index.html#there"></a> 及 <a

href=".hk/~chris55/index.html#there"></a> 其中 there 便是参考点，并于其前加上符号 # 以作识别，参考点由下一个参数 name 事先于文件中埋下。 name="hello"

这参数是为文件埋下参考点，作为被链接，不会被显示。所以说造成一个内部连结要使用两次 <A> 链接标记。一个使用参数 name 事先于文件中埋下一参考点，另一个使用参数 href 连到这个参考点。

target="_top"

设定链接被按後之结果所要显示的视窗。可选值为： _blank, _parent, _self, _top, 框窗名称。

target="框窗名称"

这只运用于框架中，若被设定则链接结果将显示于该“框窗名称”之框窗中，框窗名称是事先由框架标记所命名。

target="_blank" 或 target="new"

将链接的画面内容，开在新的浏览视窗中，也就是全新的窗口中。

target="_parent"

将链接的画面内容，当成文件的上一个画面，也就是上级窗口中或父窗口中。

target="_self"

将链接的画面内容，显示在目前的视窗中，也就是当前窗口中。(内定值)

target="_top"

将框架中链接的画面内容，显示在没有框架的视窗中，整个浏览器窗口中。（即除去了框架)

框架标记

所谓框架便是网页画面分成几个框窗，同时取得多个 URL。只要 <FRAMESET> <FRAME> 即可，而所有框架标记要放在一个总起的 html 档，这个档案只记录了该框架如何划分，不会显示任何资料，所以不必放入 <BODY> 标记，浏览这框架必须读取这档案而不是其它框窗的档案。<FRAMESET> 是用以划分框窗，每一框窗由一个 <FRAME> 标记所标示，<FRAME>必须在 <FRAMESET> 范围中使用。如下例：

</frameset>

<FRAMESET> 称框架标记，用以宣告HTML文件为框架模式，并设定视窗如何分割。 <FRAME> 则只是设定某一个框窗内的参数属性。

<FRAMESET> 参数设定：

例子：<frameset rows="90,*" frameborder="0" border=0 framespacing="2"

bordercolor="#008000">

COLS="90,*"

垂直切割画面(如分左右两个画面)，接受整数值、百分数， * 则代表占用馀下空间。数值的个数代表分成的视窗数目且以逗号分隔。例如 COLS="30,*,50%" 可以切成三个视窗，第一个视窗是 30 pixels 的宽度，为一绝对分割，第二个视窗是当分配完第一及第三个视窗後剩下的空间，第三个视窗则占整个画面的 50% 宽度为一相对分割。您可自己调整数字。 ROWS="120,*"

就是横向切割，将画面上下分开，数值设定同上。唯 COLS 与 ROWS 两参数尽量不要同在一个 <FRAMESET> 标记中，因 Netacape 偶然不能显示这类形的框架，尽采用多重分割。 frameborder="0"

设定框架的边框，其值只有 0 和 1 ， 0 表示不要边框， 1 表示要显示边框。（避免使用 yes 或 no ）

border="0"

设定框架的边框厚度，以 pixels 为单位。

bordercolor="#008000"

设定框架的边框颜色。

framespacing="5"

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

<FRAME> 参数设定：

例子：<frame name="top" src="a.html" marginwidth="5" marginheight="5"

scrolling="Auto" frameborder="0" noresize framespacing="6" bordercolor="#0000FF"> SRC="a.html"

设定此框窗中要显示的网页档案名称，每个框窗一定要对应著一个网页档案。你可使用绝对路径或相对路径，有关此两者详见于【链接进阶】。

NAME="top"

设定这个框窗的名称，这样才能指定框架来作链接，必须但任意命名。

frameborder=0

设定框架的边框，其值只有 0 和 1 ， 0 表示不要边框， 1 表示要显示边框。（避免使用 yes 或 no ）

framespacing="6"

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

bordercolor="#008000"

设定框架的边框颜色。颜色值请参考【HTML 剖析】。

scrolling="Auto"

设定是否要显示卷轴，YES 表示要显示卷轴，NO 表示无论如何都不要显示， AUTO是视情况显示。

noresize

设定不让使用者可以改变这个框框的大小，亦没有设定此参数，使用者可以很随意地拉动框架，改变其大小。

marginhight=5

表示框架高度部份边缘所保留的空间。

marginwidth=5

表示框架宽度部份边缘所保留的空间。

当别人使用的浏览器太旧，不支援框架这个功能时，他看到的将会是一片空白。为了避免这种情况，可使用 <NOFRAMES> 这个标记，当使用者的浏览器看不到框架时，他就会看到 <NOFRAMES> 与 </NOFRAMES> 之间的内容，而不是一片空白。这些内容可以是提醒浏览转用新的浏览器的字句，甚至是一个没有框架的网页或能自动切换至没有框架的版本亦可。

应用方法：

在<frameset> 标记范围加入 </NOFRAMES> 标记，以下是一个例子：

<body>

很抱歉，馈下使用的浏览器不支援框架功能，请转用新的浏览器。

</body>

</noframes>

</frameset>

若浏览器支援框架，那堋它不会理会 <noframes> 中的东西，但若浏览器不支援框架，由于不认识所有框架标记，不明的标记会被略过，标记包围的东西便被解读出来，所以放在 <noframes>范围内的文字会被显示。

<IFRAME> ：

它的作用是在一页网页中间插入一个框窗以显示另一个文件。它是一个围堵标记，但围著的字句只有在浏览器不支援 iframe 标记时才会显示，如<noframes> 一样，可以放些提醒字句之类。通常 iframe 配合一个辨认浏览器的 Java Script 会较好，若 JavaScript 认出该浏览器并非 Internet Explorer 便会切换至另一版本。

例子： <iframe src="iframe.html" name="test" align="MIDDLE" width="300"

height="100" marginwidth="1" marginheight="1" frameborder="1" scrolling="Yes"> src="iframe.html"

欲显示于此框窗的文件来源除档案名称，必要加上相对或绝对路径。

name="test"

此框窗名称，这是链接标记的 target 参数所要的，

align="MIDDLE"

可选值为 left, right, top, middle, bottom，作用不大

width="300" height="100"

框窗的宽及长，以 pixels 为单位。

marginwidth="1" marginheight="1"

该插入的文件与框边所保留的空间。

frameborder="1"

使用 1 表示显示边框， 0 则不显示。（可以是 yes 或 no）

scrolling="Yes"

使用 Yes 表示容许卷动（内定）， No 则不容许卷动。

多媒体标记

<BGSOUND> 是用以插入背景音乐，但只适用于 IE。

参数列表：

src="your.mid"

设定 midi 档案及路径，可以是相对或绝对。

autostart=true

是否在音乐档传完之後，就自动播放音乐。true 是，false 否 (内定值)。

loop=infinite

是否自动反覆播放。LOOP=2 表示重复两次，Infinite 表示重复多次。

<EMBED> 是用以插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU 等等，Netscape 及新版的 IE 都支援。

参数列表：

src="your.mid"

设定 midi 档案及路径，可以是相对或绝对。

autostart=true

是否在音乐档传完之後，就自动播放音乐。true 是，false 否 (内定值)。

loop="true"

是否自动反覆播放。LOOP=2 表示重复两次，true 是， false 否。

HIDDEN="true"

是否完全隐藏控制画面，true 为是，no 为否 (内定)。

STARTTIME="分:秒"

设定歌曲开始播放的时间。如 STARTTIME="00:30" 表示从第30秒处开始播放。 VOLUME="0-100"

设定量的大小，数值是0到100之间。内定则为使用者系统本身之设定。

WIDTH="整数" 和 HIGH="整数"

设定控制画面的宽度和高度。(若 HIDDEN="no")

ALIGN="center"

设定控制画面和旁边文字的对方式，其值可以是 top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottom。

CONTROLS="smallconsole"

设定控制画面的外貌。预设值是 console。

console 一般正常的面板

smallconsole 较小的面板

playbutton 只显示播放按钮

pausecutton 只显示暂停按钮

stopbutton 只显示停止按钮

volumelever 只显示音量调整钮

<IMG> 是用以插入背景音乐，但只适用于 IE。

参数列表：

src="url*.gif"

设定该图片作为视频的封面，即浏览器在未完全读入AVI播放文件时，先在AVI播放区域显示该图像。

dynsrc="url*.avi"

设定该视频文件为播放的文件。

start="url*.avi"

设定视频的播放时间。

fileopen 链接到含有本标记的页面时开始播放AVI

mouseover 把鼠标移动到AVI播放区域之上时开放播放AVI

也可以同时将两者设置上 start=fileopen,mouseover

controls

在视频窗口下附加windows自呆的AVI播放控制条

loop

循环播放

infinite 无限循环播放

3 播放3次

loopdelay

延时时间数，单位毫秒

1000 表示延时1秒

其他特效标记

<MARQUEE> 只适用于 IE ，译为「跑马灯」如 Status Bar 的那种，意指走动或卷动的文字，其参数设定比较多。

参数列表：

<marquee behavior="SCROLL" direction="LEFT" bgcolor="#0000FF" height="30" width="150" hspace="0" vspace="0" loop="INFINITE" scrollamount="30" scrolldelay="500">Hello</marquee>

behavior="SCROLL"

决定文字的卷动方式，可选值为：

SCROLL 一般卷动，是内定值。

SLIDE 如幻灯片，一格格的，效果是文字一接触左边便全部消失。

ALTERNATE 文字向左右两边撞来撞去。

direction="LEFT"

设定文字的卷动方向，LEFT 表示向左，是内定值，RIGHT 表示向右。

bgcolor="#0000FF"

设定文字卷动范围的背景颜色。

height="30" width="150"

>设定文字卷动范围，可采用相对或绝对，如 30% 或 30 等，单位为像素。

hspace="0" vspace="0"

设定文字的水平及垂直空白位置。

loop="INFINITE"

设定文字卷动次数，其值可以是正整数或 INFINITE，INFINITE 是内定值，表示无限次。 scrollamount="30"

每「格」文字之间的间隔，单位是像素。

scrolldelay="500"

文字卷动的停顿时间，单位是毫秒。

<BLINK> 是令文字闪烁，只适用于 NC6.0和IE4.0之前的版本，用法直接，没有参数。

<PLAINTEXT> 使用html标签失效，直接显示在页面中，该标记没有结束标记。

<RUBY>有结束标记,用于包裹被标示的文字

<RT>有结束标记,用于说明上述标记所标示的文字

<RUBY>

很多信息……

</RUBY>

E-mail制作

<a href=”mailto:liruoliangqq@126.com”>给老师写信</a>

<a href=mailto:liruoliangqq@126.com

subject=你好呀&cc=liruoliangqq@163.com&bcc=liruoliang@sina.com>给老师写信</a> 附带标题,抄送,密送信息

ftp地址访问：

news新闻组访问

<a href=”news://”>新闻组访问</a>

特殊字符

Html学习手册

相关推荐

html学习计划

第二篇：Html学习手册

专栏推荐