神秘人998

HTM基本内容

什么是HTML

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

HTML是什么样的

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

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

点击查看效果

第一个Html文档

欢迎访问脚本之家!

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

标签用于包含整个文档的一般信息，比如文档的标题（标签用于包含标题），对整个文档的描述，文档的关键字等等。文档的具体内容就要放在<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>当前分类内容列表...</div> </div> 在这种情况下，最后出现的标签应该最先结束。 HTML文档里所有的空白符（空格，Tab，换行，回车）会被浏览器忽略，唯一的例外是空格，对空格的处理方式是所有连续的空格被当成一个空格，不管有一个，还是两个，还是100个。之所以有这样的规则是因为忽略空白符能让使用HTML的作者以他觉得最方便的格式来排列内容，比如可以在每个标签开始后增加缩进，标签结束后减少缩进。由于英语文本中空格用得很普遍（用于分隔单词），所以对空格做了这样的特殊处理。如果要显示连续的空格（比如为了缩进），应该用 来代表空格。 常用标签介绍 文本 最常用的标签可能是了，它用于改变字体，字号，文字颜色。 点击查看效果 6 4 红色的5 黑体">黑体的字 加粗，下划线，斜体字也是常用的文字效果，它们分别用,,表示： 点击查看效果 Bold italic underline 还有一些标签，用来指出包含的文本有特殊的意义，比如<abbr>（表示缩写），（表示强调），（表示更强地强调）,<cite>（表示引用），<address>（表示地址）等等。这些标签不是为了定义显示效果而存在的，所以从浏览器里看它们可能没有任何效果，也可能不同的浏览器对这些标签的显示效果完全不同。 一篇很长的文章，如果有合适的小标题的话，就可以快速地对它的内容进行大致的了解。在HTML里，用来表示标题的标签有：<h1>,<h2>,<h3>,<h4>,<h5>,<h6>，它们分别表示一级标题，二级标题，三级标题... 点击查看效果 <h1>HTML 30分钟教程</h1> <h2>什么是HTML</h2> ... <h2>HTML是什么样的</h2> ... 图片 <hr>标签用于在页面上添加横线。可以通过指定width和color属性来控制横线的长度和颜色。 点击查看效果 <hr width="90%" color="red" /> <img>标签用于在页面上添加图片，src属性指定图片的地址，如果无法打开src指定的图片，浏览器通常会在页面上需要显示图片的地方显示alt属性定义的文本。 点击查看效果 <img src="http://www.w3.org/Icons/valid-xhtml10" alt="图片简介" /> 链接 超级链接用<a>标签表示，href属性指定了链接到的地址。<a>标签可以包含文本，也可以包含图片。 点击查看效果 <a href="http://deerchao.net">Unibetter大学生论坛</a> <a href="http://validator.w3.org"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="验证HTML" /></a> 分段与换行 由于HTML文档会忽略空白符，所以要想保证正常的分段换行的话，必须指出哪些文字是属于同一段落的，这就用到了标签。 点击查看效果 这是第一段。 这是第二段。 也有人不用，而用 。 只表示换行，不表示段落的开始或结束，所以通常没有结束标签。 点击查看效果 这是第一段。 这是第二段。 这是第三段。 有时，要把文档看作不同的部分组合起来的，比如一个典型的页面可能包括三个部分：页头，主体，页脚。<div>标签专门用于标明不同的部分： 点击查看效果 <div>页头内容</div> <div>主体内容</div> <div>页脚内容</div> 表格 HTML文档在浏览器里通常是从左到右，从上到下地显示的，到了窗口右边就自动换行。为了实现分栏的效果，很多人使用表格（<table>）进行页面排版（虽然HTML里提供表格的本意不是为了排版）。 <table>标签里通常会包含几个<tr>标签，<tr>代表表格里的一行。<tr>标签又会包含<td>标签，每个<td>代表一个单元格。 点击查看效果 <table> <tr> <td>2000</td><td>悉尼</td> </tr> <tr> <td>2004</td><td>雅典</td> </tr> <tr> <td>2008</td><td>北京</td> </tr> </table> <tr>标签还可以被<table>里的<thead>或<tbody>或<tfoot>包含。它们分别代表表头，表正文，表脚。在打印网页的时候，如果表格很大，一页打印不完，<thead>和<tfoot>将在每一页出现。 <th>和<td>非常相似，也用在<tr>里边，不同的是<th>代表这个单元格是它所在的行或列的标题。 点击查看效果 <table> <thead> <tr><th>时间</th><th>地点</th></tr> </thead> <tbody> <tr><td>2000</td><td>悉尼</td></tr> <tr><td>2004</td><td>雅典</td></tr> <tr><td>2000</td><td>北京</td></tr> </tbody> </table> 列表 表格用于表示二维数据（行，列），一维数据则用列表表示。列表可以分为无序列表（<ul>），有序列表（<ol>）和定义列表（<dl>）。前两种列表更常见一些，都用<li>标签包含列表项目。 无序列表表示一系列类似的项目，它们之间没有先后顺序。 点击查看效果 <ul> <li>苹果</li> <li>桔子</li> <li>桃</li> </ul> 有序列表中各个项目间的顺序是很重要的，浏览器通常会自动给它们产生编号。 点击查看效果 <ol> <li>打开冰箱门</li> <li>把大象赶进去</li> <li>关上冰箱门</li> </ol> 框架 最后谈一下框架，曾经非常流行的技术，框架使一个窗口里能同时显示多个文档。主框架页里面没有<body>标签，取代它的是<frameset>。 <frameset>标签的属性Rows和Cols用于指定框架集(frameset)里有多少行（列），以及每行（列）的高度（宽度）。 <frameset>标签可以包含<frame>标签，每个<frame>标签代表一个文档（src属性指定文档的地址）。 如果觉得这样的页面还不够复杂的话，还可以在<frameset>标签里包含<frameset>标签。 点击查看效果 <frameset rows="15%,*"> <frame src="top.html" name=title scrolling=no> <frameset cols="20%,*"> <frame src="left.html" name=sidebar> <frame src="right.html" name=recipes> </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>标题字(最小) ...粗体字 ...粗体字(强调)（同上效果略同） ...斜体字 ...斜体字(强调) <dfn>...</dfn>斜体字(表示定义) ...底线 <ins>...</ins>底线(表示插入文字) <strike>...</strike>横线 <s>...</s>删除线 <del>...</del>删除线(表示删除) <kbd>...</kbd>键盘文字 <tt>...</tt> 打字体 <xmp>...</xmp>固定宽度字体(在文件中空白、换行、定位功能有效) <plaintext>...</plaintext>固定宽度字体(不执行标记符号) <listing>...</listing> 固定宽度小字体 ...字体颜色 ...最小字体 ’font-size:100 px’>...无限增大 <!>区断标记 <hr>水平线 <hr size=’9’>水平线(设定大小) <hr width=’80%’>水平线(设定宽度) <hr color=’ff0000’>水平线(设定颜色) (换行) ...水域(不换行) ...水域(段落) <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> 用来显示电子邮箱地址 粗体字 <BASE TARGET> 指定超连结的分割视窗 <BASEFONT SIZE> 更改预设字形大小 <BGSOUND SRC> 加入背景音乐 <BIG> 显示大字体 <BLINK> 闪烁的文字 <BODY TEXT LINK VLINK> 设定文字颜色 <BODY> 显示本文 换行 <CAPTION ALIGN> 设定表格标题位置 <CAPTION>...</CAPTION> 为表格加上标题 <CENTER> 向中对齐 <CITE>...<CITE> 用於引经据典的文字 <CODE>...</CODE> 用於列出一段程式码 <COMMENT>...</COMMENT> 加上注解 <DD> 设定定义列表的项目解说 <DFN>...</DFN> 显示"定义"文字 <DIR>...</DIR> 列表文字标签 <DL>...</DL> 设定定义列表的标签 <DT> 设定定义列表的项目 强调之用 任意指定所用的字形 设定字体大小 <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> 文件的开始与结束 斜体字 <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> 条列文字标签 <meta NAME="REFRESH" CONTENT URL> 自动更新文件内容 <MULTIPLE> 可同时选择多项的列表栏 <NOFRame> 定义不出现分割视窗的文字 <OL>...</OL> 有序号的列表 <OPTION> 定义表单中列表栏的项目 设定对齐方向 分段 <PERSON>...</PERSON> 显示人名 <PRE> 使用原有排列 <SAMP>...</SAMP> 用於引用字 <select >...</select > 在表单中定义列表栏 显示小字体 <STRIKE> 文字加横线 用於加强语气 下标字 上标字 <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> 打字机字体 文字加底线 <UL TYPE>...</UL> 无序号的列表 (可指定符号 ) <var>...</var> 用於显示变数 BlockQuotc文本缩进 表示颜色的有三种方式； 1，16进制颜色代码 语法：#RRGGBB 例：红色 2，10进制RGB码 语法：RGB（RRR，GGG，BBB） 例：红色 3,直接用颜色的英文名称 例：红色 <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〉为段落标记，可利用以上属性对整个段落进行设置 〈br>为换行标记 为不换行标记放在文字两边即可 例：<body> <h3>江南逢李龟年</h3> 歧王宅里寻常见 催九堂前几度闻 正是江南好风景 落花时节又逢君 </body> 预格式化： <pre>......</pre> 浏览是效果和编写是效果格式一样 列表分为 1无序列表又称符号列表 语法格式： <ul type="">type的属性可选直disc实心圆点,clrcle空心圆点,square实心方框 <li>文字</li> <li>文字</li> </ul> 2有序列表 语法格式： <ol type="?" start"?"> <li>文字</li> <li>文字</li> </ol> type的值是编号字符可选的有1...,a...,A...,i... ,I... start为起始值例：如果start为3是那么将从3开始，而且必须是数字。 3定义列表 <dl>定义列表标记 <dt>标示定义条目 <dd>标示定义内容 语法格式： <dl> <dt>文字</dt> <dd>文字内容</dd> </dl> 连接和图像 语法格式： <a href="url" name="?" target="?" title="?">....</a> 属性：href 连接目标值可以是url地址也可以是连接锚点 <a href="url">...</a>或者 <a href="锚点">...</a> name 连接名称 语法格式：<a name="锚点名称">...</a> 例：<a name="abcdcf">...</a> 连接到该锚点的连接则应是： <a name="#abcdef">....</a> target目标窗口 语法格式： <a href="url" target="_blank|_self|_farent|_top|windowname">....</a> -blank打开新窗口 _self当前窗口打开 一下两个仅在框架叶面中应用 _parent当前窗口的父级窗口（上一级）打开 _top在最高一级的窗口打开 windowname已命名的窗口或框架中打开连接 title连接提示 <a href="http://www.crazytribe.net" title="打开狂人部落的首页">狂人部落</a> 图像<img> 语法格式：<img src="url" alt="?" width="?" height="?" border="?" align="?"> border属性定义图片边框的宽度，默认值为0 align属性设置图片旁边文字的位置 语法格式：<img src="" align""> 可选值有： top图片和文字顶部对齐 middle图片和文字居中对齐 bottom图片和文字底边对齐（默认） left图片居左对齐，文字沿图片绕排 right图片居右对齐，文字沿图片绕排 absmiddle图片对齐到目前文字行绝对中央 absbottom图片对齐到目前文字行绝对底部 文字的排版 不换行空白标记 font元素 语法格式： 字体名称" size="字体大小" color="字体颜色"> 字体大小可选值为1——7，默认为3 例：〈font face="黑体" size="4" color="#ff00ff">.... 水平线<hr> 语法格式：<hr width="宽度" align="对齐方式默认居中center" size="水平线厚度默认为2" color="颜色" noshade> noshade无阴影，既实线 层〈div>两种元素 <div>是块级元素，和段落元素相似，不同的是两个<div>元素之间不会产生两个元素之间的空行， 是行内元素，可以定义段落中部分文字的属性 语法格式： <div align="" style="">...</div> align设置层中元素的水平对齐方式 stule设置元素应用css规范的属性 <div>兼容性比要好一点，最好使用<div> 表格 语法格式： <table width="" bgcolor="" background="" border="" cellspacing="" cellpadding=""> <tr>...<td>....</td>....</tr> </table> border边框宽度默认值为0，既没有边框 cellspacing表格中单元格的边距大小，默认值为两个像素 cellpadding表格中单元格之间的间距大小，默认值为两个像素 tr元素 语法格式： <tr align="" bgcolor="">....</tr> align属性对齐方式可选值如下：left,center,tight,默认为left bgcolor指定该行的背景颜色 td元素 语法格式： <td width="宽度" height="高度" align="水平对齐方式" valign="垂直对齐方式" bgcolor="" background="" rowspan="单元格的行跨度" colapan="单元格的列跨度">.....</td> align属性的可选值有：left,center,right valign属性的可选值有：top,middle,bottom rowspan和colapan跨行和跨列的数量，默认为1 框架 <frameset></framset>框架组标记 <frame></frame>框架标记 语法格式： <frameset> <frame></frame> <frame></frame> </franeset> <frameset></frameset>元素（双标签） 语法格式： <frameset cols="" rows="" frameborder="" border="" framespacing=""> ....... </frameset> 属性： cols 垂直切割窗口（如左右分割两个窗口）接受整数值，百分数，*（*代表占用余下空间）数值的个数代表分成的部分数目，要以逗号分隔。例：cols="30,*,50%"可以切成三个视窗，第一部分是30像素（pixels）为绝对分割，第二部分是当分配完第一和第三视图后剩下的空间，第三部分则占整个窗口的50%宽度，为相对分割。 rows 就是横向切割，将窗口上下分开，数值设置同上。 以上两属性尽量不要在同一个<frameset>标记中，因为王井（netscape）不支持，尽量采用多重分割。 frameborder 设置框架的边框，其值有0不要边框，1要边框。 border 设置框架边框厚度 framespacing 表示框架与框架间保留空白的距离 frame 元素（单标签） 语法格式： <frame name="" src="url" scrolling="yes/no" noresize> 属性： name 框架名称，指定框架来做连接的目标窗口。 src 框架中要显示的网页文当url地址，每个个框架要对应一个html文挡。 scrolling 是否显示滚动条，yes/no,auto是自动。 noresize 设置不让使用者改变这个框架的大小， noframe元素 指定当使用了框架的页面在不支持框架的浏览器中打开时显示的信息 语法格式： <noframe> ...... </noframe> 表单<form></form> 语法格式： <form action="url" method="get/post"> .... <input type=submit><input type=reset> </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> ..... <option>....</option> ..... </select> select元素 语法格式：<select name="" size=""multiple></select> name 指定列表框的名字 size 指定列表框显示列表项的条数，如果指定了该参数，select元素是个列表，否则是一个下拉列表框 multiple 指定了这个参数，则表示该列表框可选择多项，否则只可选择一项 option属性 语法格式：<option value="" selected></option> value 该列表项的值 selected 如果设定了这个参数，默认为选定这一项 多行文本框<textarea> <textarea name="" cols="" rows="" wrap="off/physical/virtual"></textarea> 属性： name文本框的名称 cols文本框的宽度 rows文本框的高度 wrap文本框的折行方式可选值有： off不保存换行信息 physical强迫浏览器在发送信息到web服务器端时必须将多行文本框的文字一行一行的送出， virtual送出连续成串的字除非使用者按回车。 css 层叠样式表 引入层叠样式表的方法包括： 1，外联式样式表 2，内嵌样式表 3，元素内定 4，导入样式表 外联式样式表 例：<head> <link rel="stylesheet" href="/css/default.css"> </head> <body> .... </body> </html> 属性：rel 用来说明<link>元素在这里要完成的任务是连接一个独立的css文件。而href属性给出了所要连接css文件的url地址 内嵌式样式表： 例：<html> <head> <style type="text/css">  </style> </head> <body>....</body> </html> 元素内定 格式： 导入式样式表 〈html> <head> <style type="text/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> <title>.....

士大夫井冈山地方官

九连环离开计划

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

例：〈head>

.....

士大夫井冈山地方官

九连环离开计划

3 id选择符

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

例：

id选择符

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

4 关联选择符

关联选择符

我们设定了在元素中的元素

所包含文字的样式，只有在两个条件都满足是，样式在会起作用，

5伪类选择符

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

例：

〈html>

关联选择符

〈/body>

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

6伪元素选择符

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

例：首行

dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...

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

首字

dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...

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

css规则

一继承

例：

css规则

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

二组合

例:td{font-size:12pt}

p1{font-size:12pt}

组合后

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

三层叠

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

决撒地方官

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标记的写法：

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

写法:<标记名>
例如:

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

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

例如：、

第一

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

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

例如：

标记的书写规则：标记字母大小写都可以的，但为便于阅读，通常采用小写
例如：

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

html标签之文本格式:

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

2) 换行标签
、和

：看实例br.html

标签是令其后的内容换一行，浏览器会自动忽略源代码中的空白和换行的部分，因此对需要换行的地方加上
标签就可以了.

是段落标签，使用该标签来进行段落划分，不同的段落之间会自动换行并有一定的距离。
是不换行

3) 预定义格式

:例如:pre.html
 作用：使浏览器将按照编辑文档时和
标记之间字符的位置将内容毫无变化的显示出来 
  4) 文本格式标签:内容看实例font.html
 属性有face、size、color、 
  5) 常用文字标签： 见 font_ziti.html 
  6) 定位标签
:
 可以让文字表格图片等摆放在任意的位置 
  7) Html注释语句
 基本格式: 注释语言  - - -> 
  8) 特殊字符(更多字符见html支持的符号.doc)例: teshu_fuhao.html
 < (<)  >  (>)  ® (注册商标)  & (&)    (空格)
 © (copyright)   ™(商标^TM)  &quto; (“) 
  9) 鼠标的形状：shubiao.html 
  Html列表格式: 
  1) 有序列表
:liebiao.html
 基本格式:

 称为有序列表标记
 其属性:
 
 type=”i”设定数字序列样式，其值有五种：1、a、A、i、I,默认为type=”1”
 start=”4”设定数字序列的起始值
 用以标示列表项目
 
的属性:
          例如：

 type=”4”设定数字序列样式，取值同ol的type属性 
  2) 无序列表:
 基本格式:

 的属性设定:例如”square”>,type设定符号样式，
 其值有三种：disc(列项符号，通常是非嵌套列表默认值)
             circle(列项符号，通常是嵌套列表默认值)
             square(列项符号，实心或空心的方块取决浏览器) 
  3) 定义列表
 定义列表是一种在表的各项前没有任何数字和符号的缩排列表
 基本格式：
         

            第一项
.叙述第一项的定义

            第二项
.叙述第二项的定义

          
 
  文件之间的链接： 
  1) 超级链接标签:链接文字
 .href属性定义了链接指向的地方
 .target属性决定链接到的文件在哪个框架或窗口中显示
 .title属性设定在浏览器中鼠标指向链接时显示的提示文本 
  2) URL资源地址可以分为:绝对ＵＲＬ和相对ＵＲＬ两类
 （１）绝对ＵＲＬ：包含标识internet上的文件所要的全部信息，包含协议、主机名、文件夹名和文件四项。例如：http://hi.baidu.com/baidu/.一般情况下，外部的资源使用绝对ＵＲＬ。
 （２）相对URL:可以分四种
 ①同一文件夹中的文件，直接写文件名即可.
       
     ②下级文件夹中的文件，要加上文件夹名称
       
       ③上级或兄弟文件夹中的文件，使用”..”表示移到上一级目录,
       例如:兄弟目录:”../ch/test.html”>
            上级目录:
       ④直接从服务器根目录开始指定文件夹和文件名;例如：”/ch/test.html”>
 
  3) Target连接目标
 有_blank、_self、_parsent、top、框架名 
  4) 锚连接和邮件连接
 邮件连接:mailto:xszlt@21cn.>联系我们
 锚连接制作方法:
     (1)为被链接的部分做一个记号，为该记号起名(使用name属性).例如:”记号名称”>
     (2)在调用此链接部分的文件中定义连接.例如:
 文件名#记号名称”>连接的文字如果是在同一个文件内跳转，文件名可以省略 
  5) 实例:（1）link.html与shige.html或者a_href.html与a.html 
  图像标签：实例img.html 
         图像标记:基本格式,是单独使用的标记，用于控制图像的显示. 
  例如： 
  align=”top”设置图像的对齐方式; 
  水平方向的对齐方：left和right 
  垂直方向的对齐方式(图文馄排时非常有用)：
 top：表示文字与图像顶部对齐
 bottom：表示文字与图像底部对齐
 middle：表示文字与图像中不对齐 
  hspace：设定图像与其水平方向相邻页面元素之间的距离 
  vspace：设定图像与其垂直方向相邻页面元素之间的距离（使用pixels做为单位）
 图片链接： 
  在网页中插入音频和视频 
           将音乐做成超链接：
 乐曲名
 例如：MIDI音乐
 自动载入音乐:
 
 autostart=true/false
 loop=true/false   
  startme=”分:秒”设定乐曲的开始播放时间，例如20秒后播放:startme=00:20
 volume=0-100  设定音量的大小
 width height  设定控制面板的大小
 hidden=true   隐藏控制面板
 视频格式同音频类似. 
  marquee标签的使用 
  1) 滚动字幕的使用可以增加网页的动感，让网页显得更有生气
 基本语法格式：
  
  2) align:设定滚动字幕的位置，除左、中、右三种位置外，还有靠上(top)和靠下(bottom)
 bgcolor:用于设定滚动字幕的背景颜色
 direction:用于设定滚动字幕的滚动方向
 behavior:用于设定滚动的方式：scroll表示由一端滚动到另一端
        slide表示由一端快速滑动到另一端且不再重复
        alternate表示在两端之间来回滚动
 hspacre和vspace:分别用于设定滚动字幕的左右边框和上下边框的宽度
 scrollamount:设定滚动字幕的滚动距离
 scrolldelay设定滚动两次之间的延迟时间
 loop：用于设定滚动的次数 
  metal元素: 
  1) meta标签是一个非常常用的标签，它可以用于鉴别作者，设定页面格式，标注内容提要和关键字以及刷新页面等等 
  2) 基本语法：
  
  3) 定义字符集
  
  4) 搜索引擎相关
 通过一下语句向搜索引擎说明你网页的关键词
 
 通过以下语句向搜索引擎说明你站点的主要内容：
 
  
  5) 禁用缓存
 缓存为零
 代理服务器上缓存
 设置页面过期时间 
  6) 设置页面以改变url
  
  7) 设置一些版权信息
  
   
   
  8) 例子: 
  我的地盘我做主，我的世界我的个性"> 
  我的地盘我做主，我的世界我的个性"> 
    
  表格标签的使用： 
  基本格式： 
      
         
         
         
 
  表头 
   
   
    
  
 
           常用属性设置:bordercolorlight边框明亮部分的颜色
 bordercolordark边框昏暗部分的颜色 
                        cellspacing 单元格之间的间距
 cellpadding 单元格与内容之间的间距
 colspan=”5”该一单元格跨越的列数
 rowspan=”4”该一单元格跨越的行数 
  例如：
控制表格边框的显示：
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等等），从而完成信息的交互。
  一个表单有三部分组成：
  表单标记：提交给服务器端处理程序的提交方法
 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等等。
 表单按钮：包括提交按钮、复位按钮和一般按钮
 常用的表单标记:
1) 
 type=text|password|checkbox|radio|submit|reset|image|file|button|hidden|….
 文本框
     文本框是一种让访问者自己输入内容的表单对象，通常被用来填写简短的回答，比如：姓名、地址等。
     代码格式:
2)  密码框
 当输入信息时，文字被星号或者其他符号代替，从而将输入的信息隐蔽起来。
 代码格式：
3) 隐藏域
 隐藏域是 用来收集或者发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的，但有时候需要传递一些信息,来标记信息的不同
 代码格式：
 
4) 单选框
 当访问者在一组选项中选择唯一的答案时，需用单选框。
 代码格式:
