HTML文档的结构
示例：
<HTML>
<HEAD>
<title>标题部分</title>
</HEAD>
<BODY>
我的第一个html页面
</BODY>
</HTML>
<head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口中显示，但是其之间可以嵌入javascript 和css样式等丰富网页的内容。
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 用来标记你的页面的解码方式。
<title>元素定义HTML文档的标题。<title>与</title>之间的内容将显示在浏览器窗口的标题栏。
<body>元素表明是HTML文档的主体部分。在<body>与</body>之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。
<BODY>元素的属性概述
1. Bgcolor 属性标志HTML文档的背景颜色。如:Bgcolor="＃RRGGBB"
示例：
<HTML>
<HEAD>
<title>标题部分</title>
</HEAD>
<BODY bgcolor="red">
背影色设置为灰色
</BODY>
</HTML>
2. background 属性设置背景图片可使用GIF，JPG
<HTML>
<HEAD>
<title>标题部分</title>
</HEAD>
<BODY background="fengjing2_006.jpg">
设置背景图片
<br>
</BODY>
</HTML>
3. bgproperties="fixed"使背景图片成固定效果，图片不随滚动条滚动。
示例：
<HTML>
<HEAD>
<title>标题部分</title>
</HEAD>
<BODY background="fengjing2_006.jpg" bgproperties=fixed>
bgproperties="fixed"<br><br>
bgproperties设置为fixed 图片不随着滚动条而滚动。
<br>
</BODY>
</HTML>
4 .text 设置非链接文字的色彩。
5. link、vlink、alink分别对应普通超级链接、访问过的超级链接、当前活动超级链接颜色。
示例：
<HTML>
<HEAD>
<title>标题部分</title>
</HEAD>
<BODY alink="red" link="pink" vlink="green">
<a href="http://www.google.com">点击进入</a>
<a href="http://www.baidu.com">点击进入</a>
</BODY>
</HTML>
6. leftmargin和topmargin页面左边的空白距 与上边的空白距。
HTML文字设置1
文字是网页设计的基础部分，设置好文字的样式，可以起到事半功倍的效果，通常可以使用两种方法。
第1种方法是直接使用HTML标记进行设置，如:使用粗体标记<B>将文本设置为加粗样式。
第2种方法是使用css，层叠样式表。
HTML定义了6级标题，1-6级，标题文字随级数增大依次减小。
<h1>h1的效果</h1>
<h2>h2的效果</h2>
<h3>h3的效果</h3>
<h4>h4的效果</h4>
<h5>h5的效果</h5>
<h6>h6的效果</h6>
示例：
<HTML>
<HEAD>
<title>标题部分</title>
</HEAD>
<BODY>
<h1>h1的效果</h1>
<h2>h2的效果</h2>
<h3>h3的效果</h3>
<h4>h4的效果</h4>
<h5>h5的效果</h5>
<h6>h6的效果</h6>
</BODY>
</HTML>
利用align 属性可以实现标题文字水平方向左、中、右的对齐方式。
align="left / center / right"
示例：
<HTML>
<HEAD>
<title>标题部分</title>
</HEAD>
<BODY>
<h1 align="left">right的效果</h1>
<h2 align="center">center的效果</h2>
<h3 align="right">left的效果</h3>
</BODY>
</HTML>
HTML文字设置2
<B>设置文字以粗体的方式显示。语法<B>…</B>
<I> 设置文字以斜体显示。语法<I>…</I>
<EM>效果同<l>语法<EM>…</EM>
<SUP>设置文字以上标文本效果显示。语法<SUP>…</SUP>
<SUB>设置文字以下标文本效果显示。语法<SUB>…</SUB>
<U>设置文字以下划线显示。语法<U>…</U>
<S>设置文字以删除线显示。语法<S>…</S>
示例：
<HTML>
<HEAD>
<title>标题部分</title>
</HEAD>
<BODY>
<B>粗体</B><br>
<I>斜体</I><br>
<EM>斜体</EM><br>
字体<SUP>上标</SUP><br>
字体<SUB>下标</SUB><br>
<U>下划线</U><br>
<S>删除线</S><br>
</BODY>
</HTML>
<FONT>控制的字体、大小和文字。
语法：
<FONT face="字体",size="文字大小",color="颜色值">…</FONT>
face 控制文字使用的字体
size 控制文字的大小
color 设置文字颜色
HTML段落设置
<P>段落标记，一般情况下在每个段落的前面加上一个<P>标记可以区分段落，又可以换行。
<BR>之后的文字将在下一行显视。
<HR>设置水平线。
<center>标记所有包含的内容，将以居中对齐的方式显示在网页中。
< PRE >标签可以把原文件中的空格,回车,换行,tab键表现出来
<NOBR>标记将取消浏览器由于窗口大小变化而换行。
<XMP>在HTML文档中加入<XMP>标记，使标记内的HTML标记不起作用。
示例：
<HTML>
<HEAD>
<title>标题部分</title>
</HEAD>
<BODY>
这是一个段落标记。<p>
<p>
这是一个<br><br>
<hr >
<center>居中显示</center><br>
<PRE>
abc #sdfsd%#% de f g!
<> sdfsad s$!@$( h $#@#%% i dsfasf jk
</PRE>
天空在不断的变暗 但在玻璃窗的边缘 留下了一丝宝石的蓝 那样的深邃 像大海深处的暗淡 那样的忧郁 像我心底深处的盘旋 多么渴望留住这一丝 这最后的暗淡宝石的蓝 可时间的蔓延 总要将它消逝 然后 变得黑暗无边
<NOBR>
天空在不断的变暗 但在玻璃窗的边缘 留下了一丝宝石的蓝 那样的深邃 像大海深处的暗淡 那样的忧郁 像我心底深处的盘旋 多么渴望留住这一丝 这最后的暗淡宝石的蓝 可时间的蔓延 总要将它消逝 然后 变得黑暗无边
</NOBR>
<XMP>
<HTML>
<HEAD>
<title>标题部分</title>
</HEAD>
<BODY>
这是一个段落标记。<p>
<p>
这是一个<br><br>
<hr >
<center>居中显示</center><br>
</XMP>
</BODY>
</HTML>
HTML的转义字符--HTML 跑动文
<MARQUEE> 标记可使文字产生跑动的效果
direction 文字走动方向
bgcolor 设置文字背景颜色
height 设置跑动文字的高度
width 设置跑动文字的宽度
hspace 设置文字的水平边距
vspace 设置文字的上边距
behavior 设置文字的运动方式 scroll/alternate/slide
loop 设置跑动文字的圈数
scrollamount 设置跑动文字移动速度
scrolldelay 设置跑动文字移动延时
示例：
<HTML>
<HEAD>
<title>标题部分</title>
</HEAD>
<BODY>
<MARQUEE>
文字
</MARQUEE>
</BODY>
</HTML>
示例：
<HTML>
<HEAD>
<title>标题部分</title>
</HEAD>
<BODY>
"<br>
<<br>
><br>
±<br>
×<br>
&<br>
§<br>
¢<br>
¥<br>
·<br>
€<br>
£<br>
™<br>
©<br>
®
</BODY>
</HTML>
HTML超链接
超链接是一个网站的重要元素之一，一个网站由多个页面组成，各页面之间是通过超链接来确定相互关系的，每个页面的地址都不同。
格式:<A>这是一个连接</A>
href 设置超链接目标地址URL
name 在html文档中建立特定位置的名称
target 设置被链接的网页打开时的窗口_blank/_parent/_self/_top
accesskey 设置超链接的快捷键
title 设置超链接的说明文字
style 运用css样式设置超链接文字样式
示例：
<HTML>
<HEAD>
<title>标题部分</title>
</HEAD>
<BODY>
<a href="../07-a.html" name="07html" target="_blank"
title="说明文字" accesskey="q" >html链接</a>
</BODY>
</HTML>
HTML超链接的锚点
是指同一页面中的不同位置链接。
一个网页的内容很长，我们就可以在网页的顶部设置一些锚点，这样便可以方便浏览者点击相应的锚点，到达本页内相应的位置，而不必在一个很长的网页里自行寻找。
示例：
<HTML>
<HEAD>
<title>标题部分</title>
</HEAD>
<BODY>
<a name="top"></a>
08-A.html
<hr>
<a href="08-a.html#abc" name="cba" >页面内的锚点1-_-</a>
<br><br><br><br><br><br><br><br><br><br><br><br>
<a href="08-b.html#08b" name="08a" >页面外的锚点1…………</a>
<br><br><br><br><br><br><br><br><br><br><br><br>
<a href="08-a.html#cba" name="abc">页面内的锚点2</a>
<br><br><br><br><br><br><br><br><br><br><br><br>
<a href=#top>返回顶部</a>
</BODY>
</HTML>
HTML有序列表
列表分成三种类型：有序列表、无序列表和自定义列表。有序列表使用编号来记录项目的顺序，无序列表使用项目符号来记录无序的项目，自定义列表它由两个部分组成：定义条件和定义描述。
<OL type="编号样式" start="编号起始值">
<LI>项目一</LI>
<LI>项目二</LI>
....
</OL>
type
1 阿拉伯数字
a 英文小写
A 英文大写
i 罗马小写数字
I 罗马大写数字
start 编号样式的起始数字，如：编号样式设为A，起始值设置为2，则列表的起始值为B.
示例：
<html>
<head>
<title>标题</title>
</head>
<body>
<DL>
<DT>☆<DD>无序列表</DD>
<DT>☆<DD>有序列表</DD>
<DT>☆<DD>定义列表</DD>
</DL>
<DL>
<DT>无序列表</DT><DD>不以数字为开始，而是使用一个符号作为分项标记的列表。</DD>
<DT>有序列表</DT><DD>使用数字编号，分项带有顺序性质的列表。</DD>
<DT>定义列表</DT><DD>用于解释名词的列表，包含了两种层次，一是名词，一是名词的解释。</DD>
</DL>
</body>
</html>
HTML无序列表
无序列表标记
<UL>
<LI>项目一</LI>
<LI>项目二</LI>
....
</UL>
type
circle 空心圆
disc 圆点
square 正方形
示例：
<html>
<head>
<title>标题</title>
</head>
<body>
<ol type="I" start="2">
<li>啊啊</li>
<li>啊啊</li>
<li>啊啊</li>
<li>啊啊</li>
</ol>
</body>
</html>
HTM自定义列表
<DL>
<DT>无序列表</DT><DD>不以数字为开始，而是使用一个符号作为分项标记的列表。</DD>
<DT>有序列表</DT><DD>使用数字编号，分项带有顺序性质的列表。</DD>
<DT>定义列表</DT><DD>用于解释名词的列表，包含了两种层次，一是名词，一是名词的解释。</DD>
</DL>
示例：
<html>
<head>
<title>标题</title>
</head>
<body>
<ul type="disc">
<li>啊啊</li>
<li>啊啊</li>
<li>啊啊</li>
<li>啊啊</li>
</ul>
</body>
</html>
HTML建立表格
使用表格可以划分页面的布局
格式：<table>..</table>
<table>
<tr><td>表格中的一行数据</td></tr> <!--表格中的一行数据-->
<tr><td>表格中的二行数据</td></tr> <!--表格中的一行数据-->
<tr><td>表格中的三行数据</td></tr> <!--表格中的一行数据-->
</table>
示例：
<html>
<head>
<title>标题</title>
</head>
<body>
<table border="1">
<tr><td>表格中的一行数据</td><td>表格中的一行数据</td></tr>
<tr><td>表格中的二行数据</td><td>表格中的二行数据</td></tr>
<tr><td>表格中的三行数据</td><td>表格中的三行数据</td></tr>
</table>
</body>
</html>
<table>标签的属性
border 设置表格边框
caption 设置表格标题
align 设置表格在网页中的布局
width 设置表格宽度
height 设置表格高度
cellspacing 设置表格各单元格之间距离
cellpadding 设置单元格内部与文本之间的间距
bordercolor 设置表格边框颜色
bordercolorlight 设置表格亮面颜色
Bordercolordark 设置表格暗面颜色
示例：
<html>
<head>
<title>标题</title>
</head>
<body>
<table border="1" width="50%" height="100" bordercolorlight="#FF0000" bordercolordark="#00FF00">
<tr><td>表格中的一行数据</td><td>表格中的一行数据</td></tr>
<tr><td>表格中的二行数据</td><td>表格中的二行数据</td></tr>
<tr><td>表格中的三行数据</td><td>表格中的三行数据</td></tr>
</table>
</body>
</html>
<tr>标签的属性
bgcolor 设置背景颜色。
align 设置行对齐方式。
valign 设置单元格垂直对齐方式。
示例：
<html>
<head>
<title>标题</title>
</head>
<body>
<table width="400" border="1">
<tr bgcolor="#0099FF"><td>表格中的一行数据</td><td>表格中的一行数据</td></tr>
<tr align="right"><td>表格中的二行数据</td><td>表格中的二行数据</td></tr>
<tr valign="top"><td height="50">表格中的三行数据</td><td>表格中的三行数据</td></tr>
</table>
</body>
</html>
<td>和<th> 标签的属性
bgcolor 设置单元各背景颜色
rowspan 设置单元格所占行数
colspan 设置单元格所占的列数
align 设置对齐方式
valign 设置单元格垂直对齐方式
width 设置单元格宽度
height 设置单元格高度
示例：
<html>
<head>
<title>标题</title>
</head>
<body>
<table width="400" border="1">
<tr><td bgcolor="#0099FF">表格中的一行数据</td><td align="center">表格中的一行数据</td></tr>
<tr><td>表格中的二行数据</td><td>表格中的二行数据</td></tr>
<tr><td>表格中的三行数据</td><td>表格中的三行数据</td></tr>
</table>
<hr>
<B>rowspan</B>
<table width="400" border="1">
<tr> <td rowspan="3">一行数据</td> <td>第一行数据</td></tr>
<tr> <td>第二行数据</td></tr>
<tr> <td>第三行数据</td></tr>
</table>
<hr>
<B>colspan</B>
<table width="400" border="1">
<tr><td colspan="2">第一行数据</td></tr>
<tr><td>第二行数据</td><td>第二行数据</td></tr>
<tr><td>第三行数据</td><td>第三行数据</td></tr>
</table>
<hr>
<B>th</B>
<table border="1">
<tr><th>表格中的一行数据</th><th>表格中的一行数据</th></tr>
<!--前者用来显示数据的名称，后者用来显示数据的内容。-->
<tr><td>表格中的二行数据</td><td>表格中的二行数据</td></tr>
<tr><td>表格中的三行数据</td><td>表格中的三行数据</td></tr>
</table>
</body>
</html>
HTML特殊表格
Rules 设置单元格的特效
Fieldset 设置特殊表格
示例：
<html>
<head>
<title>标题</title>
</head>
<body>
<table width="200" border="1" rules="rows" >
<tr> <td>第一行</td> <td>第一行</td></tr>
<tr> <td>第二行</td> <td>第二行</td></tr>
</table>
<table border="0" width="100" bgcolor="#000000" cellspacing="1" cellpadding="0">
<tr bgcolor="#FFFFFF"><td>细线表格</td><td>细线表格</td></tr>
<tr bgcolor="#FFFFFF"><td>细线表格</td><td>细线表格</td></tr>
</table>
<table border="1" bordercolorlight="#ffffff" bordercolordark="#ffffff">
<tr><td bgcolor="#B7B7B7" bordercolorlight="#000000" >立体表格</td></tr>
<tr><td bgcolor="#B7B7B7" bordercolorlight="#000000" >立体表格</td></tr>
</table>
<fieldset style="50">
<legend> 公告 </legend>
更多更新视教程，请到www.jz97.net
</fieldset>
</body>
</html>
HTML 表单
表单是HTML的一个重要部分，主要用于采集和提交用户输入的信息。
<form name="f1" action="处理表单用的URL" method="get或post" >
</form>
1、name： 设置表单的名称。
2、action： 设置表单的处理程序的URL。
3、method：提交表单的方法。
示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<form name="f1" action="request.asp" method="post">
<p>请输入用户名:
<input name="txt" type="text" size="10" maxlength="7" />
<br>
请输入 密 码:
<input name="pwd" type="password" size="10" maxlength="6" />
<br>
选择强项：<br>
体育
<input type="checkbox" name="ck" value="体育" />
音乐
<input type="checkbox" name="ck" value="音乐" />
跳舞
<input type="checkbox" name="ck" value="跳舞" />
<br>
男<input type="radio" name="sex" value="男" checked="checked" />女<input type="radio" name="sex" value="女" /><br>
<select name="sn">
<option selected>中国</option>
<option>美国</option>
<option>韩国</option>
</select>
<br>
<input name="确定" type="submit" id="确定" value="提交" />
<input name="re" type="reset" value="重置" />
</p>
</form>
</body>
</html>
HTML表单中常用的标记
输入域<input>一般在表单中使用
1、<input type="text" />输入单行文字
2、<input type="password"/>输入密码
3、<input type="radio" /> 单选按钮
4、<input type="checkbox" />多选按钮
5、<input type="image" />图片
6、<input type="file" /> 文件上传
7、<input type="hidden" />隐藏域
8、<input type="reset" />撤销按钮
9、<input type="submit" />提交按钮
10、<input type="button" />普通按钮
示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<form>
输入单行文字<input type="text" /><br>
输入密码<input type="password"/><br>
单选按钮<input type="radio" name="abc" />
<input type="radio" name="abc" /><br>
多选按钮<input type="checkbox" name="ab" />
<input type="checkbox" name="ab" /><br>
图片域<input type="image" src="29.gif" /><br>
文件上传<input type="file" /><br>
隐藏域<input type="hidden" /><br>
撤销按钮<input type="reset" value="撤销按钮" /><br>
提交按钮<input type="submit" value="提交按钮" /><br>
执行脚本<input type="button" value="普通按钮" onclick="prompt()" /><br>
<textarea name="t1" rows="4" cols="50">
文本域
</textarea>
<br>
<select name="selectname">
<option >中国</option>
<option selected="selected" >美国</option>
<option >韩国</option>
</select>
</form>
</body>
</html>
HTML表单中常用的标记
多行文本输入标记<textarea>
<textarea name="t1",rows=x,cols=x>
……
</textarea>
name 设置识别名称。
rows 设置文本域的行数
cols 设置文本域的列数
disabled 设置文本为禁用
warp 设置为off 不换行
HTML 表单中常用的标记
选择域<select>
<select name=selectname>
<option selected>选项一</option>
< option >选项二</option>
¡¡
</select>
HTML表单提交数据
html提交数据时必须设置<input>标签name和value属性，以便asp程序能获取相应的值。
HTML 的框架
使用框架可以划分页面
</head>
<frameset cols="20%,80%">
<frame src=" A.html " >
<frame src=" B.html ">
</frameset>
<body>
示例：
<html>
<head>
<title>HTML 框架</title>
</head>
<frameset cols="20%,*" framespacing="2" frameborder="yes">
<frame src="A.html" name="framename" >
<frame src="B.html" scr="B.html">
</frameset><noframes></noframes>
<body>
</body>
</html>
A.html:
<html>
<head>
<title>HTML 框架</title>
</head>
<body>
<!--
<a href="http://www.jz97.net" target="frame_b">建站就去</a><br>
<a href="http://www.google.com" target="frame_b">谷歌</a><br>
<a href="http://www.baidu.com" target="frame_b">百度</a><br>
-->
A页面-----------<br>A页面<br>A页面<br>A页面<br>
A页面<br>A页面<br>A页面<br>A页面<br>
</body>
</html>
B.html:
<html>
<head>
<title>HTML 框架</title>
</head>
<body>
B页面<br>B页面<br>B页面<br>B页面<br>B页面<br>B页面<br>B页面<br>B页面<br>
B页面<br>B页面<br>B页面<br>B页面<br>B页面<br>B页面<br>B页面<br>B页面<br>B页面<br>
</body>
</html>
HTML frameset标签的属性
cols =size 设置列的大小
rows=size 设置行的大小
frameborder 是否显示边框yes/no,1/0
framespacing 设置分割条大小
HTML frame标签的属性
src 设置要链接的HTML 文件
name 窗体的名称
marginwidth 设置窗口左右边界的距离
Marginheight 设置窗口上下边界的距离
scrolling 设置窗口是否使用滚动条 yes/no 默认为auto
noresize 不能调整窗口大小
示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
</body>
</html>
HTML iframe 标签
使用格式：
<iframe src=URL name=iframename>
…
</iframe>
src 设置要链接的HTML文件
frameborder 是否显示边框yes/no,1/0
width 设置宽度
height 设置高度
scrolling设置窗口是否使用滚动条 yes/on默认为auto
示例：
<html>
<head>
<title>HTML 框架</title>
</head>
<iframe src=A.html name="iframename" width="400" height="300" frameborder="yes" scrolling="yes" >不支持iframe</iframe>
<body>
<A href="http://www.google.com" target="iframename">进入谷歌</A>
</body>
</html>
HTMl 加入图像<img>
插入图片的元素标记
格式: <img> ..</img>
常用属性:
src ="图片源地址"
alt ="替换文字"
width ="宽度"
height ="高度"
hspace ="垂直边距"
vspace ="水平边距"
border ="边框"
align ="对齐方式"
示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<img src="03.gif" alt="按此在新窗口打开图片" width="110" border="0" onclick="window.open(this.src);"
onmouseover="this.style.cursor='hand';" onload="if(this.width>=111) {this.width=300;}">
</body>
</html>
HTML 加入声音1
<embed src="spain.mp3" autostart="true" loop="true" >
</embed >
src="文件的位置URL"
autostart="true/false"自动启动
loop="循环次数"
示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">
var bool=true;
function next()
{
if(bool==true)
{
bool=false;
bg.src="dt.mp3";
}
else
{
bool=true;
bg.src="spain.mp3";
}
}
function Min()
{ if(bg.volume==-10000)
{
return;
}
else
{
bg.volume-=500;
this.txt.value=bg.volume;
}
}
function Max()
{ if(bg.volume==0)
{
gb.Max.disabled="disabled"
return;
}
else
{
bg.volume+=500;
this.txt.value=bg.volume;
}
}
</script>
</head>
<body>
<!--
<embed src="spain.mp3" autostart="false" loop="true" >
</embed>
-->
<bgsound src="spain.mp3" volume="0" balance="-1" loop="true" id="bg">
<input type=button value="静音" onclick="bg.volume=-10000">
<input type=button value="撤销静音" onclick="bg.volume=0">
<input type=button value="音量++" onclick="Max()" id="Max" >
<input type=button value="音量--" onclick="Min()" id="Min">
<input type=button value="下一首" onclick="next()">
<input type="text" id="txt"/>
</body>
</html>
HTML 加入声音2
<bgsound src="spain.mp3" volume="" balance="" loop="">
src ="文件的位置URL"
volume="音量" -10000到0之间 0最高音量
balance="声道"-10000到10000之间的值
loop="循环次数"
HTML 加入视频
<object>
<param name="movie" value="139.swf">
<param name="wmode"value="transparent">
</object>
示例1：
<html>
<head>
<title>无标题文档</title>
</head>
<body bgcolor="#666666">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
width="485" height="111">
<param name="movie" value="139.swf">
<param name="wmode" value="transparent">
</object>
</body>
</html>
示例2：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<embed height="80" src="2.swf" >
</embed>
<!--
<embed src="7.HTML 表单.wmv" >
</embed>
-->
</body>
</html>
HTML DIV与CSS样式
DIV＋CSS是网页设计标准
可以把这个DIV元素看作一个层，也可以把他看成一个容器。他是用来在页面上具体定位的一个层 。
CSS是Cascading Style Sheets(层叠式样式表)的简称.
1使页面加载更快 2修改设计更有效率
3代码从用度高
HTML CSS样式-内联式样式
内联式样式：它利于现有的HTML标记，把特殊的样式加入到那些由标记控制的信息中。
基本格式：
<HTML标签 style="CSS 样式" >
CSS控制显示区域
</HTML 标签>
示例：
<html>
<head>
<title>无标题文档</title>
<style type="text/css">
a:link{ font-size:1cm;}
a:hover{color:#00FF00;}
a:visited{color:#0033FF}
</style>
</head>
<body>
<a href="http://google.com">aaaaaa</a>
</body>
</html>
HTML CSS样式-嵌入式样式
嵌入式样式：它和Javascript一样可以嵌入到HTML文件的头部中 （<html>和<body>标记之间），使用<Style>和</Style>容器装载，例如：
<style>
p {color : red ; font-weight : bold} </style> ，
这样会对页面中所有<p>标记都起作用
HTML CSS样式-外部式样式
外部式样式：是一种保存在外部的样式单文件，外部文件以.CSS为扩展名。
例如:
<link rel="stylesheet" href="demo.css" type="text/css">
HTML CSS样式-输入式样式
输入样式表：
@import url(demo.css);
作用:导入CSS文件。
HTML - CSS标签选择器
标签选择器
class选择器
id选择器
关联选择器
组合选择器
伪元素选择器
HTML – DIV网页布局
使用DIV+CSS布局，使页面代码更精简。
示例_index.html：
<html>
<head>
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<div id="one">
<div id="left"></div>
<div id="center">
<div id="head">head</div>
<div id="bd">
<div id="bd_left">
<div id="login"> <br>
<form>
<p> 登录：<input type="text" class="text"><br>
密码：<input type="password" class="text"><br>
<input type="checkbox">保存Cookies<br>
<input type="submit" value="确定" class="button" >
<input type="reset" value="撤销" class="button">
</form>
</div>
<div class="count"><div class="count_1">统计信息</div> </div>
<div class="count"><div class="count_2">排行榜</div></div>
<div class="count"><div class="count_2">排行榜</div></div>
</div>
<div id="bd_right">
<div class="bd_right1"><div class="bd_right_1"><a href="#">最新动态</a></div>
<ul type="square">
<li>欢迎到www.jz97.net
<li>欢迎到www.jz97.net
<li>欢迎到www.jz97.net
<li>欢迎到www.jz97.net
</ul>
</div>
<div class="bd_right2"><div class="bd_right_1">互动学习</div></div>
<div class="bd_right1"><div class="bd_right_1">最新动态</div></div>
<div class="bd_right2"><div class="bd_right_1">互动学习</div></div>
<div class="bd_right1"><div class="bd_right_1">最新动态</div></div>
<div class="bd_right2"><div class="bd_right_1">互动学习</div></div>
</div>
</div>
<div id="food">food</div>
</div>
<div id="right"></div>
</div>
</body>
</html>
示例_demo.css:
/* CSS Document */
body{ text-align:center; background:#e5eef5; margin:0px;}
#one{ background:#f6f6f6; width:816; height:1200px;}
#left{ width:8px; height:1200px; background:url(img/left1.gif); float:left}
#center{ width:800px; height:1200px; background:#FFFFFF; float:left}
#right{ width:8px; height:1200px; background:url(img/right1.gif); float:right}
#head{ width:800px; height:80; background:#e5eef5; float:left}
#bd{ width:800px; height:1000px; background:#f6f6f6; margin-top:20px;}
#food{width:800px; height:80px; background:#e5eef5; margin-top:20px;}
#bd_left{ width:230px; height:1000px; float:left;}
#bd_right{ width:570px; height:1000px; float:right;}
#login{ width:200px; height:120px; margin-top:20px;border:1px solid #84b0c7; background:#FFFFFF}
.count{ width:200px; height:230px; background:#f6f6f6; margin-top:20px;border:1px solid #84b0c7;}
.bd_right1{ width:260px; height:310px; margin-top:20px; border:1px solid #84b0c7; background:#f6f6f6; float:left; text-align:left}
.bd_right2{ width:260px; height:310px; margin-top:20px; border:1px solid #84b0c7; background:#f6f6f6; float:right; margin-right:20px;text-align:left}
p{ font-size:12px; color:#0099FF}
.text{ border-style:groove; width:100px; height:20px;}
.button{ border-style:none; background:#FFFFFF; border-bottom-style:inset; border-right-style:inset}
.count_1{ width:196; height:20px; margin-top:2px; background:#f3f3e5}
.count_2{ width:196; height:20px; margin-top:2px; background:f3e5e5}
.bd_right_1{width:256; height:20px; margin-top:2px; background:e5eef5}