HTML(即超文本标记语言)是WWW的描述语言。HTML文本是由HTML标记组成的描述性文本,HTML 标记可以用于说明文字、图形、动画、声音、表格和链接等。HTML的结构包括头部(head)和主体(body)两大部分,其中头部描述浏览器所需的信息,而主体则包含所要说明的具体内容。
HTML 是英文 HyperText Markup Language 的缩写,即超文本标记语言,是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台。所谓超文本,是因为它可以加入图片、声音、动画和视频等内容。
超文本文档分为头部和主体两部分。文档头部是对这个文档进行的一些必要的定义,文档主体中是要显示的各种文档信息。
<html>
<head>
网页头部信息
</head>
<body>
网页主体正文部分
</body>
</HTML>
其中<HTML>在最外层,表示这对标记间的内容是HTML文档。也可以省略<html>标记,因为.html或.htm文件被浏览器默认为是HTML文档。<head>之间为文档的头部信息,如文档标题等,若不需头部信息则可省略此标记。<body>标记一般不能省略,它表示正文内容的开始。
下面是一个最基本的超文本文档结构。
<html>
<head>
<title>最简单的超文本文档</title>
</head>
<body>
<center>
<h3>欢迎光临我的主页</h3>
<br>
<hr>
<font size=2>
这是我第一次做主页,欢迎提出您的建议!
</font>
</center>
</body>
</html>
在浏览器中浏览效果如图2-1所示。
HTML的任何标记都由“<”和“>”符号围起来,称为标记,是用来分割标记文本的元素,从而形成文本的布局、文字的格式及五彩缤纷的画面。在起始标记的标记名前加上符号“/”便是其终止标记,如</table>。
1.单标记
某些标记称为“单标记”,因为它只需单独使用就能完整地表达意思。这类标记的语法如下:
<标记名称>
最常用的单标记是<br>, 它表示换行。
2.双标记
另一类标记称为“双标记”,它由“始标记”和“尾标记”两部分构成,必须成对使用。其中,始标记告诉Web 浏览器从此处开始执行该标记所表示的功能;而尾标记告诉Web 浏览器在这里结束该功能。始标记前加一个斜杠(/)即成为尾标记。这类标记的语法如下。
<标记>内容</标记>
其中“内容”部分就是要被这对标记施加作用的部分。
3.标记属性
许多单标记和双标记的始标记内可以包含一些属性。其语法如下。
<标记名字 属性 1 属性 2 属性 3 … >
各属性之间无先后次序,属性也可省略,如单标记<hr>表示在文档当前位置画一条。
HTML的格式非常简单,是由文字和标记组合而成的纯文本文件,几乎任何的文字编辑器,如 Windows 中的记事本、写字板都可以用来编写 HTML 文件,只要将文件存成 ASCII纯文本格式,并且以.htm或.html为扩展名即可。
1.使用记事本创建HTML文件
下面学习如何使用记事本建立HTML文件,具体操作步骤如下。
① 启动计算机,选择任务栏中的【开始】|【所有程序】|【附件】|【记事本】命令,打开记事本编辑窗口,即可编写HTML代码,如图2-2所示。
② 当编辑完 HTML 文件后,选择【文件】|【保存】命令,将它存为扩展名为.htm 或.html的文件即可,如图2-3所示。
③ 打开网页,在浏览器中浏览网页,如图2-4所示。
2.使用Dreamweaver创建HTML文件
使用 Dreamweaver CS6 创建 HTML 文件,具体操作步骤如下。
① 打开 Dreamweaver CS6,单击文档中的【代码】按钮,打开代码视图,在代码视图中可以输入HTML代码,如图2-5所示。
② 输入代码完成后,设计视图中的效果如图2-6所示。
文本是网页传播信息的基本载体,在网页中的重要地位是可想而知的。对于任何一个基本网页来说,文本都是必不可少的,文本的格式化也是非常重要的。下面介绍常用的文字标记和页面布局标记。
一般文章都有标题、副标题、章和节等结构,HTML 中也提供了相应的标题标记<Hn>。HTML总共提供6个等级的标题,n越小,标题字号就越大,以下列出所有等级的标题。
<H1>…</H1> 一级标题
<H2>…</H2> 二级标题
<H3>…</H3> 三级标题
<H4>…</H4> 四级标题
<H5>…</H5> 五级标题
<H6>…</H6> 六级标题
下面举例讲述标题标记的使用方法。
① 打开 Dreamweaver CS6,单击文档中的【代码】按钮,打开代码视图,在代码视图中输入如下HTML代码,如图2-7所示。
<html>
<head>
<title>标题示例</title>
</head>
<body>
这是一行标题文字<P>
<H1>一级标题</H1>
<H2>二级标题</H2>
<H3>三级标题</H3>
<H4>四级标题</H4>
<H5>五级标题</H5>
<H6>六级标题</H6>
</body>
</html>
② 输入代码完成后,在设计视图中可以看到每一个标题的字体为黑体字,效果如图2-8所示。
在编写HTML文件时不必担心段落过长的部分会被浏览器遮住,因为每当浏览器窗口被缩小时,浏览器会自动将右边的文字转移至下一行,所以对于需要换行的地方,应加上<br>标记。
下面讲述如何使用换行标记<br>,具体操作步骤如下。
① 打开 Dreamweaver CS6,单击文档中的【代码】按钮,打开代码视图,在代码视图中输入如下HTML代码,如图2-9所示。
<html>
<head>
<title>没有换行示例</title>
</head>
<body>
第一阶段:
2013年8月1日---2014年1月16日
第二阶段:
2013年8月17日---2014年2月6日
第三阶段:
2013年8月7日---2013年4月1日
第四阶段:
2013年8月2日---2013年4月11日
</body>
</html>
② 输入代码完成后,设计视图中的效果如图2-10所示。
③ 单击文档中的【代码】按钮,打开代码视图,在代码视图中日期的后面添加<br>代码,如图2-11所示。
<html>
<head>
<title>换行示例</title>
</head>
<body>
第一阶段:
2013年8月1日---2014年1月16日<br>
第二阶段:
2013年8月17日---2014年2月6日<br>
第三阶段:
2013年8月7日---2013年4月1日<br>
第四阶段:
2013年8月2日---2013年4月11日
</body>
</html>
④ 输入代码完成后,设计视图中的效果如图2-12所示。
为了使文本排列的整齐和清晰,文字段落之间经常用<p>和</p>来做标记。段落的开始由<p>来标记,结束由</p>来标记。</p>是可以省略的,因为下一个<p>的开始就意味着上一个<p>的结束。
<p>标记还有一个属性aling,它用来指名字符显示时的对齐方式,一般值有center、left、right 3 种。
下面讲述如何使用段落标记<P>,具体操作步骤如下。
① 打开 Dreamweaver CS6,单击文档中的【代码】按钮,打开代码视图,在代码视图中输入如下HTML代码,如图2-13所示。
<html>
<head>
<title>段落标记</title>
</head>
<body>
<p align=center>
活动细则 <P>1.“知识大富翁”活动分 4 个阶段进行,每个阶段按积分排名产生阶段大奖,每日根据用户答题情况产生 20 名中奖用户。<P>2. 可以参加本次活动的用户为:至少绑定了一项参加本次活动的付费业务的用户,卡用户及全港通用户除外。参加本次活动的付费业务包括白金业务、钻石业务、天天宽频、宽带联盟。</P>
</body>
</html>
② 输入代码完成后,设计视图中的效果如图2-14所示。
水平线对组织信息很有用。在页面上,可以使用一条或多条水平线以可视方式分隔文本和对象。水平线段<hr>有以下3个属性。
size:水平线的宽度。
width:水平线的长,用占屏幕宽度的百分比或像素值来表示。
align:水平线的对齐方式,有 left、right 和 center 3 种。
noshade:线段无阴影属性,为实心线段。
下面讲述如何设置水平线的宽度,具体操作步骤如下。
① 打开 Dreamweaver CS6,单击文档中的【代码】按钮,打开代码视图,在代码视图中可输入如下HTML代码,如图2-15所示。
<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>
② 输入代码完成后,设计视图中的效果如图2-16所示。
文字大小设置的标记是font,font有一个size属性,通过指定size属性就能设置字号大小。可以在size属性值之前加上“+”、“-”字符,来指定相对于字号初始值的增量或减量。
通过下面的实例可以看出字号的大小。
① 打开 Dreamweaver CS6,单击文档中的【代码】按钮,打开代码视图,在代码视图中输入如下HTML代码,如图2-17所示。
② 输入代码完成后,设计视图中的效果如图2-18所示。
<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>
Dreamweaver中的文本格式设置与使用标准字处理程序类似。可以为文本设置默认格式、更改所选文本的字体、大小、颜色和对齐方式,或者应用文本样式如粗体、斜体、上划线和下划线。
为了丰富文字的变化,或强调某一部分,HTML提供了如下所示标记。
<b> </b> 粗体
<i> </i> 斜体
<u> </u> 加下划线
<tt> <tt> 打字机字体
<big> </big> 大型字体
<small> </small> 小型字体
<blink> </blink> 闪烁效果
<em> </em> 表示强调,一般为斜体
<strong> </strong> 表示特别强调,一般为粗体
<cite> </cite> 用于引证、举例,一般为斜体
通过下面的实例可以看出文字的变化。
① 启动 Dreamweaver CS6,单击文档中的代码按钮,打开代码视图,在代码视图中输入如下HTML代码,如图2-19所示。
<html>
<head>
<title>字体样式</title>
<style type="text/css">
<!--
-->
</style>
</head>
<body>
<B>黑体字</B>
<P> <I>斜体字</I>
<P> <U>加下划线</U>
<P> <BIG>大型字体</BIG>
<P> <SMALL>小型字体</SMALL>
</P>
</body>
</html>
② 输入代码完成后,设计视图中的效果如图2-20所示。
文本的颜色值可以是一个16进制数。文字颜色设置格式如<font color=color_value>…</font>。
通过下面的实例可以看出文字颜色的变化。
① 打开 Dreamweaver CS6,单击文档中的代码按钮,打开代码视图,在代码视图中输入如下HTML代码,如图2-21所示。
<html>
<head>
<title>文字的颜色</title>
</head>
<body bgcolor="#000000">
<center>
<font color="#ff0000">文字的颜色</font><br>
<font color="#00ff00">文字的颜色</font> <br>
<font color="#0000cc">文字的颜色</font><br>
<font color="#ffff00">文字的颜色</font><br>
<font color="red">文字的颜色</font> <br>
<font color="blue">文字的颜色</font><br>
<font color="yellow">文字的颜色</font><br>
</center>
</body>
</html>
② 输入代码完成后,设计视图中的效果如图2-22所示。
互联网之所以在这么短的时间内如此广泛地受到人们的青睐,很重要的一个原因是它能支持多媒体的特性,如图像、声音和动画等。
src属性指明了所要链接的图像文件地址,这个图形文件可以是位于本地机器上的图形,也可以是位于远端主机上的图形。
例如在代码视图中输入如下代码。
<html>
<head>
<title>插入图像</title>
</head>
<body>
<img src="3.jpg" width="387" height="348">
</body>
</html>
在文档中预览效果,如图2-23所示。
浏览器可以播放的音乐格式有MIDI音乐、WAV音乐和AU格式。在利用网络下载的各种音乐格式中,MP3是压缩率最高,音质最好的文件格式。
例如在代码视图中输入如下代码。
<html>
<head>
<title>播放音乐</title>
</head>
<body>
<EMBED SRC="MUSIC_41.WAV" autostart=true hidden=true loop=true>
现在让我们一起来听music!
</body>
</html>
在文档中预览的效果如图2-24所示,在浏览器中预览效果即可以听到优美的音乐,如图2-25所示。
可以通过不同方式,使用不同格式将视频添加到Web页面。视频可以下载,或者可以对视频进行流式处理以便在下载它的同时播放它。用浏览器可以播放的格式有MAV格式和AVI格式。与音乐的播放一样,可以使用EMBED标记播放视频。
<EMBED SRC="yinpin.avi" autostart=false loop=false width=350 height=250>
表格标记对制作网页是很重要的,现在很多网页都使用多重表格。利用表格可以实现各种不同的布局方式,并保证当浏览者改变页面字体大小的时候保持页面布局,还可以任意地进行背景和前景颜色的设置。
表格的基本结构是<table>...</table>,例如在代码视图中输入代码。
<table border=2 cellpadding="1" cellspacing="1">
<tr><th>语文</th><th>数学</th><th>英语</th>
<tr><td>90</td><td>78</td><td>89</td>
</table>
打开拆分视图效果,如图2-26所示。
表格标题的位置,可由align属性来设置,分别由表格上方和表格下方组成。
设置标题位于表格上方:<caption align=top>...</caption>
设置标题位于表格下方:<caption align=bottom>...</caption>
如设置表格位于表格的上方,在网页文档中效果如图2-27所示。
一般情况下,表格的总长度和总宽度是根据各行和各列的总和自动调整的,如果要直接固定表格的大小,可以使用下列方式。
<table width=n1 height=n2>
width和height属性分别指定表格一个固定的宽度和长度,n1和n2可以用像素表示,也可以用百分比来表示。下面是一个长为50像素,宽为80像素的表格,如图2-28所示。
表格中数据的排列方式有两种,左右排列和上下排列。左右排列是以align属性来设置,而上下排列则由valign属性来设置。其中左右排列的位置可分为3种:左对齐(left)、右对齐(right)和居中对齐(center);而上下排列比较常用的有4种:顶端(top)、居中(middle)、底部(bottom)和基线(baseline)。
图2-29所示的表格中的数据采用的是左右排列方式。
在表格中,用户既可以对整个表格设置底色,也可以对任何一行、一个表格使用背景色。
表格的背景颜色:<table bgcolor=#>
行的背景颜色:<tr bgcolor=#>
表格的背景颜色:<th bgcolor=#>
在Dreamweaver代码视图中添加如下代码。
<html>
<head>
<title><title>
</head>
<table border=2 bgcolor=Silver>
<tr>
<th bgcolor=ffaa00>学校</th>
<th bgcolor=#00CC33>学生</th>
<th rowspan=2>上网</th>
<tr bgcolor=yellow>
<td>北京</td>
<td>上海</td>
</table>
</body>
</html>
在文档中的效果如图2-30所示。
超级链接命令可以链接到图像、对象或其他文档或文件的文本链接。
一个链接的基本格式如下。
<a href="链接地址">链接文字</a>
标记<a>表示一个链接的开始,</a>表示链接的结束。
href属性定义了这个链接所指的地方。
通过点击“链接文字”可以到达指定的文件。
例如要链接到新浪网,可输入<a href="http://www.sian.com.cn">新浪首页</A>。
链接分为本地链接、url链接和目录链接。在链接的各个要素中,链接地址是最重要的,一旦路径上出现差错,该链接就无法从用户端取得。
本地链接:对同一台机器上的不同文件进行的连接称为本地链接,它使用UNIX或DOS系统中文件路径的表示方法,采用绝对路径或相对路径来指示一个文件。
URL链接:如果链接的文件在其他服务器上,就要弄清所指向的文件是采用的哪一种URL地址。URL意思是统一资源定位器,通过它可以以多种通信协议的方式与外界沟通来存取信息。
目录链接:前面所谈的链接地址,只是单纯的指向一份文件,对于直接指到某文件上部、下部或是中央部分,以上方法是无法做到的。
在网页中使用框架可以把浏览器的窗口分隔为若干个相互独立又有联系的区域,在每个区域中显示一个独立的网页文件。下面就介绍框架标记的使用。
框架是浏览器窗口中的一个区域,它可以显示与浏览器窗口的其他部分中所显示内容无关的HTML文档。
框架结构的基本格式如下所示。
<frameset>
<frame src="url">
<frame src="url">
...
</frameset>
在有frames结构的HTML文件中,frames文件的整体结构如下所示。
<html>
<head>
<title></title>
</head>
<frameset>
<frame src="url">
<frame src="url">
...... </frameset>
</html>
将窗口分为几块,横向分用 rows 属性,纵向分用 cols 属性,每一块的大小可以通过调节这两个属性的值来实现。
<frameset cols="80,300,400">
<frameset rows="150,200,300">
字符串中的数字表示每个分窗口所占的尺寸,数字中间用逗号隔开,有几个数字就表示分出了几个窗口。当然,这其中的任何一个数字都可以由“*”来代替,这样表示由浏览器自动设置其大小。
由Frames分出来的几个窗口的内容并不是静止不变的,往往是一个窗口的内容随着另一个窗口的要求而不断变化,这就提高了frames的利用价值。为了完成各窗口之间的相互操作,必须为每一个窗口起一个名字,这个名字用属性name来定义,例如:<frame src="frame/left.html"name="left">。
定义了窗口名称,还应该设置target属性,target属性指定了所链接的文件出现在哪一个窗口。target的值可以是name定义的名称,也可以是以下4类值。
<a href=url target=_blank> 显示一个新窗口
<a href=url target=_self> 显示在同一个窗口
<a href=url target=_parent> 显示在Frameset的前一份文件的窗口
<a href=url target=_top> 显示在整个浏览器窗口
表单在网页中起着重要作用,它是与用户交互信息的主要手段。一个表单至少应该包括说明性文字、填写的表格、提交和重填按钮等内容。用户在填写了所需的资料之后,按下“提交”按钮,这样所填资料就会通过专门的CGI接口传到Web服务器上。网页设计者随后就能在Web服务器上看到用户填写的资料,从而完成了反馈和交流。表单常用<form>、<input>、<option>、<select>等标记。
表单标记<form>的主要作用是设置表单的起始位置,并指定处理表单数据程序的 url 地址。其基本语法结构如下。
<form action=url method=get|post name=value οnreset=function
onsubmit=function target=window> </form>
其中action:用于设定处理表单数据程序url的地址。这样的程序通常是CGI应用程序,采用电子邮件方式时,用action="mailto:邮件地址"。
method:指定数据传送到服务器的方式。有两种主要的方式,当method=get时,将输入数据加在 action 指定的地址后面传送到服务器;当 method=post 时则将输入数据按照 HTTP传输协议中的POST传输方式传送到服务器,用电子邮件接收用户信息采用这种方式。
name:用于设定表单的名称。onrest和onsubmit是主要针对reset按钮和submit按钮来说的,分别设定了在按下相应的按钮之后要执行的子程序。
target:指定输入数据结果显示在哪个窗口,这需要与<frame>标记配合使用。
每个文本域之所以会有不同的类型,就在于文本域的类型设置不同。例如,图2-31所示的文本域类型是【密码】。
其参数设置如下。
name="名称":设置文本框的名称。
size="数值":设置文本框显示的宽度。
value="预设内容":设置文本框的预设内容。
align="对齐方式":设置文本框的对齐方式,其值有:top(向上对齐)、middle(中间对齐)、bottom(向下对齐)、right(向右对齐)、left(向左对齐)、texttop(向文字顶部对齐)、baseline(向文字底部对齐)、absmiddle(绝对居中)、absbottom(绝对置下)等。
maxlength="数值":设置文本框中可设置输入的最大长度。
选择【插入】|【表单】|【单选按钮】命令,可以插入单选按钮,单选按钮通常是好几个选项一起列出来供使用者选择,一次只能从中选一个,故称为单选按钮,如图2-32所示。
其参数设置如下。
name="名称":设置单选按钮的名称。
value="内容":设置单选按钮的内容、值或是意义。
align="对齐方式":设置对齐方式,其值有:top(向上对齐)、middle(向中对齐)、bottom (向下对齐)、right(向右对齐)、left(向左对齐)、texttop(向文字顶部对齐)、baseline(向文字底部对齐)、absmiddle(绝对居中)、absbottom(绝对置下)等。
checked:设置为预设选取值。
选择【插入】|【表单】|【复选框】命令,可以插入复选框,复选框通常是好几个选项一起摆出来供使用者勾选,一次可以同时选择好几个,故为复选框,如图2-33所示。
其参数设置如下。
name="名称":设置复选框的名称。
value="内容":设置复选框的内容、值或是意义。
align="对齐方式":设置复选框的对齐方式,其值有:top(向上对齐)、middle(向中对齐)、bottom(向下对齐)、right(向右对齐)、left(向左对齐)、texttop(向文字顶部对齐)、baseline(向文字底部对齐)、absmiddle(绝对居中)、absbottom(绝对置下)等。
checked:设置为预设选取值。
通常表单填完之后,都会有一个提交按钮以及重置的按钮如图2-34所示。
其参数设置如下。
name="名称":设置此按钮的名称。
value="文字":设置按钮上要显示的文字,若是没有设置,浏览器也会自动加上“提交”、“重置”等字样。
align="对齐方式":设置此按钮的对齐方式,其值有:top(向上对齐)、middle(居中对齐)、bottom(向下对齐)、right(向右对齐)、left(向左对齐)、texttop(向文字顶部对齐)、baseline(向文字底部对齐)、absmiddle(绝对居中)及absbottom(绝对置下)等。
利用<select name="名称">可以制作一个列表/菜单,另外,还需要配合<option>标记来产生选项,如图2-35所示。
其参数设置如下。
size="数值":设置列表框的大小,预设值为1。
multiple:设置列表框为复选,可以一次选好几个选项。