HTM基本内容

最新推荐文章于 2021-06-28 04:20:42 发布

神秘人998

最新推荐文章于 2021-06-28 04:20:42 发布

阅读量1.4k

点赞数

分类专栏： java 文章标签： html

本文链接：https://blog.csdn.net/m0_38112363/article/details/74278520

版权

java 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

什么是HTML

HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，它规定了自己的语法规则，用来表示比“文本”更丰富的意义，比如图片，表格，链接等。浏览器（IE,FireFox等）软件知道HTML语言的语法，可以用来查看HTML文档。目前互联网上的绝大部分网页都是使用HTML编写的。

HTML是什么样的

简单地来说，HTML的语法就是给文本加上表明文本含义的标签(Tag)，让用户（人或程序）能对文本得到更好的理解。

下面是一个最简单的HTML文档：

点击查看效果

<html>

<head>

<title>第一个Html文档</title>

</head>

<body>

欢迎访问<a href="http://www.jb51.net">脚本之家</a>!

</body>

</html>

所有的HTML文档都应该有一个<html>标签，<html>标签可以包含两个部分:<head>和<body>。

<head>标签用于包含整个文档的一般信息，比如文档的标题（<title>标签用于包含标题），对整个文档的描述，文档的关键字等等。文档的具体内容就要放在<body>标签里了。

<a>标签用于表示链接，在浏览器（如IE,Firefox等）中查看HTML文档时，点击<a>标签括起来的内容时，通常会跳转到另一个页面。这个要跳转到的页面的地址由<a>标签的href属性指定。上面的<a href="http://deerchao.net">中，href属性的值就是http://deerchao.net。

HTML文档可以包含的内容

通过不同的标签，HTML文档可以包含不同的内容，比如文本，链接，图片，列表，表格，表单，框架等。

文本

HTML对文本的支持是最丰富的，你可以设置不同级别的标题，分段和换行，可以指定文本的语义和外观，可以说明文本是引用自其它的地方，等等等等。

链接

链接用来指出内容与另一个页面或当前页面某个地方有关。

图片

图片用于使页面更加美观，或提供更多的信息。

列表

列表用于说明一系列条目是彼此相关的。

表格

表格是按行与列将数据组织在一起的形式。也有不少人使用表格进行页面布局。

表单

表单通常由文本输入框，按钮，多选框，单选框，下拉列表等组成，使HTML页面更有交互性。

框架

框架使页面里能包含其它的页面。

HTML文档格式详细说明

前面介绍了HTML文档的基本格式，下面再做一个详细说明。

HTML文档可以用任何文本编辑器（比如记事本，UltraEdit等）创建，编辑，因为它的内容在本质也只是一些文本。

在HTML文本中，用尖括号括起来的部分称为标签。如果想在正文里使用尖括号（或者大与号小与号，总之是同一个东西），必须使用字符转义，也就是说转换字符的原有意义。<应该使用<代替，>则使用>，至于&符号本身,则应该使用&替代（不得不说的是有很多HTML文档没有遵循这个规则，常用的浏览器也都能够分析出&到底是一个转义的开始，还是一个符号，但是这样做是不推荐的）。

标签本质上是对它所包含的内容的说明，可能会有属性，来给出更多的信息。比如<img>（图片）标签有src属性（用于指明图片的地址），width和height属性（用于说明图片的宽度和高度）。HTML里能使用哪些标签，这些标签分别可以拥有哪些属性，这些都是有规定的，知道了这里说的基本知识之后，学习HTML其实也就是学习这些标签了。本文后面会对常用的HTML标签做出简短的介绍。

标签通常有开始部分和结束部分（也被称为开始标签和结束标签），它们一起限定了这个标签所包含的内容。属性只能在开始标签中指定，属性值可以用单引号或双引号括起来。结束标签都以/加上标签名来表示。有时候，有些标签并不包含其它内容（只包括自己的属性，甚至连属性都没有），这种情况下，可以写成类似这样：<img src="logo.gif" />。注意最后的一个空格和一个反斜杠，它说明这个标签已经结束，不需要单独的结束标签了。

某些标签包含的内容中还可以有新的标签，新的标签名甚至可能还可以与包含它的标签的名称相同（哪些标签可以包含标签，可以包含哪些标签也是有规定的）。比如：

点击查看效果

<div>

<div>当前分类内容列表...</div>

</div>

在这种情况下，最后出现的标签应该最先结束。

HTML文档里所有的空白符（空格，Tab，换行，回车）会被浏览器忽略，唯一的例外是空格，对空格的处理方式是所有连续的空格被当成一个空格，不管有一个，还是两个，还是100个。之所以有这样的规则是因为忽略空白符能让使用HTML的作者以他觉得最方便的格式来排列内容，比如可以在每个标签开始后增加缩进，标签结束后减少缩进。由于英语文本中空格用得很普遍（用于分隔单词），所以对空格做了这样的特殊处理。如果要显示连续的空格（比如为了缩进），应该用来代表空格。

常用标签介绍

文本

最常用的标签可能是<font>了，它用于改变字体，字号，文字颜色。

点击查看效果

加粗，下划线，斜体字也是常用的文字效果，它们分别用<b>,<u>,<i>表示：

点击查看效果

<i>italic</i>

<u>underline</u>

还有一些标签，用来指出包含的文本有特殊的意义，比如<abbr>（表示缩写），<em>（表示强调），<strong>（表示更强地强调）,<cite>（表示引用），<address>（表示地址）等等。这些标签不是为了定义显示效果而存在的，所以从浏览器里看它们可能没有任何效果，也可能不同的浏览器对这些标签的显示效果完全不同。

一篇很长的文章，如果有合适的小标题的话，就可以快速地对它的内容进行大致的了解。在HTML里，用来表示标题的标签有：<h1>,<h2>,<h3>,<h4>,<h5>,<h6>，它们分别表示一级标题，二级标题，三级标题...

点击查看效果

<h2>什么是HTML</h2>

...

<h2>HTML是什么样的</h2>

...

图片

<hr>标签用于在页面上添加横线。可以通过指定width和color属性来控制横线的长度和颜色。

点击查看效果

<img>标签用于在页面上添加图片，src属性指定图片的地址，如果无法打开src指定的图片，浏览器通常会在页面上需要显示图片的地方显示alt属性定义的文本。

点击查看效果

链接

超级链接用<a>标签表示，href属性指定了链接到的地址。<a>标签可以包含文本，也可以包含图片。

点击查看效果

<a href="http://deerchao.net">Unibetter大学生论坛</a>

分段与换行

由于HTML文档会忽略空白符，所以要想保证正常的分段换行的话，必须指出哪些文字是属于同一段落的，这就用到了标签<p>。

点击查看效果

<p>这是第一段。</p>

<p>这是第二段。</p>

也有人不用<p>，而用<br>。<br>只表示换行，不表示段落的开始或结束，所以通常没有结束标签。

点击查看效果

这是第一段。<br>

这是第二段。<br />

这是第三段。

有时，要把文档看作不同的部分组合起来的，比如一个典型的页面可能包括三个部分：页头，主体，页脚。<div>标签专门用于标明不同的部分：

点击查看效果

表格

HTML文档在浏览器里通常是从左到右，从上到下地显示的，到了窗口右边就自动换行。为了实现分栏的效果，很多人使用表格（<table>）进行页面排版（虽然HTML里提供表格的本意不是为了排版）。

<table>标签里通常会包含几个<tr>标签，<tr>代表表格里的一行。<tr>标签又会包含<td>标签，每个<td>代表一个单元格。

点击查看效果

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

<tr>标签还可以被<table>里的<thead>或<tbody>或<tfoot>包含。它们分别代表表头，表正文，表脚。在打印网页的时候，如果表格很大，一页打印不完，<thead>和<tfoot>将在每一页出现。

<th>和<td>非常相似，也用在<tr>里边，不同的是<th>代表这个单元格是它所在的行或列的标题。

点击查看效果

<table>

<thead>

</thead>

<tbody>

</tbody>

</table>

列表

表格用于表示二维数据（行，列），一维数据则用列表表示。列表可以分为无序列表（<ul>），有序列表（<ol>）和定义列表（<dl>）。前两种列表更常见一些，都用<li>标签包含列表项目。

无序列表表示一系列类似的项目，它们之间没有先后顺序。

点击查看效果

<ul>

</ul>

有序列表中各个项目间的顺序是很重要的，浏览器通常会自动给它们产生编号。

点击查看效果

<ol>

<li>打开冰箱门</li>

<li>把大象赶进去</li>

<li>关上冰箱门</li>

</ol>

框架

最后谈一下框架，曾经非常流行的技术，框架使一个窗口里能同时显示多个文档。主框架页里面没有<body>标签，取代它的是<frameset>。

<frameset>标签的属性Rows和Cols用于指定框架集(frameset)里有多少行（列），以及每行（列）的高度（宽度）。

<frameset>标签可以包含<frame>标签，每个<frame>标签代表一个文档（src属性指定文档的地址）。

如果觉得这样的页面还不够复杂的话，还可以在<frameset>标签里包含<frameset>标签。

点击查看效果

</frameset>

30分钟以后怎么办

这篇文章只是让从没有接触过HTML的人对HTML有个初步的印象，所以很多东西都没有谈到。本文并没有列出HTML中所有的标签，对于列出的标签也没有介绍它们的全部属性。另外，没有提到的东西里还包括我觉得非常重要的CSS, JavaScript, XHTML, XML, Web Standards，以及它们与HTML的关系。不过这些也不太可能在30分钟内学会，好在只要入了门，就能利用网上很多资源继续学习。当然，如果有一本纸质书，就更好了，这方面我推荐<<HTML与XHTML权威指南>>。下面是一些我觉得不错的网上资源：

HTML语言参考（英文）

HTML教程

一些我认为你可能已经知道的术语的参考

文本

文字

文档

文件，通常指内容是数据（而不是程序）的文件

HTML指令详解

结构
＜html＞
＜head＞
＜title＞标题＜title＞
＜/head＞
＜body＞..........文件内容..........
＜/body＞
＜/html＞
1.文件标题
＜title＞..........＜/title＞
2.文件更新--＜meta＞
【1】10秒后自动更新一次
＜meta http-equiv="refresh" content=10＞
【2】10秒后自动连结到另一文件
＜meta http-equiv="refresh" content="10；URL=欲连结文件之URL"＞
3.查询用表单--＜isindex>
若欲设定查询栏位前的提示文字：
＜isindex prompt="提示文字"＞
4.预设的基准路径--＜base>
＜base href="放置文件的主机之URL"＞
版面
1.标题文字＜h#＞..........＜/h#＞#=1~6；h1为最大字，h6为最小字
2.字体变化＜font＞..........＜/font＞
【1】字体大小＜font size=#＞..........＜/font＞#=1~7；数字愈大字也愈大
【2】指定字型＜font face="字型名称"＞..........＜/font＞
【3】文字颜色＜font color=#rrggbb＞..........＜/font＞rr：表红色（red）色码gg：表绿色（green）色码bb：表蓝色（blue）色码
3.显示小字体＜small＞..........＜/small＞
4.显示大字体＜big＞..........＜/big＞
5.粗体字＜b＞..........＜/b＞
6.斜体字＜i＞..........＜/i＞
7.打字机字体＜tt＞..........＜/tt＞
8.底线＜u＞..........＜/u＞
9.删除线＜strike＞..........＜/strike＞
10.下标字＜sub＞..........＜/sub＞
11.上标字＜sup>..........＜/sup＞
12.文字闪烁效果＜blink＞..........＜/blink＞
13.换行＜br＞
14.分段＜p＞
15.文字的对齐方向＜p align="#"＞#号可为left：表向左对齐（预设值）center：表向中对齐right：表向右对齐P.S.＜p align="#"＞之后的文字都会以所设的对齐方式显示，直到出现另一个＜p align="#"＞改变其对齐方向，或遇到＜hr＞ⅱ＜h#＞标签时会自动设回预设的向左对齐。
16.分隔线＜hr＞
【1】分隔线的粗细＜hr size=点数＞
【2】分隔线的宽度＜hr size=点数或百分比＞
【3】分隔线对齐方向＜hr align="#"＞#号可为left：表向左对齐（预设值）center：表向中对齐right：表向右对齐
【4】分隔线的颜色＜hr color=#rrggbb＞
【5】实心分隔线＜hr noshade＞
17.向中对齐＜center＞..........＜/center＞
18.依原始样式显示＜pre＞..........＜/pre＞
19.＜body＞指令的属性
【1】背景颜色 -- bgcolor＜body bgcolor=#rrggbb＞
【2】背景图案 -- background＜body background="图形文件名"＞
【3】设定背景图案不会卷动 -- bgproperties ＜body bgproperties=fixed＞
【4】文件内容文字的颜色 -- text ＜body text=#rrggbb＞
【5】超连结文字颜色 -- link ＜body link=#rrggbb＞
【6】正被选取的超连结文字颜色 -- vlink ＜body vlink=#rrggbb＞
【7】已连结过的超连结文字颜色 -- alink ＜body alink=#rrggbb＞
20.注解＜!--..........--＞21.特殊字元表示法
符号语法
＜＆lt
＞＆gt
& ＆amp
" ＆quot
空白＆nbsp

