HTML标签简介---实例解析 [打印版]
2009-04-24 18:54
302 查看
静态结构
<html>
<head>
<title>标题<title>
</head>
<body>..........文件内容..........
</body>
</html>
1. 文件标题
<title>..........</title>
2. 文件更新--<meta>
2.i 10秒后自动更新一次
<meta http-equiv="refresh" content=10>
2.ii 10秒後自动连结到另一文件
<meta http-equiv="refresh" content="10；URL=欲连结文件之URL">
3. 查询用表单--<isindex>
若欲设定查询栏位前的提示文字：
<isindex prompt="提示文字">
4. 预设的基准路径--<base>
<base href="放置文件的主机之URL">
版面文字
1. 标题文字 <h#>..........</h#> #=1~6；h1为最大字，h6为最小字
2. 字体变化 <font>..........</font>
2.i 字体大小 <font size=#>..........</font> #=1~7；数字愈大字也愈大
2.ii 指定字型 <font face="字型名称">..........</font>
2.iii 文字颜色 <font color=#rrggbb>..........</font>
rr：表红色（red）色码 gg：表绿色（green）色码 bb：表蓝色（blue）色码
3. 显示小字体 <small>..........</small>
4. 显示大字体 <big>..........</big>
5. 粗体字 <b>..........</b>
6. 斜体字 <i>..........</i>
7. 打字机字体 <tt>..........</tt>
8. 底线 <u>..........</u>
9. 删除线 <strike>..........</strike>
10. 下标字 <sub>..........</sub>
11. 上标字 <sup>..........</sup>
12. 文字闪烁效果 <blink>..........</blink>
13. 换行 <br>
14. 分段 <p>
15. 文字的对齐方向 <p align="#"> #号可为 left：表向左对齐（预设值） center：表向中对齐 right：表向右对齐
P.S.<p align="#">之後的文字都会以所设的对齐方式显示， 直到出现另一个<p align="#">改变其对齐方向，或遇到 <hr>ⅱ<h#>标签时会自动设回预设的向左对 齐。
16. 分隔线 <hr>
16.i 分隔线的粗细 <hr size=点数>
16.ii 分隔线的宽度 <hr size=点数或百分比>
16.iii 分隔线对齐方向 <hr align="#"> #号可为 left：表向左对齐（预设值） center：表向中对齐 right：表向右对齐
16.iv 分隔线的颜色 <hr color=#rrggbb>
16.v 实心分隔线 <hr noshade>
17. 向中对齐 <center>..........</center>
18. 依原始样式显示 <pre>..........</pre>
19. <body>指令的属性
19.i 背景颜色 -- bgcolor <body bgcolor=#rrggbb>
19.ii 背景图案 -- background <body background="图形文件名">
19.iii 设定背景图案不会卷动 -- bgproperties <body bgproperties=fixed>
19.iv 文件内容文字的颜色 -- text <body text=#rrggbb>
19.v 超连结文字颜色 -- link <body link=#rrggbb>
19.vi 正被选取的超连结文字颜色 -- vlink <body vlink=#rrggbb>
19.vii 已连结过的超连结文字颜色 -- alink <body alink=#rrggbb>
20. 注解 <!--..........-->
21. 特殊字元表示法
原始码 呈现结果
( 代表一个不断行空白)
< <
> >
& &
" "
® ® 注册商标TM N1.0+ 注册商标TM
© © 著作权符号 N1.0+ 著作权符号
图片
1. 插入图片 <img src="图形文件名">
2. 设定图框 -- border <img src="图形文件名" border=点数>
3. 设定图形大小 -- widthⅱheight <img src="图形文件名" width=宽度点数 height=高度点数>
4. 设定图形上下左右留空 -- vspaceⅱhspace <img src="图形文件名" vspace=上下留空点数 hspace=左右留空点数>
5. 图形附注 <img src="图形文件名" alt="说明文字">
6. 预载图片 <img src="高解析度图形文件名" lowsrc="低解析度图形文件名"> P.S.两个图的图形大小最好一致
7. 影像地图（Image Map） <img src="图形文件名" usemap="#图的名称"> <map name="图的名称">
8. <area shape=形状 coords=区域座标列表 href="连结点之URL">
9. <area shape=形状 coords=区域座标列表 href="连结点之URL">
10. <area shape=形状 coords=区域座标列表 href="连结点之URL">
11. <area shape=形状 coords=区域座标列表 href="连结点之URL"> </map>
2.i 定义形状 -- shape
shape=rect：矩形 shape=circle：圆形 shape=poly：多边形
2.ii 定义区域 -- coords
a. 矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标
例：<area shape=rect coords=100,50,200,75 href="URL">
b. 圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度
例：<area shape=circle coords=85,155,30 href="URL">
c. 任意图形（多边形）：将图形之每一转折点座标依序填入
例：<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL">
表格
1. 定义表格 <table>..........</table>
1.i 设定边框的厚度 – border <table border=点数>
1.ii 设定格线的宽度 – cellspacing <table cellspacing=点数>
1.iii 设定资料与格线的距离 – cellpadding <table cellpadding=点数>
1.iv 调整表格宽度 – width <table width=点数或百分比>
1.v 调整表格高度 – height <table height=点数或百分比>
1.vi 设定表格背景色彩 – bgcolor <table bgcolor=#rrggbb>
1.vii 设定表格边框色彩 – bordercolor <table bordercolor=#rrggbb>
2. 显示格线 <table border>
3. 表格标题 <caption>..........</caption>
表格标题位置 – align
<caption align="#"> #号可为 top：表标题置于表格上方（预设值）bottom：表标题置于表格下方
4. 定义列 <tr>
5. 定义栏位 <td>：靠左对齐 <th>：靠中对齐ⅱ粗体
5.i 水平位置 -- align <th align="#"> #号可为 left：向左对齐 center：向中对齐 right：向右对齐
5.ii 垂直位置 -- align <th align="#"> #号可为top：向上对齐 middle：向中对齐bottom：向下对齐
5.iii 栏位宽度 -- width<th width=点数或百分比>
5.iv 栏位垂直合并 -- rowspan<th rowspan=欲合并栏位数>
5.v 栏位横向合并 -- colspan<th colspan=欲合并栏位数>
清单
1. 目录式清单
<dir> <li>项目1 <li>项目2 <li>项目3 </dir>
P.S.目录式清单每一个项目不能超过20个字元（即10个中文字）
2. 选项式清单 <menu> <li>项目1 <li>项目2 <li>项目3 </menu>
3. 有序号的清单 <ol> <li>项目1 <li>项目2 <li>项目3 </ol>
3.i 序号形式 -- type <ol type=#>或<li type=#> #号可为
A：表以大写英文字母AⅱBⅱCⅱD...做为项目编号
a：表以小写英文字母aⅱbⅱcⅱd...做为项目编号
I：表以大写罗马数字做为项目编号
i：表以小写罗马数字做为项目编号
1：表以阿拉伯数字做为项目编号（预设值）
3.ii 起始数字 -- start <ol start=欲开始计数的序数>
3.iii 指定编号 -- value <li value=欲指定的序数>
4. 无序号的清单 <ul> <li>项目1 <li>项目2 <li>项目3 </ul>
4.i 项目符号形式 -- type <ul type=#>或<li type=#> #号可为
disc：实心圆点（预设值） circle：空心圆点 square：实心方块
4.ii 原始清单 -- plain <ul plain>
4.iii 清单排列方式 -- warp
清单垂直排列 <ul warp = vert>
清单水平排列 <ul warp = horiz>
5. 定义式清单
<dl>
<dt>项目1 <dd>项目1说明
<dt>项目2 <dd>项目2说明
<dt>项目3 <dd>项目3说明
</dl>
紧密排列 -- compact <dl compact>
P.S.如此可使<dt>的内容与<dd>的内容在同一行，仅以数格空白相隔而不换行，但若<dt>的文字超过一定的长度后，compact的作用就消失了！
表单
1. 基本架构 <form action="处理资料用的CGI程式之URL"或"mailto:电子信箱的URL" method="get或post"> .......... .......... .......... </form>
2. 输入文件型表单 <form action="URL" method="post"> <input> <input>.......... </form>
2.i 栏位类型 -- type <input type=#> #号可为 text：文字输入 password：密码 checkbox：多选钮 radio：单选钮 submit：接受按钮 reset：重设按钮 image：图形钮 hidden：隐藏栏位
2.ii 栏位名称 -- name <input name="资料栏名"> P.S.若type为submitⅱreset则name不必设定
2.iii 文件上的预设值 -- value <input value="预设之字串">
2.iv 设定栏位的宽度 -- size <input size=字元数>
2.v 限制最大输入字串的长度 -- maxlength <input maxlength=字元数>
2.vi 预设checkbox或radio的初值 -- checked <input type=checkbox checked> <input type=radio checked>
2.vii 指定图形的URL -- src <input type=image src="图档名">
2.viii 图文对齐 -- align <input type=image align="#"> #号可为 top：文字对齐图片之顶端 middle：文字对齐图片之中间 buttom：文字对齐图片之底部
3. 选择式表单
<form action="URL" method="post">
<select>
<option> <option> .......... ..........
</select>
</form>
3.i <select>的属性
a) 栏位名称 -- name <select name="资料栏位名">
b) 设定显示的选项数 -- size <select size=个数>
c) 多重选项 -- multiple <select multiple>
3.ii <option>的属性
a) 定义选项的传回值 -- value <option value="传回值">
b) 预先选取的选项 -- selected <option selected>
4. 多列输入文字区表单 <form action="URL" method="post"> <textarea>.......... </textarea> </form>
4.i 文字区的变数名称 -- name <textarea name=变数名称>
4.ii 设定文字输入区宽度 -- cols <textarea cols=字元数>
4.iii 设定文字输入区高度 -- rows <textarea rows=列数>
4.iv 输入区设定预设字串 <textarea> 预设文字 </textarea>
4.v 自动换行与否 -- wrap <textarea wrap=#> #号可为 off：表输入的文字超过栏宽时，不会自动换行（预设值） virtual：表输入的文字在超过栏宽时会自动换行
链接
1. 连结至其他文件 <a href="URL">说明文字或图片</a>
2. 连结至文件内之某一处（外部连结）
2.i 起点
2.ii <a href="档名#名称">..........</a>
2.iii 终点 <a name="名称">
3. frame的超连结
2.i 开启新的浏览器来显示连结文件 -- _blank <a href="URL" target=_blank>
2.ii 显示连结文件於目前的frame -- _self <a href="URL" target=_self>
2.iii 以上一层的分割视窗显示连结文件 -- _parent <a href="URL" target=_parent>
2.iv 以全视窗显示连结文件 -- _top <a href="URL" target=_top>
2.v 以特定视窗显示连结文件 --<a href="URL" target="特定视窗名称">
FRAME
1. 分割视窗指令 <frameset>..........</frameset>
1.i 垂直（上下）分割 -- rows
<frameset rows=#> #号可为点数：
如欲分割为100,200,300三个视窗，则<frameset rows=100,200,300>；亦可以*号代表，如<frameset rows=*,500,*> 百分比：如<frameset rows=30%,70%>，各项总和最好为100%
1.ii 水平（左右）分割 -- cols <frameset cols=点数或百分比>
2. 指定视窗内容 -- <frame> <frameset cols=30%,70%> <frame> <frame> </frameset>
2.i 指定视窗的文件名称 -- src <frame src=HTML档名>
2.ii 定义视窗的名称 – name <frame name=视窗名称>
2.iii 设定文件与上下边框的距离 – marginheight <frame marginheight=点数>
2.iv 设定文件与左右边框的距离 – marginwidth <frame marginwidth=点数>
2.v 设定分割视窗卷轴 – scrolling <frame scrolling=#> #号可为 yes：固定出现卷轴
no：不出现卷轴 auto：自动判断文件大小需不需要卷轴（预设值）
2.vi 锁住分割视窗的大小 -- noresize <frame noresize>
常用字体颜色：
浅绿----aqua 黑----black 兰----blue 紫红----fuchsia，灰----gray 绿----green 亮绿----lime 茶----maroon，
深兰----navy 橄榄----olive 紫----pourple 红---red，银----silver 青----teal 白----white 黄----yellow 紫红—purple
窗口事件
仅在元素 body 和 frameset( 框架集)中有效.
表单元素事件
只能放在form元素中.
键盘事件
在 base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, 和 title 元素中无效.
鼠标事件
在 base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title 元素中无效.
表单标签：
功能：用于申明表单，定义采集数据的范围，也就是＜form＞和＜/form＞里面包含的数据将被提交到服务器或者电子邮件里
＜form action="url" method="get|post" enctype="mime" target="..."＞. . .＜/form＞
属性：
action=url 指定一来处理提交表单的格式.它可以是一个url地址(提交给程式)或一个电子邮件地址.
method=get或post
指明提交表单的http方法.可能的值为：
post：post方法在表单的主干包含名称/值对并且无需包含于action特性的url中.
get：不赞成。get方法把名称/值对加在action的url后面并且把新的url送至服务器.这是往前兼容的缺省值.这个值由于国际化的原因不赞成使用.
enctype=cdata
指明用来把表单提交给服务器时(当method值为"post")的互联网媒体形式.这个特性的缺省值是"application/x-www-form-urlencoded"
target="..."
指定提交的结果文档显示的位置：
_blank ：在一个新的、无名浏览器窗口调入指定的文档；
_self ：在指向这个目标的无素的相同的框架中调入文档；
_parent ：把文档调入当前框的直接的父frameset框中；这个值在当前框没有父框时等价于_self；
_top ：把文档调入原来的最顶部的浏览器窗口中(因此取消所有其它框架)；这个值等价于当前框没有你框时的_self.
例如：
＜form action="http://www.yesky.com/test.asp" method="post" target="_blank"＞...＜/form＞
表示表单将向http://www.yesky.com/test.asp以post的方式提交，提交的结果在新的页面显示，数据提交的媒体方式是默认的application/x-www-form-urlencoded方式；
1.2 表单域
表单域包含了文本框、多行文本框、密码框、隐藏域、复选框、单选框和下拉选择框等，用于采集用户的输入或选择的数据，下面分别讲述这些表单域的代码格式：
1.2.1 文本框
文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。
代码格式：＜input type="text" name="..." size="..." maxlength="..." value="..."＞
属性解释：
type="text"定义单行文本输入框；
name属性定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
size属性定义文本框的宽度，单位是单个字符宽度；
maxlength属性定义最多输入的字符数。
value属性定义文本框的初始值
样例1：
＜input type="text" name="example1" size="20" maxlength="15"＞
1.2.2 多行文本框
也是一种让访问者自己输入内容的表单对象，只不过能让访问者填写较长的内容。
代码格式：＜textarea name="..." cols="..." rows="..." wrap="virtual"＞＜/textarea＞
属性解释：
name属性定义多行文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
cols属性定义多行文本框的宽度，单位是单个字符宽度；
rows属性定义多行文本框的高度，单位是单个字符宽度；
wrap属性定义输入内容大于文本域时显示的方式，可选值如下：
默认值是文本自动换行；当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现；
off，用来避免文本换行，当输入的内容超过文本域右边界时，文本将向左滚动，必须用return才能将插入点移到下一行；
virtual，允许文本自动换行。当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现；
physical，让文本换行，当数据被提交处理时换行符也将被一起提交处理。
样例2：
＜textarea name="example2" cols="20" rows="2" wrap="physical"＞＜/textarea＞
1.2.3 密码框
是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被星号或其它符号代替，而输入的文字会被隐藏。
代码格式：＜input type="password" name="..." size="..." maxlength="..."＞
属性解释：
type="password"定义密码框；
name属性定义密码框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
size属性定义密码框的宽度，单位是单个字符宽度；
maxlength属性定义最多输入的字符数。
样例3：
＜input type="password" name="example3" size="20" maxlength="15"＞
1.2.4 隐藏域
隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。
代码格式：＜input type="hidden" name="..." value="..."＞
属性解释：
type="hidden"定义隐藏域；
name属性定义隐藏域的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
value属性定义隐藏域的值
例如：＜input type="hidden" name="expws" value="dd"＞
1.2.5 复选框
复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个唯一的名称。
代码格式：＜input type="checkbox" name="..." value="..."＞
属性解释：
type="checkbox"定义复选框；
name属性定义复选框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
value属性定义复选框的值
样例4：
＜input type="checkbox" name="yesky" value="09"＞yesky.com
＜input type="checkbox" name="chinabyte" value="08"＞chinabyte.com
1.2.6 单选框
当需要访问者在待选项中选择唯一的答案时，就需要用到单选框了。
代码格式：＜input type="radio" name="..." value="..."＞
属性解释：
type="radio"定义单选框；
name属性定义单选框的名称，要保证数据的准确采集，单选框都是以组为单位使用的，在同一组中的单选项都必须用同一个名称；
value属性定义单选框的值，在同一组中，它们的域值必须是不同的。
样例5：
＜input type="radio" name="myfavor" value="1"＞yesky.com
＜input type="radio" name="myfavor" value="2"＞chinabyte.com
1.2.7 文件上传框
有时候，需要用户上传自己的文件，文件上传框看上去和其它文本域差不多，只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。
注意：在使用文件域以前，请先确定你的服务器是否允许匿名上传文件。表单标签中必须设置enctype="multipart/form-data"来确保文件被正确编码；另外，表单的传送方式必须设置成post。
代码格式：＜input type="file" name="..." size="15" maxlength="100"＞
属性解释：
type="file"定义文件上传框；
name属性定义文件上传框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
size属性定义文件上传框的宽度，单位是单个字符宽度；
maxlength属性定义最多输入的字符数。
样例6：
＜input type="file" name="myfile" size="15" maxlength="100"＞
1.2.8 下拉选择框
下拉选择框允许你在一个有限的空间设置多种选项。
代码格式：
＜select name="..." size="..." multiple＞
＜option value="..." selected＞...＜/option＞
...
＜/select＞
属性解释：
size属性定义下拉选择框的行数；
name属性定义下拉选择框的名称；
multiple属性表示可以多选，如果不设置本属性，那么只能单选；
value属性定义选择项的值；
selected属性表示默认已经选择本选项。
样例7：
＜select name="mysel" size="1"＞
＜option value="1" selected＞yesky.com＜/option＞
＜option value="d2"＞chinabyte.com＜/option＞
＜/select＞
1.3 表单按钮
表单按钮控制表单的运作。
1.3.1 提交按钮
提交按钮用来将输入的信息提交到服务器。
代码格式：＜input type="submit" name="..." value="..."＞
属性解释：
type="submit"定义提交按钮；
name属性定义提交按钮的名称；
value属性定义按钮的显示文字；
样例9：
样例9代码：
＜input type="submit" name="mysent" value="发送"＞
1.3.2 复位按钮
复位按钮用来重置表单。
代码格式：＜input type="reset" name="..." value="..."＞
属性解释：
type="reset"定义复位按钮；
name属性定义复位按钮的名称；
value属性定义按钮的显示文字；
样例10：
＜input type="reset" name="mycancle" value="取消"＞
1.3.3 一般按钮
一般按钮用来控制其他定义了处理脚本的处理工作。
代码格式：＜input type="button" name="..." value="..." onclick="..."＞
属性解释：
type="button"定义一般按钮；
name属性定义一般按钮的名称；
value属性定义按钮的显示文字；
onclick属性，也可以是其它的事件，通过指定脚本函数来定义按钮的行为；
样例11：
＜input type="button" name="myb" value="保存" onclick="javascript :alert('it is a button')"＞
<html>
<head>
<title>标题<title>
</head>
<body>..........文件内容..........
</body>
</html>
1. 文件标题
<title>..........</title>
2. 文件更新--<meta>
2.i 10秒后自动更新一次
<meta http-equiv="refresh" content=10>
2.ii 10秒後自动连结到另一文件
<meta http-equiv="refresh" content="10；URL=欲连结文件之URL">
3. 查询用表单--<isindex>
若欲设定查询栏位前的提示文字：
<isindex prompt="提示文字">
4. 预设的基准路径--<base>
<base href="放置文件的主机之URL">
版面文字
1. 标题文字 <h#>..........</h#> #=1~6；h1为最大字，h6为最小字
2. 字体变化 <font>..........</font>
2.i 字体大小 <font size=#>..........</font> #=1~7；数字愈大字也愈大
2.ii 指定字型 <font face="字型名称">..........</font>
2.iii 文字颜色 <font color=#rrggbb>..........</font>
rr：表红色（red）色码 gg：表绿色（green）色码 bb：表蓝色（blue）色码
3. 显示小字体 <small>..........</small>
4. 显示大字体 <big>..........</big>
5. 粗体字 <b>..........</b>
6. 斜体字 <i>..........</i>
7. 打字机字体 <tt>..........</tt>
8. 底线 <u>..........</u>
9. 删除线 <strike>..........</strike>
10. 下标字 <sub>..........</sub>
11. 上标字 <sup>..........</sup>
12. 文字闪烁效果 <blink>..........</blink>
13. 换行 <br>
14. 分段 <p>
15. 文字的对齐方向 <p align="#"> #号可为 left：表向左对齐（预设值） center：表向中对齐 right：表向右对齐
P.S.<p align="#">之後的文字都会以所设的对齐方式显示， 直到出现另一个<p align="#">改变其对齐方向，或遇到 <hr>ⅱ<h#>标签时会自动设回预设的向左对 齐。
16. 分隔线 <hr>
16.i 分隔线的粗细 <hr size=点数>
16.ii 分隔线的宽度 <hr size=点数或百分比>
16.iii 分隔线对齐方向 <hr align="#"> #号可为 left：表向左对齐（预设值） center：表向中对齐 right：表向右对齐
16.iv 分隔线的颜色 <hr color=#rrggbb>
16.v 实心分隔线 <hr noshade>
17. 向中对齐 <center>..........</center>
18. 依原始样式显示 <pre>..........</pre>
19. <body>指令的属性
19.i 背景颜色 -- bgcolor <body bgcolor=#rrggbb>
19.ii 背景图案 -- background <body background="图形文件名">
19.iii 设定背景图案不会卷动 -- bgproperties <body bgproperties=fixed>
19.iv 文件内容文字的颜色 -- text <body text=#rrggbb>
19.v 超连结文字颜色 -- link <body link=#rrggbb>
19.vi 正被选取的超连结文字颜色 -- vlink <body vlink=#rrggbb>
19.vii 已连结过的超连结文字颜色 -- alink <body alink=#rrggbb>
20. 注解 <!--..........-->
21. 特殊字元表示法
原始码 呈现结果
( 代表一个不断行空白)
< <
> >
& &
" "
® ® 注册商标TM N1.0+ 注册商标TM
© © 著作权符号 N1.0+ 著作权符号
图片
1. 插入图片 <img src="图形文件名">
2. 设定图框 -- border <img src="图形文件名" border=点数>
3. 设定图形大小 -- widthⅱheight <img src="图形文件名" width=宽度点数 height=高度点数>
4. 设定图形上下左右留空 -- vspaceⅱhspace <img src="图形文件名" vspace=上下留空点数 hspace=左右留空点数>
5. 图形附注 <img src="图形文件名" alt="说明文字">
6. 预载图片 <img src="高解析度图形文件名" lowsrc="低解析度图形文件名"> P.S.两个图的图形大小最好一致
7. 影像地图（Image Map） <img src="图形文件名" usemap="#图的名称"> <map name="图的名称">
8. <area shape=形状 coords=区域座标列表 href="连结点之URL">
9. <area shape=形状 coords=区域座标列表 href="连结点之URL">
10. <area shape=形状 coords=区域座标列表 href="连结点之URL">
11. <area shape=形状 coords=区域座标列表 href="连结点之URL"> </map>
2.i 定义形状 -- shape
shape=rect：矩形 shape=circle：圆形 shape=poly：多边形
2.ii 定义区域 -- coords
a. 矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标
例：<area shape=rect coords=100,50,200,75 href="URL">
b. 圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度
例：<area shape=circle coords=85,155,30 href="URL">
c. 任意图形（多边形）：将图形之每一转折点座标依序填入
例：<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL">
表格
1. 定义表格 <table>..........</table>
1.i 设定边框的厚度 – border <table border=点数>
1.ii 设定格线的宽度 – cellspacing <table cellspacing=点数>
1.iii 设定资料与格线的距离 – cellpadding <table cellpadding=点数>
1.iv 调整表格宽度 – width <table width=点数或百分比>
1.v 调整表格高度 – height <table height=点数或百分比>
1.vi 设定表格背景色彩 – bgcolor <table bgcolor=#rrggbb>
1.vii 设定表格边框色彩 – bordercolor <table bordercolor=#rrggbb>
2. 显示格线 <table border>
3. 表格标题 <caption>..........</caption>
表格标题位置 – align
<caption align="#"> #号可为 top：表标题置于表格上方（预设值）bottom：表标题置于表格下方
4. 定义列 <tr>
5. 定义栏位 <td>：靠左对齐 <th>：靠中对齐ⅱ粗体
5.i 水平位置 -- align <th align="#"> #号可为 left：向左对齐 center：向中对齐 right：向右对齐
5.ii 垂直位置 -- align <th align="#"> #号可为top：向上对齐 middle：向中对齐bottom：向下对齐
5.iii 栏位宽度 -- width<th width=点数或百分比>
5.iv 栏位垂直合并 -- rowspan<th rowspan=欲合并栏位数>
5.v 栏位横向合并 -- colspan<th colspan=欲合并栏位数>
清单
1. 目录式清单
<dir> <li>项目1 <li>项目2 <li>项目3 </dir>
P.S.目录式清单每一个项目不能超过20个字元（即10个中文字）
2. 选项式清单 <menu> <li>项目1 <li>项目2 <li>项目3 </menu>
3. 有序号的清单 <ol> <li>项目1 <li>项目2 <li>项目3 </ol>
3.i 序号形式 -- type <ol type=#>或<li type=#> #号可为
A：表以大写英文字母AⅱBⅱCⅱD...做为项目编号
a：表以小写英文字母aⅱbⅱcⅱd...做为项目编号
I：表以大写罗马数字做为项目编号
i：表以小写罗马数字做为项目编号
1：表以阿拉伯数字做为项目编号（预设值）
3.ii 起始数字 -- start <ol start=欲开始计数的序数>
3.iii 指定编号 -- value <li value=欲指定的序数>
4. 无序号的清单 <ul> <li>项目1 <li>项目2 <li>项目3 </ul>
4.i 项目符号形式 -- type <ul type=#>或<li type=#> #号可为
disc：实心圆点（预设值） circle：空心圆点 square：实心方块
4.ii 原始清单 -- plain <ul plain>
4.iii 清单排列方式 -- warp
清单垂直排列 <ul warp = vert>
清单水平排列 <ul warp = horiz>
5. 定义式清单
<dl>
<dt>项目1 <dd>项目1说明
<dt>项目2 <dd>项目2说明
<dt>项目3 <dd>项目3说明
</dl>
紧密排列 -- compact <dl compact>
P.S.如此可使<dt>的内容与<dd>的内容在同一行，仅以数格空白相隔而不换行，但若<dt>的文字超过一定的长度后，compact的作用就消失了！
表单
1. 基本架构 <form action="处理资料用的CGI程式之URL"或"mailto:电子信箱的URL" method="get或post"> .......... .......... .......... </form>
2. 输入文件型表单 <form action="URL" method="post"> <input> <input>.......... </form>
2.i 栏位类型 -- type <input type=#> #号可为 text：文字输入 password：密码 checkbox：多选钮 radio：单选钮 submit：接受按钮 reset：重设按钮 image：图形钮 hidden：隐藏栏位
2.ii 栏位名称 -- name <input name="资料栏名"> P.S.若type为submitⅱreset则name不必设定
2.iii 文件上的预设值 -- value <input value="预设之字串">
2.iv 设定栏位的宽度 -- size <input size=字元数>
2.v 限制最大输入字串的长度 -- maxlength <input maxlength=字元数>
2.vi 预设checkbox或radio的初值 -- checked <input type=checkbox checked> <input type=radio checked>
2.vii 指定图形的URL -- src <input type=image src="图档名">
2.viii 图文对齐 -- align <input type=image align="#"> #号可为 top：文字对齐图片之顶端 middle：文字对齐图片之中间 buttom：文字对齐图片之底部
3. 选择式表单
<form action="URL" method="post">
<select>
<option> <option> .......... ..........
</select>
</form>
3.i <select>的属性
a) 栏位名称 -- name <select name="资料栏位名">
b) 设定显示的选项数 -- size <select size=个数>
c) 多重选项 -- multiple <select multiple>
3.ii <option>的属性
a) 定义选项的传回值 -- value <option value="传回值">
b) 预先选取的选项 -- selected <option selected>
4. 多列输入文字区表单 <form action="URL" method="post"> <textarea>.......... </textarea> </form>
4.i 文字区的变数名称 -- name <textarea name=变数名称>
4.ii 设定文字输入区宽度 -- cols <textarea cols=字元数>
4.iii 设定文字输入区高度 -- rows <textarea rows=列数>
4.iv 输入区设定预设字串 <textarea> 预设文字 </textarea>
4.v 自动换行与否 -- wrap <textarea wrap=#> #号可为 off：表输入的文字超过栏宽时，不会自动换行（预设值） virtual：表输入的文字在超过栏宽时会自动换行
链接
1. 连结至其他文件 <a href="URL">说明文字或图片</a>
2. 连结至文件内之某一处（外部连结）
2.i 起点
2.ii <a href="档名#名称">..........</a>
2.iii 终点 <a name="名称">
3. frame的超连结
2.i 开启新的浏览器来显示连结文件 -- _blank <a href="URL" target=_blank>
2.ii 显示连结文件於目前的frame -- _self <a href="URL" target=_self>
2.iii 以上一层的分割视窗显示连结文件 -- _parent <a href="URL" target=_parent>
2.iv 以全视窗显示连结文件 -- _top <a href="URL" target=_top>
2.v 以特定视窗显示连结文件 --<a href="URL" target="特定视窗名称">
FRAME
1. 分割视窗指令 <frameset>..........</frameset>
1.i 垂直（上下）分割 -- rows
<frameset rows=#> #号可为点数：
如欲分割为100,200,300三个视窗，则<frameset rows=100,200,300>；亦可以*号代表，如<frameset rows=*,500,*> 百分比：如<frameset rows=30%,70%>，各项总和最好为100%
1.ii 水平（左右）分割 -- cols <frameset cols=点数或百分比>
2. 指定视窗内容 -- <frame> <frameset cols=30%,70%> <frame> <frame> </frameset>
2.i 指定视窗的文件名称 -- src <frame src=HTML档名>
2.ii 定义视窗的名称 – name <frame name=视窗名称>
2.iii 设定文件与上下边框的距离 – marginheight <frame marginheight=点数>
2.iv 设定文件与左右边框的距离 – marginwidth <frame marginwidth=点数>
2.v 设定分割视窗卷轴 – scrolling <frame scrolling=#> #号可为 yes：固定出现卷轴
no：不出现卷轴 auto：自动判断文件大小需不需要卷轴（预设值）
2.vi 锁住分割视窗的大小 -- noresize <frame noresize>
常用字体颜色：
浅绿----aqua 黑----black 兰----blue 紫红----fuchsia，灰----gray 绿----green 亮绿----lime 茶----maroon，
深兰----navy 橄榄----olive 紫----pourple 红---red，银----silver 青----teal 白----white 黄----yellow 紫红—purple
窗口事件
仅在元素 body 和 frameset( 框架集)中有效.
| 属性 | 值 | 描述 |
| onload | script | 当一个文档加载时, 激发该事件, 运行事件脚本 |
| onunload | script | 当窗口关闭时, 激发该事件, 运行事件脚本 |
只能放在form元素中.
| 属性 | 值 | 描述 |
| onchange | script | 当一个元素发生变化时, 运行脚本 |
| onsubmit | script | 当表单被提交时, 运行脚本 |
| onreset | script | 当表单被复归(重置)时, 运行脚本 |
| onselect | script | 当一个元素被选择时, 运行脚本 |
| onblur | script | 当一个元素失去焦点时, 运行脚本 |
| onfocus | script | 当一个元素获得焦点时, 运行脚本 |
在 base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, 和 title 元素中无效.
| 属性 | 值 | 描述 |
| onkeydown | script | 当键盘上的键被按下时, 需要做的事 |
| onkeypress | script | 当键盘上的键被按下或松开时, 需要做的事 |
| onkeyup | script | 当键盘上的键被释放(松开)时, 需要做的事 |
在 base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title 元素中无效.
| 属性 | 值 | 描述 |
| onclick | script | 鼠标单击时, 需要做的事 |
| ondblclick | script | 鼠标双击时, 需要做的事 |
| onmousedown | script | 鼠标键被按下时, 需要做的事 |
| onmousemove | script | 鼠标指针移动时, 需要做的事 |
| onmouseout | script | 鼠标指针移出一个元素时, 需要做的事 |
| onmouseover | script | 鼠标指针移动到一个元素的上面时, 需要做的事 |
| onmouseup | script | 鼠标键被松开时, 需要做的事 |
功能：用于申明表单，定义采集数据的范围，也就是＜form＞和＜/form＞里面包含的数据将被提交到服务器或者电子邮件里
＜form action="url" method="get|post" enctype="mime" target="..."＞. . .＜/form＞
属性：
action=url 指定一来处理提交表单的格式.它可以是一个url地址(提交给程式)或一个电子邮件地址.
method=get或post
指明提交表单的http方法.可能的值为：
post：post方法在表单的主干包含名称/值对并且无需包含于action特性的url中.
get：不赞成。get方法把名称/值对加在action的url后面并且把新的url送至服务器.这是往前兼容的缺省值.这个值由于国际化的原因不赞成使用.
enctype=cdata
指明用来把表单提交给服务器时(当method值为"post")的互联网媒体形式.这个特性的缺省值是"application/x-www-form-urlencoded"
target="..."
指定提交的结果文档显示的位置：
_blank ：在一个新的、无名浏览器窗口调入指定的文档；
_self ：在指向这个目标的无素的相同的框架中调入文档；
_parent ：把文档调入当前框的直接的父frameset框中；这个值在当前框没有父框时等价于_self；
_top ：把文档调入原来的最顶部的浏览器窗口中(因此取消所有其它框架)；这个值等价于当前框没有你框时的_self.
例如：
＜form action="http://www.yesky.com/test.asp" method="post" target="_blank"＞...＜/form＞
表示表单将向http://www.yesky.com/test.asp以post的方式提交，提交的结果在新的页面显示，数据提交的媒体方式是默认的application/x-www-form-urlencoded方式；
1.2 表单域
表单域包含了文本框、多行文本框、密码框、隐藏域、复选框、单选框和下拉选择框等，用于采集用户的输入或选择的数据，下面分别讲述这些表单域的代码格式：
1.2.1 文本框
文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。
代码格式：＜input type="text" name="..." size="..." maxlength="..." value="..."＞
属性解释：
type="text"定义单行文本输入框；
name属性定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
size属性定义文本框的宽度，单位是单个字符宽度；
maxlength属性定义最多输入的字符数。
value属性定义文本框的初始值
样例1：
＜input type="text" name="example1" size="20" maxlength="15"＞
1.2.2 多行文本框
也是一种让访问者自己输入内容的表单对象，只不过能让访问者填写较长的内容。
代码格式：＜textarea name="..." cols="..." rows="..." wrap="virtual"＞＜/textarea＞
属性解释：
name属性定义多行文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
cols属性定义多行文本框的宽度，单位是单个字符宽度；
rows属性定义多行文本框的高度，单位是单个字符宽度；
wrap属性定义输入内容大于文本域时显示的方式，可选值如下：
默认值是文本自动换行；当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现；
off，用来避免文本换行，当输入的内容超过文本域右边界时，文本将向左滚动，必须用return才能将插入点移到下一行；
virtual，允许文本自动换行。当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现；
physical，让文本换行，当数据被提交处理时换行符也将被一起提交处理。
样例2：
＜textarea name="example2" cols="20" rows="2" wrap="physical"＞＜/textarea＞
1.2.3 密码框
是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被星号或其它符号代替，而输入的文字会被隐藏。
代码格式：＜input type="password" name="..." size="..." maxlength="..."＞
属性解释：
type="password"定义密码框；
name属性定义密码框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
size属性定义密码框的宽度，单位是单个字符宽度；
maxlength属性定义最多输入的字符数。
样例3：
＜input type="password" name="example3" size="20" maxlength="15"＞
1.2.4 隐藏域
隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。
代码格式：＜input type="hidden" name="..." value="..."＞
属性解释：
type="hidden"定义隐藏域；
name属性定义隐藏域的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
value属性定义隐藏域的值
例如：＜input type="hidden" name="expws" value="dd"＞
1.2.5 复选框
复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个唯一的名称。
代码格式：＜input type="checkbox" name="..." value="..."＞
属性解释：
type="checkbox"定义复选框；
name属性定义复选框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
value属性定义复选框的值
样例4：
＜input type="checkbox" name="yesky" value="09"＞yesky.com
＜input type="checkbox" name="chinabyte" value="08"＞chinabyte.com
1.2.6 单选框
当需要访问者在待选项中选择唯一的答案时，就需要用到单选框了。
代码格式：＜input type="radio" name="..." value="..."＞
属性解释：
type="radio"定义单选框；
name属性定义单选框的名称，要保证数据的准确采集，单选框都是以组为单位使用的，在同一组中的单选项都必须用同一个名称；
value属性定义单选框的值，在同一组中，它们的域值必须是不同的。
样例5：
＜input type="radio" name="myfavor" value="1"＞yesky.com
＜input type="radio" name="myfavor" value="2"＞chinabyte.com
1.2.7 文件上传框
有时候，需要用户上传自己的文件，文件上传框看上去和其它文本域差不多，只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。
注意：在使用文件域以前，请先确定你的服务器是否允许匿名上传文件。表单标签中必须设置enctype="multipart/form-data"来确保文件被正确编码；另外，表单的传送方式必须设置成post。
代码格式：＜input type="file" name="..." size="15" maxlength="100"＞
属性解释：
type="file"定义文件上传框；
name属性定义文件上传框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
size属性定义文件上传框的宽度，单位是单个字符宽度；
maxlength属性定义最多输入的字符数。
样例6：
＜input type="file" name="myfile" size="15" maxlength="100"＞
1.2.8 下拉选择框
下拉选择框允许你在一个有限的空间设置多种选项。
代码格式：
＜select name="..." size="..." multiple＞
＜option value="..." selected＞...＜/option＞
...
＜/select＞
属性解释：
size属性定义下拉选择框的行数；
name属性定义下拉选择框的名称；
multiple属性表示可以多选，如果不设置本属性，那么只能单选；
value属性定义选择项的值；
selected属性表示默认已经选择本选项。
样例7：
＜select name="mysel" size="1"＞
＜option value="1" selected＞yesky.com＜/option＞
＜option value="d2"＞chinabyte.com＜/option＞
＜/select＞
1.3 表单按钮
表单按钮控制表单的运作。
1.3.1 提交按钮
提交按钮用来将输入的信息提交到服务器。
代码格式：＜input type="submit" name="..." value="..."＞
属性解释：
type="submit"定义提交按钮；
name属性定义提交按钮的名称；
value属性定义按钮的显示文字；
样例9：
样例9代码：
＜input type="submit" name="mysent" value="发送"＞
1.3.2 复位按钮
复位按钮用来重置表单。
代码格式：＜input type="reset" name="..." value="..."＞
属性解释：
type="reset"定义复位按钮；
name属性定义复位按钮的名称；
value属性定义按钮的显示文字；
样例10：
＜input type="reset" name="mycancle" value="取消"＞
1.3.3 一般按钮
一般按钮用来控制其他定义了处理脚本的处理工作。
代码格式：＜input type="button" name="..." value="..." onclick="..."＞
属性解释：
type="button"定义一般按钮；
name属性定义一般按钮的名称；
value属性定义按钮的显示文字；
onclick属性，也可以是其它的事件，通过指定脚本函数来定义按钮的行为；
样例11：
＜input type="button" name="myb" value="保存" onclick="javascript :alert('it is a button')"＞
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTMLParser解析HTMl标签的实例
- XML WebService完全实例详细解析【转：http://www.cnblogs.com/xqzhao/archive/2008/01/18/1044574.html】
- HTML <ul> 标签简介
- 利用a标签自动解析URL分析网址实例
- 使用jQuery操作HTML的table表格的实例解析
- asp.net正则表达式提取网页网址、标题、图片实例以及过滤所有HTML标签实例
- Jsoup解析HTML实例及文档方法详解
- leetcode 591. Tag Validator标签验证器 + 解析HTML + 正则表达式
- 《HTML 5网页开发实例详解》样章、内容简介、前言
- HTML 简单教程－实例004 HTML链接<a>标签
- 解析html标签并转化成图片
- HTTP请求和头信息与HTML页面元信息标签解析（一）
- react中将带标签的字符串转义为html解析
- HTML常用标签（点击隐藏实例）
- html a标签用法解析
- HTML5实战与剖析之媒体元素(1、video标签和audio标签简介)
- 黄聪：HtmlAgilityPack，C#实用的HTML解析类简介
- python解析html提取数据，并生成word文档实例解析
- python 解析html标签中的属性
- struts2返回到JSP页面的html字符串如何在JSP页面上解析成html标签 (ognl表达式)