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 基本架构:
|
|
■ 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
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|