HTML语言是一种建立网页文件的语言，透过标记式的指令，将影像、声音、图片、文字等连结显示出来。 通常我们通过浏览器所看到的网站，就是由HTML (HyperText Markup Language) 语言所构成的。使用dw工具来学习html可以得到互为补充,快速掌握的效果,为以后学习asp打下良好基础;
第一章 html文件的组成
1 HTML的特点
html由头部和身体组成,结构非常规范,如下:
<html>
<head>
<title>....</title>
</head>
<body>
.............
</body>
</html>
html标记
在html文件上最引人注目的是单词被一对尖括号扩起来,这些被尖括号扩起来的句子称之为标记。标记是HTML语言中的程序指令。大多数标记还有自己的一些属性,属性用于进一步改变显示的效果,属性也可以省略而采用默认值;
1<html></html>
为最外围的标记,表示html文档的开始和结束;
2<head></head>
<head>和</head>构成html文档的开头部分,之间可以插入其他标记,常见的是<title>和</title>,
3<title></title>
为放在<head></head>之间的一对标记,用来定义网页的标题,其内容用来表示html中的常规信息,出现在浏览器顶部的标题栏中,不在浏览器主页上显示;
4<body></body>
<body></body>是Html文档的主体部分，用来存放文章的主要内容,故body叫文件体标记,在此标记对之间可包含<p><h1><br><hr> 等众多的标记;<body>标记的常见属性和应用格式为:
<body text="#000000" link="#000000" alink="#000000" vlink="#000000" background="gifnam.gif" bgcolor="#000000" leftmargin=3 topmargin=2 bgproperties="fixed">
(1)text="#000000"
用以设置文字颜色,默认值黑色。颜色是用16进制的红－绿－蓝(red-green-blue，RGB)值来表示。
在html中使用的颜色可用颜色十六进制的RGB值来表示，也可以用颜色英文名来表示，常见颜色对照表如下:
Black = "#000000"黑色
Green = "#008000" 绿色
Silver = "#C0C0C0" 镀银
Lime = "#00FF00" 橙
Gray = "#808080" 灰色
Olive = "#808000" 橄榄色
White = "#FFFFFF"白色
Yellow = "#FFFF00" 黄色
Maroon = "#800000" 栗色
Navy = "#000080" 海军
Red = "#FF0000" 红色
Blue = "#0000FF" 蓝色
Purple = "#800080" 紫色
Teal = "#008080" 水鸭
Fuchsia = "#FF00FF"紫红色
Aqua = "#00FFFF" 浅绿色
(2)link="#000000"
link用来设置一般文字链接的颜色,默认值蓝色;
(3)alink="#000000"
alink用来设置正在被击中的链接的颜色。默认值红色。
(4)vlink="#000000"
vlink设置已使用的链接的颜色,默认值紫色;
(5)background="gifnam.gif"
background设置背景图片,gif或jpeg都可以,可以是绝对路径或相对路径;
(6)bgcolor="#000000"
bgcolor设置背景颜色;
(7)bgproperties="fixed"
bgproperties用于固定背景图片，防止背景图片的滚动;
(8)onunload指示卸载时需要调用的函数
(9)onload指示加载时要调用的函数
(10)leftmargin 页面左边距
(11)topmargin 页面顶边距
第二章 文本设置
1 字体设置标记
font标签用来标记字体的大小,颜色,字型等,其格式为:
<font>.....</font>
font的属性为:
size = 字体大小,可取1.2.3.4.5.6
face = 字型名称,可取字体1,字体2,宋体,楷体等
color= 字体颜色,可取 #rrggbb,其中rr,gg,bb为十六进制数据,他还可以采用颜色名称进行设置,例如:color="#0000ff"; color=Red;
示例 1字体
<html>
<head>
<title>字体设置</title>
</head>
<body bgcolor="#808000">
<font color="#0000ff" face="宋体" size=30>
字体设置
</font>
</body>
</html>
2 字体的其他标记
<B> </B> 粗体
<I> </I> 斜体
<U> </U> 加下划线
<s> </s> 删除线
<em> </em> 倾斜线
<TT> <TT> 打字机字体
<BIG> </BIG> 大型字体
<SMALL> </SMALL> 小型字体
<STRONG> </STRONG> 加强显示
<CITE> </CITE> 用于引证
<small> </small> 正常显示
示例 2字体
<html>
<hede>
<title>特性效果展示</title>
</head>
<body text="#0000ff">
<b>粗体</b>
<br>
<i>斜体</i>
<br>
<em>倾斜显示</em>
<br>
<u>下划线</u>
<br>
<s>删除线</s>
<br>
<strike>加亮线</strike>
<br>
<big>放大线</big>
<br>
<strong>加强显示</strong>
<br>
<smll>正常显示</smll>
<br>
<samp>正常显示</samp>
<kbd>正常显示</kbd>
</body>
</html>
3 标题标记
在HTML中提供了标题标记<H1>,<H2>,<H3>,<H4>,<H5>,<H6>共六个等级;标题标记中可以使用对齐属性,如:
align="center"对齐,可选right,left
示例 3标题：
<html>
<head>
<title>示例1</title>
</head>
<body>
<H1> 标题h1</H1>
<H2> 标题h2</H2>
<H3> 标题h3</H3>
<H4> 标题h4</H4>
<H5> 标题h5</H5>
<H6> 标题h6</H6>
</body>
</html>
4 换行和注释
1换行
<br>用于换行,是一个单独的标记,不成对出现;
2注释标记
<!--
...
-->
注释标记是成对的,放在其间的文字不会被显示;
5 小于号和大于号
"<"和">"分别显示小于号和大于号;
示例 4换行
5 段落标记
文字段落之间，可以<P>...</P>来做标记。文件段落的开始由<P>来标记,</P>是可以省略的，因为下一个<P>的开始就意味着上一个<P>的结束;
示例 5段落
从本例中可以看出<p>标签和<br>的区别;
<html>
<head>
<title>段落标签</title>
</head>
<body >
<Center>
<P >
两只蝴蝶<br>
亲爱的,你慢慢飞,小心前面带刺的玫瑰<br>
亲爱的,你张张嘴,风中花香会让你沉醉<br>
亲爱的,你跟我飞,穿过丛林去看小溪水<br>
亲爱的,来跳个舞,爱的春天不会有天黑
</P>
<p >
亲爱的,你慢慢飞,小心前面带刺的玫瑰<p>
亲爱的,你张张嘴,风中花香会让你沉醉<p>
亲爱的,你跟我飞,穿过丛林去看小溪水<p>
亲爱的,来跳个舞,爱的春天不会有天黑
</p>
</body>
</html>
6 对齐标记
<div>...</div>
左对齐 <div align=Left>...</div align=Left>;
右对齐 <div align=right>...</div align=right>;
居中对齐<div align=center>...</div align=center>;
示例 6对齐
<html>
<head>
<title>对齐</title>
</head>
<body>
<div align=left>
左对齐-left
</div align=left>
<div align=right>
右对齐-right
</div align=right>
<div align=center>
居中
</div align=center>
<center>
居中标签
</center>
<h1 align=right>
本字设置为标题h1,右对齐
</h1>
</body>
</html>
7 水平线标记
<HR>这个标记可以在屏幕上显示一条水平线，用以分割页面中的不同部分。<HR>有三个属性：
size 以象素为单位的数字,表示水平线的宽度
width 表示水平线长度
align 水平线的对齐方式，有LEFT RIGHT CENTER三种
noshade 线段不要阴影属性
color="#rrggbb"表示颜色
以上属性如果省略,会画一条蓝色线,网页中多用这种线
示例 7水平线
<html>
<head>
<title>线段设定</title>
</head>
<body>
<hr size=5 width=200 align=center color="#ff0000" noshade>
<p>
<hr>
<p>
<hr>
<p>
<hr color="#00ff00">
<p>
<hr color="#0000ff">
</body>
</html>
8 文本预定义标签
格式为:<pre>...</pre>
pre标记叫做预定义文本标签,所谓预定义就是格式化,即你输入时是什么样子,在输出时就是什么样子,叫做以原始样式显示;
示例8
比较使用<pre>和不使用的区别;
<html>
<heade><title>预定义文本标签</title></head>
<body>
<pre>
亲爱的,你慢慢飞,小心前面带刺的玫瑰<br>
亲爱的,你张张嘴,风中花香会让你沉醉<br>
亲爱的,你跟我飞,穿过丛林去看小溪水<br>
亲爱的,来跳个舞,爱的春天不会有天黑
</pre>
亲爱的,你慢慢飞,小心前面带刺的玫瑰<br>
亲爱的,你张张嘴,风中花香会让你沉醉<br>
亲爱的,你跟我飞,穿过丛林去看小溪水<br>
亲爱的,来跳个舞,爱的春天不会有天黑<br>
亲爱的,你慢慢飞,小心前面带刺的玫瑰<br>
亲爱的,你张张嘴,风中花香会让你沉醉<br>
亲爱的,你跟我飞,穿过丛林去看小溪水<br>
亲爱的,来跳个舞,爱的春天不会有天黑
</body>
</html>
9 文本区标记
textarea标签又叫文本区标签,可以生成带矩形条的文本区,它有三个属性;
rows="行数"
cols="列数"
name="名称"
应用格式为:
<textarea rows="..." cols="..." name="...">.....</textarea>
示例9
<html>
<head>
<title>文本区标记</title>
</head>
<body>
<textarea rows="5" cols="40" name="text">
亲爱的,你慢慢飞,小心前面带刺的玫瑰
亲爱的,你张张嘴,风中花香会让你沉醉
亲爱的,你跟我飞,穿过丛林去看小溪水
亲爱的,来跳个舞,爱的春天不会有天黑
我和你缠缠绵绵翩翩飞
飞跃这红尘永相随 追逐你一生,爱你无情悔
不辜负我的柔情你的美
我和你缠缠绵绵翩翩飞
飞跃这红尘永相随
等到秋风起,秋叶落成堆能陪你一起枯萎,也无悔
</textarea>
</body>
</html>
10 引用块标签
<blockquote>标签标记的文本被放在一个矩形块内,块的边界是看不见的,块前和块后会保留一个空行;其格式为:
<blockquote>...</blockquote>
示例10
<html>
<head>
<title>段落标签</title>
</head>
<body>
<P Align=Center>
两只蝴蝶
<P Align=Center>
亲爱的,你慢慢飞,小心前面带刺的玫瑰<br>
亲爱的,你张张嘴,风中花香会让你沉醉<br>
亲爱的,你跟我飞,穿过丛林去看小溪水<br>
</P>
<Center>
<blockquote>
亲爱的,来跳个舞,爱的春天不会有天黑<br>
亲爱的,你慢慢飞,小心前面带刺的玫瑰<br>
亲爱的,你张张嘴,风中花香会让你沉醉<br>
亲爱的,你跟我飞,穿过丛林去看小溪水<br>
亲爱的,来跳个舞,爱的春天不会有天黑
</blockquote>
亲爱的,你慢慢飞,小心前面带刺的玫瑰<br>
亲爱的,你张张嘴,风中花香会让你沉醉<br>
亲爱的,你跟我飞,穿过丛林去看小溪水<br>
</Center>
</body>
</html>
第三章 列表
1 无序列表
<ul>无序列表指没有进行编号的列表,它有一个属性<li>,<li>的类型type有三个选项,这三个选项都必须小写:
disc实心园
circle空心园
square小方块
<ul>如果不使用其属性<li>,即默认情况下的<ul>会加"实心园"
格式1:
<ul>
<li>第一项
<li>第二项
<li>第三项
</ul>
格式2
<ul>
<li type=disc>第一项
<li type=circle>第二项
<li type=square>第三项
</ul>
示例1
<html>
<head>
<title>无序列表</title>
</head>
<body>
<ul>
<li>默认的无序列表加"实心园"
<li>默认的无序列表"实心园"
<li>默认的无序列表"实心园"
</ul>
<ul>
<li> type=square>无序列表square加方块
<li >type=square>无序列表square加方块
<li >type=square>无序列表square加方块
</ul>
<ul>
<li> type=circle>无序列表circle加空心园
<li >type=circle>无序列表circle加空心园
<li >type=circle>无序列表circle加空心园
</ul>
</body>
</html>
2 有序列表
<ol>列表的结果是带有编号,他的格式和<ul>无序列表相似,只是在<ol>中可以放入两个参数
star=编号开始的数字 ,如star=2则编号从2开始;如果从1开始可以省略;
type=用于编号的数字,字母等的类型,如type=a,则编号用英文字母;
格式1
<ol star=数字 type=编号类型>
<li>第1项
<li>第2项
<li>第3项
</ol>
格式2
<ol>
<li>第1项
<li>第2项
<li>第3项
</ol>
例2：
<html>
<head>
<title>有序列表</title>
</head>
<body>
<ol>
<li>默认的有序列表
<li>默认的有序列表
<li>默认的有序列表
</ol>
<ol type=a>
<li>第1项
<li>第2项
<li>第3项
</ol>
<ol type=I>
<li>第1项
<li>第2项
<li>第3项
</body>
</html>
3定义性列表
即带注释的列表。列表项标签用<DT>，注释项用<DD>表示。默认的是注释显示在另一行中,当使用compact后,注释项和列表项将显示在同一行。其格式为：
<dl>
<dt>第1项 <dd>注释1
<dt>第2项 <dd>注释2
<dt>第3项 <dd>注释3
</dl>
示例3
<html>
<head>
<title>定义性列表</title>
</head>
<body>
定义性列表<P>
<dl>
<dt> WWW <dd> WWW是(World wide web)的缩写;
<dt> WWW <dd> WWW又叫万维网;
<dt> WWW <dd> internet提供的最常用的服务是WWW;
</dl>
</body>
</html>
4 选择性列表
指带有滚动条的列表,标签为<select> ,它有一个选项标记和三个参数,省略参数时为下拉小三角,选项标记中添加数值
option value添加要显示的内容放在第几行
name表示列表的名称,
size表示列表中显示多少行,
multiple表示列表中的项目可以进行多项选择, 其格式为:
<select name="变量名" size="数字" multiple>
<option value="数值1">选项1
<option value="数值1">选项1
<option value="数值1">选项1
</select>
示例4
<html>
<head>
<title>选择列表</title>
</head>
<body>
<select name="tablel" size="3" multiple>
<option value="1">星期1:flash实例课
<option value="2">星期2:flash基础课
<option value="3">星期3:flash提高课
<option value="4">星期4:flash脚本课
<option value="5">星期5:flash研讨课
</select>
</body>
</html>
5 目录和菜单
<dir>为目录列表标签,<menu>为菜单列表标签,它们的格式和无序列表<ul>是一样的,例如:
格式1:
<dir>
<li>第一项
<li>第二项
<li>第三项
</dir>
格式2
<menu>
<li type=disc>第一项
<li type=circle>第二项
<li type=square>第三项
</menu>
示例5
<html>
<head>
<title>无序列表</title>
</head>
<body>
<ul>
<li>默认的无序列表加"实心园"
<li>默认的无序列表"实心园"
<li>默认的无序列表"实心园"
</ul>
<dir>
<li>默认的目录列表加"实心园"
<li>默认的目录列表"实心园"
<li>默认的目录列表"实心园"
</dir>
<menu>
<li>默认的菜单列表加"实心园"
<li>默认的菜单列表"实心园"
<li>默认的菜单列表"实心园"
</menu>
<dir>
<li type=square>目录列表square加方块
<li type=square>目录列表square加方块
<li type=square>目录列表square加方块
</dir>
<menu>
<li type=circle>菜单列表circle加空心园
<li type=circle>菜单列表circle加空心园
<li type=circle>菜单列表circle加空心园
</menu>
</body>
</html>
第四章 表格
网页布局的方法有两种，一种是使用表格table布局，另一种是使用框架frame布局,表格的作用就是使行和列排列整齐漂亮;构造一个表格首先要使用表格标记table进行定义,然后就是用行tr和列td构成基本表格;
1、表格的基本结构
<table>...</table> 定义表格
<tr> 定义行,放在<table>...</table>之间
<td> 定义列,放在<tr>...</tr>之间
<table>
<tr> 第1行开始
<td>...</td> 第1行中的第1列
<td>...</td> 第1行中的第2列
<td>...</td> 第1行中的第3列
</tr>第1行结束
<tr>第2行开始
<td>...</td> 第2行中的第1列
<td>...</td> 第2行中的第2列
<td>...</td> 第2行中的第3列
</tr>第2行结束
</table>
示例1
<table>
<tr>
<td>第1行中的第1列</td>
<td>第1行中的第2列</td>
<td>第1行中的第3列</td>
</tr>
<tr>
<td>第2行中的第1列</td>
<td>第2行中的第2列</td>
<td>第2行中的第3列</td>
</tr>
</table>
2 表格标记的属性
<table>有很多属性,最常用的是:
1 border=数字,用来设置表格边框粗细,省略时为无边框;
2 bordercolor="#ff0000",指定边框颜色;
3 align="center" 指定对齐方式;(左left,右right)
4 bgcolor=#808080 表格背景色;
5 width=数字,用来设置表格宽度,单位象素;
示例2
<table border=2 bordercolor="#ff0000" align="center" bgcolor="#808080" width=400>
<tr>
<td>第1行中的第1列</td>
<td>第1行中的第2列</td>
<td>第1行中的第3列</td>
</tr>
<tr>
<td>第2行中的第1列</td>
<td>第2行中的第2列</td>
<td>第2行中的第3列</td>
</tr>
</table>
3 表头标记
<th>表头标记的格式和属性有:
格式:<th>...</th>
属性:
1 colspan=数字,表示该标签中的文本要跨过的列数;
2 align="center" 指定对齐方式;(左left,右right)
3 rowspan=数字,表示该标签中的文本要跨过的行数;
4 valing指定垂直对齐方式,可取:
top顶端
middle中间
bottom下端
baseline基线
示例3
<html>
<head>
<title>值班表</title>
</head>
</html>
<table border=1 bordercolor="#ff0000" "bgcolor=#808080" align="center" >
<tr>
<th>星期一 </th>
<th>星期二 </th>
<th>星期三 </th>
</tr>
<td>小李</td>
<td>小赵</td>
<td>小王</td>
</table>
4 标题标记
<caption>称标题标签,其格式为
<caption>...</caption>
属性:
align 指定对齐方式,有lefte,right,center
valign指定垂直对齐方式,有top,middle,bottom,baseling
示例4
<html>
<head>
<title>值班表</title>
</head>
</html>
<table border=1 bordercolor="#ff0000" "bgcolor=#808080" align="center" >
<caption>值班表</caption>
<tr>
<th>星期一 </th>
<th>星期二 </th>
<th>星期三 </th>
</tr>
<td>小李</td>
<td>小赵</td>
<td>小王</td>
</table>
第五章 连接
第一节 超文本连接
在浏览器上鼠标移动时,当移动到某些文本或者图形之上有时会变成一只小手,表示这是一个连接,单击就会打开新的网页了,连接的标记用<A>表示,<A>叫超文本连接,又叫猫标签或猫标记;它的应用格式为:
<A 属性>要显示的文本或图像</A>
超文本连接<a>有一些属性例如:
1 Href="url"属性定义了链接指向的节点;
2 target="_blank" 在新开的窗口中显示
3 title="提示文本"在浏览器中鼠标滑过时要显示的内容;
4 name="name"超文本连接的名称;
一 href
href是超连接<a>的一个最重要属性,应用格式为
<a href="url">...</a>
上式中url是传递给href的值,URL代表了网页中的一个信息点,这个信息点包含了信息资源的类型(协议),地址和文件名,所以url又叫统一资源定位器或叫做网址;
URL链接的格式为：
协议名：//主机.域名／路径／文件名
下面是url常见的连接类型;
http WWW服务器
ftp ftp服务器(文件传输协议)
telnet 基于Telnet的协议
mailto 电子邮件
news Usenet新闻组
gopher GOPHER服务器
wais WAIS服务器
file 本地系统文件
例如-URL:
http--http://www.baidu.com/alliance/flashgame.html
ftp--http://ftp.tku.edu.tw/
telent--telent://128.60.133.100
如何指定url的路径
(1)绝对路径的指定:包含标识Internet上的文件所要的全部信息，包含协议、主机名、文件夹名和文件名四项,即url:
http--http://www.baidu.com/alliance/flashgame.html
ftp--http://ftp.tku.edu.tw/
telent--telent://128.60.133.100
(2)相对路径指定
就是指以当前文档所在位置为起点到被链接文档经由的路径
1 同一文件夹中的文件，直接写文件名即可，如：
<a href="示例1.htm">
2 下级文件夹中的文件，要加上文件夹名，如：
<a href="ch1/ch1-1.gif">
3 上级文件夹中的文件，使用“.."表示移到上一级目录，如：
父级目录：<a href="../index.htm">
4 直接从服务器根目录开始指定文件夹和文件名，这种形式以“/“开头
<a href="/ch1/ch1-1.htm">
示例1-连接网站
使用<a>的属性href可以连接到不同的网站
<html>
<head><title>超连接属性href</title></head>
<body>
<font color="#ff0000">连接各种网站示例</font><br>
<a href="http://bbs.cnlsj.com/">中国老三届论坛首页</a><br>
<a href="http://bbs.flasher123.com/">闪客启航论坛首页</a><br>
<a href="http://www.baidu.com/alliance/flashgame.html">百度搜索联盟</a><br>
<a href="http://flash.tom.com/"%20target="_blank"%20%20target="_blank"%20>TOM-FLASH''>http://flash.tom.com/">TOM-FLASH动画</a><br>
<a href="http://ftp.tku.edu.tw/">浙江大学档案官</a>
</body>
</html>
示例2-连接网页
使用<a>的属性href可以连接本地的html文件;
<html>
<head><title>超连接属性href</title></head>
<body>
<font color="#ff0000">连接本地的html文件</font><br>
<a href="1网站连接.html">连接到本地文件"1网站连接"</a><br>
</body>
</html>
示例3-连接图片
<html>
<head><title>超连接属性href</title></head>
<body>
<font color="#ff0000">连接本地图片</font><br>
<a href="小狗.gif">连接到本地文件"小狗"</a><br>
<a href="秋天的树.jpg">连接到本地文件"秋天的树.jpg"</a><br>
</body>
</html>
示例4-连接音频
<html>
<head><title>超连接属性href</title></head>
<body>
<font color="#ff0000">连接本地音频</font><br>
<a href="笑声.wav">连接到本地文件"笑声"</a><br>
<a href="雷.mp3">连接到本地文件"雷"</a><br>
</body>
</html>
示例5-连接视频
<html>
<head><title>超连接属性href</title></head>
<body>
<font color="#ff0000">连接本地视频</font><br>
<a href="旋转的球.avi">连接到本地文件"旋转的球"</a><br>
<a href="ball.swf">连接到本地文件"ball"</a><br>
</body>
</html>
示例6-连接演示
演示1
<html>
<head><title>连接演示</title></head>
<body>
<h2><b><!--注释:h2设置标题大小,b设置文本为粗体-->
<center>
请单击"2演示"
</center>
<br><br>
<a href="2演示.html">2演示</a>
</b></h2>
</body></html>
演示2
<html>
<head><title>连接演示</title></head>
<body>
<h2><i>
<center>
单击"返回"就可以返回了
</center>
<br><br>
<a href="1演示.html">返回</a>
</i></h2>
</body></html>
二 target
在超链接中不加target属性，在浏览器中打开链接内容，始终显示在同一窗口中。如需要在新的窗口中显示链接内容，设置如下：
target="框窗名称"
target="_blank" 或 target="new" 新开窗口浏览。
target="_parent"
target="_self" 在目前的窗口中显示。
target="_top" 把框架去掉显示
示例1
本例练习新开窗口显示连接内容,同时注意连接不同文件夹的文件时,目标路径的写法;
<html>
<head><title>超连接属性href</title></head>
<body>
<font color="#ff0000">连接各种网站示例</font><br>
<a href="http://bbs.cnlsj.com/" target="_blank" >中国老三届论坛首页</a><br>
<a href="../1href/1网站连接.html" _fcksavedurl=""../1href/1网站连接.html"" _fcksavedurl=""../1href/1网站连接.html"" target="_blank" >连接到本地文件"1网站连接"</a><br>
</body>
</html>
三 E-mail
E-mail链接使用mailto协议，创建发送电子邮件的链接,格式如下：
<a href="mailt收件人的邮箱地址"> ... </a>
一旦点击了这个链接，将自动启动电子邮件管理软件的写信功能，并把邮件地址加在收信人的地址栏。
示例
<a href="mailtzh@126.com">发送邮件</a>
四 title
在超链接中使用title属性，可以加上链接的说明，当鼠标滑过时，会自动弹出所加的说明文本;
五 name
name属性可以指定链接点的名称,常用于直接链接到页面的某一部分内容，具体做法是:选定一块文本，用name参数为其命名，以备链接所用。“href”参数中的链接点名称必须与其一致，并在前面加上“#”
1为被链接的部分做一个记号,使用name属性为该记号起一个名称,<a name=记号名称"></a>
2使用href属性定义该连接,注意在链接名称前加#号。
<A href="文件名＃记号名称">链接文字</A>
如果是在同一个文件内跳转，文件名可以省略。
示例
<html>
<head>
<title>文本内的超链接</title>
</head>
<body>
<center>
<h1>课程表</h1>
<a href="#n1" title="滑过弹出的字">flash脚本课</a>
<a href="#n2" title="滑过弹出的字">flash实例课</a>
<a href="#n3" title="滑过弹出的字">flash基础课</a>
<a href="#n4" title="滑过弹出的字">flash提高课</a>
<hr>
<p><a name="n1"><b>flash脚本课</b></a></p>
<p>1月1日20.00</p>
<p>1月2日20.00</p>
<p>1月3日20.00</p>
<p>1月4日20.00</p>
<p>1月5日20.00</p>
<hr>
<p><a name="n2"><b>flash实例课</b></a></p>
<p>1月6日20.00</p>
<p>1月7日20.00</p>
<p>1月8日20.00</p>
<p>1月9日20.00</p>
<p>1月10日20.00</p>
<hr>
<p><a name="n3"><b>flash基础课</b></a></p>
<p>1月11日20.00</p>
<p>1月12日20.00</p>
<p>1月13日20.00</p>
<p>1月14日20.00</p>
<p>1月15日20.00</p>
<hr>
<p><a name="n4"><b>flash提高课</b></a></p>
<p>1月16日20.00</p>
<p>1月17日20.00</p>
<p>1月18日20.00</p>
<p>1月19日20.00</p>
<p>1月20日20.00</p>
</body>
</html>
第二节 图像标记
img叫图像标记,通过img可以在html文件中添加图像,格式为:
<img>...</img>
img标记有一些属性
1 src 表示图像文件地址url
2 dynsrc 表示视频文件地址url
3 width 表示图像宽度
4 height 表示图像高度
5 align 表示图像对齐方式left,right,top,bottom,middle
6 alt 表示鼠标滑过时弹出内容
7 border 图像边框粗细,
8 controls 设置视频能否使用
9 start 设置视频播放方式,默认打开就播放,mouseover为鼠标移过播放;
10 loop 设置视频播放次数
11 vspace 表示图像上下空白区
12 hspacp 表示图像左右空白区
示例1-滑过弹出
<img src="小狗.gif" alt="这是小狗">小狗</img>
示例2-图像边框粗
<html>
<body>
<img src="小狗.gif" border=5>边框border</img>
</body>
</html>
示例3-顶对齐
<html>
<body>
<img src="小狗.gif" border=2 align=top> 顶对齐align=top </img>
</body>
</html>
示例4-底对齐
<html>
<body>
<img src="小狗.gif" border=2 align=bottom> 底对齐align=bottom </img>
</body>
</html>
示例5-右对齐
<html>
<body>
<img src="小狗.gif" border=2 align=right > 右对齐align=right </img>
</body>
</html>
示例6-空白区
<html>
<body>
<img src="小狗.gif" border=2 vspace=100 >上下空白区vspace=100 </img>
</body>
</html>
示例7-视频连接
<html>
<body>
<img dynsrc="旋转的球.avi">视频连接dynsrc</img>
</body>
</html>
示例8-视频播放次数
<html>
<body>
<img dynsrc="旋转的球.avi" loop=3 >播放次数loop</img>
</body>
</html>
示例9-鼠标移过
<html>
<body>
<img dynsrc="旋转的球.avi" loop=100 start=mouseover>
鼠标滑过播放
</img>
</body>
</html>
示例10-练习题
图像连接
<html>
<body><center>
<font face="华文行楷" size=6 color="#ff0000">
点击小图像"小狗"进行超文本连接
</font><br>
<img src="小狗.gif" border=1></img>
<a href="视频连接.html"><img src="小狗.gif" border=1 alt="视频连接" width=20 height=20></img></a>
</center>
</body>
</html>
视频连接
<html>
<body><center>
<font face="华文行楷" size=6 color="#ff0000">
鼠标在图像上滑过就会播放
</font><br>
<img dynsrc="旋转的球.avi" start=mouseover loop=5></img>
<a href="图像连接.html"><font="华文行楷" size=4></font>返回</a>
</center>
</body>
</html>
第三节 声音标记
bgsound为声音标记,用于加载背景音乐;这个标记是单标记,只有开始,没有结束;
<bgsound>
属性:
src="url"
autostart是否在音乐档传完之後,就自动播放音乐。true 是，false 否 ;
loop=3循环播放3次;
示例
<html>
<body>
<font face="字体2" size=6 color="#ff0000">
声音标记bgsound加载背景音乐演示
</font>
<bgsound src="雷.mp3" loop=3>
</body>
</html>
第四节 多媒体
embed称为多媒体标记,和声音标记bgsound一样只有开始,没有结束,是单标记;应用格式为:
<embed src="your.mid" autostart="true" loop="true" hidden="true">
属性:
src="url" 设定 midi 档案及路径，可以是相对或绝对。
hiden 隐藏控制面板，true 为是，
starttim 指定开始播放的时间,例如:starttim=00:20为20秒后播放;前面00定义分;
volume 指定音量,0-100,默认则为使用者系统本身之设定。
width 指定控制面板宽度
height 指定控制面板高度
align 指定控制面板对齐方式,top、bottom、center、baseline、 left、right、 texttop、middle、absmiddle、absbottom
controls设置控制面板外观,如下:
console 一般正常的面板
smallconsole 较小的面板
playbutton 只显示播放按钮
pausecutton 只显示暂停按钮
stopbutton 只显示停止按钮
volumelever 只显示音量调整钮
<html>
<body>
<font face="字体2" size=6 color="#ff0000">
多媒体embed
</font>
<embed src="xx.wav" >
</body>
</html>
第六章 滚动字幕
marquee为滚动字幕标记,应用格式为:
<marquee>...</marquee>
属性:
align 指定对齐方式top,middle,bottom
behavior指定动画的运动属性;
scroll单向运动,
slide如幻灯片,一格格的，效果是文字一接触左边就停止。
alternate左右往返运动
direction 设定文字的卷动方向,left表示向左,right表示向右
bgcolor="#0000FF" 设定文字卷动范围的背景颜色。
loop设定文字卷动次数，其值可以是正整数或 infinite表示无限次。
height="30" 设定字幕高度
width="150" 设定字幕宽度
scrollamount="30" 指定每次移动的距离,距离越大速度越快
scrolldelay="500" 文字卷动的停顿时间，单位是毫秒。时间越短滚动越快;
hspac 指定字幕左右空白区的大小
vspac 指定字幕上下空白区的大小
示例1：
<html>
<body>
<font face="字体2" size=6 color="#ff0000">
滚动字幕宽度设置
</font><br>
<marquee width=250>滚动字幕</marquee>
</body>
</html>
示例2：
<html>
<body>
<font face="字体2" size=6 color="#ff0000">
滚动字幕左右往返运动设置
</font><br>
<marquee behavior=alternate>左右往返运动</marquee>
</body>
</html>
示例3
<html>
<body>
<font face="字体2" size=6 color="#ff0000">
滚动字幕接触左边停止
</font><br>
<marquee behavior=slide>文字一接触左边就停止</marquee>
</body>
</html>
示例4
<html>
<body>
<font face="字体2" size=6 color="#ff0000">
滚动字幕移动速度
</font><br>
<marquee scrolldelay=50>滚动字幕移动速度</marquee>
</body>
</html>
示例5
<html>
<body>
<font face="字体2" size=6 color="#ff0000">
滚动字幕移动距离
</font><br>
<marquee scrollamount="3" >滚动字幕移动距离</marquee>
</body>
</html>
第七章 框架
所谓框架指的是将一个较大的页面分割成几个较小的窗体,页面用frameset表示,里面的较小窗体用frame表示,frameset中放入多少个frame就会分成多少个小窗体,每个小窗体都拥有自己的url,在一个html文件中如果使用了框架结构,就不能再使用body了;其使用格式为:
<html>
<head>
<title>..</title>
</head>
<frameset>
<frame>
<frame>
<frame>
.......
</frameset>
</html>
1 框架集
frameset称框架集,它不能和body标记同时存在,它有如下属性:
border设置边框粗细,默认是5象素,如果设置小于5,分割线就不可见了
bordercolor设置边框颜色
frameborder 指定是否显示边框
cols 用"象素数" 和 "%"分割左右窗口,"*"表示剩余部分
rows 用"象素数" 和 "%"分割上下窗口,"*"表示剩余部分
2 框架
框架frame标记放在框架集frameset中,不能单独出现,每个frame表示一个单个框架,其常用属性有:
src指示加载的url
border设置边框粗细
bordercolor设置边框颜色
frameborder指示是否要边框,1显示边框，0不显示（可以是 yes 或 no）
name指示框架名称,是连结标记的 target所要得参数
noresiae指示不能调整窗口的大小,省略此项时就可调整,
scorlling指示是否要滚动条,auto根据需要自动出现,Yes有,No无
marginwidth设置左右边距
marginheight设置上下边距;
width="100" height="100" 框窗的宽及高
align可选值为 left, right, top, middle, bottom
示例1-分割左右
在页面frameset中有三个窗体frame,三个窗体成横向cols排列,各占页面宽度的20%,剩余的是空白,所以语句rows="20%,20%,20%,*"将把页面分成纵向的四个部分;
<frameset rows="20%,20%,20%,*">
<frame src="A.html">
<frame src="B.html">
<frame src="C.html">
</frameset>
示例2-上下分割
本例使分割线为黄色;
<frameset rows="10%,*,10%" bordercolor="yellow" >
<frame src="A.html" >
<frame src="B.html" >
<frame src="C.html" >
</frameset>
示例3
<frameset rows="80,*">
<frame name="top" src="a.html">
<frame name="bottom" src="b.html">
</frameset>
示例4
<frameset rows="80,*,80">
<frame name="top" src="a.html">
<frame name="middle" src="b.html">
<frame name="bottom" src="c.html">
</frameset>
示例5
frameset中可以包含frameset,被包含的frameset里面不论有多少frame,都要当作一个元素来处理,本例中第一个frameset决定首先左右分割,它里面有两个元素,第一个是被包含的
frameset(有两个元素a,b被纵向分割),第二个元素是c,所以页面首先分成左右两部分,左面的部分再分成上下两部分;
<frameset cols="150,*">
<frameset rows="80,*">
<frame src="a.html">
<frame src="b.html">
</frameset>
<frame src="c.html">
</frameset>
示例6
<frameset rows="150,*">
<frameset cols="80,*">
<frame src="a.html">
<frame src="b.html">
</frameset>
<frame src="c.html">
</frameset>
示例7
<frameset rows="80,*">
<frame src="a.html">
<frameset cols="150,*">
<frame src="b.html">
<frame src="c.html">
</frameset>
</frameset>
示例8
<frameset cols="150,*">
<frame src="a.html">
<frameset rows="80,*">
<frame src="b.html">
<frame src="c.html">
</frameset>
</frameset>
二 浮动框架
iframe称浮动框架,它的格式和属性与frame是一样的,它的作用是在一页网页中插入一个框窗以显示另一个文件。
示例9
<html>
<center>
<iframe src="c.html" name="ss" align="middle" width="300" height="100" marginwidth="1" marginheight="1" frameborder="1" scrolling="Yes">
</iframe>
</html>
第八章 表单与控件
一 什么是表单
表单是用户与服务器管理员或作者进行信息交流的感应器,主要负责客户数据的采集功能, 用户可以通过表单将自己的姓名,email,留言等数据,传到服务器的接口cgi上,再由cgi传到服务器,如果服务器不支持cgi,也可以用电子邮件传递给作者;
二 表单的基本组成
表单是由窗体和控件组成的,一个表单一般的应该包含:指导用户填写的说明性文字,用户填写的表格,提交和复位按钮等;这些表格,按钮等叫做控件,所以说表单是一个容器,因为它能够容纳各种各样的控件;
要构造一个表单必需使用表单标记form,其格式为<form>...</form>,然后就是在开始标记<form>和结束标记</form>之间,使用写入标记input把各种控件标记放进去;
三 表单标记-form
格式: <form>...</form>
属性:
1 action＝"url"
action指定接收这个表单数据的文件的地址,这个地址一般是服务器的URL或者电子邮 件地址email,如果这个属性是空值则当前文档的url将被使用;一般来说,处理用户反馈信息的程序是放在Web服务器的cgi-bin目录下。
2 method=get/post
method：指定与服务器交换数据的方法,可选get和post;当method=get时表示交换少量信息,主要用于从服务器获取信息,在向服务器传送信息时,信息长度不能超过255个字符,即小于1k的资料,当method=post时则表示要传递大量信息,数据将按照Http传输协议中的post传输方式传送到服务器,电子邮件接收一般采用这种方式。
3 name="myform" 用于设定表单的名称
4 target="blank"
target:指定目标窗口,可选当前窗口self,父级窗口parent,顶层窗口top,空白窗口
blank;
5 onsubmit 指定需要执行的函数
四 写入标记-input
写入标记input用来在表单标记form中写入控件,该标记是单标记,没有结束标记,它的属性为:
1 name 定义控件名称
2 type 定义控件类型,即指明使用什么控件,如type="button"指明使用普通按钮控件;
3 align 对齐方式,可取top, bottom, middl;
4 maxlength 在单行文本的时候允许输入的最大字符数;
5 size 控件的宽度
6 src 插入图像的url
7 event 指定激发的事件
8 value 用于设定输入默认值，即如果用户不输入的话，就采用此默认值；
五 内部控件
1 button 普通按钮,当这个按钮被点击时,就会调用属性onclick指定的函数;在使用这个按钮时,一般配合使用value指定在它上面显示的文字,用onclick指定一个函数,一般为java的一个事件;例如:
示例1-mybutton:
<html >
<form action＝"url" method=post name="myform" >
<input type="button" value="My_button" onClick="my_function"><br>
<input type="button" value="You_button" onClick="you_function">
</form>
</html>
示例解读:
首先使用一对表单标记form定义一个窗体,然后通过写入标记input在窗体form中定义要写入的控件类型type,例如:type="button"
2 submit 提交按钮,当这个按钮被点击时,就会连接到表单form属性action指定的url地址;
然后浏览器就会将表单的输入信息传送给服务器。
3 reset重置按钮,单击该按钮便清除表单中的数据,可以从新输入;
示例2-submit
<html >
<form name=theForm action=reg.asp method=post>
<input type="submit" value="注 册" name="Submit1">
<input type="reset" value="清 除" name="Submit2">
</form>
</html>
4 checkbox 和 radio 前者用于多选,后者用于单选;他们有一下属性:
(1) name 定义控件名称
(2) value 定义控件的值
(3) checked 设定控件初始状态是被选中的
(4) onclick 定义控件被选中时要执行的函数
(5) onfocus 定义控件为焦点时要执行的函数
复选项checkbox表示:用户可以同时选中表单的一个或几个选项作为输入信息,单选项radio表示:用户只能选择表单中所有选项的一个做为输入信息,所以当为单选项时,所有按钮的name属性必需相同,如:都设置为my_radio;
示例3-radio
<html >
<form name=theForm action=reg.asp method=post>
<input type=radio name="ss" value="Submit1" >
<input type=radio name="ss" value="Submit2" >
<input type=radio name="ss" value="Submit3" >
<input type=radio name="ss" value="Submit4" >
</form>
</html>
5 text 单行文本控件,有下列属性:
(1)name 定义控件名称
(2)value 指定控件初始值,该值就是浏览器被打开时在文本框中的内容
(3)size 指定控件宽度,表示该文本输入框所能显示的最大字符数。
(4)maxlenth 表示该文本输入框允许用户输入的最大字符数。
(5)onchang 当文本改变时要执行的函数
(6)onselect 当控件被选中时要执行的函数
(7)onfocus 当文本接受焦点时要执行的函数
6 password 口令控件,表示该输入项的输入信息是密码,在文本输入框中显示"*",属性有:
(1)name 定义控件名称
(2)value 指定控件初始值,该值就是浏览器被打开时在文本框中的内容
(3)size 指定控件宽度,表示该文本输入框所能显示的最大字符数。
(4)maxlenth 表示该文本输入框允许用户输入的最大字符数。
7 select 选择性列表控件,它有如下属性:
(1)name控件名称,
(2)size控件宽度,
(3)multiple指定为多项选择,
(4)onchange指定控件改变时要调用的函数
(5)onfocus当控件接受焦点时要执行的函数
(6)onblur当控件失去焦点时要执行的函数
8 textarea：多行文本控件,可以多行输入;
(1)onchange指定控件改变时要调用的函数
(2)onfocus当控件接受焦点时要执行的函数
(3)onblur当控件失去焦点时要执行的函数
(4)onselect当控件内容被选中时要执行的函数
9 hidden 隐藏控件,用于传递数据,对用户来说是不可见的;属性有:
name 控件名称,
value 控件默认值
hidden隐藏控件的默认值会随表单一起发送给服务器,例如:
<input type="Hidden" name="ss" value="688">
控件的名称设置为ss,设置其数据为"688",当表单发送给服务器后,服务器就可以根据
hidden的名称ss,读取value的值688;
示例4
<html>
<head>
<title>form and input</title>
</head>
<body>
<form action="forminput2.htm" method="post" name="forminput1"><br>
请选择你喜欢的课程<br>
flash脚本课
<input type="checkbox" name=checkox1><br>
flash基础课
<input type="checkbox" name=checkox2><br>
flash实例课
<input type="checkbox" name=checkox3><br>
flash提高课
<input type="checkbox" name=checkox4><br>
请选择你<font color="#ff0000" size="5">最</font>喜欢的课程<br>
flash脚本课
<input type="radio" name=radio><br>
flash基础课
<input type="radio" name=radio><br>
flash实例课
<input type="radio" name=radio><br>
flash提高课
<input type="radio" name=radio><br>
<font color="#ff3300" size="5" face="华文行楷">输入帐号</font>
<input name=user size=20><br>
<font color="#ff3300" size="5" face="华文行楷">输入密码</font>
<input type="password" name=password size=20><br>
<input type="submit" value="提交按钮">
<input type="reset" value="清除按钮">
</form>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
