资源共享
实验实习实训-第二章页面布局实践活动方案
页面布局实践方案
【实验目的】
（1）了解HTML超文本标记语言的结构、语法。
（2）掌握HTML文件的建立及浏览、常用格式化标记符的设置。
（3）掌握链接标记的设置。
【实验内容】
（1）建立HTML文件。
（2）常用的HTML标记设置。
（3）<a>链接标记的设置
（4）相关知识
【实验步骤】
（一）建立HTML文件
操作步骤如下：
（1）单击“开始”按钮，选择“程序” →“附件” →“记事本”，并打开“记事本”窗口。
（2）在记事本中，输入如下HTML语句
<html>
<head>
<title>我的花店</title>
</head>
<body>
欢迎你访问我的花店!
</body>
</html>
（3）保存HTML文件。
（4）在浏览器中预览所编辑的HTML文件效果。
(二)常用的HTML标记设置
1.<Hi>标题标记
[示例1]标题标记，在记事本中输入以下HTML语句，保存后浏览效果。
<html>
<head>
<title>我的花店</title>
</head>
<body>
<h1>欢迎你访问我的花店!</h1>
<h2>欢迎你访问我的花店!</h2>
<h3>欢迎你访问我的花店!</h3>
<h4>欢迎你访问我的花店!</h4>
<h5>欢迎你访问我的花店!</h5>
<h6>欢迎你访问我的花店!</h6>
<h7>欢迎你访问我的花店!</h7>
</body>
</html>
说明： <hi>标记符用于定义段落标题的大小级数。最大的标题级数是 <h1>，最小的标题级数是<h6>。使用<hi>标记符的align属性可控制文字的对齐方式，属性值可以是left(左对齐)，center(居中对齐)，或者right(右对齐)。
2. <P>段落标记符
[示例2]段落标记符，输入HTML语句如下，保存后的浏览效果
<html>
<head>
<title>我的花店</title>
</head>
<body bgcolor="#FFFF99">
<h1 align="center">我的花店!</h1>
<p align="center">欢迎您访问我的花店</p>
<p align=“center”>花可以传情,可表达思念之情,亲情,感恩的心情,衷
心的祝福!</p>
<p align="center">祝愿进入我的花店的朋友天天有好心情!</p>
</body>
</html>
3.列表标记
[示例3]项目列表标记，HTML语句如下，保存后的浏览效果。
<head>
<html>
<title>花语</title>
</head>
<body bgcolor="#FFFF99">
<hl align="center"><font face="宋体">花语</font></hl>
<p>各种花所代表的含义如下：</p>
<ul>
<li>玫瑰：纯洁的爱</li>
<li>剑兰：用心坚固</li>
<li>百合：百年好和</li>
<li type="circle">满天星：爱怜</li>
<li type="circle">菊花：吉祥</li>
<li type="circle">康及馨：亲情思念</li>
<li type="square">郁金香：爱的表白</li>
<li type="square">紫罗兰：永恒之美</li>
<li type="square">勿忘我：爱到永远</li>
</ul>
</body>
</html>
列表标记包括“项目列表”标记<ul>、“编号列表”标记<ol>。<ul>和<ol>标记都是成对标记。在<ul>标记之间还可以使用<li>标记来设定项目内容，其type属性可以显示不同形状的项目符号。
（三）<a>链接标记的设置
[示例4]链接标记，输入如下所示的HTML语句，保存后浏览效果。
<html>
<head>
</head>
<body bgcolor="#FFFF99"
<p><a href="1-7.htm">花语</a></p>
<p><a href="bg.htm" target="right">花节</a></p>
<p><a href="http://www.sina.com.cn">友情链接</a></p>
<p><a href="mailto:gltxiaohong@buu.com.cn">与我联系</a></p>
</body>
</html>
HTML是通过<a>标记符来实际超链接的，它是成对标记符，主要属性有：
（1）href。链接文件的地址。
（2）target。链接目标的位置。
1.指向电子邮件的链接
<a href="mailto:gltxiaohong@buu.com.cn">与我联系</a>
2.指向站点内文件的链接
<a href="bg.htm" target="right">花节</a>
3.指向其他网站文件的链接
<a href="http://www.sina.com.cn">友情链接</a>
相关知识
（一）HTML文件的概念
HTML（Hyper Text Markup
Languafe），即超文本标记语言，它通过多种标准化的标记符号（Tag）对网页内容进行标注，对页面内容进行标注，对页面超媒体内容的输出格式以及各内容部分之间逻辑上的组织关系等进行描述和指定。
（二）HTML文件的特点
HTML是Web页面的基础。使用HTML描述的网页文件称之为HTML页面或者HTML文件，这种文件以“.html”或者“.htm”为扩展名，它是一种纯文本文件，可以使用记事本、写字板等文本编辑器来进行编辑，也可以使用FrontPage、DreamWeaver等网页制作工具来快速创建HTML文件。
（三）HTML文件的结构
HTML文件均以<html>标记符开始，以</html>标记符结束。<head>和</head>标记符之间的内容用于描述页面的头部信息，例如页面标题、关键词等信息。在<body>和</body>标记符之间的内容即为页面的主体内容。HTML文件的整体结构如图所示。
<html>
<head>
页面的头部信息
</head>
<body>
页面的主体内容
</body>
</html>
（四）绝对地址和相对地址
文件的引用既可以使用绝对地址，也可以使用相对地址。
1.绝对地址
直接定出所链接的文件位于哪个服务器中的网站内，主要用来链接其他网站的网页，例如：
<a href="http://www.sina.com.cn">友情链接</a>
2.相对地址
用所链接的文件相对于目前网页所在位置来表示，通常用来链接当前网站中的其他网页，例如：
<a href="bg.htm" target="right">花节</a>
【注意事项】
在使用记事本等编辑器建立HTML文件时，一定要以.htm.或html为扩展名保存文件否则在浏览器中无法正确显示预览效果。
【思考与练习】
- 成对标记与非成对标记在使用上有何不同？下面标记符中哪些是成对标记符？哪些是非成对标记符？
<title>、<hi>、<p>、<br>、<ul>、<ol>、<li>。
2、<br>和<p>…</p>有何区别？
- 试用HTML编写一个简单的网页。
文字与表格
【实验目的】
（1）进一步了解HTML超文本标记语言的结构、语法。
（2）掌握字体标记符、表格标记符的设置。
【实验内容】
（1）建立HTML文件
（2）<font>标记的设置
（3）<table>表格标记的设置
（4）相关知识
【实验步骤】
（一）建立HTML文件
操作步骤如下：
（1）单击“开始”按钮，选择“程序” →“附件” →“记事本”，打开“记事本”窗口。
（2）在记事本中输入HTML语句。
（3）执行“文件” →“保存”命令，将文件保存为htm或html格式。
（4）在浏览器中预览所建立的HTML文件
（二） <font>标记的设置
[示例6]字体标记，设置示例2中相应段落的字体，HTML语句如下，保存后浏览效果，如图所示。
<head>
<title>我的花店</title>
</head>
<body bgcolor="#FFFF99">
<h1 align="center"><b><font color="#FF0000" face="隶书" size="+5">我的花店!花店</font></b></h1>
<hr align="center" width="100%" size="4" color="3333FF">
<p align="center">欢迎您访问我的花店</p>
花可以传情,可表达思念之情,亲情,感恩的心情,衷心的祝福!<br>
祝愿进入我的花店的朋友天天有好心情!<br>
<hr align="center" width="100%" size="4" color="3333FF">
</body>
</html>
<font>标记用来定义文字的字体、大小和颜色，是成对标记符。主要属性有：
（1）face属性：定义文字所使用的字体，如face=“隶书”。
（2）size属性：定义文字的大小，属性值为1~7，也可以使用相对大小来设置，如size=“+5”、 size=“-5”。
（3）color属性。定义文字的颜色，可以使用颜色的英文名称来表示颜色，如： color=“red”；也可使用16进制的RGB代码来表示颜色， color=“#FF0000”，在使用16进制的RGB代码来表示颜色时，需在颜色代码前加“#”。
此外，字体标记符还包括<b>…</b>粗体标记符、<i>…</i>斜体标记符等。
（三）<table>表格标记的设置：
[示例7]表格标记，在记事本中输入以下HTML语句，保存后在浏览器中浏览，效果如图所示。
<html>
<head>
<title>我的花店</title>
<style type="text/css">
<!--
.style3 {font-size: 24px; }
-->
</style>
</head>
<body bgcolor="#FFFF99">
<table width="317" height="182" border="1">
<tr>
<td colspan="2"><div align="center" class="style3">节日</div></td>
<td><div align="center" class="style3">名称</div></td>
</tr>
<tr>
<td rowspan="3"><div align="center" class="style3">5月</div></td>
<td><div align="center" class="style3">1日</div></td>
<td height="36"><div align="center" class="style3">国际劳动节</div></td>
</tr>
<tr>
在<table>和</table>之间放置表格内容，<table>标记是成对标记。在表格中，行是用<tr>…</tr>标记来定义的，一行使用一个<tr>…</tr>标记，每行中的列是用<td>…</td>标记定义的；一列使用一个<td>…</td>标记。<table>、<tr>、<td>标记都有相应的属性，用来定义表格中内容的显示方式。<table>表格标记的主要属性有：
（1）rowspan。定义该单元格所跨行数。
（2）colspan。定义该单元格所跨列数。
相关知识
（一）HTML标记的格式
HTML文件的所有控制语句称为标记，标记在一对尖括号之间，格式如下：
<标记>HTML语言元素</标记>
（1）标记符分为成对标记符和非成对标记符，<title>、<p>、<font>等属于成对标记符，<br>、<hr>等属于非成对标记符。标记符忽略大小写。HTML源文件为文本文件，多个标记符可定成一行，甚至整个文件可定成一行；一个标记符的内容可以定成多行。
（2）可使用标记符的属性来讲进一步限定标记符，一个标记可以有多个属性项，各属性项的次序不限定，各属性项间用空格进行分隔。
（3）HTML中使用的注释语句为<!--…-->,注释内容可插入文本中任何位置，注释内容将不显示。
（二）HTML的作用
（1）利用标题、文本、表格、列表和图像发布在线信息。
（2）应用超连接获得世界各地的在线信息。
（3）应用表单与远程服务通信，实现信息查询及各种商贸活动。
（4）把样式、视频、音频和应用程序嵌入到HTML文档。
注意事项