图片
1.插入图片＜img src="图形文件名"＞
2.设定图框 -- border＜img src="图形文件名" border=点数＞
3.设定图形大小 -- widthⅱheight＜img src="图形文件名" width=宽度点数height=高度点数＞
4.设定图形上下左右留空 -- vspaceⅱhspace＜img src="图形文件名" vspace=上下留空点数hspace=左右留空点数＞
5.图形附注＜img src="图形文件名" alt="说明文字"＞
6.预载图片
＜img src="高解析度图形文件名" lowsrc="低解析度图形文件名"＞P.S.两个图的图形大小最好一致
7.影像地图（Image Map）＜img src="图形文件名" usemap="#图的名称"＞＜map name="图的名称"＞
＜area shape=形状 coords=区域座标列表href="连结点之URL"＞
＜area shape=形状 coords=区域座标列表href="连结点之URL"＞
＜area shape=形状 coords=区域座标列表href="连结点之URL"＞
＜area shape=形状 coords=区域座标列表href="连结点之URL"＞＜/map＞
【1】定义形状 -- shape
shape=rect：矩形 shape=circle：圆形shape=poly：多边形
【2】定义区域 -- coords
a.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标
例：＜area shape=rect coords=100,50,200,75 href="URL"＞
b.圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度
例：＜area shape=circle coords=85,155,30 href="URL"＞
c.任意图形（多边形）：将图形之每一转折点座标依序填入
例：＜area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL"＞
表格
1.定义表格＜table＞..........＜/table＞
【1】设定边框的厚度 -- border
＜table border=点数＞
【2】设定格线的宽度 -- cellspacing
＜table cellspacing=点数＞
【3】设定资料与格线的距离 -- cellpadding
＜table cellpadding=点数＞
【4】调整表格宽度 -- width
＜table width=点数或百分比＞
【5】调整表格高度 -- height
＜table height=点数或百分比＞
【6】设定表格背景色彩 -- bgcolor
＜table bgcolor=#rrggbb＞
【7】设定表格边框色彩 -- bordercolor
＜table bordercolor=#rrggbb＞
2.显示格线＜table border＞
3.表格标题
＜caption＞..........＜/caption＞
表格标题位置 -- align
＜caption align="#"＞#号可为top：表标题置于表格上方（预设值）
bottom：表标题置于表格下方
4.定义列＜tr＞
5.定义栏位《1》＜td＞：靠左对齐
《2》＜th＞：靠中对齐ⅱ粗体
【1】水平位置 -- align＜th align="#"＞
#号可为 left：向左对齐
center：向中对齐 right：向右对齐
【2】垂直位置 -- align＜th align="#"＞#号可为
top：向上对齐 middle：向中对齐
bottom：向下对齐
【3】栏位宽度 -- width
＜th width=点数或百分比＞
【4】栏位垂直合并 -- rowspan
＜th rowspan=欲合并栏位数＞
【5】栏位横向合并 -- colspan
＜th colspan=欲合并栏位数＞
清单
一、目录式清单
＜dir＞＜li＞项目1＜li＞项目2＜li＞项目3＜/dir＞P.S.目录式清单每一个项目不能超过20个字元（即10个中文字）
二、选项式清单＜menu＞＜li＞项目1＜li＞项目2＜li＞项目3＜/menu＞
三、有序号的清单＜ol＞＜li＞项目1＜li＞项目2＜li＞项目3＜/ol＞
【1】序号形式 -- type＜ol type=#＞或＜li type=#＞#号可为A：表以大写英文字母AⅱBⅱCⅱD...做为项目编号 a：表以小写英文字母aⅱbⅱcⅱd...做为项目编号 I：表以大写罗马数字做为项目编号 i：表以小写罗马数字做为项目编号1：表以阿拉伯数字做为项目编号（预设值）
【2】起始数字 -- start＜ol start=欲开始计数的序数＞
【3】指定编号 -- value＜li value=欲指定的序数＞
四、无序号的清单＜ul＞＜li＞项目1＜li＞项目2＜li＞项目3＜/ul＞
【1】项目符号形式 -- type ＜ul type=#＞或＜li type=#＞#号可为disc：实心圆点（预设值）circle：空心圆点square：实心方块
【2】原始清单 -- plain＜ul plain＞
【3】清单排列方式 -- warp 《1》清单垂直排列＜ul warp = vert＞《2》清单水平排列＜ul warp = horiz＞
五、定义式清单＜dl＞＜dt＞项目1＜dd＞项目1说明＜dt＞项目2＜dd＞项目2说明＜dt＞项目3＜dd＞项目3说明＜/dl＞
紧密排列 -- compact ＜dl compact＞P.S.如此可使＜dt＞的内容与＜dd＞的内容在同一行，仅以数格空白相隔而不换行，但若＜dt＞的文字超过一定的长度后，compact的作用就消失了！
表单
一、基本架构＜form action="处理资料用的CGI程式之URL"或"mailto:电子信箱的URL" method="get或post"＞.......... .......... ..........＜/form＞
二、输入文件型表单＜form action="URL" method="post"＞＜input＞＜input＞.......... .......... ＜/form＞
【1】栏位类型 -- type＜input type=#＞#号可为text：文字输入password：密码checkbox：多选钮radio：单选钮submit：接受按钮reset：重设按钮image：图形钮hidden：隐藏栏位
【2】栏位名称 -- name＜input name="资料栏名"＞P.S.若type为submitⅱreset则name不必设定
【3】文件上的预设值 -- value ＜input value="预设之字串"＞
【4】设定栏位的宽度 -- size ＜input size=字元数＞
【5】限制最大输入字串的长度 -- maxlength ＜input maxlength=字元数＞
【6】预设checkbox或radio的初值-- checked ＜input type=checkbox checked＞＜input type=radio checked＞
【7】指定图形的URL -- src＜input type=image src="图档名"＞
【8】图文对齐 -- align＜input type=image align="#"＞#号可为top：文字对齐图片之顶端middle：文字对齐图片之中间buttom：文字对齐图片之底部
三、选择式表单＜form action="URL" method="post"＞＜select＞＜option＞＜option＞.......... .......... ＜/select＞＜/form＞
A、＜select＞的属性
【1】栏位名称 -- name＜select name="资料栏位名"＞
【2】设定显示的选项数 -- size ＜select size=个数＞
【3】多重选项 -- multiple＜select multiple＞
B、＜option＞的属性
【1】定义选项的传回值 -- value ＜option value="传回值"＞
【2】预先选取的选项 -- selected ＜option selected＞
四、多列输入文字区表单＜form action="URL" method="post"＞＜textarea＞.......... .......... ＜/textarea＞＜/form＞
【1】文字区的变数名称 -- name ＜textarea name=变数名称＞
【2】设定文字输入区宽度 -- cols ＜textarea cols=字元数＞
【3】设定文字输入区高度 -- rows ＜textarea rows=列数＞
【4】输入区设定预设字串＜textarea＞预设文字＜/textarea＞
【5】自动换行与否 -- wrap ＜textarea wrap=#＞#号可为off：表输入的文字超过栏宽时，不会自动换行（预设值）virtual：表输入的文字在超过栏宽时会自动换行
链接
一、连结至其他文件＜a href="URL"＞说明文字或图片＜/a＞
二、连结至文件内之某一处（外部连结）
《1》起点
＜a href="档名#名称"＞..........＜/a＞
《2》终点＜a name="名称"＞
三、frame的超连结
【1】开启新的浏览器来显示连结文件-- _blank ＜a href="URL" target=_blank＞
【2】显示连结文件於目前的frame -- _self＜a href="URL" target=_self＞
【3】以上一层的分割视窗显示连结文件-- _parent ＜a href="URL" target=_parent＞
【4】以全视窗显示连结文件 -- _top ＜a href="URL" target=_top＞
【5】以特定视窗显示连结文件 --＜a href="URL" target="特定视窗名称"＞
FRAME
一、分割视窗指令＜frameset＞..........＜/frameset＞
【1】垂直（上下）分割 -- rows
＜frameset rows=#＞#号可为点数：如欲分割为100,200,300三个视窗，则
＜frameset rows=100,200,300＞；亦可以*号代表，如＜frameset rows=*,500,*＞
百分比：如＜frameset rows=30%,70%＞，各项总和最好为100%
【2】水平（左右）分割 -- cols ＜frameset cols=点数或百分比＞
二ⅱ指定视窗内容 --＜frame＞
＜frameset cols=30%,70%＞＜frame＞＜frame＞＜/frameset＞
【1】指定视窗的文件名称 -- src ＜frame src=HTML档名＞
【2】定义视窗的名称 -- name
＜frame name=视窗名称＞
【3】设定文件与上下边框的距离 -- marginheight
＜frame marginheight=点数＞
【4】设定文件与左右边框的距离 -- marginwidth
＜frame marginwidth=点数＞
【5】设定分割视窗卷轴 -- scrolling
＜frame scrolling=#＞#号可为yes：固定出现卷轴
no：不出现卷轴 auto：自动判断文件大小需不需要卷轴（预设值）
【6】锁住分割视窗的大小 -- noresize ＜frame noresize＞
近年来，超文本标识语言(HTML)得到了迅速拓展，为满足更多的需要，它增加了许多扩展功能。设计新颖、吸引人的网页已经越来越依赖Java Applet(小程序)、内嵌脚本、图文框、插件和其它扩展的HTML功能。这些扩展的HTML功能不仅可以对文本作进一步的格式化，而且可以嵌入程序、动画和其它交互式操作元素，将曾经是静态的主页转换成一幅新的美妙绝伦的画面。它可以任主页制作者充分发挥自己的想像力，设计出充满魅力的主页来。下面我就介绍几个用于增强HTML页面功能的超文本标记，这些标记正越来越多地用于网页设计中。

1、<script>标记
<script>是用来标志Javascript和VBscript编程的HTML标记，它的格式如下：
<script 属性=属性值>Javascript或者VBscript程序源代码</script>
你可以在页面中插入任意多的<script>……</script>标记块。<script>标记有多种属性(如event、for、language、src等)，其中最常用的是language属性，它用来指定脚本的语言类型，如“Javascript”或“VBscript”。
2、<applet>标记
<applet>标记是用来在页面中插入Java小程序的专用标记，它有多种属性。<applet>标记的一般属性格式如下：
<applet 属性=属性值></applet>
它的各种属性分别用来定义Java小程序的路径、文件名、Java applet小程序在页面中的位置、大小及运行参数等。

3、<object>标记
<object>标记不仅可以用来在页面中插入ActiveX控件，还可以插入其他的OLE对象，如图像、文档、动画、小程序等等，它的格式为：
<object 属性=属性值></object>
它的各种属性分别用来设定插入对象的类型、路径，在页面中显示的大小、位置等。

4、<param>标记
用<object>标记在页面中插入ActiveX控件或其它对象之后，有时候需要向该对象或者控件传递参数，这就要使用<param>标记。该标记没有相应的结束标志</param>，并且该标记仅在<object>标记中有效，它的一般格式为：
<param name=＊ value=＊valuetype=＊type=＊>
各属性的含义是：“name”是参数的名字；“value”指定参数的值；“valuetype”指定怎样表示参数的值；“type”指定媒体类型。

5、<embed>标记
该标记可以用来在主页中嵌入多媒体文件，如电影(movie)、声音、虚拟现实语言(vrml)等，但此时需要在浏览器中安装播放相应多媒体文件的插件。<embed>标记在各个插件中表现不同，它的一般格式为：
<embed src=〃url〃>。

6、<bgsound>标记
该标记用来在页面中插入背景音乐，它的格式为：
<bgsound src=〃url〃loop=〃＊〃>
其中src用来指定wav文件的地址，loop设定循环播放次数。

<! - - ... - -> 注解

<!> 跑马灯

<marquee>...</marquee>普通卷动

<marquee behavior=slide>...</marquee>滑动

<marquee behavior=scroll>...</marquee>预设卷动

<marquee behavior=alternate>...</marquee>来回卷动

<marquee direction=down>...</marquee>向下卷动

<marquee direction=up>...</marquee>向上卷动

<marquee direction=right></marquee>向右卷动

<marquee direction=’left’></marquee>向左卷动

<marquee loop=2>...</marquee>卷动次数

<marquee width=180>...</marquee>设定宽度

<marquee height=30>...</marquee>设定高度

<marquee bgcolor=FF0000>...</marquee>设定背景颜色

<marquee scrollamount=30>...</marquee>设定滚动速度

<marquee scrolldelay=300>...</marquee>设定卷动时间

<marquee οnmοuseοver="this.stop()">...</marquee>鼠标经过上面时停止滚动

<marquee οnmοuseοver="this.start()">...</marquee>鼠标离开时开始滚动

<!>字体效果

<h1>...</h1>标题字(最大)

<h6>...</h6>标题字(最小)

<b>...</b>粗体字

<strong>...</strong>粗体字(强调)（同上效果略同）

<i>...</i>斜体字

<em>...</em>斜体字(强调)

<dfn>...</dfn>斜体字(表示定义)

<u>...</u>底线

<ins>...</ins>底线(表示插入文字)

<strike>...</strike>横线

<s>...</s>删除线

<del>...</del>删除线(表示删除)

<kbd>...</kbd>键盘文字

<tt>...</tt> 打字体

<xmp>...</xmp>固定宽度字体(在文件中空白、换行、定位功能有效)

<plaintext>...</plaintext>固定宽度字体(不执行标记符号)

<listing>...</listing> 固定宽度小字体

<font color=00ff00>...</font>字体颜色

<font size=1>...</font>最小字体

<font style =’font-size:100 px’>...</font>无限增大

<!>区断标记

<hr>水平线

<hr size=’9’>水平线(设定大小)

<hr width=’80%’>水平线(设定宽度)

<hr color=’ff0000’>水平线(设定颜色)

<br>(换行)

<nobr>...</nobr>水域(不换行)

<p>...</p>水域(段落)

<center>...</center>置中

<!>连结格式

<base href=位址>(预设好连结路径)

<a href=位址></a>外部连结

<a href=位址 target=’_blank’></a>外部连结(另开新视窗)

<a href=位址 target=’_top’></a>外部连结(全视窗连结)

<a href=位址 target=’页框名’></a>外部连结(在指定页框连结)

<!>贴图/音乐

<img src=图片位址>贴图

<img src=图片位址 width=’180’>设定图片宽度

<img src=图片位址 height=’30’>设定图片高度

<img src=图片位址 alt=’提示文字’>设定图片提示文字

<img src=图片位址’ border=’1’>设定图片边框

<bgsound src=MID音乐档位址>背景音乐设定

