Download presentation
Presentation is loading. Please wait.
1
第3章 超文本标记语言(HTML) 3.1 基本结构标记 3.2 文本格式标记 3.3 超链接标记<A></A>
3.1 基本结构标记 3.2 文本格式标记 3.3 超链接标记<A></A> 3.4 图象标记<img> 3.5 表格标记<table></table> 3.6 地址标记<address></address> 3.7 表单标记<form></form> 返回主目录
2
第3章 超文本标记语言（HTML） 3.1基本结构标记
开始与结束标记 <HTML> </HTML> HTML文档的开始标记是<HTML>，它告诉浏览器下面的内容是HTML文档；在HTML文档结束处要有对应的</HTML>标记，它告诉浏览器HTML文档结束了。 开始与结束标记语法格式为： <HTML> 这里开始的内容为HTML文档。 </HTML>
3
3.1.2头部标记<head></head>
头部标记语法格式为： <head> HTML文档的头部内容。 </head> 头部内容里面一般包括标题。
4
3.1.3标题标记<title></title >
<title>和< /title >标记中间所包含的文字，就是这个Web页面的标题，它写在头部标记之中。标题会显示在Web浏览器最上面的title（标题）栏的位置。用户可以把标题加入书签（Bookmark）中，还可以提供加入列表（Hostlist、Bookmark）的文本，所以一定要使标题标记文本有明确的意义，最好用中文。 标题标记语法格式为： <title>Web页面的标题</title >
5
3.1.4主体标记<body></body>
<body>标记是Web页面主体的开始，对应结束符号是</body>。Web页面的主要内容都在<body>标记之中。<body>还有一些属性可以设定背景色、背景图形等。 主体标记语法格式为： <body> 这里是HTML文档的主体内容。 </body>
6
3.1.5基本结构举例 下面我们以一个简单的例子说明如何用HTML语言来编写Web页面程序的。这里3-1.HTML是一个文本文件，可以用任何编辑软件来编写。如果使用Word编辑软件，保存文件时在“保存类型”中选择“纯文本”。 例3-1.HTML，电子商务系统页面。 <HTML> <head> <title>电子商务系统页面</title>
7
看看电子商务系统页面 </head> <body> 使用电子商务系统，了解电子商务系统 </body> </HTML> 在IE浏览器的地址栏中直接输入要打开的文件名（如G: \ dzsw \ 3-1.HTML），按回车键或者在IE浏览器菜单[文件]的下拉菜单中选择“打开”命令，在弹出窗口中按[浏览]按钮，通过“搜寻”窗口找到要打开的文件（如G:\dzsw\3-1.HTML），然后单击[打开]按钮、[确定]按钮，即可在浏览器中看到图3-1所示的页面。
8
图3-1 电子商务系统页面
9
3.2文本格式标记 3.2.1标题字体<H></H>
从图3-1中可以发现，头部和主体内容连在一起，而且字体大小也一样。HTML语言如何解决这个问题呢？它是通过标题字体来处理的。标题字体可以自动放在指定位置，且显示不同的黑体字。 标题字体是通过<H></H>标记实现的。被<H1>和</H1>夹在中间的文字，是文章里的大号字标题字体。从<H1>、<H2>到<H6>，可以依次标注出六个层级的子标题，各子标题的差别在于，标题数字小的标题文字比数字大的标题文字更大、更粗、更显眼。每遇到一个标题，当前段落就会终止，标题前后自动留出一定的空白，文本自动从下一行开始。
10
标题字体语法格式为： <Hi>标题文字</Hi> (i=1,…,6) 例3-2.HTML，不同的标题字体。 <HTML> <body><H1>电子商务系统（1号字体）！</H1> <H2>电子商务系统（2号字体）！</H2> <H3>电子商务系统（3号字体）！</H3> <H4>电子商务系统（4号字体）！</H4>
11
<H5>电子商务系统（5号字体）！</H5>
</body> </HTML> 例3-2.HTML显示结果如图3-2所示。
12
图3-2不同标题的字体
13
3.2.2字体大小标记<font></font>
字体大小标记语法格式为： <font size=#>文字</font> #=1,2,3,4,5,6,7 或 +#,-#,缺省时为3号字体。 例3-3.HTML，基本文字字体的大小。 <HTML>
14
<body> <font size=7>商务系统设计（7号字体）</font> <font size=5>商务系统设计（5号字体）</font> <font size=3>商务系统设计（3号字体）</font> <font size=2>商务系统设计（2号字体）</font> <font size=1>商务系统设计（1号字体）</font> </body> </HTML> 例3-3.HTML显示结果如图3-3所示。
15
图3-3 不同大小字体的文字
16
3.2.3 段落标记<P></P>与换行标记<br>
<P>是HTML格式中特有的段落元素。在HTML格式里我们不必关心文章的每行宽度，即不用担心每行文字太长而被截掉，HTML会根据窗口的宽度将行内过长文字自动转折到下一行。在原始文件中的段落标记<P>，将指出在此告一段落，下面的文字应另起一段。如果没有遇到<P>，就会把所有的文字都挤到一个段落里。另外一个类似的标记元素是<br>。<br>标记用来标识一个换行动作，相当于字处理文件中的回车键功能，在HTML文件中可以用它来调整行间距。注意：<br>标记是单独使用的。 段落标记语法格式为： <P>文字</P> 文本<br>
17
例3-4.HTML，段落标记和换行标记。 <HTML> <body> 在HTML格式里我们不必关心文章的每行宽度，即不用担心每行文字太长而被截掉。（没加标记） <P>在HTML格式里我们不必关心文章的每行宽度，</P> <P>不用担心每行文字太长而被截掉。（加标记）</P> <P>在HTML格式里我们不必关心文章的每行宽度，<br> 不用担心每行文字太长而被截掉<br> </body> </HTML>
18
例3-4.HTML显示结果如图3-4所示。 图3-4 使用段落标记和换行标记的结果
19
3.3超链接标记<A></A>
3.3.1链接到本机另一Web页面 链接到本机上的Web页面很简单，只要把文件名和路径赋给href就可以了。 语法格式为： <A href="路径\文件名.HTML">链接到文件名</A> 在浏览器中将看到“链接到文件名”下底线，当鼠标移到它上面时，鼠标的箭头变成小手，在此单击鼠标，便可将其链接到同一机器的名为"文件名.HTML"文件上。例如，<A href="G:\dzsw\3-2.HTML">这里是"3-2.HTML"页面 </A>。在浏览器中单击这里是"3-2.HTML"页面，浏览器将打开3-2.HTML文件。
20
3.3.2链接到另一机器的Web页面 链接到另一台机器的Web页面也很简单，只要把目的地的URL地址赋给href就可以了。语法格式为：
<A href="URL">这里是某地方</A> 例如，想链接到“新浪”主页，可以写成： <A href=" 例 3-5.HTML，链接到其它计算机中的Web页面。 <HTML> <head>
21
<title>Web页面制作</title>
</head> <body> 例如，可以链接到本机的 <A href="G:\dzsw\3-2.HTML">3-2.HTML页面 </A> <p>链接到另一台机器的Web页面也很简单，只要把目的地的URL地址赋给href就可以了。</p>例如，想链接到“新浪”主页<A href="
22
</body> </HTML> 例3-5.HTML显示结果如图3-5所示。
23
图3-5两种不同的超链接
24
3.3.3链接到同一Web页面的其它段落 除了链接到另一个HTML文件之外，也可以在一篇文章内随意地链接。这和前面两种链接稍有不同，需要先做出一个“锚”标记，即链接的目标地，再做“锚”的链接。例如，先在文章中选择“第一章”做“锚”标记，<A name="第一章">第一章</A>；再做“锚”的链接<A href="#第一章">链接到第一章</A>，则“链接到第一章”会变色。并加有下底线，在此单击鼠标，便可将其链接到本文章中标有<A name="第一章">第一章</A>的地方。 例 3-6.HTML，看看是如何链接到同一Web页的其它段落。
25
<HTML> <head> <title>Web页面制作</title> </head> <body> 例如：可以链接到本机的 <A name= "第一章">第一章</A>为“锚”标记。 <p>除了链接到另一个HTML文件之外，也可以在一篇文章内随意地链接。<br>这和前面两种链接稍有不同，需要先做出一个“锚”标记，即链接的目标地，</br>
26
再做“锚”的链接。</p> <A href="#第一章">在这里点一下即可进入第一章</A> </body> </HTML> 例3-6.HTML显示结果如图3-6所示。
27
图3-6 在同一页面上建立链接
28
3.3.4链接到不同文件的另一个段落 如果链接到不同文件的某一个段落，则其表示方法需做改变。假如在B1文件里建立链接"链接到第一章"，而锚标记"第一章"在B2文件中，则可写成： <A href="B2的文件名#第一章">链接文字</A> 这样，当在B1文件中点击"链接到第一章"，就会跳到B2文件的"第一章"的位置，而不是文件中的其它地方。 例3-7.HTML，链接到别的Web页的某一锚位置。
29
<HTML> <head> <title>Web页面制作</title> </head> <body> <A href="g:\dzsw\3-2.html#第一章">在这里点一下</A> 就会跳到3-6.html文章的“第一章”这个位置。 </body> </HTML> 例3-7.HTML显示结果如图3-7所示。注意，这里假定例3-6.html文件的"第一章"是已经建立了“锚”标记的。
30
图3-7 在不同页面上建立链接
31
3.4图像标记<img> 如果Web页面上全是文字，会使人觉得很单调。怎样才能使页面活泼一点呢？我们可以插入一些图像，从而使页面变得图文并茂。 插入图像的语法格式如下： <img src=图像的URL地址> img提示下面要将插入一个图像，src指出图像的来源URL地址。注意，图像标记<img>没有结束标记。
32
例 3-8.html，在Web页面中插入一个图像。
<head> <title>Web页面制作</title> </head> <body> 这里要插入一个图像 <img src=shu.gif> </body> </HTML>
33
例3-8.HTML显示结果如图3-8所示。 图3-8 插入图像
34
3.5表格标记<table></table>
加入表格可使页面整齐直观。但写起来非常麻烦，这里只介绍其部分语法格式。 其语法格式可分为以下五部分： 1.表格标记 <table>…</table> <table>表示下面是一个表格的内容的开始，</table>表示表格结束。 2.表格标题标记 <caption align=#>表格标题</caption>
35
这是表示一个表格的标题。表格的标题也可不要。Align可选择top（标题放在表格上面居中），bottom（标题放在表格下面居中），缺省时，标题放在表格上面居中。
3.表格行标记 <TR>…</TR> 此标记表示表格一行的开始和结束。 4.字段名标记 <TH>字段名</TH> 在<TH></TH>中间加入字段名，有几个字段名就加入几个<TH></TH>标记。
36
5.数据标记 <TD>数据</TD> 在<TD></TD>中间加入数据，一般有几个字段名就加入几个<TD></TD>标记。其属性有：border=#表示表的边框，取像素值，缺省时，表格没有边框。 例 3-9.html,这是两个普通的表格，一个不带边框，一个带边框。 <HTML> <table> <caption 商品价格表</caption> <TR><TH>日期</TH><TH>白菜</TH><TH>鸡蛋</TH></TR>
37
<TR><TD>6. 1</TD><TD>1
<TR><TD>6.1</TD><TD>1.20</TD><TD>4.80</TD></TR> <TR><TD>6.2</TD><TD>1.00</TD><TD>5.00</TD></TR> </table><br> <table border=5> <caption 商品价格表</caption> <TR><TH>日期</TH><TH>白菜</TH><TH>鸡蛋</TH></TR> </table> </HTML>
38
显示结果如图3-9所示。 图3-9 带框和不带框的表格
39
3.6地址标记<address></address>
这个标记通常用来告诉读者本文作者的联系地址、电话、 信箱。经常是将 地址放在文件的最后面。<address> … </address>之间的字是斜体。 例 3-10.html，留地址。 <HTML> <head> <title>地址联系</title> </head>
40
<body> <address> 地址：湖南大学北校区信息管理系 电话： 信箱： <A </address> </body> </HTML>
41
显示结果如图3-10所示。 图3-10 留地址的方法
42
3.7表单标记<form></form>
服务器将处理过的用户信息的HTML文件返回到客户端的浏览器中显示出来。 Form的基本语法格式为： <form method="" action=""> <input type="" name=""> …… </form> method说明和服务器交换信息时所使用的方式，一般选择post或者get。
43
3.7.1简单输入文本框 简单输入文本框给用户提供输入一行简短的回答方式。其HTML语言十分简单，只要在<form>标记后加入<input type=".text">，并以</form>结束即可。如果想控制文本框的窗口大小，可以输入属性size=N，N以字节为单位；否则，浏览器就以缺省值20设置。如果输入的字超过显示区域，会自动向左滚动，还可以用属性maxlength=N限制最多输入的字节。其中属性Name的属性值“X”是将输入值传给服务器时使用的输入信息的名字。 例 3-11.html，输入文本框。 <HTML> <body>
44
<form> 这是一个文本框<input type="text" name="x1" size=15> </form> </body> </HTML> 显示结果如图3-11所示。 输入文本框语法格式为： <input type="text" name="name" size=# value="x">
45
图3-11 输入文本框
46
显示初始值的多个文本框 文字作为初始值可以出现在文本框里面，只需在<input>标记中加入属性value="显示的文字"即可。" "中的字可以随意选择。可以随意加入几个文本框。排列的方式可以用前面的标记来确定，否则将排在一行。 例3-12.html，显示初始值的多个文本框。 <HTML> <body> <form> 电话号码：<input type="text" name=x1 value=" ">
47
<P>姓名：<input type="text" name=x2 ></P>
<P>出生日期：<input type="text" name=x3 value=" "></P> </form> </body> </HTML> 显示结果如图3-12所示。
48
图3-12 具有初始值的文本框
49
3.7.3输入口令的文本框 例 3-13.html，输入口令，这个口令的长度为8。 <HTML> <body>
输入口令的文本框 例 3-13.html，输入口令，这个口令的长度为8。 <HTML> <body> <form> 口令：<input type="password" Name=x1 size=8 maxlength=8> </form> </body> </HTML>
50
显示结果如图3-13所示。 输入口令语法格式为： <form> <input type="password" Name="NAME" size=# maxlength=#> </form>
51
图3-13 输入口令的文本框
52
3.7.4输入一个多行多列的文本框 如果希望用户多输入一些内容，以便回答问题或者进行讨论，可建立一个多行多列的文本框。只要在<form>标记后，插入一个这样的标记：<textarea clos=x rows=y>，而后，照常加上</textarea>和</form>标记。属性cols确定文本框的宽度，它指的是多行多列文本框的一行同时出现多少个文字；属性rows确定多行多列文本框的高度，即有多少行文字一次出现。 例 3-14.html，输入一个多行多列的文本框。 <HTML> <body> <form>
53
<p>一个多行多列的文本框</p>
<textarea cols=30 name=x1 rows=8> </textarea> </form> </body> </HTML> 显示结果如图3-14所示。
54
图3-14 多行多列文本框
55
输入多行多列的文本框语法格式为： <form> <textarea name= "NAME" cols=# rows=#> </textarea> </form>
56
3.7.5提交按钮及重置按钮 怎样把输入的信息传递出去呢？可利用提交及重置按钮来完成。 提交按钮（Submit Button）是把用户输入的内容提交给服务器进行处理。重置按钮（Reset Button）是把用户输入的内容清除掉，重新输入。 这两个按钮的建立也很容易，在<form>标记下面再加入<input type="Submit">和<input type="Reset">即可。在input标记里，输入value的属性值可改变按钮上的字，否则它自动写上submit和reset。上面介绍的文本框都需要配上提交按钮和重置按钮才算完整。
57
例 3-15.html，创建提交和重置。 <HTML> <body> <form> 电话号码：<input type="text" name=x1> <P>姓名：<input type="text" name=x2 > </P> <P>出生日期：<input type="text" name=x3 value=" "> </P> <input type="Submit" value="提交">
58
<input type="Reset">
</form> </body> </HTML> 显示结果如图3-15所示。
59
图3-15 创建提交与重置按钮
60
3.7.6单选框 单选框是给用户提供一些可选的内容，让用户选择，但只能选择其中的一项。要创建一个单选框（radio button），只需在<form>标记后加上<input type="radio">，再以</form>结束即可。还可以在每一个按钮后加上要选的内容，并插入间隔线或者分段标记。如果想让其中的按钮默认为选中，只要在input标记中加入checked属性就可以了。 例 3-16.html，创建单选框。 <HTML> <body> <form>
61
<H3>单选框<br>
<input type="radio" name=x1 value="Yes">Yes <input type="radio" name=x1 value="No">No <input type="submit" value="提交"> <input type="reset"> </form> <H3>多选一<br> <input type="radio" name=x1 value="香蕉" checked>香蕉<br> <input type="radio" name=x1 value="苹果">苹果<br>
62
<input type="radio" name=x1 value="李子">李子<br>
<input type="submit" value="提交"> <input type="reset" value="重置"> </form> </body> </HTML> 显示结果如图3-16所示。
63
图3-16 创建单选框
64
创建单选框语法格式为： </form> <input type="radio" name="NAME" value="x"> …… <input type="radio" name="NAME" value="n"> 注意，单选框的属性name的属性值"NAME"是相同的，因为只需选一个输入信息。
65
3.7.7多选框 多选框是给用户提供选择多项内容。要创建一个多选框，只需在<form>标记后加上<input type=“checkbox”>，再以</form>结束即可，在每一个“checkbox”后跟有要用于选择的文本内容或者图像。可以再插入间隔划线或者分段标记。 例 3-17.html，创建多选框。 <HTML> <body> <form> <H3>多选框</H3> <input type="checkbox" name="x1">北京<br>
66
<input type="checkbox" name="x2">上海<br>
<input type="checkbox" name="x4" checked>广州(已被选择)<br> <input type="submit" value="提交"> <input type="reset" value="重置"> </form> </body> </HTML> 显示结果如图3-17所示。
67
图3-17创建多选框
68
创建多选框的语法格式为： </form> <input type="checkbox" name="NAME1"> …… <input type="checkbox" name="NAME9"> 注意，多选框的属性Name的属性值"X"是不同的，因为可以选择多个输入信息。
69
3.7.8下拉菜单及滚动菜单 下拉菜单是以<form>标记开始，再接<select>标记。<select>标记表示可以在一个给定的选择项范围内进行选择，因此，接着就给出每一个选择项。选择项采用<option>标记，<option>标记需放在每个选择项之前。滚动菜单只是在<select>标记中加入mutiple属性，允许一次选多个选项，类似多选框，如<select mutiple size=x>。如果缺省mutiple，一次只能选择一项，类似单选框。其中size=x是一次同时显示在菜单里的选择项（或者选择行）数。菜单的宽度由最长的选择项确定。 例 3-18.html，创建下拉菜单。 <HTML>
70
<body> <form> 下拉菜单中任选一个<P> <select name=x1> <option>钢笔 <option>铅笔 <option>书籍 <option>纸张 </select>
71
<P><input type="submit" value="提交">
<input type="reset" value="重置"> </form> </body> </HTML> 显示结果如图3-18所示。 例 3-19.html，创建滚动菜单。 <HTML> <body> 滚动菜单可多选
72
图3-18创建下拉菜单
73
<form> <select name=x1 multiple size=4> <option>香蕉 <option>葡萄 <option>桃子 <option>梨子 </select> <P><input type="submit" value="提交">
74
<input type="reset" value="重置">
</form> </body> </HTML> 显示结果如图3-19所示。 关于表单标记，需要注意的是：所有的form都是以<form>标记开始，以</form>标记结束。每新加入一个<form>标记，浏览器就产生一个新的段落。因此，如果想将一个下拉菜单或者radio button放到语句的中间，应将 <form>标记放在段落的开始处，而不是放在段落中。
75
图3-19创建滚动菜单
76
可以将多个form元素（如checkboxes，下拉菜单等）放在同一对<form></form>标记中，而不必加入一个元素就放上一对<form></form>标记。在编写完下拉式菜单时，每个下拉菜单以</select> </form>标记结束。 HTML语言的标记还有很多，这里介绍的只是一些基本的标记，读者如果有兴趣，可以参阅专门的HTML语言资料。 掌握了HTML语言，就具备了设计电子商务系统的基础。目前，HTML语言正向着XML语言的方向发展，将使网络语言更加标准化。
Similar presentations
