关于HTML
HTML英语意思是:Hypertext Marked Language,即超文本标记语言,是一种用来制作超文
本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档,它能独立于各种操
作系统平台(如UNIX,WINDOWS等)。自1990年以来HTML就一直被用作World Wide Web
的信息表示语言,用于描述Homepage的格式设计和它与WWW上其它Homepage 的连结
信息。使用HTML语言描述的文件,需要通过WWW浏览器显示出效果。
所谓超文本,因为它可以加入图片、声音、动画、影视等内容,因为它可以从一个文件
跳转到另一个文件,与世界各地主机的文件连接。
通过HTML可以表现出丰富多彩的设计风格
图片调用:<IMG SRC="文件名">
文字格式:<FONT SIZE="+5 " COLOR="00FFFF">文字</FONT>
通过HTML可以实现页面之间的跳转
页面跳转:〈A HREF="文件路径/文件名"></A>
通过HTML可以展现多媒体的效果
声频:<EMBED SRC="音乐文件名" AUTOSTART=true>
视频:<EMBED SRC="视频文件名" AUTOSTART=true>
HTML的基本结构
超文本文档分文档头和文档体两部分,在文档头里,对这个文档进行了一些必要的定义,
文档体中才是要显示的各种文档信息。
<HTML>
<HEAD>
头 部 信 息
</HEAD>
<BODY>
文 档 主 体, 正 文 部 分
</BODY>
</HTML>
其中<HTML>在最外层, 表示这对标记间的内容是HTML文 档。我们还会看到一些
Hompage省略<HTML>标记,因为.html 或.htm 文件被Web浏览器默认为是HTML文档。
<HEAD> 之间包括文档的头部信息,如文档总标题等,若不需头部信息则可省略此标记。
<BODY> 标记一般不省略, 表示正文内容的开始。
下面是一个最基本的超文本文档的源代码:
<HTML>
<HEAD>
<TITLE>一个简单的HTML示例</TITLE>
</HEAD>
<BODY>
<CENTER>
<H3>欢迎光临我的主页</H3>
<BR>
<HR>
<FONT SIZE=2>
这是我第一次做主页,无论怎么样,我都会努力做好!
</FONT>
</CENTER>
</BODY>
</HTML>
━┓
┃文件头
━┛
━┓
┃
┃
┃
┃文件体
┃
┃
┃
┃
━┛
超文本中的标签
刚刚接触超文本,遇到的最大的障碍就是一些用“<”和“>”括起来的句子,我们称它为
标签,是用来分割和标记文本的元素,以形成文本的布局、文字的格式及五彩缤纷的画面。
1. 单标签
某些标记称为“单标签”,因为它只需单独使用就能完整地表达意思,这类标记的语法是:
< 标签名称>
最常用的单标签是<BR>, 它表示换行。
2.双标签
另一类标记称为“双标签”,它由“始标签”和“尾标签”两部分构成,必须成对使用,其中
始标签告诉Web浏览器从此处开始执行该标记所表示的功能,而尾标签告诉Web浏览器在
这里结束该功能。始标签前加一个斜杠(/)即成为尾标记。这类标记的语法是:
<标签> 内 容</ 标签>
其中“内容” 部分就是要被这对标记施加作用的部分。例如你想突出对某段文字的显示,
就将此段文字放在一<EM> </EM>标记中:
<EM>第一:</EM>
3.标签属性
许多单标记和双标记的始标记内可以包含一些属性, 其语法是:
< 标签名字 属性1 属性2 属性3 … >
各属性之间无先后次序,属性也可省略(即取默认值),例如单标记<HR>表示在文档
当前位置画一条
水平线(horizontal line),一般是从窗口中当前行的最左端一直画到最右端。带一些属性:
<HR SIZE=3 ALIGN=LEFT WIDTH="75%">
其中SIZE属性定义线的粗细,属性值取整数,缺为1;ALIGN属性表示对齐方式,可
取LEFT(左对齐,
缺省值),CENTER(居中),RIGHT(右对齐);WIDTH 属性定义线的长度,可取相对值,
(由一对 " "
号括起来的百分数,表示相对于充满整个窗口的百分比),也可取绝对值(用整数表示的屏
幕像素点的
个数,如WIDTH=300),缺省值是"100%"。
标题
一般文章都有标题、副标题、章和节等结构,HTML中也提供了相应的标题标签<Hn>,其中
n为标题的等HTML总共提供六个等级的标题,n越小,标题字号就越大,以下列出所有等
级的标题:
〈H1>…</H1> 第一级标题
〈H2>…</H2> 第二级标题
〈H3>…</H3> 第三级标题
〈H4>…</H4> 第四级标题
〈H5>…</H5> 第五级标题
〈H6>…</H6> 第六级标题
请看下面的例子:
<html>
<head>
<title>标题示例</title>
</head>
<body>
这是一行普通文字<P>
〈H1>一级标题</H1>
〈H2>二级标题</H2>
〈H3>三级标题</H3>
〈H4>四级标题</H4>
〈H5>五级标题</H5>
〈H6>六级标题</H6>
</body>
</html>
换行<br>
在编写HTML文件时,我们不必考虑太细的设置,也不必理会段落过长的部分会被浏览器切
掉。因为,在HTML语言规范里,每当浏览器窗口被缩小时,浏览器会自动将右边的文字转
折至下一行。所以,编写者对于自己需要断行的地方,应加上<br>标签。
请看下面的例子:
<html>
<head>
<title>无换行示例</title>
</head>
<body>
登鹳雀楼 白日依山尽,黄河入海流。欲穷千里目,更上一层楼。
</body>
</html>
不换行<nobr>
<nobr>
请改变您浏览器窗口的宽度, 使之小于这一行的宽度, 看看这个标记的作用!
</nobr>
请改变您浏览器窗口的宽度,使之小于这一行的宽度,看看这个标记的作用!
段落标签<P>
为了排列的整齐、清晰,文字段落之间,我们常用<P></P>来做标记。文件段落的开始由
<P>来标记,段落的结束由</P>来标记,</P>是可以省略的,因为下一个<P>的开始就意
味着上一个<P>的结束。
<P>标签还有一个属性ALING,它用来指名字符显示时的对齐方式,一般值有CENTER、
LEFT、RIGHT三种。
下面,我们用两个例子来说明这个标签的用法。
<html>
<head>
<title>段落标签</title>
</head>
<body>
<P ALIGN=CENTER>
浣溪沙 <P>一曲新词酒一杯,去年天气旧亭台,夕阳西下几时回。<P>无可奈何花落去,
似曾相识燕归来。小园香径几徘徊。</P>
</body>
</html>
水平线段<HR>
这个标签可以在屏幕上显示一条水平线,用以分割页面中的不同部分。<HR>有三个属
性:
size 水平线的宽度
width 水平线的长,用占屏幕宽度的百分比或象素值来表示
align 水平线的对齐方式,有LEFT RIGHT CENTER三种
noshade 线段无阴影属性,为实心线段
我们可以用几个例子来说明这线段的用法:
--------------------------------------------------------------------------------
线段粗细的设定
<HTML>
<HEAD>
<TITLE>线段粗细的设定</TITLE>
</HEAD>
<BODY>
<P>这是第一条线段,无size设定,取内定值SIZE=1来显示<BR>
<HR>
<P>这是第二条线段,SIZE=5<BR>
<HR SIZE=5>
<P>这是第三条线段,SIZE=10<BR>
<HR SIZE=10>
</BODY>
</HTML>
线段长度的设定
<HTML>
<HEAD>
<TITLE>线段长度的设定</TITLE>
</HEAD>
<BODY>
<P>这是第一条线段,无WIDTH设定,取WIDTH内定值100%来显示<BR>
<HR SIZE=3>
<P>这是第二条线段,WIDTH=50(点数方式)<BR>
<HR WIDTH=50 SIZE=5>
<P>这是第三条线段,WIDTH=50%(百分比方式)<BR>
<HR WIDTH=50% SIZE=7>
</BODY>
</HTML>
线段排列的设定
<HTML>
<HEAD>
<TITLE>线段排列的设定</TITLE>
</HEAD>
<BODY>
<P>这是第一条线段,无ALIGN设定,(取内定值CENTER显示)<BR>
<HR WIDTH=50% SIZE=5>
<P>这是第二条线段,向左对齐BR>
<HR WIDTH=60% SIZE=7 ALIGN=LEFT>
<P>这是第三条线段,向右对齐<BR>
<HR WIDTH=70% SIZE=2 ALIGN=RIGHT>
</BODY>
</HTML>
无阴影的设定
<HTML>
<HEAD>
<TITLE>无阴影的设定</TITLE>
</HEAD>
<BODY>
<P>这是第一条线段,无NOSHADE设定,取内定值阴影效果来显示<BR>
<HR WIDTH=80% SIZE=5>
<P>这是第二条线段,有NOSHADE设定<BR>
<HR WIDTH=80% SIZE=7 ALIGN=LEFT NOSHADE>
</BODY>
</HTML>
文字的大小设置
提供设置字号大小的是FONT,FONT有一个属性SIZE,通过指定SIZE属性就能设置字
号大小,而SIZE属性的有效值范围为1-7,其中缺省值为3。我们可以SIZE属性值之前
加上“+”、“-”字符,来指定相对于字号初始值的增量或减量。
请看示例:
<html>
<head>
<title>字号大小</title>
</head>
<body>
<font size=7>这是size=7的字体</font><P>
<font size=6>这是size=6的字体</font><P>
<font size=5>这是size=5的字体</font><P>
<font size=4>这是size=4的字体</font><P>
<font size=3>这是size=3的字体</font><P>
<font size=2>这是size=2的字体</font><P>
<font size=1>这是size=1的字体</font><P>
<font size=-1>这是size=-1的字体</font><P>
</body>
</html>
文字的字体与样式
HTML4.0提供了定义字体的功能,用FACE属性来完成这个工作。FACE的属性值可以
是本机上的任一字体类型,但有一点麻烦的是,只有对方的电脑中装有相同的字体才可以在
他的浏览器中出现你预先设计的风格。
<font face="字体">
请看例子:
<HTML>
<HEAD>
<TITLE>字体</TITLE>
</HEAD>
<BODY>
<CENTER>
<FONT face="楷体_GB2312">欢迎光临</FONT><P>
<FONT face="宋体">欢迎光临</FONT><P>
<FONT face="仿宋_GB2312">欢迎光临</FONT><P>
<FONT face="黑体">欢迎光临</FONT><P>
<FONT face="Arial">Welcom my homepage.</FONT><P>
<FONT face="Comic Sans MS">Welcom my homepage.</FONT><P>
</CENTER>
</BODY>
</HTML>
为了让文字富有变化,或者为了着意强调某一部分,HTML提供了一些标签产生这些效果,
现将常用的标签列举如下:
<B> </B> 粗体 HTML语言
<I> </I> 斜体 HTML语言
<U> </U> 加下划线 HTML语言
<TT> <TT> 打字机字体 HTML语言
<BIG> </BIG> 大型字体 HTML语言
<SMALL> </SMALL> 小型字体 HTML语言
<BLINK> </BLINK> 闪烁效果 HTML语言
<EM> </EM> 表示强调,一般为斜体 HTML语言
<STRONG> </STRONG> 表示特别强调,一般为粗体 HTML语言
<CITE> </CITE> 用于引证、举例,一般为斜体 HTML语言
现在我们用一个实例来看看效果:
<html>
<head>
<title>字体样式</title>
</head>
<body>
<B>黑体字</B>
<P> <I>斜体字</I>
<P> <U>加下划线</U>
<P> <BIG>大型字体</BIG>
<P> <SMALL>小型字体</SMALL>
<P> <BLINK>闪烁效果</BLINK>
<P><EM>Welcome</EM>
<P><STRONG>Welcome</STRONG>
<P><CITE>Welcom</CITE></P>
</body>
</html>
文字的颜色
文字颜色设置格式如下:
<font color=color_value>…</font>
这里的颜色值可以是一个十六进制数(用“#”作为前缀),也可以是以下16种颜色名称。
以下是全部颜色的代码:
Black = "#000000"
HTML英语意思是:Hypertext Marked Language,即超文本标记语言,是一种用来制作超文
本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档,它能独立于各种操
作系统平台(如UNIX,WINDOWS等)。自1990年以来HTML就一直被用作World Wide Web
的信息表示语言,用于描述Homepage的格式设计和它与WWW上其它Homepage 的连结
信息。使用HTML语言描述的文件,需要通过WWW浏览器显示出效果。
所谓超文本,因为它可以加入图片、声音、动画、影视等内容,因为它可以从一个文件
跳转到另一个文件,与世界各地主机的文件连接。
通过HTML可以表现出丰富多彩的设计风格
图片调用:<IMG SRC="文件名">
文字格式:<FONT SIZE="+5 " COLOR="00FFFF">文字</FONT>
通过HTML可以实现页面之间的跳转
页面跳转:〈A HREF="文件路径/文件名"></A>
通过HTML可以展现多媒体的效果
声频:<EMBED SRC="音乐文件名" AUTOSTART=true>
视频:<EMBED SRC="视频文件名" AUTOSTART=true>
HTML的基本结构
超文本文档分文档头和文档体两部分,在文档头里,对这个文档进行了一些必要的定义,
文档体中才是要显示的各种文档信息。
<HTML>
<HEAD>
头 部 信 息
</HEAD>
<BODY>
文 档 主 体, 正 文 部 分
</BODY>
</HTML>
其中<HTML>在最外层, 表示这对标记间的内容是HTML文 档。我们还会看到一些
Hompage省略<HTML>标记,因为.html 或.htm 文件被Web浏览器默认为是HTML文档。
<HEAD> 之间包括文档的头部信息,如文档总标题等,若不需头部信息则可省略此标记。
<BODY> 标记一般不省略, 表示正文内容的开始。
下面是一个最基本的超文本文档的源代码:
<HTML>
<HEAD>
<TITLE>一个简单的HTML示例</TITLE>
</HEAD>
<BODY>
<CENTER>
<H3>欢迎光临我的主页</H3>
<BR>
<HR>
<FONT SIZE=2>
这是我第一次做主页,无论怎么样,我都会努力做好!
</FONT>
</CENTER>
</BODY>
</HTML>
━┓
┃文件头
━┛
━┓
┃
┃
┃
┃文件体
┃
┃
┃
┃
━┛
超文本中的标签
刚刚接触超文本,遇到的最大的障碍就是一些用“<”和“>”括起来的句子,我们称它为
标签,是用来分割和标记文本的元素,以形成文本的布局、文字的格式及五彩缤纷的画面。
1. 单标签
某些标记称为“单标签”,因为它只需单独使用就能完整地表达意思,这类标记的语法是:
< 标签名称>
最常用的单标签是<BR>, 它表示换行。
2.双标签
另一类标记称为“双标签”,它由“始标签”和“尾标签”两部分构成,必须成对使用,其中
始标签告诉Web浏览器从此处开始执行该标记所表示的功能,而尾标签告诉Web浏览器在
这里结束该功能。始标签前加一个斜杠(/)即成为尾标记。这类标记的语法是:
<标签> 内 容</ 标签>
其中“内容” 部分就是要被这对标记施加作用的部分。例如你想突出对某段文字的显示,
就将此段文字放在一<EM> </EM>标记中:
<EM>第一:</EM>
3.标签属性
许多单标记和双标记的始标记内可以包含一些属性, 其语法是:
< 标签名字 属性1 属性2 属性3 … >
各属性之间无先后次序,属性也可省略(即取默认值),例如单标记<HR>表示在文档
当前位置画一条
水平线(horizontal line),一般是从窗口中当前行的最左端一直画到最右端。带一些属性:
<HR SIZE=3 ALIGN=LEFT WIDTH="75%">
其中SIZE属性定义线的粗细,属性值取整数,缺为1;ALIGN属性表示对齐方式,可
取LEFT(左对齐,
缺省值),CENTER(居中),RIGHT(右对齐);WIDTH 属性定义线的长度,可取相对值,
(由一对 " "
号括起来的百分数,表示相对于充满整个窗口的百分比),也可取绝对值(用整数表示的屏
幕像素点的
个数,如WIDTH=300),缺省值是"100%"。
标题
一般文章都有标题、副标题、章和节等结构,HTML中也提供了相应的标题标签<Hn>,其中
n为标题的等HTML总共提供六个等级的标题,n越小,标题字号就越大,以下列出所有等
级的标题:
〈H1>…</H1> 第一级标题
〈H2>…</H2> 第二级标题
〈H3>…</H3> 第三级标题
〈H4>…</H4> 第四级标题
〈H5>…</H5> 第五级标题
〈H6>…</H6> 第六级标题
请看下面的例子:
<html>
<head>
<title>标题示例</title>
</head>
<body>
这是一行普通文字<P>
〈H1>一级标题</H1>
〈H2>二级标题</H2>
〈H3>三级标题</H3>
〈H4>四级标题</H4>
〈H5>五级标题</H5>
〈H6>六级标题</H6>
</body>
</html>
换行<br>
在编写HTML文件时,我们不必考虑太细的设置,也不必理会段落过长的部分会被浏览器切
掉。因为,在HTML语言规范里,每当浏览器窗口被缩小时,浏览器会自动将右边的文字转
折至下一行。所以,编写者对于自己需要断行的地方,应加上<br>标签。
请看下面的例子:
<html>
<head>
<title>无换行示例</title>
</head>
<body>
登鹳雀楼 白日依山尽,黄河入海流。欲穷千里目,更上一层楼。
</body>
</html>
不换行<nobr>
<nobr>
请改变您浏览器窗口的宽度, 使之小于这一行的宽度, 看看这个标记的作用!
</nobr>
请改变您浏览器窗口的宽度,使之小于这一行的宽度,看看这个标记的作用!
段落标签<P>
为了排列的整齐、清晰,文字段落之间,我们常用<P></P>来做标记。文件段落的开始由
<P>来标记,段落的结束由</P>来标记,</P>是可以省略的,因为下一个<P>的开始就意
味着上一个<P>的结束。
<P>标签还有一个属性ALING,它用来指名字符显示时的对齐方式,一般值有CENTER、
LEFT、RIGHT三种。
下面,我们用两个例子来说明这个标签的用法。
<html>
<head>
<title>段落标签</title>
</head>
<body>
<P ALIGN=CENTER>
浣溪沙 <P>一曲新词酒一杯,去年天气旧亭台,夕阳西下几时回。<P>无可奈何花落去,
似曾相识燕归来。小园香径几徘徊。</P>
</body>
</html>
水平线段<HR>
这个标签可以在屏幕上显示一条水平线,用以分割页面中的不同部分。<HR>有三个属
性:
size 水平线的宽度
width 水平线的长,用占屏幕宽度的百分比或象素值来表示
align 水平线的对齐方式,有LEFT RIGHT CENTER三种
noshade 线段无阴影属性,为实心线段
我们可以用几个例子来说明这线段的用法:
--------------------------------------------------------------------------------
线段粗细的设定
<HTML>
<HEAD>
<TITLE>线段粗细的设定</TITLE>
</HEAD>
<BODY>
<P>这是第一条线段,无size设定,取内定值SIZE=1来显示<BR>
<HR>
<P>这是第二条线段,SIZE=5<BR>
<HR SIZE=5>
<P>这是第三条线段,SIZE=10<BR>
<HR SIZE=10>
</BODY>
</HTML>
线段长度的设定
<HTML>
<HEAD>
<TITLE>线段长度的设定</TITLE>
</HEAD>
<BODY>
<P>这是第一条线段,无WIDTH设定,取WIDTH内定值100%来显示<BR>
<HR SIZE=3>
<P>这是第二条线段,WIDTH=50(点数方式)<BR>
<HR WIDTH=50 SIZE=5>
<P>这是第三条线段,WIDTH=50%(百分比方式)<BR>
<HR WIDTH=50% SIZE=7>
</BODY>
</HTML>
线段排列的设定
<HTML>
<HEAD>
<TITLE>线段排列的设定</TITLE>
</HEAD>
<BODY>
<P>这是第一条线段,无ALIGN设定,(取内定值CENTER显示)<BR>
<HR WIDTH=50% SIZE=5>
<P>这是第二条线段,向左对齐BR>
<HR WIDTH=60% SIZE=7 ALIGN=LEFT>
<P>这是第三条线段,向右对齐<BR>
<HR WIDTH=70% SIZE=2 ALIGN=RIGHT>
</BODY>
</HTML>
无阴影的设定
<HTML>
<HEAD>
<TITLE>无阴影的设定</TITLE>
</HEAD>
<BODY>
<P>这是第一条线段,无NOSHADE设定,取内定值阴影效果来显示<BR>
<HR WIDTH=80% SIZE=5>
<P>这是第二条线段,有NOSHADE设定<BR>
<HR WIDTH=80% SIZE=7 ALIGN=LEFT NOSHADE>
</BODY>
</HTML>
文字的大小设置
提供设置字号大小的是FONT,FONT有一个属性SIZE,通过指定SIZE属性就能设置字
号大小,而SIZE属性的有效值范围为1-7,其中缺省值为3。我们可以SIZE属性值之前
加上“+”、“-”字符,来指定相对于字号初始值的增量或减量。
请看示例:
<html>
<head>
<title>字号大小</title>
</head>
<body>
<font size=7>这是size=7的字体</font><P>
<font size=6>这是size=6的字体</font><P>
<font size=5>这是size=5的字体</font><P>
<font size=4>这是size=4的字体</font><P>
<font size=3>这是size=3的字体</font><P>
<font size=2>这是size=2的字体</font><P>
<font size=1>这是size=1的字体</font><P>
<font size=-1>这是size=-1的字体</font><P>
</body>
</html>
文字的字体与样式
HTML4.0提供了定义字体的功能,用FACE属性来完成这个工作。FACE的属性值可以
是本机上的任一字体类型,但有一点麻烦的是,只有对方的电脑中装有相同的字体才可以在
他的浏览器中出现你预先设计的风格。
<font face="字体">
请看例子:
<HTML>
<HEAD>
<TITLE>字体</TITLE>
</HEAD>
<BODY>
<CENTER>
<FONT face="楷体_GB2312">欢迎光临</FONT><P>
<FONT face="宋体">欢迎光临</FONT><P>
<FONT face="仿宋_GB2312">欢迎光临</FONT><P>
<FONT face="黑体">欢迎光临</FONT><P>
<FONT face="Arial">Welcom my homepage.</FONT><P>
<FONT face="Comic Sans MS">Welcom my homepage.</FONT><P>
</CENTER>
</BODY>
</HTML>
为了让文字富有变化,或者为了着意强调某一部分,HTML提供了一些标签产生这些效果,
现将常用的标签列举如下:
<B> </B> 粗体 HTML语言
<I> </I> 斜体 HTML语言
<U> </U> 加下划线 HTML语言
<TT> <TT> 打字机字体 HTML语言
<BIG> </BIG> 大型字体 HTML语言
<SMALL> </SMALL> 小型字体 HTML语言
<BLINK> </BLINK> 闪烁效果 HTML语言
<EM> </EM> 表示强调,一般为斜体 HTML语言
<STRONG> </STRONG> 表示特别强调,一般为粗体 HTML语言
<CITE> </CITE> 用于引证、举例,一般为斜体 HTML语言
现在我们用一个实例来看看效果:
<html>
<head>
<title>字体样式</title>
</head>
<body>
<B>黑体字</B>
<P> <I>斜体字</I>
<P> <U>加下划线</U>
<P> <BIG>大型字体</BIG>
<P> <SMALL>小型字体</SMALL>
<P> <BLINK>闪烁效果</BLINK>
<P><EM>Welcome</EM>
<P><STRONG>Welcome</STRONG>
<P><CITE>Welcom</CITE></P>
</body>
</html>
文字的颜色
文字颜色设置格式如下:
<font color=color_value>…</font>
这里的颜色值可以是一个十六进制数(用“#”作为前缀),也可以是以下16种颜色名称。
以下是全部颜色的代码:
Black = "#000000"