<!>表格语法

<table aling=left>...</table>表格位置,置左

<table aling=center>...</table>表格位置,置中

<table background=图片路径>...</table>背景图片的URL=就是路径网址

<table border=边框大小>...</table>设定表格边框大小(使用数字)

<table bgcolor=颜色码>...</table>设定表格的背景颜色

<table borderclor=颜色码>...</table>设定表格边框的颜色

<table borderclordark=颜色码>...</table>设定表格暗边框的颜色

<table borderclorlight=颜色码>...</table>设定表格亮边框的颜色

<table cellpadding=参数>...</table>指定内容与格线之间的间距(使用数字)

<table cellspacing=参数>...</table>指定格线与格线之间的距离(使用数字)

<table cols=参数>...</table>指定表格的栏数

<table frame=参数>...</table>设定表格外框线的显示方式

<table width=宽度>...</table>指定表格的宽度大小(使用数字)

<table height=高度>...</table>指定表格的高度大小(使用数字)

<td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)

<td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)

<!>分割视窗

<frameset cols="20%,*">左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整

<frameset rows="20%,*">上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整

<frameset cols="20%,*">分割左右两个框架

<frameset cols="20%,*,20%">分割左中右三个框架

<分割上下两个框架

<frameset rows="20%,*,20%">分割上中下三个框架

<! - - ... - -> 注解

<A HREF TARGET> 指定超连结的分割视窗

<A HREF=#锚的名称>指定锚名称的超连结

<A HREF> 指定超连结

<A NAME=锚的名称>被连结点的名称

<ADDRESS>....</ADDRESS> 用来显示电子邮箱地址

<B> 粗体字

<BASE TARGET> 指定超连结的分割视窗

<BASEFONT SIZE> 更改预设字形大小

<BGSOUND SRC> 加入背景音乐

<BIG> 显示大字体

<BLINK> 闪烁的文字

<BODY TEXT LINK VLINK> 设定文字颜色

<BODY> 显示本文

<BR> 换行

<CAPTION ALIGN> 设定表格标题位置

<CAPTION>...</CAPTION> 为表格加上标题

<CENTER> 向中对齐

<CITE>...<CITE> 用於引经据典的文字

<CODE>...</CODE> 用於列出一段程式码

<COMMENT>...</COMMENT> 加上注解

<DD> 设定定义列表的项目解说

<DFN>...</DFN> 显示"定义"文字

<DIR>...</DIR> 列表文字标签

<DL>...</DL> 设定定义列表的标签

<DT> 设定定义列表的项目

<EM> 强调之用

<FONT FACE> 任意指定所用的字形

<FONT SIZE> 设定字体大小

<FORM ACTION> 设定户动式表单的处理方式

<FORM METHOD> 设定户动式表单之资料传送方式

<FRame MARGINHEIGHT> 设定视窗的上下边界

<FRame MARGINWIDTH> 设定视窗的左右边界

<FRame NAME> 为分割视窗命名

<FRame NORESIZE> 锁住分割视窗的大小

<FRame SCROLLING> 设定分割视窗的卷轴

<FRame SRC> 将HTML档加入视窗

<FRameSET COLS> 将视窗分割成左右的子视窗

<FRameSET ROWS> 将视窗分割成上下的子视窗

<FRameSET>...</FRameSET> 划分分割视窗

<H1>~<H6> 设定文字大小

<HEAD> 标示文件资讯

<HR> 加上分格线

<HTML> 文件的开始与结束

<I> 斜体字

<IMG ALIGN> 调整图形影像的位置

<IMG ALT> 为你的图形影像加注

<IMG DYNSRC LOOP> 加入影片

<IMG HEIGHT WIDTH> 插入图片并预设图形大小

<IMG HSPACE> 插入图片并预设图形的左右边界

<IMG LOWSRC> 预载图片功能

<IMG SRC BORDER> 设定图片边界

<IMG SRC> 插入图片

<IMG VSPACE> 插入图片并预设图形的上下边界

<INPUT TYPE NAME value> 在表单中加入输入栏位

<ISINDEX> 定义查询用表单

<KBD>...</KBD> 表示使用者输入文字

<LI TYPE>...</LI> 列表的项目 (可指定符号 )

<MARQUEE> 跑马灯效果

<MENU>...</MENU> 条列文字标签

<MULTIPLE> 可同时选择多项的列表栏

<NOFRame> 定义不出现分割视窗的文字

<OL>...</OL> 有序号的列表

<OPTION> 定义表单中列表栏的项目

<P ALIGN> 设定对齐方向

<P> 分段

<PERSON>...</PERSON> 显示人名

<PRE> 使用原有排列

<SAMP>...</SAMP> 用於引用字

<select >...</select > 在表单中定义列表栏

<SMALL> 显示小字体

<STRIKE> 文字加横线

<STRONG> 用於加强语气

<SUB> 下标字

<SUP> 上标字

<TABLE BORDER=n> 调整表格的宽线高度

<TABLE CELLPADDING> 调整资料栏位之边界

<TABLE CELLSPACING> 调整表格线的宽度

<TABLE HEIGHT> 调整表格的高度

<TABLE WIDTH> 调整表格的宽度

<TABLE>...</TABLE> 产生表格的标签

<TD ALIGN> 调整表格栏位之左右对齐

<TD BGCOLOR> 设定表格栏位之背景颜色

<TD COLSPAN ROWSPAN> 表格栏位的合并

<TD NOWRAP> 设定表格栏位不换行

<TD VALIGN> 调整表格栏位之上下对齐

<TD WIDTH> 调整表格栏位宽度

<TD>...</TD> 定义表格的资料栏位

<TEXTAREA NAME ROWS COLS> 表单中加入多少列的文字输入栏

<TEXTAREA WRAP> 决定文字输入栏是自动否换行

<TH>...</TH> 定义表格的标头栏位

<TITLE> 文件标题

<TR>...</TR> 定义表格美一行

<TT> 打字机字体

<U> 文字加底线

<UL TYPE>...</UL> 无序号的列表 (可指定符号 )

<var>...</var> 用於显示变数

BlockQuotc文本缩进

表示颜色的有三种方式；

1，16进制颜色代码

语法：#RRGGBB

例：<font color="#ff0000">红色</font>

2，10进制RGB码

语法：RGB（RRR，GGG，BBB）

例：<font color="rgb(255,000,000)">红色</font>

3,直接用颜色的英文名称

例：<font color="red">红色</font>

<body>.....</body>属性可分为三种：

1，背景属性

包括：bgcolor,background

2,文字属性：

包括：text,link,alink,vlink,

3,留白属性：

其中分为：leftmargin,topmargin

.bgcolor背景色

语法格式：<body bgcolor="#ff0000">

.background背景图案。

语法格式：<body background="url">

.text文本颜色（非连接文字颜色）

.link连接文字颜色（可连接文字颜色）

.alink活动连接文字颜色（正被点击的可连接文字的颜色）

.vlink已访问连接文字颜色）（已经点击访问过的可连接文字的颜色）

语法格式：<body text="color" link="color" alink="color" vlink="color">

.leftmargin 页面左侧的留白距离

.topmargin 页面顶部的留白距离

语法格式：<body leftmargin="value" topmargin="value">

注：value为长度值为数字

align 属性

语法：<h2 align="?">文字</h2>

其属性有三种：left靠左,center居中,right靠右

〈p〉</p>为段落标记，可利用以上属性对整个段落进行设置

〈br>为换行标记

<nobr></nobr>为不换行标记放在文字两边即可

例：<body>

<h3>江南逢李龟年</h3>

<p>歧王宅里寻常见<br>

催九堂前几度闻<br>

正是江南好风景<br>

落花时节又逢君</p>

</body>

预格式化：

<pre>......</pre> 浏览是效果和编写是效果格式一样

列表分为

1无序列表又称符号列表

语法格式：

<ul type="">type的属性可选直disc实心圆点,clrcle空心圆点,square实心方框

</ul>

2有序列表

语法格式：

</ol>

type的值是编号字符可选的有1...,a...,A...,i... ,I...

start为起始值例：如果start为3是那么将从3开始，而且必须是数字。

3定义列表

<dl>定义列表标记

<dt>标示定义条目

<dd>标示定义内容

语法格式：

<dl>

</dl>

连接和图像

语法格式：

属性：href 连接目标值可以是url地址也可以是连接锚点

<a href="url">...</a>或者

name 连接名称

语法格式：<a name="锚点名称">...</a>

例：<a name="abcdcf">...</a>

连接到该锚点的连接则应是：

target目标窗口

语法格式：

-blank打开新窗口

_self当前窗口打开

一下两个仅在框架叶面中应用

_parent当前窗口的父级窗口（上一级）打开

_top在最高一级的窗口打开

windowname已命名的窗口或框架中打开连接

title连接提示

图像<img>

语法格式：<img src="url" alt="?" width="?" height="?" border="?" align="?">

border属性定义图片边框的宽度，默认值为0

align属性设置图片旁边文字的位置

语法格式：<img src="" align"">

可选值有：

top图片和文字顶部对齐

middle图片和文字居中对齐

bottom图片和文字底边对齐（默认）

left图片居左对齐，文字沿图片绕排

right图片居右对齐，文字沿图片绕排

absmiddle图片对齐到目前文字行绝对中央

absbottom图片对齐到目前文字行绝对底部

文字的排版

不换行空白标记

font元素

语法格式：

字体大小可选值为1——7，默认为3

例：〈font face="黑体" size="4" color="#ff00ff">....</font>

水平线<hr>

语法格式：<hr width="宽度" align="对齐方式默认居中center" size="水平线厚度默认为2" color="颜色" noshade>

noshade无阴影，既实线

层〈div><span>两种元素

<div>是块级元素，和段落元素<p>相似，不同的是两个<div>元素之间不会产生两个<p>元素之间的空行，

<span>是行内元素，可以定义段落中部分文字的属性

语法格式：

align设置层中元素的水平对齐方式

stule设置元素应用css规范的属性

表格

语法格式：

</table>

border边框宽度默认值为0，既没有边框

cellspacing表格中单元格的边距大小，默认值为两个像素

cellpadding表格中单元格之间的间距大小，默认值为两个像素

tr元素

语法格式：

align属性对齐方式可选值如下：left,center,tight,默认为left

bgcolor指定该行的背景颜色

td元素

语法格式：

align属性的可选值有：left,center,right

valign属性的可选值有：top,middle,bottom

rowspan和colapan跨行和跨列的数量，默认为1

框架

<frameset></framset>框架组标记

<frame></frame>框架标记

语法格式：

</franeset>

<frameset></frameset>元素（双标签）

语法格式：

.......

</frameset>

属性：

cols 垂直切割窗口（如左右分割两个窗口）接受整数值，百分数，*（*代表占用余下空间）数值的个数代表分成的部分数目，要以逗号分隔。例：cols="30,*,50%"可以切成三个视窗，第一部分是30像素（pixels）为绝对分割，第二部分是当分配完第一和第三视图后剩下的空间，第三部分则占整个窗口的50%宽度，为相对分割。

rows 就是横向切割，将窗口上下分开，数值设置同上。

以上两属性尽量不要在同一个<frameset>标记中，因为王井（netscape）不支持，尽量采用多重分割。

frameborder 设置框架的边框，其值有0不要边框，1要边框。

border 设置框架边框厚度

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

frame 元素（单标签）

语法格式：

属性：

name 框架名称，指定框架来做连接的目标窗口。

src 框架中要显示的网页文当url地址，每个个框架要对应一个html文挡。

scrolling 是否显示滚动条，yes/no,auto是自动。

noresize 设置不让使用者改变这个框架的大小，

noframe元素

指定当使用了框架的页面在不支持框架的浏览器中打开时显示的信息

语法格式：

......

</noframe>

表单<form></form>

语法格式：

....

</form>

method有两种提交方式get,post

action 是指明处理该表单的程序位置，这样表单所填的资料才能传给cgi做处里，可设定此参数为action="mailto:lwr8494@163.com"这样此表单所填的资料将会发送到这个邮箱地址。

method 是指传送信息给cgi等网络程序的方式。可选post方法，get方法，post方法容许传送大量信息。get方法只接受低于1k的信息。

申请表单用的是post搜索引擎用的是get

input元素

语法格式：<input type="">

type属性的可选值有：

text 单行文本框

属性：name 文本框名称

value 文本框的初始值

size 文本框的长度

maxlength 可输入字符串最大的长度

radio 单选框

属性：name 单选框名称

value 内部值

checked 默认选定

checkbox 复选框

属性：name 复选框名称

value 内部值

checked 默认选定

reset 重置按钮

submit 确定按钮

属性：name 按钮名称

value 显示在按钮上的文字

password 密码框

属性与文本框的属性完全相同

file 文件域

属性：name文件域名称

size 文件域的长度

maxlength 文件域可接受的字符数量的上限

hidden 隐藏域

属性：name 隐藏域名称

value 内定值

image 图片域

属性：name 所要代表的按钮，可以是submit,reset,或其他.

src 按钮图片的url地址

列表框<select>

语法格式：

.....

.....

</select>

select元素

语法格式：<select name="" size=""multiple></select>

name 指定列表框的名字

size 指定列表框显示列表项的条数，如果指定了该参数，select元素是个列表，否则是一个下拉列表框

multiple 指定了这个参数，则表示该列表框可选择多项，否则只可选择一项

option属性

语法格式：<option value="" selected></option>

value 该列表项的值

selected 如果设定了这个参数，默认为选定这一项

多行文本框<textarea>

属性：

name文本框的名称

cols文本框的宽度

rows文本框的高度

wrap文本框的折行方式可选值有：

off不保存换行信息

physical强迫浏览器在发送信息到web服务器端时必须将多行文本框的文字一行一行的送出，

virtual送出连续成串的字除非使用者按回车。

css 层叠样式表

引入层叠样式表的方法包括：

1，外联式样式表

