全写： HyperText Mark-up Language
译名： 超文件注标式语言（译名之
简释：一种为普通文件中某些字句加上标示的语言，其目的在于运用标记（tag）使文件达到预期的显示效果
注意事项
1.< > 是所有标记的开始和结束
2.标记之间可以嵌套<h1><center>标题</h1></center>
3.在源代码中不区分大小写 <head> <Head> <HEAD> 作用相同
4.在标记中可以放置各种属性 <h1 align=center>
5.回车键和空格键在源代码中不起作用
6.注释 <!-- -->
1.页面的头部标记
<head> javascript css一般都定义在<head>中
一般说来头部定义的内容不会在网页上显示,而是通过另外的方式起作用 如:<title>
头部标记
标记 描述
<base> 当前文档的URL全称(基底网址)
<title> 设定显示在IE左上方的标题内容
<meta> 有关文档本身的元信息 例如：用于查询的关键字
<style> 设定CSS层叠样式表的内容
<link> 设定外部文件的连接
<script> 设定页面中程序脚本的内容
<title> 网页的标题
作用： 在浏览者保存该页面后变为保存后网页的文件名
可以添加进收藏夹中时显示该页面的名字
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
</HEAD>
<BODY>
<H3>我的第一个 HTML 文档</H3>
</BODY>
</HTML>
<base>基底网址标记 :一般用来设定IE中文件的绝对路径
一篇文档中的 <base>基底网址标记不能多于一个,必 须放于头部并且应该在任何包含URL地址的语句之前
<base href="url" target="window_name">
href属性指定了文档的基础URL地址
target定义的是打开页面的窗口
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<BASE href="http://www.163.com" target="_self">
</HEAD>
<BODY>
<H3>我的第一个 HTML 文档</H3>
<a href=new.html>新闻</a>
</BODY>
</HTML> 将鼠标放置到连接的上方
<meta>元信息标记 :功能定义页面中的信息, 这些信息不会在页面中显示
只会在源代码中显示
在HTML中可以包括任意数量的<meta>元信息标记
属性
http-equiv 生成一个HTTP标题域，它的属性与另一个属性相同
如：http-equiv=expires,实际取值由content确定
name 如果元数据是以关键字/取值的形式出现的
name表示关键字
content 关键字/取值的内容
定义编辑工具
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<meta name=generator content="notepad">
</HEAD>
<BODY>
<H3>我的第一个 HTML 文档</H3>
<a href=new.html>新闻</a>
</BODY>
</HTML> 以记事本做为网页的编辑工具
generator:为编辑器定义
content:定义编辑器的名称
设定关键字 关键字是为搜索引擎提供的 不宜过多
语法 <meta name="keywords" content="value">
keywords:定义关键字
content：定义关键字的内容
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<meta name=keywords content="mp3, mtv,音乐,摇滚">
</HEAD>
<BODY>
</BODY>
</HTML>
设定描述 是为搜索引擎提供的
语法 <meta name="discription" content="value">
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<meta name="discription" content="HTML语言">
</HEAD>
<BODY>
</BODY>
</HTML>
设定作者
在页面的源代码中，显示页面制作者的姓名及个人信息
语法 <meta name="author" content="value">
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<meta name="author" content="李四">
</HEAD>
<BODY>
</BODY>
</HTML>
设定字符集
gb2312 简体中文
big5 繁体中文
iso8850-1 英文
语法 <meta http-equiv="content-type"
content="text/html;charset=value">
http-equiv 传送HTTP通信协议的表头
content 定义页面的内码 CHARSET中写下内码的语系
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<meta http-equiv="content-type"
content="text/html;charset=gb2312">
</HEAD>
<BODY>
</BODY>
</HTML>
设定自动刷新 就是每隔几秒后刷新页面的内容
比如图文直播
语法 <meta http-equiv="refresh" content="value">
http-equiv 传送HTTP通信协议的表头
refresh 代表刷新
content 中写下刷新间隔的秒数
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<meta http-equiv="refresh"
content="3">
</HEAD>
<BODY>
<p>3秒刷新一次</p>
</BODY>
</HTML>
设定自动跳转
如可先在一个页面上显示欢迎信息，经过一段时间
自动跳转到指定的网页上
语法
<meta http-equiv="refresh" content="value" url="url_value">
http-equiv 传送HTTP通信协议的表头
refresh 代表刷新
content 中写下刷新间隔的秒数后跳转到文件地址
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<meta http-equiv="refresh"
content="5;
url=new.html">
</HEAD>
<BODY>
<h2><center>请稍等片刻......</center><h2>
<p>本页面5秒后跳转到新的地址</p>
</BODY>
</HTML>
设定转场效果
转场效果即网页的过渡，是指当进入或离开网站时
页面具有不同的切换效果
语法
<meta http-equiv=""
content="revealtrans(duration=value,transition=number)">
event设定页面进入或退出的时候产生切换效果
page-enter 表示进入网页时有网页的过渡效果
page-exit 表示退出网页时有网页的过渡效果
duration表示网页过渡效果的延续时间，单位为秒
transition 写下过渡效果的方式编号
效果 效果编号
盒状收缩 0
盒状展开 1
圆形收缩 2
圆形展开 3
向上擦除 4
向下擦除 5
向左擦除 6
向右擦除 7
垂直百页窗 8
水平百页窗 9
横向棋盘式 10
纵向棋盘式 11
溶解 12
左右向中部收缩 13
中部向左右收缩 14
上下向中部收缩 15
中部向上下展开 16
阶梯状向左下展开 17
阶梯状向左上展开 18
阶梯状向右下展开 19
阶梯状向右上展开 20
随机水平线 21
随机垂直线 22
随机 23
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<BODY bgcolor=#99ccff>
<center>
<h2><center>页面的过渡效果</h2>
<p><img src="new.gif" width=400 height=200></img></p>
<a href="new.html">进入网页</a><br>
<a href="old.html">退出网页</a><br>
</center>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<meta http-equiv="page-enter"
content="revealtrans(duration=3,transition=10)">
</head>
<BODY bgcolor=#99ccff>
<center>
<h2>显示页面的进入效果</h2>
<p><img src="我LOVE你.gif" width=400 height=200></img></p>
<a href="test1.html">返回</a>
</center>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<meta http-equiv="page-exit"
content="revealtrans(duration=5,transition=8)">
</head>
<BODY bgcolor=#99ccff>
<center>
<h2>显示页面的退出效果</h2>
<p><img src="快还钱.gif" width=400 height=200></img></p>
<a href="test1.html">返回</a>
</center>
</BODY>
</HTML>
2.页面的主体标记
页面的主体位于<body></body>之间
<body>元素的属性
属性 描述
text 设定页面文字的颜色
bgcolor 设定页面背景的颜色
background 设定页面背景的图象
bgproperties 设定页面背景的图象为固定，不随页面的滚动而滚动
link 设定页面默认的连接颜色
alink 设定鼠标单击时的连接颜色
vlink 设定访问过的连接颜色
topMargin 设定页面的上边距
leftMargin 设定页面的左边距
text 设定页面文字的颜色
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<BODY text=#0000ff>
<center>
<h2>设定页面的文字颜色为蓝色</h2>
</center>
</BODY>
</HTML>
bgcolor 设定页面背景的颜色
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<BODY text=#ffffff bgcolor="#336699">
<center>
<h2>设定页面的文字颜色为白色 背景颜色为深蓝色</h2>
</center>
</BODY>
</HTML>
background 设定页面背景的图象
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<BODY text=#336699 background="2008.jpg">
<center>
<h2>设定页面的文字颜色为深蓝色 背景图象为2008.jpg</h2>
</center>
</BODY>
</HTML>
bgproperties 设定页面背景的图象为固定，不随页面的滚动而滚动
bgproperties＝fixed 设定为固定的效果
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<BODY text=#336699 background="2008.jpg" bgproperties＝fixed>
<center>
<h2>设定页面的文字颜色为深蓝色 背景图象为2008.jpg</h2>
</center>
</BODY>
</HTML>
连接文字颜色的属性 默认连接文字的颜色为蓝色 访问过后的颜色是紫红色
这样有助于用户判断是否点击过该连接
在HTML中可以修改的连接状态共有3种
link 设定页面默认的连接颜色
alink 设定鼠标单击时的连接颜色
vlink 设定访问过的连接颜色
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<BODY text=#ffffff bgcolor="#336699"
link="red" alink="#00ff00" vlink="#cccccc" >
<center>
<h2>设定不同的连接颜色</h2><br>
<a href=new.html>连接</a>
<a href=old.html>连接</a>
</center>
</BODY>
</HTML>
topMargin 设定页面的上边距 单位为像素
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<BODY topMargin=30>
<p>设定页面的上边距为30像素</p>
</BODY>
</HTML>
leftMargin 设定页面的左边距
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<BODY leftMargin=30>
<p>设定页面的左边距为30像素</p>
</BODY>
</HTML>
3.文字与段落
空格符号
<HTML>
<HEAD>
<TITLE>插入声音</TITLE>
</HEAD>
<BODY>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>插 入 声 音</B></FONT></H1>
<HR>
</BODY>
</HTML>
特殊符号 " "
& &
< <
> >
<HTML>
<HEAD>
<TITLE>插入声音</TITLE>
</HEAD>
<BODY>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>"音乐"</B></FONT></H1>
<HR>
</BODY>
</HTML>
<!-- --> 注释语句 如 <!-- HTML语言 --> 该代码不会在IE中显示
<!-- HTML语言 -->
<HTML>
<HEAD>
<TITLE>插入声音</TITLE>
</HEAD>
<BODY>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>"音乐"</B></FONT></H1>
<HR>
</BODY>
</HTML>
<h>标题字标记 <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>
字体依次逐级递减
<HTML>
<HEAD>
<TITLE>HTML 简介</TITLE>
</HEAD>
<BODY>
<H1>HTML 简介</H1>
<H2>HTML 简介</H2>
<H3>HTML 简介</H3>
<H4>HTML 简介</H4>
<H5>HTML 简介</H5>
<H6>HTML 简介</H6>
</BODY>
</HTML>
对齐属性 align left(默认) center right
<HTML>
<HEAD>
<TITLE>HTML 简介</TITLE>
</HEAD>
<BODY>
<H1 align=center>HTML 简介</H1>
<H2 align=right>HTML 简介</H2>
<H3 algin=left>HTML 简介</H3>
</body>
</HTML>
<b> <strong> 粗体标记
<b>HTML</b> 简介 <strong>简介</strong>
<i> <em> <cite> 斜体标记
<i>你好</i>欢迎你 <em>来听我的</em>HTML<cite>课程</cite>
<sup>上标记 <sub>下标记
<HTML>
<HEAD>
<TITLE>字符级标记示例</TITLE>
</HEAD>
<BODY>
<P ALIGN="center"><B>字符级标记示例</B></P>
<P>圆的面积=pi*r<SUP>2</SUP></P>
<P>水的化学符号：H<SUB>2</SUB>O</P>
<P><EM>这是一种很有趣的体验</EM></P>
</BODY>
</HTML>
<big>大字号标记 将当前的文字加大一级字号显示
<HTML>
<HEAD>
<TITLE>字符级标记示例</TITLE>
</HEAD>
<BODY>
这是一种很有趣的体验<br>
<big>这是一种很有趣的体验</big>
</BODY>
</HTML>
<small>小字号标记 将当前的文字缩小一级字号显示
<u>下划线标记
<HTML>
<HEAD>
<TITLE>字符级标记示例</TITLE>
</HEAD>
<BODY>
<u>这是一种很有趣的体验</u>
</BODY>
</HTML>
<s> <strike> 删除线标记
<HTML>
<HEAD>
<TITLE>字符级标记示例</TITLE>
</HEAD>
<BODY>
<s>这是一种很有趣的体验</s><br>
<strike>这是一种很有趣的体验</strike>
</BODY>
</HTML>
<address>地址文字标记 :主要用语显示E_MAIL 地址等文字内容 主要用于英文字体中显示
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<H3>我的第一个 HTML 文档</H3>
<P>这将是一种很有趣的体验
<H2>使用另一个标题</H2>
<P> 另一个段落元素
<ADDRESS>
<P><A href=“http://www.163.com/”>单击此处访问北京网易有限公司的主页</A> </ADDRESS>
</BODY>
</HTML>
<tt>打字机标记 该标记用来创建出打字机风格的字体,文字间是以等宽来显示的
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<H3>我的第一个 HTML 文档</H3>
<P>这将是一种很有趣的体验
<H2>使用另一个标题</H2>
<P> 另一个段落元素
<ADDRESS>
<P><A href=“http://www.163.com/”>单击此处访问北京网易有限公司的主页</A> </ADDRESS>
<tt>另一个段落元素</tt>
</BODY>
</HTML>
<code> <samp> 等宽文字标记 使用等宽字体来显示文字的内容 主要用于英文字体中显示
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<p><code>welcome you</code></p>
<p><samp>welcome you</samp></p>
</BODY>
</HTML>
<kbd> 在标记间的文字就是键盘输入命令的文字效果
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<p><kbd>welcome you</kbd></p>
</BODY>
</HTML>
<var> 可以显示变量的文字效果,使用斜体
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<p><var>welcome you</var></p>
</BODY>
</HTML>
<font>字体标记
属性 字体face 字号size (-7---+7) 默认是3 颜色color
控制面板--->字体 Windows系统中的字体都可以显示在IE中
<HTML>
<HEAD>
<TITLE>欢迎使用HTML</TITLE>
</HEAD>
<BODY>
<H3><FONT SIZE = 3 COLOR = HOTPINK FACE = "隶书">我的第一个HTML文档 </FONT></H3>
<P>这<FONT COLOR = BLUE SIZE = 6>将会</FONT>是一种很有趣的体验
</BODY>
</HTML>
<basefont>基字标记
<HTML>
<HEAD>
<TITLE>欢迎使用HTML</TITLE>
</HEAD>
<BODY>
<BASEFONT SIZE = 3 COLOR = HOTPINK FACE = "隶书">我的第一个HTML文档 </BASEFONT>
<P>这<FONT COLOR = BLUE SIZE =+1>将会</FONT>是一种很有趣的体验
<P>这<FONT COLOR = BLUE SIZE =-1>将会</FONT>是一种很有趣的体验
</BODY>
</HTML>
段落标记
<p>段落标记 段落:就是一段格式上统一的文本 可以说段落就是带有硬回车的组合
属性 align(left center right)
<HTML>
<HEAD>
<TITLE>欢迎使用HTML</TITLE>
</HEAD>
<BODY>
<P align=left>是一种很有趣的体验</p>
<P align=center>是一种很有趣的体验</p>
<P align=right>是一种很有趣的体验</p>
</BODY>
</HTML>
<br> 换行标记 <nobr>不换行标记
<HTML>
<HEAD>
<TITLE>欢迎使用HTML</TITLE>
</HEAD>
<BODY>
<nobr>欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML
</nobr>
</BODY>
</HTML>
<pre>预格式化标记:就是保留文字在源代码中的格式,页面的显示效果与在源代码的格式完全一致
<HTML>
<HEAD>
<TITLE>学习HTML</TITLE>
</HEAD>
<BODY>
<PRE>
汉普蒂·邓普蒂坐在墙上
汉普蒂·邓普蒂摔了一大跤
国王所有的马
和所有的人
也无法再把汉普蒂·邓普蒂拼起来
</PRE>
</BODY>
</HTML>
<center>居中标记
<HTML>
<HEAD>
<TITLE>学习HTML</TITLE>
</HEAD>
<BODY> <center>
<PRE>
汉普蒂·邓普蒂坐在墙上
汉普蒂·邓普蒂摔了一大跤
国王所有的马
和所有的人
也无法再把汉普蒂·邓普蒂拼起来
</PRE> </center>
</BODY>
</HTML>
<blockquote>缩排标记 :文字空2个字
<HTML>
<HEAD>
<TITLE>学习HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用于以文本块的形式设置内容格式。
<BLOCKQUOTE>
汉普蒂·邓普蒂坐在墙上
汉普蒂·邓普蒂摔了一大跤
国王所有的马
和所有的人
也无法再把汉普蒂·邓普蒂拼起来
</BLOCKQUOTE>
<P>请注意，上述内容显示为一个文本块。
</BODY>
</HTML>
<hr>水平线标记 用语段落与段落之间的分割
<HTML>
<HEAD>
<TITLE>学习HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用于以文本块的形式设置内容格式。
<hr>
<BLOCKQUOTE>
汉普蒂·邓普蒂坐在墙上
汉普蒂·邓普蒂摔了一大跤
国王所有的马
和所有的人
也无法再把汉普蒂·邓普蒂拼起来
</BLOCKQUOTE>
<hr>
<P>请注意，上述内容显示为一个文本块。
</BODY>
</HTML>
水平线的宽度属性 width 默认是 100%
<HTML>
<HEAD>
<TITLE>学习HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用于以文本块的形式设置内容格式。
<hr width=300>
<BLOCKQUOTE>
汉普蒂·邓普蒂坐在墙上
汉普蒂·邓普蒂摔了一大跤
国王所有的马
和所有的人
也无法再把汉普蒂·邓普蒂拼起来
</BLOCKQUOTE>
<hr width=80%>
<P>请注意，上述内容显示为一个文本块。
</BODY>
</HTML>
<hr width=300> :表示绝对宽度300像素
<hr width=80%> :水平线的相对宽度80%
水平线的高度属性 size 只能用绝对像素来定义
<HTML>
<HEAD>
<TITLE>学习HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用于以文本块的形式设置内容格式。
<hr width=300 size=1>
<BLOCKQUOTE>
汉普蒂·邓普蒂坐在墙上
汉普蒂·邓普蒂摔了一大跤
国王所有的马
和所有的人
也无法再把汉普蒂·邓普蒂拼起来
</BLOCKQUOTE>
<hr width=80% size=9>
<P>请注意，上述内容显示为一个文本块。
</BODY>
</HTML>
水平线去掉阴影的属性 noshade :默认是空心的立体效果
<HTML>
<HEAD>
<TITLE>学习HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用于以文本块的形式设置内容格式。
<hr width=300 size=2 noshade>
<BLOCKQUOTE>
汉普蒂·邓普蒂坐在墙上
汉普蒂·邓普蒂摔了一大跤
国王所有的马
和所有的人
也无法再把汉普蒂·邓普蒂拼起来
</BLOCKQUOTE>
<hr width=80% size=9 noshade>
<P>请注意，上述内容显示为一个文本块。
</BODY>
</HTML>
水平线颜色的属性 color
<HTML>
<HEAD>
<TITLE>学习HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用于以文本块的形式设置内容格式。
<hr width=300 size=2 noshade color=red>
<BLOCKQUOTE>
汉普蒂·邓普蒂坐在墙上
汉普蒂·邓普蒂摔了一大跤
国王所有的马
和所有的人
也无法再把汉普蒂·邓普蒂拼起来
</BLOCKQUOTE>
<hr width=80% size=9 noshade color=blue>
<P>请注意，上述内容显示为一个文本块。
</BODY>
</HTML>
水平线排列的属性 align(left center right)
<HTML>
<HEAD>
<TITLE>学习HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用于以文本块的形式设置内容格式。
<hr width=300 size=2 noshade color=red align=left>
<BLOCKQUOTE>
汉普蒂·邓普蒂坐在墙上
汉普蒂·邓普蒂摔了一大跤
国王所有的马
和所有的人
也无法再把汉普蒂·邓普蒂拼起来
</BLOCKQUOTE>
<hr width=80% size=9 noshade color=blue align=right>
<P>请注意，上述内容显示为一个文本块。
</BODY>
</HTML>
4.列表
有序列表:指的是按照数字或字母顺序排列列表项目
语法: <ol> <li> ... </ol>
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<OL>
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
</OL>
</BODY>
</HTML>
在有序列表的默认情况下,使用数字序号作为列表的开始
有序列表的类型 1 a A i I
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<OL type=I>
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
</OL>
</BODY>
</HTML>
有序列表的起始属性start
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<OL type=A start=5>
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
</OL>
</BODY>
</HTML>
<ul>无序列表标记 各个列表项之间没有顺序级别之分
<li>做为每一个项目的起始
<dir>目录列表标记 用于显示文件内容的目录大纲 通常用于设计一个压缩的较窄的列表
如 字典的索引
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<dir>
<LI>星期一</LI>
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
</dir>
</BODY>
</HTML>
<dl>定义列表标记
使用<dl>作为定义列表的声明 <dt>使用作为名词的标题 <dd>用作解释名词
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<DL>
<DT>星期日
<DD>一周的第一天
<DT>HTML
<DD>超文本标记语言
<DT>互联网
<DD>网络的网络
</DL>
</BODY>
</HTML>
<menu> 菜单列表标记
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<menu>
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
</menu>
</BODY>
</HTML>
type无序列表的类型属性 默认是黑色实心圈 disc circle square
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<menu type=circle>
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
</menu>
</BODY>
</HTML>
列表的嵌套
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<DL>
<DT><u>程序员应具备的开发知识</u><br><br>
<DD>html css javascript
<DD>struts spring hibernate
<DD>tomcat weblogic
<br><br><br>
<DT><u>程序员应具备的数据库知识</u><br><br><br><br>
<DD>sqlserver oracle
</DL>
</BODY>
</HTML>
无序列表和有序列表的嵌套
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<ul type=square>
<li><u>J2EE常见的框架技术</u>
<ol type=I>
<li> struts
<li> spring
<li> hibernate
</ol>
<li><u>J2EE常见的服务器技术</u>
<ol type=I>
<li> sqlserver
<li> oracle
<li> mysql
</ol>
<li><u>Java网页常用的技术</u>
<ol type=I>
<li> jsp
<li> servlet
<li> javabean
</ol>
</ul>
</body>
</HTML>
5.超连接
URL:urource Locator 通用资源标识符 指每个网站的独立地址
<a>连接标记
属性 href:指定连接地址
Name:给连接命名
Title:给连接提示文字
Target:指定连接的目的窗口
内部链接 :到同一文档内或同一网站内的其他部分的链接
外部链接 :到其他网站或服务器上的页面的链接。
绝对路径:为文件提供的完全路径 如:http://www.sina.com
当连接到其它网站的时候必须使用绝对连接
相对路径: 适合网站的内部连接
相对连接的使用方法:
如果连接到同一目录下,则只需输入要连接的文档名称
如果连接到下一级目录下的文件中,先输入目录名,然后/ 再输入文件名
如果连接到上一级目录的文件,先输入../ 再输入目录名,文件名
根路径: 适合网站的内部连接 不建议使用 以/开始 再输入目录名,文件名
/root/index.html
设定连接的目标窗口
target属性 属性值 _parent 在上一级窗口中打开
_blank 在新窗口中打开
_self 在同一窗口中打开
_top 在IE 的整个窗口中打开 忽略任何框架
书签
链接到同一文档的各个部分 test1.html
<HTML>
<HEAD><TITLE>使用链接</TITLE></HEAD>
<BODY>
<A HREF = #Internet>互联网</A><BR><BR>
<A HREF = #HTML>HTML简介</A><BR><BR>
<A HREF = #Consistency>多样化和统一性</A><BR><BR>
<A name = Internet>互联网</A><BR>
<P>互联网是网络的网络。也就是说，计算机网络可以跨越国家甚至全球的范围连接到其他网络。世界上所有的计算机都可以通过TCP/IP传输协议绑定在一起。</P>
<A name = HTML>HTML简介</A><BR>
<P>超文本标记语言是Web用来创建和识别文档的标准语言。虽然它不是标准通用标记语言 (SGML) 的子集，但与它有着某种程度上的关联。SGML是一种文档格式语言表示方法。</P>
<A name = Consistency>多样性和统一性</A><BR>
<P>万事万物都离不开多样性和统一性这样一条基本准则。也就是说，所有的事物都可以融合成一个整体，同时，又保持自己独特的与众不同的一面。站点的独特性恰恰来源于它的一致性。颜色、字体、分栏布局以及其他设计元素应在站点的每个部分都保持一致。 </P>
<BR><BR><BR><BR><BR><BR>
</BODY>
</HTML>
test2.html 连接到其它页面中的书签
<h1>J2EE采用的框架技术</h1>
<a href=test1.html#Internet>互联网</a>
<a href=test1.html#HTML>HTML简介</a>
<a href=test1.html#Consistency>多样性和统一性</a>
<h1>J2EE采用的框架技术</h1>
外部连接 指跳转到当前网站的外部 需要写连接的绝对地址
url的格式
WWW http:// 进入万维网站点
Ftp ftp:// 进入文件传输服务器
News news:// 启动新闻讨论组
Telnet telnet:// 启动telnet方式
Gopher gopher:// 访问一个gopher服务器
E-mail mailto:// 启动邮件
连接到外部网站
<a href="http://www.sina.com.cn">连接到新浪</a>
发送E-MAIL 会自动打开系统自带的邮件软件如:outlook
<a href="mailto:baiyunri2005@163.com">给老师写信</a>
<a href="mailto:baiyunri2005@163.com?subject=J2EE知识
&cc=zhangsan@263.net&bcc=lisi@163.com">给老师写信</a>
subject 电子邮件主题
CC 抄送收件人
BCC 暗送收件人
连接 FTP 文件传输协议
<a href="ftp://ftp.pku.edu.cn">北京大学</a>
连接telnet
就是一台计算机连接到另一台计算机上 共享网络的硬件与软件资源
<a href="telnet://162.105.203.245:23">北京大学</a>
连接到 gopher 它是主要的信息检索工具
<a href="gopher://dosfan.lib.nic.edu/1">gopher站点</a>
连接到News新闻组
新闻组是由世界各地上千个新闻服务器组成的
它是个人向新闻服务器所张贴的邮件的集合
<a href="news://news.newsfan.net">News新闻组</a>
下载文件
<a href="女孩·足球.mp3">下载软件</a>
6.图片
<img>
src 图片的源文件
alt 图片的提示文字
width 图片的宽度
height 图片的高度
vspace 图片与文字的垂直间距
hspace 图片与文字的水平间距
border 图片的边框
algin 排列 left图片在文字的左侧
right图片在文字的右侧
top 文字位于图片的顶端
bottom文字位于图片的底端
middle文字位于图片的中部
示例:<P>
<center>
<a href=第五题.html>
<IMG ALIGN=bottom
SRC=2439.gif
alt="小孩"
height=200 width=200 border=1
vspace=30 hspace=3>
</a>底部对齐在此处定义颜色
</center></P>
7.表格
<table>...</table> 表格标记
border 属性定义边框的宽度,单位为像素
width 属性定义表格的宽度
Heigth 属性定义表格的高度
bordercolor 属性定义表格的边框颜色
bgcolor 属性定义表格的背景颜色
background 属性定义表格的背景图象
cellspacing 属性定义单元格间距,单位为像素
cellpadding 属性定义单元格内容和边框之间的距离
align 属性定义表格的水平对齐方式 center left right
bordercolorlight 属性定义表格的亮边框颜色
bordercolordark 属性定义表格的暗边框颜色
示例:<TABLE border=1 width=600 heigth=50 bordercolor=red bgcolor=yellow
background=我LOVE你.gif align=center cellspacing=10 cellpadding=25>
<caption>...</caption> 表格标题
align 属性定义表格标题的水平对齐方式 center(默认) left right
valign 属性定义表格标题的垂直对齐方式 top(默认) millde bottom
示例: <CAPTION valign=bottom align=right>创建表</CAPTION>
<th>...</th> 表格的表头(指表格的第一行,文字以居中加粗显示)
algin
valgin
bgcolor
background
bordercolor
bordercolorlight
bordercolordark
width
height
<tr>...</tr> 行标记
algin
valgin
bgcolor
background
bordercolor
bordercolorlight
bordercolordark
<td>...</td> 列标记
algin
valgin
bgcolor
background
bordercolor
bordercolorlight
bordercolordark
width
height
rowspan跨行属性 示例:<TD rowspan=3>J2EE框架</TD>
colspan跨列属性 <TD colspan=3>
8.表单 是实现动态网页的一种主要外在形式
表单的主要功能是收集信息,浏览者的信息
过程为:输入的数据提交给服务器 由服务器的相关程序进行处理
表单标记<form>
属性 表单的名字 name
表单的传送方法 method(get默认 post)
用来定义表单处理程序的位置 action
<FORM action="http://mysite.com/processform" METHOD="post">
...表单内容...
</FORM>
其中,Method属性中,Get方法时将表单内容附加在URL地址后面,所以对提交信息的长度进行了限制,最多不可以超过8192个字符,如果信息太长,将被截去,从而导致意想不到的处理结果.同时Get方法不具有保密性,不是于处理如信用卡卡号等要求保密的内容,而且补农传送非ASCII码的字符.
Post方法是将用户在表单中填写的数据包含在表单主体中,一起传送到服务器商的处理程序中,该方法没有字符的限制,它包含了ISO10646的字符集,是一种邮寄方式,在浏览器的地址栏不显示提交的信息,这中方式传送的数据是没有限制的.当不指明方式时,默认为Get方式.
<form>标记中可以包含以下四个标记
<input>表单输入标记
<select>菜单和列表标记
<option>菜单和列表项目标记
<textarea>文本域标记
<input>表单输入标记
属性 name:域的名称
Type:域的类型 text 文字域
password 密码域
file 文件域
checkbox 复选框
radio 单选框
button 普通按纽
submit 提交按纽
reset 重置按纽
Hidden 隐藏域
Image 图象域(图象提交按钮)
text 文字域
属性 name 文字域的名字
maxlength 文字域的最大输入字符数
size 文字域的宽度
value 文字域的默认值
<INPUT TYPE="TEXT" NAME="RESULT_TextField-6" SIZE="30" MAXLENGTH="30" value=请在这里输入值>
password 密码域
<INPUT TYPE="password" NAME="RESULT_TextField-6" SIZE="30" MAXLENGTH="30" value=请在这里输入值>
file 文件域 比如邮件的附件功能 招聘时上传照片
<input type=file name=File>
checkbox 复选框 从若干选项中选择多个
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-0" VALUE="CheckBox-0">股票
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-1" VALUE="CheckBox-1">期权
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-2" VALUE="CheckBox-2">互惠基金
属性 checked 表示被默认选种
value 表示选种后传到服务器的值
<INPUT TYPE="password" NAME="RESULT_TextField-6" SIZE="30" MAXLENGTH="30" value=请在这里输入值>
<input type=file name=File>
<P> <INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-0" checked>股票
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-1">期权
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-2">互惠基金<BR></p>
radio 单选框
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-0" VALUE="Radio0">新手
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-1" VALUE="Radio-1">中级
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-2" VALUE="Radio-2">专家
属性 checked 表示被默认选种
value 表示选种后传到服务器的值
<p> <INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-0" checked >新手
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-1">中级
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-2">专家</p>
button 普通按纽 主要配合javascript脚本来进行表单的处理
属性 value 表示按纽上的文字
<input type=button value=按钮>
submit 提交按纽
<INPUT TYPE="SUBMIT" NAME="submit1" VALUE="提交">
reset 重置按纽 可以清除表单的内容
<HTML>
<HEAD> <TITLE>表单示例</TITLE></HEAD>
<BODY bgColor="#ffffcc" Text="#000099">
<FORM ACTION="http://www.mysite.com/FormSite" METHOD="POST">
<B><H2 align="left">证券调查示例</H2></B>
<p><B>投资经验</B></p>
<p> <INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-0">新手
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-1">中级
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-2">专家</p>
<p><B>投资类型</B></P>
<P> <INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-0">股票
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-1">期权
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-2">互惠基金<BR></p>
<p><B>今年选择什么证券？</B></P>
<P> <INPUT TYPE="TEXT" NAME="RESULT_TextField-6" SIZE="30" MAXLENGTH="30"></p>
<p>
<INPUT TYPE="SUBMIT" NAME="submit1" VALUE="提交">
<INPUT TYPE="RESET" NAME="reset1" VALUE="重置"></p>
</FORM>
</BODY>
</HTML>
Image 图象域(图象提交按钮) 指可以用在提交按纽位置上图片
这幅图片具备按纽的功能
<input type=image name=Image src=酷吧.gif>
Hidden 隐藏域 在页面中对用户是不可见的
使用它的目的在于收集或发送信息以利于被处理表单的 程序使用
菜单和列表标记<select> <option>
是为了节省网页的空间而产生
属性 name :菜单和列表的名称
size :显示列表的数目
value : 选项值
selected: 默认选项
multiple:列表中的项目多选
<SELECT NAME="RESULT_RadioButton-5">
<OPTION value="网上交易" multiple>1)网上交易</OPTION>
<OPTION value="电话交易">2)电话交易</OPTION>
<OPTION value="经纪人代理" selected>3)经纪人代理</OPTION>
<OPTION value="其他">4)其他</OPTION>
</SELECT>
文字域标记<textarea> 可以在其中输入多行的文本
属性 name文字域名称
rows文字域行数
cols文字域列数
value 文字域的默认值
<TEXTAREA NAME="RESULT_TextArea-8" ROWS="7" COLS="20"></TEXTAREA>
行会自动添加 列是固定不变的
9.框架
左右分割窗口的属性cols
<HTML>
<HEAD>
<TITLE>嵌套框架</TITLE>
</HEAD>
<FRAMESET cols="33%, 33%, 34%">
<FRAME src = " 酷吧.gif">
<FRAMESET rows="40%, 50%">
<FRAME src = "2439.gif">
<FRAME src = "2439.gif">
</FRAMESET>
<FRAME src = "酷吧.gif">
</FRAMESET>
</HTML>
上下分割窗口的属性rows
<HTML>
<HEAD>
<TITLE>嵌套框架</TITLE>
</HEAD>
<FRAMESET rows="33%, 33%,*">
<FRAME src = " 酷吧.gif">
<FRAMESET rows="40%, 50%">
<FRAME src = "2439.gif">
<FRAME src = "2439.gif">
</FRAMESET>
<FRAME src = "酷吧.gif">
</FRAMESET>
</HTML>
在使用了框架集的页面中,页面的body被frameset所取代 然后通过frame标记定义每个框架
*表示剩下的部分
framespacing 设置框架边框宽度属性
bordercolor 设置框架边框颜色属性
<HTML>
<HEAD>
<TITLE>嵌套框架</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%" framespacing=15 bordercolor=red>
<FRAME src = " 酷吧.gif">
<FRAMESET rows="40%, 50%">
<FRAME src = "2439.gif">
<FRAME src = "2439.gif">
</FRAMESET>
<FRAME src = "酷吧.gif">
</FRAMESET>
</HTML>
<frame>通过它可以定义框架页面的内容 如:<frame src=test.html>
name:框架名称属性 <frame src=test.html name="right">
frameborder 框架边框显示属性 0不显示边框 1显示边框
可用于 <frame> <FRAMESET>
scrolling框架滚动条显示属性 yes 显示滚动条
no 不显示滚动条
auto 根据页面的长度自动判断是否显示滚动条
如:<frame src=test.html scrolling=no>
<frame src=test.html scrolling=auto>
noresize 代表禁止改变框架的尺寸大小
如:<frame src=test.html noresize>
marginwidth 边框边缘宽度属性 比如文字与图片与框架边框的宽度距离
如:<frame src=test.html marginwidth=40>
marginheight 边框边缘高度属性 比如文字与图片与框架边框的高度距离
如:<frame src=test.html marginheight=40>
<noframes>标记表示不支持框架技术 对于较底的IE版本而言
<HTML>
<HEAD>
<TITLE>嵌套框架</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%" bordercolor=red>
<FRAME src = " 酷吧.gif" marginwidth=40>
<FRAME src = "酷吧.gif" marginheight=40>
</FRAMESET>
<noframes>
对不起,您的浏览器不支持框架
</noframes>
</HTML>
<iframe> 浮动框架 在浏览器中可以嵌套子窗口,在其中显示页面的内容
<HTML>
<HEAD>
<TITLE>嵌套框架</TITLE>
</HEAD>
<body>
<iframe src=" 酷吧.gif" width=400 height=300 name="iframe" align=center>
</iframe>
</body>
</HTML>
10.多媒体页面
<marquee>滚动文字标记
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<marquee>你好,欢迎您的光临!!!</marquee>
</body>
</HTML>
滚动方向属性 direction (up down left right)
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<marquee direction =up>你好,欢迎您的光临!!!</marquee>
<marquee direction =down>你好,欢迎您的光临!!!</marquee>
<marquee direction =left>你好,欢迎您的光临!!!</marquee>
<marquee direction =right>你好,欢迎您的光临!!!</marquee>
</body>
</HTML>
滚动方式属性 behavior scroll:循环往复 slide:只进行一次滚动
alternate:交替进行滚动
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<marquee behavior =scroll>你好,欢迎您的光临!!!</marquee>
<br><br>
<marquee behavior =slide>你好,欢迎您的光临!!!</marquee>
<br><br>
<marquee behavior =alternate>你好,欢迎您的光临!!!</marquee>
</body>
</HTML>
滚动速度属性 scrollamount
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<marquee behavior =scroll scrollamount=30>你好,欢迎您的光临!!!</marquee>
<br><br>
<marquee behavior =slide>你好,欢迎您的光临!!!</marquee>
<br><br>
<marquee behavior =altenate>你好,欢迎您的光临!!!</marquee>
</body>
</HTML>
滚动延迟属性 scrolldelay 500 等于0.5秒
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<marquee behavior =scroll scrolldelay=500 >你好,欢迎您的光临!!!</marquee>
<br><br>
<marquee behavior =slide>你好,欢迎您的光临!!!</marquee>
<br><br>
<marquee behavior =altenate>你好,欢迎您的光临!!!</marquee>
</body>
</HTML>
滚动循环属性 loop
滚动范围属性 width height
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<marquee behavior =scroll width=200 height=60 >你好,欢迎您的光临!!! </marquee>
<br><br>
<marquee behavior =slide>你好,欢迎您的光临!!!</marquee>
<br><br>
<marquee behavior =altenate>你好,欢迎您的光临!!!</marquee>
</body>
</HTML>
嵌入多媒体内容
mp3:是MPEG Layer3 的简称
<HTML>
<HEAD>
<TITLE>插入声音</TITLE>
</HEAD>
<BODY>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>插入声音</B></FONT></H1>
<HR>
<EMBED ALIGN=CENTER WIDTH="200" HEIGHT="200" SRC="lene.mp3" AUTOSTART="TRUE">
</BODY>
</HTML>
<bgsound>背景音乐标记 当打开页面后自动播放
<HTML>
<HEAD>
<TITLE>插入声音</TITLE>
</HEAD>
<BODY>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>插入声音</B></FONT></H1>
<HR>
<bgsound SRC="lene.mp3">
</BODY>
</HTML>
loop 背景音乐循环次数
<HTML>
<HEAD>
<TITLE>插入声音</TITLE>
</HEAD>
<BODY>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>插入声音</B></FONT></H1>
<HR>
<bgsound SRC="lene.mp3" loop=10>
</BODY>
</HTML>
全写： HyperText Mark-up Language
译名： 超文件注标式语言（译名之
简释：一种为普通文件中某些字句加上标示的语言，其目的在于运用标记（tag）使文件达到预期的显示效果
注意事项
1.< > 是所有标记的开始和结束
2.标记之间可以嵌套<h1><center>标题</h1></center>
3.在源代码中不区分大小写 <head> <Head> <HEAD> 作用相同
4.在标记中可以放置各种属性 <h1 align=center>
5.回车键和空格键在源代码中不起作用
6.注释 <!-- -->
1.页面的头部标记
<head> javascript css一般都定义在<head>中
一般说来头部定义的内容不会在网页上显示,而是通过另外的方式起作用 如:<title>
头部标记
标记 描述
<base> 当前文档的URL全称(基底网址)
<title> 设定显示在IE左上方的标题内容
<meta> 有关文档本身的元信息 例如：用于查询的关键字
<style> 设定CSS层叠样式表的内容
<link> 设定外部文件的连接
<script> 设定页面中程序脚本的内容
<title> 网页的标题
作用： 在浏览者保存该页面后变为保存后网页的文件名
可以添加进收藏夹中时显示该页面的名字
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
</HEAD>
<BODY>
<H3>我的第一个 HTML 文档</H3>
</BODY>
</HTML>
<base>基底网址标记 :一般用来设定IE中文件的绝对路径
一篇文档中的 <base>基底网址标记不能多于一个,必 须放于头部并且应该在任何包含URL地址的语句之前
<base href="url" target="window_name">
href属性指定了文档的基础URL地址
target定义的是打开页面的窗口
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<BASE href="http://www.163.com" target="_self">
</HEAD>
<BODY>
<H3>我的第一个 HTML 文档</H3>
<a href=new.html>新闻</a>
</BODY>
</HTML> 将鼠标放置到连接的上方
<meta>元信息标记 :功能定义页面中的信息, 这些信息不会在页面中显示
只会在源代码中显示
在HTML中可以包括任意数量的<meta>元信息标记
属性
http-equiv 生成一个HTTP标题域，它的属性与另一个属性相同
如：http-equiv=expires,实际取值由content确定
name 如果元数据是以关键字/取值的形式出现的
name表示关键字
content 关键字/取值的内容
定义编辑工具
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<meta name=generator content="notepad">
</HEAD>
<BODY>
<H3>我的第一个 HTML 文档</H3>
<a href=new.html>新闻</a>
</BODY>
</HTML> 以记事本做为网页的编辑工具
generator:为编辑器定义
content:定义编辑器的名称
设定关键字 关键字是为搜索引擎提供的 不宜过多
语法 <meta name="keywords" content="value">
keywords:定义关键字
content：定义关键字的内容
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<meta name=keywords content="mp3, mtv,音乐,摇滚">
</HEAD>
<BODY>
</BODY>
</HTML>
设定描述 是为搜索引擎提供的
语法 <meta name="discription" content="value">
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<meta name="discription" content="HTML语言">
</HEAD>
<BODY>
</BODY>
</HTML>
设定作者
在页面的源代码中，显示页面制作者的姓名及个人信息
语法 <meta name="author" content="value">
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<meta name="author" content="李四">
</HEAD>
<BODY>
</BODY>
</HTML>
设定字符集
gb2312 简体中文
big5 繁体中文
iso8850-1 英文
语法 <meta http-equiv="content-type"
content="text/html;charset=value">
http-equiv 传送HTTP通信协议的表头
content 定义页面的内码 CHARSET中写下内码的语系
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<meta http-equiv="content-type"
content="text/html;charset=gb2312">
</HEAD>
<BODY>
</BODY>
</HTML>
设定自动刷新 就是每隔几秒后刷新页面的内容
比如图文直播
语法 <meta http-equiv="refresh" content="value">
http-equiv 传送HTTP通信协议的表头
refresh 代表刷新
content 中写下刷新间隔的秒数
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<meta http-equiv="refresh"
content="3">
</HEAD>
<BODY>
<p>3秒刷新一次</p>
</BODY>
</HTML>
设定自动跳转
如可先在一个页面上显示欢迎信息，经过一段时间
自动跳转到指定的网页上
语法
<meta http-equiv="refresh" content="value" url="url_value">
http-equiv 传送HTTP通信协议的表头
refresh 代表刷新
content 中写下刷新间隔的秒数后跳转到文件地址
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<meta http-equiv="refresh"
content="5;
url=new.html">
</HEAD>
<BODY>
<h2><center>请稍等片刻......</center><h2>
<p>本页面5秒后跳转到新的地址</p>
</BODY>
</HTML>
设定转场效果
转场效果即网页的过渡，是指当进入或离开网站时
页面具有不同的切换效果
语法
<meta http-equiv=""
content="revealtrans(duration=value,transition=number)">
event设定页面进入或退出的时候产生切换效果
page-enter 表示进入网页时有网页的过渡效果
page-exit 表示退出网页时有网页的过渡效果
duration表示网页过渡效果的延续时间，单位为秒
transition 写下过渡效果的方式编号
效果 效果编号
盒状收缩 0
盒状展开 1
圆形收缩 2
圆形展开 3
向上擦除 4
向下擦除 5
向左擦除 6
向右擦除 7
垂直百页窗 8
水平百页窗 9
横向棋盘式 10
纵向棋盘式 11
溶解 12
左右向中部收缩 13
中部向左右收缩 14
上下向中部收缩 15
中部向上下展开 16
阶梯状向左下展开 17
阶梯状向左上展开 18
阶梯状向右下展开 19
阶梯状向右上展开 20
随机水平线 21
随机垂直线 22
随机 23
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<BODY bgcolor=#99ccff>
<center>
<h2><center>页面的过渡效果</h2>
<p><img src="new.gif" width=400 height=200></img></p>
<a href="new.html">进入网页</a><br>
<a href="old.html">退出网页</a><br>
</center>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<meta http-equiv="page-enter"
content="revealtrans(duration=3,transition=10)">
</head>
<BODY bgcolor=#99ccff>
<center>
<h2>显示页面的进入效果</h2>
<p><img src="我LOVE你.gif" width=400 height=200></img></p>
<a href="test1.html">返回</a>
</center>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<meta http-equiv="page-exit"
content="revealtrans(duration=5,transition=8)">
</head>
<BODY bgcolor=#99ccff>
<center>
<h2>显示页面的退出效果</h2>
<p><img src="快还钱.gif" width=400 height=200></img></p>
<a href="test1.html">返回</a>
</center>
</BODY>
</HTML>
2.页面的主体标记
页面的主体位于<body></body>之间
<body>元素的属性
属性 描述
text 设定页面文字的颜色
bgcolor 设定页面背景的颜色
background 设定页面背景的图象
bgproperties 设定页面背景的图象为固定，不随页面的滚动而滚动
link 设定页面默认的连接颜色
alink 设定鼠标单击时的连接颜色
vlink 设定访问过的连接颜色
topMargin 设定页面的上边距
leftMargin 设定页面的左边距
text 设定页面文字的颜色
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<BODY text=#0000ff>
<center>
<h2>设定页面的文字颜色为蓝色</h2>
</center>
</BODY>
</HTML>
bgcolor 设定页面背景的颜色
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<BODY text=#ffffff bgcolor="#336699">
<center>
<h2>设定页面的文字颜色为白色 背景颜色为深蓝色</h2>
</center>
</BODY>
</HTML>
background 设定页面背景的图象
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<BODY text=#336699 background="2008.jpg">
<center>
<h2>设定页面的文字颜色为深蓝色 背景图象为2008.jpg</h2>
</center>
</BODY>
</HTML>
bgproperties 设定页面背景的图象为固定，不随页面的滚动而滚动
bgproperties＝fixed 设定为固定的效果
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<BODY text=#336699 background="2008.jpg" bgproperties＝fixed>
<center>
<h2>设定页面的文字颜色为深蓝色 背景图象为2008.jpg</h2>
</center>
</BODY>
</HTML>
连接文字颜色的属性 默认连接文字的颜色为蓝色 访问过后的颜色是紫红色
这样有助于用户判断是否点击过该连接
在HTML中可以修改的连接状态共有3种
link 设定页面默认的连接颜色
alink 设定鼠标单击时的连接颜色
vlink 设定访问过的连接颜色
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<BODY text=#ffffff bgcolor="#336699"
link="red" alink="#00ff00" vlink="#cccccc" >
<center>
<h2>设定不同的连接颜色</h2><br>
<a href=new.html>连接</a>
<a href=old.html>连接</a>
</center>
</BODY>
</HTML>
topMargin 设定页面的上边距 单位为像素
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<BODY topMargin=30>
<p>设定页面的上边距为30像素</p>
</BODY>
</HTML>
leftMargin 设定页面的左边距
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<BODY leftMargin=30>
<p>设定页面的左边距为30像素</p>
</BODY>
</HTML>
3.文字与段落
空格符号
<HTML>
<HEAD>
<TITLE>插入声音</TITLE>
</HEAD>
<BODY>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>插 入 声 音</B></FONT></H1>
<HR>
</BODY>
</HTML>
特殊符号 " "
& &
< <
> >
<HTML>
<HEAD>
<TITLE>插入声音</TITLE>
</HEAD>
<BODY>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>"音乐"</B></FONT></H1>
<HR>
</BODY>
</HTML>
<!-- --> 注释语句 如 <!-- HTML语言 --> 该代码不会在IE中显示
<!-- HTML语言 -->
<HTML>
<HEAD>
<TITLE>插入声音</TITLE>
</HEAD>
<BODY>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>"音乐"</B></FONT></H1>
<HR>
</BODY>
</HTML>
<h>标题字标记 <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>
字体依次逐级递减
<HTML>
<HEAD>
<TITLE>HTML 简介</TITLE>
</HEAD>
<BODY>
<H1>HTML 简介</H1>
<H2>HTML 简介</H2>
<H3>HTML 简介</H3>
<H4>HTML 简介</H4>
<H5>HTML 简介</H5>
<H6>HTML 简介</H6>
</BODY>
</HTML>
对齐属性 align left(默认) center right
<HTML>
<HEAD>
<TITLE>HTML 简介</TITLE>
</HEAD>
<BODY>
<H1 align=center>HTML 简介</H1>
<H2 align=right>HTML 简介</H2>
<H3 algin=left>HTML 简介</H3>
</body>
</HTML>
<b> <strong> 粗体标记
<b>HTML</b> 简介 <strong>简介</strong>
<i> <em> <cite> 斜体标记
<i>你好</i>欢迎你 <em>来听我的</em>HTML<cite>课程</cite>
<sup>上标记 <sub>下标记
<HTML>
<HEAD>
<TITLE>字符级标记示例</TITLE>
</HEAD>
<BODY>
<P ALIGN="center"><B>字符级标记示例</B></P>
<P>圆的面积=pi*r<SUP>2</SUP></P>
<P>水的化学符号：H<SUB>2</SUB>O</P>
<P><EM>这是一种很有趣的体验</EM></P>
</BODY>
</HTML>
<big>大字号标记 将当前的文字加大一级字号显示
<HTML>
<HEAD>
<TITLE>字符级标记示例</TITLE>
</HEAD>
<BODY>
这是一种很有趣的体验<br>
<big>这是一种很有趣的体验</big>
</BODY>
</HTML>
<small>小字号标记 将当前的文字缩小一级字号显示
<u>下划线标记
<HTML>
<HEAD>
<TITLE>字符级标记示例</TITLE>
</HEAD>
<BODY>
<u>这是一种很有趣的体验</u>
</BODY>
</HTML>
<s> <strike> 删除线标记
<HTML>
<HEAD>
<TITLE>字符级标记示例</TITLE>
</HEAD>
<BODY>
<s>这是一种很有趣的体验</s><br>
<strike>这是一种很有趣的体验</strike>
</BODY>
</HTML>
<address>地址文字标记 :主要用语显示E_MAIL 地址等文字内容 主要用于英文字体中显示
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<H3>我的第一个 HTML 文档</H3>
<P>这将是一种很有趣的体验
<H2>使用另一个标题</H2>
<P> 另一个段落元素
<ADDRESS>
<P><A href=“http://www.163.com/”>单击此处访问北京网易有限公司的主页</A> </ADDRESS>
</BODY>
</HTML>
<tt>打字机标记 该标记用来创建出打字机风格的字体,文字间是以等宽来显示的
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<H3>我的第一个 HTML 文档</H3>
<P>这将是一种很有趣的体验
<H2>使用另一个标题</H2>
<P> 另一个段落元素
<ADDRESS>
<P><A href=“http://www.163.com/”>单击此处访问北京网易有限公司的主页</A> </ADDRESS>
<tt>另一个段落元素</tt>
</BODY>
</HTML>
<code> <samp> 等宽文字标记 使用等宽字体来显示文字的内容 主要用于英文字体中显示
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<p><code>welcome you</code></p>
<p><samp>welcome you</samp></p>
</BODY>
</HTML>
<kbd> 在标记间的文字就是键盘输入命令的文字效果
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<p><kbd>welcome you</kbd></p>
</BODY>
</HTML>
<var> 可以显示变量的文字效果,使用斜体
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<p><var>welcome you</var></p>
</BODY>
</HTML>
<font>字体标记
属性 字体face 字号size (-7---+7) 默认是3 颜色color
控制面板--->字体 Windows系统中的字体都可以显示在IE中
<HTML>
<HEAD>
<TITLE>欢迎使用HTML</TITLE>
</HEAD>
<BODY>
<H3><FONT SIZE = 3 COLOR = HOTPINK FACE = "隶书">我的第一个HTML文档 </FONT></H3>
<P>这<FONT COLOR = BLUE SIZE = 6>将会</FONT>是一种很有趣的体验
</BODY>
</HTML>
<basefont>基字标记
<HTML>
<HEAD>
<TITLE>欢迎使用HTML</TITLE>
</HEAD>
<BODY>
<BASEFONT SIZE = 3 COLOR = HOTPINK FACE = "隶书">我的第一个HTML文档 </BASEFONT>
<P>这<FONT COLOR = BLUE SIZE =+1>将会</FONT>是一种很有趣的体验
<P>这<FONT COLOR = BLUE SIZE =-1>将会</FONT>是一种很有趣的体验
</BODY>
</HTML>
段落标记
<p>段落标记 段落:就是一段格式上统一的文本 可以说段落就是带有硬回车的组合
属性 align(left center right)
<HTML>
<HEAD>
<TITLE>欢迎使用HTML</TITLE>
</HEAD>
<BODY>
<P align=left>是一种很有趣的体验</p>
<P align=center>是一种很有趣的体验</p>
<P align=right>是一种很有趣的体验</p>
</BODY>
</HTML>
<br> 换行标记 <nobr>不换行标记
<HTML>
<HEAD>
<TITLE>欢迎使用HTML</TITLE>
</HEAD>
<BODY>
<nobr>欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML
</nobr>
</BODY>
</HTML>
<pre>预格式化标记:就是保留文字在源代码中的格式,页面的显示效果与在源代码的格式完全一致
<HTML>
<HEAD>
<TITLE>学习HTML</TITLE>
</HEAD>
<BODY>
<PRE>
汉普蒂·邓普蒂坐在墙上
汉普蒂·邓普蒂摔了一大跤
国王所有的马
和所有的人
也无法再把汉普蒂·邓普蒂拼起来
</PRE>
</BODY>
</HTML>
<center>居中标记
<HTML>
<HEAD>
<TITLE>学习HTML</TITLE>
</HEAD>
<BODY> <center>
<PRE>
汉普蒂·邓普蒂坐在墙上
汉普蒂·邓普蒂摔了一大跤
国王所有的马
和所有的人
也无法再把汉普蒂·邓普蒂拼起来
</PRE> </center>
</BODY>
</HTML>
<blockquote>缩排标记 :文字空2个字
<HTML>
<HEAD>
<TITLE>学习HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用于以文本块的形式设置内容格式。
<BLOCKQUOTE>
汉普蒂·邓普蒂坐在墙上
汉普蒂·邓普蒂摔了一大跤
国王所有的马
和所有的人
也无法再把汉普蒂·邓普蒂拼起来
</BLOCKQUOTE>
<P>请注意，上述内容显示为一个文本块。
</BODY>
</HTML>
<hr>水平线标记 用语段落与段落之间的分割
<HTML>
<HEAD>
<TITLE>学习HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用于以文本块的形式设置内容格式。
<hr>
<BLOCKQUOTE>
汉普蒂·邓普蒂坐在墙上
汉普蒂·邓普蒂摔了一大跤
国王所有的马
和所有的人
也无法再把汉普蒂·邓普蒂拼起来
</BLOCKQUOTE>
<hr>
<P>请注意，上述内容显示为一个文本块。
</BODY>
</HTML>
水平线的宽度属性 width 默认是 100%
<HTML>
<HEAD>
<TITLE>学习HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用于以文本块的形式设置内容格式。
<hr width=300>
<BLOCKQUOTE>
汉普蒂·邓普蒂坐在墙上
汉普蒂·邓普蒂摔了一大跤
国王所有的马
和所有的人
也无法再把汉普蒂·邓普蒂拼起来
</BLOCKQUOTE>
<hr width=80%>
<P>请注意，上述内容显示为一个文本块。
</BODY>
</HTML>
<hr width=300> :表示绝对宽度300像素
<hr width=80%> :水平线的相对宽度80%
水平线的高度属性 size 只能用绝对像素来定义
<HTML>
<HEAD>
<TITLE>学习HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用于以文本块的形式设置内容格式。
<hr width=300 size=1>
<BLOCKQUOTE>
汉普蒂·邓普蒂坐在墙上
汉普蒂·邓普蒂摔了一大跤
国王所有的马
和所有的人
也无法再把汉普蒂·邓普蒂拼起来
</BLOCKQUOTE>
<hr width=80% size=9>
<P>请注意，上述内容显示为一个文本块。
</BODY>
</HTML>
水平线去掉阴影的属性 noshade :默认是空心的立体效果
<HTML>
<HEAD>
<TITLE>学习HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用于以文本块的形式设置内容格式。
<hr width=300 size=2 noshade>
<BLOCKQUOTE>
汉普蒂·邓普蒂坐在墙上
汉普蒂·邓普蒂摔了一大跤
国王所有的马
和所有的人
也无法再把汉普蒂·邓普蒂拼起来
</BLOCKQUOTE>
<hr width=80% size=9 noshade>
<P>请注意，上述内容显示为一个文本块。
</BODY>
</HTML>
水平线颜色的属性 color
<HTML>
<HEAD>
<TITLE>学习HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用于以文本块的形式设置内容格式。
<hr width=300 size=2 noshade color=red>
<BLOCKQUOTE>
汉普蒂·邓普蒂坐在墙上
汉普蒂·邓普蒂摔了一大跤
国王所有的马
和所有的人
也无法再把汉普蒂·邓普蒂拼起来
</BLOCKQUOTE>
<hr width=80% size=9 noshade color=blue>
<P>请注意，上述内容显示为一个文本块。
</BODY>
</HTML>
水平线排列的属性 align(left center right)
<HTML>
<HEAD>
<TITLE>学习HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用于以文本块的形式设置内容格式。
<hr width=300 size=2 noshade color=red align=left>
<BLOCKQUOTE>
汉普蒂·邓普蒂坐在墙上
汉普蒂·邓普蒂摔了一大跤
国王所有的马
和所有的人
也无法再把汉普蒂·邓普蒂拼起来
</BLOCKQUOTE>
<hr width=80% size=9 noshade color=blue align=right>
<P>请注意，上述内容显示为一个文本块。
</BODY>
</HTML>
4.列表
有序列表:指的是按照数字或字母顺序排列列表项目
语法: <ol> <li> ... </ol>
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<OL>
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
</OL>
</BODY>
</HTML>
在有序列表的默认情况下,使用数字序号作为列表的开始
有序列表的类型 1 a A i I
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<OL type=I>
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
</OL>
</BODY>
</HTML>
有序列表的起始属性start
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<OL type=A start=5>
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
</OL>
</BODY>
</HTML>
<ul>无序列表标记 各个列表项之间没有顺序级别之分
<li>做为每一个项目的起始
<dir>目录列表标记 用于显示文件内容的目录大纲 通常用于设计一个压缩的较窄的列表
如 字典的索引
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<dir>
<LI>星期一</LI>
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
</dir>
</BODY>
</HTML>
<dl>定义列表标记
使用<dl>作为定义列表的声明 <dt>使用作为名词的标题 <dd>用作解释名词
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<DL>
<DT>星期日
<DD>一周的第一天
<DT>HTML
<DD>超文本标记语言
<DT>互联网
<DD>网络的网络
</DL>
</BODY>
</HTML>
<menu> 菜单列表标记
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<menu>
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
</menu>
</BODY>
</HTML>
type无序列表的类型属性 默认是黑色实心圈 disc circle square
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<menu type=circle>
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
</menu>
</BODY>
</HTML>
列表的嵌套
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<DL>
<DT><u>程序员应具备的开发知识</u><br><br>
<DD>html css javascript
<DD>struts spring hibernate
<DD>tomcat weblogic
<br><br><br>
<DT><u>程序员应具备的数据库知识</u><br><br><br><br>
<DD>sqlserver oracle
</DL>
</BODY>
</HTML>
无序列表和有序列表的嵌套
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<ul type=square>
<li><u>J2EE常见的框架技术</u>
<ol type=I>
<li> struts
<li> spring
<li> hibernate
</ol>
<li><u>J2EE常见的服务器技术</u>
<ol type=I>
<li> sqlserver
<li> oracle
<li> mysql
</ol>
<li><u>Java网页常用的技术</u>
<ol type=I>
<li> jsp
<li> servlet
<li> javabean
</ol>
</ul>
</body>
</HTML>
5.超连接
URL:urource Locator 通用资源标识符 指每个网站的独立地址
<a>连接标记
属性 href:指定连接地址
Name:给连接命名
Title:给连接提示文字
Target:指定连接的目的窗口
内部链接 :到同一文档内或同一网站内的其他部分的链接
外部链接 :到其他网站或服务器上的页面的链接。
绝对路径:为文件提供的完全路径 如:http://www.sina.com
当连接到其它网站的时候必须使用绝对连接
相对路径: 适合网站的内部连接
相对连接的使用方法:
如果连接到同一目录下,则只需输入要连接的文档名称
如果连接到下一级目录下的文件中,先输入目录名,然后/ 再输入文件名
如果连接到上一级目录的文件,先输入../ 再输入目录名,文件名
根路径: 适合网站的内部连接 不建议使用 以/开始 再输入目录名,文件名
/root/index.html
设定连接的目标窗口
target属性 属性值 _parent 在上一级窗口中打开
_blank 在新窗口中打开
_self 在同一窗口中打开
_top 在IE 的整个窗口中打开 忽略任何框架
书签
链接到同一文档的各个部分 test1.html
<HTML>
<HEAD><TITLE>使用链接</TITLE></HEAD>
<BODY>
<A HREF = #Internet>互联网</A><BR><BR>
<A HREF = #HTML>HTML简介</A><BR><BR>
<A HREF = #Consistency>多样化和统一性</A><BR><BR>
<A name = Internet>互联网</A><BR>
<P>互联网是网络的网络。也就是说，计算机网络可以跨越国家甚至全球的范围连接到其他网络。世界上所有的计算机都可以通过TCP/IP传输协议绑定在一起。</P>
<A name = HTML>HTML简介</A><BR>
<P>超文本标记语言是Web用来创建和识别文档的标准语言。虽然它不是标准通用标记语言 (SGML) 的子集，但与它有着某种程度上的关联。SGML是一种文档格式语言表示方法。</P>
<A name = Consistency>多样性和统一性</A><BR>
<P>万事万物都离不开多样性和统一性这样一条基本准则。也就是说，所有的事物都可以融合成一个整体，同时，又保持自己独特的与众不同的一面。站点的独特性恰恰来源于它的一致性。颜色、字体、分栏布局以及其他设计元素应在站点的每个部分都保持一致。 </P>
<BR><BR><BR><BR><BR><BR>
</BODY>
</HTML>
test2.html 连接到其它页面中的书签
<h1>J2EE采用的框架技术</h1>
<a href=test1.html#Internet>互联网</a>
<a href=test1.html#HTML>HTML简介</a>
<a href=test1.html#Consistency>多样性和统一性</a>
<h1>J2EE采用的框架技术</h1>
外部连接 指跳转到当前网站的外部 需要写连接的绝对地址
url的格式
WWW http:// 进入万维网站点
Ftp ftp:// 进入文件传输服务器
News news:// 启动新闻讨论组
Telnet telnet:// 启动telnet方式
Gopher gopher:// 访问一个gopher服务器
E-mail mailto:// 启动邮件
连接到外部网站
<a href="http://www.sina.com.cn">连接到新浪</a>
发送E-MAIL 会自动打开系统自带的邮件软件如:outlook
<a href="mailto:baiyunri2005@163.com">给老师写信</a>
<a href="mailto:baiyunri2005@163.com?subject=J2EE知识
&cc=zhangsan@263.net&bcc=lisi@163.com">给老师写信</a>
subject 电子邮件主题
CC 抄送收件人
BCC 暗送收件人
连接 FTP 文件传输协议
<a href="ftp://ftp.pku.edu.cn">北京大学</a>
连接telnet
就是一台计算机连接到另一台计算机上 共享网络的硬件与软件资源
<a href="telnet://162.105.203.245:23">北京大学</a>
连接到 gopher 它是主要的信息检索工具
<a href="gopher://dosfan.lib.nic.edu/1">gopher站点</a>
连接到News新闻组
新闻组是由世界各地上千个新闻服务器组成的
它是个人向新闻服务器所张贴的邮件的集合
<a href="news://news.newsfan.net">News新闻组</a>
下载文件
<a href="女孩·足球.mp3">下载软件</a>
6.图片
<img>
src 图片的源文件
alt 图片的提示文字
width 图片的宽度
height 图片的高度
vspace 图片与文字的垂直间距
hspace 图片与文字的水平间距
border 图片的边框
algin 排列 left图片在文字的左侧
right图片在文字的右侧
top 文字位于图片的顶端
bottom文字位于图片的底端
middle文字位于图片的中部
示例:<P>
<center>
<a href=第五题.html>
<IMG ALIGN=bottom
SRC=2439.gif
alt="小孩"
height=200 width=200 border=1
vspace=30 hspace=3>
</a>底部对齐在此处定义颜色
</center></P>
7.表格
<table>...</table> 表格标记
border 属性定义边框的宽度,单位为像素
width 属性定义表格的宽度
Heigth 属性定义表格的高度
bordercolor 属性定义表格的边框颜色
bgcolor 属性定义表格的背景颜色
background 属性定义表格的背景图象
cellspacing 属性定义单元格间距,单位为像素
cellpadding 属性定义单元格内容和边框之间的距离
align 属性定义表格的水平对齐方式 center left right
bordercolorlight 属性定义表格的亮边框颜色
bordercolordark 属性定义表格的暗边框颜色
示例:<TABLE border=1 width=600 heigth=50 bordercolor=red bgcolor=yellow
background=我LOVE你.gif align=center cellspacing=10 cellpadding=25>
<caption>...</caption> 表格标题
align 属性定义表格标题的水平对齐方式 center(默认) left right
valign 属性定义表格标题的垂直对齐方式 top(默认) millde bottom
示例: <CAPTION valign=bottom align=right>创建表</CAPTION>
<th>...</th> 表格的表头(指表格的第一行,文字以居中加粗显示)
algin
valgin
bgcolor
background
bordercolor
bordercolorlight
bordercolordark
width
height
<tr>...</tr> 行标记
algin
valgin
bgcolor
background
bordercolor
bordercolorlight
bordercolordark
<td>...</td> 列标记
algin
valgin
bgcolor
background
bordercolor
bordercolorlight
bordercolordark
width
height
rowspan跨行属性 示例:<TD rowspan=3>J2EE框架</TD>
colspan跨列属性 <TD colspan=3>
8.表单 是实现动态网页的一种主要外在形式
表单的主要功能是收集信息,浏览者的信息
过程为:输入的数据提交给服务器 由服务器的相关程序进行处理
表单标记<form>
属性 表单的名字 name
表单的传送方法 method(get默认 post)
用来定义表单处理程序的位置 action
<FORM action="http://mysite.com/processform" METHOD="post">
...表单内容...
</FORM>
其中,Method属性中,Get方法时将表单内容附加在URL地址后面,所以对提交信息的长度进行了限制,最多不可以超过8192个字符,如果信息太长,将被截去,从而导致意想不到的处理结果.同时Get方法不具有保密性,不是于处理如信用卡卡号等要求保密的内容,而且补农传送非ASCII码的字符.
Post方法是将用户在表单中填写的数据包含在表单主体中,一起传送到服务器商的处理程序中,该方法没有字符的限制,它包含了ISO10646的字符集,是一种邮寄方式,在浏览器的地址栏不显示提交的信息,这中方式传送的数据是没有限制的.当不指明方式时,默认为Get方式.
<form>标记中可以包含以下四个标记
<input>表单输入标记
<select>菜单和列表标记
<option>菜单和列表项目标记
<textarea>文本域标记
<input>表单输入标记
属性 name:域的名称
Type:域的类型 text 文字域
password 密码域
file 文件域
checkbox 复选框
radio 单选框
button 普通按纽
submit 提交按纽
reset 重置按纽
Hidden 隐藏域
Image 图象域(图象提交按钮)
text 文字域
属性 name 文字域的名字
maxlength 文字域的最大输入字符数
size 文字域的宽度
value 文字域的默认值
<INPUT TYPE="TEXT" NAME="RESULT_TextField-6" SIZE="30" MAXLENGTH="30" value=请在这里输入值>
password 密码域
<INPUT TYPE="password" NAME="RESULT_TextField-6" SIZE="30" MAXLENGTH="30" value=请在这里输入值>
file 文件域 比如邮件的附件功能 招聘时上传照片
<input type=file name=File>
checkbox 复选框 从若干选项中选择多个
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-0" VALUE="CheckBox-0">股票
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-1" VALUE="CheckBox-1">期权
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-2" VALUE="CheckBox-2">互惠基金
属性 checked 表示被默认选种
value 表示选种后传到服务器的值
<INPUT TYPE="password" NAME="RESULT_TextField-6" SIZE="30" MAXLENGTH="30" value=请在这里输入值>
<input type=file name=File>
<P> <INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-0" checked>股票
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-1">期权
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-2">互惠基金<BR></p>
radio 单选框
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-0" VALUE="Radio0">新手
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-1" VALUE="Radio-1">中级
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-2" VALUE="Radio-2">专家
属性 checked 表示被默认选种
value 表示选种后传到服务器的值
<p> <INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-0" checked >新手
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-1">中级
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-2">专家</p>
button 普通按纽 主要配合javascript脚本来进行表单的处理
属性 value 表示按纽上的文字
<input type=button value=按钮>
submit 提交按纽
<INPUT TYPE="SUBMIT" NAME="submit1" VALUE="提交">
reset 重置按纽 可以清除表单的内容
<HTML>
<HEAD> <TITLE>表单示例</TITLE></HEAD>
<BODY bgColor="#ffffcc" Text="#000099">
<FORM ACTION="http://www.mysite.com/FormSite" METHOD="POST">
<B><H2 align="left">证券调查示例</H2></B>
<p><B>投资经验</B></p>
<p> <INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-0">新手
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-1">中级
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-2">专家</p>
<p><B>投资类型</B></P>
<P> <INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-0">股票
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-1">期权
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-2">互惠基金<BR></p>
<p><B>今年选择什么证券？</B></P>
<P> <INPUT TYPE="TEXT" NAME="RESULT_TextField-6" SIZE="30" MAXLENGTH="30"></p>
<p>
<INPUT TYPE="SUBMIT" NAME="submit1" VALUE="提交">
<INPUT TYPE="RESET" NAME="reset1" VALUE="重置"></p>
</FORM>
</BODY>
</HTML>
Image 图象域(图象提交按钮) 指可以用在提交按纽位置上图片
这幅图片具备按纽的功能
<input type=image name=Image src=酷吧.gif>
Hidden 隐藏域 在页面中对用户是不可见的
使用它的目的在于收集或发送信息以利于被处理表单的 程序使用
菜单和列表标记<select> <option>
是为了节省网页的空间而产生
属性 name :菜单和列表的名称
size :显示列表的数目
value : 选项值
selected: 默认选项
multiple:列表中的项目多选
<SELECT NAME="RESULT_RadioButton-5">
<OPTION value="网上交易" multiple>1)网上交易</OPTION>
<OPTION value="电话交易">2)电话交易</OPTION>
<OPTION value="经纪人代理" selected>3)经纪人代理</OPTION>
<OPTION value="其他">4)其他</OPTION>
</SELECT>
文字域标记<textarea> 可以在其中输入多行的文本
属性 name文字域名称
rows文字域行数
cols文字域列数
value 文字域的默认值
<TEXTAREA NAME="RESULT_TextArea-8" ROWS="7" COLS="20"></TEXTAREA>
行会自动添加 列是固定不变的
9.框架
左右分割窗口的属性cols
<HTML>
<HEAD>
<TITLE>嵌套框架</TITLE>
</HEAD>
<FRAMESET cols="33%, 33%, 34%">
<FRAME src = " 酷吧.gif">
<FRAMESET rows="40%, 50%">
<FRAME src = "2439.gif">
<FRAME src = "2439.gif">
</FRAMESET>
<FRAME src = "酷吧.gif">
</FRAMESET>
</HTML>
上下分割窗口的属性rows
<HTML>
<HEAD>
<TITLE>嵌套框架</TITLE>
</HEAD>
<FRAMESET rows="33%, 33%,*">
<FRAME src = " 酷吧.gif">
<FRAMESET rows="40%, 50%">
<FRAME src = "2439.gif">
<FRAME src = "2439.gif">
</FRAMESET>
<FRAME src = "酷吧.gif">
</FRAMESET>
</HTML>
在使用了框架集的页面中,页面的body被frameset所取代 然后通过frame标记定义每个框架
*表示剩下的部分
framespacing 设置框架边框宽度属性
bordercolor 设置框架边框颜色属性
<HTML>
<HEAD>
<TITLE>嵌套框架</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%" framespacing=15 bordercolor=red>
<FRAME src = " 酷吧.gif">
<FRAMESET rows="40%, 50%">
<FRAME src = "2439.gif">
<FRAME src = "2439.gif">
</FRAMESET>
<FRAME src = "酷吧.gif">
</FRAMESET>
</HTML>
<frame>通过它可以定义框架页面的内容 如:<frame src=test.html>
name:框架名称属性 <frame src=test.html name="right">
frameborder 框架边框显示属性 0不显示边框 1显示边框
可用于 <frame> <FRAMESET>
scrolling框架滚动条显示属性 yes 显示滚动条
no 不显示滚动条
auto 根据页面的长度自动判断是否显示滚动条
如:<frame src=test.html scrolling=no>
<frame src=test.html scrolling=auto>
noresize 代表禁止改变框架的尺寸大小
如:<frame src=test.html noresize>
marginwidth 边框边缘宽度属性 比如文字与图片与框架边框的宽度距离
如:<frame src=test.html marginwidth=40>
marginheight 边框边缘高度属性 比如文字与图片与框架边框的高度距离
如:<frame src=test.html marginheight=40>
<noframes>标记表示不支持框架技术 对于较底的IE版本而言
<HTML>
<HEAD>
<TITLE>嵌套框架</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%" bordercolor=red>
<FRAME src = " 酷吧.gif" marginwidth=40>
<FRAME src = "酷吧.gif" marginheight=40>
</FRAMESET>
<noframes>
对不起,您的浏览器不支持框架
</noframes>
</HTML>
<iframe> 浮动框架 在浏览器中可以嵌套子窗口,在其中显示页面的内容
<HTML>
<HEAD>
<TITLE>嵌套框架</TITLE>
</HEAD>
<body>
<iframe src=" 酷吧.gif" width=400 height=300 name="iframe" align=center>
</iframe>
</body>
</HTML>
10.多媒体页面
<marquee>滚动文字标记
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<marquee>你好,欢迎您的光临!!!</marquee>
</body>
</HTML>
滚动方向属性 direction (up down left right)
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<marquee direction =up>你好,欢迎您的光临!!!</marquee>
<marquee direction =down>你好,欢迎您的光临!!!</marquee>
<marquee direction =left>你好,欢迎您的光临!!!</marquee>
<marquee direction =right>你好,欢迎您的光临!!!</marquee>
</body>
</HTML>
滚动方式属性 behavior scroll:循环往复 slide:只进行一次滚动
alternate:交替进行滚动
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<marquee behavior =scroll>你好,欢迎您的光临!!!</marquee>
<br><br>
<marquee behavior =slide>你好,欢迎您的光临!!!</marquee>
<br><br>
<marquee behavior =alternate>你好,欢迎您的光临!!!</marquee>
</body>
</HTML>
滚动速度属性 scrollamount
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<marquee behavior =scroll scrollamount=30>你好,欢迎您的光临!!!</marquee>
<br><br>
<marquee behavior =slide>你好,欢迎您的光临!!!</marquee>
<br><br>
<marquee behavior =altenate>你好,欢迎您的光临!!!</marquee>
</body>
</HTML>
滚动延迟属性 scrolldelay 500 等于0.5秒
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<marquee behavior =scroll scrolldelay=500 >你好,欢迎您的光临!!!</marquee>
<br><br>
<marquee behavior =slide>你好,欢迎您的光临!!!</marquee>
<br><br>
<marquee behavior =altenate>你好,欢迎您的光临!!!</marquee>
</body>
</HTML>
滚动循环属性 loop
滚动范围属性 width height
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<marquee behavior =scroll width=200 height=60 >你好,欢迎您的光临!!! </marquee>
<br><br>
<marquee behavior =slide>你好,欢迎您的光临!!!</marquee>
<br><br>
<marquee behavior =altenate>你好,欢迎您的光临!!!</marquee>
</body>
</HTML>
嵌入多媒体内容
mp3:是MPEG Layer3 的简称
<HTML>
<HEAD>
<TITLE>插入声音</TITLE>
</HEAD>
<BODY>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>插入声音</B></FONT></H1>
<HR>
<EMBED ALIGN=CENTER WIDTH="200" HEIGHT="200" SRC="lene.mp3" AUTOSTART="TRUE">
</BODY>
</HTML>
<bgsound>背景音乐标记 当打开页面后自动播放
<HTML>
<HEAD>
<TITLE>插入声音</TITLE>
</HEAD>
<BODY>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>插入声音</B></FONT></H1>
<HR>
<bgsound SRC="lene.mp3">
</BODY>
</HTML>
loop 背景音乐循环次数
<HTML>
<HEAD>
<TITLE>插入声音</TITLE>
</HEAD>
<BODY>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>插入声音</B></FONT></H1>
<HR>
<bgsound SRC="lene.mp3" loop=10>
</BODY>
</HTML>
全写： HyperText Mark-up Language
译名： 超文件注标式语言（译名之
简释：一种为普通文件中某些字句加上标示的语言，其目的在于运用标记（tag）使文件达到预期的显示效果
注意事项
1.< > 是所有标记的开始和结束
2.标记之间可以嵌套<h1><center>标题</h1></center>
3.在源代码中不区分大小写 <head> <Head> <HEAD> 作用相同
4.在标记中可以放置各种属性 <h1 align=center>
5.回车键和空格键在源代码中不起作用
6.注释 <!-- -->
1.页面的头部标记
<head> javascript css一般都定义在<head>中
一般说来头部定义的内容不会在网页上显示,而是通过另外的方式起作用 如:<title>
头部标记
标记 描述
<base> 当前文档的URL全称(基底网址)
<title> 设定显示在IE左上方的标题内容
<meta> 有关文档本身的元信息 例如：用于查询的关键字
<style> 设定CSS层叠样式表的内容
<link> 设定外部文件的连接
<script> 设定页面中程序脚本的内容
<title> 网页的标题
作用： 在浏览者保存该页面后变为保存后网页的文件名
可以添加进收藏夹中时显示该页面的名字
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
</HEAD>
<BODY>
<H3>我的第一个 HTML 文档</H3>
</BODY>
</HTML>
<base>基底网址标记 :一般用来设定IE中文件的绝对路径
一篇文档中的 <base>基底网址标记不能多于一个,必 须放于头部并且应该在任何包含URL地址的语句之前
<base href="url" target="window_name">
href属性指定了文档的基础URL地址
target定义的是打开页面的窗口
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<BASE href="http://www.163.com" target="_self">
</HEAD>
<BODY>
<H3>我的第一个 HTML 文档</H3>
<a href=new.html>新闻</a>
</BODY>
</HTML> 将鼠标放置到连接的上方
<meta>元信息标记 :功能定义页面中的信息, 这些信息不会在页面中显示
只会在源代码中显示
在HTML中可以包括任意数量的<meta>元信息标记
属性
http-equiv 生成一个HTTP标题域，它的属性与另一个属性相同
如：http-equiv=expires,实际取值由content确定
name 如果元数据是以关键字/取值的形式出现的
name表示关键字
content 关键字/取值的内容
定义编辑工具
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<meta name=generator content="notepad">
</HEAD>
<BODY>
<H3>我的第一个 HTML 文档</H3>
<a href=new.html>新闻</a>
</BODY>
</HTML> 以记事本做为网页的编辑工具
generator:为编辑器定义
content:定义编辑器的名称
设定关键字 关键字是为搜索引擎提供的 不宜过多
语法 <meta name="keywords" content="value">
keywords:定义关键字
content：定义关键字的内容
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<meta name=keywords content="mp3, mtv,音乐,摇滚">
</HEAD>
<BODY>
</BODY>
</HTML>
设定描述 是为搜索引擎提供的
语法 <meta name="discription" content="value">
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<meta name="discription" content="HTML语言">
</HEAD>
<BODY>
</BODY>
</HTML>
设定作者
在页面的源代码中，显示页面制作者的姓名及个人信息
语法 <meta name="author" content="value">
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<meta name="author" content="李四">
</HEAD>
<BODY>
</BODY>
</HTML>
设定字符集
gb2312 简体中文
big5 繁体中文
iso8850-1 英文
语法 <meta http-equiv="content-type"
content="text/html;charset=value">
http-equiv 传送HTTP通信协议的表头
content 定义页面的内码 CHARSET中写下内码的语系
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<meta http-equiv="content-type"
content="text/html;charset=gb2312">
</HEAD>
<BODY>
</BODY>
</HTML>
设定自动刷新 就是每隔几秒后刷新页面的内容
比如图文直播
语法 <meta http-equiv="refresh" content="value">
http-equiv 传送HTTP通信协议的表头
refresh 代表刷新
content 中写下刷新间隔的秒数
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<meta http-equiv="refresh"
content="3">
</HEAD>
<BODY>
<p>3秒刷新一次</p>
</BODY>
</HTML>
设定自动跳转
如可先在一个页面上显示欢迎信息，经过一段时间
自动跳转到指定的网页上
语法
<meta http-equiv="refresh" content="value" url="url_value">
http-equiv 传送HTTP通信协议的表头
refresh 代表刷新
content 中写下刷新间隔的秒数后跳转到文件地址
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<meta http-equiv="refresh"
content="5;
url=new.html">
</HEAD>
<BODY>
<h2><center>请稍等片刻......</center><h2>
<p>本页面5秒后跳转到新的地址</p>
</BODY>
</HTML>
设定转场效果
转场效果即网页的过渡，是指当进入或离开网站时
页面具有不同的切换效果
语法
<meta http-equiv=""
content="revealtrans(duration=value,transition=number)">
event设定页面进入或退出的时候产生切换效果
page-enter 表示进入网页时有网页的过渡效果
page-exit 表示退出网页时有网页的过渡效果
duration表示网页过渡效果的延续时间，单位为秒
transition 写下过渡效果的方式编号
效果 效果编号
盒状收缩 0
盒状展开 1
圆形收缩 2
圆形展开 3
向上擦除 4
向下擦除 5
向左擦除 6
向右擦除 7
垂直百页窗 8
水平百页窗 9
横向棋盘式 10
纵向棋盘式 11
溶解 12
左右向中部收缩 13
中部向左右收缩 14
上下向中部收缩 15
中部向上下展开 16
阶梯状向左下展开 17
阶梯状向左上展开 18
阶梯状向右下展开 19
阶梯状向右上展开 20
随机水平线 21
随机垂直线 22
随机 23
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<BODY bgcolor=#99ccff>
<center>
<h2><center>页面的过渡效果</h2>
<p><img src="new.gif" width=400 height=200></img></p>
<a href="new.html">进入网页</a><br>
<a href="old.html">退出网页</a><br>
</center>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<meta http-equiv="page-enter"
content="revealtrans(duration=3,transition=10)">
</head>
<BODY bgcolor=#99ccff>
<center>
<h2>显示页面的进入效果</h2>
<p><img src="我LOVE你.gif" width=400 height=200></img></p>
<a href="test1.html">返回</a>
</center>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<meta http-equiv="page-exit"
content="revealtrans(duration=5,transition=8)">
</head>
<BODY bgcolor=#99ccff>
<center>
<h2>显示页面的退出效果</h2>
<p><img src="快还钱.gif" width=400 height=200></img></p>
<a href="test1.html">返回</a>
</center>
</BODY>
</HTML>
2.页面的主体标记
页面的主体位于<body></body>之间
<body>元素的属性
属性 描述
text 设定页面文字的颜色
bgcolor 设定页面背景的颜色
background 设定页面背景的图象
bgproperties 设定页面背景的图象为固定，不随页面的滚动而滚动
link 设定页面默认的连接颜色
alink 设定鼠标单击时的连接颜色
vlink 设定访问过的连接颜色
topMargin 设定页面的上边距
leftMargin 设定页面的左边距
text 设定页面文字的颜色
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<BODY text=#0000ff>
<center>
<h2>设定页面的文字颜色为蓝色</h2>
</center>
</BODY>
</HTML>
bgcolor 设定页面背景的颜色
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<BODY text=#ffffff bgcolor="#336699">
<center>
<h2>设定页面的文字颜色为白色 背景颜色为深蓝色</h2>
</center>
</BODY>
</HTML>
background 设定页面背景的图象
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<BODY text=#336699 background="2008.jpg">
<center>
<h2>设定页面的文字颜色为深蓝色 背景图象为2008.jpg</h2>
</center>
</BODY>
</HTML>
bgproperties 设定页面背景的图象为固定，不随页面的滚动而滚动
bgproperties＝fixed 设定为固定的效果
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<BODY text=#336699 background="2008.jpg" bgproperties＝fixed>
<center>
<h2>设定页面的文字颜色为深蓝色 背景图象为2008.jpg</h2>
</center>
</BODY>
</HTML>
连接文字颜色的属性 默认连接文字的颜色为蓝色 访问过后的颜色是紫红色
这样有助于用户判断是否点击过该连接
在HTML中可以修改的连接状态共有3种
link 设定页面默认的连接颜色
alink 设定鼠标单击时的连接颜色
vlink 设定访问过的连接颜色
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<BODY text=#ffffff bgcolor="#336699"
link="red" alink="#00ff00" vlink="#cccccc" >
<center>
<h2>设定不同的连接颜色</h2><br>
<a href=new.html>连接</a>
<a href=old.html>连接</a>
</center>
</BODY>
</HTML>
topMargin 设定页面的上边距 单位为像素
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<BODY topMargin=30>
<p>设定页面的上边距为30像素</p>
</BODY>
</HTML>
leftMargin 设定页面的左边距
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
<BODY leftMargin=30>
<p>设定页面的左边距为30像素</p>
</BODY>
</HTML>
3.文字与段落
空格符号
<HTML>
<HEAD>
<TITLE>插入声音</TITLE>
</HEAD>
<BODY>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>插 入 声 音</B></FONT></H1>
<HR>
</BODY>
</HTML>
特殊符号 " "
& &
< <
> >
<HTML>
<HEAD>
<TITLE>插入声音</TITLE>
</HEAD>
<BODY>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>"音乐"</B></FONT></H1>
<HR>
</BODY>
</HTML>
<!-- --> 注释语句 如 <!-- HTML语言 --> 该代码不会在IE中显示
<!-- HTML语言 -->
<HTML>
<HEAD>
<TITLE>插入声音</TITLE>
</HEAD>
<BODY>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>"音乐"</B></FONT></H1>
<HR>
</BODY>
</HTML>
<h>标题字标记 <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>
字体依次逐级递减
<HTML>
<HEAD>
<TITLE>HTML 简介</TITLE>
</HEAD>
<BODY>
<H1>HTML 简介</H1>
<H2>HTML 简介</H2>
<H3>HTML 简介</H3>
<H4>HTML 简介</H4>
<H5>HTML 简介</H5>
<H6>HTML 简介</H6>
</BODY>
</HTML>
对齐属性 align left(默认) center right
<HTML>
<HEAD>
<TITLE>HTML 简介</TITLE>
</HEAD>
<BODY>
<H1 align=center>HTML 简介</H1>
<H2 align=right>HTML 简介</H2>
<H3 algin=left>HTML 简介</H3>
</body>
</HTML>
<b> <strong> 粗体标记
<b>HTML</b> 简介 <strong>简介</strong>
<i> <em> <cite> 斜体标记
<i>你好</i>欢迎你 <em>来听我的</em>HTML<cite>课程</cite>
<sup>上标记 <sub>下标记
<HTML>
<HEAD>
<TITLE>字符级标记示例</TITLE>
</HEAD>
<BODY>
<P ALIGN="center"><B>字符级标记示例</B></P>
<P>圆的面积=pi*r<SUP>2</SUP></P>
<P>水的化学符号：H<SUB>2</SUB>O</P>
<P><EM>这是一种很有趣的体验</EM></P>
</BODY>
</HTML>
<big>大字号标记 将当前的文字加大一级字号显示
<HTML>
<HEAD>
<TITLE>字符级标记示例</TITLE>
</HEAD>
<BODY>
这是一种很有趣的体验<br>
<big>这是一种很有趣的体验</big>
</BODY>
</HTML>
<small>小字号标记 将当前的文字缩小一级字号显示
<u>下划线标记
<HTML>
<HEAD>
<TITLE>字符级标记示例</TITLE>
</HEAD>
<BODY>
<u>这是一种很有趣的体验</u>
</BODY>
</HTML>
<s> <strike> 删除线标记
<HTML>
<HEAD>
<TITLE>字符级标记示例</TITLE>
</HEAD>
<BODY>
<s>这是一种很有趣的体验</s><br>
<strike>这是一种很有趣的体验</strike>
</BODY>
</HTML>
<address>地址文字标记 :主要用语显示E_MAIL 地址等文字内容 主要用于英文字体中显示
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<H3>我的第一个 HTML 文档</H3>
<P>这将是一种很有趣的体验
<H2>使用另一个标题</H2>
<P> 另一个段落元素
<ADDRESS>
<P><A href=“http://www.163.com/”>单击此处访问北京网易有限公司的主页</A> </ADDRESS>
</BODY>
</HTML>
<tt>打字机标记 该标记用来创建出打字机风格的字体,文字间是以等宽来显示的
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<H3>我的第一个 HTML 文档</H3>
<P>这将是一种很有趣的体验
<H2>使用另一个标题</H2>
<P> 另一个段落元素
<ADDRESS>
<P><A href=“http://www.163.com/”>单击此处访问北京网易有限公司的主页</A> </ADDRESS>
<tt>另一个段落元素</tt>
</BODY>
</HTML>
<code> <samp> 等宽文字标记 使用等宽字体来显示文字的内容 主要用于英文字体中显示
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<p><code>welcome you</code></p>
<p><samp>welcome you</samp></p>
</BODY>
</HTML>
<kbd> 在标记间的文字就是键盘输入命令的文字效果
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<p><kbd>welcome you</kbd></p>
</BODY>
</HTML>
<var> 可以显示变量的文字效果,使用斜体
<HTML>
<HEAD>
<TITLE>欢迎学习 HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<p><var>welcome you</var></p>
</BODY>
</HTML>
<font>字体标记
属性 字体face 字号size (-7---+7) 默认是3 颜色color
控制面板--->字体 Windows系统中的字体都可以显示在IE中
<HTML>
<HEAD>
<TITLE>欢迎使用HTML</TITLE>
</HEAD>
<BODY>
<H3><FONT SIZE = 3 COLOR = HOTPINK FACE = "隶书">我的第一个HTML文档 </FONT></H3>
<P>这<FONT COLOR = BLUE SIZE = 6>将会</FONT>是一种很有趣的体验
</BODY>
</HTML>
<basefont>基字标记
<HTML>
<HEAD>
<TITLE>欢迎使用HTML</TITLE>
</HEAD>
<BODY>
<BASEFONT SIZE = 3 COLOR = HOTPINK FACE = "隶书">我的第一个HTML文档 </BASEFONT>
<P>这<FONT COLOR = BLUE SIZE =+1>将会</FONT>是一种很有趣的体验
<P>这<FONT COLOR = BLUE SIZE =-1>将会</FONT>是一种很有趣的体验
</BODY>
</HTML>
段落标记
<p>段落标记 段落:就是一段格式上统一的文本 可以说段落就是带有硬回车的组合
属性 align(left center right)
<HTML>
<HEAD>
<TITLE>欢迎使用HTML</TITLE>
</HEAD>
<BODY>
<P align=left>是一种很有趣的体验</p>
<P align=center>是一种很有趣的体验</p>
<P align=right>是一种很有趣的体验</p>
</BODY>
</HTML>
<br> 换行标记 <nobr>不换行标记
<HTML>
<HEAD>
<TITLE>欢迎使用HTML</TITLE>
</HEAD>
<BODY>
<nobr>欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML欢迎使用HTML
</nobr>
</BODY>
</HTML>
<pre>预格式化标记:就是保留文字在源代码中的格式,页面的显示效果与在源代码的格式完全一致
<HTML>
<HEAD>
<TITLE>学习HTML</TITLE>
</HEAD>
<BODY>
<PRE>
汉普蒂·邓普蒂坐在墙上
汉普蒂·邓普蒂摔了一大跤
国王所有的马
和所有的人
也无法再把汉普蒂·邓普蒂拼起来
</PRE>
</BODY>
</HTML>
<center>居中标记
<HTML>
<HEAD>
<TITLE>学习HTML</TITLE>
</HEAD>
<BODY> <center>
<PRE>
汉普蒂·邓普蒂坐在墙上
汉普蒂·邓普蒂摔了一大跤
国王所有的马
和所有的人
也无法再把汉普蒂·邓普蒂拼起来
</PRE> </center>
</BODY>
</HTML>
<blockquote>缩排标记 :文字空2个字
<HTML>
<HEAD>
<TITLE>学习HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用于以文本块的形式设置内容格式。
<BLOCKQUOTE>
汉普蒂·邓普蒂坐在墙上
汉普蒂·邓普蒂摔了一大跤
国王所有的马
和所有的人
也无法再把汉普蒂·邓普蒂拼起来
</BLOCKQUOTE>
<P>请注意，上述内容显示为一个文本块。
</BODY>
</HTML>
<hr>水平线标记 用语段落与段落之间的分割
<HTML>
<HEAD>
<TITLE>学习HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用于以文本块的形式设置内容格式。
<hr>
<BLOCKQUOTE>
汉普蒂·邓普蒂坐在墙上
汉普蒂·邓普蒂摔了一大跤
国王所有的马
和所有的人
也无法再把汉普蒂·邓普蒂拼起来
</BLOCKQUOTE>
<hr>
<P>请注意，上述内容显示为一个文本块。
</BODY>
</HTML>
水平线的宽度属性 width 默认是 100%
<HTML>
<HEAD>
<TITLE>学习HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用于以文本块的形式设置内容格式。
<hr width=300>
<BLOCKQUOTE>
汉普蒂·邓普蒂坐在墙上
汉普蒂·邓普蒂摔了一大跤
国王所有的马
和所有的人
也无法再把汉普蒂·邓普蒂拼起来
</BLOCKQUOTE>
<hr width=80%>
<P>请注意，上述内容显示为一个文本块。
</BODY>
</HTML>
<hr width=300> :表示绝对宽度300像素
<hr width=80%> :水平线的相对宽度80%
水平线的高度属性 size 只能用绝对像素来定义
<HTML>
<HEAD>
<TITLE>学习HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用于以文本块的形式设置内容格式。
<hr width=300 size=1>
<BLOCKQUOTE>
汉普蒂·邓普蒂坐在墙上
汉普蒂·邓普蒂摔了一大跤
国王所有的马
和所有的人
也无法再把汉普蒂·邓普蒂拼起来
</BLOCKQUOTE>
<hr width=80% size=9>
<P>请注意，上述内容显示为一个文本块。
</BODY>
</HTML>
水平线去掉阴影的属性 noshade :默认是空心的立体效果
<HTML>
<HEAD>
<TITLE>学习HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用于以文本块的形式设置内容格式。
<hr width=300 size=2 noshade>
<BLOCKQUOTE>
汉普蒂·邓普蒂坐在墙上
汉普蒂·邓普蒂摔了一大跤
国王所有的马
和所有的人
也无法再把汉普蒂·邓普蒂拼起来
</BLOCKQUOTE>
<hr width=80% size=9 noshade>
<P>请注意，上述内容显示为一个文本块。
</BODY>
</HTML>
水平线颜色的属性 color
<HTML>
<HEAD>
<TITLE>学习HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用于以文本块的形式设置内容格式。
<hr width=300 size=2 noshade color=red>
<BLOCKQUOTE>
汉普蒂·邓普蒂坐在墙上
汉普蒂·邓普蒂摔了一大跤
国王所有的马
和所有的人
也无法再把汉普蒂·邓普蒂拼起来
</BLOCKQUOTE>
<hr width=80% size=9 noshade color=blue>
<P>请注意，上述内容显示为一个文本块。
</BODY>
</HTML>
水平线排列的属性 align(left center right)
<HTML>
<HEAD>
<TITLE>学习HTML</TITLE>
</HEAD>
<BODY>
<P>blockquote元素用于以文本块的形式设置内容格式。
<hr width=300 size=2 noshade color=red align=left>
<BLOCKQUOTE>
汉普蒂·邓普蒂坐在墙上
汉普蒂·邓普蒂摔了一大跤
国王所有的马
和所有的人
也无法再把汉普蒂·邓普蒂拼起来
</BLOCKQUOTE>
<hr width=80% size=9 noshade color=blue align=right>
<P>请注意，上述内容显示为一个文本块。
</BODY>
</HTML>
4.列表
有序列表:指的是按照数字或字母顺序排列列表项目
语法: <ol> <li> ... </ol>
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<OL>
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
</OL>
</BODY>
</HTML>
在有序列表的默认情况下,使用数字序号作为列表的开始
有序列表的类型 1 a A i I
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<OL type=I>
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
</OL>
</BODY>
</HTML>
有序列表的起始属性start
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<OL type=A start=5>
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
</OL>
</BODY>
</HTML>
<ul>无序列表标记 各个列表项之间没有顺序级别之分
<li>做为每一个项目的起始
<dir>目录列表标记 用于显示文件内容的目录大纲 通常用于设计一个压缩的较窄的列表
如 字典的索引
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<dir>
<LI>星期一</LI>
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
</dir>
</BODY>
</HTML>
<dl>定义列表标记
使用<dl>作为定义列表的声明 <dt>使用作为名词的标题 <dd>用作解释名词
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<DL>
<DT>星期日
<DD>一周的第一天
<DT>HTML
<DD>超文本标记语言
<DT>互联网
<DD>网络的网络
</DL>
</BODY>
</HTML>
<menu> 菜单列表标记
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<menu>
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
</menu>
</BODY>
</HTML>
type无序列表的类型属性 默认是黑色实心圈 disc circle square
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<menu type=circle>
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
</menu>
</BODY>
</HTML>
列表的嵌套
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<DL>
<DT><u>程序员应具备的开发知识</u><br><br>
<DD>html css javascript
<DD>struts spring hibernate
<DD>tomcat weblogic
<br><br><br>
<DT><u>程序员应具备的数据库知识</u><br><br><br><br>
<DD>sqlserver oracle
</DL>
</BODY>
</HTML>
无序列表和有序列表的嵌套
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<ul type=square>
<li><u>J2EE常见的框架技术</u>
<ol type=I>
<li> struts
<li> spring
<li> hibernate
</ol>
<li><u>J2EE常见的服务器技术</u>
<ol type=I>
<li> sqlserver
<li> oracle
<li> mysql
</ol>
<li><u>Java网页常用的技术</u>
<ol type=I>
<li> jsp
<li> servlet
<li> javabean
</ol>
</ul>
</body>
</HTML>
5.超连接
URL:urource Locator 通用资源标识符 指每个网站的独立地址
<a>连接标记
属性 href:指定连接地址
Name:给连接命名
Title:给连接提示文字
Target:指定连接的目的窗口
内部链接 :到同一文档内或同一网站内的其他部分的链接
外部链接 :到其他网站或服务器上的页面的链接。
绝对路径:为文件提供的完全路径 如:http://www.sina.com
当连接到其它网站的时候必须使用绝对连接
相对路径: 适合网站的内部连接
相对连接的使用方法:
如果连接到同一目录下,则只需输入要连接的文档名称
如果连接到下一级目录下的文件中,先输入目录名,然后/ 再输入文件名
如果连接到上一级目录的文件,先输入../ 再输入目录名,文件名
根路径: 适合网站的内部连接 不建议使用 以/开始 再输入目录名,文件名
/root/index.html
设定连接的目标窗口
target属性 属性值 _parent 在上一级窗口中打开
_blank 在新窗口中打开
_self 在同一窗口中打开
_top 在IE 的整个窗口中打开 忽略任何框架
书签
链接到同一文档的各个部分 test1.html
<HTML>
<HEAD><TITLE>使用链接</TITLE></HEAD>
<BODY>
<A HREF = #Internet>互联网</A><BR><BR>
<A HREF = #HTML>HTML简介</A><BR><BR>
<A HREF = #Consistency>多样化和统一性</A><BR><BR>
<A name = Internet>互联网</A><BR>
<P>互联网是网络的网络。也就是说，计算机网络可以跨越国家甚至全球的范围连接到其他网络。世界上所有的计算机都可以通过TCP/IP传输协议绑定在一起。</P>
<A name = HTML>HTML简介</A><BR>
<P>超文本标记语言是Web用来创建和识别文档的标准语言。虽然它不是标准通用标记语言 (SGML) 的子集，但与它有着某种程度上的关联。SGML是一种文档格式语言表示方法。</P>
<A name = Consistency>多样性和统一性</A><BR>
<P>万事万物都离不开多样性和统一性这样一条基本准则。也就是说，所有的事物都可以融合成一个整体，同时，又保持自己独特的与众不同的一面。站点的独特性恰恰来源于它的一致性。颜色、字体、分栏布局以及其他设计元素应在站点的每个部分都保持一致。 </P>
<BR><BR><BR><BR><BR><BR>
</BODY>
</HTML>
test2.html 连接到其它页面中的书签
<h1>J2EE采用的框架技术</h1>
<a href=test1.html#Internet>互联网</a>
<a href=test1.html#HTML>HTML简介</a>
<a href=test1.html#Consistency>多样性和统一性</a>
<h1>J2EE采用的框架技术</h1>
外部连接 指跳转到当前网站的外部 需要写连接的绝对地址
url的格式
WWW http:// 进入万维网站点
Ftp ftp:// 进入文件传输服务器
News news:// 启动新闻讨论组
Telnet telnet:// 启动telnet方式
Gopher gopher:// 访问一个gopher服务器
E-mail mailto:// 启动邮件
连接到外部网站
<a href="http://www.sina.com.cn">连接到新浪</a>
发送E-MAIL 会自动打开系统自带的邮件软件如:outlook
<a href="mailto:baiyunri2005@163.com">给老师写信</a>
<a href="mailto:baiyunri2005@163.com?subject=J2EE知识
&cc=zhangsan@263.net&bcc=lisi@163.com">给老师写信</a>
subject 电子邮件主题
CC 抄送收件人
BCC 暗送收件人
连接 FTP 文件传输协议
<a href="ftp://ftp.pku.edu.cn">北京大学</a>
连接telnet
就是一台计算机连接到另一台计算机上 共享网络的硬件与软件资源
<a href="telnet://162.105.203.245:23">北京大学</a>
连接到 gopher 它是主要的信息检索工具
<a href="gopher://dosfan.lib.nic.edu/1">gopher站点</a>
连接到News新闻组
新闻组是由世界各地上千个新闻服务器组成的
它是个人向新闻服务器所张贴的邮件的集合
<a href="news://news.newsfan.net">News新闻组</a>
下载文件
<a href="女孩·足球.mp3">下载软件</a>
6.图片
<img>
src 图片的源文件
alt 图片的提示文字
width 图片的宽度
height 图片的高度
vspace 图片与文字的垂直间距
hspace 图片与文字的水平间距
border 图片的边框
algin 排列 left图片在文字的左侧
right图片在文字的右侧
top 文字位于图片的顶端
bottom文字位于图片的底端
middle文字位于图片的中部
示例:<P>
<center>
<a href=第五题.html>
<IMG ALIGN=bottom
SRC=2439.gif
alt="小孩"
height=200 width=200 border=1
vspace=30 hspace=3>
</a>底部对齐在此处定义颜色
</center></P>
7.表格
<table>...</table> 表格标记
border 属性定义边框的宽度,单位为像素
width 属性定义表格的宽度
Heigth 属性定义表格的高度
bordercolor 属性定义表格的边框颜色
bgcolor 属性定义表格的背景颜色
background 属性定义表格的背景图象
cellspacing 属性定义单元格间距,单位为像素
cellpadding 属性定义单元格内容和边框之间的距离
align 属性定义表格的水平对齐方式 center left right
bordercolorlight 属性定义表格的亮边框颜色
bordercolordark 属性定义表格的暗边框颜色
示例:<TABLE border=1 width=600 heigth=50 bordercolor=red bgcolor=yellow
background=我LOVE你.gif align=center cellspacing=10 cellpadding=25>
<caption>...</caption> 表格标题
align 属性定义表格标题的水平对齐方式 center(默认) left right
valign 属性定义表格标题的垂直对齐方式 top(默认) millde bottom
示例: <CAPTION valign=bottom align=right>创建表</CAPTION>
<th>...</th> 表格的表头(指表格的第一行,文字以居中加粗显示)
algin
valgin
bgcolor
background
bordercolor
bordercolorlight
bordercolordark
width
height
<tr>...</tr> 行标记
algin
valgin
bgcolor
background
bordercolor
bordercolorlight
bordercolordark
<td>...</td> 列标记
algin
valgin
bgcolor
background
bordercolor
bordercolorlight
bordercolordark
width
height
rowspan跨行属性 示例:<TD rowspan=3>J2EE框架</TD>
colspan跨列属性 <TD colspan=3>
8.表单 是实现动态网页的一种主要外在形式
表单的主要功能是收集信息,浏览者的信息
过程为:输入的数据提交给服务器 由服务器的相关程序进行处理
表单标记<form>
属性 表单的名字 name
表单的传送方法 method(get默认 post)
用来定义表单处理程序的位置 action
<FORM action="http://mysite.com/processform" METHOD="post">
...表单内容...
</FORM>
其中,Method属性中,Get方法时将表单内容附加在URL地址后面,所以对提交信息的长度进行了限制,最多不可以超过8192个字符,如果信息太长,将被截去,从而导致意想不到的处理结果.同时Get方法不具有保密性,不是于处理如信用卡卡号等要求保密的内容,而且补农传送非ASCII码的字符.
Post方法是将用户在表单中填写的数据包含在表单主体中,一起传送到服务器商的处理程序中,该方法没有字符的限制,它包含了ISO10646的字符集,是一种邮寄方式,在浏览器的地址栏不显示提交的信息,这中方式传送的数据是没有限制的.当不指明方式时,默认为Get方式.
<form>标记中可以包含以下四个标记
<input>表单输入标记
<select>菜单和列表标记
<option>菜单和列表项目标记
<textarea>文本域标记
<input>表单输入标记
属性 name:域的名称
Type:域的类型 text 文字域
password 密码域
file 文件域
checkbox 复选框
radio 单选框
button 普通按纽
submit 提交按纽
reset 重置按纽
Hidden 隐藏域
Image 图象域(图象提交按钮)
text 文字域
属性 name 文字域的名字
maxlength 文字域的最大输入字符数
size 文字域的宽度
value 文字域的默认值
<INPUT TYPE="TEXT" NAME="RESULT_TextField-6" SIZE="30" MAXLENGTH="30" value=请在这里输入值>
password 密码域
<INPUT TYPE="password" NAME="RESULT_TextField-6" SIZE="30" MAXLENGTH="30" value=请在这里输入值>
file 文件域 比如邮件的附件功能 招聘时上传照片
<input type=file name=File>
checkbox 复选框 从若干选项中选择多个
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-0" VALUE="CheckBox-0">股票
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-1" VALUE="CheckBox-1">期权
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-2" VALUE="CheckBox-2">互惠基金
属性 checked 表示被默认选种
value 表示选种后传到服务器的值
<INPUT TYPE="password" NAME="RESULT_TextField-6" SIZE="30" MAXLENGTH="30" value=请在这里输入值>
<input type=file name=File>
<P> <INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-0" checked>股票
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-1">期权
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-2">互惠基金<BR></p>
radio 单选框
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-0" VALUE="Radio0">新手
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-1" VALUE="Radio-1">中级
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-2" VALUE="Radio-2">专家
属性 checked 表示被默认选种
value 表示选种后传到服务器的值
<p> <INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-0" checked >新手
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-1">中级
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-2">专家</p>
button 普通按纽 主要配合javascript脚本来进行表单的处理
属性 value 表示按纽上的文字
<input type=button value=按钮>
submit 提交按纽
<INPUT TYPE="SUBMIT" NAME="submit1" VALUE="提交">
reset 重置按纽 可以清除表单的内容
<HTML>
<HEAD> <TITLE>表单示例</TITLE></HEAD>
<BODY bgColor="#ffffcc" Text="#000099">
<FORM ACTION="http://www.mysite.com/FormSite" METHOD="POST">
<B><H2 align="left">证券调查示例</H2></B>
<p><B>投资经验</B></p>
<p> <INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-0">新手
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-1">中级
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-2">专家</p>
<p><B>投资类型</B></P>
<P> <INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-0">股票
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-1">期权
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-2">互惠基金<BR></p>
<p><B>今年选择什么证券？</B></P>
<P> <INPUT TYPE="TEXT" NAME="RESULT_TextField-6" SIZE="30" MAXLENGTH="30"></p>
<p>
<INPUT TYPE="SUBMIT" NAME="submit1" VALUE="提交">
<INPUT TYPE="RESET" NAME="reset1" VALUE="重置"></p>
</FORM>
</BODY>
</HTML>
Image 图象域(图象提交按钮) 指可以用在提交按纽位置上图片
这幅图片具备按纽的功能
<input type=image name=Image src=酷吧.gif>
Hidden 隐藏域 在页面中对用户是不可见的
使用它的目的在于收集或发送信息以利于被处理表单的 程序使用
菜单和列表标记<select> <option>
是为了节省网页的空间而产生
属性 name :菜单和列表的名称
size :显示列表的数目
value : 选项值
selected: 默认选项
multiple:列表中的项目多选
<SELECT NAME="RESULT_RadioButton-5">
<OPTION value="网上交易" multiple>1)网上交易</OPTION>
<OPTION value="电话交易">2)电话交易</OPTION>
<OPTION value="经纪人代理" selected>3)经纪人代理</OPTION>
<OPTION value="其他">4)其他</OPTION>
</SELECT>
文字域标记<textarea> 可以在其中输入多行的文本
属性 name文字域名称
rows文字域行数
cols文字域列数
value 文字域的默认值
<TEXTAREA NAME="RESULT_TextArea-8" ROWS="7" COLS="20"></TEXTAREA>
行会自动添加 列是固定不变的
9.框架
左右分割窗口的属性cols
<HTML>
<HEAD>
<TITLE>嵌套框架</TITLE>
</HEAD>
<FRAMESET cols="33%, 33%, 34%">
<FRAME src = " 酷吧.gif">
<FRAMESET rows="40%, 50%">
<FRAME src = "2439.gif">
<FRAME src = "2439.gif">
</FRAMESET>
<FRAME src = "酷吧.gif">
</FRAMESET>
</HTML>
上下分割窗口的属性rows
<HTML>
<HEAD>
<TITLE>嵌套框架</TITLE>
</HEAD>
<FRAMESET rows="33%, 33%,*">
<FRAME src = " 酷吧.gif">
<FRAMESET rows="40%, 50%">
<FRAME src = "2439.gif">
<FRAME src = "2439.gif">
</FRAMESET>
<FRAME src = "酷吧.gif">
</FRAMESET>
</HTML>
在使用了框架集的页面中,页面的body被frameset所取代 然后通过frame标记定义每个框架
*表示剩下的部分
framespacing 设置框架边框宽度属性
bordercolor 设置框架边框颜色属性
<HTML>
<HEAD>
<TITLE>嵌套框架</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%" framespacing=15 bordercolor=red>
<FRAME src = " 酷吧.gif">
<FRAMESET rows="40%, 50%">
<FRAME src = "2439.gif">
<FRAME src = "2439.gif">
</FRAMESET>
<FRAME src = "酷吧.gif">
</FRAMESET>
</HTML>
<frame>通过它可以定义框架页面的内容 如:<frame src=test.html>
name:框架名称属性 <frame src=test.html name="right">
frameborder 框架边框显示属性 0不显示边框 1显示边框
可用于 <frame> <FRAMESET>
scrolling框架滚动条显示属性 yes 显示滚动条
no 不显示滚动条
auto 根据页面的长度自动判断是否显示滚动条
如:<frame src=test.html scrolling=no>
<frame src=test.html scrolling=auto>
noresize 代表禁止改变框架的尺寸大小
如:<frame src=test.html noresize>
marginwidth 边框边缘宽度属性 比如文字与图片与框架边框的宽度距离
如:<frame src=test.html marginwidth=40>
marginheight 边框边缘高度属性 比如文字与图片与框架边框的高度距离
如:<frame src=test.html marginheight=40>
<noframes>标记表示不支持框架技术 对于较底的IE版本而言
<HTML>
<HEAD>
<TITLE>嵌套框架</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%" bordercolor=red>
<FRAME src = " 酷吧.gif" marginwidth=40>
<FRAME src = "酷吧.gif" marginheight=40>
</FRAMESET>
<noframes>
对不起,您的浏览器不支持框架
</noframes>
</HTML>
<iframe> 浮动框架 在浏览器中可以嵌套子窗口,在其中显示页面的内容
<HTML>
<HEAD>
<TITLE>嵌套框架</TITLE>
</HEAD>
<body>
<iframe src=" 酷吧.gif" width=400 height=300 name="iframe" align=center>
</iframe>
</body>
</HTML>
10.多媒体页面
<marquee>滚动文字标记
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<marquee>你好,欢迎您的光临!!!</marquee>
</body>
</HTML>
滚动方向属性 direction (up down left right)
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<marquee direction =up>你好,欢迎您的光临!!!</marquee>
<marquee direction =down>你好,欢迎您的光临!!!</marquee>
<marquee direction =left>你好,欢迎您的光临!!!</marquee>
<marquee direction =right>你好,欢迎您的光临!!!</marquee>
</body>
</HTML>
滚动方式属性 behavior scroll:循环往复 slide:只进行一次滚动
alternate:交替进行滚动
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<marquee behavior =scroll>你好,欢迎您的光临!!!</marquee>
<br><br>
<marquee behavior =slide>你好,欢迎您的光临!!!</marquee>
<br><br>
<marquee behavior =alternate>你好,欢迎您的光临!!!</marquee>
</body>
</HTML>
滚动速度属性 scrollamount
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<marquee behavior =scroll scrollamount=30>你好,欢迎您的光临!!!</marquee>
<br><br>
<marquee behavior =slide>你好,欢迎您的光临!!!</marquee>
<br><br>
<marquee behavior =altenate>你好,欢迎您的光临!!!</marquee>
</body>
</HTML>
滚动延迟属性 scrolldelay 500 等于0.5秒
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<marquee behavior =scroll scrolldelay=500 >你好,欢迎您的光临!!!</marquee>
<br><br>
<marquee behavior =slide>你好,欢迎您的光临!!!</marquee>
<br><br>
<marquee behavior =altenate>你好,欢迎您的光临!!!</marquee>
</body>
</HTML>
滚动循环属性 loop
滚动范围属性 width height
<HTML>
<HEAD>
<TITLE>学习 HTML</TITLE>
</HEAD>
<BODY>
<marquee behavior =scroll width=200 height=60 >你好,欢迎您的光临!!! </marquee>
<br><br>
<marquee behavior =slide>你好,欢迎您的光临!!!</marquee>
<br><br>
<marquee behavior =altenate>你好,欢迎您的光临!!!</marquee>
</body>
</HTML>
嵌入多媒体内容
mp3:是MPEG Layer3 的简称
<HTML>
<HEAD>
<TITLE>插入声音</TITLE>
</HEAD>
<BODY>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>插入声音</B></FONT></H1>
<HR>
<EMBED ALIGN=CENTER WIDTH="200" HEIGHT="200" SRC="lene.mp3" AUTOSTART="TRUE">
</BODY>
</HTML>
<bgsound>背景音乐标记 当打开页面后自动播放
<HTML>
<HEAD>
<TITLE>插入声音</TITLE>
</HEAD>
<BODY>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>插入声音</B></FONT></H1>
<HR>
<bgsound SRC="lene.mp3">
</BODY>
</HTML>
loop 背景音乐循环次数
<HTML>
<HEAD>
<TITLE>插入声音</TITLE>
</HEAD>
<BODY>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>插入声音</B></FONT></H1>
<HR>
<bgsound SRC="lene.mp3" loop=10>
</BODY>
</HTML>