|
html语言剖析
html简介
|
全写： hypertext mark-up language
译名： 超文件注标式语言（译名之一）
简释：一种为普通文件中某些字句加上标示的语言，其目的在于运用标记（tag）使文件达到预期的显示效果。
html 是在 sgml 定义下的一个描述性语言，或可说 html 是 sgml 的一个应用程式，html 不是程式语言，如 c++ 和 java 之类，它只是标示语言，基本上你只要明白了各种 标记的用法便算学懂了 html，html 的格式非常简单，只是由文字及标记组合而成，于 编辑方面，任何文字编辑器都可以，只要能将文件另存成 ascii 纯文字格式即可，当然 以专业的网页编辑软件为佳。
|
|
■ 阅读须知：
|
| 这一篇【html剖析】偏重于标记的介绍，考虑到易懂及每节的篇幅问题，我并不按 w3c 的 html 分类，这可令你更易选择有兴趣的标记，其中只有【文件标记】是必读的，其 余可任意选择。这一篇不会提及任何网页编辑软件，只要掌握了 html ，任何网页 编辑工具都可以变成一把利器。 |
|
■ 标记写法：
|
- 任何标记皆由"<"及">"所围住，如 <p>
- 标记名与小于号之间不能留有空白字符。
- 某些标记 要加上参数，某些则不必。如 <font size="+2">hello</font>
- 参数只可加于起始标记中。
- 在起始标记之标记名前加上符号"/"便是其终结标记，如 </font>
- 标记字母大小写皆可。
|
|
■ 围堵标记与空标记：
|
标记按型态分为围堵标记与空标记
- 围堵标记
顾名思义，它以起始标记及终结标记将文字围住，令其达到预期显示效果。
例如 html source ： <b>creation of webpage</b> is my favourite.
显示成： creation of webpage is my favourite.
其中 <b></b> 便称为围堵标记。
它以起始标记<b>及终结标记</b>标示文字 creation of webpage ，令它显示成粗体，两者失其一都会发生错误显示。
- 空标记
是指标记单独出现，只有起始标记没有终结标记。
例如 html source：
i love creation of webpage.<br>it's a wonderful place.
显示成：
i love creation of webpage.
it's a wonderful place.
其中换行标记<br>便属空标记。
它的作用便是将标记后所有东西显示于下一行，可见终结标记于它是没意义的， 但有些人会为空标记加上终结标记，这是为方便记认而己，对 html 没有影响。
|
|
html语言剖析▲top
html 标记一览
| 标记 |
类型 |
译名或意义 |
作 用 |
备注 |
| 文件标记 |
| <html> |
● |
文件声明 |
让浏览器知道这是 html 文件 |
|
| <head> |
● |
开头 |
提供文件整体资讯 |
|
| <title> |
● |
标题 |
定义文件标题，将显示于浏览顶端 |
|
| <body> |
● |
本文 |
设计文件格式及内文所在 |
|
| 排版标记 |
| <!--注解--> |
○ |
说明标记 |
为文件加上说明，但不被显示 |
|
| <p> |
○ |
段落标记 |
为字、画、表格等之间留一空白行 |
|
| <br> |
○ |
换行标记 |
令字、画、表格等显示于下一行 |
|
| <hr> |
○ |
水平线 |
插入一条水平线 |
|
| <center> |
● |
居中 |
令字、画、表格等显示于中间 |
反对 |
| <pre> |
● |
预设格式 |
令文件按照原始码的排列方式显示 |
|
| <div> |
● |
区隔标记 |
设定字、画、表格等的摆放位置 |
|
| <nobr> |
● |
不折行 |
令文字不因太长而绕行 |
|
| <wbr> |
● |
建议折行 |
预设折行部位 |
|
| 字体标记 |
| <strong> |
● |
加重语气 |
产生字体加粗 bold 的效果 |
|
| <b> |
● |
粗体标记 |
产生字体加粗的效果 |
|
| <em> |
● |
强调标记 |
字体出现斜体效果 |
|
| <i> |
● |
斜体标记 |
字体出现斜体效果 |
|
| <tt> |
● |
打字字体 |
courier字体，字母宽度相同 |
|
| <u> |
● |
加上底线 |
加上底线 |
反对 |
| <h1> |
● |
一级标题标记 |
变粗变大加宽，程度与级数反比 |
|
| <h2> |
● |
二级标题标记 |
将字体变粗变大加宽 |
|
| <h3> |
● |
三级标题标记 |
将字体变粗变大加宽 |
|
| <h4> |
● |
四级标题标记 |
将字体变粗变大加宽 |
|
| <h5> |
● |
五级标题标记 |
将字体变粗变大加宽 |
|
| <h6> |
● |
六级标题标记 |
将字体变粗变大加宽 |
|
| <font> |
● |
字形标记 |
设定字形、大小、颜色 |
反对 |
| <basefont> |
○ |
基准字形标记 |
设定所有字形、大小、颜色 |
反对 |
| <big> |
● |
字体加大 |
令字体稍为加大 |
|
| <small> |
● |
字体缩细 |
令字体稍为缩细 |
|
| <strike> |
● |
画线删除 |
为字体加一删除线 |
反对 |
| <code> |
● |
程式码 |
字体稍为加宽如<tt> |
|
| <kbd> |
● |
键盘字 |
字体稍为加宽，单一空白 |
|
| <samp> |
● |
范例 |
字体稍为加宽如<tt> |
|
| <var> |
● |
变数 |
斜体效果 |
|
| <cite> |
● |
传记引述 |
斜体效果 |
|
| <blockquote> |
● |
引述文字区块 |
缩排字体 |
|
| <dfn> |
● |
述语定义 |
斜体效果 |
|
| <address> |
● |
地址标记 |
斜体效果 |
|
| <sub> |
● |
下标字 |
下标字 |
|
| <sup> |
● |
上标字 |
指数（平方、立方等） |
|
| 清单标记 |
| <ol> |
● |
顺序清单 |
清单项目将以数字、字母顺序排列 |
|
| <ul> |
● |
无序清单 |
清单项目将以圆点排列 |
|
| <li> |
○ |
清单项目 |
每一标记标示一项清单项目 |
|
| <menu> |
● |
选单清单 |
清单项目将以圆点排列，如<ul> |
反对 |
| <dir> |
● |
目录清单 |
清单项目将以圆点排列，如<ul> |
反对 |
| <dl> |
● |
定义清单 |
清单分两层出现 |
|
| <dt> |
○ |
定义条目 |
标示该项定义的标题 |
|
| <dd> |
○ |
定义内容 |
标示定义内容 |
|
| 表格标记 |
| <table> |
● |
表格标记 |
设定该表格的各项参数 |
|
| <caption> |
● |
表格标题 |
做成一打通列以填入表格标题 |
|
| <tr> |
● |
表格列 |
设定该表格的列 |
|
| <td> |
● |
表格栏 |
设定该表格的栏 |
|
| <th> |
● |
表格标头 |
相等于<td>，但其内之字体会变粗 |
|
| 表单标记 |
| <form> |
● |
表单标记 |
决定单一表单的运作模式 |
|
| <textarea> |
● |
文字区块 |
提供文字方盒以输入较大量文字 |
|
| <input> |
○ |
输入标记 |
决定输入形式 |
|
| <select> |
● |
选择标记 |
建立 pop-up 卷动清单 |
|
| <option> |
○ |
选项 |
每一标记标示一个选项 |
|
| 图形标记 |
| <img> |
○ |
图形标记 |
用以插入图形及设定图形属性 |
|
| 连结标记 |
| <a> |
● |
连结标记 |
加入连结 |
|
| <base> |
○ |
基准标记 |
可将相对 url 转绝对及指定连结目标 |
|
| 框架标记 |
| <frameset> |
● |
框架设定 |
设定框架 |
|
| <frame> |
○ |
框窗设定 |
设定框窗 |
|
| <iframe> |
○ |
页内框架 |
于网页中间插入框架 |
ie |
| <noframes> |
● |
不支援框架 |
设定当浏览器不支援框架时的提示 |
|
| 影像地图 |
| <map> |
● |
影像地图名称 |
设定影像地图名称 |
|
| <area> |
○ |
连结区域 |
设定各连结区域 |
|
| 多媒体 |
| <bgsound> |
○ |
背景声音 |
于背景播放声音或音乐 |
ie |
| <embed> |
○ |
多媒体 |
加入声音、音乐或影像 |
|
| 其他标记 |
| <marquee> |
● |
走动文字 |
令文字左右走动 |
ie |
| <blink> |
● |
闪烁文字 |
闪烁文字 |
nc |
| <isindex> |
○ |
页内寻找器 |
可输入关键字寻找于该一页 |
反对 |
| <meta> |
○ |
开头定义 |
让浏览器知道这是 html 文件 |
|
| <link> |
○ |
关系定义 |
定义该文件与其他 url 的关系 |
|
| stylesheet |
| <style> |
● |
样式表 |
控制网页版面 |
|
| <span> |
● |
自订标记 |
独立使用或与样式表同用 |
|
注：
- ● 表示该标记属围堵标记，即需要关闭标记如 </标记>。
- ○ 表示该标记属空标记，即不需要关闭标记。
- ie 表示该标记只适用于 internet explorer。
- nc 表示该标记只适用于 netscape communicator。
- 反对 表示该标记不为 w3c 所赞同，通常这标记是 ie 或 nc 自订，且己为众所支 持，只是 html 标准中有其它同功能或更好的选择。
- 弃用 表示该标记己为 w3c 所弃用，是过时的标记，但 html 具向下兼容的特 性，不用担心新浏览器不支援旧标记。
- 新 表示该标记是 html 4.0 中新增的。
|
|
html语言剖析▲top
文件标记
| <html> ； <head> ； <title> ； <body>
欲明白本篇【html剖析】之标记分类请看 【标记一览】。
亦请先明白围堵标记与空标记的分别请看 【html概念】。
|
|
■ html 基本架构：
|
| 以下 html source code 便是一份 html 文件的基本架构 ：
<html>
<head>
<title> 网页的标题 </title>
</head>
<body>
网页的内容，很多标记都作用于此
</body>
</html> |
特点解说：
- 整份文件处于标记<html>与</html>之间。
<html>用以声明这是 html 文件，让浏览器认出并正确处理此 html 文件。
- 文件分两部分，由<head>至</head>称为开头，<body>至</body>称本文。
基本上两者各有适用的标记，如<title>只可出现于开头部分。
- 开头部分用以存载重要资讯，而只有本文部分会被显示。
所以大部分标记会运用于本文部分。
- <title>所标示的是文件的标题。
会出现于浏览器顶部及为别人 bookmark 时的名称，所以每页有不同而明确的标题 是需要的。
上述标记中只有<body>具参数设定。
|
|
■ <body> 之参数设定：
|
| 例子：
<body text="#000000" link="#0000ff" alink="#ff0000" vlink="#0000ff" background="bg1.gif" bgcolor="#ffffff" leftmargin=2 topmargin=2 bgproperties="fixed">
- text="#000000"
用以设定文字颜色。 #000000 代表黑色，亦可以采用颜色的名称，即 text="black" 。各种颜色的值及名称可参考【调色原理】一节。
- link="#0000ff"
设定一般文字连结颜色。
- alink="#ff0000"
设定刚按下时文字连结颜色。
- vlink="#0000ff"
设定连结后的颜色。（被按过）。
- background="bg1.gif"
设定背景墙纸。gif 或 jpeg 皆可，可以是绝对途径或相对途径。
- bgcolor="#ffffff"
设定背景颜色。当己设定背景墙纸时会失去作用，除非墙纸有透明部分。
- leftmargin=2
设定整份文件显示画面的左方边沿空间，单位为像素。 『只适用于ie』
- topmargin=2
设定整份文件显示画面的上方边沿空间。 『只适用于ie』
- bgproperties="fixed"
固定背景墙纸，当卷动文字时墙纸不会跟著卷动。 『只适用于ie』
标记及参数之字母大小都可以。 其他如 onload 等事件将于【java script 剖析】介绍。
|
|
html语言剖析▲top
排版标记
| <!--注解--> ； <p> ； <br> ； <hr> ； <center> ； <pre> ； <div> ； <nobr> ； <wbr> ； |
|
|
像很多电脑语言一样，html 文件亦提供注解功能。浏览器会忽略此标记中的文字（可以 是很多行）而不作显示，一般使用目的：
- 为文中不同部份加上说明，方便日后修改。
这对较复杂或非私人网页尤其重要，它不单是提醒自已，亦提醒你的同事这部分 做什么、那部分做什么。
例子：
<!--由这处开始是产品订购表格-->
- 用作版权声明。
假如你不希望别人使用或复制你的网页，可加上警告字眼。
例子：
<!--本文版权为 1998, creation of webpage 所拥有，未经许，请勿抄摘-->
|
|
|
| <p>称为段落标记。作用：为字、画、表格等之间留一空白行。
本来<p>是一围堵标记，标于一段落的头尾，但从 html 2.0 开始己不需要</p>作结尾。
<p> 的常用参数： 如：<p align="center">
- align="center"
可选值：right, left, center。
内定值： align="left"
例子：
| 原始码 |
here is the text for my paragraph. it does't matter how long it is,
how many space are between the words or when i decide to hit the return key.
it will create a new paragraph only when i begin the tag with another one.
<p>here's the next paragraph. |
| 显示结果 |
here is the text for my paragraph. it does't matter how long it is, how many space are between the words or when i decide to hit the return key. it will create a new paragraph only when i begin the tag with another one.
here's the next paragraph.
|
|
|
|
| <br>称为换行标记。作用：令字、画、表格等显示于下一行。
由于浏览器会自动忽略原始码中空白和换行的部分，这令到<br>成为最常用的标记之 一。因为无论你在原始码中编好了多漂亮的文章，若不适当地加上换行标记或段落标记， 浏览器只会将它显示成一大段。
错误示范：（邮局可不会接受一行过的地址）
| 原始码 |
566 e boston post rd
mamaroneck ny 10543-9982
united states of america |
| 结果 |
566 e boston post rd mamaroneck ny 10543-9982 united states of america |
正确例子：
| 原始码 |
566 e boston post rd
<br>mamaroneck ny 10543-9982
<br>united states of america |
| 结果 |
566 e boston post rd
mamaroneck ny 10543-9982
united states of america |
|
|
|
| <hr>称为水平线。作用：插入一条水平线。
<hr> 之参数修改：
以： <hr align="left" size="2" width="70%" color="#0000ff" noshade> 为例。
- align="left"
设定线条置放位置，可选择：left；right；center 三种设定值。
- size="2"
设定线条厚度，以像素作单位，内定为 2。
- width="70%"
设定线条长度，可以是绝对值（以像素作单位）或相对值，内定为 100%。
- color="#0000ff" 『只适用于ie』
设定线条颜色，内定为黑色。 #0000ff 代表蓝色，亦可以采用颜色的名称，即 text="blue" 。
- noshade
设定线条为平面显示，若删去则具阴影或立体，这是内定值。
例子：
| 原始码 |
<hr>
<hr align="left" size="4">
<hr align="left" size="2" width="70%" color="#0000ff" noshade>
<hr align="left" size="4" width="70" color="#008000"> |
| 显示结果 |
|
|
|
|
| <center>称为居中标记。作用：令字、画、表格等显示于中间。
这标记原先是 netscape 所定义，后来其它浏览器都支持它，但你会发现很多标记已有 align="center" 的参数，<center>似乎多馀了，事实上它还是常用的标记之一，其简单 易用，常用于文字上，对于己加有 align="center" 参数的 <table> 标记亦要不厌其烦 地加上居中标记，因有狻多浏览器不支持<table> 标记中的 align="center" 参数。
例子：
| 原始码 |
<center>chris's first homepage</center>
<center>what's new</center>
<center>my profile</center> |
| 结果 |
chris's first homepage
what's new
my profile |
|
|
|
| <pre>称为预设格式标记。作用：令文件按照原始码的排列方式显示。
这标记允许保留你于原始码中输入的空白及 return。细看以下例子你便可体会到此标记的 威力。除了运用一大堆表格标记之外你只有采用这标记才能有此效果。
能以<pre>标记产生对 效果，或产生多于一行的空白才算上乘！
例子：
| 原始码 |
<pre> creation of webpage log analysis i
composer learning 459 407 480 522 547 586 673
html advanced 200 268 296 358 385 453 506</pre>
|
| 显示结果 |
creation of webpage log analysis i
composer learning 459 407 480 522 547 586 673
html advanced 200 268 296 358 385 453 506
|
|
|
|
| <div>称为区隔标记。作用：设定字、画、表格等的摆放位置。
<div>应用于 style sheet（式样表）方面会更显威力，它最终目的是给设计者另一种组织 能力，有 class ; style ; title ; id 等属性，将会于【style sheet】一节才作详述，这处只介绍 一个属性设定。
以 <div align="center"> 为例：
- align="center"
可选值：center ; left ; right 。决定字、画、表格等居中、靠左或靠右。
<div align="center"> 的作用和居中标记 <center>一样，前者是由 html3.0 开始 的标准，后者是通用己久的标示法。
例子：
| 原始码 |
<div align="center">chris's first homepage
<br>what's new
<br>my profile</div> |
| 结果 |
chris's first homepage
what's new
my profile
|
|
|
|
| <nobr>称为不折行标记。作用：令某些文字不因太长而绕行，一 显示于同一行或下一 行。它对住址、数学算式、一行数字、程式码等尤为有用。
例子：（其中 chris's creation of webpage 将不被分开而显示于同一行。）
| 码 |
if you want to know how to create you own homepage quickly, don't miss <nobr>chris's creation of webpage</nobr> which will help you a lot. |
| 结果 |
if you want to know how to create you own homepage quickly, don't miss chris's creation of webpage which will help you a lot. |
|
|
|
<wbr>称为建议折行标记。作用：预设折行部位。
它没有侵犯到 <br> 的责任，只是作建议而已，若观者的系统解像度够高的话，那么它是 不会折行的。
例子：（若不加<wbr>标记，整个网址会显示于下一行。）
| 原始码 |
please visit my other homepage which locate at http://www.geocities.com/siliconvalley/<wbr>sector/8234/index.html there are many softwares for download. i think you will really love that place. |
| 结果 |
please visit my other homepage which locate at http://www.geocities.com/siliconvalley/sector/8234/index.html there are many softwares for download. i think you will really love that place. |
|
|
html语言剖析▲top
字体标记
<strong> <b>
<i> <em> <var> <cite> <dfn> <address>
<tt> <samp> <code> <kbd> <u> <strike> <big> <small> <sup> <sub>
<h1> <h2> <h3> <h4> <h5> <h6>
<font> <basefont> |
|
|
这一节【字体标记】你必须先明白实体标记与逻辑标记的分别，否则你会迷惑于为何不同 的标记却有相同的效果。两者分别有以下两处：
- 实体标记有固定的显示效果，逻辑标记则依不同浏览器而不同。
例如逻辑标记的 <em> 由于浏览器的不同它所标示的文字不一定出现斜体效果， 它可能是加底线、粗体或反白等，所以这一节是以它们在 ie 和 nc 中的效果作介 绍。
- 多个实体标记亦可有效标示同一字句，逻辑标记则通常于旧浏览器不能有效显示多 重的标示。
例如两个逻辑标记 <em> 及 <strong> 同时标示一字句于旧浏览器常失去作用。
- 实体标记有：
<i> <b> <u>
- 逻辑标记有：
<strong> <em> <var> <cite> <dfn> <address> <code> <kbo> <samp> <tt>
若要求真确的效果当然以实体标记为佳。
|
|
|
| 两者皆能产生字体加粗的效果，但必须注意的是当文件被设为 gb2312 encoding 时，两者所 标示的中文字不会于 netscape netvigator 显示粗体效果。
例子： （第一行是没有任何字体标记的，作对照之用）
| html source code （原始码） |
浏览器显示结果 |
creation of webpage
<br><strong>creation of webpage</strong>
<br><b>creation of webpage</b> |
creation of webpage
creation of webpage
creation of webpage |
|
■<i> <em> <var> <cite> <dfn> <address>：
|
|
|
| 这些标记于 internet explorer 都产生斜体效果，而只有 </dfn> 于 netscape netvigator 失去作 用。这些标记中只有 <address> 较为特别，因它包括换行效果所以不必在它前面加上 <br> 标记。
例子：
| html source code （原始码） |
浏览器显示结果 |
<i>creation of webpage</i>
<br><em>creation of webpage</em>
<br><var>creation of webpage</var>
<br><cite>creation of webpage</cite>
<br><dfn>creation of webpage</dfn>
<address>creation of webpage</address> |
creation of webpage
creation of webpage
creation of webpage
creation of webpage
creation of webpage
creation of webpage
|
|
■<tt> <samp> <code> <kbd> <u> <strike> <big> <small> <sup> <sub>
|
|
|
为方便对照及记认，所以把十个标记于在一起介绍。
- <tt> <samp> <code> <kbd> 可令每字母有相等宽度且每字母之间的距离稍为加 宽。但于 nc 不见得如此。
- <u> 是加底线的标记，一些特别的浏览器并不支援，因顾虑到与连结混淆。
- <strike> 加上删除线的标记。
- <big> 令字体加大。
- <small> 令字体变细。
- <sub> 为下标字， <sup> 则为上标字，仅剩的数学标记。
例子： （第一行是没有任何字体标记的，作对照之用）
| html source code （原始码） |
浏览器显示结果 |
creation of webpage
<br><tt>creation of webpage</tt>
<br><samp>creation of webpage</samp>
<br><code>creation of webpage</code>
<br><kbd>creation of webpage</kbd>
<br><u>creation of webpage</u>
<br><strike>creation of webpage</strike>
<br><big>creation of webpage</big>
<br><small>creation of webpage</small>
<br>12345<sub>7</sub> 6789<sup>9</sup> |
creation of webpage
creation of webpage
creation of webpage
creation of webpage
creation of webpage
creation of webpage
creation of webpage
creation of webpage
creation of webpage
123457 67899 |
|
■<h1> <h2> <h3> <h4> <h5> <h6>：
|
|
|
| 这些是标题标记，由 <h1> 至 <h6> 变粗变大加宽的程度逐渐减小。每个标题标记所标示 的字句将独占一行且上下留一空白行。
例子：
| 原始码 |
<h1>header level 1</h1>
<h2>header level 2</h2>
<h3>header level 3</h3>
<h4>header level 4</h4>
<h5>header level 5</h5>
<h6>header level 6</h6> |
| 显示结果 |
header level 1
header level 2
header level 3
header level 4
header level 5
header level 6
|
|
|
|
这一节只有这两个标记具参数设定，且两者的参数设定是一样的，都是负责设定文字的大 小、字形及颜色，但各有用处，且看以下比较：
- <basefont> 可以用于文件的开头部分，即 <head> 与 </head> 之间的位置，将 影响全文字句，是一个空标记，用以改变字体显示的内定值。
<font> 是应用于文件的内文部分，即 <body> 与 </body> 之间的位置，只影响 所标示的字句，是一个围堵标记。
- 两标记可同时存在，唯没被 <font> 所标示的字句才直接受 <basefont> 所影 响，而 <font> 本身亦受 <basefont> 的影响。
<font>的参数设定：
例子： <font face="arial" size="+2" color="#008000">creation of webpage</font>
- face="arial"
设定文字的字形。arial 是常用的一种，请不要使用 window 内建字 形以外的字形。于没有设定为 gb2312 encoding 的中文网页，netscape netvigator 不会显示此标记 所指明的任何中文字形。
- size="+2"
设定文字的大小。其值可以是绝对或相对，
绝对的意思便是标记自己决定文字的大小，不受 <basefont> 的影响，如
size="5" 表示其大小便是 5， 而html内定值为 3，即 size="3"和没有设定是一样的。
相对的意思便是在内定值 3 的基础上增加或减少大小级数，如 size="+2" 便等同绝 对表示法的 size="5"，但若已设定 <basefont size="n"> 则其实际大小便是 n+2 不 再是 3+2 了。<basefont>只有绝对表示法。
- color="#008000"
设定文字的颜色。#008000 表示绿色
例子：
| 原始码 |
<font size="+1">i love creation of webpage</font>
<br><font size="+2" color="#800080">i love creation of webpage</font>
<br><font face="times new roman" size="5" color="#008000">i love creation of webpage</font> |
| 显示结果 |
i love creation of webpage
i love creation of webpage
i love creation of webpage |
|
|
html语言剖析▲top
清单标记
<ol> <li>
<ul>
<menu> <dir>
<dl> <dt> <dd> |
|
|
<ol>称为顺序清单标记。<li>则用以标示清单项目。
所谓顺序清单就是在每一项前面加上 1,2,3... 等数目，又称编号清单。
<ol> 的参数设定（常用）：
例如： <ol type="i" start="4"></ol>
- type="i"
设定数目款式，其值有五种，请参考 右表，内定为 type="1"。
- start="4"
设定开始数目，不论设定了哪一数 目款式，其值只能是 1,2,3.. 等整 数，内定为 start="1"。
|
| type |
numbering style |
| 1 |
arabic numbers |
1, 2, 3, ... |
| a |
lower alpha |
a, b, c, ... |
| a |
upper alpha |
a, b, c, ... |
| i |
lower roman |
i, ii, iii, ... |
| i |
upper roman |
i, ii, iii, ... |
|
<li> 的参数设定（常用）：
例如： <li type="square" value="4">
- type="square"
只适用于非顺序清单，设定符号款式，其值有三种，如下，内定为 type="disc"：
符号  是当 type="disc" 时的列项符号。
符号  if" width=10 height=10 border=0> 是当 type="circle" 时的列项符号。
符号  是当 type="square" 时的列项符号。
- value="4"
只适用于顺序清单，设定该一项的数目，其後各项将以此作为起始数目而递增， 但前面各项则不受影响，其值只能是 1,2,3.. 等整数，没有内定值。
例子：
| html source code （原始码） |
浏览器显示结果 |
my best friends:
<ol>
<li>michelle wei
<li>michael wan
<li>gloria lam
</ol> |
my best friends:
- michelle wei
- michael wan
- gloria lam
|
|
|
|
<ul>称为无序清单标记。
所谓无序清单就是在每一项前面加上 、、 等符号，故又称符号清单。
<ul> 的参数设定（常用）：
例如： <ul type="square">
- type="square"
设定符号款式，其值有三种，如下，内定为 type="disc"：
符号 是当 type="disc" 时的列项符号。
符号 是当 type="circle" 时的列项符号。
符号 是当 type="square" 时的列项符号。
注意：由于 <ul> 及 <li> 都有 type 这个参数，两者尽可能选用其一。
例子：
| html source code （原始码） |
浏览器显示结果 |
my homepages:
<ul>
<li>penpals garden
<li>icq garden
<li>software city
<li>creation of webpage
</ul> |
my homepages:
- penpals garden
- icq garden
- software city
- creation of webpage
|
|
|
|
这两个标记都不为 w3c 所赞同，希望用者能以 <ul> 及 <ol> 代之。
<menu> 及 <dir>，基本上它和 <ul> 是一样的，在一些特别的浏览器可能表现出 <ol> 的 效果，于旧版的 ie 或 nc 标记 <dir> 不显示符号或数目。两标记的用法与 <ul> 完全一 样。
例子：
| html source code （原始码） |
浏览器显示结果 |
my homepages:
<dir>
<li>penpals garden
<li>icq garden
<li>software city
<li>creation of webpage
</dir> |
my homepages:
penpals garden
icq garden
software city
creation of webpage
|
|
|
|
<dl>称为定义清单标记。 <dt> 用以标示定义条目，<dd> 则用以标示定义内容。
所谓定义清单就是一种分二层的项目清单，其不故符号及数目。
三个标记都没有常用的参数。而 <dt> <dd> 可以独立使用，只是一些旧的浏览器并不支 援，如 ie 3.0。常用的如 <dd> 标记可用以制造段落第一个字前面的空白。
例子：
| 原始码 |
<dl>
<dt>how to use definition list
<dd>first, you should not place paragraph tag right after or before a list structure or between the items of a list. in cerntain contexts, use of extra paragraph tags should always be avoided, when you realize this concept, it is quit easy to write a html.
<dt>other things to know
<dd>we usually put only one definition tag following the definition term tag, more than one dd tag is not recommanded. besides, unlike definition list is a nonempty tag, both definition term and definition description are empty tags.
</dl> |
| 显示结果 |
- how to use definition list
- first, you should not place paragraph tag right after or before a list structure or between the items of a list. in cerntain contexts, use of extra paragraph tags should always be avoided, when you realize this concept, it is quit easy to write a html.
- other things to know
- we usually put only one definition tag following the definition term tag, more than one dd tag is not recommanded. besides, unlike definition list is a nonempty tag, both definition term and definition description are empty tags.
|
|
|
html语言剖析▲top
表格标记
<table> <tr> <td>
<th>
<caption> |
|
|
这三个标记是定义表格的最重要的标记，可以说只学这三个己足够。
<table>是一个容器标记，意思是说它用以声明这是表格而且其他表格标记只能在他的 范围内才适用，属容器标记的还有其他。
<tr>用以标示表格列（row）
<td>用以标示储存格（cell）
<table> 的参数设定（常用）：
例如： <table width="400" border="1" cellspacing="2" cellpadding="2" align="center" valign="top" background="myweb.gif" bgcolor="#0000ff" bordercolor="#ff00ff" bordercolorlight="#00ff00" bordercolordark="#00ffff" cols="2">
- width="400"
表格宽度，接受绝对值（如 80）及相对值（如 80%）。
- border="1"
表格边框厚度，不同浏览器有不同的内定值，故请指明。
- cellspacing="2"
表格格线厚度，请看例子三，那是加厚到 5 的格线。
- cellpadding="2"
文字与格线的距离，请看例子四，那是加至 10 的 padding。
- align="center"
表格的摆放位置（水平），可选值为： left, right, center，请看例子五或六，那表格 是放于中间的，为怕一些浏览器不支援，故特加上居中标记<center>，只是多 层保证而己，当然只用<center>亦可。
- valign="top".
表格内字画等的摆放贴 位置（垂直），可选值为： top, middle, bottom。
- background="myweb.gif"
表格 纸，与 bgcolor 不要同用。
- bgcolor="#0000ff"
表格底色，与 background 不要同用，请看例子六。
- bordercolor="#ff00ff"
表格边框颜色，nc 与 ie 有不同的效果，请看例子六。
- bordercolorlight="#00ff00"
表格边框向光部分的颜色，请看例子二。『只适用于 ie』
- bordercolordark="#00ffff"
表格边框背光部分的颜色，请看例子二，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 ie』
- cols="2"
表格栏位数目，只是让浏览器在下载表格是先画出整个表格而己。
<tr> 的参数设定（常用）：
例如：<tr align="right" valign="middle" bgcolor="#0000ff" bordercolor="#ff00ff" bordercolorlight="#808080" bordercolordark="#ff0000">
- align="right"
该一列内字画等的摆放贴 位置（水平），可选值为： left, center, right。
- valign="middle"
该一列内字画等的摆放贴 位置（垂直），可选值为： top, middle, bottom。
- bgcolor="#0000ff"
该一列底色，请看例子五。
- bordercolor="#ff00ff"
该一列边框颜色，请看例子三。『只适用于 ie』
- bordercolorlight="#808080"
该一列边框向光部分的颜色，请看例子三。『只适用于 ie』
- bordercolordark="#ff0000"
该一列边框背光部分的颜色，请看例子三，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 ie』
<td> 的参数设定（常用）：
例如：<td width="48%" height="400" colspan="5" rowspan="4" align="right" valign="bottom" bgcolor="#ff00ff" bordercolor="#808080" bordercolorlight="#ff0000" bordercolordark="#00ff00" background="myweb.gif">
- width="48%"
该一储存格宽度，接受绝对值（如 80）及相对值（如 80%）。
- height="400"
该一储存格高度。
- colspan="5"
该一储存格向右打通的栏数。请看例子六
- rowspan="4"
该一储存格向下打通的列数。请看例子六
- align="right"
该一储存格内字画等的摆放贴 位置（水平），可选值为： left, center, right。
- valign="bottom"
该一储存格内字画等的摆放贴 位置（垂直），可选值为： top, middle, bottom。
- bgcolor="#ff00ff"
该一储存格底色，请看例子四。
- bordercolor="#808080"
该一储存格边框颜色，请看例子三。『只适用于 ie』
- bordercolorlight="#ff0000"
该一储存格边框向光部分的颜色，请看例子三。『只适用于 ie』
- bordercolordark="#00ff00"
该一储存格边框背光部分的颜色，请看例子三，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 ie』
- background="myweb.gif"
该一储存格 纸，与 bgcolor 任用其一。
例子一：
| 原始码 |
<table width="60%" border="1">
<tr><td>只有一个储存格（cell）的表格</td></tr>
</table> |
| 显示结果 |
|
例子二：
| 原始码 |
<table width="60%" border="5" bordercolorlight="#ff00ff" bordercolordark="#ff0000">
<tr><td>第一列第一栏</td><td>第一列第二栏</td></tr>
</table> |
| 显示结果 |
|
例子三：
| 原始码 |
<table width="60%" border="1" cellspacing="5">
<tr bordercolor="#0000ff">
<td>第一列第一栏</td>
<td>第一列第二栏</td>
</tr>
<tr bordercolorlight="#ff00ff" bordercolordark="#00ff00">
<td>第二列第一栏</td>
<td>第二列第二栏</td>
</tr>
</table> |
| 显示结果 |
| 第一列第一栏 |
第一列第二栏 |
| 第二列第一栏 |
第二列第二栏 |
|
例子四：
| 原始码 |
<table width="60%" border="1" cellpadding="10">
<tr>
<td bgcolor="#ffcce6">第一列第一栏</td>
<td bgcolor="#ffffc6">第一列第二栏</td>
</tr>
<tr>
<td bgcolor="#ffd9ff">第二列第一栏</td>
<td bgcolor="#dab4b4">第二列第二栏</td>
</tr>
</table> |
| 显示结果 |
| 第一列第一栏 |
第一列第二栏 |
| 第二列第一栏 |
第二列第二栏 |
|
例子五：
| 原始码 |
<center>
<table width="60%" cellspacing="0" cellpadding="2" align="center">
<tr>
<td bgcolor="#ffd2e9">第一列第一栏</td>
<td bgcolor="#ffdab5">第一列第二栏</td>
<td bgcolor="#ffffb5">第一列第三栏</td>
</tr>
<tr bgcolor="#c0c0c0">
<td>第二列第一栏</td>
<td>第二列第二栏</td>
<td>第二列第三栏</td>
</tr>
</table>
</center> |
| 显示结果 |
| 第一列第一栏 |
第一列第二栏 |
第一列第三栏 |
| 第二列第一栏 |
第二列第二栏 |
第二列第三栏 |
|
例子六
| 原始码 |
<center>
<table width="350" border="1" cellspacing="0" cellpadding="2" align="center" bgcolor="#ffc4e1" bordercolor="#0000ff">
<tr>
<td>第一列第一栏</td>
<td colspan="2">第一列 之 第二栏及第三栏</td>
</tr>
<tr>
<td rowspan="2">第二列及第三列 之 第一栏</td>
<td>第二列第二栏</td>
<td>第二列第三栏</td>
</tr>
<tr>
<td>第三列第二栏</td>
<td>第三列第三栏</td>
</tr>
</table>
</center> |
| 显示结果 |
| 第一列第一栏 |
第一列 之 第二栏及第三栏 |
| 第二列及第三列 之 第一栏 |
第二列第二栏 |
第二列第三栏 |
| 第三列第二栏 |
第三列第三栏 |
|
|
|
|
<th>与<td>同样是标示一个储存格，唯一不同的是<th>所标示的储存格中的文字是以粗 体出现，通常用于表格第一列以标示栏目。它的用法是取代<td>的位置便可以，其参数 设定请参考<td>。
当然若为<td>所标示的储存格中的文字加上粗体标记<b>便等如<th>的效果。
例子：
| 原始码 |
<center>
<table width="350" border="1" cellspacing="0" cellpadding="2" align="center">
<tr align="center">
<th>month</th><th>% of ie visitor</th><th>% of nc visitor</th>
</tr>
<tr align="center">
<td>august</td><td>61%</td><td>39%</td>
</tr>
<tr align="center">
<td>july</td><td>54%</td><td>46%</td>
</tr>
<tr align="center">
<td>june</td><td>52%</td><td>48%</td>
</tr>
</table>
</center> |
| 显示结果 |
| month |
% of ie visitor |
% of nc visitor |
| august |
61% |
39% |
| july |
54% |
46% |
| june |
52% |
48% |
|
|
|
|
| <caption> 的作用是为表格标示一个标题列，有如在表格上方加上一没格线的打通列。 当然亦可置于下方，通常用以存放该表格的标题。
<caption> 的参数设定（常用）：
例如：<caption align="top" valign="top"></caption>
- align="top"
该表格标题列相对于表格的摆放贴 位置（水平），可选值为： left, center, right, top, middle, bottom，若 align="bottom" 的话标题列便会出现对表格的下方，不管你 的原始码中把 <caption> 放在 <table> 中的头部或尾部。
- valign="top"
该表格标题列相对于表格的摆放位置（上下），可选值为： top, bottom。和 align="top" 或 align="bottom" 是一样的，虽然功能重复了，但如果你要标题列 置于下方及向右或向左贴 ，那末两个参数便可一 用了。当只 一个参数时， 请首选 align，因为 valign 是由 html 3.0 才开始的参数。
例子：
| 原始码 |
<center>
<table width="350" border="1" cellspacing="0" cellpadding="2" align="center">
<caption>网页速成 八月份访客浏览器使用分析</caption>
<tr align="center">
<th>month</th>
<th>% of ie visitor</th>
<th>% of nc visitor</th>
</tr>
<tr align="center">
<td>august</td>
<td>61%</td>
<td>39%</td>
</tr>
</table>
</center> |
| 显示结果 |
网页速成 八月份访客浏览器使用分析
| month |
% of ie visitor |
% of nc visitor |
| august |
61% |
39% |
|
|
|
html语言剖析▲top
表单标记
<form> <input>
input 的种类： text, radio,checkbox, password, submit/reset, image, file, hidden, button。
<select> <option>
<textarea> |
|
■ 引子
|
| 表单的用处很多，于网上无处不见，当然是配合 cgi 使用为佳，所以馈下有意使用或学 习 cgi 的话，表单设计见必需的，这一节介绍的标记不多，但其参数变化很多。一份表单的基本架构是：在 <form> 标记 的包围下加上一种或以上的表单输入方式及一个或以上的按键。 |
|
|
| <form>称为表单标记，用以宣告此为表单模式，属于一个容器标记，表示其它表单标记需要在它的包围中才有效，<input>便是其中的一个，用以设定各种输入资料的方法。它 是一个空标记。
<form> 的参数设定（常用）：
例如： <form action="http://your.isp.com/cgi-local/example.cgi" method="post">
- action="http://your.isp.com/cgi-local/example.cgi"
表单通常是与 cgi 配合使用的，参数 action 便是用以指明该 cgi 程式的位置，这 样此表单所填的资料才能正确传给 cgi 作处理。若馈下没有 cgi 以进行测试，可 设定此参数为 action="mailto:your@email.com" 那样该表单所填的资料将会寄至 此电邮地址（红色部分）。
- method="post"
传送资料给 cgi 的的方式，可选值为 post, get。你只需记住post容许传送大量资料，但 get则只接受低于 1k 的资 料，所以你若看过别人的表单原始码的话，你会发现申请表单用的是post 而搜 找器用的是 get。
<input> 的参数设定（常用）：
由于其第一个参数 type 己有很多的选择，而不同的选择表示出不同的输入方式，且其它 参数亦因此而异，故以下将独立介绍不同输入方式及其它参数设定。
输入方式一： text （单行文字盒）
例如<input type="text" name="age" value="20" align="middle" size="2" maxlength="255">
- type="text"
输入方式为 text，能产生一单行文字盒，上限为 255 字元。
- name="age"
此一单行文字盒名称，这是最重要的一个，方便 cgi 辨认由表单传来的资料，虽 说可随便命名，但通常 cgi 程式中都有指定名称，若转用其它名称便需要修改该 cgi 程式了，名称可为没空白没特别符号的英文或数字，有大小写的分别，可以 写成 your_age，若有访客于此表单此一文字盒填入 40 的话，那末传给 cgi 的字 串便是 your_age=40。
- value="20"
此一单行文字盒内定值。若不填写则文字盒是空白的，等待访客亲自键入，若 value="20" 的话， 20 便会出现在文字盒中，当然访客可以修改之。
- align="middle"
可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle. 没太大有处。
- size="2"
此一单行文字盒显示的长度，若馈下是采用 big5 编码的中文网页便要小心，同 size 的文字盒 nc 会显示得比 ie 狻长。
- maxlength="255"
此一单行文字盒可输入字元的上限，为方便编排资料或避免错输入等，宜设定上 限，例如输入电话或 icq uin 的可设为 8，年龄为 2 等。
例子：
| 原始码 |
<form action="http://your.isp.com/cgi-local/example.cgi" method="post">
请填入电话号码：<input type="text" name="phone" value="" size="10" maxlength="8">
</form> |
| 显示结果 |
|
输入方式二： radio （单一选择）
例如：<input type="radio" name="gender" value="female" align="middle" checked>
- type="radio"
输入方式为 radio，能产生一单一选择，以供点选。
- name="gender"
此一 radio 名称，参考 text 部分的说明。
- value="female"
内定值。每一个 radio 必须及仅有一个 value，通常有同时采用两个或以上同 name 不同 value 的 radio 输入方式，可让使用使任选其一。
- align="middle"
可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle。
- checked
设该 radio 为内定被选。同 name 的各个 radio 中只能有一个使用，或全不使用这 参数。
例子：
| 原始码 |
<form action="http://your.isp.com/cgi-local/example.cgi" method="post">
请选性别：
<input type="radio" name="gender" value="female">女性
<input type="radio" name="gender" value="male" checked>男性
<br>你喜欢吗：
<input type="radio" name="like" value="yes">喜欢
<input type="radio" name="like" value="no">不喜欢
<input type="radio" name="like" value="notsure">不肯定
</form> |
| 显示结果 |
|
输入方式三： checkbox （确认盒）
例如：<input type="checkbox" name="idol" value="leon" align="right" checked>
- type="checkbox"
输入方式为 checkbox，能产生一确认盒，以供剔选。
- name="idol"
此一 checkbox 名称，参考 text 部分的说明。
- value="leon"
内定值。每一个 checkbox 必须及仅有一个 value，当被剔选时这值便会传及 cgi，例如所传字串 idol=leon 。
- align="right"
可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle。
- checked
设该 checkbox 为内定被选。每个 checkbox 都是独立的，所以每一个都可使用这 参数，不像 radio。
例子：
| 原始码 |
<form action="http://your.isp.com/cgi-local/example.cgi" method="post">
你喜欢以下那些明星：
<br><input type="checkbox" name="idol01" value="leon">黎明
<input type="checkbox" name="idol02" value="noriko_sagai">酒井法子
<input type="checkbox" name="idol03" value="leon">郑秀文
<input type="checkbox" name="idol04" value="bonjovi" checked>bonjovi
</form> |
| 显示结果 |
|
输入方式四： password （密码输方盒）
例如：<input type="password" name="pw" value="999" align="middle" size="5" maxlength="9">
- password 的其他参数和 text 是完全相同的，请参考 text 的介绍。
两者作用不同，password 所输入的字元全以 * 号表示。
例子：
| 原始码 |
<form action="http://your.isp.com/cgi-local/example.cgi" method="post">
请输入姓名：<input type="text" name="name">
<br>请输入密码：<input type="password" name="pw" maxlength="9">
</form> |
| 显示结果 |
|
输入方式五： submit （传送键）及 reset （清除键）
这是表单上重要的两个按键，两者所附带的参数相同，但用处不大。
例如：<input type="submit" name="other_funtion" value="确定" align="middle">
<input type="reset" value="清除" align="middle">
- type="submit"
设定输入方式为 submit 或 reset。
- name="other_funtion"
submit 的功能随 name 的不同而不同，须和 cgi 配合。若你只需要普通的传送 键，则是其内定，不必用此参数。
- value="确定"
这个值不是输给 cgi 的，而是显示在按键上，可以不用，传送键的内定值为 submit query，清除键的内定值为 reset。
- align="middle"
可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle。
例子：
| 原始码 |
<form action="http://your.isp.com/cgi-local/example.cgi" method="post">
<input type="submit"><input type="reset">
<br><input type="submit" value=" 确定 "><input type="reset" value="清除">
</form> |
| 显示结果 |
|
输入方式六： image （图片按键）
这通常用以取代 submit 及 reset 两个按键，因为由程式产生的按键并不漂亮，这 image 参 数便容许你采用自已制造的按键。
例如：<input type="image" name="submit" align="bottom" src="ex_icon.gif">
- type="image"
输入方式为 image。
- name="submit"
所要代表的按键，可以是 submit, reset, 或其它。
- align="bottom"
可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle。
- src="ex_icon.gif"
按键图片来源，若此图片文件不与该 html 文件在同一目录下，请加上相对或绝对途 径。
例子：
| 原始码 |
<form action="http://your.isp.com/cgi-local/example.cgi" method="post">
<input type="image" name="submit" align="bottom" src="ex_icon.gif">
</form> |
| 显示结果 |
|
输入方式七： file
例如：<input type="file" name="upload" align="bottom" size="20" maxlength="100" accept="text/html">
- input type="file"
输入方式为 image。通常用以传输文件。
- name="upload"
这文件传输的名称，用以识别之用。
- align="bottom"
可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle。
- size="20"
所显示文字盒的长度。
- maxlength="100"
可输入字元的上限。
- accept="text/html"
所接受的文件类别，有二十六种选择，但可不设定。
例子：
| 原始码 |
<form action="http://your.isp.com/cgi-local/example.cgi" method="post">
<type="file" name="upload" size="30" maxlength="100" accept="text/html">
</form> |
| 显示结果 |
|
输入方式八： hidden
例如：<input type="hidden" name="id" value="6618">
- type="hidden"
输入方式为隐藏或内定。它不会显示任何输入介面，而是一个内定值随表单一起 传给 cgi，列如由 cgi 产生的会员号码，或传入可更改的参数以调整 cgi 而避免 修改 cgi 程式码。
- name="id"
这文件传输的名称，用以识别之用。
- value="6618"
内定值，会以如 id=6618 形式传给 cgi。
例子： （"hidden" 是不被显示的，所以这处多放了一个 "submit" 键，表示 hidden 之内定 值会随 submit 键被按而传给 cgi）
| 原始码 |
<form action="http://your.isp.com/cgi-local/example.cgi" method="post">
<input type="hidden" name="id" value="6618">
<input type="submit" value="submit">
</form> |
| 显示结果 |
|
输入方式九： button
例如：<input type="button" name="useless" value="back">
- type="button"
输入方式为一般按键。常配合 java script 作为其启动按键。
- name="useless"
这文件传输的名称，用处不大。
- value="back"
按键显示名称。
例子： 其中 onclick="history.go( -1 );return true; 属 java 事件。
| 原始码 |
<form>
<input type="button" value="回前一页" onclick="history.go( -1 );return true;">
</form> |
| 显示结果 |
|
|
|
|
| <select>是卷动选单标记，每一选项皆由 <option> 所标示，把它当作围堵标记或空标 记使用都可以。
<select> 的参数设定（常用）：
例如： <select name="where" size="6" multiple>
- name="where"
这卷动选单的名称，作识别之用，将会传及 cgi。
- size="6"
这卷动选单的列数，即其高度，请自行修改。若使用此参数则不会有 pop up 效 果。
- multiple
令这卷动选单容许多重选择。
<option> 的参数设定（常用）：
例如： <option value="tw" selected>
- value="tw"
这选项的值，将会传及 cgi。请自行修改，但不同选项必须有不同的值。
- selected
设该选项为内定被选。一个单选卷动选单只能有一项或零可内定被选。
例子一： （普通 pop up 卷动选单）
| 原始码 |
<form action="http://your.isp.com/cgi-local/example.cgi" method="post"> where you com from?
<select name="where">
<option value="hk">hong kong</option>
<option value="tw" selected>taiwan</option>
<option value="cn">china</option>
<option value="us">united states</option>
<option value="ca">canada</option>
</select>
</form> |
| 显示结果 |
|
例子二： （容许多重选择 的卷动选单）
| 原始码 |
<form action="http://your.isp.com/cgi-local/example.cgi" method="post"> where you com from?
<select name="where" multiple>
<option value="hk">hong kong</option>
<option value="tw" selected>taiwan</option>
<option value="cn">china</option>
<option value="us">united states</option>
<option value="ca">canada</option>
</select>
</form> |
| 显示结果 |
|
例子三：（设定了 size 的卷动选单）
| 原始码 |
<form action="http://your.isp.com/cgi-local/example.cgi" method="post"> where you com from?
<select name="where" size="5">
<option value="hk">hong kong</option>
<option value="tw" selected>taiwan</option>
<option value="cn">china</option>
<option value="us">united states</option>
<option value="ca">canada</option>
</select>
</form> |
| 显示结果 |
|
|
|
|
| <textarea>是表单文字区块标记，常用于 bug report, feedback 等需要填写大量资料的用 途。
<textarea> 的参数设定（常用）：
例如： <textarea name="comments" cols="40" rows="4" wrap="virtual">
- name="comments"
这文字区块的名称，作识别之用，将会传及 cgi。
- cols="40"
这文字区块的宽度，请自行修改。
- rows="4"
这文字区块的列数，即其高度，请自行修改。
- wrap="virtual"
设定其折行问题，可选值为： off, physical, virtual。off 表示不使用此属性，physical 时则会强迫刘览器在送资料到 cgi（web 伺服器端）必须将实№文字中的换行一 并送出，设为 virtual 时则送出连续成串的字（除非使用者按了键盘的 return / enter）。
例子：
| 原始码 |
<form action="http://your.isp.com/cgi-local/example.cgi" method="post">
give comments:
<textarea name="comments" cols="40" rows="4" wrap="virtual">
这是预设的字句，通常留空的，随你喜欢。</textarea>
</form> |
| 显示结果 |
|
|
|
html语言剖析▲top
图形标记
| <img> |
|
|
| <img> 称图形标记，主要用以插入图片于网页中，至于其它用处如配合影片文件等的播 放及影像地图（image map 或称一图多连结）则于不会在这节提及，请看【影像地图】及 【其他标记】。
<img> 的一般参数设定：
例如 <img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="logo of penpals garden" lowsrc="pre_logo.gif">
- src="logo.gif"
图片来源，接受 .gif, .jpg 及 .png 格式，前两者通行己久，后者由 96 年开始发展， 于未来取代前两者。若图片文件与该 html 文件同处一目录则只 写上文件案名称，否则 必须加上正确的途径，相对及绝对皆可。
- width=100 height=100
设定图片大小，此宽度、及高度一般采用 pixels 作单位。通常只设为图片的真实 大小以免失真，若 要改变图片大小最好事先使用图像编辑工具。
- hspace=5 vspace=5
设定图片边沿空白，以免文字或其它图片过于贴近。hspace 是设定图片左右的空 间，vspace 则是设定图片上下的空间，高度采用 pixels 作单位。
- border=2
图片边框厚度。
- align="top"
调整图片旁边文字的位置，你可以控制文字出现在图片的偏上方、中间、底端、 左右等，可选值：top, middle, bottom, left, right，内定为 botom。netscape 还支持 texttop, baseline, absmiddle, absbottom，
texttop 表示图片和文字依顶线对 ，
baseline 表示图片对 到目前文字行底线值，
absmiddle 表示图片对 到目前文字行绝对中央，
absbottom 表示图片对 到目前文字行绝对底部，（绝对底部意指它考虑到比方 y 、g、q 等字的下缘）。
- alt="logo of penpal garden"
这是用以描述该图形的文字，若用者使用文字浏览器，由于不支持图片，这些文 字更会代替图片而被显示。若于支持图片显示的浏览器，当鼠标移至图片上该些 文字亦会显示。
- lowsrc="pre_logo.gif"
设定先显示低解像图片，若所加入的是一张很大的图片，下载 时很长，这张低 解像图片会先被显示以免浏览失却兴趣，通当是原图片灰阶版本。
例子一：
| 原始码 |
<img src="girl.gif" width=100 height=112 border=0 alt="beautiful girl"> 普通插入 |
| 显示结果 |
 普通插入 |