2，内嵌样式表

3，元素内定

4，导入样式表

外联式样式表

例：<head>

</head>

<body>

....

</body>

</html>

属性：rel 用来说明<link>元素在这里要完成的任务是连接一个独立的css文件。而href属性给出了所要连接css文件的url地址

内嵌式样式表：

例：<html>

<head>

<!--

td{font:9pt;color:red}

.font105{font:10.5pt;color:blue}

-->

</style>

</head>

</html>

元素内定

格式：<p style="font-size:10.5pt">

导入式样式表

〈html>

<head>

<!--

@import url(css/home.css);

-->

</style>

<body>

....

</body>

</html>

css的优先级

越接近目标的样式定义优先级越高，高优先级样式将继承低优先级样式的未重叠定义但覆盖重叠的定义

如果4种样式表对同一元素定义了不同的样式，那么他们的优先级顺序从高到低是，元素内定，内嵌样式表，导入样式表，外联样式表。

css结构

例：td{font-size:10.5pt;color:#666666}

css样式包含两个基础部分，

选择符<td>和声明{font-size:10.5pt;color:#666666}

声明也有两部分组成：

属性font-size,color和值10.5pt,#666666

选择符分为6种

1元素选择符

当页面上多个元素的样式相同时，可以将多个元素放在一起定义，中间以逗号分开例：td,p,li,input,select{font-size:12px;}

2class(类)选择符

例：〈head>

<!--

.red{font-size:10.5pt;color:#ff0000}

-->

</style>

</head>

<p class="red">士大夫井冈山地方官</p>

<p>九连环离开计划</p>

</body>

还有一种方法就是限定可以应用它的页面元素

例：〈head>

<!--

h1.red{color:#ff0000}

-->

</style>

</head>

<p class="red">士大夫井冈山地方官</p>

<h1 class="red">九连环离开计划</h1>

</body>

3 id选择符

与class选择附类似，只是把'.'换成'#'

例：<body>

<head>

<!--

#select{font-size:18px;color:#0000ff}

-->

</style>

</head>

<body>

<tr>

<td align="center" id="select">id选择符</td>

</tr>

</table>

</body>

</html>

我们看到在调用ID选择附时与CLASS选择附类似，只是将class=""换成了id=""，方便页面脚本语言的调用

4 关联选择符

<body>

<head>

<!--

td p{font-size:18px;color:#0000ff}

-->

</style>

</head>

<body>

<tr>

<td align="center"><p>关联选择符</p></td>

</tr>

</table>

<p>关联选择符</p>

</body>

</html>

我们设定了在元素中<td>的元素<p>所包含文字的样式，只有在两个条件都满足是，样式在会起作用，

5伪类选择符

是只能用在css选择符里，而不能用在html代码中的选择符

例：

〈html>

<head>

<!--

a:link{color:#000000}

a:visited{color:#cccccc}

a:hover{color:#ff0000}

a:active{color:#ooooff}

-->

</style>

</head>

<body>

<p><a href="#">关联选择符</a><p>

〈/body>

</html>

正确的顺序是a:link\a:visited\a:hover否则会引起页面上连接颜色混乱

6伪元素选择符

与伪类选择符定义类似，目前被大多数浏览器支持的有两个：首行伪元素（first-line）和首字符伪元素(first-letter)是用来实现首行大写和首行下沉效果的

例：首行

<html>

<head>

<style>

<!--

p:first-line{color:red;font-size:20pt}

-->

</style>

</hesd>

<body>

<p>dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...</p>

</body>

</html>

长度随浏览器窗口大小而改变

首字

<html>

<head>

<style>

<!--

p:first-letter{color:red;font-size:50pt;float:left;}

-->

</style>

</hesd>

<body>

<p>dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...</p>

</body>

</html>

以上两种都只能应用于块状元素上

css规则

一继承

例：<html>

<head>

<!--

td{font-size:12pt}

p{color:red}

-->

</style>

</hesd>

<body>

<tr>

<p>css规则</p>

</td>

</table>

</body>

</html>

<p>为最高级<td>次一级两种css用在一个属性元素上，相同的覆盖，不同的继承，

二组合

例:td{font-size:12pt}

p1{font-size:12pt}

组合后

td,.p1{font-size:12pt}

三层叠

在样式里定义过后，在表格属性中又定义一次

<html>

<head>

<!--

red{color:#ff0000 limportant}

-->

</style>

</hesd>

<body>

<tr>

<td align="center" style="color:#0000ff" class="red">决撒地方官</td>

</tr>

</table>

</body>

</html>

css单位

分四大类：

1 长度单位

数值可以是整数，小数，正数，负数，0，后加单位（负值不要轻易使用）

换算关系：

1in(英寸)=6pc(派)

1in(英寸)=72pt(磅)

1in(英寸)=2.54(厘米)

1cm(厘米)=10mm(毫米)

1cm(厘米)=0.3937(英寸)

1pt(磅)=1/72in(英寸)=0.2478mm(毫米)

1pc(派)=1/6in(英寸)=我国新四号铅字的尺寸

2 百分比单位

3 颜色单位

4 url单位

学习课程内容

(一) html语言基础

(二) Dreamever的使用

(三) CSS（级联样式表）

(四) Javascript（语法）

(五) DOM对象模型编程

html的基本知识:

1. html表示超文本标记语言(Hyper Text Markup language)、xml、xhtml、dhtml（Dynamic）

2. html文件是一个包含标记的文本文件

3. 这些标记保浏览器怎样显示这个页面

4. html文件必须以html或者shtml、htm等扩展名，文件保存不能有中文和空格之类

5. html文件可以用一个简单的文本编辑器创建(记事本、Editplus等等)
两个组织:IETF(Internet Engineering Task Force)Internet工程任务组，由网络设计人员、操作员、厂商、专家组成的民间组织，主要负责有关internet的各种技术标准及接口规范的制定。IETF以RFC（Requests for comments，请求注解文档）定名所发布的各类标准与协议，例如：RFC2616(HTTP /1.1)

html历史:html1.0---html2.0(IETF制定)---html4.0(w3c)---html5.0(w3c)
学习html要经常去的网站

http://www.w3school.com.cn/

http://www.w3c.com

http://www.ietf.org/

HTML标记：
HTML标记是HTML文档的控制语言，用来告诉浏览器应该如何显示一页文档。它用”<”和”>”括起来。例如：<html>

HTML标记的写法：

单标记------只需要单独使用就能完整的表达意思。

写法:<标记名>
例如:<br/>

双标记------由“开始标记”和“结束标记”两部分组成

写法：<标记>内容</标记>

例如：<html></html>、<font></font>

标记属性------一个标记，为了明确它的功能，往往用一些属性参数来描述。属性是标记的选项，在标记中修饰，用于进一步控制网页内容的显示效果。例如：颜色、对齐方式、高度、宽度和字体等。

写法:<标记名属性1=属性值1 属性2=属性值2属性3=属性值3>

例如：<hr width=”100” size=”5” color=”#ddeecc”>

标记的书写规则：标记字母大小写都可以的，但为便于阅读，通常采用小写
例如：<body bgcolor=”#ff0000”> <BODY BGCOLOR=”#DDEECC”>

HTML的基本标记:看实例1.html

html标签之文本格式:

1) 标题标签<hn>:看实例hn.html
n的取值范围从1-6.每个标题标记所标示的字句将独占一行且上下留一空白行

2) 换行标签<br>、<nobr>和<p>：看实例br.html
<br/>标签是令其后的内容换一行，浏览器会自动忽略源代码中的空白和换行的部分，因此对需要换行的地方加上<br/>标签就可以了.
<p></p>是段落标签，使用该标签来进行段落划分，不同的段落之间会自动换行并有一定的距离。
<nobr></nobr>是不换行

3) 预定义格式<pre>:例如:pre.html
作用：使浏览器将按照编辑文档时<pre>和</pre>标记之间字符的位置将内容毫无变化的显示出来

4) 文本格式标签:<font>内容</font>看实例font.html
属性有face、size、color、

5) 常用文字标签：见 font_ziti.html

6) 定位标签<div>:
可以让文字表格图片等摆放在任意的位置

7) Html注释语句
基本格式: <!- - -注释语言 - - ->

8) 特殊字符(更多字符见html支持的符号.doc)例: teshu_fuhao.html
< (<) > (>) ® (注册商标) & (&) (空格)
© (copyright) ™(商标^TM) &quto; (“)

9) 鼠标的形状：shubiao.html

Html列表格式:

1) 有序列表<ol>:liebiao.html
基本格式:<ol><li><li></ol>
<ol>称为有序列表标记
其属性:
<ol type=”i” start=”4”></ol> type=”i”设定数字序列样式，其值有五种：1、a、A、i、I,默认为type=”1”
start=”4”设定数字序列的起始值
<li>用以标示列表项目
<li>的属性:
例如：<li type=”i” value=”4”>
type=”4”设定数字序列样式，取值同ol的type属性

2) 无序列表:
基本格式:<ul><li></li></ul>
<ul>的属性设定:例如<ul type=”square”>,type设定符号样式，
其值有三种：disc(列项符号，通常是非嵌套列表默认值)
circle(列项符号，通常是嵌套列表默认值)
square(列项符号，实心或空心的方块取决浏览器)

3) 定义列表
定义列表是一种在表的各项前没有任何数字和符号的缩排列表
基本格式：
        <dl>
           <dt>第一项</dt>.<dd>叙述第一项的定义</dd>
           <dt>第二项</dt>.<dd>叙述第二项的定义</dd>
         </dl>

文件之间的链接：

1) 超级链接标签:<a href=”资源地址” target=”_blank” title=””>链接文字</a>
.href属性定义了链接指向的地方
.target属性决定链接到的文件在哪个框架或窗口中显示
.title属性设定在浏览器中鼠标指向链接时显示的提示文本

2) URL资源地址可以分为:绝对ＵＲＬ和相对ＵＲＬ两类
（１）绝对ＵＲＬ：包含标识internet上的文件所要的全部信息，包含协议、主机名、文件夹名和文件四项。例如：http://hi.baidu.com/baidu/.一般情况下，外部的资源使用绝对ＵＲＬ。
（２）相对URL:可以分四种
①同一文件夹中的文件，直接写文件名即可.
      <a href=”file2.html”>
    ②下级文件夹中的文件，要加上文件夹名称
      <a href=”images/Music.png”></a>
      ③上级或兄弟文件夹中的文件，使用”..”表示移到上一级目录,
      例如:兄弟目录:<a href=”../ch/test.html”>
           上级目录:<a href=”../index.html”>
      ④直接从服务器根目录开始指定文件夹和文件名;例如：<a href=”/ch/test.html”>

3) Target连接目标
有_blank、_self、_parsent、top、框架名

4) 锚连接和邮件连接
邮件连接:<a href=mailto:xszlt@21cn.>联系我们</a>
锚连接制作方法:
(1)为被链接的部分做一个记号，为该记号起名(使用name属性).例如:<a name=”记号名称”></a>
(2)在调用此链接部分的文件中定义连接.例如:
<a href=’文件名#记号名称”>连接的文字</a>如果是在同一个文件内跳转，文件名可以省略

5) 实例:（1）link.html与shige.html或者a_href.html与a.html

图像标签：实例img.html

图像标记:基本格式<img>,是单独使用的标记，用于控制图像的显示.

例如：<img src=”” width=”100” height=”100” hspace=”5” vspace=”5” border=”2” align=”top” alt=”蝴蝶图片”>

align=”top”设置图像的对齐方式;

水平方向的对齐方：left和right

垂直方向的对齐方式(图文馄排时非常有用)：
top：表示文字与图像顶部对齐
bottom：表示文字与图像底部对齐
middle：表示文字与图像中不对齐

hspace：设定图像与其水平方向相邻页面元素之间的距离

vspace：设定图像与其垂直方向相邻页面元素之间的距离（使用pixels做为单位）
图片链接：<a href=”资源地址”><img src=”test.png”></a>

在网页中插入音频和视频

将音乐做成超链接：
<a href=”音乐地址”>乐曲名</a>
例如：<a href=”midi.mid”>MIDI音乐</a>
自动载入音乐:
<embed src=”音乐文件地址”>
autostart=true/false
loop=true/false

startme=”分:秒”设定乐曲的开始播放时间，例如20秒后播放:startme=00:20
volume=0-100 设定音量的大小
width height 设定控制面板的大小
hidden=true 隐藏控制面板
视频格式同音频类似.

marquee标签的使用

2) align:设定滚动字幕的位置，除左、中、右三种位置外，还有靠上(top)和靠下(bottom)
bgcolor:用于设定滚动字幕的背景颜色
direction:用于设定滚动字幕的滚动方向
behavior:用于设定滚动的方式：scroll表示由一端滚动到另一端
slide表示由一端快速滑动到另一端且不再重复
alternate表示在两端之间来回滚动
hspacre和vspace:分别用于设定滚动字幕的左右边框和上下边框的宽度
scrollamount:设定滚动字幕的滚动距离
scrolldelay设定滚动两次之间的延迟时间
loop：用于设定滚动的次数

metal元素:

1) meta标签是一个非常常用的标签，它可以用于鉴别作者，设定页面格式，标注内容提要和关键字以及刷新页面等等

2) 基本语法：
<meta http-equiv=response content=description charset=charset name=descriptin url=url>

3) 定义字符集
<meta http-equiv=”content-type”content=”text/html;charset=gb2312”.>

4) 搜索引擎相关
通过一下语句向搜索引擎说明你网页的关键词
<meta name=”keywords” content=”网页的关键词”>
通过以下语句向搜索引擎说明你站点的主要内容：
<meta name=”description” content=”网页的简述”>

5) 禁用缓存
<meta http-equiv=”expires” content=”0”>缓存为零
<meta http-equiv=”Pragma” content=”no-cache”>代理服务器上缓存
<meta http-equiv=”Expires” content=”sun,24 may2009”>设置页面过期时间