5) 复选框
 复选框允许在待选项中选中一项以上的选项，每一个复选项框都是一个独立的元素，都必须有一个唯一的名称
 代码格式：
6) 下拉选择框/滚动列表框
 下拉选择框允许你在一个有限的空间设置多种选项：
 代码格式：multiple属性可以进行多项选择
         
7) 多行文本框
 能让访问者填写文字较多的内容
 代码格式:
 
 warp:off用来避免文本换行，当输入的内容超过文本域右边界时，文本将向左滚动必须用return才能将插入点移到下一行
      physical让文本换行，当数据被提交处理时换行符也将被一期提交处理
8) 文件上传框
 代码格式：
9) (image)图像提交按钮
 代码格式：
 
框架的使用
1) 框架是一种页面布局技术，通过使用框架结构的页面，可以在一个浏览器窗口中同时显示多个页面
2) 框架的主要有两部分组成：框架集和单个框架组成。
3) 基本标记：
 把主窗口换分成一组框架，每个框架显示一个独立的文档
 在内定义单个框架
 在此标记中包含的文字将指出现在不支持frames的浏览器中
4) 创建内嵌的框架标记：<br> <iframe><span style="font-family:宋体">的作用是在网页中间插入一个窗口以显示另一个文件，称为业内框架。</span><br> iframe<span style="font-family:宋体">标记可以插入到</span><span style="font-family:Times New Roman"><body></body></span><span style="font-family:宋体">之间而</span><span style="font-family:Times New Roman">frameset</span><span style="font-family:宋体">不可以</span><br> 例如：<br> <iframe src=”note.html” name=”test” align=”middle” width=”300” height=”100” marginwidth=”1” marginheight=”1” frameborder=”1” scrolling=”yes”><br> marginwidth=”1” marginheight=”1”:<span style="font-family:宋体">该插入的文件与框边所保留的空间</span><br> frameborder=”1”<span style="font-family:宋体">使用</span>1<span style="font-family:宋体">表示显示边框</span><br> scrolling=”yes”<span style="font-family:宋体">设定是否要显示滚公条</span>,yes<span style="font-family:宋体">表示要显示滚动条，</span><span style="font-family:Times New Roman">no</span><span style="font-family:宋体">表示不显示滚动条</span></p> 
  <p> </p> 
  <p> </p> 
  <p> </p> 
  <p> </p> 
  <p> </p> 
  <p> </p> 
  <p>细说HTML标签</p> 
  <p><span style="color:rgb(128,128,128)">2010</span><span style="color:rgb(128,128,128)">年</span><span style="color:rgb(128,128,128)">7</span><span style="color:rgb(128,128,128)">月</span><span style="color:rgb(128,128,128)">26</span><span style="color:rgb(128,128,128)">日</span></p> 
  <p><span style="color:rgb(128,128,128)">9:29</span></p> 
  <p> </p> 
  <p> </p> 
  <p>■ 细说HTML标签</p> 
  <p><span style="font-family:宋体">在</span>HTML语法中，大致上可以分为：</p> 
  <p><u><span style="color:rgb(0,0,255)"><span style="font-family:宋体">网页架构</span></span></u>：主要网页主架构的介绍</p> 
  <p><u><span style="color:rgb(0,0,255)"><span style="font-family:宋体">分隔标签</span></span></u>：也就是所谓的水平线</p> 
  <p><u><span style="color:rgb(0,0,255)"><span style="font-family:宋体">排版标签</span></span></u>：针对标签的属性，可做适当的版面编排</p> 
  <p><u><span style="color:rgb(0,0,255)"><span style="font-family:宋体">字体标签</span></span></u>：教导您设定文字的字体。</p> 
  <p><u><span style="color:rgb(0,0,255)"><span style="font-family:宋体">文字标签</span></span></u><span style="font-family:宋体">：教导您设定文字的颜色、行距、变化</span>.....<span style="font-family:宋体">等等。</span></p> 
  <p><u><span style="color:rgb(0,0,255)"><span style="font-family:宋体">影像标签</span></span></u>：教导您如何在网页中，植入图像。</p> 
  <p><u><span style="color:rgb(0,0,255)"><span style="font-family:宋体">背景标签</span></span></u>：教导您如何设定背景颜色或是背景图像。</p> 
  <p><u><span style="color:rgb(0,0,255)"><span style="font-family:宋体">链接标签</span></span></u>：教导您如何设定超链接，以及开视窗的条件。</p> 
  <p><u><span style="color:rgb(0,0,255)"><span style="font-family:宋体">表格标签</span></span></u>：教导您如何在网页中运用表格。</p> 
  <p><u><span style="color:rgb(0,0,255)"><span style="font-family:宋体">序列标签</span></span></u>：教导您如何设定文字序列或图形序列。</p> 
  <p><u><span style="color:rgb(0,0,255)"><span style="font-family:宋体">表单标签</span></span></u>：教导您如何制作可填写用的表单。</p> 
  <p><u><span style="color:rgb(0,0,255)"><span style="font-family:宋体">框架标签</span></span></u>：可让同一个视窗由多个网页一起组成。</p> 
  <p><u><span style="color:rgb(0,0,255)"><span style="font-family:宋体">其他技巧</span></span></u>：让您的整个网页背景可以让您设定为图片或是声音。</p> 
  <p><strong>4.1 <span style="color:rgb(204,102,0)"><span style="font-family:宋体">网页架构</span> <</span></strong><strong><u><span style="color:rgb(0,0,255)"><span style="font-family:宋体">回细说索引</span></span></u></strong><strong><span style="color:rgb(204,102,0)">></span></strong></p> 
  <p><HTML></p> 
  <p><HEAD></p> 
  <p><TITLE><span style="color:rgb(153,51,0)">工具啦网页制作教学</span></TITLE></p> 
  <p><Meta></p> 
  <p></HEAD></p> 
  <p><BODY></p> 
  <p><span style="color:rgb(204,51,0)">BODY之间则为主要语法所在，也是网页的主要呈现部分。</span></p> 
  <p></BODY></p> 
  <p></HTML></p> 
  <p>【标签解说】</p> 
  <p><span style="font-family:宋体">以上看到的就是一篇最简单架构的网页。没错，网页其实就是一堆标签（所谓标签就是指被</span><>包起来的语法）集合起来的，透过浏览器的消化整理，就便成了美仑美奂的网页了。</p> 
  <p><span style="font-family:宋体">简单而言，通常一份完整的网页包含了二个部份：抬头（</span>HEAD）、文件本体（BODY）。也就是各位在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。</p> 
  <p><span style="font-family:宋体">在抬头的部份</span><HEAD></HEAD>中，有另一组标签<TITLE></TITLE>。打在<TITLE></TITLE>这里面的文字会出现在浏览器视窗最上头蓝色部份里，当作一篇网页的主题。</p> 
  <p><span style="font-family:宋体">您可能会发现，为什么我一直没提到</span><HTML></HTML>这一组标签，嗯！因为它可有可无。这一组标签是告诉浏览器说：我是一份HTML文件喔！也就是说它是一个网页的格式啦！通常都包在网页的最上下两端，将所有的原始码都包起来。</p> 
  <p><strong>4.2 <span style="color:rgb(204,102,0)"><span style="font-family:宋体">分隔标签</span> <</span></strong><strong><u><span style="color:rgb(0,0,255)"><span style="font-family:宋体">回细说索引</span></span></u></strong><strong><span style="color:rgb(204,102,0)">></span></strong></p> 
  <p>【文字上的分隔标签】</p> 
  <p><span style="font-family:宋体">或许你已经发现这个问题了：天啊！我不是在记事本里排版排得很漂亮，为何透过浏览器看起来一切都走了样？对啊！别太讶异，在网页的编排里，并不像汉书或</span>WORD一样，只要拼命按Enter键或空白键，便能完成分段或分行，因为，HTML语言是不认识我们所谓的Enter键或空白键，所以不管您按了多少次的空白或Enter，浏览器都会当作没看见啦！</p> 
  <p><strong>使用方法：</strong><span style="font-family:宋体">强制断行标签</span><br><span style="font-family:宋体">、强制分段标签</span><span style="font-family:Times New Roman"><p></span><strong></strong></p> 
  <p><strong>标签解说：</strong><span style="font-family:宋体">我们在写文章时，有时候在特定的地方会强迫断行（</span><br><span style="font-family:宋体">），或是在写完某一段的时候便会分段（</span><span style="font-family:Times New Roman"><p></span><span style="font-family:宋体">），写网页也一样，而且更需要断行及分段的功能，以免整个网页看起来乱糟糟的。</span><strong></strong></p> 
  <p><strong>使用范例：</strong></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>呈现结果</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>这是一个断行的范例<br>看出来了吗？</p> </td> 
     <td valign="top"> <p>这是一个断行的范例</p> <p>看出来了吗？</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>这是一个分段的范例<p>基本上他会比断行还多空出一行</p> </td> 
     <td valign="top"> <p>这是一个分段的范例</p> <p>基本上分段会比断行还多空出一行</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p> </p> 
  <p> </p> 
  <p>【分隔线标签】</p> 
  <p><strong>使用方法：</strong><span style="font-family:宋体">上一段文字内容</span><hr><span style="font-family:宋体">下一段文字内容</span><strong></strong></p> 
  <p><strong>标签解说：</strong><span style="font-family:宋体">利用</span><hr><span style="font-family:宋体">这个标签便可产生一条横分隔线。另外，其有些属性分别说明如下：</span><strong></strong></p> 
  <p><strong>使用范例：</strong></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>一般用法</p> </td> 
     <td valign="top"> <p>尚未加任何属性。</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>普通分隔线<hr></p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>呈现结果</p> </td> 
     <td valign="top"> <p>普通分隔线</p> <p> </p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p> </p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>颜色属性</p> </td> 
     <td valign="top"> <p>用法：<hr color="颜色码或颜色名称"></p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>橘色分隔线<hr color="#ff8000"></p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>呈现结果</p> </td> 
     <td valign="top"> <p>橘色分隔线</p> <p> </p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p> </p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>宽度属性</p> </td> 
     <td valign="top"> <p>用法：<hr width="宽度">，其单位为px（像素），宽度亦可用百分比来作设定，如50%即意为宽度占萤幕50%。</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>宽度为240px的分隔线<hr width="240"></p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>呈现结果</p> </td> 
     <td valign="top"> <p>宽度为240px分隔线</p> <p> </p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p> </p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>厚度属性</p> </td> 
     <td valign="top"> <p>用法：<hr size="厚度"></p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>厚度为5的分隔线<hr size="5"></p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>呈现结果</p> </td> 
     <td valign="top"> <p>厚度为5分隔线</p> <p> </p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p> </p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>位置属性</p> </td> 
     <td valign="top"> <p>用法：<hr align="水平对齐位置">，其设定值有三个，也就是置左align="left"、置中align="center"、置右align="right"</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>靠右的分隔线<hr align="right"></p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>呈现结果</p> </td> 
     <td valign="top"> <p>靠右的分隔线</p> <p> </p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p> </p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>阴影属性</p> </td> 
     <td valign="top"> <p>用法：<hr noshade>，无设定值，只要将 noshade 加入即可，通常会配合颜色设定，效果较佳。</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>实心分隔线（无阴影）<hr noshade></p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>呈现结果</p> </td> 
     <td valign="top"> <p>实心分隔线（无阴影）</p> <p> </p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p><strong>4.3 <span style="color:rgb(204,102,0)"><span style="font-family:宋体">排版标签</span> <</span></strong><strong><u><span style="color:rgb(0,0,255)"><span style="font-family:宋体">回细说索引</span></span></u></strong><strong><span style="color:rgb(204,102,0)">></span></strong></p> 
  <p>【文字置左、置中、置右】</p> 
  <p><strong>使用方法：</strong><span style="font-family:宋体">老实说，刚刚我们学过的分段标签</span><p><span style="font-family:宋体">再加上一些简单的属性设定，就可以让其整个文字段落置左、置中或置右了，就如下表所示：</span><strong></strong></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>呈现结果</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><p align="left">文字靠左</p></p> </td> 
     <td valign="top"> <p>文字靠左</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><p align="center">文字置中</p></p> </td> 
     <td valign="top"> <p>文字置中</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><p align="right">文字靠右</p></p> </td> 
     <td valign="top"> <p>文字靠右</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p><strong>标签解说：</strong><span style="font-family:宋体">嗯！秘诀就在于</span>“align=对齐位置”而已啦！align是分段标签<p>的属性之一，这个属性将来会常常在不同标签中看到，它的功能是专门在设定“水平对齐位置”，其常见的设定值有三个，也就是置左（align="left"）、置中（align="center"）、置右（align="right"）。</p> 
  <p> </p> 
  <p> </p> 
  <p>【置中标签】</p> 
  <p><strong>使用方法：</strong><center><span style="font-family:宋体">这是置中</span><span style="font-family:Times New Roman"></center></span><strong></strong></p> 
  <p><strong>标签解说：</strong>这个标签是最常用到的标签了，除了文字，对于图片、表格，任何可以显现在网页上的东西都可以置中喔！<strong></strong></p> 
  <p><strong>使用范例：</strong></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>呈现结果</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><center>这是最中间</center></p> </td> 
     <td valign="top"> <p>这是最中间</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p> </p> 
  <p> </p> 
  <p>【向右缩排标签】</p> 
  <p><strong>使用方法：</strong><blockquote><span style="font-family:宋体">要缩排的文字</span><span style="font-family:Times New Roman"></blockquote></span><strong></strong></p> 
  <p><strong>标签解说：</strong><span style="font-family:宋体">利用</span><blockquote></blockquote><span style="font-family:宋体">这个标签可以将其包起来的文字，全部往右缩排。而且加一组标签，往右缩排一单位，加两组标签，往右缩排两单位，依此类推。</span><strong></strong></p> 
  <p><strong>使用范例：</strong></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>呈现结果</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><blockquote>缩排1单位</blockquote></p> </td> 
     <td valign="top"> <p>缩排1单位</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><blockquote><blockquote>缩排2单位</blockquote></blockquote></p> </td> 
     <td valign="top"> <p>缩排2单位</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p> </p> 
  <p> </p> 
  <p>【保存原始格式标签】<u><span style="color:rgb(255,0,0)"><span style="font-family:宋体">强烈推荐！</span></span></u></p> 
  <p><strong>使用方法：</strong><pre><span style="font-family:宋体">文字内容</span><span style="font-family:Times New Roman"><pre></span><strong></strong></p> 
  <p><strong>标签解说：</strong><span style="font-family:宋体">利用</span><pre></pre><span style="font-family:宋体">这个标签可以将其包起来的文字排版、格式，原封不动的呈现出来。算是相当好用的标签之一。</span><strong></strong></p> 
  <p><strong>使用范例：</strong></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>呈现结果</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><pre></p> <p>文　字</p> <p>格　式</p> <p></pre></p> </td> 
     <td valign="top"> <p>文　字<br> 格　式</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p><strong>4.4 <span style="color:rgb(204,102,0)"><span style="font-family:宋体">字体标签</span> <</span></strong><strong><u><span style="color:rgb(0,0,255)"><span style="font-family:宋体">回细说索引</span></span></u></strong><strong><span style="color:rgb(204,102,0)">></span></strong></p> 
  <p>【标题标签】</p> 
  <p><strong>使用方法：</strong><h1><span style="font-family:宋体">标题内容</span><span style="font-family:Times New Roman"></h1></span><strong></strong></p> 
  <p><strong>标签解说：</strong><span style="font-family:宋体">标题的大小一共有六种，两个标签一组，也就是从</span><h1><span style="font-family:宋体">到</span><span style="font-family:Times New Roman"><h6></span><span style="font-family:宋体">，</span><span style="font-family:Times New Roman"><h1></span><span style="font-family:宋体">最大，</span><span style="font-family:Times New Roman"><h6></span><span style="font-family:宋体">最小。使用标题标签时，该标签会将字体变成粗体字，并且会自成一行。</span><strong></strong></p> 
  <p><strong>使用范例：</strong></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>呈现结果</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><h1>标题一</h1></p> </td> 
     <td valign="top"> <p><strong>标题一</strong></p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><h2>标题二</h2></p> </td> 
     <td valign="top"> <p><strong>标题二</strong></p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><h3>标题三</h3></p> </td> 
     <td valign="top"> <p><strong>标题三</strong></p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><h4>标题四</h4></p> </td> 
     <td valign="top"> <p><strong>标题四</strong></p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><h5>标题五</h5></p> </td> 
     <td valign="top"> <p><strong>标题五</strong></p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><h6>标题六</h6></p> </td> 
     <td valign="top"> <p><strong>标题六</strong></p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p> </p> 
  <p> </p> 
  <p>【设定字体大小标签】</p> 
  <p><strong>使用方法：</strong><span style="color:rgb(255,0,128)"><font size=3></span>文字内容<span style="color:rgb(255,0,128)"></font></span><strong></strong></p> 
  <p><strong>标签解说：</strong><span style="font-family:宋体">标题的大小一共有七种，也就是</span><font size=1><span style="font-family:宋体">（最小）到</span><span style="font-family:Times New Roman"><font size=7></span><span style="font-family:宋体">（最大），另外，还有一种写法：</span><span style="color:rgb(255,0,128)"><font size=+1></span>文字内容<span style="color:rgb(255,0,128)"></font></span><span style="font-family:宋体">，其意思就是说：比预设字大一级。当然也可以</span> font size=+2<span style="font-family:宋体">（比预设字大二级），或是</span><span style="font-family:Times New Roman">font size=-1</span><span style="font-family:宋体">（比预设字小一级），以一般而言，预设字体多为</span><span style="font-family:Times New Roman">3</span><span style="font-family:宋体">。</span><strong></strong></p> 
  <p><strong>使用范例：</strong></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>呈现结果</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><font size=1>字体一</font> 或是</p> <p><font size=-2>字体一</font></p> </td> 
     <td valign="top"> <p>字体一</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><font size=2>字体二</font> 或是</p> <p><font size=-1>字体二</font></p> </td> 
     <td valign="top"> <p>字体二</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><font size=3>字体三</font> 或是</p> <p><font size=+0>字体三</font></p> </td> 
     <td valign="top"> <p>字体三</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><font size=4>字体四</font> 或是</p> <p><font size=+1>字体四</font></p> </td> 
     <td valign="top"> <p>字体四</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><font size=5>字体五</font> 或是</p> <p><font size=+2>字体五</font></p> </td> 
     <td valign="top"> <p>字体五</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><font size=6>字体六</font> 或是</p> <p><font size=+3>字体六</font></p> </td> 
     <td valign="top"> <p>字体六</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><font size=6>字体七</font> 或是</p> <p><font size=+4>字体七</font></p> </td> 
     <td valign="top"> <p>字体七</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p> </p> 
  <p> </p> 
  <p>【字型变化标签】</p> 
  <p><strong>使用方法：</strong><b><span style="font-family:宋体">文字</span><span style="font-family:Times New Roman"></b></span><strong></strong></p> 
  <p><strong>标签解说：</strong><span style="font-family:宋体">在文字标签里，对于文字的格式也有相当多的变化，如粗体、斜体</span>...<span style="font-family:宋体">等，此外，也定义了一些现成的格式供编者使用，如‘强调’、‘原始码’</span><span style="font-family:Times New Roman">...</span><span style="font-family:宋体">等，当然，这只是方便您参考用，并无强迫说遇到原始码就要加上‘原始码’的标签。</span><strong></strong></p> 
  <p><strong>使用范例：</strong></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>呈现结果</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><b>粗体</b></p> </td> 
     <td valign="top"> <p><strong>粗体</strong></p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><i>斜体</i></p> </td> 
     <td valign="top"> <p><em>斜体</em></p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><u>底线</u></p> </td> 
     <td valign="top"> <p><u>底线</u></p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><sup>上标</sup></p> </td> 
     <td valign="top"> <p><sup>上标</sup></p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><sub>下标</sub></p> </td> 
     <td valign="top"> <p><sub>下标</sub></p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><tt>打字机</tt></p> </td> 
     <td valign="top"> <p>打字机</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><blink>闪烁</blink>（ie没效果）</p> </td> 
     <td valign="top"> <p>闪烁</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><em>强调</em></p> </td> 
     <td valign="top"> <p><em>强调</em></p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><strong>加强</strong></p> </td> 
     <td valign="top"> <p><strong>加强</strong></p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><samp>范例</samp></p> </td> 
     <td valign="top"> <p>范例</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><code>原始码</code></p> </td> 
     <td valign="top"> <p>原始码</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><var>变数</var></p> </td> 
     <td valign="top"> <p>变数</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><dfn>定义</dfn></p> </td> 
     <td valign="top"> <p>定义</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><cite>引用</cite></p> </td> 
     <td valign="top"> <p>引用</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><address>所在地址</address></p> </td> 
     <td valign="top"> <p>所在地址</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p> </p> 
  <p> </p> 
  <p>【文字颜色设定】</p> 
  <p><strong>使用方法：</strong><font color="#fefecb"><span style="font-family:宋体">文字颜色</span><span style="font-family:Times New Roman"></font></span><strong></strong></p> 
  <p><strong>标签解说：</strong><span style="font-family:宋体">文字也可以设定</span> <span style="font-family:宋体"> 颜色喔！至于颜色有哪些</span>....<span style="font-family:宋体">这</span><span style="font-family:Times New Roman">....</span><span style="font-family:宋体">哪天我心血来潮再来做个色彩对应表吧！</span><strong></strong></p> 
  <p><strong>使用范例：</strong></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>呈现结果</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><font color="#ff0000">红</font></p> </td> 
     <td valign="top"> <p><span style="color:rgb(255,0,0)">红色的字喔！</span></p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><font color="#ff8000">橙</font></p> </td> 
     <td valign="top"> <p><span style="color:rgb(255,128,0)">橙色的字喔！</span></p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><font color="#ffff00">黄</font></p> </td> 
     <td valign="top"> <p><span style="color:rgb(219,219,0)">黄色的字喔！</span></p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><font color="#00ff00">绿</font></p> </td> 
     <td valign="top"> <p><span style="color:rgb(0,255,0)">绿色的字喔！</span></p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><font color="#0080ff">蓝</font></p> </td> 
     <td valign="top"> <p><span style="color:rgb(0,128,255)">蓝色的字喔！</span></p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><font color="#0000a0">靛</font></p> </td> 
     <td valign="top"> <p><span style="color:rgb(0,0,160)">靛色的字喔！</span></p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><font color="#8000ff">紫</font></p> </td> 
     <td valign="top"> <p><span style="color:rgb(128,0,255)">紫色的字喔！</span></p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><font color="#000000">黑</font></p> </td> 
     <td valign="top"> <p>黑色的字喔！</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><font color="#c0c0c0">灰</font></p> </td> 
     <td valign="top"> <p><span style="color:rgb(192,192,192)">灰色的字喔！</span></p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p><strong>4.5 <span style="color:rgb(204,102,0)"><span style="font-family:宋体">文字标签</span> <</span></strong><strong><u><span style="color:rgb(0,0,255)"><span style="font-family:宋体">回细说索引</span></span></u></strong><strong><span style="color:rgb(204,102,0)">></span></strong></p> 
  <p>【文字字型设定】</p> 
  <p><strong>使用方法：</strong><font face="<span style="font-family:宋体">字型名称</span><span style="font-family:Times New Roman">"></span><span style="font-family:宋体">文字</span><span style="font-family:Times New Roman"></font></span><strong></strong></p> 
  <p><strong>标签解说：</strong>网页上也可以使用字型喔！唯一的一个限制是：对方也要有该字型！否则看到的仍然还是宋体。另外要说明的是，这个标签并无法保证在每个浏览器上都能正常的显现，不过这并没有关系，看不到特殊的字型时，浏览器仍会以宋体来显示，所以不用怕会一团乱！<br> <span style="font-family:宋体">另外，如果您的网页中有加上这一行叙述</span><meta http-equiv="content-type" content="text/html;charset=big5"><span style="font-family:宋体">（指定网页的语言格式，以后我会解释），那么，</span><span style="font-family:Times New Roman">netscape</span><span style="font-family:宋体">可以正确显示出中文，但英文无反应。若没有加该行，那么英文会正确显示，但中文却仍是宋体。至于</span><span style="font-family:Times New Roman">ie </span><span style="font-family:宋体">系列，均能正常显示。</span><strong></strong></p> 
  <p><strong>使用范例：</strong></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>呈现结果</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><font face="楷体_GB2312">楷体_GB2312</font></p> </td> 
     <td valign="top"> <p>楷体<span style="font-family:Calibri">_GB2312</span></p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><font face="华康俪中黑">华康俪中黑</font></p> </td> 
     <td valign="top"> <p>华康俪中黑</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p> </p> 
  <p> </p> 
  <p>【特殊字元】</p> 
  <p><strong>使用方法： </strong></p> 
  <p><strong>标签解说：</strong><span style="font-family:宋体">很多特殊的符号是需要特别处理的，比如说</span>" < "<span style="font-family:宋体">、</span><span style="font-family:Times New Roman">" > "</span><span style="font-family:宋体">这两个符号若想要呈现在网页上是没有办法直接打</span><span style="font-family:Times New Roman">" < "</span><span style="font-family:宋体">的，要呈现</span><span style="font-family:Times New Roman">" < "</span><span style="font-family:宋体">必须输入编码表示法：“</span><span style="font-family:Times New Roman"><</span><span style="font-family:宋体">”，常用的如下：</span><strong></strong></p> 
  <p><strong>使用范例：</strong></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>呈现结果</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p> </p> </td> 
     <td valign="top"> <p>  ( 代表一个不断行空白)</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><</p> </td> 
     <td valign="top"> <p><</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>></p> </td> 
     <td valign="top"> <p>></p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>&</p> </td> 
     <td valign="top"> <p>&</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>"</p> </td> 
     <td valign="top"> <p>"</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p> </p> 
  <p> </p> 
  <p>【设定文字内定值大小】</p> 
  <p><strong>使用方法：</strong><basefont size="1~7"><strong></strong></p> 
  <p><strong>标签解说：</strong><span style="font-family:宋体">这个标签可以改变文字大小的内定值，直接加在</span><body><span style="font-family:宋体">标签之后就行了。一般而言，若是没有特别设定，文字大小内定值预定值为</span><span style="font-family:Times New Roman">3</span><span style="font-family:宋体">。</span><strong></strong></p> 
  <p><strong>4.6 <span style="color:rgb(204,102,0)"><span style="font-family:宋体">影像标签</span> <</span></strong><strong><u><span style="color:rgb(0,0,255)"><span style="font-family:宋体">回细说索引</span></span></u></strong><strong><span style="color:rgb(204,102,0)">></span></strong></p> 
  <p>【影像标签】</p> 
  <p><span style="font-family:宋体">在使用影像标签时有两件事值得注意一下，一是档名，二是路径。首先要注意的就是，档名是否正确以及大小写是否一致！图档名称不正确，任电脑再厉害也找不到您要的图，档名大小写不一致，如</span>Image.gif、image.gif、image.GIF在自己的电脑中看都能正确的显示，但是一但传到网路上去时，因为系统不一样的关系（电脑伺服器的作业系统可比个人用电脑的作业系统严谨多了）就变成三个不一样的档案了，所以，可别忽略档名大小写不一致的影响。</p> 
  <p>另外一个就是路径问题了，这个问题也不难，我们在稍后会提到。我们先来看看影像的标签如何写。</p> 
  <p><strong>使用方法：</strong><img src="boy.gif" alt="<span style="font-family:宋体">本站特约模特儿</span><span style="font-family:Times New Roman">" align=right border=0 hspace=2 vspace=2 height=56 width=32></span><strong></strong></p> 
  <p><strong>标签解说：</strong><span style="font-family:宋体">目前常见的网页图形格式有两种就是</span>gif<span style="font-family:宋体">及</span><span style="font-family:Times New Roman">jpg</span><span style="font-family:宋体">两种格式。</span><span style="font-family:Times New Roman">gif</span><span style="font-family:宋体">格式只有</span><span style="font-family:Times New Roman">256</span><span style="font-family:宋体">色，不过色彩比较鲜艳干净漂亮，适合电脑美工图案。而</span><span style="font-family:Times New Roman">jpg</span><span style="font-family:宋体">格式的图案是全彩失真压缩，比较适合一大堆颜色的图片，如照片就较适合用</span><span style="font-family:Times New Roman">jpg</span><span style="font-family:宋体">格式来呈现。</span><strong></strong></p> 
  <p><strong>使用范例：</strong></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>基本用法</p> </td> 
     <td valign="top"> <p>用法：<img src="图档名称、路径"></p> <p>显示图片最基本的方法（就是不加任何属性啦！）其中 boy.gif 就是图档的档名。</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p><img src="http://www.tool.la/logo/logo2.gif">嗨！我是本站的模特儿喔！</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>呈现结果</p> </td> 
     <td valign="top"> <p> </p> <p>嗨！我是本站的模特儿喔！</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p> </p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>长宽设定</p> </td> 
     <td valign="top"> <p>用法：<img src="图档" height="高度" width="宽度"></p> <p>设图片的大小，其实不用设也可以，但是有设更好，可以加快浏览速度，因为浏览器就不用在那边花时间算您的图片有多大啦！此外您也可以自己随意设定图片大小。</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p><img src="http://www.tool.la/logo/logo2.gif"></p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>呈现结果</p> </td> 
     <td valign="top"> <p> </p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p> </p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>加上说明</p> </td> 
     <td valign="top"> <p>用法：<img src="图档" alt="说明文字"></p> <p>滑鼠一到图上时，说明文字就会自动出现。此外，在图片未显示出来或显示不出来时，也会以这一段字代替，让使用者知道这个未显示出来的图片究竟是干嘛用的。</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p><img src="http://www.tool.la/logo/logo2.gif" alt="本站特约模特儿">移到图上看看。</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>呈现结果</p> </td> 
     <td valign="top"> <p> </p> <p>移到图上看看。</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p> </p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>图片位置</p> </td> 
     <td valign="top"> <p>用法：<img src="图档" align="位置"></p> <p>图片位置设定！可以靠左放：align=left、靠上align=top、靠下align=bottom、垂直置中align=middle，其中靠左放可以造成‘文绕图’的效果。</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p><img src="http://www.tool.la/logo/logo2.gif" align=right>嗨！我往右边靠！</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>呈现结果</p> </td> 
     <td valign="top"> <p> </p> <p>嗨！我往右边靠！</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p><img src="http://www.tool.la/logo/logo2.gif" align=left>嗨！我往左边靠！</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>呈现结果</p> </td> 
     <td valign="top"> <p> </p> <p>嗨！我往左边靠！</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p><img src="http://www.tool.la/logo/logo2.gif" align=top>文字对齐我头顶！</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>呈现结果</p> </td> 
     <td valign="top"> <p> </p> <p>文字对齐我头顶！</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p><img src="http://www.tool.la/logo/logo2.gif" align=bottom>文字对齐我脚底！</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>呈现结果</p> </td> 
     <td valign="top"> <p> </p> <p>文字对齐我脚底！</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p><img src="http://www.tool.la/logo/logo2.gif" align=middle>文字对齐我中间！</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>呈现结果</p> </td> 
     <td valign="top"> <p> </p> <p>文字对齐我中间！</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p><img src="http://www.tool.la/logo/logo2.gif" align=absmiddle>文字对齐我绝对中间！</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>呈现结果</p> </td> 
     <td valign="top"> <p> </p> <p>文字对齐我绝对中间！</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p> </p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>边框设定</p> </td> 
     <td valign="top"> <p>用法：<img src="图档" border="边框粗细"></p> <p>设定边框大小，通常都设成 0 感觉比较美观啦！因为内定的框框实在是不怎么漂亮....。尤其在链接时，设框框简直是丑毙了...。</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p><img src="http://www.tool.la/logo/logo2.gif" border="4"></p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>呈现结果</p> </td> 
     <td valign="top"> <p> </p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p> </p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>左右间距</p> </td> 
     <td valign="top"> <p>用法：<img src="图档" hspace="离左右物件的距离"></p> <p>离文字的水平距离，通常多少也设一点，以免靠文字太近，看起来才不会有太挤的感觉。</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>左边的字<img src="http://www.tool.la/logo/logo2.gif" hspace="15">右边的字</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>呈现结果</p> </td> 
     <td valign="top"> <p>左边的字</p> <p> </p> <p>右边的字</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p> </p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>上下间距</p> </td> 
     <td valign="top"> <p>用法：<img src="图档" vspace="离上下物件的距离"></p> <p>离文字的垂直距离，通常多少也设一点，以免靠文字太近，看起来才不会有太挤的感觉。</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>上面的字<br><img src="http://www.tool.la/logo/logo2.gif" vspace="15"><br>下面的字</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>呈现结果</p> </td> 
     <td valign="top"> <p>上面的字</p> <p> </p> <p>下面的字</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p><span style="font-family:宋体">由于此网页有用</span>css控制版面图文，故在netscape下观看，会稍有不正确。</p> 
  <p> </p> 
  <p> </p> 
  <p>【网页影像重要观念】</p> 
  <p><strong>关于路径：</strong><span style="font-family:宋体">现在我们来谈谈图片路径的事，路径不对，不管您的网页名称写的多正确也没用，因为浏览器无法寻着您的路径去找到该有的图片，所以，我们来看看该如何正确的使用路径。有些人并不喜欢将网页及图通通放在同一个目录下，比如说有人将图档全放在</span>c:\images<span style="font-family:宋体">里，而网页档放在</span><span style="font-family:Times New Roman">c:\demo</span><span style="font-family:宋体">里，这样子的话，我们该如何正确的写图片的路径呢？我将几种常见的情形整理成下表：</span><strong></strong></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>html档的位置</p> </td> 
     <td valign="top"> <p>图档的位置</p> </td> 
     <td valign="top"> <p>写法</p> </td> 
     <td valign="top"> <p>情形说明</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>c:\demo</p> </td> 
     <td valign="top"> <p>c:\demo</p> </td> 
     <td valign="top"> <p><img src="logo.gif"></p> </td> 
     <td valign="top"> <p>图文均在同一目录</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>c:\demo</p> </td> 
     <td valign="top"> <p>c:\demo\images</p> </td> 
     <td valign="top"> <p><img src="images/logo.gif"></p> </td> 
     <td valign="top"> <p>图在网页下一层目录</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>c:\demo</p> </td> 
     <td valign="top"> <p>c:\</p> </td> 
     <td valign="top"> <p><img src=" ../logo.gif"></p> </td> 
     <td valign="top"> <p>图在网页上一层</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>c:\demo</p> </td> 
     <td valign="top"> <p>c:\images</p> </td> 
     <td valign="top"> <p><img src="../images/logo.gif"></p> </td> 
     <td valign="top"> <p>图文在同一层但不同目录</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p><span style="font-family:宋体">或许有人看到不明就理，我来说明一下，</span>“../”是回到上一层目录的意思。“images/”则是进入下一层目录image之意，而“../images/”的意思就是，回到上一层目录，然后再进入目录images<span style="font-family:宋体">中。以上我们使用的均为</span>“<span style="color:rgb(255,0,0)">相对路径</span>”的概念。</p> 
  <p><strong>影像单位：</strong><span style="font-family:宋体">或许您会常常看到</span>px<span style="font-family:宋体">这个单位，没错，这是我们在制作最常用的一个单位了。这个单位完整的写法是“</span><span style="font-family:Times New Roman">pixels</span><span style="font-family:宋体">”，我们称之为“像素”。像素，是萤幕上的一个小光点，然而这一小光点的大小，并非是固定的，举个例子而言，萤幕本身十五寸，不会因为你的任何设定而变成十七寸。但是，其解析度是可以改变的，我们常见的解析度有以下几种：“</span><span style="font-family:Times New Roman">640</span><span style="font-family:宋体">×</span><span style="font-family:Times New Roman">480</span><span style="font-family:宋体">”、“</span><span style="font-family:Times New Roman">800</span><span style="font-family:宋体">×</span><span style="font-family:Times New Roman">600</span><span style="font-family:宋体">”、“</span><span style="font-family:Times New Roman">1024</span><span style="font-family:宋体">×</span><span style="font-family:Times New Roman">768</span><span style="font-family:宋体">”。举其中之一的</span><span style="font-family:Times New Roman">640</span><span style="font-family:宋体">×</span><span style="font-family:Times New Roman">480</span><span style="font-family:宋体">来说，其代表的就是在萤幕上有宽</span><span style="font-family:Times New Roman">640</span><span style="font-family:宋体">个光点，高有</span><span style="font-family:Times New Roman">480</span><span style="font-family:宋体">光点，若是我们将解析度调整为</span><span style="font-family:Times New Roman">800</span><span style="font-family:宋体">×</span><span style="font-family:Times New Roman">600</span><span style="font-family:宋体">其宽势必要从</span><span style="font-family:Times New Roman">640</span><span style="font-family:宋体">变成</span><span style="font-family:Times New Roman">800</span><span style="font-family:宋体">个光点，也因此，该光点便会变小一点，所以，我们看起来就会觉得解析度调高后，萤幕内的东西，变得小小的，很精致，那就是因为光点变小的原因。</span><strong></strong></p> 
  <p><strong>影像格式：</strong><span style="font-family:宋体">网页用的图档目前只有</span>gif<span style="font-family:宋体">格式（即副档名为</span><span style="font-family:Times New Roman">gif</span><span style="font-family:宋体">的图档，如：</span><span style="font-family:Times New Roman">bg.gif</span><span style="font-family:宋体">）以及</span><span style="font-family:Times New Roman">jpg</span><span style="font-family:宋体">格式（即副档名为</span><span style="font-family:Times New Roman">jpg</span><span style="font-family:宋体">的图档，如：</span><span style="font-family:Times New Roman">bg.jpg</span><span style="font-family:宋体">）为一般的浏览器所接受。其他如</span><span style="font-family:Times New Roman">bmp</span><span style="font-family:宋体">格式或是</span><span style="font-family:Times New Roman">pcx</span><span style="font-family:宋体">格式都是无法在网页上使用的，若非得要用，那就利用影像绘图软体来作格式的转换吧！</span><strong></strong></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>图档范例</p> </td> 
     <td valign="top"> <p>说明</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p> </p> </td> 
     <td valign="top"> <p>gif格式的图形只能以256个颜色显示，虽然其色彩较少，但颜色鲜艳亮丽，若是图形颜色不多，用gif格式存档会较漂亮。</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p> </p> </td> 
     <td valign="top"> <p>jpg格式的图形是以全彩显示，适合用在相片或是渐层颜色的图片上，压缩比例以75%为适中。</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p><strong>4.7 <span style="color:rgb(204,102,0)"><span style="font-family:宋体">背景标签</span> <</span></strong><strong><u><span style="color:rgb(0,0,255)"><span style="font-family:宋体">回细说索引</span></span></u></strong><strong><span style="color:rgb(204,102,0)">></span></strong></p> 
  <p>【背景标签】</p> 
  <p><span style="font-family:宋体">说穿了，背景标签只有</span><BODY>这个标签，其余的效果，只要加上一些简单的属性便可做到。</p> 
  <p><strong>使用方法：</strong><body bgcolor="#ffffff" background="bg.jpg"><strong></strong></p> 
  <p><strong>标签解说：</strong><span style="font-family:宋体">这个标签其实应该老早就要讲了，毕竟它是构成网页不可或缺的基本要素之一。我们背景颜色或图片的设定以及链接字体的颜色，通通都放在</span><body><span style="font-family:宋体">这标签里面。我就其属性来一一解说：</span><strong></strong></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>背景颜色</p> </td> 
     <td valign="top"> <p>用法：<body bgcolor="颜色码"></p> <p>设定背景颜色。有人会说：‘我已经设定了背景图片，那背景颜色还有用吗？’当然有用！当使用者链接到贵站时，若背景图案还没传输完之前（有的背景图蛮大的），就会先显现背景颜色，您说，是不是比一片灰灰的好看多了呢！</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p><html></p> <p><head></p> <p><title>这是标题</title></p> <p></head></p> <p><body bgcolor="#f9e6a2"></p> <p>这里是本文区</p> <p></body></p> <p></html></p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p> </p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>背景图案</p> </td> 
     <td valign="top"> <p>用法：<body background="图档名称、路径"></p> <p>g设定背景图案。图档可以是jpg或gif格式的图档，我建议：图档不要太大，否则网页载入会蛮慢的。</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p><html></p> <p><head></p> <p><title>这是标题</title></p> <p></head></p> <p><body bgcolor="#f9e6a2" background="bg.jpg"></p> <p>这里是本文区</p> <p></body></p> <p></html></p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p> </p> 
  <p> </p> 
  <p>【内文、链接文字颜色设定】</p> 
  <p><strong>使用方法：</strong><body text="#000000" link="#0000ff" vlink="#ff00ff" alink="#ff0000><strong></strong></p> 
  <p><strong>标签解说：</strong><span style="font-family:宋体">用字体标签中的颜色属性，可以设定文字的颜色，不过，却没有提到文字的颜色内定值该如何修改，这个</span><body><span style="font-family:宋体">标签中，便有设定内文、链接等文字的颜色内定值功能。用法如下：</span><strong></strong></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>内文颜色</p> </td> 
     <td valign="top"> <p>用法：<body text="颜色码"></p> <p>设定一般文字颜色，也就是说，若没有特别去设定文字颜色的话，浏览器就会自动显现您所设定的颜色。</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p><html></p> <p><head></p> <p><title>这是标题</title></p> <p></head></p> <p><body text="#0906a2"></p> <p>这里是本文区</p> <p></body></p> <p></html></p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p> </p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>链接颜色</p> </td> 
     <td valign="top"> <p>用法：<body link="颜色码"></p> <p>设定“链接”的颜色。只要是有链接的地方就会出现你指定的颜色，当然，如果按下链接后，那又会变成另一个颜色了，这底下会说明。</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p><html></p> <p><head></p> <p><title>这是标题</title></p> <p></head></p> <p><body link="#ff6600"></p> <p><a href="index.htm">链接文字</a></p> <p></body></p> <p></html></p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p> </p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>链接时颜色</p> </td> 
     <td valign="top"> <p>用法：<body alink="颜色码"></p> <p>设定“按下链接”的颜色，也就是当您滑鼠按下那链接的瞬间所呈现的颜色。</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p><html></p> <p><head></p> <p><title>这是标题</title></p> <p></head></p> <p><body alink="#0099ff"></p> <p><a href="index.htm">链接中文字</a></p> <p></body></p> <p></html></p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p> </p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>已链接颜色</p> </td> 
     <td valign="top"> <p>用法：<body vlink="颜色码"></p> <p>设定“按下链结后”的颜色，也就是如果该链接已经有被按过了，那么就会呈现的颜色。如此的做法，是要让使用者容易识别到底哪些链接有去过了，哪些没去过。</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p><html></p> <p><head></p> <p><title>这是标题</title></p> <p></head></p> <p><body vlink="red"></p> <p><a href="demo1-10-6.htm">链接文字</a></p> <p></body></p> <p></html></p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p><strong>4.8 <span style="color:rgb(204,102,0)"><span style="font-family:宋体">链接标签</span> <</span></strong><strong><u><span style="color:rgb(0,0,255)"><span style="font-family:宋体">回细说索引</span></span></u></strong><strong><span style="color:rgb(204,102,0)">></span></strong></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>【WWW链接标签基本概念】</p> <p><strong>链接基本概念：</strong>一般而言，所谓链接就是，在网页中有些字会有特别的颜色，而且字的底下会有条线，当游标移到那些字上时，会变成手指形状，按下去，则会连到别的文章或网站，就像这样（以上这段是给超级新手看的<span style="font-family:Times New Roman">...</span><span style="font-family:宋体">）。</span><br> 扯到链接，最基本来看有<span style="color:rgb(255,0,128)">‘内部链接’</span>及<span style="color:rgb(255,0,128)">‘外部链接’</span>，所谓‘内部链接’就是自己网站间网页的链接，至于外部链接我们稍后再来讨论。<br> 要了解内部链接，首先必须先了解一下这两种东西，一个是‘相对路径’，一个是‘绝对路径’。<br> 现在假设一个情形：我们在自己的电脑里设计网页，所有网页相关的档案我们通通放在 <span style="font-family:Times New Roman"> c:\www </span><span style="font-family:宋体">里面，现在假设 </span><span style="font-family:Times New Roman">c:\www</span><span style="font-family:宋体">里面目前有 </span><span style="font-family:Times New Roman">index.htm</span><span style="font-family:宋体">、 </span><span style="font-family:Times New Roman">text1.htm</span><span style="font-family:宋体">、 </span><span style="font-family:Times New Roman">p1.gif</span><span style="font-family:宋体">、 </span><span style="font-family:Times New Roman">p2.gif</span><span style="font-family:宋体">这四个档案。</span><span style="font-family:Times New Roman">ok</span><span style="font-family:宋体">！</span><br> 现在我们想在 <span style="font-family:Times New Roman">index.htm </span><span style="font-family:宋体">里面设一个链接，能够按一下就连到</span><span style="font-family:Times New Roman">text1.htm</span><span style="font-family:宋体">，那我们该怎么做呢？基本上，有两种方式可以做到，在</span><span style="font-family:Times New Roman">index.htm </span><span style="font-family:宋体">里面加上下面任一叙述：</span><strong></strong></p> 
      <table> 
       <tbody> 
        <tr> 
         <td valign="top"> <p><a href="/c|/www/text1.htm"></p> </td> 
         <td valign="top"> <p>这就是‘绝对路径’</p> </td> 
        </tr> 
        <tr> 
         <td valign="top"> <p><a href="text1.htm"></p> </td> 
         <td valign="top"> <p>这就是‘相对路径’</p> </td> 
        </tr> 
       </tbody> 
      </table> <p>瞧出什么端倪了没有？嗯嗯....没错，‘绝对路径’要给电脑一个非常详尽的位置，让电脑寻着这路径去找到档案。而‘相对路径’就简单多啦！如果没有特别指定，他就会直接在 index.htm 的所在目录下找，也就是在 c:\www 底下去找text1.htm。</p> <p>如果说，今天我们将 c:\www 里所有的档案都上传到网路上的网页伺服器（总不能做好了只给自己看吧！），且该伺服器是别人的电脑，而非你自己架设的主机，那么问题就来了！你猜，哪一种链接会出问题？呵呵...答案是‘绝对路径’，您猜对了吗？</p> <p>为什么说‘绝对路径’会出问题呢？因为，当您将档案上传到网路上时，您的整个网页目录架构一定会变，到时候，电脑可能找不到 c:\ （尤其是unix系列的主机）更可能找不到 www 这目录（有些会规定要放在特定的目录下才能显示网页），所以说，没事的话，尽量用‘相对路径’来作链接吧！好写又不容易出错。</p> <p>另外一个情形是：为了整理方便，有些网友喜欢将图档通通放到同一个目录下，如：c:\www\gif\ 底下放进了p1.gif 、 p2.gif两个图，而index.htm 、 text1.htm 依旧在 c:\www 底下。现在我们想在 index.htm 下设个链接到 p1.gif 这图档（链接不限于只能连html档，图档、文字档均可），那我们又该如何来使用‘相对路径’呢？他们又不在‘同一个目录’下...？</p> <p> </p> 
      <table> 
       <tbody> 
        <tr> 
         <td valign="top"> <p><a href="/c|/www/gif/p1.gif"></p> </td> 
         <td valign="top"> <p>这是‘绝对路径’的写法</p> </td> 
        </tr> 
        <tr> 
         <td valign="top"> <p><a href="gif/p1.gif"></p> </td> 
         <td valign="top"> <p>这是‘相对路径’的写法</p> </td> 
        </tr> 
       </tbody> 
      </table> <p>如何？不难吧！（只是字有点多，看到脑子发胀！）</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><strong>总整理：</strong>很乱吗？嗯<span style="font-family:Times New Roman">...</span><span style="font-family:宋体">看看这表，或许会清楚些。</span><strong></strong></p> 
      <table> 
       <tbody> 
        <tr> 
         <td valign="top"> <p>相对路径表示方式</p> </td> 
         <td valign="top"> <p>代表链接位置</p> </td> 
        </tr> 
        <tr> 
         <td valign="top"> <p><a href="text1.htm"></p> </td> 
         <td valign="top"> <p>text1.htm在目前的目录中（就例子而言，就是在c:\www中）</p> </td> 
        </tr> 
        <tr> 
         <td valign="top"> <p><a href="docs/text1.htm"></p> </td> 
         <td valign="top"> <p>text1.htm在名为docs的次目录中（就本例而言，就是在c:\www\docs中）</p> </td> 
        </tr> 
        <tr> 
         <td valign="top"> <p><a href="../text1.htm"></p> </td> 
         <td valign="top"> <p>text1.htm在目前目录的上一层目录中（就本例而言，就是在c:\底下了）</p> </td> 
        </tr> 
       </tbody> 
      </table> <p> </p> <p> </p> <p>【网页内部的链接】</p> <p><strong>使用方法：</strong></p> <p><strong>先在欲链接处作记号：</strong><a name="here1"><span style="font-family:宋体">这里是你想链接的点</span><span style="font-family:Times New Roman"></a></span><strong></strong></p> <p><strong>设定链接：</strong><a href="#here1"><span style="font-family:宋体">链接</span><span style="font-family:Times New Roman"></a></span><strong></strong></p> <p><strong>标签解说：</strong>有时候，当某页的内容很多时，我们可以利用网页的内部链接，来使使用者快速的找到资料。其原理不过是：在欲链接处做个记号（网页的任何地方都可以喔！），然后，链接时就寻这记号，就可以快速找到资料。很简单吧！<strong></strong></p> <p><strong>使用范例：</strong></p> 
      <table> 
       <tbody> 
        <tr> 
         <td valign="top"> <p>范例</p> </td> 
         <td valign="top"> <p>第一步骤</p> </td> 
         <td valign="top"> <p>第二步骤</p> </td> 
        </tr> 
        <tr> 
         <td valign="top"> <p>www<span style="font-family:宋体">链接标签基本概念</span></p> </td> 
         <td valign="top"> <p><a name="m1">欲链接的位置</a></p> </td> 
         <td valign="top"> <p><a href="#m1">www链接标签基本概念</a></p> </td> 
        </tr> 
        <tr> 
         <td valign="top"> <p>网页内部的链接</p> </td> 
         <td valign="top"> <p><a name="m2">欲链接的位置</a></p> </td> 
         <td valign="top"> <p><a href="#m2">网页内部的链接</a></p> </td> 
        </tr> 
        <tr> 
         <td valign="top"> <p>网页外部的链接</p> </td> 
         <td valign="top"> <p><a name="m3">欲链接的位置</a></p> </td> 
         <td valign="top"> <p><a href="#m3">网页外部的链接</a></p> </td> 
        </tr> 
       </tbody> 
      </table> <p> </p> <p> </p> <p>【网页外部的链接】</p> <p><strong>标签解说：</strong>链接到外面去，可以扩充您网站的实用性及充实性，也正因这功能，才造就了<span style="font-family:Times New Roman">www</span><span style="font-family:宋体">五彩缤纷的世界。由于网路上的服务五花八门，所以不同的服务有不同的链接方法，我将之整理在下表。</span><strong></strong></p> <p><strong>使用范例：</strong></p> 
      <table> 
       <tbody> 
        <tr> 
         <td valign="top"> <p>网站链接</p> </td> 
         <td valign="top"> <p>好站</p> </td> 
         <td valign="top"> <p><a href="http://www.tool.la">好站</a></p> </td> 
        </tr> 
        <tr> 
         <td valign="top"> <p>电子邮件链接</p> </td> 
         <td valign="top"> <p>写情书给我</p> </td> 
         <td valign="top"> <p><a href="mailto:tool@jzba.com">写情书给我</a></p> </td> 
        </tr> 
        <tr> 
         <td valign="top"> <p>ftp链接</p> </td> 
         <td valign="top"> <p>下载档案</p> </td> 
         <td valign="top"> <p><a href="ftp://www.tool.la">下载档案</a></p> </td> 
        </tr> 
        <tr> 
         <td valign="top"> <p>news链接</p> </td> 
         <td valign="top"> <p>seednet news<span style="font-family:宋体">服务</span></p> </td> 
         <td valign="top"> <p><a href="news:news.tool.la">seednet news服务</a></p> </td> 
        </tr> 
        <tr> 
         <td valign="top"> <p>gopher链接</p> </td> 
         <td valign="top"> <p>seednet gopher<span style="font-family:宋体">服务</span></p> </td> 
         <td valign="top"> <p><a href="gopher://www.tool.la/">seednet gopher服务</a></p> </td> 
        </tr> 
        <tr> 
         <td valign="top"> <p>bbs链接</p> </td> 
         <td valign="top"> <p>seednet gopher<span style="font-family:宋体">服务</span></p> </td> 
         <td valign="top"> <p><a href="telnet://bbs.tool.la/">seednet bbs服务</a></p> </td> 
        </tr> 
       </tbody> 
      </table> <p> </p> <p> </p> <p>【链接标签的参数】</p> <p><strong>使用方法：</strong>在链接后面加入 <span style="font-family:Times New Roman">target=_</span><span style="font-family:宋体">参数</span><strong></strong></p> <p><strong>标签解说：</strong>链接的参数并不多，常见的大概就属 <span style="font-family:Times New Roman"> target </span><span style="font-family:宋体">这参数了，</span><span style="font-family:Times New Roman">target</span><span style="font-family:宋体">的意思是‘目标’，也就是网页链接的指向目标，这参数在框窗（</span><span style="font-family:Times New Roman">frame</span><span style="font-family:宋体">）里尤为重要！</span><strong></strong></p> <p><strong>使用范例：</strong></p> <p><strong>target=<span style="font-family:宋体">框窗名称：</span><br> 这在‘框架标签’中也有提到，而且也只有在框架（框窗 <span style="font-family:Times New Roman">or frame</span><span style="font-family:宋体">）中才用得到。正常而言，框窗有各自的名称，因此，我们可以利用此标签，来指定链接的内容显示到哪一个框窗中。</span></strong></p> <p><strong>target=_blank<span style="font-family:宋体">：</span><br> 将链接的画面内容，开在新的浏览视窗中。</strong></p> <p><strong>target=_parent<span style="font-family:宋体">：</span><br> 将链接的画面内容，当成文件的上一个画面。</strong></p> <p><strong>target=_self<span style="font-family:宋体">：</span><br> 将链接的画面内容，显示在目前的视窗中。</strong></p> <p><strong>target=_top<span style="font-family:宋体">：</span><br> 这个参数可以解决新链接的画面内容，被旧框窗包围的困扰，使用这参数，会将整个画面重新显示成链接的画面内容。</strong></p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p><strong>4.9 <span style="color:rgb(204,102,0)"><span style="font-family:宋体">表格标签</span> <</span></strong><strong><u><span style="color:rgb(0,0,255)"><span style="font-family:宋体">回细说索引</span></span></u></strong><strong><span style="color:rgb(204,102,0)">></span></strong></p> 
  <p>【网页中的表格观念】</p> 
  <p><span style="font-family:宋体">举个例子来说，如果今天我们要做一个</span>3栏2列的表格，在WORD中，只要设定表格为3栏、2列就完成了，不过，在网页中做一个3栏2列的表格，可是要分成好几个步骤的，第一个步骤，利用<TABLE></TABLE>标签告诉电脑我要做一个表格；第二个步骤，利用一组<TR></TR>标签先做一个横列，然后在横列中利用三组<TD></TD>标签再分出三栏；第三个步骤，重复第二个步骤，再做一横列然后再分三栏，如此才能得到一个3栏2列的表格。听不太懂吗？没关系，以下咱们就来慢慢的看个仔细：</p> 
  <p>首先我们来看一个最简单的表格：</p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>呈现结果</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><TABLE BORDER=1></p> <p><TR><TD>1</TD></TR></p> <p></TABLE></p> </td> 
     <td valign="top"> <p> </p> <p>1</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p><span style="font-family:宋体">利用</span><TABLE>这个标签来告诉电脑，这是一个表格，至于 BORDER=1 这参数是设定此表格的框线粗细为 1。一组<TR></TR>是设定一横列的开始。一组<TD></TD>则是设定一个栏位。当然，文字就是要摆在这里面。</p> 
  <p>现在我们再来增加二个格子：</p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>呈现结果</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><TABLE BORDER=1></p> <p><TR><TD>1</TD><TD>2</TD><TD>3</TD></TR></p> <p></TABLE></p> </td> 
     <td valign="top"> <p> </p> 
      <table> 
       <tbody> 
        <tr> 
         <td valign="top"> <p>1</p> </td> 
         <td valign="top"> <p>2</p> </td> 
         <td valign="top"> <p>3</p> </td> 
        </tr> 
       </tbody> 
      </table> <p> </p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p><span style="font-family:宋体">看见没有，</span><TR></TR><span style="font-family:宋体">没有增加，</span><span style="font-family:Times New Roman"><TD></TD></span><span style="font-family:宋体">却增加了二组。那如果我要再加上一列呢？很简单，就像这样：</span></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>呈现结果</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><TABLE BORDER=1></p> <p><TR><TD>1</TD><TD>2</TD><TD>3</TD></TR></p> <p><TR><TD>4</TD><TD>5</TD><TD>6</TD></TR></p> <p></TABLE></p> </td> 
     <td valign="top"> <p> </p> 
      <table> 
       <tbody> 
        <tr> 
         <td valign="top"> <p>1</p> </td> 
         <td valign="top"> <p>2</p> </td> 
         <td valign="top"> <p>3</p> </td> 
        </tr> 
        <tr> 
         <td valign="top"> <p>4</p> </td> 
         <td valign="top"> <p>5</p> </td> 
         <td valign="top"> <p>6</p> </td> 
        </tr> 
       </tbody> 
      </table> <p> </p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p> </p> 
  <p> </p> 
  <p>【合并表格栏位】</p> 
  <p><span style="font-family:宋体">并非所有的表格都是规规矩矩的只有几栏、几列而已，有时候，我们还会希望能够</span>“合并栏位”，让表格更美观、更实用一点，而谈到“合并栏位”，我们就必须知道，合并的方向有两种：一种是上下合并（也就是横列间的合并），一种是左右合并（也就是直栏间的合并），这两种合并方式各有不同的属性设定方法。</p> 
  <p><span style="font-family:宋体">左右栏位合并：基本上，您的表格已经学会啰！接下来，咱们就来看看，如何将</span> 1<span style="font-family:宋体">、</span><span style="font-family:Times New Roman">2</span><span style="font-family:宋体">、</span><span style="font-family:Times New Roman">3</span><span style="font-family:宋体">格通通合并变成一大格：</span></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>呈现结果</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><TABLE BORDER=1></p> <p><TR><TD COLSPAN=3>1</TD></TR></p> <p><TR><TD>4</TD><TD>5</TD><TD>6</TD></TR></p> <p></TABLE></p> </td> 
     <td valign="top"> <p> </p> 
      <table> 
       <tbody> 
        <tr> 
         <td valign="top"> <p>1</p> </td> 
         <td valign="top"> <p> </p> </td> 
         <td valign="top"> <p> </p> </td> 
        </tr> 
        <tr> 
         <td valign="top"> <p>4</p> </td> 
         <td valign="top"> <p>5</p> </td> 
         <td valign="top"> <p>6</p> </td> 
        </tr> 
       </tbody> 
      </table> <p> </p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p><span style="font-family:宋体">您应该会发现，怎么</span>2、3都消失了？只剩下1，而且该栏的<TD>标签还多了一个陌生的脸孔COLSPAN="3"，没错，这就是“左右栏位合并”的属性，COLSPAN="3"的意思就是“这个栏位左右横跨了3个栏位”，也正因如此，本来的两个<TD>都可以省掉了，因为都被并掉了嘛！</p> 
  <p><span style="font-family:宋体">上下栏位合并：学会了左右合并！接下来，咱们就来看看，如何上下合并，将</span> 1<span style="font-family:宋体">、</span><span style="font-family:Times New Roman">4</span><span style="font-family:宋体">格通通合并变成一大格：</span></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>呈现结果</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><TABLE BORDER=1></p> <p><TR><TD ROWSPAN=2>1</TD><TD>2</TD><TD>3</TD></TR></p> <p><TR><TD>5</TD><TD>6</TD></TR></p> <p></TABLE></p> </td> 
     <td valign="top"> <p> </p> 
      <table> 
       <tbody> 
        <tr> 
         <td valign="top"> <p>1</p> </td> 
         <td valign="top"> <p>2</p> </td> 
         <td valign="top"> <p>3</p> </td> 
        </tr> 
        <tr> 
         <td valign="top"> <p> </p> </td> 
         <td valign="top"> <p>5</p> </td> 
         <td valign="top"> <p>6</p> </td> 
        </tr> 
       </tbody> 
      </table> <p> </p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p><span style="font-family:宋体">有了上一次的经验后，我们就知道，要合并栏位就一定有些栏位会被</span>“牺牲”掉（也就是那些被合并的栏位啦！），这次我们要“上下合并”，我们将1与4合并成一个栏位，那么被牺牲的是哪一个栏位呢？没错就是下面那一个倒楣的4，我们看看上图，果然4已经删掉了，而在1的<TD>标签中则多了个生面孔ROWSPAN，这就是“上下栏位合并”的属性，ROWSPAN=2的意思就是“这个栏位上下连跨了2个栏位”，其结果如下：</p> 
  <p> </p> 
  <p> </p> 
  <p>【表格栏位对齐位置设定】</p> 
  <p><span style="font-family:宋体">我可以自己设定表格的大小吗？当然可以，您可以自由设定表格的</span>“宽”及“高”喔！我们来制作一个宽<span style="font-family:Times New Roman">100</span><span style="font-family:宋体">、高</span><span style="font-family:Times New Roman">60</span><span style="font-family:宋体">的表格，做法如下：</span></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>呈现结果</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><TABLE WIDTH="100" BORDER="1" HEIGHT="60"></p> <p><TR><TD>1</TD></TR></p> <p></TABLE></p> </td> 
     <td valign="top"> <p>1</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p><span style="font-family:宋体">哎呀！怎么</span> 1 <span style="font-family:宋体">老是在表格的左边呢？可以弄到中间吗？当然可以，只要在</span><span style="font-family:Times New Roman"><TD></span><span style="font-family:宋体">加入</span><span style="font-family:Times New Roman">ALIGN=CENTER </span><span style="font-family:宋体">这参数即可：</span></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>呈现结果</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><TABLE WIDTH="100" BORDER="1" HEIGHT="60"></p> <p><TR><TD ALIGN=CENTER>1</TD></TR></p> <p></TABLE></p> </td> 
     <td valign="top"> <p>1</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p><span style="font-family:宋体">此外，利用</span> ALIGN=RIGHT可以让表格中物件置右、利用 ALIGN=LEFT可以让表格中物件置左（预设值），至于为什么要加在<TD>中呢？因为，<TD>是一个栏位的意思，我们要指定在这栏位中的东西要置中或置左置右，就必须将ALIGN加在<TD>中。</p> 
  <p><span style="font-family:宋体">既然可以置中，那么也可以控制表格内文字靠上方、靠下方吗？可以的，只要利用</span> VALIGN=TOP<span style="font-family:宋体">这种属性即可让表格内物件靠上方对齐。</span></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>呈现结果</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><TABLE WIDTH="100" BORDER="1" HEIGHT="60"></p> <p><TR><TD ALIGN=CENTER VALIGN=TOP>1</TD></TR></p> <p></TABLE></p> </td> 
     <td valign="top"> <p>1</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p><span style="font-family:宋体">利用</span>VALIGN=MIDDLE可以让表格中物件垂直置中（预设值），VALIGN=BOTTOM可以H让表格中物件靠下方。</p> 
  <p> </p> 
  <p>【表格背景、底色设定】</p> 
  <p><span style="font-family:宋体">那么表格可以设定底色吗？可以的不但表格可以，您也可以指定某栏或某列的颜色，方法和加背景颜色一样，利用</span>BGCOLOR="<span style="font-family:宋体">颜色码</span><span style="font-family:Times New Roman">"</span><span style="font-family:宋体">就行了。底下是指定整格表格背景颜色的方法：</span></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>呈现结果</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><TABLE BORDER="1" BGCOLOR=#FFCC33></p> <p><TR><TD>1</TD><TD>2</TD></TR></p> <p><TR><TD>3</TD><TD>4</TD></TR></p> <p></TABLE></p> </td> 
     <td valign="top"> 
      <table> 
       <tbody> 
        <tr> 
         <td valign="top"> <p>1</p> </td> 
         <td valign="top"> <p>2</p> </td> 
        </tr> 
        <tr> 
         <td valign="top"> <p>3</p> </td> 
         <td valign="top"> <p>4</p> </td> 
        </tr> 
       </tbody> 
      </table> <p> </p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p><span style="font-family:宋体">将</span>BGCOLOR="颜色码"加在<TR>中，可以指定“一列”的背景颜色：</p> 
  <p> </p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>呈现结果</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><TABLE BORDER="1" ></p> <p><TR BGCOLOR=#FFCC33><TD>1</TD><TD>2</TD></TR></p> <p><TR><TD>3</TD><TD>4</TD></TR></p> <p></TABLE></p> </td> 
     <td valign="top"> 
      <table> 
       <tbody> 
        <tr> 
         <td valign="top"> <p>1</p> </td> 
         <td valign="top"> <p>2</p> </td> 
        </tr> 
        <tr> 
         <td valign="top"> <p>3</p> </td> 
         <td valign="top"> <p>4</p> </td> 
        </tr> 
       </tbody> 
      </table> <p> </p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p><span style="font-family:宋体">将</span>BGCOLOR="颜色码"加在<TD>中，可以指定“一栏”的背景颜色：</p> 
  <p> </p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>呈现结果</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><TABLE BORDER="1" ></p> <p><TR><TD BGCOLOR=#FFCC33>1</TD><TD>2</TD></TR></p> <p><TR><TD>3</TD><TD>4</TD></TR></p> <p></TABLE></p> </td> 
     <td valign="top"> 
      <table> 
       <tbody> 
        <tr> 
         <td valign="top"> <p>1</p> </td> 
         <td valign="top"> <p>2</p> </td> 
        </tr> 
        <tr> 
         <td valign="top"> <p>3</p> </td> 
         <td valign="top"> <p>4</p> </td> 
        </tr> 
       </tbody> 
      </table> <p> </p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p><span style="font-family:宋体">表格除了可以设定底色外，也可以用图片来作背景吗？当然可以，方法一样简单，只要将</span>BACKGROUND="<span style="font-family:宋体">图片名称</span><span style="font-family:Times New Roman">"</span><span style="font-family:宋体">加到表格中就行了。和表格背景颜色一样，不但表格可以设定背景图片，您也可以指定某栏或某列的背景图片：</span></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>呈现结果</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><TABLE BORDER="1" BGCOLOR=#FFCC33></p> <p><TR><TD>1</TD><TD>2</TD></TR></p> <p><TR><TD>3</TD><TD>4</TD></TR></p> <p></TABLE></p> </td> 
     <td valign="top"> 
      <table> 
       <tbody> 
        <tr> 
         <td valign="top"> <p>1</p> </td> 
         <td valign="top"> <p>2</p> </td> 
        </tr> 
        <tr> 
         <td valign="top"> <p>3</p> </td> 
         <td valign="top"> <p>4</p> </td> 
        </tr> 
       </tbody> 
      </table> <p> </p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p><span style="font-family:宋体">将</span>BACKGROUND="图片名称"加在<TD>中，可以指定“一栏”的背景颜色：</p> 
  <p> </p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>呈现结果</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><TABLE BORDER="1"></p> <p><TR><TD BGCOLOR=#FFCC33>1</TD><TD>2</TD></TR></p> <p><TR><TD>3</TD><TD>4</TD></TR></p> <p></TABLE></p> </td> 
     <td valign="top"> 
      <table> 
       <tbody> 
        <tr> 
         <td valign="top"> <p>1</p> </td> 
         <td valign="top"> <p>2</p> </td> 
        </tr> 
        <tr> 
         <td valign="top"> <p>3</p> </td> 
         <td valign="top"> <p>4</p> </td> 
        </tr> 
       </tbody> 
      </table> <p> </p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p> </p> 
  <p> </p> 
  <p>【表格框线设定】</p> 
  <p><span style="font-family:宋体">如何设定表格粗细？只要利用</span>BORDER="<span style="font-family:宋体">粗细值</span><span style="font-family:Times New Roman">"</span><span style="font-family:宋体">就行了。</span></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>呈现结果</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><TABLE BORDER=5></p> <p><TR><TD>1</TD></TR></p> <p></TABLE></p> </td> 
     <td valign="top"> <p> </p> <p>1</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p><span style="font-family:宋体">如何设定表格颜色？只要利用</span>BORDERCOLOR="<span style="font-family:宋体">颜色码</span><span style="font-family:Times New Roman">"</span><span style="font-family:宋体">就行了。</span></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>呈现结果</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><TABLE BORDER="5" BORDERCOLOR="#0080FF"></p> <p><TR><TD>1</TD></TR></p> <p></TABLE></p> </td> 
     <td valign="top"> <p> </p> <p>1</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p><span style="font-family:宋体">另外，我们也可以设定表格的阴影、亮面颜色，让表格看起来更有立体感喔！只要利用</span> BORDERCOLORLIGHT="#<span style="font-family:宋体">颜色码</span><span style="font-family:Times New Roman">"</span><span style="font-family:宋体">（亮面设定）</span><span style="font-family:Times New Roman">BORDERCOLORDARK="</span><span style="font-family:宋体">颜色码</span><span style="font-family:Times New Roman">"</span><span style="font-family:宋体">（暗面设定）就行了。</span></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>呈现结果</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><TABLE BORDER="5" BORDERCOLOR="#0080FF"BORDERCOLORLIGHT="#62B0FF" BORDERCOLORDARK="#004B97"></p> <p><TR><TD>1</TD></TR></p> <p></TABLE></p> </td> 
     <td valign="top"> <p> </p> <p>1</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p> </p> 
  <p> </p> 
  <p>【表格栏距设定】</p> 
  <p><span style="font-family:宋体">我们可以利用</span>CELLPADDING<span style="font-family:宋体">属性自由设定表格内文距离格线的距离，这个属性很好用，保持适当的距离，看起来比较舒服。一般而言内定值为</span><span style="font-family:Times New Roman">2</span><span style="font-family:宋体">，不过我建议设定为</span><span style="font-family:Times New Roman">4</span><span style="font-family:宋体">比较漂亮。</span></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>呈现结果</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><TABLE BORDER="1" CELLPADDING="10"></p> <p><TR><TD>1</TD><TD>2</TD></TR></p> <p></TABLE></p> </td> 
     <td valign="top"> <p> </p> 
      <table> 
       <tbody> 
        <tr> 
         <td valign="top"> <p>1</p> </td> 
         <td valign="top"> <p>2</p> </td> 
        </tr> 
       </tbody> 
      </table> <p> </p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p><span style="font-family:宋体">我们可以利用</span>CELLSPACING<span style="font-family:宋体">属性设定表格栏位格线之间的距离。一般而言内定值为</span><span style="font-family:Times New Roman">2</span><span style="font-family:宋体">，不过我通常习惯设为</span><span style="font-family:Times New Roman">0 </span><span style="font-family:宋体">。</span></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>呈现结果</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><TABLE BORDER="1" CELLSPACING="5"></p> <p><TR><TD>1</TD><TD>2</TD></TR></p> <p></TABLE></p> </td> 
     <td valign="top"> <p> </p> 
      <table> 
       <tbody> 
        <tr> 
         <td valign="top"> <p>1</p> </td> 
         <td valign="top"> <p>2</p> </td> 
        </tr> 
       </tbody> 
      </table> <p> </p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p><strong>4.10 <span style="color:rgb(204,102,0)"><span style="font-family:宋体">序列标签</span> <</span></strong><strong><u><span style="color:rgb(0,0,255)"><span style="font-family:宋体">回细说索引</span></span></u></strong><strong><span style="color:rgb(204,102,0)">></span></strong></p> 
  <p>【无序标签】</p> 
  <p><span style="font-family:宋体">序列标签基本上可分为两种，一种是</span>“无序条列”，一种是“有序条列”。所谓“无序条列”当然就是意指各条列间并无顺序关系，纯粹只是利用条列式方法来呈现资料而已，此种无序标签，在各条列前面均有一符号以示区隔。至于“有序条列”就是指各条列之间是有顺序的，从<span style="font-family:Times New Roman">1</span><span style="font-family:宋体">、</span><span style="font-family:Times New Roman">2</span><span style="font-family:宋体">、</span><span style="font-family:Times New Roman">3</span><span style="font-family:宋体">…一直延伸下去。</span></p> 
  <p><span style="font-family:宋体">我们先来看看</span>“无序列表标签”如何使用：</p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>呈现结果</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><UL></p> <p><LI>姓名：张三</p> <p><LI>生日：12/13</p> <p><LI>星座：射手座</p> <p></UL></p> </td> 
     <td valign="top"> <p>姓名：张三</p> <p>生日：<span style="font-family:Times New Roman">12/13</span></p> <p>星座：射手座</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p><span style="font-family:宋体">其中</span><UL>标签即为“无序列表标签”，每增加一列内容，就必须加一个<LI>。</p> 
  <p><span style="font-family:宋体">前面的符号一定是要圆形的吗？不，我们可以加入</span>TYPE="<span style="font-family:宋体">形状名称</span><span style="font-family:Times New Roman">"</span><span style="font-family:宋体">属性来改变其符号形状，一共有三个选择：</span><span style="font-family:Times New Roman">DISK</span><span style="font-family:宋体">（实心圆）、</span><span style="font-family:Times New Roman">SQUARE</span><span style="font-family:宋体">（小正方形）、</span><span style="font-family:Times New Roman">CIRCLE</span><span style="font-family:宋体">（空心圆）三种（由于本页使用</span><span style="font-family:Times New Roman">CSS</span><span style="font-family:宋体">故仅于</span><span style="font-family:Times New Roman">Netscape</span><span style="font-family:宋体">看得出效果。）：</span></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>呈现结果</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><UL TYPE="CIRCLE"></p> <p><LI>姓名：张三</p> <p><LI>生日：12/13</p> <p><LI>星座：射手座</p> <p></UL></p> </td> 
     <td valign="top"> <p>· 姓名：张三</p> <p>· 生日：<span style="font-family:Times New Roman">12/13</span></p> <p>· 星座：射手座</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p> </p> 
  <p> </p> 
  <p>【有序标签】</p> 
  <p>o <span style="font-family:宋体">接下来，我们来看看</span>“有序列表标签”如何使用：</p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>呈现结果</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><OL></p> <p><LI>姓名：张三</p> <p><LI>生日：12/13</p> <p><LI>星座：射手座</p> <p></OL></p> </td> 
     <td valign="top"> <p>· 姓名：张三</p> <p>· 生日：<span style="font-family:Times New Roman">12/13</span></p> <p>· 星座：射手座</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p><span style="font-family:宋体">其中</span><OL>标签即为“有序列表标签”，每增加一列内容，就必须加一个<LI>。</p> 
  <p>o <span style="font-family:宋体">和无序列表标签一样，我们也可以选择不同的符号来显示顺序，一样是用</span>TYPE<span style="font-family:宋体">属性来作更改，一更有五种符号：</span><span style="font-family:Times New Roman">1</span><span style="font-family:宋体">（数字）、</span><span style="font-family:Times New Roman">A</span><span style="font-family:宋体">（大写英文字母）、</span><span style="font-family:Times New Roman">a</span><span style="font-family:宋体">（小写英文字母）、</span><span style="font-family:Times New Roman">I</span><span style="font-family:宋体">（大写罗马字母）、</span><span style="font-family:Times New Roman">i</span><span style="font-family:宋体">（小写罗马字母）等五种：</span></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>呈现结果</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><OL TYPE="A"></p> <p><LI>姓名：张三</p> <p><LI>生日：12/13</p> <p><LI>星座：射手座</p> <p></OL></p> </td> 
     <td valign="top"> <p> 姓名：张三</p> <p> 生日：<span style="font-family:Times New Roman">12/13</span></p> <p> 星座：射手座</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p>o 另外，我们亦可指定序列起始的数目，其方法如下：</p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>呈现结果</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><OL START="8"></p> <p><LI>姓名：张三</p> <p><LI>生日：12/13</p> <p><LI>星座：射手座</p> <p></OL></p> </td> 
     <td valign="top"> <p> 姓名：张三</p> <p> 生日：<span style="font-family:Times New Roman">12/13</span></p> <p> 星座：射手座</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p> </p> 
  <p> </p> 
  <p>【定义列表标签】</p> 
  <p>o <span style="font-family:宋体">接下来我们要说明的这个标签，是</span>“定义列表标签”也是属于序列标签之一。我们先来举个例子，我们常常会在文章中看见这样的格式：</p> 
  <p>CSS（Cascading style sheet）</p> 
  <p>CSS是由W3C于1996年12月所公布的一项新技术，什么叫做Cascading style sheet？简单说来他是一种具有阶层性的形式设定，能够让网页设计者在设计网页时，对于网页上的任何物件均有更佳的操控性…</p> 
  <p> </p> 
  <p>网页里也有可以做到这种效果的标签喔！现在要来跟各位说的就是这个标签。咱们先来看看这标签的用法：</p> 
  <p>o <span style="font-family:宋体">我们先来看看</span>“定义列表标签”如何使用：</p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>呈现结果</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><DL></p> <p><DT>小标题</p> <p><DD>标题的内容说明</p> <p></DL></p> </td> 
     <td valign="top"> <p>小标题</p> <p>标题的内容说明</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p><strong>4.11 <span style="color:rgb(204,102,0)"><span style="font-family:宋体">表单标签</span> <</span></strong><strong><u><span style="color:rgb(0,0,255)"><span style="font-family:宋体">回细说索引</span></span></u></strong><strong><span style="color:rgb(204,102,0)">></span></strong></p> 
  <p>【表单的用途】</p> 
  <p><span style="font-family:宋体">对于一般的网页设计初学者而言，表单功能其实并不常用，因为表单通常必须配合着</span>CGI、JAVA Script程式或是ASP程式来运作，不然表单单独存在的意义并不大。不过，一旦有机会将表单运用到网页中时，您的网页将摆脱单向呈现，而开始迈入和使用者互动的阶段喔！</p> 
  <p><span style="font-family:宋体">本单元纯粹以介绍各式表单为主，至于一些</span>CGI或ASP观念在此我就不提出了，因为提供零碎的观念，倒不如去看看专门介绍CGI的书籍来的妥当。 </p> 
  <p> </p> 
  <p>【各种输入类型】</p> 
  <p><strong>文字输入列</strong><span style="font-family:宋体">：每个表单之所以会有不同的类型，原因就在于</span>TYPE="<span style="font-family:宋体">表单类型</span><span style="font-family:Times New Roman">"</span><span style="font-family:宋体">设定的不同而已，我们就先来看看第一个类型：文字输入列。文字输入列的形态就是</span><span style="font-family:Times New Roman">TYPE="TEXT</span><span style="font-family:宋体">，其使用方法如下：</span><strong></strong></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>呈现结果</p> </td> 
     <td valign="top"> <p>姓名： </p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p><FORM></p> <p>姓名：<INPUT TYPE="TEXT" NAME="NAME" SIZE="20"></p> <p></FORM></p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p>其有下列可设定之属性：</p> 
  <p>NAME="<span style="font-family:宋体">名称</span><span style="font-family:Times New Roman">"</span><span style="font-family:宋体">，是设定此一栏位的名称，程式中常会用到。</span></p> 
  <p>SIZE="<span style="font-family:宋体">数值</span><span style="font-family:Times New Roman">"</span><span style="font-family:宋体">，是设定此一栏位显现的宽度。</span></p> 
  <p>VALUE="<span style="font-family:宋体">预设内容</span><span style="font-family:Times New Roman">"</span><span style="font-family:宋体">，是设定此一栏位的预设内容。</span></p> 
  <p>ALIGN="<span style="font-family:宋体">对齐方式</span><span style="font-family:Times New Roman">"</span><span style="font-family:宋体">，是设定此一栏位的对齐方式，其值有：</span><span style="font-family:Times New Roman">TOP</span><span style="font-family:宋体">（向上对齐）、</span><span style="font-family:Times New Roman">MIDDLE</span><span style="font-family:宋体">（向中对齐）、</span><span style="font-family:Times New Roman">BOTTOM</span><span style="font-family:宋体">（向下对齐）、</span><span style="font-family:Times New Roman">RIGHT</span><span style="font-family:宋体">（向右对齐）、</span><span style="font-family:Times New Roman">LEFT</span><span style="font-family:宋体">（向左对齐）、</span><span style="font-family:Times New Roman">TEXTTOP</span><span style="font-family:宋体">（向文字顶部对齐）、</span><span style="font-family:Times New Roman">BASELINE</span><span style="font-family:宋体">（向文字底部对齐）、</span><span style="font-family:Times New Roman">ABSMIDDLE</span><span style="font-family:宋体">（绝对置中）、</span><span style="font-family:Times New Roman">ABSBOTTOM</span><span style="font-family:宋体">（绝对置下）等。</span></p> 
  <p>MAXLENGTH="<span style="font-family:宋体">数值</span><span style="font-family:Times New Roman">"</span><span style="font-family:宋体">，是设定此一栏位可设定输入的最大长度。</span></p> 
  <p> </p> 
  <p><strong>单选核取表单</strong><span style="font-family:宋体">：利用</span>TYPE="RADIO"<span style="font-family:宋体">就会产生单选核取表单，单选核取表单通常是好几个选项一起摆出来供使用者点选，一次只能从中选一个，故为单选核取表单。</span><strong></strong></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>呈现结果</p> </td> 
     <td valign="top"> <p>性别：男  女 </p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p><FORM></p> <p>性别：</p> <p>男 <INPUT TYPE="RADIO" NAME="SEX" VALUE="BOY"></p> <p>女 <INPUT TYPE="RADIO" NAME="SEX" VALUE="GIRL"></p> <p></FORM></p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p>其有下列可设定之属性：</p> 
  <p>o NAME="<span style="font-family:宋体">名称</span><span style="font-family:Times New Roman">"</span><span style="font-family:宋体">，是设定此一栏位的名称，程式中常会用到。</span></p> 
  <p>o VALUE="<span style="font-family:宋体">内容</span><span style="font-family:Times New Roman">"</span><span style="font-family:宋体">，是设定此一栏位的内容、值或是意义。</span></p> 
  <p>o ALIGN="<span style="font-family:宋体">对齐方式</span><span style="font-family:Times New Roman">"</span><span style="font-family:宋体">，是设定此一栏位的对齐方式，其值有：</span><span style="font-family:Times New Roman">TOP</span><span style="font-family:宋体">（向上对齐）、</span><span style="font-family:Times New Roman">MIDDLE</span><span style="font-family:宋体">（向中对齐）、</span><span style="font-family:Times New Roman">BOTTOM</span><span style="font-family:宋体">（向下对齐）、</span><span style="font-family:Times New Roman">RIGHT</span><span style="font-family:宋体">（向右对齐）、</span><span style="font-family:Times New Roman">LEFT</span><span style="font-family:宋体">（向左对齐）、</span><span style="font-family:Times New Roman">TEXTTOP</span><span style="font-family:宋体">（向文字顶部对齐）、</span><span style="font-family:Times New Roman">BASELINE</span><span style="font-family:宋体">（向文字底部对齐）、</span><span style="font-family:Times New Roman">ABSMIDDLE</span><span style="font-family:宋体">（绝对置中）、</span><span style="font-family:Times New Roman">ABSBOTTOM</span><span style="font-family:宋体">（绝对置下）等。</span></p> 
  <p>o CHECKED<span style="font-family:宋体">，是设定此一栏位为预设选取值。</span></p> 
  <p> </p> 
  <p>o <strong>复选核取表单</strong><span style="font-family:宋体">：利用</span>TYPE=" CHECKBOX "<span style="font-family:宋体">就会产生复选核取表单，复选核取表单通常是好几个选项一起摆出来供使用者点选，一次可以同时选好几个，故为复选核取表单。</span><strong></strong></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>呈现结果</p> </td> 
     <td valign="top"> <p>喜好：  电影  看书</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p><FORM></p> <p>喜好：</p> <p><INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="MOVIE">电影</p> <p><INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="BOOK">看书</p> <p></FORM></p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p>其有下列可设定之属性：</p> 
  <p>o NAME="<span style="font-family:宋体">名称</span><span style="font-family:Times New Roman">"</span><span style="font-family:宋体">，是设定此一栏位的名称，程式中常会用到。</span></p> 
  <p>o VALUE="<span style="font-family:宋体">内容</span><span style="font-family:Times New Roman">"</span><span style="font-family:宋体">，是设定此一栏位的内容、值或是意义。</span></p> 
  <p>o ALIGN="<span style="font-family:宋体">对齐方式</span><span style="font-family:Times New Roman">"</span><span style="font-family:宋体">，是设定此一栏位的对齐方式，其值有：</span><span style="font-family:Times New Roman">TOP</span><span style="font-family:宋体">（向上对齐）、</span><span style="font-family:Times New Roman">MIDDLE</span><span style="font-family:宋体">（向中对齐）、</span><span style="font-family:Times New Roman">BOTTOM</span><span style="font-family:宋体">（向下对齐）、</span><span style="font-family:Times New Roman">RIGHT</span><span style="font-family:宋体">（向右对齐）、</span><span style="font-family:Times New Roman">LEFT</span><span style="font-family:宋体">（向左对齐）、</span><span style="font-family:Times New Roman">TEXTTOP</span><span style="font-family:宋体">（向文字顶部对齐）、</span><span style="font-family:Times New Roman">BASELINE</span><span style="font-family:宋体">（向文字底部对齐）、</span><span style="font-family:Times New Roman">ABSMIDDLE</span><span style="font-family:宋体">（绝对置中）、</span><span style="font-family:Times New Roman">ABSBOTTOM</span><span style="font-family:宋体">（绝对置下）等。</span></p> 
  <p>o CHECKED<span style="font-family:宋体">，是设定此一栏位为预设选取值。</span></p> 
  <p> </p> 
  <p>o <strong>密码表单</strong><span style="font-family:宋体">：利用</span>TYPE=" PASSWORD "<span style="font-family:宋体">就会产生一个密码表单，密码表单和文字输入表单长得几乎一样，差别就在于密码表单在输入时全部会以星号来取代输入的文字，以防他人偷窥。</span><strong></strong></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>呈现结果</p> </td> 
     <td valign="top"> <p>请输入密码： </p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p><FORM></p> <p>请输入密码：<INPUT TYPE="PASSWORD" NAME="INPUT"></p> <p></FORM></p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p>其有下列可设定之属性：</p> 
  <p>o NAME="<span style="font-family:宋体">名称</span><span style="font-family:Times New Roman">"</span><span style="font-family:宋体">，是设定此一栏位的名称，程式中常会用到。</span></p> 
  <p>o SIZE="<span style="font-family:宋体">数值</span><span style="font-family:Times New Roman">"</span><span style="font-family:宋体">，是设定此一栏位显现的宽度。</span></p> 
  <p>o VALUE="<span style="font-family:宋体">预设内容</span><span style="font-family:Times New Roman">"</span><span style="font-family:宋体">，是设定此一栏位的预设内容，不过呈现出来仍是星号。</span></p> 
  <p>o ALIGN="<span style="font-family:宋体">对齐方式</span><span style="font-family:Times New Roman">"</span><span style="font-family:宋体">，是设定此一栏位的对齐方式，其值有：</span><span style="font-family:Times New Roman">TOP</span><span style="font-family:宋体">（向上对齐）、</span><span style="font-family:Times New Roman">MIDDLE</span><span style="font-family:宋体">（向中对齐）、</span><span style="font-family:Times New Roman">BOTTOM</span><span style="font-family:宋体">（向下对齐）、</span><span style="font-family:Times New Roman">RIGHT</span><span style="font-family:宋体">（向右对齐）、</span><span style="font-family:Times New Roman">LEFT</span><span style="font-family:宋体">（向左对齐）、</span><span style="font-family:Times New Roman">TEXTTOP</span><span style="font-family:宋体">（向文字顶部对齐）、</span><span style="font-family:Times New Roman">BASELINE</span><span style="font-family:宋体">（向文字底部对齐）、</span><span style="font-family:Times New Roman">ABSMIDDLE</span><span style="font-family:宋体">（绝对置中）、</span><span style="font-family:Times New Roman">ABSBOTTOM</span><span style="font-family:宋体">（绝对置下）等。</span></p> 
  <p>o MAXLENGTH="<span style="font-family:宋体">数值</span><span style="font-family:Times New Roman">"</span><span style="font-family:宋体">，是设定此一栏位可设定输入的最大长度。</span></p> 
  <p> </p> 
  <p>o <strong>送出按钮</strong><span style="font-family:宋体">：通常我们表单填完之后，都会有一个送出按钮以及清除重写的按钮，分别是利用</span>TYPE=" SUBMIT "<span style="font-family:宋体">及</span><span style="font-family:Times New Roman">TYPE=" RESET "</span><span style="font-family:宋体">来产生，相当的简单易用。</span><strong></strong></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>呈现结果</p> </td> 
     <td valign="top"> <p> </p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p><FORM></p> <p><INPUT TYPE="SUBMIT" VALUE="送出资料"></p> <p><INPUT TYPE="RESET" VALUE="重新填写"></p> <p></FORM></p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p>其有下列可设定之属性：</p> 
  <p>o NAME="<span style="font-family:宋体">名称</span><span style="font-family:Times New Roman">"</span><span style="font-family:宋体">，是设定此一按钮的名称。</span></p> 
  <p>o VALUE="<span style="font-family:宋体">文字</span><span style="font-family:Times New Roman">"</span><span style="font-family:宋体">，是设定此一按钮上要呈现的文字，若是没有设定，浏览器也会自动替您加上“送出查询”、“重设”等字样。</span></p> 
  <p>o ALIGN="<span style="font-family:宋体">对齐方式</span><span style="font-family:Times New Roman">"</span><span style="font-family:宋体">，是设定此一栏位的对齐方式，其值有：</span><span style="font-family:Times New Roman">TOP</span><span style="font-family:宋体">（向上对齐）、</span><span style="font-family:Times New Roman">MIDDLE</span><span style="font-family:宋体">（向中对齐）、</span><span style="font-family:Times New Roman">BOTTOM</span><span style="font-family:宋体">（向下对齐）、</span><span style="font-family:Times New Roman">RIGHT</span><span style="font-family:宋体">（向右对齐）、</span><span style="font-family:Times New Roman">LEFT</span><span style="font-family:宋体">（向左对齐）、</span><span style="font-family:Times New Roman">TEXTTOP</span><span style="font-family:宋体">（向文字顶部对齐）、</span><span style="font-family:Times New Roman">BASELINE</span><span style="font-family:宋体">（向文字底部对齐）、</span><span style="font-family:Times New Roman">ABSMIDDLE</span><span style="font-family:宋体">（绝对置中）、</span><span style="font-family:Times New Roman">ABSBOTTOM</span><span style="font-family:宋体">（绝对置下）等。</span></p> 
  <p> </p> 
  <p>o <strong>按钮元件</strong><span style="font-family:宋体">：表单中或是</span>JAVA SCRIPT<span style="font-family:宋体">常会用到按钮来作一些效果，因此，我们可以利用</span><span style="font-family:Times New Roman">TYPE=" BUTTON "</span><span style="font-family:宋体">来产生一个按钮，相当简单。</span><strong></strong></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>呈现结果</p> </td> 
     <td valign="top"> <p>请按下按钮： </p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p><FORM></p> <p>请按下按钮：<INPUT TYPE="BUTTON" NAME="OK" VALUE="我同意"></p> <p></FORM></p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p>其有下列可设定之属性：</p> 
  <p>o NAME="<span style="font-family:宋体">名称</span><span style="font-family:Times New Roman">"</span><span style="font-family:宋体">，是设定此一按钮的名称。</span></p> 
  <p>o VALUE="<span style="font-family:宋体">文字</span><span style="font-family:Times New Roman">"</span><span style="font-family:宋体">，是设定此一按钮上要呈现的文字。</span></p> 
  <p>o ALIGN="<span style="font-family:宋体">对齐方式</span><span style="font-family:Times New Roman">"</span><span style="font-family:宋体">，是设定此一栏位的对齐方式，其值有：</span><span style="font-family:Times New Roman">TOP</span><span style="font-family:宋体">（向上对齐）、</span><span style="font-family:Times New Roman">MIDDLE</span><span style="font-family:宋体">（向中对齐）、</span><span style="font-family:Times New Roman">BOTTOM</span><span style="font-family:宋体">（向下对齐）、</span><span style="font-family:Times New Roman">RIGHT</span><span style="font-family:宋体">（向右对齐）、</span><span style="font-family:Times New Roman">LEFT</span><span style="font-family:宋体">（向左对齐）、</span><span style="font-family:Times New Roman">TEXTTOP</span><span style="font-family:宋体">（向文字顶部对齐）、</span><span style="font-family:Times New Roman">BASELINE</span><span style="font-family:宋体">（向文字底部对齐）、</span><span style="font-family:Times New Roman">ABSMIDDLE</span><span style="font-family:宋体">（绝对置中）、</span><span style="font-family:Times New Roman">ABSBOTTOM</span><span style="font-family:宋体">（绝对置下）等。</span></p> 
  <p> </p> 
  <p>o <strong>隐藏栏位</strong><span style="font-family:宋体">：表单中有时有些东西因为某些因素，不想让使用者看到，但因程式需要却又不得不存在，此时，我们就可以利用</span>TYPE=" HIDDEN "<span style="font-family:宋体">来产生一个隐藏的栏位。</span><strong></strong></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>呈现结果</p> </td> 
     <td valign="top"> <p>隐藏栏位：</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p><FORM></p> <p>隐藏栏位：<INPUT TYPE="HIDDEN" NAME="NOSEE" VALUE="看不到"></p> <p></FORM></p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p>其有下列可设定之属性：</p> 
  <p>o NAME="<span style="font-family:宋体">名称</span><span style="font-family:Times New Roman">"</span><span style="font-family:宋体">，是设定此一栏位的名称。</span></p> 
  <p>o VALUE="<span style="font-family:宋体">文字</span><span style="font-family:Times New Roman">"</span><span style="font-family:宋体">，是设定此一栏位的值、文字或意义。</span></p> 
  <p> </p> 
  <p> </p> 
  <p>【大量文字输入元件】</p> 
  <p>o <span style="font-family:宋体">有时候我们会希望让使用者输入比较大量的文字，此时，文字输入列就显得不敷使用，因此我们就可以利用</span><TEXTAREA></TEXTAREA><span style="font-family:宋体">来产生一个可以输入大量文字的元件，夹在两个标签中的文字会出现在框框中，可作为预设文字。</span></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>呈现结果</p> </td> 
     <td valign="top"> <p>请输入您的意见：</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p> </p> <p>原始码</p> </td> 
     <td valign="top"> <p><FORM></p> <p>请输入您的意见：<BR></p> <p><TEXTAREA NAME="TALK" COLS="20" ROWS="3"></TEXTAREA></p> <p></FORM></p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p>其有下列可设定之属性：</p> 
  <p>o NAME="<span style="font-family:宋体">名称</span><span style="font-family:Times New Roman">"</span><span style="font-family:宋体">，是设定此一栏位的名称。</span></p> 
  <p>o WRAP="<span style="font-family:宋体">设定值</span><span style="font-family:Times New Roman">"</span><span style="font-family:宋体">，是设定此一栏位的换行模式。设定值有三种：</span><span style="font-family:Times New Roman">OFF</span><span style="font-family:宋体">（输入文字不会自动换行）、</span><span style="font-family:Times New Roman">VIRTUAL</span><span style="font-family:宋体">（输入文字在萤幕上会自动换行，不过若是使用者没有自行按下</span><span style="font-family:Times New Roman">ENTER</span><span style="font-family:宋体">换行，送出资料时，也视为没有换行）、</span><span style="font-family:Times New Roman">PHYSICAL</span><span style="font-family:宋体">（输入文字会自动换行，送出资料时，会将萤幕上的自动换行，视为换行效果送出）。</span></p> 
  <p>o COLS="<span style="font-family:宋体">数值</span><span style="font-family:Times New Roman">"</span><span style="font-family:宋体">，是设定此一栏位的行数（横向字数）。</span></p> 
  <p>o ROWS="<span style="font-family:宋体">数值</span><span style="font-family:Times New Roman">"</span><span style="font-family:宋体">，是设定此一栏位的列数（垂直字数）。</span></p> 
  <p> </p> 
  <p> </p> 
  <p>【下拉式选单】</p> 
  <p>o <span style="font-family:宋体">下拉式选单令整个网页看起来有很专业的感觉，我们只要利用</span><SELECT NAME="<span style="font-family:宋体">名称</span><span style="font-family:Times New Roman">"></span><span style="font-family:宋体">便可以产生一个下拉式选单，另外，还需要配合</span><span style="font-family:Times New Roman"><OPTION></span><span style="font-family:宋体">标签来产生选项，这样才算完整喔！</span></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>呈现结果</p> </td> 
     <td valign="top"> <p>您喜欢看书吗？： </p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p><FORM></p> <p>您喜欢看书吗？：</p> <p><SELECT NAME="LIKE"></p> <p><OPTION VALUE="非常喜欢">非常喜欢</p> <p><OPTION VALUE="还算喜欢">还算喜欢</p> <p><OPTION VALUE="不太喜欢">不太喜欢</p> <p><OPTION VALUE="非常讨厌">非常讨厌</p> <p></SELECT></p> <p></FORM></p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p>其有下列可设定之属性：</p> 
  <p>o SIZE="<span style="font-family:宋体">数值</span><span style="font-family:Times New Roman">"</span><span style="font-family:宋体">，是设定此一栏位的大小，预设值为</span><span style="font-family:Times New Roman">1</span><span style="font-family:宋体">，若是您的选项有四个，然后您将</span><span style="font-family:Times New Roman">SIZE</span><span style="font-family:宋体">设成</span><span style="font-family:Times New Roman">4</span><span style="font-family:宋体">，那么，下拉式选单便会变成选项方块，将四个选项一起呈现在方块中。</span></p> 
  <p>o MULTIPLE<span style="font-family:宋体">，是设定此一栏位为复选，可以一次选好几个选项。</span></p> 
  <p><strong>4.12 <span style="color:rgb(204,102,0)"><span style="font-family:宋体">框架标签</span> <</span></strong><strong><u><span style="color:rgb(0,0,255)"><span style="font-family:宋体">回细说索引</span></span></u></strong><strong><span style="color:rgb(204,102,0)">></span></strong></p> 
  <p>【框架的基本概念】</p> 
  <p>o <span style="font-family:宋体">首先，各位先看看右手边这张图，我将利用这张图来作解说，这样子，讲起来可能会清楚一点。</span>OK<span style="font-family:宋体">！我们可以看见，右边的这个视窗，一共分为</span><span style="font-family:Times New Roman">1 </span><span style="font-family:宋体">、</span><span style="font-family:Times New Roman">2 </span><span style="font-family:宋体">、</span><span style="font-family:Times New Roman">3 </span><span style="font-family:宋体">三个框架，每一个框架，各有其显示的内容分别是</span><span style="font-family:Times New Roman">a.htm</span><span style="font-family:宋体">、</span><span style="font-family:Times New Roman">b.htm</span><span style="font-family:宋体">、</span><span style="font-family:Times New Roman">c.htm</span><span style="font-family:宋体">三个档案。然而左下角的那个</span><span style="font-family:Times New Roman">index.htm </span><span style="font-family:宋体">是做什么用的呢？</span></p> 
  <p>o <span style="font-family:宋体">原来，左下角的这个档案</span> index.htm<span style="font-family:宋体">，就是要告诉电脑，我们要将画面分割成这样，也就是说，</span><strong><span style="font-family:宋体">所有</span>Frame<span style="font-family:宋体">的标签，其实都只摆在</span><span style="font-family:Times New Roman">index.htm </span><span style="font-family:宋体">这个档案里</span></strong><span style="font-family:宋体">。（当然，不是档名一定要叫做</span> index.htm<span style="font-family:宋体">取其他档名也是可以的。）</span></p> 
  <p>o <span style="font-family:宋体">这样明白了吗？总之，您要分割几个框框，就一定会有几个对应的</span>html<span style="font-family:宋体">档案（假如您要分割</span><span style="font-family:Times New Roman">100</span><span style="font-family:宋体">个框框，就要有</span><span style="font-family:Times New Roman">100</span><span style="font-family:宋体">个</span><span style="font-family:Times New Roman">html</span><span style="font-family:宋体">档就对了。），另外，还会多一个档案是来告诉电脑要如何分割的。（也就是例中的</span><span style="font-family:Times New Roman">index.htm </span><span style="font-family:宋体">档啦！）</span></p> 
  <p> </p> 
  <p> </p> 
  <p>【开始分割】</p> 
  <p>o 别急、别急，分割视窗可是一门学问，要分割也是要一步一步来的。看看刚刚那例子，想像画面是一个蛋糕，你要怎么割，才能割成那样呢？</p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>呈现结果</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><HTML></p> <p><HEAD></p> <p><TITLE>框窗实作</TITLE></p> <p></HEAD></p> <p></HTML></p> </td> 
     <td valign="top"> <p> </p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p>o <span style="font-family:宋体">各位会发现，奇怪，在上面的语法中，怎么都没见到</span><BODY></BODY><span style="font-family:宋体">熟悉的身影？呵呵</span><span style="font-family:Times New Roman">...</span><span style="font-family:宋体">没错，它已经被待会儿要加进去的</span><span style="font-family:Times New Roman"><FRAMESET></FRAMESET></span><span style="font-family:宋体">标签给取代了！也就是说，如果我们要分割画面，就要先用</span><span style="font-family:Times New Roman"><FRAMESET></span><span style="font-family:宋体">标签告诉电脑说：‘喂！我要开始分割了！’此时，</span><span style="font-family:Times New Roman"><BODY></span><span style="font-family:宋体">是派不上用场的，所以躲到一旁凉快去了！</span></p> 
  <p>o <span style="font-family:宋体">现在开始动手割割看啰！我们先将画面分成左右两边（左边就是框窗</span> 1 <span style="font-family:宋体"> 了，右边就暂定为 </span><span style="font-family:Times New Roman">2 </span><span style="font-family:宋体">等一下还要分割呢！），如下图：</span></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>呈现结果</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><HTML></p> <p><HEAD></p> <p><TITLE>框窗实作</TITLE></p> <p></HEAD></p> <p><FRAMESET COLS="120,*" ></p> <p><FRAME SRC="a.htm" NAME="1"> </p> <p><FRAME SRC="b.htm" NAME="2"> </p> <p></FRAMESET></p> <p></HTML></p> </td> 
     <td valign="top"> <p> </p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p><span style="font-family:宋体">在</span><FRAMESET><span style="font-family:宋体">中，我们要告诉电脑到底是要左右分（</span><span style="font-family:Times New Roman">COLS</span><span style="font-family:宋体">）？还是上下分（</span><span style="font-family:Times New Roman">ROWS</span><span style="font-family:宋体">）。一开始我们是左右分，所以我们写成</span><span style="font-family:Times New Roman"><FRAMESET COLS="120,*" ></span><span style="font-family:宋体">。</span><span style="font-family:Times New Roman">COLS="120,*"</span><span style="font-family:宋体">就是说，左边那一栏强制定为 </span><span style="font-family:Times New Roman">120</span><span style="font-family:宋体">点，右边则随视窗大小而变。除了直接写点数外，我们亦可用百分比来表示，例如</span><span style="font-family:Times New Roman">COLS="20%,80%"</span><span style="font-family:宋体">也是可以的。</span></p> 
  <p><span style="font-family:宋体">然后，再将右边的框窗再割成上下两个画面（也就是框窗</span> 2 <span style="font-family:宋体"> 和 </span><span style="font-family:Times New Roman">3 </span><span style="font-family:宋体">了）。如下图：</span></p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p>原始码</p> </td> 
     <td valign="top"> <p>呈现结果</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><HTML></p> <p><HEAD></p> <p><TITLE>框窗实作</TITLE></p> <p></HEAD></p> <p><FRAMESET COLS="120,*"></p> <p><FRAME SRC="a.htm" NAME="1"> </p> <p><FRAMESET ROWS="100,*"></p> <p><FRAME SRC="b.htm" NAME="2"> </p> <p><FRAME SRC="c.htm" NAME="3"> </p> <p></FRAMESET></p> <p></FRAMESET></p> <p></HTML></p> </td> 
     <td valign="top"> <p> </p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p><span style="font-family:宋体">看见了没？原本的</span><FRAME SRC="b.htm" NAME="2"><span style="font-family:宋体">（在第</span><span style="font-family:Times New Roman">3 </span><span style="font-family:宋体">点的语法中）被另一组</span><span style="font-family:Times New Roman"><FRAMESET ROWS="100,*" ></span><span style="font-family:宋体">所取代了！所以要注意喔！第二组</span><span style="font-family:Times New Roman"><FRAMESET ROWS="100,*" ></span><span style="font-family:宋体">是被第一组</span><span style="font-family:Times New Roman"><FRAMESET COLS="120,*" ></span><span style="font-family:宋体">所包围起来的喔！（乱七八糟了对不对？）</span></p> 
  <p><span style="font-family:宋体">呵呵</span>...<span style="font-family:宋体">不知不觉就大功告成了，其实只要将最后完成的那些语法存成</span><span style="font-family:Times New Roman">index.htm</span><span style="font-family:宋体">，然后再准备三个档</span><span style="font-family:Times New Roman">a.htm </span><span style="font-family:宋体">、</span><span style="font-family:Times New Roman">b.htm</span><span style="font-family:宋体">、</span><span style="font-family:Times New Roman">c.htm</span><span style="font-family:宋体">那么就完工啰！当然，这是一个最阳春的分割法，我会再将一些进阶的标签在底下一一说明。</span></p> 
  <p> </p> 
  <p> </p> 
  <p>【其他标签参数说明】</p> 
  <p> </p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p><FRAMESET COLS="120,*" frameborder=0 framespacing=5></p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>COLS="120,*"<br> 就是垂直切割画面啦！你可以一次切成左右两个画面，当然也可以切成三个，很简单只要写成 <span style="font-family:Times New Roman"> COLS="30,*,50" </span><span style="font-family:宋体">（数字随便您自己调整啦！），依此类推，四个以上当然就是四组数字啦！</span></p> <p>ROWS="120,*"<br> 就是横向切割画面，也就是将画面上下分开，切法同上。</p> <p>frameborder=0<br> 设定框架的边框，其值只有 <span style="font-family:Times New Roman">0 </span><span style="font-family:宋体">和</span><span style="font-family:Times New Roman">1 </span><span style="font-family:宋体">，</span><span style="font-family:Times New Roman">0 </span><span style="font-family:宋体">就是不要边框，</span><span style="font-family:Times New Roman">1 </span><span style="font-family:宋体">就是要显示边框。边框是无法调整粗细的。</span></p> <p>framespacing=5<br> 表示框架与框架间的保留空白的距离，以免看起来太挤。</p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p><FRAME SRC="a.htm" NAME="1" frameborder=0 scrolling="no" noresize marginhight=2 marginwidth=2></p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>SRC="a.htm"<br> 设定此框架中要显示的网页名称，每个框架一定要对应一个网页，否则就会产生错误，这里就是要您填入对应网页的名称。（如果该网页在不同目录，记得路径要写清楚）</p> <p>NAME="1"<br> 设定这个框架的名称，这样才能指定框架来作链接，所以一定要设定喔！当然名称随你高兴取名。</p> <p>frameborder=0<br> 设定框架的边框，其值只有 <span style="font-family:Times New Roman">0 </span><span style="font-family:宋体">和</span><span style="font-family:Times New Roman">1 </span><span style="font-family:宋体">，</span><span style="font-family:Times New Roman">0 </span><span style="font-family:宋体">就是不要边框，</span><span style="font-family:Times New Roman">1 </span><span style="font-family:宋体">就是要显示边框。边框是无法调整粗细的。</span></p> <p>scrolling="no"<br> 设定是否要显示卷轴，<span style="font-family:Times New Roman">YES</span><span style="font-family:宋体">是要显示卷轴，</span><span style="font-family:Times New Roman">NO</span><span style="font-family:宋体">是无论如何都不要显示，</span><span style="font-family:Times New Roman">AUTO</span><span style="font-family:宋体">是视情况显示。</span></p> <p>noresize<br> 设定不让使用者可以改变这个框框的大小，如果没有设定这个参数，使用者可以很容易的拉动框架，改变其大小。</p> <p>marginhight=2<br> 表示框架高度部份边缘所保留的空间。</p> <p>marginwidth=2<br> 表示框架宽度部份边缘所保留的空间。</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p> </p> 
  <p> </p> 
  <p>【相关用法】</p> 
  <p> </p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p><strong>◆ <noframe></strong></p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>使用方法：<span style="font-family:Times New Roman"><noframe></span><span style="font-family:宋体">请换有支援</span><span style="font-family:Times New Roman">Frame</span><span style="font-family:宋体">功能的浏览器</span><span style="font-family:Times New Roman"></noframe></span></p> <p><strong>标签解说：</strong>有些浏览器较为老旧，无法显示<span style="font-family:Times New Roman">Frame</span><span style="font-family:宋体">的功能，因此，就要使用此标签，让这些网友知道，该换换浏览器了。或者，你也可以在这标签中，摆上没有</span><span style="font-family:Times New Roman">Frame</span><span style="font-family:宋体">语法的网页标签，那么，没有支援</span><span style="font-family:Times New Roman">Frame</span><span style="font-family:宋体">功能的浏览器，便会自动显示没有</span><span style="font-family:Times New Roman">Frame</span><span style="font-family:宋体">语法的网页。</span><strong></strong></p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p> </p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p><strong>◆ target=框窗名称</strong></p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>使用方法：<span style="font-family:Times New Roman"><A HREF="d1-1.htm" target=3></span><span style="font-family:宋体">显示内容</span><span style="font-family:Times New Roman"></A></span></p> <p><strong>标签解说：</strong>常常有一个情况是，我想在框窗 <span style="font-family:Times New Roman"> 1 </span><span style="font-family:宋体">的地方按下链接，但是希望他的内容出现在框窗 </span><span style="font-family:Times New Roman">3</span><span style="font-family:宋体">中（请参照上面那个图），那应该如何写呢？就像上面加个</span><span style="font-family:Times New Roman"> target=</span><span style="font-family:宋体">框窗名称</span><span style="font-family:Times New Roman"> </span><span style="font-family:宋体">就行啦！</span><strong></strong></p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p> </p> 
  <table> 
   <tbody> 
    <tr> 
     <td valign="top"> <p><strong>◆ target=_top</strong></p> </td> 
    </tr> 
    <tr> 
     <td valign="top"> <p>使用方法：<span style="font-family:Times New Roman"><A HREF="http://www.kimo.com" target=_top></span><span style="font-family:宋体">奇摩站</span><span style="font-family:Times New Roman"></A></span></p> <p><strong>标签解说：</strong>有时候，在框窗里会链接到别的站，却发现，新链接的这个站，竟然被框窗包住了，不但难看，而且可能会吃上官司说！所以，这时候你必需加入<span style="font-family:Times New Roman"> target=_top</span><span style="font-family:宋体">这个参数，那么，这个新连到的网站，就会重新占据整个萤幕啦！</span><strong></strong></p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p><strong>4.13 <span style="color:rgb(204,102,0)"><span style="font-family:宋体">其他技巧</span> <</span></strong><strong><u><span style="color:rgb(0,0,255)"><span style="font-family:宋体">回细说索引</span></span></u></strong><strong><span style="color:rgb(204,102,0)">></span></strong></p> 
  <p>■ 网页配色及背景音乐</p> 
  <p>首先是网页的底色，通常是白白的，要怎么做变化呢？可以做自己的背景图片。</p> 
  <p>要注意一点，如果背景和文字颜色一样～或者颜色相近，天啊～那谁知道你在写什么呀？最好文字与背景颜色有对比，像敝人当初，网页背景是黑的，字是白的红的，就可以很明显的突显出文字。如果图片中有文字，也要尽量淡化，否则影响内容就不好啰！</p> 
  <p>内容的东西颜色要配的适宜（除非你想要有奇怪的风格），不然像背景大红大红，太刺眼了，有人会想去吗？剩下的就让您自己配配看吧！</p> 
  <p><span style="font-family:宋体">然后是音乐，有人喜欢用</span>bgsound标签</p> 
  <p><bgsound src="music.mid"></p> 
  <p><span style="font-family:宋体">可是用</span>NetScape看就没有声音了最好用embed标签 <embed src="music.mid"></p> 
  <p>这样就可以正常播放了唷～</p> 
  <p>■ 首页应有的特质及重要性</p> 
  <p>About Open Page<span style="font-family:宋体">：打开</span><span style="font-family:Times New Roman">browser</span><span style="font-family:宋体">看到网站的第一个部份，有人称之为</span><span style="font-family:Times New Roman">Open Page(</span><span style="font-family:宋体">通常是首页的一半或三分之一</span><span style="font-family:Times New Roman">)</span><span style="font-family:宋体">，这个部份应该包含网站的主功能</span><span style="font-family:Times New Roman">(</span><span style="font-family:宋体">亦即使用者上这个网站最希望或者最可能做的事</span><span style="font-family:Times New Roman">)</span><span style="font-family:宋体">，</span><span style="font-family:Times New Roman">ex.</span><span style="font-family:宋体">一进入</span><span style="font-family:Times New Roman">Allproducts.com</span><span style="font-family:宋体">即可看到“</span><span style="font-family:Times New Roman">Key word search</span><span style="font-family:宋体">”及“</span><span style="font-family:Times New Roman">Search by category</span><span style="font-family:宋体">”，应该尽量避免让使用者还要使用</span><span style="font-family:Times New Roman">mouse</span><span style="font-family:宋体">上下左右拉才能看到他</span><span style="font-family:Times New Roman">(</span><span style="font-family:宋体">她</span><span style="font-family:Times New Roman">)</span><span style="font-family:宋体">所想要的功能或资讯，有时资讯太多，在不得已的情况下，页面可以往下沿申，但切忌右左划面过大，不符一般人的使用习惯，也会造成列印上的困扰。</span></p> 
  <p><span style="font-family:宋体">主题明确：</span>Open Page<span style="font-family:宋体">应包含公司</span><span style="font-family:Times New Roman">Logo</span><span style="font-family:宋体">、网站主题</span><span style="font-family:Times New Roman">(</span><span style="font-family:宋体">最好是一段简短的</span><span style="font-family:Times New Roman">Slogan</span><span style="font-family:宋体">，让使用者一看就知道这个网站主要功能或架站目的</span><span style="font-family:Times New Roman">,ex. Allproducts.com</span><span style="font-family:宋体">上的</span><span style="font-family:Times New Roman">The world's best products directory for volume buyers)</span></p> 
  <p>Navigation<span style="font-family:宋体">：让使用者很明确了解他</span><span style="font-family:Times New Roman">(</span><span style="font-family:宋体">她</span><span style="font-family:Times New Roman">)</span><span style="font-family:宋体">目前在网站的什么地方</span><span style="font-family:Times New Roman">(</span><span style="font-family:宋体">或功能</span><span style="font-family:Times New Roman">)</span><span style="font-family:宋体">，首页上应该有主要功能的链接，各个</span><span style="font-family:Times New Roman">icon</span><span style="font-family:宋体">如果可能的话，尽可能加上一些纯文字的说明及</span><span style="font-family:Times New Roman">link</span><span style="font-family:宋体">；至于</span><span style="font-family:Times New Roman">icon</span><span style="font-family:宋体">或者</span><span style="font-family:Times New Roman">link</span><span style="font-family:宋体">的摆放亦应有其相对应的逻辑，如与整个网站或大架构较为相关的，放在较外层，与目前执行的功能或页面较为相关的</span><span style="font-family:Times New Roman">link</span><span style="font-family:宋体">应该放在内层；另外，最好能在首页上提供</span><span style="font-family:Times New Roman">Site Map</span><span style="font-family:宋体">的链接，让使用者可以很快了解网站的架构；所有的</span><span style="font-family:Times New Roman">link</span><span style="font-family:宋体">应该把握</span><span style="font-family:Times New Roman">intuitive , obvious , fast</span><span style="font-family:宋体">的原则。</span></p> 
  <p>Color or image<span style="font-family:宋体">：对于颜色的采用，应该考虑到该网站的特性及与其它相关网站的区别，特别是首页的颜色配置，应该让使用者感觉很舒服、没有压迫感，但又不失其专业性，但切忌过度追求美感而牺牲其功能性，就公司目前的网站设计理念，应该是功能性的考量优于纯美术的考量，首页的设计最好设定在</span><span style="font-family:Times New Roman">60k</span><span style="font-family:宋体">以内，而且不要用太多层的</span><span style="font-family:Times New Roman">table</span><span style="font-family:宋体">。</span><span style="font-family:Times New Roman"> </span></p> 
  <p>Meta tag<span style="font-family:宋体">：该部份不会出现在前端的页面上，但网站规划时应该将该部份一并考量，做为网站登录时使用，网站上线时务必将相关资料加入。</span></p> 
  <p><span style="font-family:宋体">其它：首页上应该有</span>service account <span style="font-family:宋体"> 及 联络资料</span></p> 
  <p>■ Meta Tag 的简介</p> 
  <p>一般常用的格式如下：</p> 
  <p><Title>All Products Online</title><br> <span style="font-family:宋体">这虽说不是</span>meta<span style="font-family:宋体">的一部份，但是也不可忽略，总长度不要超过</span><span style="font-family:Times New Roman">85</span><span style="font-family:宋体">个</span><span style="font-family:Times New Roman">Character (</span><span style="font-family:宋体">约</span><span style="font-family:Times New Roman">10</span><span style="font-family:宋体">个字</span><span style="font-family:Times New Roman">)</span><span style="font-family:宋体">。</span></p> 
  <p><meta http-quive="content-type" content="text/html; charset=iso-8859-1"><br> 说明网站的格式及编码方式，另外这个功能也可以拿来说明网站的名称。</p> 
  <p><meta name="keyword" contents="<span style="font-family:宋体">关键字一</span><span style="font-family:Times New Roman">,</span><span style="font-family:宋体">关键字二</span><span style="font-family:Times New Roman">,</span><span style="font-family:宋体">关键字三</span><span style="font-family:Times New Roman">,</span><span style="font-family:宋体">…</span><span style="font-family:Times New Roman">.."></span><br> <span style="font-family:宋体">铲明整个网站的关键字，关键字间用逗点隔开，总长度最好不要超过</span>1000<span style="font-family:宋体">个</span><span style="font-family:Times New Roman">Character (</span><span style="font-family:宋体">约</span><span style="font-family:Times New Roman">44</span><span style="font-family:宋体">个字</span><span style="font-family:Times New Roman">)</span><span style="font-family:宋体">。</span></p> 
  <p><meta name="description" contents="<span style="font-family:宋体">整个网站的描述…</span><span style="font-family:Times New Roman">."></span><br> <span style="font-family:宋体">铲明整个网站为何吸引人的地方，可用逗点隔开，总长度最好不要超过</span>200<span style="font-family:宋体">个</span><span style="font-family:Times New Roman">Character (</span><span style="font-family:宋体">约</span><span style="font-family:Times New Roman">15</span><span style="font-family:宋体">个字</span><span style="font-family:Times New Roman">)</span><span style="font-family:宋体">，若文章真的太长，可以切割成两个部分，较不重要的部分置入下一个</span><span style="font-family:Times New Roman">Description</span><span style="font-family:宋体">。</span></p> 
  <p><meta name="robots" content=" ALL, NONE, INDEX, NOINDEX, FOLLOW, NOFOLLOW"><br> <span style="font-family:宋体">此功能是要给搜寻引擎使用的，是要用来告诉</span>Spider<span style="font-family:宋体">哪些网页是要去撷取的或不用去撷取的，一般都设定成</span><span style="font-family:Times New Roman">All(</span><span style="font-family:宋体">内定值</span><span style="font-family:Times New Roman">)</span><span style="font-family:宋体">。</span></p> 
  <p><u><span style="color:rgb(0,0,255)"><span style="font-family:宋体">回到顶部</span></span></u></p> 
  <p> </p> 
  <p><span style="color:rgb(89,89,89)">源文档</span><span style="color:rgb(89,89,89)"> <</span><u><span style="color:rgb(0,0,255)">http://www.tool.la/HtmlTeach/</span></u><span style="color:rgb(89,89,89)">></span></p> 
  <p> </p> 
  <br> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id="SOHUCS" sid="1298117705714442240"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js"></script>
                    <!-- 文章页-底部 动态广告位 -->
                    <div class="youdao-fixed-ad" id="detail_ad_bottom"></div>
                </div>
                <div class="col-md-3">
                    <div class="row" id="ad">
                        <!-- 文章页-右侧1 动态广告位 -->
                        <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_1"> </div>
                        </div>
                        <!-- 文章页-右侧2 动态广告位 -->
                        <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_2"></div>
                        </div>
                        <!-- 文章页-右侧3 动态广告位 -->
                        <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_3"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(java,html)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1881249971446018048.htm"
                           title="2025java面试常见八股文整理" target="_blank">2025java面试常见八股文整理</a>
                        <span class="text-muted">Java八股文面试</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/cloud/1.htm">cloud</a>
                        <div>1.多线程编程下，怎么解决线程的数据安全问题？如果线程存在竞争临界资源，多线程访问下添加同步代码块synchronized解决，或者分布式排他锁进行临界资源控制。在分布式多线程环境下，线程的数据安全尽量不要产生连接资源，使用线程本地化ThreadLocal实现线程资源隔离。2.SpringIOC依赖注入怎么理解，spring有几种方式属性注入，setter构建pojo实体类和有参构造方法工厂方法注</div>
                    </li>
                    <li><a href="/article/1881247322415886336.htm"
                           title="华为OD机试E卷 --跳马--24年OD统一考试（Java & JS & Python & C & C++）" target="_blank">华为OD机试E卷 --跳马--24年OD统一考试（Java & JS & Python & C & C++）</a>
                        <span class="text-muted">飞码创造者</span>
<a class="tag" taget="_blank" href="/search/%E6%9C%80%E6%96%B0%E5%8D%8E%E4%B8%BAOD%E6%9C%BA%E8%AF%95%E9%A2%98%E5%BA%932024/1.htm">最新华为OD机试题库2024</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BAod/1.htm">华为od</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a>
                        <div>文章目录题目描述输入描述输出描述用例题目解析JS算法源码Java算法源码python算法源码c算法源码c++算法源码题目描述马是象棋（包括中国象棋和国际象棋）中的棋子，走法是每步直一格再斜一格，即先横着或者直者走一格，然后再斜着走一个对角线，可进可退，可越过河界，俗称"马走日"字。给定m行n列的棋盘（网格图），棋盘上只有棋子象棋中的棋子“马”，并且每个棋子有等级之分，等级为k的马可以跳1~k步（走</div>
                    </li>
                    <li><a href="/article/1881240894590480384.htm"
                           title="【2023最新Java大厂面试题】——MyBatis面试题，看完拿捏面试官" target="_blank">【2023最新Java大厂面试题】——MyBatis面试题，看完拿捏面试官</a>
                        <span class="text-muted">Java凤梨</span>
<a class="tag" taget="_blank" href="/search/Java%E9%87%91%E4%B8%89%E9%93%B6%E5%9B%9B%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">Java金三银四面试题</a><a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
                        <div>全套Java金三银四面试题持续更新可文末自取，建议关注收藏不然下次找不到哟~目录1、什么是Mybatis？2、Mybaits的优点：3、MyBatis框架的缺点：4、MyBatis框架适用场合：5、MyBatis与Hibernate有哪些不同？6、#{}和${}的区别是什么？7、当实体类中的属性名和表中的字段名不一样，怎么办？8、模糊查询like语句该怎么写?9、通常一个Xml映射文件，都会写一个</div>
                    </li>
                    <li><a href="/article/1881240138466521088.htm"
                           title="使用arthas监控诊断java应用" target="_blank">使用arthas监控诊断java应用</a>
                        <span class="text-muted">handsomestWei</span>
<a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>使用arthas监控诊断java应用简介arthas是阿里的一款线上监控诊断产品，通过全局视角实时查看应用load、内存、gc、线程的状态信息，并能在不修改应用代码的情况下，对业务问题进行诊断，包括查看方法调用的出入参、异常，监测方法执行耗时，类加载信息等，大大提升线上问题排查效率。安装使用参考常用命令使用dashboard查看当前应用整体信息dashboard命令详解包含有jvm信息，查看各代内</div>
                    </li>
                    <li><a href="/article/1881230932212510720.htm"
                           title="MYSQL数据类型" target="_blank">MYSQL数据类型</a>
                        <span class="text-muted">jay丿</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a>
                        <div>数据类型结构化数据、例如关系型数据库半结构化数据、HTML、XML、JSON非结构化数据SQL（结构化查询语言）命令关系型数据库擅长处理结构化数据、可以通过结构化查询语言对数据进行CRUD(增删改查)DDL(数据定义语言)：主要包含的命令有create、drop、alter、truncate、showDML(数据操纵语言):主要包含的命令有insert,update,deleteDQL(数据查询语</div>
                    </li>
                    <li><a href="/article/1881226630651768832.htm"
                           title="Java 网络编程（二）—— TCP流套接字编程" target="_blank">Java 网络编程（二）—— TCP流套接字编程</a>
                        <span class="text-muted">熵减玩家</span>
<a class="tag" taget="_blank" href="/search/JavaSE/1.htm">JavaSE</a><a class="tag" taget="_blank" href="/search/%E8%BF%9B%E9%98%B6/1.htm">进阶</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/tcp/1.htm">tcp</a>
                        <div>TCP和UDP的区别在传输层，TCP协议是有连接的，可靠传输，面向字节流，全双工而UDP协议是无连接的，不可靠传输，面向数据报，全双工有连接和无连接的区别是在进行网络通信的时候，通信双方有没有保存对端的地址信息，即假设A和B进行通信，A保存了B的地址信息，B也保存了A的地址信息，此时双方都知道和谁建立了连接，这就是有连接的通信，在之前的UDP数据报套接字编程中就提到过UDP是无连接的，所以在发送数</div>
                    </li>
                    <li><a href="/article/1881222338997972992.htm"
                           title="【新人系列】Python 入门（十六）：正则表达式" target="_blank">【新人系列】Python 入门（十六）：正则表达式</a>
                        <span class="text-muted">Pandaconda</span>
<a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/%E6%96%B0%E4%BA%BA%E7%B3%BB%E5%88%97/1.htm">新人系列</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
                        <div>✍个人博客：https://blog.csdn.net/Newin2020?type=blog专栏地址：https://blog.csdn.net/newin2020/category_12801353.html专栏定位：为0基础刚入门Python的小伙伴提供详细的讲解，也欢迎大佬们一起交流~专栏简介：在这个专栏，我将带着大家从0开始入门Python的学习。在这个Python的新人系列专栏下，将会</div>
                    </li>
                    <li><a href="/article/1881222341611024384.htm"
                           title="【新人系列】Python 入门（十七）：类与对象" target="_blank">【新人系列】Python 入门（十七）：类与对象</a>
                        <span class="text-muted">Pandaconda</span>
<a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/%E6%96%B0%E4%BA%BA%E7%B3%BB%E5%88%97/1.htm">新人系列</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1/1.htm">面向对象</a><a class="tag" taget="_blank" href="/search/%E7%B1%BB/1.htm">类</a>
                        <div>✍个人博客：https://blog.csdn.net/Newin2020?type=blog专栏地址：https://blog.csdn.net/newin2020/category_12801353.html专栏定位：为0基础刚入门Python的小伙伴提供详细的讲解，也欢迎大佬们一起交流~专栏简介：在这个专栏，我将带着大家从0开始入门Python的学习。在这个Python的新人系列专栏下，将会</div>
                    </li>
                    <li><a href="/article/1881222336938569728.htm"
                           title="【新人系列】Python 入门（十一）：控制结构" target="_blank">【新人系列】Python 入门（十一）：控制结构</a>
                        <span class="text-muted">Pandaconda</span>
<a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/%E6%96%B0%E4%BA%BA%E7%B3%BB%E5%88%97/1.htm">新人系列</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E6%8E%A7%E5%88%B6%E7%BB%93%E6%9E%84/1.htm">控制结构</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a>
                        <div>✍个人博客：https://blog.csdn.net/Newin2020?type=blog专栏地址：https://blog.csdn.net/newin2020/category_12801353.html专栏定位：为0基础刚入门Python的小伙伴提供详细的讲解，也欢迎大佬们一起交流~专栏简介：在这个专栏，我将带着大家从0开始入门Python的学习。在这个Python的新人系列专栏下，将会</div>
                    </li>
                    <li><a href="/article/1881219816640016384.htm"
                           title="深入理解 JavaScript 引擎与消息队列的底层原理" target="_blank">深入理解 JavaScript 引擎与消息队列的底层原理</a>
                        <span class="text-muted">D.eL</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
                        <div>深入理解JavaScript引擎与消息队列的底层原理JavaScript是现代Web开发中最为重要的编程语言之一，它的运行和执行方式常常是开发者关注的重点。为了更好地理解JavaScript的执行过程，我们需要深入探索JavaScript引擎的工作原理，尤其是事件循环（EventLoop）、消息队列（MessageQueue）以及它们如何协同工作来处理异步任务。在这篇文章中，我们将深入分析Java</div>
                    </li>
                    <li><a href="/article/1881216784795758592.htm"
                           title="JavaScript详解十三 ——节点操作" target="_blank">JavaScript详解十三 ——节点操作</a>
                        <span class="text-muted">遇见~未来</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/JavaScript%E8%AF%A6%E8%A7%A3/1.htm">JavaScript详解</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
                        <div>目录节点操作1、创建节点2、创建文本3、添加节点(先有父母才能生孩子)4、替换节点5、删除节点6、克隆节点7、创建节点另外几种方式（1）、element.innerHTML（2）、element.innerText（3）、document.write()（4）、insertAdjacentHTML()节点操作1、创建节点docment.createElement('节点')参数：标签名字符串这些元</div>
                    </li>
                    <li><a href="/article/1881216149769744384.htm"
                           title="linux制作自定义service服务单元" target="_blank">linux制作自定义service服务单元</a>
                        <span class="text-muted">handsomestWei</span>
<a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a>
                        <div>linux制作自定义service服务单元服务单元简介在Linux系统中，服务单元通常以.service后缀结尾，并存储在/etc/systemd/system目录下。服务单元文件定义了服务的启动顺序、依赖关系、执行命令等参数。使得系统管理员能够方便地启动、停止、重启和管理系统中的各种服务。java服务单元示例服务单元myJava.service文件示例。注意关闭标准输出，避免日志文件占用磁盘空间</div>
                    </li>
                    <li><a href="/article/1881214372399869952.htm"
                           title="【新人系列】Python 入门（二十七）：Python 库" target="_blank">【新人系列】Python 入门（二十七）：Python 库</a>
                        <span class="text-muted">Pandaconda</span>
<a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/%E6%96%B0%E4%BA%BA%E7%B3%BB%E5%88%97/1.htm">新人系列</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/python%E5%BA%93/1.htm">python库</a><a class="tag" taget="_blank" href="/search/%E5%BA%93/1.htm">库</a>
                        <div>✍个人博客：https://blog.csdn.net/Newin2020?type=blog专栏地址：https://blog.csdn.net/newin2020/category_12801353.html专栏定位：为0基础刚入门Python的小伙伴提供详细的讲解，也欢迎大佬们一起交流~专栏简介：在这个专栏，我将带着大家从0开始入门Python的学习。在这个Python的新人系列专栏下，将会</div>
                    </li>
                    <li><a href="/article/1881210719916060672.htm"
                           title="Microi 吾码与 JavaScript：前端低代码平台的强大组合" target="_blank">Microi 吾码与 JavaScript：前端低代码平台的强大组合</a>
                        <span class="text-muted">小周不想卷</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>目录一、引言二、Microi吾码概述三、JavaScript在Microi吾码前端开发中的应用（一）前端V8引擎与JavaScript（二）接口引擎与JavaScript四、JavaScript在Microi吾码后端开发中的协同（一）与C#后端框架的交互（二）利用gRPC实现跨语言通信五、Microi吾码中JavaScript与数据库的交互六、Microi吾码中JavaScript在表单与模板引擎</div>
                    </li>
                    <li><a href="/article/1881210212933758976.htm"
                           title="Node.js 能做什么" target="_blank">Node.js 能做什么</a>
                        <span class="text-muted">yqcoder</span>
<a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a>
                        <div>一、服务器端开发1.构建Web服务器使用内置的`http`模块或流行的框架（如Express、Koa等）创建Web服务器，处理HTTP请求和响应。可以处理各种类型的请求，如GET、POST、PUT、DELETE等，并返回相应的HTML、JSON或其他数据类型。consthttp=require("http");constserver=http.createServer((req,res)=>{ r</div>
                    </li>
                    <li><a href="/article/1881209203469643776.htm"
                           title="线程池的拒绝策略有哪些？" target="_blank">线程池的拒绝策略有哪些？</a>
                        <span class="text-muted">IsToRestart</span>
<a class="tag" taget="_blank" href="/search/%E7%BA%BF%E7%A8%8B%E6%B1%A0/1.htm">线程池</a>
                        <div>在Java中，线程池的拒绝策略决定了在任务队列已满的情况下，如何处理新提交的任务。当线程池达到最大容量并且任务队列也已满时，拒绝策略就会起作用。Java提供了四种内置的拒绝策略，它们分别是：AbortPolicy-这是默认的拒绝策略，当线程池无法接受新任务时，会抛出RejectedExecutionException异常。这意味着新任务会被立即拒绝，不会加入到任务队列中，也不会执行。通常情况下都是</div>
                    </li>
                    <li><a href="/article/1881206684236443648.htm"
                           title="JavaScript进阶" target="_blank">JavaScript进阶</a>
                        <span class="text-muted">不断学习的码农</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a>
                        <div>一.同步和异步程序同步程序就是从头到尾一一执行异步是同步程序执行完成之后才来执行异步程序js是单线程的一个任务执行完成之后才会执行另外一个二.js的内存结构栈内存和堆内存js分引用类型和原始类型原始类型存储在栈内存中引用类型存储在堆内存中三.什么是闭包闭包就是函数嵌套函数，内部的函数就是闭包正常情况下函数执行完成之后，内部的变量就会被销毁（释放内存）闭包：内部函数没有执行完成，外部函数变量不会被销</div>
                    </li>
                    <li><a href="/article/1881206295084724224.htm"
                           title="Android 右键后无Java class创建" target="_blank">Android 右键后无Java class创建</a>
                        <span class="text-muted">不吃凉粉</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>Androidstudio创建javaclass：最近几个月用Androidstudio开发，因为电脑设置了一个新的用户使用，原来的androidstudio,打开之前的正常的项目总是报一些奇奇怪怪的错误，就重新安装了最新的版本问题描述但是新的androidstudio右键后没有javaclass,本来我就不怎么用java和androidstudio,又赶时间，不想花时间用更不了解的kotlin解</div>
                    </li>
                    <li><a href="/article/1881206042675703808.htm"
                           title="Mysql运维篇（五） 部署MHA--主机环境配置" target="_blank">Mysql运维篇（五） 部署MHA--主机环境配置</a>
                        <span class="text-muted">努力的兜</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a>
                        <div>一路走来，所有遇到的人，帮助过我的、伤害过我的都是朋友，没有一个是敌人。如有侵权，请留言，我及时删除！大佬博文https://www.cnblogs.com/gomysql/p/3675429.htmlMySQL高可用（MHA）-知乎一、MHA简介：MHA（MasterHighAvailability）目前在MySQL高可用方面是一个相对成熟的解决方案，它由日本DeNA公司youshimaton（</div>
                    </li>
                    <li><a href="/article/1881204531509915648.htm"
                           title="stm32+w5500实现web服务_【NodeJS】简单静态WEB服务器实现" target="_blank">stm32+w5500实现web服务_【NodeJS】简单静态WEB服务器实现</a>
                        <span class="text-muted">weixin_39711441</span>

                        <div>说明利用HTTP模块URl模块Path模块Fs模块创建在项目文件夹下，创建文件夹static,下面创建index.html//引入http模块var http=require('http');//fs模块var fs=require('fs');http.createServer(function(req,res){    //http://localhost:8001/news.html/new</div>
                    </li>
                    <li><a href="/article/1881203896181911552.htm"
                           title="Android 8 Wifi 初始化过程" target="_blank">Android 8 Wifi 初始化过程</a>
                        <span class="text-muted">weixin_34315665</span>
<a class="tag" taget="_blank" href="/search/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/1.htm">移动开发</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                        <div>记录一下wifi初始化过程。packages/apps/Settings/src/com/android/settings/wifi/WifiSettings.javapublicvoidonStart(){super.onStart();//创建WifiEnabler对象//On/offswitchishiddenforSetupWizard(returnsnull)mWifiEnabler=c</div>
                    </li>
                    <li><a href="/article/1881199481437876224.htm"
                           title="深入理解 Java 并发编程中的锁机制" target="_blank">深入理解 Java 并发编程中的锁机制</a>
                        <span class="text-muted">向着开发进攻</span>
<a class="tag" taget="_blank" href="/search/java%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/1.htm">java并发编程</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>深入理解Java并发编程中的锁机制在Java并发编程中，锁是一个至关重要的概念，它用于确保多个线程在访问共享资源时能够遵循正确的顺序和互斥规则。锁机制的设计和使用直接影响到程序的效率、正确性和可维护性。本文将从锁的基本概念讲起，深入分析Java中的锁类型、实现方式以及如何避免常见的并发问题。1.什么是锁？锁是一种同步机制，它用于限制对共享资源的访问，确保在同一时刻只有一个线程能够访问资源。锁的目的</div>
                    </li>
                    <li><a href="/article/1881195312425529344.htm"
                           title="JS宏进阶：Map与Object" target="_blank">JS宏进阶：Map与Object</a>
                        <span class="text-muted">jackispy</span>
<a class="tag" taget="_blank" href="/search/JS%E5%AE%8F%E8%BF%9B%E9%98%B6/1.htm">JS宏进阶</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
                        <div>Object是JavaScript中最基本的数据类型之一，用于创建对象实例。newObject()是创建空对象的一种常见方式。而Map只是一种用于存储键值对的数据结构。相对于Object而言，他没有原型（也就是不能通过原型链的方式添加方法），但也存在自身的优势，某些场景，newMap可能比newObject更好用。下面是其内置方法的详细介绍：一、newMap1、创建新的Map对象，只能使用newM</div>
                    </li>
                    <li><a href="/article/1881194555248799744.htm"
                           title="Java 并发舞台：多线程小精灵的奇幻冒险之旅" target="_blank">Java 并发舞台：多线程小精灵的奇幻冒险之旅</a>
                        <span class="text-muted">guihong004</span>
<a class="tag" taget="_blank" href="/search/java%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">java面试题</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>1.线程池的拒绝策略有哪些？Java中的线程池提供了几种不同的拒绝策略，当线程池无法处理新的任务时（比如因为线程池已满并且工作队列也满了），这些策略会决定如何处理新提交的任务。ThreadPoolExecutor类中定义了以下四种内置的拒绝策略：AbortPolicy：这是默认的拒绝策略。当有新任务提交且线程池无法处理时，它会抛出一个RejectedExecutionException异常。Cal</div>
                    </li>
                    <li><a href="/article/1881193041826476032.htm"
                           title="什么是三高架构?" target="_blank">什么是三高架构?</a>
                        <span class="text-muted">java1234_小锋</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E6%9C%8D%E5%8A%A1/1.htm">微服务</a>
                        <div>大家好，我是锋哥。今天分享关于【什么是三高架构?】面试题。希望对大家有帮助；什么是三高架构?1000道互联网大厂Java工程师精选面试题-Java资源分享网“三高架构”通常是指高可用性（HighAvailability）、高性能（HighPerformance）和高扩展性（HighScalability）架构。这三个特性是现代计算系统、尤其是在分布式系统和云计算架构中，设计和部署的关键目标。以下是</div>
                    </li>
                    <li><a href="/article/1881192411565191168.htm"
                           title="JavaWeb 开发入门：从基础到应用" target="_blank">JavaWeb 开发入门：从基础到应用</a>
                        <span class="text-muted">大梦百万秋</span>
<a class="tag" taget="_blank" href="/search/%E7%9F%A5%E8%AF%86%E5%AD%A6%E7%88%86/1.htm">知识学爆</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                        <div>JavaWeb是基于Java技术构建的Web应用开发体系。得益于Java的跨平台性和强大的生态系统，JavaWeb长期以来一直是企业级开发的首选方案之一。本篇博客将从JavaWeb的基本概念、核心技术到实际项目开发，带你全面了解如何利用JavaWeb构建一个动态网站。什么是JavaWeb？JavaWeb是使用Java技术开发Web应用程序的总称，通常包括动态网页、交互式功能和后端逻辑。它支持开发以</div>
                    </li>
                    <li><a href="/article/1881192284695883776.htm"
                           title="流量分析利器arkime的学习之路（二）---API接口" target="_blank">流量分析利器arkime的学习之路（二）---API接口</a>
                        <span class="text-muted">胖哥王老师</span>
<a class="tag" taget="_blank" href="/search/%E6%B5%81%E9%87%8F%E5%88%86%E6%9E%90/1.htm">流量分析</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">学习笔记</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/1.htm">网络协议</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/arkime/1.htm">arkime</a><a class="tag" taget="_blank" href="/search/API/1.htm">API</a>
                        <div>前文回忆《流量分析利器arkime的学习之路（一）---安装部署》概述注意点Arkime对所有API调用都使用摘要身份验证，因此请确保在库或curl命令中启用摘要身份验证。学习如何进行API调用的最简单方法是打开浏览器的javascript控制台，观察ArkimeUI正在进行的调用，它使用所有相同的API。注意：许多API端点都需要一个数据库字段名称，这与您在搜索表达式中使用的名称不同。查看数据库</div>
                    </li>
                    <li><a href="/article/1881186479162585088.htm"
                           title="Android应用开发入门：从Android Studio环境设置到Java编程基础" target="_blank">Android应用开发入门：从Android Studio环境设置到Java编程基础</a>
                        <span class="text-muted">Python爬虫项目</span>
<a class="tag" taget="_blank" href="/search/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91%E7%B2%BE%E9%80%9A%E6%95%99%E7%A8%8B/1.htm">移动开发精通教程</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/studio/1.htm">studio</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/gitee/1.htm">gitee</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a>
                        <div>目录介绍步骤一：设置AndroidStudio环境步骤二：了解AndroidStudio界面步骤三：学习Java编程基础变量和数据类型数组和集合控制流类和方法结论介绍Android应用开发是一个令人兴奋和有趣的领域。如果你对移动应用程序开发感兴趣，并且想要学习如何开始构建自己的Android应用，那么你来对地方了！本篇博客将带你从头开始，介绍如何设置AndroidStudio环境，学习Java编程</div>
                    </li>
                    <li><a href="/article/1881183075350671360.htm"
                           title="JVM学习指南(41)-GC日志分析" target="_blank">JVM学习指南(41)-GC日志分析</a>
                        <span class="text-muted">俞兆鹏</span>
<a class="tag" taget="_blank" href="/search/JVM%E5%AD%A6%E4%B9%A0%E6%8C%87%E5%8D%97/1.htm">JVM学习指南</a><a class="tag" taget="_blank" href="/search/JVM/1.htm">JVM</a>
                        <div>文章目录1.GC日志的重要性为什么需要分析GC日志？2.GC日志的基本格式示例GC日志格式3.如何启用和配置GC日志示例代码4.分析GC日志的关键指标5.案例分析案例1：频繁的MinorGC6.GC日志分析工具介绍GCViewerMAT（MemoryAnalyzerTool）7.最佳实践和注意事项常见陷阱8.总结1.GC日志的重要性GC（GarbageCollection）日志是Java虚拟机（J</div>
                    </li>
                    <li><a href="/article/1881182317683208192.htm"
                           title="2024最新版JavaScript逆向爬虫教程-------基础篇之JavaScript混淆原理" target="_blank">2024最新版JavaScript逆向爬虫教程-------基础篇之JavaScript混淆原理</a>
                        <span class="text-muted">Amo Xiang</span>
<a class="tag" taget="_blank" href="/search/JS%E9%80%86%E5%90%91/1.htm">JS逆向</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/js%E9%80%86%E5%90%91/1.htm">js逆向</a>
                        <div>目录一、常量的混淆原理1.1对象属性的两种访问方式1.2十六进制字符串1.3Unicode字符串1.4字符串的ASCII码混淆1.5字符串常量加密1.6数值常量加密二、增加JS逆向者的工作量2.1数组混淆2.2数组乱序2.3花指令2.4jsfuck三、代码执行流程的防护原理3.1流程平坦化3.2逗号表达式混淆四、其他代码防护方案4.1eval加密4.2内存爆破4.3检测代码是否格式化一、常量的混淆</div>
                    </li>
                                <li><a href="/article/49.htm"
                                       title="辗转相处求最大公约数" target="_blank">辗转相处求最大公约数</a>
                                    <span class="text-muted">沐刃青蛟</span>
<a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/%E6%BC%8F%E6%B4%9E/1.htm">漏洞</a>
                                    <div>无言面对”江东父老“了，接触编程一年了，今天发现还不会辗转相除法求最大公约数。惭愧惭愧！ 
&nbsp; 
为此，总结一下以方便日后忘了好查找。 
&nbsp; 
1.输入要比较的两个数a,b 
&nbsp; 
忽略：2.比较大小（因为后面要的是大的数对小的数做%操作） 
&nbsp; 
3.辗转相除（用循环不停的取余，如a%b,直至b=0） 
&nbsp; 
4.最后的a为两数的最大公约数 
&</div>
                                </li>
                                <li><a href="/article/176.htm"
                                       title="F5负载均衡会话保持技术及原理技术白皮书" target="_blank">F5负载均衡会话保持技术及原理技术白皮书</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/F5/1.htm">F5</a><a class="tag" taget="_blank" href="/search/%E8%B4%9F%E8%BD%BD%E5%9D%87%E8%A1%A1/1.htm">负载均衡</a>
                                    <div>一.什么是会话保持？&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 在大多数电子商务的应用系统或者需要进行用户身份认证的在线系统中，一个客户与服务器经常经过好几次的交互过程才能完成一笔交易或者是一个请求的完成。由于这几次交互过程是密切相关的，服务器在进行这些交互过程的某一个交互步骤时，往往需要了解上一次交互过程的处理结果，或者上几步的交互过程结果，服务器进行下</div>
                                </li>
                                <li><a href="/article/303.htm"
                                       title="Object.equals方法：重载还是覆盖" target="_blank">Object.equals方法：重载还是覆盖</a>
                                    <span class="text-muted">Cwind</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/generics/1.htm">generics</a><a class="tag" taget="_blank" href="/search/override/1.htm">override</a><a class="tag" taget="_blank" href="/search/overload/1.htm">overload</a>
                                    <div>本文译自StackOverflow上对此问题的讨论。 
原问题链接 
&nbsp; 
在阅读Joshua Bloch的《Effective Java（第二版）》第8条“覆盖equals时请遵守通用约定”时对如下论述有疑问： 
“不要将equals声明中的Object对象替换为其他的类型。程序员编写出下面这样的equals方法并不鲜见，这会使程序员花上数个小时都搞不清它为什么不能正常工作：” 
pu</div>
                                </li>
                                <li><a href="/article/430.htm"
                                       title="初始线程" target="_blank">初始线程</a>
                                    <span class="text-muted">15700786134</span>

                                    <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 暑假学习的第一课是讲线程，任务是是界面上的一条线运动起来。 
&nbsp; 
&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 既然是在界面上，那必定得先有一个界面，所以第一步就是，自己的类继承JAVA中的JFrame，在新建的类中写一个界面，代码如下： 
public class ShapeFr</div>
                                </li>
                                <li><a href="/article/557.htm"
                                       title="Linux的tcpdump" target="_blank">Linux的tcpdump</a>
                                    <span class="text-muted">被触发</span>
<a class="tag" taget="_blank" href="/search/tcpdump/1.htm">tcpdump</a>
                                    <div>用简单的话来定义tcpdump，就是：dump the traffic on a network，根据使用者的定义对网络上的数据包进行截获的包分析工具。 tcpdump可以将网络中传送的数据包的“头”完全截获下来提供分析。它支 持针对网络层、协议、主机、网络或端口的过滤，并提供and、or、not等逻辑语句来帮助你去掉无用的信息。 
 
实用命令实例 
默认启动 
tcpdump 
普通情况下，直</div>
                                </li>
                                <li><a href="/article/684.htm"
                                       title="安卓程序listview优化后还是卡顿" target="_blank">安卓程序listview优化后还是卡顿</a>
                                    <span class="text-muted">肆无忌惮_</span>
<a class="tag" taget="_blank" href="/search/ListView/1.htm">ListView</a>
                                    <div>最近用eclipse开发一个安卓app，listview使用baseadapter，里面有一个ImageView和两个TextView。使用了Holder内部类进行优化了还是很卡顿。后来发现是图片资源的问题。把一张分辨率高的图片放在了drawable-mdpi文件夹下，当我在每个item中显示，他都要进行缩放，导致很卡顿。解决办法是把这个高分辨率图片放到drawable-xxhdpi下。 
&nb</div>
                                </li>
                                <li><a href="/article/811.htm"
                                       title="扩展easyUI tab控件，添加加载遮罩效果" target="_blank">扩展easyUI tab控件，添加加载遮罩效果</a>
                                    <span class="text-muted">知了ing</span>
<a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a>
                                    <div>(function () {  
    $.extend($.fn.tabs.methods, {  
        //显示遮罩  
        loading: function (jq, msg) {  
            return jq.each(function () {  
                var panel = $(this).tabs(&</div>
                                </li>
                                <li><a href="/article/938.htm"
                                       title="gradle上传jar到nexus" target="_blank">gradle上传jar到nexus</a>
                                    <span class="text-muted">矮蛋蛋</span>
<a class="tag" taget="_blank" href="/search/gradle/1.htm">gradle</a>
                                    <div>原文地址： 
https://docs.gradle.org/current/userguide/maven_plugin.html 
configurations { 
&nbsp;&nbsp;&nbsp; deployerJars 
} 
 
dependencies { 
&nbsp;&nbsp;&nbsp; deployerJars &quot;org.apache.maven.wagon</div>
                                </li>
                                <li><a href="/article/1065.htm"
                                       title="千万条数据外网导入数据库的解决方案。" target="_blank">千万条数据外网导入数据库的解决方案。</a>
                                    <span class="text-muted">alleni123</span>
<a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
                                    <div>从某网上爬了数千万的数据，存在文本中。 
然后要导入mysql数据库。 
 
悲剧的是数据库和我存数据的服务器不在一个内网里面。。 
 
 
ping了一下， 19ms的延迟。 
 
于是下面的代码是没用的。 
 

ps = con.prepareStatement(sql);
	ps.setString(1, info.getYear())............;
			ps.exec</div>
                                </li>
                                <li><a href="/article/1192.htm"
                                       title="JAVA IO InputStreamReader和OutputStreamReader" target="_blank">JAVA IO InputStreamReader和OutputStreamReader</a>
                                    <span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/JAVA.io%E6%93%8D%E4%BD%9C+%E5%AD%97%E7%AC%A6%E6%B5%81/1.htm">JAVA.io操作 字符流</a>
                                    <div>这是第三篇关于java.io的文章了，从开始对io的不了解--&gt;熟悉---&gt;模糊，是这几天来对文件操作中最大的感受，本来自己认为的熟悉了的，刚刚在回想起前面学的好像又不是很清晰了，模糊对我现在或许是最好的鼓励 我会更加的去学 加油！： 
JAVA的API提供了另外一种数据保存途径，使用字符流来保存的，字符流只能保存字符形式的流 
&nbsp; 
字节流和字符的难点：a,怎么将读到的数据</div>
                                </li>
                                <li><a href="/article/1319.htm"
                                       title="MO、MT解读" target="_blank">MO、MT解读</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/GSM/1.htm">GSM</a>
                                    <div>MO= Mobile originate，上行，即用户上发给SP的信息。MT= Mobile Terminate，下行，即SP端下发给用户的信息； 
上行:mo提交短信到短信中心下行:mt短信中心向特定的用户转发短信，你的短信是这样的，你所提交的短信，投递的地址是短信中心。短信中心收到你的短信后，存储转发，转发的时候就会根据你填写的接收方号码寻找路由，下发。在彩信领域是一样的道理。下行业务：由SP</div>
                                </li>
                                <li><a href="/article/1446.htm"
                                       title="五个JavaScript基础问题" target="_blank">五个JavaScript基础问题</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/call/1.htm">call</a><a class="tag" taget="_blank" href="/search/apply/1.htm">apply</a><a class="tag" taget="_blank" href="/search/this/1.htm">this</a><a class="tag" taget="_blank" href="/search/Hoisting/1.htm">Hoisting</a>
                                    <div>下面是五个关于前端相关的基础问题，但却很能体现JavaScript的基本功底。 
问题1：Scope作用范围 
考虑下面的代码：&nbsp; 
(function() {
   var a = b = 5;
})();
console.log(b); 
什么会被打印在控制台上？&nbsp; 
回答： 
&nbsp; &nbsp; &nbsp; &nbsp; 上面的代码会打印 5。 
&nbs</div>
                                </li>
                                <li><a href="/article/1573.htm"
                                       title="【Thrift二】Thrift Hello World" target="_blank">【Thrift二】Thrift Hello World</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/Hello+world/1.htm">Hello world</a>
                                    <div>本篇，不考虑细节问题和为什么，先照葫芦画瓢写一个Thrift版本的Hello World，了解Thrift RPC服务开发的基本流程 
&nbsp; 
1. 在Intellij中创建一个Maven模块，加入对Thrift的依赖，同时还要加上slf4j依赖，如果不加slf4j依赖，在后面启动Thrift Server时会报错 
        &lt;dependency&gt;
        </div>
                                </li>
                                <li><a href="/article/1700.htm"
                                       title="【Avro一】Avro入门" target="_blank">【Avro一】Avro入门</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/%E5%85%A5%E9%97%A8/1.htm">入门</a>
                                    <div>本文的目的主要是总结下基于Avro Schema代码生成，然后进行序列化和反序列化开发的基本流程。需要指出的是，Avro并不要求一定得根据Schema文件生成代码，这对于动态类型语言很有用。 
&nbsp; 1. 添加Maven依赖 
&nbsp; 
&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
&lt;proj</div>
                                </li>
                                <li><a href="/article/1827.htm"
                                       title="安装nginx+ngx_lua支持WAF防护功能" target="_blank">安装nginx+ngx_lua支持WAF防护功能</a>
                                    <span class="text-muted">ronin47</span>

                                    <div>需要的软件:LuaJIT-2.0.0.tar.gz &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; nginx-1.4.4.tar.gz &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb</div>
                                </li>
                                <li><a href="/article/1954.htm"
                                       title="java-5.查找最小的K个元素-使用最大堆" target="_blank">java-5.查找最小的K个元素-使用最大堆</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>
import java.util.Arrays;
import java.util.Random;


public class MinKElement {

	/**
	 * 5.最小的K个元素
	 * I would like to use MaxHeap.
	 * using QuickSort is also OK
	 */
	public static void</div>
                                </li>
                                <li><a href="/article/2081.htm"
                                       title="TCP的TIME-WAIT" target="_blank">TCP的TIME-WAIT</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/socket/1.htm">socket</a>
                                    <div>原文连接： 
http://vincent.bernat.im/en/blog/2014-tcp-time-wait-state-linux.html 
 
以下为对原文的阅读笔记 
 
说明： 
主动关闭的一方称为local end，被动关闭的一方称为remote end 
本地IP、本地端口、远端IP、远端端口这一“四元组”称为quadruplet，也称为socket 
 
1、TIME_WA</div>
                                </li>
                                <li><a href="/article/2208.htm"
                                       title="jquery ajax 序列化表单" target="_blank">jquery ajax 序列化表单</a>
                                    <span class="text-muted">coder_xpf</span>
<a class="tag" taget="_blank" href="/search/Jquery+ajax+%E5%BA%8F%E5%88%97%E5%8C%96/1.htm">Jquery ajax 序列化</a>
                                    <div>&nbsp; 
&nbsp;checkbox&nbsp;如果不设定值，默认选中值为on；设定值之后，选中则为设定的值 
&nbsp; 
&lt;input type=&quot;checkbox&quot; name=&quot;favor&quot; id=&quot;favor&quot; checked=&quot;checked&quot;/&gt;
$(&quot;#favor&quo</div>
                                </li>
                                <li><a href="/article/2335.htm"
                                       title="Apache集群乱码和最高并发控制" target="_blank">Apache集群乱码和最高并发控制</a>
                                    <span class="text-muted">cuisuqiang</span>
<a class="tag" taget="_blank" href="/search/apache/1.htm">apache</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/%E5%B9%B6%E5%8F%91/1.htm">并发</a><a class="tag" taget="_blank" href="/search/%E9%9B%86%E7%BE%A4/1.htm">集群</a><a class="tag" taget="_blank" href="/search/%E4%B9%B1%E7%A0%81/1.htm">乱码</a>
                                    <div>都知道如果使用Http访问，那么在Connector中增加URIEncoding即可，其实使用AJP时也一样，增加useBodyEncodingForURI和URIEncoding即可。 
最大连接数也是一样的，增加maxThreads属性即可，如下，配置如下： 
&lt;Connector maxThreads=&quot;300&quot; port=&quot;8019&quot; prot</div>
                                </li>
                                <li><a href="/article/2462.htm"
                                       title="websocket" target="_blank">websocket</a>
                                    <span class="text-muted">dalan_123</span>
<a class="tag" taget="_blank" href="/search/websocket/1.htm">websocket</a>
                                    <div>一、低延迟的客户端-服务器 和 服务器-客户端的连接 
很多时候所谓的http的请求、响应的模式，都是客户端加载一个网页，直到用户在进行下一次点击的时候，什么都不会发生。并且所有的http的通信都是客户端控制的，这时候就需要用户的互动或定期轮训的，以便从服务器端加载新的数据。 
&nbsp; 通常采用的技术比如推送和comet（使用http长连接、无需安装浏览器安装插件的两种方式：基于ajax的长</div>
                                </li>
                                <li><a href="/article/2589.htm"
                                       title="菜鸟分析网络执法官" target="_blank">菜鸟分析网络执法官</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a>
                                    <div>&nbsp; 
最近在论坛上看到很多贴子在讨论网络执法官的问题。菜鸟我正好知道这回事情.人道&quot;人之患好为人师&quot; 手里忍不住,就写点东西吧. 我也很忙.又没有MM,又没有MONEY....晕倒有点跑题. 
OK,闲话少说,切如正题.&nbsp;要了解网络执法官的原理.&nbsp;就要先了解局域网的通信的原理. 
前面我们看到了.在以太网上传输的都是具有以太网头的数据包.&nbsp</div>
                                </li>
                                <li><a href="/article/2716.htm"
                                       title="Android相对布局属性全集" target="_blank">Android相对布局属性全集</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a>
                                    <div>RelativeLayout布局android:layout_marginTop=&quot;25dip&quot; //顶部距离android:gravity=&quot;left&quot; //空间布局位置android:layout_marginLeft=&quot;15dip //距离左边距 
// 相对于给定ID控件android:layout_above 将该控件的底部置于给定ID的</div>
                                </li>
                                <li><a href="/article/2843.htm"
                                       title="Tomcat内存设置详解" target="_blank">Tomcat内存设置详解</a>
                                    <span class="text-muted">eksliang</span>
<a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/tomcat%E5%86%85%E5%AD%98%E8%AE%BE%E7%BD%AE/1.htm">tomcat内存设置</a>
                                    <div>Java内存溢出详解 
&nbsp; 
一、常见的Java内存溢出有以下三种： 
&nbsp; 
1.&nbsp;java.lang.OutOfMemoryError: Java heap space&nbsp;----JVM Heap（堆）溢出JVM在启动的时候会自动设置JVM Heap的值，其初始空间(即-Xms)是物理内存的1/64，最大空间(-Xmx)不可超过物理内存。 
可以利用JVM提</div>
                                </li>
                                <li><a href="/article/2970.htm"
                                       title="Java6 JVM参数选项" target="_blank">Java6 JVM参数选项</a>
                                    <span class="text-muted">greatwqs</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/HotSpot/1.htm">HotSpot</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/jvm%E5%8F%82%E6%95%B0/1.htm">jvm参数</a><a class="tag" taget="_blank" href="/search/JVM+Options/1.htm">JVM Options</a>
                                    <div>Java 6 JVM参数选项大全（中文版）  
&nbsp; 
作者：Ken Wu 
Email: ken.wug@gmail.com 
转载本文档请注明原文链接&nbsp;http://kenwublog.com/docs/java6-jvm-options-chinese-edition.htm！ 
&nbsp; 
本文是基于最新的SUN官方文档Java SE 6 Hotspot VM Opt</div>
                                </li>
                                <li><a href="/article/3097.htm"
                                       title="weblogic创建JMC" target="_blank">weblogic创建JMC</a>
                                    <span class="text-muted">i5land</span>
<a class="tag" taget="_blank" href="/search/weblogic/1.htm">weblogic</a><a class="tag" taget="_blank" href="/search/jms/1.htm">jms</a>
                                    <div>进入 weblogic控制太 
1.创建持久化存储 
 --Services--Persistant Stores--new--Create FileStores--name随便起--target默认--Directory写入在本机建立的文件夹的路径--ok 
 
2.创建JMS服务器 
 --Services--Messaging--JMS Servers--new--name随便起--Pers</div>
                                </li>
                                <li><a href="/article/3224.htm"
                                       title="基于 DHT 网络的磁力链接和BT种子的搜索引擎架构" target="_blank">基于 DHT 网络的磁力链接和BT种子的搜索引擎架构</a>
                                    <span class="text-muted">justjavac</span>
<a class="tag" taget="_blank" href="/search/DHT/1.htm">DHT</a>
                                    <div>上周开发了一个磁力链接和 BT 种子的搜索引擎&nbsp;{Magnet &amp; Torrent}，本文简单介绍一下主要的系统功能和用到的技术。 
系统包括几个独立的部分： 
 
  使用 Python 的&nbsp;Scrapy&nbsp;框架开发的网络爬虫，用来爬取磁力链接和种子；  
  使用 PHP CI 框架开发的简易网站；  
  搜索引擎目前直接使用的 MySQL，将来可以考虑使</div>
                                </li>
                                <li><a href="/article/3351.htm"
                                       title="sql添加、删除表中的列" target="_blank">sql添加、删除表中的列</a>
                                    <span class="text-muted">macroli</span>
<a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a>
                                    <div>添加没有默认值：alter table Test add BazaarType char(1) 
有默认值的添加列：alter table Test add BazaarType char(1) default(0) 
删除没有默认值的列：alter table Test drop COLUMN BazaarType 
删除有默认值的列：先删除约束（默认值）alter table Test DRO</div>
                                </li>
                                <li><a href="/article/3478.htm"
                                       title="PHP中二维数组的排序方法" target="_blank">PHP中二维数组的排序方法</a>
                                    <span class="text-muted">abc123456789cba</span>
<a class="tag" taget="_blank" href="/search/%E6%8E%92%E5%BA%8F/1.htm">排序</a><a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">二维数组</a><a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a>
                                    <div>&lt;?php/*** @package&nbsp;&nbsp;&nbsp;&nbsp; BugFree* @version&nbsp;&nbsp;&nbsp;&nbsp; $Id: FunctionsMain.inc.php,v 1.32 2005/09/24 11:38:37 wwccss Exp $*** Sort an two-dimension array by some level </div>
                                </li>
                                <li><a href="/article/3605.htm"
                                       title="hive优化之------控制hive任务中的map数和reduce数" target="_blank">hive优化之------控制hive任务中的map数和reduce数</a>
                                    <span class="text-muted">superlxw1234</span>
<a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a><a class="tag" taget="_blank" href="/search/hive%E4%BC%98%E5%8C%96/1.htm">hive优化</a>
                                    <div>一、&nbsp;&nbsp;&nbsp; 控制hive任务中的map数:  1.&nbsp;&nbsp;&nbsp; 通常情况下，作业会通过input的目录产生一个或者多个map任务。  主要的决定因素有： input的文件总个数，input的文件大小，集群设置的文件块大小(目前为128M, 可在hive中通过set dfs.block.size;命令查看到，该参数不能自定义修改)；2.&nbsp</div>
                                </li>
                                <li><a href="/article/3732.htm"
                                       title="Spring Boot 1.2.4 发布" target="_blank">Spring Boot 1.2.4 发布</a>
                                    <span class="text-muted">wiselyman</span>
<a class="tag" taget="_blank" href="/search/spring+boot/1.htm">spring boot</a>
                                    <div>Spring Boot 1.2.4已于6.4日发布，repo.spring.io&nbsp;and&nbsp;Maven Central可以下载(推荐使用maven或者gradle构建下载)。 
&nbsp; 
这是一个维护版本，包含了一些修复small number of fixes,建议所有的用户升级。 
&nbsp; 
Spring Boot 1.3的第一个里程碑版本将在几天后发布，包含许多</div>
                                </li>
                </ul>
            </div>
        </div>
    </div>

<div>
    <div class="container">
        <div class="indexes">
            <strong>按字母分类：</strong>
            <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a
                href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a
                href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a
                href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a
                href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a
                href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a
                href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a
                href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a
                href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a>
        </div>
    </div>
</div>
<footer id="footer" class="mb30 mt30">
    <div class="container">
        <div class="footBglm">
            <a target="_blank" href="/">首页</a> -
            <a target="_blank" href="/custom/about.htm">关于我们</a> -
            <a target="_blank" href="/search/Java/1.htm">站内搜索</a> -
            <a target="_blank" href="/sitemap.txt">Sitemap</a> -
            <a target="_blank" href="/custom/delete.htm">侵权投诉</a>
        </div>
        <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.
<!--            <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>-->
        </div>
    </div>
</footer>
<!-- 代码高亮 -->
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script>
<link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/>
<script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script>





</body>

</html>