例子二：
| 原始码 |
<img src="girl.gif" width=100 height=112 border=0 alt="beautiful" hspace=10 vspace=20"> 设定上下左右空白位置 |
| 显示结果 |
设定上下左右空白位置 |
例子三：
| 原始码 |
<img src="girl.gif" width=100 height=112 border=4 alt="beautiful" hspace=10 vspace=20"> 设定上下左右空白位置 |
| 显示结果 |
设定字画中间对 ，边框厚度为 4。 |
例子四：
| 原始码 |
<img src="girl.gif" width=100 height=112 alt="beautiful lady" align="right" border=0> 设定图片靠右。 |
| 显示结果 |
设定图片靠右。 |
例子五：
| 原始码 |
<img src="girl.gif" width=200 height=220 alt="i'm not beautiful right now" border=0> 放大了的图片 |
| 显示结果 |
放大了的图片 |
|
|
html语言剖析▲top
链接标记
<a>
<base> |
|
|
| <a> 称连结标记，由 <a> 与 </a> 所围的文字、图片等等可以成为一个连结。
<a> 的一般参数设定：
例如 <a href="index.html" name="hello" target="_top">
- href="index.html"
这参数不能与另一参数 name 同时使用，使用这参数才能造成可按的连结。
- 当作为一外部连结时： href 所设定的是该连结所要连到的文件名称，若 该文件与此 html 档不是同在一目录请加上适当的路径，相对绝对皆可。
- 当作为一内部连结时： href 所设定的是该连结所要连到的同文件内参考 点或指定文件之参考点，且不 要包围任何字画只 加上结束标示 </a>便 可以，例如 <a href="#there"></a> 、 <a href="index.html#there"></a> 及 <a href="http://www.school.net.hk/~chris55/index.html#there"></a> 其中 there 便 是参考点，并 於其前加上符号 # 以作识别，参考点由下一个参数 name 事先於文件中埋下。
- name="hello"
这参数是为文件埋下参考点，作为被连结，不会被显示。所以说造成一个内部连 结 要使用两次 <a> 连结标记。一个使用参数 name 事先於文件中埋下一参考 点，另一个使用参数 href 连到这个参考点。
- target="_top"
设定连结被按後之结果所要显示的视窗。可选值为： _blank, _parent, _self, _top, 框 窗名称。
- target="框窗名称"
这只运用於框架中，若被设定则连结结果将显示於该“框窗名称”之框窗 中，框窗名称是事先由框架标记所命名。
- target="_blank" 或 target="new"
将连结的画面内容，开在新的浏览视窗中。
- target="_parent"
将连结的画面内容，当成文件的上一个画面。
- target="_self"
将连结的画面内容，显示在目前的视窗中。(内定值)
- target="_top"
将框架中连结的画面内容，显示在没有框架的视窗中。（即除去了框架)
例子一：（外部连结）
|
原始码
|
<a href="http://www.sdjtu.edu.cn/xdjyzx/">现代教育中心</a>
<p><a href="http://www.sdjtu.edu.cn">
<img src="sdjtu.gif" width=212 height=60 border=1 alt="现代教育中心"></a>
<p><a href="http://www.sdjtu.edu.cn">
<img src="sdjtu.gif" width=212 height=60 border=0 alt="现代教育中心"></a> |
| 显示结果 |
|
例子二（内部连结）：请到 penpal garden 的 faq page 刻体验一下何为内部连结。
| 原始码 |
<a name="test"></a>
<a href="#test">本页的内部连结</a>
<br><a href="http://www.school.net.hk/~chi/faq.html#14">跳到 penpal garden 的 faq 部分</a> |
| 显示结果 |
|
|
|
|
| <base> 是一个连结基准标记，用以改变文件中所有连结标记的参数内定值。它只能应用 於文件的开头部分，即标记 <head> 与 </head> 之间。
<base> 的一般参数设定：
例如 <base href="http://www.microsoft.com/" target="_top">
- href="http://www.microsoft.com/"
设定该页网页中所有 http 文件及图形（包括相对路径连结及 <img> 图形标记 等）的内定路径，其他如 ftp:// 及 gopher:// 等则不受影响。这参数只可填入一个相 对或绝对的路径，不必填入档案名称。一般相对路径连结及 <img> 图形标记等是 内定以该页网页所在的目录作为起点，若依这例子，该文件中所有连结将会以 http://www.microsoft.com/ 作为起点，若其中有连结如 <a href="index.html">back to main page</a> ，那末它不会连到自已目录下的 index.html，它将会连到 microsoft 的 首页，这是因为相对路径己给 <base> 转成绝对的了。
- target="_top"
设定该页网页中所有连结被按後之结果所要显示的视窗，免得分别为所有连结加 上 target 参数，常应用於框架中。其设定与 <a> 连结标记中 target 参数相同。
例子容後再写，你可亲自尝试或到一些以框架制作的网页去体验一下。
|
|
html语言剖析▲top
排版标记
<frameset> <frame>
<noframes>
<iframe> |
|
■ 框架概念 ：
|
| 所谓框架便是网页画面分成几个框窗，同时取得多个 url。只 要 <frameset> <frame> 即可，而所有框架标记 要放在一个总起的 html 档，这个档案只记录了该框架 如何划分，不会显示任何资料，所以不必放入 <body> 标记，浏览这框架必须读取这档 案而不是其它框窗的档案。<frameset> 是用以划分框窗，每一框窗由一个 <frame> 标 记所标示，<frame>必须在 <frameset> 范围中使用。如下例：
<frameset cols="50%,*">
<frame name="hello" src="up2u.html">
<frame name="hi" src="me2.html">
</frameset>
此例中 <frameset> 把画面分成左右两相等部分，左便是显示 up2u.html，右边则会显示 me2.html 这档案，<frame> 标记所标示的框窗永远是按由上而下、由左至右的次序。
本节与 composer 教室的【运用框架】大部分相同，只是本节增加了内容及较为详细，正 如其它篇章一样并不会提及网页制作工具，若馈下学会了 html 相信你亦不会选用 composer ， frontpage 一类的工具了。
|
|
|
<frameset> 称框架标记，用以宣告html文件为框架模式，并设定视窗如何分割。
<frame> 则只是设定某一个框窗内的参数属性。
<frameset> 参数设定：
例子：<frameset rows="90,*" frameborder="0" border=0 framespacing="2" bordercolor="#008000">
- cols="90,*"
垂直切割画面(如分左右两个画面)，接受整数值、百分数， * 则代表占用馀下空 间。数值的个数代表分成的视窗数目且以逗号分隔。例如 cols="30,*,50%" 可以 切成三个视窗，第一个视窗是 30 pixels 的宽度，为一绝对分割，第二个视窗是当 分配完第一及第三个视窗後剩下的空间，第三个视窗则占整个画面的 50% 宽度 为 一相对分割。您可自己调整数字。
- rows="120,*"
就是横向切割，将画面上下分开，数值设定同上。唯 cols 与 rows 两参数尽量 不要同在一个 <frameset> 标记中，因 netacape 偶然不能显示这类形的框架，尽 采用多重分割。
- frameborder="0"
设定框架的边框，其值只有 0 和 1 ， 0 表示不要边框， 1 表示要显示边框。（避 免使用 yes 或 no ）
- border="0"
设定框架的边框厚度，以 pixels 为单位。
- bordercolor="#008000"
设定框架的边框颜色。
- framespacing="5"
表示框架与框架间的保留空白的距离。
<frame> 参数设定：
例子：<frame name="top" src="a.html" marginwidth="5" marginheight="5" scrolling="auto" frameborder="0" noresize framespacing="6" bordercolor="#0000ff">
- src="a.html"
设定此框窗中要显示的网页档案名称，每个框窗一定要对应著一个网页档案。你可 使用绝对路径或相对路径，有关此两者详见於【连结进阶】。
- name="top"
设定这个框窗的名称，这样才能指定框架来作连结，必须但任意命名。
- frameborder=0
设定框架的边框，其值只有 0 和 1 ， 0 表示不要边框， 1 表示要显示边框。（避 免使用 yes 或 no ）
- framespacing="6"
表示框架与框架间的保留空白的距离。
- bordercolor="#008000"
设定框架的边框颜色。颜色值请参考【html 剖析】。
- scrolling="auto"
设定是否要显示卷轴，yes 表示要显示卷轴，no 表示无论如何都不要显示， auto是视情况显示。
- noresize
设定不让使用者可以改变这个框框的大小，亦没有设定此参数，使用者可以很随 意地拉动框架，改变其大小。
- marginhight=5
表示框架高度部份边缘所保留的空间。
- marginwidth=5
表示框架宽度部份边缘所保留的空间。
以下是一些例子：（与 composer 教室的【运用框架】相同）
| 例子 |
html code |
|
|
<frameset rows="80,*">
<frame name="top" src="a.html">
<frame name="bottom" src="b.html">
</frameset> |
| 例子 |
html code |
|
|
<frameset rows="80,*,80">
<frame name="top" src="a.html">
<frame name="middle" src="b.html">
<frame name="bottom" src="c.html">
</frameset> |
| 例子 |
html code |
|
|
<frameset cols="150,*">
<frameset rows="80,*">
<frame name="upper_left" src="a.html">
<frame name="lower_left" src="b.html">
</frameset>
<frame name="right" src="c.html">
</frameset> |
| 例子 |
html code |
|
|
<frameset rows="80,*">
<frame name="top" src="a.html">
<frameset cols="150,*">
<frame name="lower_left" src="b.html">
<frame name="lower_right" src="c.html">
</frameset>
</frameset> |
| 例子 |
html code |
|
|
<frameset cols="150,*">
<frame name="left" src="a.html">
<frameset rows="80,*">
<frame name="upper_right" src="b.html">
<frame name="lower_right" src="c.html">
</frameset>
</frameset> |
|
|
|
| 当别人使用的浏览器太旧，不支援框架这个功能时，他看到的将会是一片空白。为了避免 这种情况，可使用 <noframes> 这个标记，当使用者的浏览器看不到框架时，他就会看 到 <noframes> 与 </noframes> 之间的内容，而不是一片空白。这些内容可以是提醒 浏览转用新的浏览器的字句，甚至是一个没有框架的网页或能自动切换至没有框架的版本 亦可。
应用方法：
在<frameset> 标记范围加入 </noframes> 标记，以下是一个例子：
- <frameset rows="80,*">
- <noframes>
<body>
很抱歉，馈下使用的浏览器不支援框架功能，请转用新的浏览器。
</body>
</noframes>
- <frame name="top" src="a.html">
- <frame name="bottom" src="b.html">
- </frameset>
若浏览器支援框架，那堋它不会理会 <noframes> 中的东西，但若浏览器不支援框架，由 於不认识所有框架标记，不明的标记会被略过，标记包围的东西便被解读出来，所以放在 <noframes>范围内的文字会被显示。
|
|
|
| 这标记只适用於 ie。 它的作用是在一页网页中间插入一个框窗以显示另一个文件。它是 一个围堵标记，但围著的字句只有在浏览器不支援 iframe 标记时才会显示，如<noframes> 一样，可以放些提醒字句之类。通常 iframe 配合一个辨认浏览器的 java script 会较好，若 javascript 认出该浏览器并非 internet explorer 便会切换至另一版本。
<iframe> 的参数设定如下：
例子： <iframe src="iframe.html" name="test" align="middle" width="300" height="100" marginwidth="1" marginheight="1" frameborder="1" scrolling="yes">
- src="iframe.html"
欲显示於此框窗的文件来源除档案名称，必要加上相对或绝对路径。
- name="test"
此框窗名称，这是连结标记的 target 参数所 要的，
- align="middle"
可选值为 left, right, top, middle, bottom，作用不大
- width="300" height="100"
框窗的宽及长，以 pixels 为单位。
- marginwidth="1" marginheight="1"
该插入的文件与框边所保留的空间。
- frameborder="1"
使用 1 表示显示边框， 0 则不显示。（可以是 yes 或 no）
- scrolling="yes"
使用 yes 表示容许卷动（内定）， no 则不容许卷动。
例子：
| 原始码 |
<center> <iframe src="http://www.sdjtu.edu.cn/" name="test" align="center" width="450" height="200" marginwidth="5" marginheight="5" frameborder="1">
很抱歉，馈下使用的浏览器并不支援 iframe，不能正常浏览我的网页。</iframe>
</center> |
| 显示结果 |
|
|
|
html语言剖析▲top
多媒体标记
<bgsound>
<embed> |
|
|
| <bgsound> 是用以插入背景音乐，但只适用於 ie，其参数设定不多。如下
<bgsound src="your.mid" autostart=true loop=infinite>
- src="your.mid"
设定 midi 档案及路径，可以是相对或绝对。
- autostart=true
是否在音乐档传完之後，就自动播放音乐。true 是，false 否 (内定值)。
- loop=infinite
是否自动反覆播放。loop=2 表示重复两次，infinite 表示重复多次。
|
|
|
| <embed> 是用以插入各种多媒体，格式可以是 midi、wav、aiff、au 等等，netscape 及 新版的 ie 都支援。其参数设定狻多。如下
<embed src="your.mid" autostart="true" loop="true" hidden="true">
- src="your.mid"
设定 midi 档案及路径，可以是相对或绝对。
- autostart=true
是否在音乐档传完之後，就自动播放音乐。true 是，false 否 (内定值)。
- loop="true"
是否自动反覆播放。loop=2 表示重复两次，true 是， false 否。
- hidden="true"
是否完全隐藏控制画面，true 为是，no 为否 (内定)。
- starttime="分:秒"
设定歌曲开始播放的时间。如 starttime="00:30" 表示从第30秒处开始播放。
- volume="0-100"
设定量的大小，数值是0到100之间。内定则为使用者系统本身之设定。
- width="整数" 和 high="整数"
设定控制画面的宽度和高度。(若 hidden="no")
- align="center"
设定控制画面和旁边文字的对 方式，其值可以是 top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottom。
- controls="smallconsole"
设定控制画面的外貌。预设值是 console。
console 一般正常的面板
smallconsole 较小的面板
playbutton 只显示播放按钮
pausecutton 只显示暂停按钮
stopbutton 只显示停止按钮
volumelever 只显示音量调整钮
|
|
html语言剖析▲top
其他标记
<marquee>
<blink>
<isindex>
<meta>
<link> |
|
|
| <marquee> 只适用於 ie ，译为「跑马灯」如 status bar 的那种，意指走动或卷动的 文字，其参数设定狻多。我先举些例子，然後再列出各参数。
例子一：
| 原始码 |
<marquee width=150>i'm a small marquee</marquee> |
| 显示结果 |
|
例子二：
| 原始码 |
<marquee behavior=slide>this is a slide effect</marquee> |
| 显示结果 |
|
例子三：
| 原始码 |
<marquee behavior=alternate>撞来撞去，啊！我昏啦</marquee> |
| 显示结果 |
|
例子四：
| 原始码 |
<marquee scrolldelay=5 scrollamount=50>哗！！太快了，我又昏啦</marquee> |
| 显示结果 |
|
<marquee behavior="scroll" direction="left" bgcolor="#0000ff" height="30" width="150" hspace="0" vspace="0" loop="infinite" scrollamount="30" scrolldelay="500">hello</marquee>
- behavior="scroll"
决定文字的卷动方式，可选值为：
scroll 一般卷动，是内定值。
slide 如幻灯片，一格格的，效果是文字一接触左边便全部消失。
alternate 文字向左右两边撞来撞去。
- direction="left"
设定文字的卷动方向，left 表示向左，是内定值，right 表示向右。
- bgcolor="#0000ff"
设定文字卷动范围的背景颜色。
- height="30" width="150"
>设定文字卷动范围，可采用相对或绝对，如 30% 或 30 等，单位为像素。
- hspace="0" vspace="0"
设定文字的水平及垂直空白位置。
- loop="infinite"
设定文字卷动次数，其值可以是正整数或 infinite，infinite 是内定值，表示无 限次。
- scrollamount="30"
每「格」文字之间的间隔，单位是像素。
- scrolldelay="500"
文字卷动的停顿时间，单位是毫秒。
|
|
|
| <blink> 是令文字闪烁，只适用於 nc，用法直接，没有参数。看看例子便知：
例子：
| 原始码 |
<blink>我是天上星，闪又闪</blink> |
| 显示结果 |
|
|
|
|
| <isindex> 可让某些 web server 找寻网页内的关键字，假如你的 web server 提供这样的 找寻功能，使用者的浏览器也支援这些找寻功能，那堋，载入网页时就会看到一个简单的 找寻方块。其用法直接，没有参数，本来是要放於 <head> 标记内的，但把它放在 <body> 标记内亦不见有问题，请记住，3w 以反对此标记。
例子：
|
|
|
<meta> 是放於 <head> 与 </head>之间的标记，功用与变化等对，所以我公式化地介 绍。
- <meta name="description" content="this is chris's home page">
该网页的描述，作用於寻找引擎的登录
- <meta name="keywords" content="chris, web, music, photo">
该网页的关键字，作用於寻找引擎的登录
- <meta http-equiv="expires" content="tue, 09 dec 1997 00:00:00 gmt">
<meta http-equiv="pragma" content="no-cache">
以上行功能相同，都是要浏览器重新载入该页，不要使用快取档案，当然可以修 改该 expire 时间。
- <meta http-equiv="content-type" content="text/html; charset=big5">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
设定这是 html 文件及其编码语系，中文网页请使用 big5 那行，或者不设编码亦 可，纯英文网页建议使用 iso-8859-1。
- <meta name="generator" content="mozilla/4.04 [en] (win95; i) [netscape]">
<meta name="generator" content="microsoft frontpage 3.0">
这只表示该网页由甚堋编辑器写成。
- <meta http-equiv="refresh" content="10; url=http://www.hkiwc.com">
这一行较为实用，能於预定秒数内自动转到指定的网址。原始码中 10 表示 10秒。
|
|
|
<link> 用来将目前文件与其它 url 作连结，但不会有连结按钮，用於 <head> 标记间， 格式如下：
<link href="url" rel="relationship">
<link href="url" rev="relationship">
其用法我们会於 style sheet 一节详细介绍。
|
|
html语言剖析▲top
特殊字符
只要你认识了 html 标记，你便会知道特殊字符的用处。
| html 原始码 |
显示结果 |
描述 |
| < |
< |
小於号或显示标记 |
| > |
> |
大於号或显示标记 |
| & |
& |
可用於显示其它特殊字符 |
| " |
" |
引号 |
| ® |
® |
己注册 |
| © |
© |
版权 |
| ™ |
™ |
商标 |
|   |
|
半方大的空白 |
|   |
|
全方大的空白 |
| |
|
不断行的空白 |
|
|
■ iso latin-1 特殊字符 ：
|
| html 原始码 |
显示结果 |
描述 |
| æ |
æ |
uppercase ae diphthing |
| á |
á |
uppercase a, acute accent |
| â |
â |
uppercase a, circumflex accent |
| à |
à |
uppercase a, grave accent |
| å |
å |
uppercase a, ring |
| ã |
ã |
uppercase a, tilde |
| ä |
ä |
uppercase a, dieresis or umlaut mark |
| ç |
ç |
uppercase c, cedilla |
| ð |
ð |
uppercase eth, icelandic |
| é |
é |
uppercase e, acute accent |
| ê |
ê |
uppercase e, circumflex accent |
| è |
è |
uppercase e, grave accent |
| ë |
ë |
uppercase e, dieresis or umlaut mark |
| í |
í |
uppercase i, acute accent |
| î |
î |
uppercase i, circumflex accent |
| ì |
ì |
uppercase i, grave accent |
| ï |
ï |
uppercase i, dieresis or umlaut mark |
| ñ |
ñ |
uppercase n, tilde |
| ó |
ó |
uppercase o, acute accent |
| ô |
ô |
uppercase o, circumflex accent |
| ò |
ò |
uppercase o, grave accent |
| ø |
ø |
uppercase o, slash |
| õ |
õ |
uppercase o, tilde |
| ö |
ö |
uppercase o, dieresis or umlaut mark |
| þ |
þ |
uppercase thorn, icelandic |
| ú |
ú |
uppercase u, acute accent |
| û |
û |
uppercase u, circumflex accent |
| ù |
ù |
uppercase u, grave accent |
| ü |
ü |
uppercase u, dieresis or umlaut mark |
| ý |
ý |
uppercase y, acute accent |
| æ |
æ |
lowercase ae diphthing |
| á |
á |
lowercase a, acute accent |
| â |
â |
lowercase a, circumflex accent |
| à |
à |
lowercase a, grave accent |
| å |
å |
lowercase a, ring |
| ã |
ã |
lowercase a, tilde |
| ä |
ä |
lowercase a, dieresis or umlaut mark |
| ç |
ç |
lowercase c, cedilla |
| ð |
ð |
lowercase eth, icelandic |
| é |
é |
lowercase e, acute accent |
| ê |
ê |
lowercase e, circumflex accent |
| è |
è |
lowercase e, grave accent |
| ë |
ë |
lowercase e, dieresis or umlaut mark |
| í |
í |
lowercase i, acute accent |
| î |
î |
lowercase i, circumflex accent |
| ì |
ì |
lowercase i, grave accent |
| ï |
ï |
lowercase i, dieresis or umlaut mark |
| ñ |
ñ |
lowercase n, tilde |
| ó |
ó |
lowercase o, acute accent |
| ô |
ô |
lowercase o, circumflex accent |
| ò |
ò |
lowercase o, grave accent |
| ø |
ø |
lowercase o, slash |
| õ |
õ |
lowercase o, tilde |
| ö |
ö |
lowercase o, dieresis or umlaut mark |
| ß |
ß |
lowercase sharp s, german (sz ligature) |
| þ |
þ |
lowercase thorn, icelandic |
| ú |
ú |
lowercase u, acute accent |
| û |
û |
lowercase u, circumflex accent |
| ù |
ù |
lowercase u, grave accent |
| ü |
ü |
lowercase u, dieresis or umlaut mark |
| ý |
ý |
lowercase y, acute accent |
| ÿ |
ÿ |
lowercase y, dieresis or umlaut mark |
|
|
html语言剖析▲top
调色原理
html 的颜色表示可分两种：
- 以命名方式定义常用的颜色，如 red。
- 以 rgb 值表示，如 #ff0000 表示 red。
命名方式涵括的色种不多亦不甚方便，较少采用，以下介绍 rgb 值的原理：
众所皆知颜色是由 "red" "green" "blue" 三原色组合而成的，在 html 中对於彩度的定义是 采十六进位的，对於三原色 html 分别给予两个十六进位去定义，也就是每个原色可有 256 种彩度，故此三原色可混合成一千六佰多万的颜色。
例如
白色的组成是 red=ff, green=ff, blue=ff, rgb 值即为 ffffff
红色的组成是 red=ff, green=00, blue=00, rgb 值即为 ff0000
绿色的组成是 red=00, green=ff, blue=00, rgb 值即为 00ff00
蓝色的组成是 red=00, green=00, blue=ff, rgb 值即为 0000ff
黑色的组成是 red=00, green=00, blue=00, rgb 值即为 000000
於应用时常在每个 rgb 值之前加上符号 # 以示分别，但不加亦可。
|
|
■ html 基本架构：
|
| 选按不同颜色按键以测试前景颜色效果 (只适合 internet explorer)
选按不同颜色按键以测试背景颜色效果
或输入一个 rgb 颜色码或名称
|
|
|
■ 16 常用颜色表：
|
| color |
value |
name |
|
color |
value |
name |
| |
#00ffff |
aqua |
|
|
#808080 |
gray |
| |
#000080 |
navy |
|
|
#c0c0c0 |
silver |
| |
#000000 |
black |
|
|
#008000 |
green |
| |
#808000 |
olive |
|
|
#008080 |
teal |
| |
#0000ff |
blue |
|
|
#00ff00 |
lime |
| |
#800080 |
purple |
|
|
#ffff00 |
yellow |
| |
#ff00ff |
fuchsia |
|
|
#800000 |
maroon |
| |
#ff0000 |
red |
|
|
#ffffff |
white |
|
|
■ 其它常用颜色表：
|
| color |
value |
name |
|
color |
value |
name |
| |
#f0f8ff |
aliceblue |
|
|
#a00000 |
antiquewith |
| |
#7fffd4 |
aquamarine |
|
|
#f0ffff |
azure |
| |
#f5f5dc |
beige |
|
|
#ffe4c4 |
bisque |
| |
#000000 |
black |
|
|
#ffebcd |
blanchedalmond |
| |
#0000ff |
blue |
|
|
#8a2be2 |
blueviolet |
| |
#a52a2a |
brown |
|
|
#deb887 |
burlywood |
| |
#5f9ea0 |
cadetblue |
|
|
#7fff00 |
chartreuse |
| |
#d2691e |
chocolate |
|
|
#ff7f50 |
coral |
| |
#c0f000 |
cornfloewrblue |
|
|
#fff8dc |
cornsilk |
| |
#00ffff |
cyan |
|
|
#00008b |
darkblue |
| |
#008b8b |
darkcyan |
|
|
#b8860b |
darkgoldenrod |
| |
#a9a9a9 |
darkgray |
|
|
#006400 |
darkgreen |
| |
#da0000 |
darkhaki |
|
|
#8b008b |
darkmagenta |
| |
#556b2f |
darkolivegreen |
|
|
#da000e |
darkorenge |
| |
#9932cc |
darkorchid |
|
|
#8b0000 |
darkred |
| |
#e9967a |
darksalmon |
|
|
#8fbc8f |
darkseagreen |
| |
#483d8b |
darkslateblue |
|
|
#2f4f4f |
darkslategray |
| |
#00ced1 |
darkturquoise |
|
|
#9400d3 |
darkviolet |
| |
#ff1493 |
deeppink |
|
|
#00bfff |
deepskyblue |
| |
#696969 |
dimgray |
|
|
#1e90ff |
dodgerblue |
| |
#b22222 |
firebrick |
|
|
#fffaf0 |
floralwhite |
| |
#228b22 |
forestgreen |
|
|
#dcdcdc |
gainsboro |
| |
#00000e |
gostwhite |
|
|
#ffd700 |
gold |
| |
#00e00d |
golenrod |
|
|
#808080 |
gray |
| |
#008000 |
green |
|
|
#adff2f |
greenyellow |
| |
#f0fff0 |
honeydew |
|
|
#ff69b4 |
hotpink |
| |
#cd5c5c |
indianred |
|
|
#fffff0 |
ivory |
| |
#f0e68c |
khaki |
|
|
#e6e6fa |
lavender |
| |
#fff0f5 |
lavenderblush |
|
|
#7cfc00 |
lawngreen |
| |
#fffacd |
lemonchiffon |
|
|
#add8e6 |
lightblue |
| |
#f08080 |
lightcoral |
|
|
#e0ffff |
lightcyan |
| |
#0000e0 |
lightgodenrod |
|
|
#0000e0 |
lightgodenrodyellow |
| |
#0000a0 |
lightgray |
|
|
#90ee90 |
lightgreen |
| |
#ffb6c1 |
lightpink |
|
|
#ffa07a |
lightsalmon |
| |
#20b2aa |
lightseagreen |
|
|
#87cefa |
lightskyblue |
| |
#0000eb |
lightslateblue |
|
|
#778899 |
lightslategray |
| |
#b0c4de |
lightsteelblue |
|
|
#ffffe0 |
lightyellow |
| |
#32cd32 |
limegreen |
|
|
#faf0e6 |
linen |
| |
#ff00ff |
magenta |
|
|
#800000 |
maroon |
| |
#66cdaa |
mediumaquamarine |
|
|
#0000cd |
mediumblue |
| |
#ba55d3 |
mediumorchid |
|
|
#ed0000 |
mediumpurpul |
| |
#3cb371 |
mediumseagreen |
|
|
#7b68ee |
mediumslateblue |
| |
#00fa9a |
mediumspringgreen |
|
|
#48d1cc |
mediumturquoise |
| |
#c71585 |
mediumvioletred |
|
|
#191970 |
midnightblue |
| |
#f5fffa |
mintcream |
|
|
#ffe4e1 |
mistyrose |
| |
#ffe4b5 |
moccasin |
|
|
#ffdead |
navajowhite |
| |
#000080 |
navy |
|
|
#a0b0e0 |
navyblue |
| |
#fdf5e6 |
oldlace |
|
|
#6b8e23 |
olivedrab |
| |
#ffa500 |
orange |
|
|
#0e0eed |
orengered |
| |
#da70d6 |
orchid |
|
|
#a00d00 |
palegodenrod |
| |
#98fb98 |
palegreen |
|
|
#afeeee |
paleturquoise |
| |
#db7093 |
palevioletred |
|
|
#ffefd5 |
papayawhip |
| |
#ffdab9 |
peachpuff |
|
|
#cd853f |
peru |
| |
#ffc0cb |
pink |
|
|
#dda0dd |
plum |
| |
#b0e0e6 |
powderblue |
|
|
#800080 |
purple |
| |
#ff0000 |
red |
|
|
#bc8f8f |
rosybrown |
| |
#4169e1 |
royalblue |
|
|
#8b4513 |
saddlebrown |
| |
#fa8072 |
salmon |
|
|
#f4a460 |
sandybrown |
| |
#2e8b57 |
seagreen |
|
|
#fff5ee |
seashell |
| |
#a0522d |
sienna |
|
|
#87ceeb |
skyblue |
| |
#6a5acd |
slateblue |
|
|
#708090 |
slategray |
| |
#fffafa |
snow |
|
|
#00ff7f |
springgreen |
| |
#4682b4 |
steelblue |
|
|
#d2b48c |
tan |
| |
#d8bfd8 |
thistle |
|
|
#ff6347 |
tomato |
| |
#40e0d0 |
turquoise |
|
|
#ee82ee |
violet |
| |
#00e0ed |
violetred |
|
|
#f5deb3 |
wheat |
| |
#000e00 |
hite |
|
|
#f5f5f5 |
whitesmoke |
| |
#ffff00 |
yellow |
|
|
#9acd32 |
yellowgreen |
html语言剖析▲top
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
浙公网安备 33010602011771号