6) 设置页面以改变url
<meta http-equiv=”refresh” content=”1:url=www.baidu.com”>

7) 设置一些版权信息
<meta name="generator" cntent="Editplus">

8) 例子:

表格标签的使用：

基本格式：

<table>

</table>

常用属性设置:bordercolorlight边框明亮部分的颜色
bordercolordark边框昏暗部分的颜色

cellspacing 单元格之间的间距
cellpadding 单元格与内容之间的间距
colspan=”5”该一单元格跨越的列数
rowspan=”4”该一单元格跨越的行数

例如：<table width=”400” width=”200” border=”1” cellspacing=”2” cellpadding=”2” align=”center” background=”” bgcolor=”#0000FF” bordercolor=”#CF0000” bordercolorlight=”#00FF00” bordercolordark=”#00FFFF”>

控制表格边框的显示：

Frame=”void” 不显示表格边框

Frame=”above” 只显示表格的上边框

Frame=”below” 只显示表格的下边框

Frame=”hsides” 只显示表格的上下边框

Frame=”vsides” 只显示表格的左右边框

Frame=”Ihs” 只显示表格的左边框

Frame=”rhs” 只显示表格的右边框

控制表格行与列之间的分割线：rules

1） rules=”none” 表示不加内部边框；不显示任何分割线

2） rules=”rows” 表示只显示水平方向的边框；只显示行与行之间的分割线

3） rules=”cols” 表示只显示垂直方向上的边框；只显示列与列之间分割线

4） rules=”all” 则是显示所有方向上的边框；显示所有分割线（默认）

使用表单

每一个表单都有一个让用户提交表单的按钮，当用户单击该按钮时，表单中所填写的信息将发送到一个用于处理用户表单信息的服务器端应用程序。（动态脚本语言：PHP、JSP、ASP、。NET、CGI等等），从而完成信息的交互。
一个表单有三部分组成：
表单标记：提交给服务器端处理程序的提交方法
表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等等。
表单按钮：包括提交按钮、复位按钮和一般按钮
常用的表单标记:

2) 密码框
当输入信息时，文字被星号或者其他符号代替，从而将输入的信息隐蔽起来。
代码格式：<input type=”password” name=”pw” size=”” maxlength=””>

3) 隐藏域
隐藏域是用来收集或者发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的，但有时候需要传递一些信息,来标记信息的不同
代码格式：<input type=”hidden” name=”” value=””>

4) 单选框
当访问者在一组选项中选择唯一的答案时，需用单选框。
代码格式:<input type=”radio” name=”…” value=”…”>

5) 复选框
复选框允许在待选项中选中一项以上的选项，每一个复选项框都是一个独立的元素，都必须有一个唯一的名称
代码格式：<input type=”checkbox” name=”” value=””>

6) 下拉选择框/滚动列表框
下拉选择框允许你在一个有限的空间设置多种选项：
代码格式：multiple属性可以进行多项选择
<select name=”…” size=”…” multiple>
<option value=”1” selected>…</optin>

</select>

7) 多行文本框
能让访问者填写文字较多的内容
代码格式:
<textarea name=”” cols=”” rows=”” warp=”VIRTUAL”></textarea>
warp:off用来避免文本换行，当输入的内容超过文本域右边界时，文本将向左滚动必须用return才能将插入点移到下一行
physical让文本换行，当数据被提交处理时换行符也将被一期提交处理

8) 文件上传框
代码格式：<input type=”file” name=”” size=”15” maxlength=””>

9) (image)图像提交按钮
代码格式：<input type=”image” name=”submit” align=”center” src=””>

框架的使用

1) 框架是一种页面布局技术，通过使用框架结构的页面，可以在一个浏览器窗口中同时显示多个页面

2) 框架的主要有两部分组成：框架集和单个框架组成。

3) 基本标记：
<frameset></frameset>把主窗口换分成一组框架，每个框架显示一个独立的文档
<frame></frame>在<frameset>内定义单个框架
<noframes></noframes>在此标记中包含的文字将指出现在不支持frames的浏览器中

4) 创建内嵌的框架标记：<iframe>
<iframe>的作用是在网页中间插入一个窗口以显示另一个文件，称为业内框架。
iframe标记可以插入到<body></body>之间而frameset不可以
例如：
<iframe src=”note.html” name=”test” align=”middle” width=”300” height=”100” marginwidth=”1” marginheight=”1” frameborder=”1” scrolling=”yes”>
marginwidth=”1” marginheight=”1”:该插入的文件与框边所保留的空间
frameborder=”1”使用1表示显示边框
scrolling=”yes”设定是否要显示滚公条,yes表示要显示滚动条，no表示不显示滚动条

细说HTML标签

2010年7月26日

9:29

■ 细说HTML标签

在HTML语法中，大致上可以分为：

网页架构：主要网页主架构的介绍

分隔标签：也就是所谓的水平线

排版标签：针对标签的属性，可做适当的版面编排

字体标签：教导您设定文字的字体。

文字标签：教导您设定文字的颜色、行距、变化.....等等。

影像标签：教导您如何在网页中，植入图像。

背景标签：教导您如何设定背景颜色或是背景图像。

链接标签：教导您如何设定超链接，以及开视窗的条件。

表格标签：教导您如何在网页中运用表格。

序列标签：教导您如何设定文字序列或图形序列。

表单标签：教导您如何制作可填写用的表单。

框架标签：可让同一个视窗由多个网页一起组成。

其他技巧：让您的整个网页背景可以让您设定为图片或是声音。

4.1 网页架构 <回细说索引>

<HTML>

<HEAD>

<TITLE>工具啦网页制作教学</TITLE>

<Meta>

</HEAD>

<BODY>

BODY之间则为主要语法所在，也是网页的主要呈现部分。

</BODY>

</HTML>

【标签解说】

以上看到的就是一篇最简单架构的网页。没错，网页其实就是一堆标签（所谓标签就是指被<>包起来的语法）集合起来的，透过浏览器的消化整理，就便成了美仑美奂的网页了。

简单而言，通常一份完整的网页包含了二个部份：抬头（HEAD）、文件本体（BODY）。也就是各位在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。

在抬头的部份<HEAD></HEAD>中，有另一组标签<TITLE></TITLE>。打在<TITLE></TITLE>这里面的文字会出现在浏览器视窗最上头蓝色部份里，当作一篇网页的主题。

您可能会发现，为什么我一直没提到<HTML></HTML>这一组标签，嗯！因为它可有可无。这一组标签是告诉浏览器说：我是一份HTML文件喔！也就是说它是一个网页的格式啦！通常都包在网页的最上下两端，将所有的原始码都包起来。

4.2 分隔标签 <回细说索引>

【文字上的分隔标签】

或许你已经发现这个问题了：天啊！我不是在记事本里排版排得很漂亮，为何透过浏览器看起来一切都走了样？对啊！别太讶异，在网页的编排里，并不像汉书或WORD一样，只要拼命按Enter键或空白键，便能完成分段或分行，因为，HTML语言是不认识我们所谓的Enter键或空白键，所以不管您按了多少次的空白或Enter，浏览器都会当作没看见啦！

使用方法：强制断行标签<br>、强制分段标签<p>

标签解说：我们在写文章时，有时候在特定的地方会强迫断行（<br>），或是在写完某一段的时候便会分段（<p>），写网页也一样，而且更需要断行及分段的功能，以免整个网页看起来乱糟糟的。

使用范例：

原始码

呈现结果

这是一个断行的范例<br>看出来了吗？

这是一个断行的范例

看出来了吗？

这是一个分段的范例<p>基本上他会比断行还多空出一行

这是一个分段的范例

基本上分段会比断行还多空出一行

【分隔线标签】

使用方法：上一段文字内容<hr>下一段文字内容

标签解说：利用<hr>这个标签便可产生一条横分隔线。另外，其有些属性分别说明如下：

使用范例：

一般用法

尚未加任何属性。

原始码

普通分隔线<hr>

呈现结果

普通分隔线

颜色属性

用法：<hr color="颜色码或颜色名称">

原始码

橘色分隔线<hr color="#ff8000">

呈现结果

橘色分隔线

宽度属性

用法：<hr width="宽度">，其单位为px（像素），宽度亦可用百分比来作设定，如50%即意为宽度占萤幕50%。

原始码

宽度为240px的分隔线<hr width="240">

呈现结果

宽度为240px分隔线

厚度属性

用法：<hr size="厚度">

原始码

厚度为5的分隔线<hr size="5">

呈现结果

厚度为5分隔线

位置属性

用法：<hr align="水平对齐位置">，其设定值有三个，也就是置左align="left"、置中align="center"、置右align="right"

原始码

靠右的分隔线<hr align="right">

呈现结果

靠右的分隔线

阴影属性

用法：<hr noshade>，无设定值，只要将 noshade 加入即可，通常会配合颜色设定，效果较佳。

原始码

实心分隔线（无阴影）<hr noshade>

呈现结果

实心分隔线（无阴影）

4.3 排版标签 <回细说索引>

【文字置左、置中、置右】

使用方法：老实说，刚刚我们学过的分段标签<p>再加上一些简单的属性设定，就可以让其整个文字段落置左、置中或置右了，就如下表所示：

原始码	呈现结果
<p align="left">文字靠左</p>	文字靠左
<p align="center">文字置中</p>	文字置中
<p align="right">文字靠右</p>	文字靠右

标签解说：嗯！秘诀就在于“align=对齐位置”而已啦！align是分段标签<p>的属性之一，这个属性将来会常常在不同标签中看到，它的功能是专门在设定“水平对齐位置”，其常见的设定值有三个，也就是置左（align="left"）、置中（align="center"）、置右（align="right"）。

【置中标签】

使用方法：<center>这是置中</center>

标签解说：这个标签是最常用到的标签了，除了文字，对于图片、表格，任何可以显现在网页上的东西都可以置中喔！

使用范例：

原始码	呈现结果
<center>这是最中间</center>	这是最中间

【向右缩排标签】

使用方法：<blockquote>要缩排的文字</blockquote>

标签解说：利用<blockquote></blockquote>这个标签可以将其包起来的文字，全部往右缩排。而且加一组标签，往右缩排一单位，加两组标签，往右缩排两单位，依此类推。

使用范例：

原始码	呈现结果
<blockquote>缩排1单位</blockquote>	缩排1单位
<blockquote><blockquote>缩排2单位</blockquote></blockquote>	缩排2单位

【保存原始格式标签】强烈推荐！

使用方法：<pre>文字内容<pre>

标签解说：利用<pre></pre>这个标签可以将其包起来的文字排版、格式，原封不动的呈现出来。算是相当好用的标签之一。

使用范例：

原始码

呈现结果

<pre>

文　字

格　式

</pre>

文　字
格　式

4.4 字体标签 <回细说索引>

【标题标签】

使用方法：<h1>标题内容</h1>

标签解说：标题的大小一共有六种，两个标签一组，也就是从<h1>到<h6>，<h1>最大，<h6>最小。使用标题标签时，该标签会将字体变成粗体字，并且会自成一行。

使用范例：

原始码	呈现结果
<h1>标题一</h1>	标题一
<h2>标题二</h2>	标题二
<h3>标题三</h3>	标题三
<h4>标题四</h4>	标题四
<h5>标题五</h5>	标题五
<h6>标题六</h6>	标题六

【设定字体大小标签】

使用方法：<font size=3>文字内容</font>

标签解说：标题的大小一共有七种，也就是<font size=1>（最小）到<font size=7>（最大），另外，还有一种写法：<font size=+1>文字内容</font>，其意思就是说：比预设字大一级。当然也可以 font size=+2（比预设字大二级），或是font size=-1（比预设字小一级），以一般而言，预设字体多为3。

使用范例：

原始码	呈现结果
<font size=1>字体一</font> 或是 <font size=-2>字体一</font>	字体一
<font size=2>字体二</font> 或是 <font size=-1>字体二</font>	字体二
<font size=3>字体三</font> 或是 <font size=+0>字体三</font>	字体三
<font size=4>字体四</font> 或是 <font size=+1>字体四</font>	字体四
<font size=5>字体五</font> 或是 <font size=+2>字体五</font>	字体五
<font size=6>字体六</font> 或是 <font size=+3>字体六</font>	字体六
<font size=6>字体七</font> 或是 <font size=+4>字体七</font>	字体七

【字型变化标签】

使用方法：<b>文字</b>

标签解说：在文字标签里，对于文字的格式也有相当多的变化，如粗体、斜体...等，此外，也定义了一些现成的格式供编者使用，如‘强调’、‘原始码’...等，当然，这只是方便您参考用，并无强迫说遇到原始码就要加上‘原始码’的标签。

使用范例：

原始码	呈现结果
<b>粗体</b>	粗体
<i>斜体</i>	斜体
<u>底线</u>	底线
<sup>上标</sup>	^上标
<sub>下标</sub>	_下标
<tt>打字机</tt>	打字机
<blink>闪烁</blink>（ie没效果）	闪烁
<em>强调</em>	强调
<strong>加强</strong>	加强
<samp>范例</samp>	范例
<code>原始码</code>	原始码
<var>变数</var>	变数
<dfn>定义</dfn>	定义
<cite>引用</cite>	引用
<address>所在地址</address>	所在地址

【文字颜色设定】

使用方法：<font color="#fefecb">文字颜色</font>

标签解说：文字也可以设定颜色喔！至于颜色有哪些....这....哪天我心血来潮再来做个色彩对应表吧！

使用范例：

原始码	呈现结果
<font color="#ff0000">红</font>	红色的字喔！
<font color="#ff8000">橙</font>	橙色的字喔！
<font color="#ffff00">黄</font>	黄色的字喔！
<font color="#00ff00">绿</font>	绿色的字喔！
<font color="#0080ff">蓝</font>	蓝色的字喔！
<font color="#0000a0">靛</font>	靛色的字喔！
<font color="#8000ff">紫</font>	紫色的字喔！
<font color="#000000">黑</font>	黑色的字喔！
<font color="#c0c0c0">灰</font>	灰色的字喔！

