html整理
时间：2006-10-29 来源：wxz20032003
<meta>：用于设置一些头信息
<meta http-equiv=“content-type” content=“text/html;charset=gb2312”>
<meta http-equiv=“refresh” content=“3;url=http://www.foo.com”>
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta http-equiv="expires" content="0"><meta http-equiv="pragma" content="no-cache">
<meta name="generator | author | copyright" content="…..">
<style>…</style>定义CSS格式
用于定义脚本，Eg. Javascript
<!--===========================body====================================-->
<body
bgcolor="#" --背景色
background="img_url" --背景图片
</body>
<!--===========================锚点标签<a>=============================-->
<a name="AnchorName">
//在该位置定义名字为AnchorName的锚，说白了，就是给这个位置起了个名字，别人可以用这个名字直接链接到该文件的这个位置
//超级链接，跳转到另一文件
<a href=“url” target=“TargetWindow”>文字</a>
当鼠标点击“文字”时，TargetWindow的内容将会跳转到“url”，不指定target时在本窗口跳转。
连接到文件的特定部分
Href=“url#point”
链接到url的point部分
在url文档中用<a name=“point”></a>标识
Target 见“框架“部分
<!--=======================HTML中的路径问题============================-->
本地路径:"c:\dir1\dir2\…"
绝对路径:"http://www.foo.com/img_url.jpg
相对路径:"images/01.jpg"
"../../images/01.jpg"
"/images/01.jpg" = "http://mysite/images/01.jpg
Eg. <a href=“”></a>
Eg. <img src=“”/>
<!--=======================分隔线<hr>==================================-->
语法：
<hr size=“pixels” align=“align” width=“pixels” color=“#” noshade>
Size：高度
Align：对齐方式，可以取left或right
Noshade：无阴影效果
颜色：
Eg. <hr noshade color=“#ff00ff” width=“600” size=“8” align=“left”>
<!--=======================标题字体大小<h#>=============================-->
<h#>…</h#> #=1、2、3、4、5、6
按标题级别用黑体字显示标题内容
自动插入空行,因此在一行中无法使用不同大小的字体
<h1>最大
<h6>最小
<!--=======================字体设置==================================-->
<font size=“” color=“”>…</font>
size 1 2 3 4 5 6 7
实际 8 10 12 14 18 24 36（pixels）
<font size=“+1”>
<font size=“-1”>
Color可以使用预定义的名字
red、blue、black…
<!--=======================设置文字显示==================================-->
<font size=#> ... </font> #=1, 2, 3, 4, 5, 6, 7 or +#, -#
<basefont size=#> #=1, 2, 3, 4, 5, 6, 7
<!--=======================物理字体(Physical Style)======================-->
<b>今天天气真好！</b> 黑体
<i>今天天气真好！</i> 斜体
<u>今天天气真好！</u> 下划线
<tt>今天天气真好！</tt>
<sup>今天天气真好！</sup> 偏上
<sub>今天天气真好！</sub> 偏下
<s>今天天气真好！</s> 中横线
<strike>今天天气真好！</strike> 中横线
<!--===================逻辑字体(Logical Style)===========================-->
<em>今天天气真好！</em>
<strong>今天天气真好！</strong>
<code>今天天气真好！</code>
<samp>今天天气真好！</samp>
<kbd>今天天气真好！</kbd>
<var>今天天气真好！</var>
<dfn>今天天气真好！</dfn>
<cite>今天天气真好！</cite>
<small>今天天气真好！</small>
<big>今天天气真好！</big>
<!--=======================特殊字符==================================-->
< <
> >
& &
空格
" “
<!--=======================文字的布局==================================-->
<p>…</p>分段落现实
<div>…</div> <span>…</span>
分块显示
文字的分区(Division)显示 <div align=left> ... </div> <div align=left>
Can you feel happiness without unpleasant? <br>
Please show me your smile.
</div>
Can you feel happiness without unpleasant?
Please show me your smile. <div align=center> ... </div>
Can you feel happiness without unpleasant?
Please show me your smile. <div align=right> ... </div>
Can you feel happiness without unpleasant?
Please show me your smile.
<!--=======================列表====================================-->
无序列表：<ul>…</ul> <li type=“disc circle square”>…
<ul>
<li type=disc>实心圆
<li type=circle>空心圆
<li type=square>实心方 </ul> . Today
. Tommorow 有序列表：<ol>…</ol> <li>… <ol>
<li>Today
<li>Tommorow
</ol> 1. Today
2. Tommorow
数字列表：
<br> 换行
<nobr>…</nobr> 不换行
<!--====================定制有序列表表中的序号=======================-->
定制有序列表表中的序号 <li type=#> #=A, a, I, i, 1
<ol>
<li type=A>ONE-ONE
<li>ONE-TWO
<li type=a>ONE-ONE
<li>ONE-TWO
<li type=I>ONE-ONE
<li>ONE-TWO
<li type=i>ONE-ONE
<li>ONE-TWO
<li type=1>ONE-ONE
<li>
A. ONE
2. TWO
a. ONE
2. TWO
I. ONE
2. TWO
i. ONE
2. TWO
<!--=======================定义列表==================================-->
定义列表(Definition lists) <dl><dt>...<dd>...</dl> <dl>
<dt>Today
<dd>Today is yesterday.
<dt>Tomorrow
<dd>Tomorrow is today.
</dl>
Today
Today is yesterday.
Tomorrow
Tomorrow is today. <!--=================定制有序列表表中的序号的起始值====================-->
定制有序列表表中的序号的起始值：<ol start=#> #=number <ol start=5>
<li type=A>ONE-ONE
<li>ONE-TWO
<ol start=10>
<li>TWO-ONE
<li type=i>TWO-TWO
</ol>
</ol> E: ONE-ONE
6: ONE-TWO
10: TWO-ONE
xi: TWO-TWO
<!--=======================对齐—align=================================-->
<h1 align=“”>
<div align=“”>
<table align=“”>
<hr align=“”>
取值:left right center top middle bottom
<center>……</center>
对齐到中间
<!--=======================图片========================================-->
<img src=“” align=“” alt=“” border=“”>
Src 图片路径，一般使用相对路径
Alt 图片无法显示时显示的文字
Border 边框的厚度
Align = left right top middle bottom图文混排时用于和图片的对齐
<!--=======================多媒体==================================-->
嵌入多媒体文本(EMBED)
基本语法 <embed src=#> #=URL
本标记可以用来在主页中嵌入多媒体文本，如：
电影(movie), 声音(sound), 虚拟现实语言(vrml)... ...
体会 <embed> 标记，您需要把 plugin 安装完备。
请注意：embed attributes are different between each plugins. 背景音乐
<bgsound src=#> #=WAV 文件的 URL
<bgsound loop=#> #=循环数
<bgsound src="sound.wav" loop=3> 插入视频剪辑
<img src="url.gif" dynsrc="url.avi">
用 url.avi 这一 AVI(Video for MS－WINDOWS) 文件来播放视频；
用 url.gif 这一 GIF 图象作为视频的封面，即：在浏览器
尚未完全读入 AVI 文件时，先在 AVI 播放区域显示该图象。
<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI"> 何时开始播放 AVI <img start=#> #=fileopen, mouseover
缺省值是 #=fileopen，即在链接到含本标记的页面(如本页)时开始播放 AVI。
mouseover 是指您把鼠标移到 AVI 播放区域之上时才开始播放 AVI。
也可以两者同时设置：<img start=fileopen,mouseover>
另外，用鼠标在 AVI 播放区域点击一下，也将令浏览器开始播放该 AVI。
<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI" start=mouseover> 控制条 <img controls>
用来在视频窗口下附加 MS－WINDOWS 的 AVI 播放控制条。
<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI" controls> 循环播放 <img loop=#>
<loop=infinite> 将循环播放不止。
<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI" loop=3> 延时 <img loopdelay=#> #=毫秒数
<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI"
loop=3 loopdelay=250>
<!--=======================表单—重点掌握===============================-->
<form>的属性
Get：发送较少数据（256byte），显示在url中，url/userinfo?name=张三&ps=8
Post：数据长度无限制，不会显示在url中
Action：数据交给服务器端哪个程序进行处理
<!--=====================位于表单中的输入标签==========================-->
位置：位于<form>之中，接收用户输入
格式：<input type=“” name=“”>
type: text radio checkbox password hidden
select submit reset button textarea
name: 提交到服务器端的变量的名字
<!--=======================text========================================-->
<input type=“text” name=“” value=“” maxlength=“” size=“”>
属性:
maxlength: 最大字符长度
size: 文本框宽度（字符）
<!--=======================password==================================-->
密码区域—特殊的单行文本输入框
<input type=“password” name=“” value=“” size=“” maxlength=“”>
<!--=======================radio==================================-->
单选按钮：<input type=“radio” name=“” value="" checked>
典型用法：同一名字，不同的值
错误的用法：不同的名字
<form action="/cgi-bin/post-query" method=POST>
<input type="radio" name="水果">
Banana<p>
<input type="radio" name="水果" checked>
Apple<p>
<input type="radio" name="水果" value="橘子">
Orange<p>
<input type="submit" value="提交">
</form>
<!--=======================checkbox==================================-->
复选框：<input type=“checkbox” name=“” value=“” checked>
典型的用法：同一name，不同的value
<form action="/cgi-bin/post-query" method=POST>
<input type="checkbox" name="水果1">
Banana<p>
<input type="checkbox" name="水果2" checked>
Apple<p>
<input type="checkbox" name="水果3" value="橘子">
Orange<p>
<input type="submit">
</form>
<!--=======================hidden==================================-->
<input type=“hidden” name=“” value=“”>
不显示在网页中通常用作向下一个页面传输已知信息或表单的附加信息
<form action="/cgi-bin/post-query" method=POST>
<input type="hidden" name="add" value="[email protected]">
Here is a hidden element. <p>
<input type="submit">
</form>
<!--=======================select==================================-->
列表框
<select name=“” size=“” multiple>
<option value=“” selected>
<option value=“”>
</select>
Multiple 表示多重列表框，可以多选
Selected 被选中 <!--=======================<select size=**>============================-->
<select size=**>
<form action=/cgi-bin/post-query method=POST>
<select name="fruits" size=3>
<option>Banana
<option selected>Apple
<option value="My_Favorite">Orange
<option>Peach
</select>
<input type="submit">
</form>
<!--=======================<select size=** multiple>=================-->
<select size=** multiple>
注意，是用 Ctrl 键配合鼠标实现多选。
(和 MS-WINDOWS 的 File Manager 一样) <form action=/cgi-bin/post-query method=POST>
<select name="fruits" size="3" multiple>
<option selected>Banana
<option selected>Apple
<option value="My_Favorite">Orange
<option selected>Peach
</select><p>
<input type=submit><input type=reset>
</form>
<!--=======================textarea=================================-->
多行多列文本框:<textarea rows=“” cols=“” wrap=“”></textarea>
属性： Rows: 行数
Cols: 列数
Wrap: 对于很长的行是否进行换行(缺省：不换行)
Off : 不换行
Soft: 自动换行，并且如果行末有英文单词，会将整个单词移到下一行
Hard: 自动换行，但会截断行末的单词 不换行：<textarea wrap="off"> ... </textarea>
换行： <textarea wrap="soft"> ... </textarea>
<!--=======================button==================================-->
<input type="button" name=“” value=“”>
按下该按钮，value的值将被提交，value的值同时被显示在按钮上面 <input type="submit" name=“” value=“”>
按下该按钮，该form中所有的输入信息将被提交到服务器 <input type="reset" name=“” value=“”>
按下该按钮，该form中所有的输入部分将被重置
<!--=======================表格进阶(TABLE ADVANCED)====================-->
<!--=======================表格的色彩==================================-->
表元(单元格th)的背景色彩和背景图象:
<th bgcolor=#>
<th background="URL">
#=rrggbb 16 进制 RGB 数码, 或者是下列预定义色彩名称：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua <table border>
<tr>
<th bgcolor="ffaa00">Food</th>
<th bgcolor="Red">Drink</th>
<th rowspan="2" background="image.gif">Sweet</th>
</tr>
<tr bgcolor=white><td>A</td><td>B</td></tr>
</table>
<!--=======================表格边框的色彩==================================-->
表格边框的色彩 ： <table bordercolor=#>
<table cellspacing=5 border=5 bodercolor="#ffaa00">
<tr>
<th>Food</th>
<th>Drink</th>
<th>Sweet</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table> cellspacing：单元格之间距离
border： 表格边框宽度
bodercolor：表格边框颜色
<!--=====================表格边框色彩的亮度控制==========================-->
表格边框色彩的亮度控制 ：
<table bordercolorlight=#>
<table bordercolordark=#> <table cellspacing=5 border=5
bordercolorlight="White" bordercolordark="Maroon">
<tr>
<th>Food</th>
<th>Drink</th>
<th>Sweet</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
<!--================表格的分组显示(Structured Table)======================-->
按行分组:
<thead> ... </thead> - 表的题头(Header)
<tbody> ... </tbody> - 表的正文(Body)
<tfoot> ... </tfoot> - 表的脚注(Footer) <table border>
<thead>
<tr>
<th>Food</th>
<th>Drink</th>
<th>Sweet</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</tbody>
</table> 按列分组:
<colgroup align=#> #=left, right, center <table border width=160>
<colgroup align=left>
<colgroup align=center>
<colgroup align=right>
<thead>
<tr>
<th>Food</th>
<th>Drink</th>
<th>Sweet</th>
</tr>
</thead>
<tbody>
<tr><td>A</td><td>B</td><td>C</td>
<tr><td>D</td><td>E</td><td>F</td>
</tbody>
</table>
列的属性控制:
<col span=#> #=从左数起，具有指定属性的列的列数
<col align=#> #=left, right, center
<table border width=160>
<colgroup>
<col align=center span=2>
<colgroup align=right>
<thead>
<tr>
<th>Food</th>
<th>Drink</th>
<th>Sweet</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</tbody>
</table>
<!--====================表格中边框的显示==============================-->
显示所有 4 个边框: <table frame=box>
只显示上边框: <table frame=above>
只显示下边框: <table frame=below>
只显示上、下边框: <table frame=hsides>
只显示左、右边框: <table frame=vsides>
只显示左边框: <table frame=lhs>
只显示右边框: <table frame=rhs>
不显示任何边框: <table frame=void>
<table border frame=box>
<thead>
<tr>
<th>Food</th>
<th>Drink</th>
<th>Sweet</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</tbody>
</table>
<!--=====================表格中分隔线(Rules)的显示===========================-->
显示所有分隔线: <table rules=all>
只显示组(Groups)与组之间的分隔线 <table rules=groups>
只显示行与行之间的分隔线 <table rules=rows>
只显示列与列之间的分隔线 <table rules=cols>
不显示任何分隔线 <table rules=none>
<table border rules=all>
<colgroup><col align=center span=2>
<colgroup align=right>
<thead>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
</thead>
<tbody>
<tr><td>A</td><td>B</td><td>C</td>
<tr><td>D</td><td>E</td><td>F</td>
</tbody>
<tbody>
<tr><td rowspan=3 align=right>Total $-00.0</td>
</tbody>
</table>
<!--=======================多窗口页面(Frames)=========================-->
<!--=======================基本语法==================================-->
<frameset> ... </frameset>
<frame src="url">
<noframes> ... </noframes>
在 <noframes> 标记后的文字将只出现在不支持 FRAMES 的浏览器中。 <HTML>
<HEAD>
</HEAD>
<FRAMESET>
<FRAME SRC="url">
<NOFRAMES> ... </NOFRAMES>
</FRAMESET>
</HTML>
<!--=======================各窗口的尺寸设置 ===========================-->
纵向排列多个窗口：<frameset cols=#>
<frameset cols=30%,20%,50%>
<frame src="A.html">
<frame src="B.html">
<frame src="C.html">
</frameset>
示例
A B C 横向排列多个窗口：<frameset rows=#>
<frameset rows=25%,25%,50%>
<frame src="A.html">
<frame src="B.html">
<frame src="C.html">
</frameset>
示例
A
B
C
纵横排列多个窗口：COLS & ROWS
<frameset cols=20%,*>
<frame src="A.html">
<frameset rows=40%,*>
<frame src="B.html">
<frame src="C.html">
</frameset>
</frameset>
示例
B
A
C 不允许各窗口改变大小 <frame noresize>
缺省设置是允许各窗口改变大小的。
<!--======================各窗口间相互操作(Frame Target) ==============-->
窗口标识(Frame Name)
<frame name=#>
<a href=url target=#> <frameset cols=50%,50%>
<frame src="A.html">
<frame src="B.html" name="HELLO">
</frameset>
示例
A B
<!--==================特殊的 4 类操作(很有用喔)=========================-->
特殊的 4 类操作(很有用喔):
<a href=url target=_blank> 新窗口
<a href=url target=_self> 本窗口
<a href=url target=_parent> 父窗口
<a href=url target=_top> 整个浏览器窗口
<!--=================Frame 的外观(Appearance)=========================-->
<!--======================各窗口边框的设置==============================-->
各窗口边框的设置:<frame frameborder=#> #=yes, no / 1, 0
<frameset rows=30%,*>
<frame src="Acol.html" frameborder=1>
<frameset cols=30%,*>
<frame src="Bcol.html" frameborder=0>
<frame src="Ccol.html" frameborder=0>
</frameset>
</frameset>
<!--======================各窗口间空白区域的设置=======================-->
各窗口间空白区域的设置
<frameset framespacing=#> #=空白区域的大小
<frameset rows=30%,* framespacing=100>
<frame src="Acol.html">
<frameset cols=30%,*>
<frame src="Bcol.html">
<frame src="Ccol.html">
</frameset>
</frameset>
<!--======================边框色彩==================================-->
边框色彩 <frameset bordercolor=#>
#=rrggbb 16 进制 RGB 数码, 或者是下列预定义色彩名称：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
<frameset rows=30%,* bordercolor=red>
<frame src="Acol.html">
<frameset cols=30%,*>
<frame src="Bcol.html">
<frame src="Ccol.html">
</frameset>
</frameset>
<!--=======================页面空白(Margin)============================-->
页面空白(Margin) <frame marginwidth=# marginheight=#>
<frameset cols=50%,50%>
<frame src="A.html">
<frame src="A.html"
marginwidth=50
marginheight=50>
</frameset>
<!--=======================卷滚条设置=================================-->
卷滚条设置 <frame scrolling=#> #=yes, no, auto
#=缺省值是 auto。
<!--======================浮动窗口(Floating Frame)=====================-->
<iframe src=# name=##> ... </iframe>
#=初始页面的 URL
##=窗口标识(Frame Name)(之后可对此标识进行各窗口间相互操作)
... = 此处文字将只出现在不支持 FRAMES 的浏览器中。
<center>
<iframe src="A.html" name="window">
Here is a Floating Frame
</iframe>
<br><br>
<a href="A.html" target="window">Load A</A><BR>
<a href="B.html" target="window">Load B</A><BR>
<a href="Ccol.html" target="window">Load C</A><BR>
</center>
<meta http-equiv=“content-type” content=“text/html;charset=gb2312”>
<meta http-equiv=“refresh” content=“3;url=http://www.foo.com”>
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta http-equiv="expires" content="0"><meta http-equiv="pragma" content="no-cache">
<meta name="generator | author | copyright" content="…..">
<style>…</style>定义CSS格式
用于定义脚本，Eg. Javascript
<!--===========================body====================================-->
<body
bgcolor="#" --背景色
background="img_url" --背景图片
</body>
<!--===========================锚点标签<a>=============================-->
<a name="AnchorName">
//在该位置定义名字为AnchorName的锚，说白了，就是给这个位置起了个名字，别人可以用这个名字直接链接到该文件的这个位置
//超级链接，跳转到另一文件
<a href=“url” target=“TargetWindow”>文字</a>
当鼠标点击“文字”时，TargetWindow的内容将会跳转到“url”，不指定target时在本窗口跳转。
连接到文件的特定部分
Href=“url#point”
链接到url的point部分
在url文档中用<a name=“point”></a>标识
Target 见“框架“部分
<!--=======================HTML中的路径问题============================-->
本地路径:"c:\dir1\dir2\…"
绝对路径:"http://www.foo.com/img_url.jpg
相对路径:"images/01.jpg"
"../../images/01.jpg"
"/images/01.jpg" = "http://mysite/images/01.jpg
Eg. <a href=“”></a>
Eg. <img src=“”/>
<!--=======================分隔线<hr>==================================-->
语法：
<hr size=“pixels” align=“align” width=“pixels” color=“#” noshade>
Size：高度
Align：对齐方式，可以取left或right
Noshade：无阴影效果
颜色：
Eg. <hr noshade color=“#ff00ff” width=“600” size=“8” align=“left”>
<!--=======================标题字体大小<h#>=============================-->
<h#>…</h#> #=1、2、3、4、5、6
按标题级别用黑体字显示标题内容
自动插入空行,因此在一行中无法使用不同大小的字体
<h1>最大
<h6>最小
<!--=======================字体设置==================================-->
<font size=“” color=“”>…</font>
size 1 2 3 4 5 6 7
实际 8 10 12 14 18 24 36（pixels）
<font size=“+1”>
<font size=“-1”>
Color可以使用预定义的名字
red、blue、black…
<!--=======================设置文字显示==================================-->
<font size=#> ... </font> #=1, 2, 3, 4, 5, 6, 7 or +#, -#
<basefont size=#> #=1, 2, 3, 4, 5, 6, 7
<!--=======================物理字体(Physical Style)======================-->
<b>今天天气真好！</b> 黑体
<i>今天天气真好！</i> 斜体
<u>今天天气真好！</u> 下划线
<tt>今天天气真好！</tt>
<sup>今天天气真好！</sup> 偏上
<sub>今天天气真好！</sub> 偏下
<s>今天天气真好！</s> 中横线
<strike>今天天气真好！</strike> 中横线
<!--===================逻辑字体(Logical Style)===========================-->
<em>今天天气真好！</em>
<strong>今天天气真好！</strong>
<code>今天天气真好！</code>
<samp>今天天气真好！</samp>
<kbd>今天天气真好！</kbd>
<var>今天天气真好！</var>
<dfn>今天天气真好！</dfn>
<cite>今天天气真好！</cite>
<small>今天天气真好！</small>
<big>今天天气真好！</big>
<!--=======================特殊字符==================================-->
< <
> >
& &
空格
" “
<!--=======================文字的布局==================================-->
<p>…</p>分段落现实
<div>…</div> <span>…</span>
分块显示
文字的分区(Division)显示 <div align=left> ... </div> <div align=left>
Can you feel happiness without unpleasant? <br>
Please show me your smile.
</div>
Can you feel happiness without unpleasant?
Please show me your smile. <div align=center> ... </div>
Can you feel happiness without unpleasant?
Please show me your smile. <div align=right> ... </div>
Can you feel happiness without unpleasant?
Please show me your smile.
<!--=======================列表====================================-->
无序列表：<ul>…</ul> <li type=“disc circle square”>…
<ul>
<li type=disc>实心圆
<li type=circle>空心圆
<li type=square>实心方 </ul> . Today
. Tommorow 有序列表：<ol>…</ol> <li>… <ol>
<li>Today
<li>Tommorow
</ol> 1. Today
2. Tommorow
数字列表：
<br> 换行
<nobr>…</nobr> 不换行
<!--====================定制有序列表表中的序号=======================-->
定制有序列表表中的序号 <li type=#> #=A, a, I, i, 1
<ol>
<li type=A>ONE-ONE
<li>ONE-TWO
<li type=a>ONE-ONE
<li>ONE-TWO
<li type=I>ONE-ONE
<li>ONE-TWO
<li type=i>ONE-ONE
<li>ONE-TWO
<li type=1>ONE-ONE
<li>
A. ONE
2. TWO
a. ONE
2. TWO
I. ONE
2. TWO
i. ONE
2. TWO
<!--=======================定义列表==================================-->
定义列表(Definition lists) <dl><dt>...<dd>...</dl> <dl>
<dt>Today
<dd>Today is yesterday.
<dt>Tomorrow
<dd>Tomorrow is today.
</dl>
Today
Today is yesterday.
Tomorrow
Tomorrow is today. <!--=================定制有序列表表中的序号的起始值====================-->
定制有序列表表中的序号的起始值：<ol start=#> #=number <ol start=5>
<li type=A>ONE-ONE
<li>ONE-TWO
<ol start=10>
<li>TWO-ONE
<li type=i>TWO-TWO
</ol>
</ol> E: ONE-ONE
6: ONE-TWO
10: TWO-ONE
xi: TWO-TWO
<!--=======================对齐—align=================================-->
<h1 align=“”>
<div align=“”>
<table align=“”>
<hr align=“”>
取值:left right center top middle bottom
<center>……</center>
对齐到中间
<!--=======================图片========================================-->
<img src=“” align=“” alt=“” border=“”>
Src 图片路径，一般使用相对路径
Alt 图片无法显示时显示的文字
Border 边框的厚度
Align = left right top middle bottom图文混排时用于和图片的对齐
<!--=======================多媒体==================================-->
嵌入多媒体文本(EMBED)
基本语法 <embed src=#> #=URL
本标记可以用来在主页中嵌入多媒体文本，如：
电影(movie), 声音(sound), 虚拟现实语言(vrml)... ...
体会 <embed> 标记，您需要把 plugin 安装完备。
请注意：embed attributes are different between each plugins. 背景音乐
<bgsound src=#> #=WAV 文件的 URL
<bgsound loop=#> #=循环数
<bgsound src="sound.wav" loop=3> 插入视频剪辑
<img src="url.gif" dynsrc="url.avi">
用 url.avi 这一 AVI(Video for MS－WINDOWS) 文件来播放视频；
用 url.gif 这一 GIF 图象作为视频的封面，即：在浏览器
尚未完全读入 AVI 文件时，先在 AVI 播放区域显示该图象。
<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI"> 何时开始播放 AVI <img start=#> #=fileopen, mouseover
缺省值是 #=fileopen，即在链接到含本标记的页面(如本页)时开始播放 AVI。
mouseover 是指您把鼠标移到 AVI 播放区域之上时才开始播放 AVI。
也可以两者同时设置：<img start=fileopen,mouseover>
另外，用鼠标在 AVI 播放区域点击一下，也将令浏览器开始播放该 AVI。
<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI" start=mouseover> 控制条 <img controls>
用来在视频窗口下附加 MS－WINDOWS 的 AVI 播放控制条。
<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI" controls> 循环播放 <img loop=#>
<loop=infinite> 将循环播放不止。
<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI" loop=3> 延时 <img loopdelay=#> #=毫秒数
<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI"
loop=3 loopdelay=250>
<!--=======================表单—重点掌握===============================-->
<form>的属性
Get：发送较少数据（256byte），显示在url中，url/userinfo?name=张三&ps=8
Post：数据长度无限制，不会显示在url中
Action：数据交给服务器端哪个程序进行处理
<!--=====================位于表单中的输入标签==========================-->
位置：位于<form>之中，接收用户输入
格式：<input type=“” name=“”>
type: text radio checkbox password hidden
select submit reset button textarea
name: 提交到服务器端的变量的名字
<!--=======================text========================================-->
<input type=“text” name=“” value=“” maxlength=“” size=“”>
属性:
maxlength: 最大字符长度
size: 文本框宽度（字符）
<!--=======================password==================================-->
密码区域—特殊的单行文本输入框
<input type=“password” name=“” value=“” size=“” maxlength=“”>
<!--=======================radio==================================-->
单选按钮：<input type=“radio” name=“” value="" checked>
典型用法：同一名字，不同的值
错误的用法：不同的名字
<form action="/cgi-bin/post-query" method=POST>
<input type="radio" name="水果">
Banana<p>
<input type="radio" name="水果" checked>
Apple<p>
<input type="radio" name="水果" value="橘子">
Orange<p>
<input type="submit" value="提交">
</form>
<!--=======================checkbox==================================-->
复选框：<input type=“checkbox” name=“” value=“” checked>
典型的用法：同一name，不同的value
<form action="/cgi-bin/post-query" method=POST>
<input type="checkbox" name="水果1">
Banana<p>
<input type="checkbox" name="水果2" checked>
Apple<p>
<input type="checkbox" name="水果3" value="橘子">
Orange<p>
<input type="submit">
</form>
<!--=======================hidden==================================-->
<input type=“hidden” name=“” value=“”>
不显示在网页中通常用作向下一个页面传输已知信息或表单的附加信息
<form action="/cgi-bin/post-query" method=POST>
<input type="hidden" name="add" value="[email protected]">
Here is a hidden element. <p>
<input type="submit">
</form>
<!--=======================select==================================-->
列表框
<select name=“” size=“” multiple>
<option value=“” selected>
<option value=“”>
</select>
Multiple 表示多重列表框，可以多选
Selected 被选中 <!--=======================<select size=**>============================-->
<select size=**>
<form action=/cgi-bin/post-query method=POST>
<select name="fruits" size=3>
<option>Banana
<option selected>Apple
<option value="My_Favorite">Orange
<option>Peach
</select>
<input type="submit">
</form>
<!--=======================<select size=** multiple>=================-->
<select size=** multiple>
注意，是用 Ctrl 键配合鼠标实现多选。
(和 MS-WINDOWS 的 File Manager 一样) <form action=/cgi-bin/post-query method=POST>
<select name="fruits" size="3" multiple>
<option selected>Banana
<option selected>Apple
<option value="My_Favorite">Orange
<option selected>Peach
</select><p>
<input type=submit><input type=reset>
</form>
<!--=======================textarea=================================-->
多行多列文本框:<textarea rows=“” cols=“” wrap=“”></textarea>
属性： Rows: 行数
Cols: 列数
Wrap: 对于很长的行是否进行换行(缺省：不换行)
Off : 不换行
Soft: 自动换行，并且如果行末有英文单词，会将整个单词移到下一行
Hard: 自动换行，但会截断行末的单词 不换行：<textarea wrap="off"> ... </textarea>
换行： <textarea wrap="soft"> ... </textarea>
<!--=======================button==================================-->
<input type="button" name=“” value=“”>
按下该按钮，value的值将被提交，value的值同时被显示在按钮上面 <input type="submit" name=“” value=“”>
按下该按钮，该form中所有的输入信息将被提交到服务器 <input type="reset" name=“” value=“”>
按下该按钮，该form中所有的输入部分将被重置
<!--=======================表格进阶(TABLE ADVANCED)====================-->
<!--=======================表格的色彩==================================-->
表元(单元格th)的背景色彩和背景图象:
<th bgcolor=#>
<th background="URL">
#=rrggbb 16 进制 RGB 数码, 或者是下列预定义色彩名称：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua <table border>
<tr>
<th bgcolor="ffaa00">Food</th>
<th bgcolor="Red">Drink</th>
<th rowspan="2" background="image.gif">Sweet</th>
</tr>
<tr bgcolor=white><td>A</td><td>B</td></tr>
</table>
<!--=======================表格边框的色彩==================================-->
表格边框的色彩 ： <table bordercolor=#>
<table cellspacing=5 border=5 bodercolor="#ffaa00">
<tr>
<th>Food</th>
<th>Drink</th>
<th>Sweet</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table> cellspacing：单元格之间距离
border： 表格边框宽度
bodercolor：表格边框颜色
<!--=====================表格边框色彩的亮度控制==========================-->
表格边框色彩的亮度控制 ：
<table bordercolorlight=#>
<table bordercolordark=#> <table cellspacing=5 border=5
bordercolorlight="White" bordercolordark="Maroon">
<tr>
<th>Food</th>
<th>Drink</th>
<th>Sweet</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
<!--================表格的分组显示(Structured Table)======================-->
按行分组:
<thead> ... </thead> - 表的题头(Header)
<tbody> ... </tbody> - 表的正文(Body)
<tfoot> ... </tfoot> - 表的脚注(Footer) <table border>
<thead>
<tr>
<th>Food</th>
<th>Drink</th>
<th>Sweet</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</tbody>
</table> 按列分组:
<colgroup align=#> #=left, right, center <table border width=160>
<colgroup align=left>
<colgroup align=center>
<colgroup align=right>
<thead>
<tr>
<th>Food</th>
<th>Drink</th>
<th>Sweet</th>
</tr>
</thead>
<tbody>
<tr><td>A</td><td>B</td><td>C</td>
<tr><td>D</td><td>E</td><td>F</td>
</tbody>
</table>
列的属性控制:
<col span=#> #=从左数起，具有指定属性的列的列数
<col align=#> #=left, right, center
<table border width=160>
<colgroup>
<col align=center span=2>
<colgroup align=right>
<thead>
<tr>
<th>Food</th>
<th>Drink</th>
<th>Sweet</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</tbody>
</table>
<!--====================表格中边框的显示==============================-->
显示所有 4 个边框: <table frame=box>
只显示上边框: <table frame=above>
只显示下边框: <table frame=below>
只显示上、下边框: <table frame=hsides>
只显示左、右边框: <table frame=vsides>
只显示左边框: <table frame=lhs>
只显示右边框: <table frame=rhs>
不显示任何边框: <table frame=void>
<table border frame=box>
<thead>
<tr>
<th>Food</th>
<th>Drink</th>
<th>Sweet</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</tbody>
</table>
<!--=====================表格中分隔线(Rules)的显示===========================-->
显示所有分隔线: <table rules=all>
只显示组(Groups)与组之间的分隔线 <table rules=groups>
只显示行与行之间的分隔线 <table rules=rows>
只显示列与列之间的分隔线 <table rules=cols>
不显示任何分隔线 <table rules=none>
<table border rules=all>
<colgroup><col align=center span=2>
<colgroup align=right>
<thead>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
</thead>
<tbody>
<tr><td>A</td><td>B</td><td>C</td>
<tr><td>D</td><td>E</td><td>F</td>
</tbody>
<tbody>
<tr><td rowspan=3 align=right>Total $-00.0</td>
</tbody>
</table>
<!--=======================多窗口页面(Frames)=========================-->
<!--=======================基本语法==================================-->
<frameset> ... </frameset>
<frame src="url">
<noframes> ... </noframes>
在 <noframes> 标记后的文字将只出现在不支持 FRAMES 的浏览器中。 <HTML>
<HEAD>
</HEAD>
<FRAMESET>
<FRAME SRC="url">
<NOFRAMES> ... </NOFRAMES>
</FRAMESET>
</HTML>
<!--=======================各窗口的尺寸设置 ===========================-->
纵向排列多个窗口：<frameset cols=#>
<frameset cols=30%,20%,50%>
<frame src="A.html">
<frame src="B.html">
<frame src="C.html">
</frameset>
示例
A B C 横向排列多个窗口：<frameset rows=#>
<frameset rows=25%,25%,50%>
<frame src="A.html">
<frame src="B.html">
<frame src="C.html">
</frameset>
示例
A
B
C
纵横排列多个窗口：COLS & ROWS
<frameset cols=20%,*>
<frame src="A.html">
<frameset rows=40%,*>
<frame src="B.html">
<frame src="C.html">
</frameset>
</frameset>
示例
B
A
C 不允许各窗口改变大小 <frame noresize>
缺省设置是允许各窗口改变大小的。
<!--======================各窗口间相互操作(Frame Target) ==============-->
窗口标识(Frame Name)
<frame name=#>
<a href=url target=#> <frameset cols=50%,50%>
<frame src="A.html">
<frame src="B.html" name="HELLO">
</frameset>
示例
A B
<!--==================特殊的 4 类操作(很有用喔)=========================-->
特殊的 4 类操作(很有用喔):
<a href=url target=_blank> 新窗口
<a href=url target=_self> 本窗口
<a href=url target=_parent> 父窗口
<a href=url target=_top> 整个浏览器窗口
<!--=================Frame 的外观(Appearance)=========================-->
<!--======================各窗口边框的设置==============================-->
各窗口边框的设置:<frame frameborder=#> #=yes, no / 1, 0
<frameset rows=30%,*>
<frame src="Acol.html" frameborder=1>
<frameset cols=30%,*>
<frame src="Bcol.html" frameborder=0>
<frame src="Ccol.html" frameborder=0>
</frameset>
</frameset>
<!--======================各窗口间空白区域的设置=======================-->
各窗口间空白区域的设置
<frameset framespacing=#> #=空白区域的大小
<frameset rows=30%,* framespacing=100>
<frame src="Acol.html">
<frameset cols=30%,*>
<frame src="Bcol.html">
<frame src="Ccol.html">
</frameset>
</frameset>
<!--======================边框色彩==================================-->
边框色彩 <frameset bordercolor=#>
#=rrggbb 16 进制 RGB 数码, 或者是下列预定义色彩名称：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
<frameset rows=30%,* bordercolor=red>
<frame src="Acol.html">
<frameset cols=30%,*>
<frame src="Bcol.html">
<frame src="Ccol.html">
</frameset>
</frameset>
<!--=======================页面空白(Margin)============================-->
页面空白(Margin) <frame marginwidth=# marginheight=#>
<frameset cols=50%,50%>
<frame src="A.html">
<frame src="A.html"
marginwidth=50
marginheight=50>
</frameset>
<!--=======================卷滚条设置=================================-->
卷滚条设置 <frame scrolling=#> #=yes, no, auto
#=缺省值是 auto。
<!--======================浮动窗口(Floating Frame)=====================-->
<iframe src=# name=##> ... </iframe>
#=初始页面的 URL
##=窗口标识(Frame Name)(之后可对此标识进行各窗口间相互操作)
... = 此处文字将只出现在不支持 FRAMES 的浏览器中。
<center>
<iframe src="A.html" name="window">
Here is a Floating Frame
</iframe>
<br><br>
<a href="A.html" target="window">Load A</A><BR>
<a href="B.html" target="window">Load B</A><BR>
<a href="Ccol.html" target="window">Load C</A><BR>
</center>
相关阅读 更多 +
