HTML学习总结:
一、HTML的基本结构：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title>hello</title>
</head>
<body>
<form action="test" name="testname" method="get" >
<table>
<tr>
<td>username:</td>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td colspan="2"><input type="submit" /></td>
</tr>
</table>
</form>
</body>
</html>
<html>：文件声明，让浏览器知道这是 html 文件
<head>：开头， 提供文件整体资讯
<title>：标题， 定义文件标题，将显示于浏览顶端
<body>：本文， 设计文件格式及内文所在
<form>：表单，决定单一表单的运作模式
<table>：表格，设定该表格的各项参数
二、开头____<head>
meta是用来在html文档中模拟http协议的响应头报文。
name属性主要用于描述网页，对应于content（网页内容）
1、<meta http-equiv="content-type" content="text/html;charset=gb2312">
用以说明网页制作所使用的文字以及语言
2、<meta http-equiv="refresh" content="3;url="http://www.163.com">
定时让网页在指定的时间n内，跳转到页面http://www.163.com；
3、<meta name="keywords" content="your keywords">
向搜索引擎说明你的网页的关键词
4、<meta name="description" content="your description">
告诉搜索引擎你的站点的主要内容；
5、<meta http-equiv="expires" content="0">
可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用gmt时间格式；
6、<meta http-equiv="pragma" content="no-cache">
用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从cache中再调出；
7、<meta http-equiv="windows-target" contect="_top">
强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用；
8、<meta http-equiv="set-cookie" contect="mon,12 may 2001 00:20:00 gmt">
cookie设定，如果网页过期，存盘的cookie将被删除。需要注意的也是必须使用gmt时间格式；
9、<meta name="generator | author | copyright" content="…..">
generator:用以说明生成工具（如microsoft frontpage）等；
author:告诉搜索引擎你的网页的制作的作者；
copyright:版权的设定
10、<style>…</style>定义css格式
11、<script language="">…</script>
用于定义脚本，例： javascript
其中<meta>、<style>、<script>标签位于<head>标签内
三、本文_______<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』
标记及参数之字母大小都可以
四、表单____form
<form>的常用属性
1、name：标单名
2、method：数据提交的方法
get：发送较少数据（256byte），显示在url中，url/userinfo?name=张三&ps=8
"post"：数据长度无限制，不会显示在url中
3、action：数据交给服务器端哪个程序进行处理
4、onsubmit：标单提交前要执行的script方法
5、onreset：标单reset前要执行的script方法
例：<form name="userform" method=""post"" action="hello.htm"
οnsubmit="return checkinput();" οnreset="reset();" >
4.1输入标签
位置：位于<form>之中，接收用户输入
格式：<input type="" name="">
type: text radio checkbox password hidden
select submit reset button textarea
name: 提交到服务器端的变量的名字
4.1.1文本框___text
<input type="text" name="" value="" maxlength="" size="">
属性:
maxlength: 最大字符长度
size: 文本框宽度（字符）
4.1.2 密码输入框___password
密码区域—特殊的单行文本输入框
<input type="password" name="" value="" size="" maxlength="">
4.1.3 单选按钮___radio
单选按钮：<input type="radio" name="" value="" checked>
典型用法：name相同，value不同
错误的用法：name不同
<form action="animal.htm" method=""post"">
<input type="radio" name="animal"value="dog" >
dog<br>
<input type="radio" name="animal" checked>
sheep<br>
<input type="radio" name="animal" value="wolf">
wolf<br>
<input type="submit" value="提交">
</form>
4.1.4 复选框__checkbox
复选框：<input type="checkbox" name="" value="" checked>
典型的用法：同一name，不同的value
<form action="/cgi-bin/"post"-query" method="post">
<input type="checkbox" name="animal" value="dog">
dog<br>
<input type="checkbox" name="animal" value="sheep" checked >
sheep<br>
<input type="checkbox" name="animal" value="wolf">
wolf<br>
<input type="submit">
</form>
4.1.5 隐藏域__hidden
<input type="hidden" name="" value="">
不显示在网页中通常用作向下一个页面传输已知信息或表单的附加信息
<form action="animal.htm" method=""post"">
<input type="hidden" name="add" value="test">
here is a hidden element. <br>
<input type="submit">
</form>
4.1.6 隐列表框__select
列表框
1 <select name="" size="" multiple>
<option value="1" selected>option1</option>
<option value="2">option2</option>
</select>
size默认是1
multiple 表示多重列表框，可以多选
selected 被选中
2 <select size=**>
<select size=**>
<form action="test.htm" method="post">
<select name="fruits" size="3">
<option value="banana">banana</option>
<option value="apple" selected>apple</option>
<option value="orange">orange</option>
<option value="peach">peach</option>
</select><br>
<input type="submit">
</form>
3 <select size=** multiple>
<select size=** multiple>
注意，是用 ctrl 键配合鼠标实现多选。
(和 ms-windows 的 file manager 一样)
<form action="test.htm" method="post">
<select name="fruits" size="3" multiple>
<option value="banana" >banana</option>
<option value="apple" selected>apple</option>
<option value="orange" selected>orange</option>
<option value="peach" selected>peach</option>
</select><br>
<input type="submit" /><input type="reset" />
</form>
4.1.7 文本区___textarea
多行多列文本框:<textarea rows="" cols="" wrap=""></textarea>
属性：
rows: 行数
cols: 列数
wrap: 对于很长的行是否进行换行(缺省：不换行)
off : 不换行
soft: 自动换行，并且如果行末有英文单词，会将整个单词移到下一行
hard: 自动换行，但会截断行末的单词
不换行：<textarea wrap="off"> ... </textarea>
换行： <textarea wrap="soft"> ... </textarea>
4.1.7 按钮___button
<input type="button" name="" value="">
按下该按钮，name的值将被提交，value的值同时被显示在按钮上面
<input type="submit" name="" value="">
按下该按钮，该form中所有的输入信息将被提交到服务器
<input type="reset" name="" value="">
按下该按钮，该form中所有的输入部分将被重置
五、表格
表元(单元格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="1">
<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>
5.1表格边框的色彩 ： <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：表格边框颜色
5.2表格边框色彩的亮度控制 ：
<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>
5.3表格的分组显示
5.3.1按行分组:
<thead> ... </thead> - 表的题头(header)
<tbody> ... </tbody> - 表的正文(body)
<tfoot> ... </tfoot> - 表的脚注(footer)
<table border="1">
<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>
5.3.1按列分组:
<colgroup align=#> #=left, right, center
<table border="1" 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>
5.4列的属性控制:
<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>
5.5 表格中边框的显示
显示所有 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="1" 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>
5.6 表格中分隔线(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>
6.1各窗口的尺寸设置
1 纵向排列多个窗口：<frameset cols=#>
<frameset cols="30%,20%,50%">
<frame src="a.html">
<frame src="b.html">
<frame src="c.html">
</frameset>
示例
a b c
2 横向排列多个窗口：<frameset rows=#>
<frameset rows="25%,25%,50%">
<frame src="a.html">
<frame src="b.html">
<frame src="c.html">
</frameset>
示例
a
b
c
3 纵横排列多个窗口：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>
缺省设置是允许各窗口改变大小的。
6.2各窗口间相互操作(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
6.3frame 的外观(appearance)
1 各窗口边框的设置:<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>
2 各窗口间空白区域的设置
<frameset framespacing=#> #=空白区域的大小
<frameset rows="30%,*" framespacing="100">
<frame src="acol.html">
<frameset cols="30%,*">
<frame src="bcol.html">
<frame src="ccol.html">
</frameset>
</frameset>
3 边框色彩
边框色彩 <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>
4 页面空白(margin)
页面空白(margin) <frame marginwidth=# marginheight=#>
<frameset cols="50%,50%">
<frame src="a.html">
<frame src="a.html"
marginwidth=50
marginheight=50>
</frameset>
5 卷滚条设置
卷滚条设置 <frame scrolling=#> #=yes, no, auto
#=缺省值是 auto。
6 浮动窗口(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>
七、其他标签
7.1 锚点标签<a>
<a name="anchorname">
--在该位置定义名字为anchorname的锚;
作用:连接到文件的指定部分
--超级链接，跳转到另一文件
<a href="url" target="targetwindow">画面跳转</a>
当鼠标点击"画面跳转"时，targetwindow的内容将会跳转到"url"，不指定target时在本窗口跳转。
连接到文件的特定部分
href="url#anchorname"
链接到url的anchorname部分
在url文档中用<a name="anchorname"></a>标识
target 的4类操作:
<a href="url" target="_blank"> 新窗口
<a href="url" target="_self"> 本窗口
<a href="url" target="_parent"> 父窗口
<a href="url" target="_top"> 整个浏览器窗口
7.2 分隔线<hr>
语法：
<hr size="pixels" align="align" width="pixels" color="#" noshade>
size：高度
align：对齐方式，可以取left或right
noshade：无阴影效果
颜色：
例： <hr noshade color="#ff00ff" width="600" size="8" align="left">
7.3 标题字体大小<h#>
<h#>…</h#> #=1、2、3、4、5、6
按标题级别用黑体字显示标题内容
自动插入空行,因此在一行中无法使用不同大小的字体
<h1>最大
<h6>最小
7.4 字体设置
<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…
7.5 设置文字显示
<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> 中横线
7.6 逻辑字体(logical style)
<em>你好！</em>
<strong>你好！</strong>
<code>你好！</code>
<samp>你好！</samp>
<kbd>你好！</kbd>
<var>你好！</var>
<dfn>你好！</dfn>
<cite>你好！</cite>
<small>你好！</small>
<big>你好！</big>
7.7 特殊字符
< <
> >
& &
空格
" "
7.8 文字的布局
<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.
7.8 列表
1 无序列表：<ul>…</ul> <li type="disc circle square">…
<ul>
<li type=disc>实心圆
<li type=circle>空心圆
<li type=square>实心方
</ul>
. today
. tommorow
2 有序列表：<ol>…</ol> <li>…
<ol>
<li>today
<li>tommorow
</ol>
1. today
2. tommorow
3 数字列表：
<br> 换行
<nobr>…</nobr> 不换行
4 定制有序列表表中的序号
定制有序列表表中的序号 <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
5 定义列表
定义列表(definition lists) <dl><dt>...<dd>...</dl>
<dl>
<dt>today
<dd>today is today.
<dt>tomorrow
<dd>tomorrow is today.
</dl>
today
today is today.
tomorrow
tomorrow is tomorrow.
6 定制有序列表表中的序号的起始值
定制有序列表表中的序号的起始值：<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
7 对齐—align
<h1 align="">
<div align="">
<table align="">
<hr align="">
取值:left、right、center、top、middle、bottom
<center>……</center>
对齐方式：居中
7.9 图片
<img src="" align="" alt="" border="">
src 图片路径，一般使用相对路径
alt 图片无法显示时显示的文字
border 边框的厚度
align = left right top middle bottom图文混排时用于和图片的对齐
7.10 多媒体
嵌入多媒体文本(embed)
基本语法 <embed src=#> #=url
本标记可以用来在主页中嵌入多媒体文本，如：
电影(movie), 声音(sound), 虚拟现实语言(vrml)... ...
体会 <embed> 标记，您需要把 plugin 安装完备。
请注意：embed attributes are different between each plugins.
1 背景音乐
<bgsound src=#> #=wav 文件的 url
<bgsound loop=#> #=循环数
<bgsound src="sound.wav" loop=3>
2 插入视频剪辑
<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">
2.1 何时开始播放 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>
2.2 控制条 <img controls>
用来在视频窗口下附加 ms－windows 的 avi 播放控制条。
<img src="sample-s.gif" dynsrc="sample-s.avi" controls>
2.3 循环播放 <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>
1768
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