4.5 文字标签 <回细说索引>

【文字字型设定】

使用方法：<font face="字型名称">文字</font>

标签解说：网页上也可以使用字型喔！唯一的一个限制是：对方也要有该字型！否则看到的仍然还是宋体。另外要说明的是，这个标签并无法保证在每个浏览器上都能正常的显现，不过这并没有关系，看不到特殊的字型时，浏览器仍会以宋体来显示，所以不用怕会一团乱！
另外，如果您的网页中有加上这一行叙述<meta http-equiv="content-type" content="text/html;charset=big5">（指定网页的语言格式，以后我会解释），那么，netscape可以正确显示出中文，但英文无反应。若没有加该行，那么英文会正确显示，但中文却仍是宋体。至于ie 系列，均能正常显示。

使用范例：

原始码	呈现结果
<font face="楷体_GB2312">楷体_GB2312</font>	楷体_GB2312
<font face="华康俪中黑">华康俪中黑</font>	华康俪中黑

【特殊字元】

使用方法：

标签解说：很多特殊的符号是需要特别处理的，比如说" < "、" > "这两个符号若想要呈现在网页上是没有办法直接打" < "的，要呈现" < "必须输入编码表示法：“<”，常用的如下：

使用范例：

原始码	呈现结果
	( 代表一个不断行空白)
<	<
>	>
&	&
"	"

【设定文字内定值大小】

使用方法：<basefont size="1~7">

标签解说：这个标签可以改变文字大小的内定值，直接加在<body>标签之后就行了。一般而言，若是没有特别设定，文字大小内定值预定值为3。

4.6 影像标签 <回细说索引>

【影像标签】

在使用影像标签时有两件事值得注意一下，一是档名，二是路径。首先要注意的就是，档名是否正确以及大小写是否一致！图档名称不正确，任电脑再厉害也找不到您要的图，档名大小写不一致，如Image.gif、image.gif、image.GIF在自己的电脑中看都能正确的显示，但是一但传到网路上去时，因为系统不一样的关系（电脑伺服器的作业系统可比个人用电脑的作业系统严谨多了）就变成三个不一样的档案了，所以，可别忽略档名大小写不一致的影响。

另外一个就是路径问题了，这个问题也不难，我们在稍后会提到。我们先来看看影像的标签如何写。

使用方法：<img src="boy.gif" alt="本站特约模特儿" align=right border=0 hspace=2 vspace=2 height=56 width=32>

标签解说：目前常见的网页图形格式有两种就是gif及jpg两种格式。gif格式只有256色，不过色彩比较鲜艳干净漂亮，适合电脑美工图案。而jpg格式的图案是全彩失真压缩，比较适合一大堆颜色的图片，如照片就较适合用jpg格式来呈现。

使用范例：

基本用法

用法：<img src="图档名称、路径">

显示图片最基本的方法（就是不加任何属性啦！）其中 boy.gif 就是图档的档名。

原始码

<img src="http://www.tool.la/logo/logo2.gif">嗨！我是本站的模特儿喔！

呈现结果

嗨！我是本站的模特儿喔！

长宽设定

用法：<img src="图档" height="高度" width="宽度">

设图片的大小，其实不用设也可以，但是有设更好，可以加快浏览速度，因为浏览器就不用在那边花时间算您的图片有多大啦！此外您也可以自己随意设定图片大小。

原始码

呈现结果

加上说明

用法：<img src="图档" alt="说明文字">

滑鼠一到图上时，说明文字就会自动出现。此外，在图片未显示出来或显示不出来时，也会以这一段字代替，让使用者知道这个未显示出来的图片究竟是干嘛用的。

原始码

<img src="http://www.tool.la/logo/logo2.gif" alt="本站特约模特儿">移到图上看看。

呈现结果

移到图上看看。

图片位置	用法：<img src="图档" align="位置"> 图片位置设定！可以靠左放：align=left、靠上align=top、靠下align=bottom、垂直置中align=middle，其中靠左放可以造成‘文绕图’的效果。
原始码	<img src="http://www.tool.la/logo/logo2.gif" align=right>嗨！我往右边靠！
呈现结果	嗨！我往右边靠！
原始码	<img src="http://www.tool.la/logo/logo2.gif" align=left>嗨！我往左边靠！
呈现结果	嗨！我往左边靠！
原始码	<img src="http://www.tool.la/logo/logo2.gif" align=top>文字对齐我头顶！
呈现结果	文字对齐我头顶！
原始码	<img src="http://www.tool.la/logo/logo2.gif" align=bottom>文字对齐我脚底！
呈现结果	文字对齐我脚底！
原始码	<img src="http://www.tool.la/logo/logo2.gif" align=middle>文字对齐我中间！
呈现结果	文字对齐我中间！
原始码	<img src="http://www.tool.la/logo/logo2.gif" align=absmiddle>文字对齐我绝对中间！
呈现结果	文字对齐我绝对中间！

边框设定

用法：<img src="图档" border="边框粗细">

设定边框大小，通常都设成 0 感觉比较美观啦！因为内定的框框实在是不怎么漂亮....。尤其在链接时，设框框简直是丑毙了...。

原始码

呈现结果

左右间距

用法：<img src="图档" hspace="离左右物件的距离">

离文字的水平距离，通常多少也设一点，以免靠文字太近，看起来才不会有太挤的感觉。

原始码

左边的字<img src="http://www.tool.la/logo/logo2.gif" hspace="15">右边的字

呈现结果

左边的字

右边的字

上下间距

用法：<img src="图档" vspace="离上下物件的距离">

离文字的垂直距离，通常多少也设一点，以免靠文字太近，看起来才不会有太挤的感觉。

原始码

上面的字<br><img src="http://www.tool.la/logo/logo2.gif" vspace="15"><br>下面的字

呈现结果

上面的字

下面的字

由于此网页有用css控制版面图文，故在netscape下观看，会稍有不正确。

【网页影像重要观念】

关于路径：现在我们来谈谈图片路径的事，路径不对，不管您的网页名称写的多正确也没用，因为浏览器无法寻着您的路径去找到该有的图片，所以，我们来看看该如何正确的使用路径。有些人并不喜欢将网页及图通通放在同一个目录下，比如说有人将图档全放在c:\images里，而网页档放在c:\demo里，这样子的话，我们该如何正确的写图片的路径呢？我将几种常见的情形整理成下表：

html档的位置	图档的位置	写法	情形说明
c:\demo	c:\demo	<img src="logo.gif">	图文均在同一目录
c:\demo	c:\demo\images	<img src="images/logo.gif">	图在网页下一层目录
c:\demo	c:\	<img src=" ../logo.gif">	图在网页上一层
c:\demo	c:\images	<img src="../images/logo.gif">	图文在同一层但不同目录

或许有人看到不明就理，我来说明一下，“../”是回到上一层目录的意思。“images/”则是进入下一层目录image之意，而“../images/”的意思就是，回到上一层目录，然后再进入目录images中。以上我们使用的均为“相对路径”的概念。

影像单位：或许您会常常看到px这个单位，没错，这是我们在制作最常用的一个单位了。这个单位完整的写法是“pixels”，我们称之为“像素”。像素，是萤幕上的一个小光点，然而这一小光点的大小，并非是固定的，举个例子而言，萤幕本身十五寸，不会因为你的任何设定而变成十七寸。但是，其解析度是可以改变的，我们常见的解析度有以下几种：“640×480”、“800×600”、“1024×768”。举其中之一的640×480来说，其代表的就是在萤幕上有宽640个光点，高有480光点，若是我们将解析度调整为800×600其宽势必要从640变成800个光点，也因此，该光点便会变小一点，所以，我们看起来就会觉得解析度调高后，萤幕内的东西，变得小小的，很精致，那就是因为光点变小的原因。

影像格式：网页用的图档目前只有gif格式（即副档名为gif的图档，如：bg.gif）以及jpg格式（即副档名为jpg的图档，如：bg.jpg）为一般的浏览器所接受。其他如bmp格式或是pcx格式都是无法在网页上使用的，若非得要用，那就利用影像绘图软体来作格式的转换吧！

图档范例	说明
	gif格式的图形只能以256个颜色显示，虽然其色彩较少，但颜色鲜艳亮丽，若是图形颜色不多，用gif格式存档会较漂亮。
	jpg格式的图形是以全彩显示，适合用在相片或是渐层颜色的图片上，压缩比例以75%为适中。

4.7 背景标签 <回细说索引>

【背景标签】

说穿了，背景标签只有<BODY>这个标签，其余的效果，只要加上一些简单的属性便可做到。

使用方法：<body bgcolor="#ffffff" background="bg.jpg">

标签解说：这个标签其实应该老早就要讲了，毕竟它是构成网页不可或缺的基本要素之一。我们背景颜色或图片的设定以及链接字体的颜色，通通都放在<body>这标签里面。我就其属性来一一解说：

背景颜色

用法：<body bgcolor="颜色码">

设定背景颜色。有人会说：‘我已经设定了背景图片，那背景颜色还有用吗？’当然有用！当使用者链接到贵站时，若背景图案还没传输完之前（有的背景图蛮大的），就会先显现背景颜色，您说，是不是比一片灰灰的好看多了呢！

原始码

<html>

<head>

</head>

这里是本文区

</body>

</html>

背景图案

用法：<body background="图档名称、路径">

g设定背景图案。图档可以是jpg或gif格式的图档，我建议：图档不要太大，否则网页载入会蛮慢的。

原始码

<html>

<head>

</head>

这里是本文区

</body>

</html>

【内文、链接文字颜色设定】

使用方法：<body text="#000000" link="#0000ff" vlink="#ff00ff" alink="#ff0000>

标签解说：用字体标签中的颜色属性，可以设定文字的颜色，不过，却没有提到文字的颜色内定值该如何修改，这个<body>标签中，便有设定内文、链接等文字的颜色内定值功能。用法如下：

内文颜色

用法：<body text="颜色码">

设定一般文字颜色，也就是说，若没有特别去设定文字颜色的话，浏览器就会自动显现您所设定的颜色。

原始码

<html>

<head>

</head>

这里是本文区

</body>

</html>

链接颜色

用法：<body link="颜色码">

设定“链接”的颜色。只要是有链接的地方就会出现你指定的颜色，当然，如果按下链接后，那又会变成另一个颜色了，这底下会说明。

原始码

<html>

<head>

</head>

</body>

</html>

链接时颜色

用法：<body alink="颜色码">

设定“按下链接”的颜色，也就是当您滑鼠按下那链接的瞬间所呈现的颜色。

原始码

<html>

<head>

</head>

<a href="index.htm">链接中文字</a>

</body>

</html>

已链接颜色

用法：<body vlink="颜色码">

设定“按下链结后”的颜色，也就是如果该链接已经有被按过了，那么就会呈现的颜色。如此的做法，是要让使用者容易识别到底哪些链接有去过了，哪些没去过。

原始码

<html>

<head>

</head>

</body>

</html>

4.8 链接标签 <回细说索引>

【WWW链接标签基本概念】

链接基本概念：一般而言，所谓链接就是，在网页中有些字会有特别的颜色，而且字的底下会有条线，当游标移到那些字上时，会变成手指形状，按下去，则会连到别的文章或网站，就像这样（以上这段是给超级新手看的...）。
扯到链接，最基本来看有‘内部链接’及‘外部链接’，所谓‘内部链接’就是自己网站间网页的链接，至于外部链接我们稍后再来讨论。
要了解内部链接，首先必须先了解一下这两种东西，一个是‘相对路径’，一个是‘绝对路径’。
现在假设一个情形：我们在自己的电脑里设计网页，所有网页相关的档案我们通通放在 c:\www 里面，现在假设 c:\www里面目前有 index.htm、 text1.htm、 p1.gif、 p2.gif这四个档案。ok！
现在我们想在 index.htm 里面设一个链接，能够按一下就连到text1.htm，那我们该怎么做呢？基本上，有两种方式可以做到，在index.htm 里面加上下面任一叙述：

<a href="/c\|/www/text1.htm">	这就是‘绝对路径’
<a href="text1.htm">	这就是‘相对路径’

瞧出什么端倪了没有？嗯嗯....没错，‘绝对路径’要给电脑一个非常详尽的位置，让电脑寻着这路径去找到档案。而‘相对路径’就简单多啦！如果没有特别指定，他就会直接在 index.htm 的所在目录下找，也就是在 c:\www 底下去找text1.htm。

如果说，今天我们将 c:\www 里所有的档案都上传到网路上的网页伺服器（总不能做好了只给自己看吧！），且该伺服器是别人的电脑，而非你自己架设的主机，那么问题就来了！你猜，哪一种链接会出问题？呵呵...答案是‘绝对路径’，您猜对了吗？

为什么说‘绝对路径’会出问题呢？因为，当您将档案上传到网路上时，您的整个网页目录架构一定会变，到时候，电脑可能找不到 c:\ （尤其是unix系列的主机）更可能找不到 www 这目录（有些会规定要放在特定的目录下才能显示网页），所以说，没事的话，尽量用‘相对路径’来作链接吧！好写又不容易出错。

另外一个情形是：为了整理方便，有些网友喜欢将图档通通放到同一个目录下，如：c:\www\gif\ 底下放进了p1.gif 、 p2.gif两个图，而index.htm 、 text1.htm 依旧在 c:\www 底下。现在我们想在 index.htm 下设个链接到 p1.gif 这图档（链接不限于只能连html档，图档、文字档均可），那我们又该如何来使用‘相对路径’呢？他们又不在‘同一个目录’下...？

<a href="/c\|/www/gif/p1.gif">	这是‘绝对路径’的写法
<a href="gif/p1.gif">	这是‘相对路径’的写法

如何？不难吧！（只是字有点多，看到脑子发胀！）

总整理：很乱吗？嗯...看看这表，或许会清楚些。

相对路径表示方式	代表链接位置
<a href="text1.htm">	text1.htm在目前的目录中（就例子而言，就是在c:\www中）
<a href="docs/text1.htm">	text1.htm在名为docs的次目录中（就本例而言，就是在c:\www\docs中）
<a href="../text1.htm">	text1.htm在目前目录的上一层目录中（就本例而言，就是在c:\底下了）

【网页内部的链接】

使用方法：

先在欲链接处作记号：<a name="here1">这里是你想链接的点</a>

设定链接：<a href="#here1">链接</a>

标签解说：有时候，当某页的内容很多时，我们可以利用网页的内部链接，来使使用者快速的找到资料。其原理不过是：在欲链接处做个记号（网页的任何地方都可以喔！），然后，链接时就寻这记号，就可以快速找到资料。很简单吧！

使用范例：

范例	第一步骤	第二步骤
www链接标签基本概念	<a name="m1">欲链接的位置</a>	<a href="#m1">www链接标签基本概念</a>
网页内部的链接	<a name="m2">欲链接的位置</a>	<a href="#m2">网页内部的链接</a>
网页外部的链接	<a name="m3">欲链接的位置</a>	<a href="#m3">网页外部的链接</a>

【网页外部的链接】

标签解说：链接到外面去，可以扩充您网站的实用性及充实性，也正因这功能，才造就了www五彩缤纷的世界。由于网路上的服务五花八门，所以不同的服务有不同的链接方法，我将之整理在下表。

使用范例：

网站链接	好站	<a href="http://www.tool.la">好站</a>
电子邮件链接	写情书给我	<a href="mailto:tool@jzba.com">写情书给我</a>
ftp链接	下载档案	<a href="ftp://www.tool.la">下载档案</a>
news链接	seednet news服务	<a href="news:news.tool.la">seednet news服务</a>
gopher链接	seednet gopher服务	<a href="gopher://www.tool.la/">seednet gopher服务</a>
bbs链接	seednet gopher服务	<a href="telnet://bbs.tool.la/">seednet bbs服务</a>

【链接标签的参数】

使用方法：在链接后面加入 target=_参数

标签解说：链接的参数并不多，常见的大概就属 target 这参数了，target的意思是‘目标’，也就是网页链接的指向目标，这参数在框窗（frame）里尤为重要！

使用范例：

target=框窗名称：
这在‘框架标签’中也有提到，而且也只有在框架（框窗 or frame）中才用得到。正常而言，框窗有各自的名称，因此，我们可以利用此标签，来指定链接的内容显示到哪一个框窗中。

target=_blank：
将链接的画面内容，开在新的浏览视窗中。

target=_parent：
将链接的画面内容，当成文件的上一个画面。

target=_self：
将链接的画面内容，显示在目前的视窗中。

target=_top：
这个参数可以解决新链接的画面内容，被旧框窗包围的困扰，使用这参数，会将整个画面重新显示成链接的画面内容。

4.9 表格标签 <回细说索引>

【网页中的表格观念】

举个例子来说，如果今天我们要做一个3栏2列的表格，在WORD中，只要设定表格为3栏、2列就完成了，不过，在网页中做一个3栏2列的表格，可是要分成好几个步骤的，第一个步骤，利用<TABLE></TABLE>标签告诉电脑我要做一个表格；第二个步骤，利用一组<TR></TR>标签先做一个横列，然后在横列中利用三组<TD></TD>标签再分出三栏；第三个步骤，重复第二个步骤，再做一横列然后再分三栏，如此才能得到一个3栏2列的表格。听不太懂吗？没关系，以下咱们就来慢慢的看个仔细：

首先我们来看一个最简单的表格：

原始码

呈现结果

</TABLE>

利用<TABLE>这个标签来告诉电脑，这是一个表格，至于 BORDER=1 这参数是设定此表格的框线粗细为 1。一组<TR></TR>是设定一横列的开始。一组<TD></TD>则是设定一个栏位。当然，文字就是要摆在这里面。

现在我们再来增加二个格子：

原始码

呈现结果

</TABLE>

看见没有，<TR></TR>没有增加，<TD></TD>却增加了二组。那如果我要再加上一列呢？很简单，就像这样：

原始码

呈现结果

</TABLE>

1	2	3
4	5	6

【合并表格栏位】

并非所有的表格都是规规矩矩的只有几栏、几列而已，有时候，我们还会希望能够“合并栏位”，让表格更美观、更实用一点，而谈到“合并栏位”，我们就必须知道，合并的方向有两种：一种是上下合并（也就是横列间的合并），一种是左右合并（也就是直栏间的合并），这两种合并方式各有不同的属性设定方法。

左右栏位合并：基本上，您的表格已经学会啰！接下来，咱们就来看看，如何将 1、2、3格通通合并变成一大格：

原始码

呈现结果

</TABLE>

1
4	5	6

您应该会发现，怎么2、3都消失了？只剩下1，而且该栏的<TD>标签还多了一个陌生的脸孔COLSPAN="3"，没错，这就是“左右栏位合并”的属性，COLSPAN="3"的意思就是“这个栏位左右横跨了3个栏位”，也正因如此，本来的两个<TD>都可以省掉了，因为都被并掉了嘛！

上下栏位合并：学会了左右合并！接下来，咱们就来看看，如何上下合并，将 1、4格通通合并变成一大格：

原始码

呈现结果

</TABLE>

1	2	3
	5	6

有了上一次的经验后，我们就知道，要合并栏位就一定有些栏位会被“牺牲”掉（也就是那些被合并的栏位啦！），这次我们要“上下合并”，我们将1与4合并成一个栏位，那么被牺牲的是哪一个栏位呢？没错就是下面那一个倒楣的4，我们看看上图，果然4已经删掉了，而在1的<TD>标签中则多了个生面孔ROWSPAN，这就是“上下栏位合并”的属性，ROWSPAN=2的意思就是“这个栏位上下连跨了2个栏位”，其结果如下：

【表格栏位对齐位置设定】

我可以自己设定表格的大小吗？当然可以，您可以自由设定表格的“宽”及“高”喔！我们来制作一个宽100、高60的表格，做法如下：

原始码

呈现结果

</TABLE>

哎呀！怎么 1 老是在表格的左边呢？可以弄到中间吗？当然可以，只要在<TD>加入ALIGN=CENTER 这参数即可：

原始码

呈现结果

</TABLE>

此外，利用 ALIGN=RIGHT可以让表格中物件置右、利用 ALIGN=LEFT可以让表格中物件置左（预设值），至于为什么要加在<TD>中呢？因为，<TD>是一个栏位的意思，我们要指定在这栏位中的东西要置中或置左置右，就必须将ALIGN加在<TD>中。

既然可以置中，那么也可以控制表格内文字靠上方、靠下方吗？可以的，只要利用 VALIGN=TOP这种属性即可让表格内物件靠上方对齐。

原始码

呈现结果

</TABLE>

利用VALIGN=MIDDLE可以让表格中物件垂直置中（预设值），VALIGN=BOTTOM可以H让表格中物件靠下方。

【表格背景、底色设定】

那么表格可以设定底色吗？可以的不但表格可以，您也可以指定某栏或某列的颜色，方法和加背景颜色一样，利用BGCOLOR="颜色码"就行了。底下是指定整格表格背景颜色的方法：

原始码

呈现结果

</TABLE>

1	2
3	4

将BGCOLOR="颜色码"加在<TR>中，可以指定“一列”的背景颜色：

原始码

呈现结果

</TABLE>

1	2
3	4

将BGCOLOR="颜色码"加在<TD>中，可以指定“一栏”的背景颜色：

原始码

呈现结果

</TABLE>

1	2
3	4

表格除了可以设定底色外，也可以用图片来作背景吗？当然可以，方法一样简单，只要将BACKGROUND="图片名称"加到表格中就行了。和表格背景颜色一样，不但表格可以设定背景图片，您也可以指定某栏或某列的背景图片：

原始码

呈现结果

</TABLE>

1	2
3	4

将BACKGROUND="图片名称"加在<TD>中，可以指定“一栏”的背景颜色：

原始码

呈现结果

</TABLE>

1	2
3	4

【表格框线设定】

如何设定表格粗细？只要利用BORDER="粗细值"就行了。

原始码

呈现结果

</TABLE>

如何设定表格颜色？只要利用BORDERCOLOR="颜色码"就行了。

原始码

呈现结果

</TABLE>

另外，我们也可以设定表格的阴影、亮面颜色，让表格看起来更有立体感喔！只要利用 BORDERCOLORLIGHT="#颜色码"（亮面设定）BORDERCOLORDARK="颜色码"（暗面设定）就行了。

原始码

呈现结果

</TABLE>

【表格栏距设定】

我们可以利用CELLPADDING属性自由设定表格内文距离格线的距离，这个属性很好用，保持适当的距离，看起来比较舒服。一般而言内定值为2，不过我建议设定为4比较漂亮。

原始码

呈现结果

</TABLE>

我们可以利用CELLSPACING属性设定表格栏位格线之间的距离。一般而言内定值为2，不过我通常习惯设为0 。

原始码

呈现结果

</TABLE>

4.10 序列标签 <回细说索引>

【无序标签】

序列标签基本上可分为两种，一种是“无序条列”，一种是“有序条列”。所谓“无序条列”当然就是意指各条列间并无顺序关系，纯粹只是利用条列式方法来呈现资料而已，此种无序标签，在各条列前面均有一符号以示区隔。至于“有序条列”就是指各条列之间是有顺序的，从1、2、3…一直延伸下去。

我们先来看看“无序列表标签”如何使用：

原始码

呈现结果

<UL>

<LI>姓名：张三

<LI>生日：12/13

<LI>星座：射手座

</UL>

姓名：张三

生日：12/13

星座：射手座

其中<UL>标签即为“无序列表标签”，每增加一列内容，就必须加一个<LI>。

前面的符号一定是要圆形的吗？不，我们可以加入TYPE="形状名称"属性来改变其符号形状，一共有三个选择：DISK（实心圆）、SQUARE（小正方形）、CIRCLE（空心圆）三种（由于本页使用CSS故仅于Netscape看得出效果。）：

原始码

呈现结果

<LI>姓名：张三

<LI>生日：12/13

<LI>星座：射手座

</UL>

· 姓名：张三

· 生日：12/13

· 星座：射手座

【有序标签】

o 接下来，我们来看看“有序列表标签”如何使用：

原始码

呈现结果

<OL>

<LI>姓名：张三

<LI>生日：12/13

<LI>星座：射手座

</OL>

· 姓名：张三

· 生日：12/13

· 星座：射手座

其中<OL>标签即为“有序列表标签”，每增加一列内容，就必须加一个<LI>。

o 和无序列表标签一样，我们也可以选择不同的符号来显示顺序，一样是用TYPE属性来作更改，一更有五种符号：1（数字）、A（大写英文字母）、a（小写英文字母）、I（大写罗马字母）、i（小写罗马字母）等五种：

原始码

呈现结果

<LI>姓名：张三

<LI>生日：12/13

<LI>星座：射手座

</OL>

姓名：张三

生日：12/13

星座：射手座

o 另外，我们亦可指定序列起始的数目，其方法如下：

原始码

呈现结果

<LI>姓名：张三

<LI>生日：12/13

<LI>星座：射手座

</OL>

姓名：张三

生日：12/13

星座：射手座

【定义列表标签】

o 接下来我们要说明的这个标签，是“定义列表标签”也是属于序列标签之一。我们先来举个例子，我们常常会在文章中看见这样的格式：

CSS（Cascading style sheet）

CSS是由W3C于1996年12月所公布的一项新技术，什么叫做Cascading style sheet？简单说来他是一种具有阶层性的形式设定，能够让网页设计者在设计网页时，对于网页上的任何物件均有更佳的操控性…

网页里也有可以做到这种效果的标签喔！现在要来跟各位说的就是这个标签。咱们先来看看这标签的用法：

o 我们先来看看“定义列表标签”如何使用：

原始码

呈现结果

<DL>

<DT>小标题

<DD>标题的内容说明

</DL>

小标题

标题的内容说明

4.11 表单标签 <回细说索引>

【表单的用途】

对于一般的网页设计初学者而言，表单功能其实并不常用，因为表单通常必须配合着CGI、JAVA Script程式或是ASP程式来运作，不然表单单独存在的意义并不大。不过，一旦有机会将表单运用到网页中时，您的网页将摆脱单向呈现，而开始迈入和使用者互动的阶段喔！

本单元纯粹以介绍各式表单为主，至于一些CGI或ASP观念在此我就不提出了，因为提供零碎的观念，倒不如去看看专门介绍CGI的书籍来的妥当。

【各种输入类型】

文字输入列：每个表单之所以会有不同的类型，原因就在于TYPE="表单类型"设定的不同而已，我们就先来看看第一个类型：文字输入列。文字输入列的形态就是TYPE="TEXT，其使用方法如下：

呈现结果

姓名：

原始码

<FORM>

姓名：<INPUT TYPE="TEXT" NAME="NAME" SIZE="20">

</FORM>

其有下列可设定之属性：

NAME="名称"，是设定此一栏位的名称，程式中常会用到。

SIZE="数值"，是设定此一栏位显现的宽度。

VALUE="预设内容"，是设定此一栏位的预设内容。

ALIGN="对齐方式"，是设定此一栏位的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、ABSBOTTOM（绝对置下）等。

MAXLENGTH="数值"，是设定此一栏位可设定输入的最大长度。

单选核取表单：利用TYPE="RADIO"就会产生单选核取表单，单选核取表单通常是好几个选项一起摆出来供使用者点选，一次只能从中选一个，故为单选核取表单。

呈现结果

性别：男女

原始码

<FORM>

性别：

男 <INPUT TYPE="RADIO" NAME="SEX" VALUE="BOY">

女 <INPUT TYPE="RADIO" NAME="SEX" VALUE="GIRL">

</FORM>

其有下列可设定之属性：

o NAME="名称"，是设定此一栏位的名称，程式中常会用到。

o VALUE="内容"，是设定此一栏位的内容、值或是意义。

o ALIGN="对齐方式"，是设定此一栏位的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、ABSBOTTOM（绝对置下）等。

o CHECKED，是设定此一栏位为预设选取值。

o 复选核取表单：利用TYPE=" CHECKBOX "就会产生复选核取表单，复选核取表单通常是好几个选项一起摆出来供使用者点选，一次可以同时选好几个，故为复选核取表单。

呈现结果

喜好：电影看书

原始码

<FORM>

喜好：

<INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="MOVIE">电影

<INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="BOOK">看书

</FORM>

其有下列可设定之属性：

o NAME="名称"，是设定此一栏位的名称，程式中常会用到。

o VALUE="内容"，是设定此一栏位的内容、值或是意义。

o CHECKED，是设定此一栏位为预设选取值。

o 密码表单：利用TYPE=" PASSWORD "就会产生一个密码表单，密码表单和文字输入表单长得几乎一样，差别就在于密码表单在输入时全部会以星号来取代输入的文字，以防他人偷窥。

呈现结果

请输入密码：

原始码

<FORM>

请输入密码：<INPUT TYPE="PASSWORD" NAME="INPUT">

</FORM>

其有下列可设定之属性：

o NAME="名称"，是设定此一栏位的名称，程式中常会用到。

o SIZE="数值"，是设定此一栏位显现的宽度。

o VALUE="预设内容"，是设定此一栏位的预设内容，不过呈现出来仍是星号。

o MAXLENGTH="数值"，是设定此一栏位可设定输入的最大长度。

o 送出按钮：通常我们表单填完之后，都会有一个送出按钮以及清除重写的按钮，分别是利用TYPE=" SUBMIT "及TYPE=" RESET "来产生，相当的简单易用。

呈现结果

原始码

<FORM>

</FORM>

其有下列可设定之属性：

o NAME="名称"，是设定此一按钮的名称。

o VALUE="文字"，是设定此一按钮上要呈现的文字，若是没有设定，浏览器也会自动替您加上“送出查询”、“重设”等字样。

o 按钮元件：表单中或是JAVA SCRIPT常会用到按钮来作一些效果，因此，我们可以利用TYPE=" BUTTON "来产生一个按钮，相当简单。

呈现结果

请按下按钮：

原始码

<FORM>

请按下按钮：<INPUT TYPE="BUTTON" NAME="OK" VALUE="我同意">

</FORM>

其有下列可设定之属性：

o NAME="名称"，是设定此一按钮的名称。

o VALUE="文字"，是设定此一按钮上要呈现的文字。

o 隐藏栏位：表单中有时有些东西因为某些因素，不想让使用者看到，但因程式需要却又不得不存在，此时，我们就可以利用TYPE=" HIDDEN "来产生一个隐藏的栏位。

呈现结果

隐藏栏位：

原始码

<FORM>

隐藏栏位：<INPUT TYPE="HIDDEN" NAME="NOSEE" VALUE="看不到">

</FORM>

其有下列可设定之属性：

o NAME="名称"，是设定此一栏位的名称。

o VALUE="文字"，是设定此一栏位的值、文字或意义。

【大量文字输入元件】

o 有时候我们会希望让使用者输入比较大量的文字，此时，文字输入列就显得不敷使用，因此我们就可以利用<TEXTAREA></TEXTAREA>来产生一个可以输入大量文字的元件，夹在两个标签中的文字会出现在框框中，可作为预设文字。

呈现结果

请输入您的意见：

原始码

<FORM>

请输入您的意见：<BR>

</FORM>

其有下列可设定之属性：

o NAME="名称"，是设定此一栏位的名称。

o WRAP="设定值"，是设定此一栏位的换行模式。设定值有三种：OFF（输入文字不会自动换行）、VIRTUAL（输入文字在萤幕上会自动换行，不过若是使用者没有自行按下ENTER换行，送出资料时，也视为没有换行）、PHYSICAL（输入文字会自动换行，送出资料时，会将萤幕上的自动换行，视为换行效果送出）。

o COLS="数值"，是设定此一栏位的行数（横向字数）。

o ROWS="数值"，是设定此一栏位的列数（垂直字数）。

【下拉式选单】

o 下拉式选单令整个网页看起来有很专业的感觉，我们只要利用<SELECT NAME="名称">便可以产生一个下拉式选单，另外，还需要配合<OPTION>标签来产生选项，这样才算完整喔！

呈现结果

您喜欢看书吗？：

原始码

<FORM>

您喜欢看书吗？：

<OPTION VALUE="非常喜欢">非常喜欢

<OPTION VALUE="还算喜欢">还算喜欢

<OPTION VALUE="不太喜欢">不太喜欢

<OPTION VALUE="非常讨厌">非常讨厌

</SELECT>

</FORM>

其有下列可设定之属性：

o SIZE="数值"，是设定此一栏位的大小，预设值为1，若是您的选项有四个，然后您将SIZE设成4，那么，下拉式选单便会变成选项方块，将四个选项一起呈现在方块中。

o MULTIPLE，是设定此一栏位为复选，可以一次选好几个选项。

4.12 框架标签 <回细说索引>

【框架的基本概念】

o 首先，各位先看看右手边这张图，我将利用这张图来作解说，这样子，讲起来可能会清楚一点。OK！我们可以看见，右边的这个视窗，一共分为1 、2 、3 三个框架，每一个框架，各有其显示的内容分别是a.htm、b.htm、c.htm三个档案。然而左下角的那个index.htm 是做什么用的呢？

o 原来，左下角的这个档案 index.htm，就是要告诉电脑，我们要将画面分割成这样，也就是说，所有Frame的标签，其实都只摆在index.htm 这个档案里。（当然，不是档名一定要叫做 index.htm取其他档名也是可以的。）

o 这样明白了吗？总之，您要分割几个框框，就一定会有几个对应的html档案（假如您要分割100个框框，就要有100个html档就对了。），另外，还会多一个档案是来告诉电脑要如何分割的。（也就是例中的index.htm 档啦！）

【开始分割】

o 别急、别急，分割视窗可是一门学问，要分割也是要一步一步来的。看看刚刚那例子，想像画面是一个蛋糕，你要怎么割，才能割成那样呢？

原始码

呈现结果

<HTML>

<HEAD>

</HEAD>

</HTML>

o 各位会发现，奇怪，在上面的语法中，怎么都没见到<BODY></BODY>熟悉的身影？呵呵...没错，它已经被待会儿要加进去的<FRAMESET></FRAMESET>标签给取代了！也就是说，如果我们要分割画面，就要先用<FRAMESET>标签告诉电脑说：‘喂！我要开始分割了！’此时，<BODY>是派不上用场的，所以躲到一旁凉快去了！

o 现在开始动手割割看啰！我们先将画面分成左右两边（左边就是框窗 1 了，右边就暂定为 2 等一下还要分割呢！），如下图：

原始码

呈现结果

<HTML>

<HEAD>

</HEAD>

</FRAMESET>

</HTML>

在<FRAMESET>中，我们要告诉电脑到底是要左右分（COLS）？还是上下分（ROWS）。一开始我们是左右分，所以我们写成<FRAMESET COLS="120,*" >。COLS="120,*"就是说，左边那一栏强制定为 120点，右边则随视窗大小而变。除了直接写点数外，我们亦可用百分比来表示，例如COLS="20%,80%"也是可以的。

然后，再将右边的框窗再割成上下两个画面（也就是框窗 2 和 3 了）。如下图：

原始码

呈现结果

<HTML>

<HEAD>

</HEAD>

</FRAMESET>

</HTML>

看见了没？原本的<FRAME SRC="b.htm" NAME="2">（在第3 点的语法中）被另一组<FRAMESET ROWS="100,*" >所取代了！所以要注意喔！第二组<FRAMESET ROWS="100,*" >是被第一组<FRAMESET COLS="120,*" >所包围起来的喔！（乱七八糟了对不对？）

呵呵...不知不觉就大功告成了，其实只要将最后完成的那些语法存成index.htm，然后再准备三个档a.htm 、b.htm、c.htm那么就完工啰！当然，这是一个最阳春的分割法，我会再将一些进阶的标签在底下一一说明。

【其他标签参数说明】

COLS="120,*"
就是垂直切割画面啦！你可以一次切成左右两个画面，当然也可以切成三个，很简单只要写成 COLS="30,*,50" （数字随便您自己调整啦！），依此类推，四个以上当然就是四组数字啦！

ROWS="120,*"
就是横向切割画面，也就是将画面上下分开，切法同上。

frameborder=0
设定框架的边框，其值只有 0 和1 ，0 就是不要边框，1 就是要显示边框。边框是无法调整粗细的。

framespacing=5
表示框架与框架间的保留空白的距离，以免看起来太挤。

SRC="a.htm"
设定此框架中要显示的网页名称，每个框架一定要对应一个网页，否则就会产生错误，这里就是要您填入对应网页的名称。（如果该网页在不同目录，记得路径要写清楚）

NAME="1"
设定这个框架的名称，这样才能指定框架来作链接，所以一定要设定喔！当然名称随你高兴取名。

frameborder=0
设定框架的边框，其值只有 0 和1 ，0 就是不要边框，1 就是要显示边框。边框是无法调整粗细的。

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

noresize
设定不让使用者可以改变这个框框的大小，如果没有设定这个参数，使用者可以很容易的拉动框架，改变其大小。

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

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

【相关用法】

◆ <noframe>

使用方法：<noframe>请换有支援Frame功能的浏览器</noframe>

标签解说：有些浏览器较为老旧，无法显示Frame的功能，因此，就要使用此标签，让这些网友知道，该换换浏览器了。或者，你也可以在这标签中，摆上没有Frame语法的网页标签，那么，没有支援Frame功能的浏览器，便会自动显示没有Frame语法的网页。

◆ target=框窗名称

使用方法：<A HREF="d1-1.htm" target=3>显示内容</A>

标签解说：常常有一个情况是，我想在框窗 1 的地方按下链接，但是希望他的内容出现在框窗 3中（请参照上面那个图），那应该如何写呢？就像上面加个 target=框窗名称就行啦！

◆ target=_top

使用方法：<A HREF="http://www.kimo.com" target=_top>奇摩站</A>

标签解说：有时候，在框窗里会链接到别的站，却发现，新链接的这个站，竟然被框窗包住了，不但难看，而且可能会吃上官司说！所以，这时候你必需加入 target=_top这个参数，那么，这个新连到的网站，就会重新占据整个萤幕啦！

4.13 其他技巧 <回细说索引>

■ 网页配色及背景音乐

首先是网页的底色，通常是白白的，要怎么做变化呢？可以做自己的背景图片。

要注意一点，如果背景和文字颜色一样～或者颜色相近，天啊～那谁知道你在写什么呀？最好文字与背景颜色有对比，像敝人当初，网页背景是黑的，字是白的红的，就可以很明显的突显出文字。如果图片中有文字，也要尽量淡化，否则影响内容就不好啰！

内容的东西颜色要配的适宜（除非你想要有奇怪的风格），不然像背景大红大红，太刺眼了，有人会想去吗？剩下的就让您自己配配看吧！

然后是音乐，有人喜欢用bgsound标签

可是用NetScape看就没有声音了最好用embed标签 <embed src="music.mid">

这样就可以正常播放了唷～

■ 首页应有的特质及重要性

About Open Page：打开browser看到网站的第一个部份，有人称之为Open Page(通常是首页的一半或三分之一)，这个部份应该包含网站的主功能(亦即使用者上这个网站最希望或者最可能做的事)，ex.一进入Allproducts.com即可看到“Key word search”及“Search by category”，应该尽量避免让使用者还要使用mouse上下左右拉才能看到他(她)所想要的功能或资讯，有时资讯太多，在不得已的情况下，页面可以往下沿申，但切忌右左划面过大，不符一般人的使用习惯，也会造成列印上的困扰。

主题明确：Open Page应包含公司Logo、网站主题(最好是一段简短的Slogan，让使用者一看就知道这个网站主要功能或架站目的,ex. Allproducts.com上的The world's best products directory for volume buyers)

Navigation：让使用者很明确了解他(她)目前在网站的什么地方(或功能)，首页上应该有主要功能的链接，各个icon如果可能的话，尽可能加上一些纯文字的说明及link；至于icon或者link的摆放亦应有其相对应的逻辑，如与整个网站或大架构较为相关的，放在较外层，与目前执行的功能或页面较为相关的link应该放在内层；另外，最好能在首页上提供Site Map的链接，让使用者可以很快了解网站的架构；所有的link应该把握intuitive , obvious , fast的原则。

Color or image：对于颜色的采用，应该考虑到该网站的特性及与其它相关网站的区别，特别是首页的颜色配置，应该让使用者感觉很舒服、没有压迫感，但又不失其专业性，但切忌过度追求美感而牺牲其功能性，就公司目前的网站设计理念，应该是功能性的考量优于纯美术的考量，首页的设计最好设定在60k以内，而且不要用太多层的table。

Meta tag：该部份不会出现在前端的页面上，但网站规划时应该将该部份一并考量，做为网站登录时使用，网站上线时务必将相关资料加入。

其它：首页上应该有service account 及联络资料

■ Meta Tag 的简介

一般常用的格式如下：

<Title>All Products Online</title>
这虽说不是meta的一部份，但是也不可忽略，总长度不要超过85个Character (约10个字)。

回到顶部

源文档 <http://www.tool.la/HtmlTeach/>

神秘人998

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTM基本内容

SQL续day_170629: 应用dept表：应用emp表： IN 操作符 IN 操作符允许我们在 WHERE 子句中规定多个值。SQL IN 语法:SELECT column_name(s)FROM table_nameWHERE column_name IN (value1,value2,...) example:
复制链接

扫一扫