目录
实验题目：格式化文本、段落与列表
实验目的：熟悉格式化文本与段落、列表的相关标签
实验内容：
项目1 文本与段落标记的应用
第一部分：“1.标题字应用”
图1-2-2 其它排版标记应用效果图
第二部分：“2.段落、字体标记应用”
段落的内容如下：
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。
第三部分：“3.文本标记应用”
具体内容如下：
2X2+3x=9 x1+x2=10
地址：江苏省南京市珠江路1924号
超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。
第四部分：“4.其它排版标记应用”
内容如下：
《春思》
李白
燕草如碧丝，秦桑低绿枝。
当君怀归日，是妾断肠时。
春风不相识，何事入罗帏？
【评析】:这是一首描写思妇心绪的诗。开头两句以相隔遥远的燕秦春天景物
起兴，写独处 秦地的思妇触景生情，终日思念远在燕地卫戍的夫君，盼望他
早日归来。三、四句由 开头两句生发而来，继续写燕草方碧，夫君必定思归
怀己，此时秦桑已低，妾已断 肠，进一层表达了思妇之情。五、六两句，以
春风掀动罗帏时，思妇的心理活动，来 表现她对爱情坚贞不二的高尚情操。
全诗以景寄情，委婉动人。
项目2 设计新闻访问列表
编程实现如图1-2-3所示的页面。所需辅助文字材料如下:
图1-2-3用无序列表实现新闻版块效果
列表项的内容如下：
- 国防科技大学员问鼎2014国际数模竞赛最高奖
- 同济大学教授阮仪三获2014亨利•霍普•里德奖
- 中科大徐春叶教授获2014年国际材料科学奖
- 北京和睦家医院肺癌诊疗会诊中心成立
- 兰州大学博士生获全国优秀博士学位论文提名
编辑完后，保存HTML文档，并通过浏览器查看网页效果，如图1-2-4所示。
图1-2-4新闻版块初始效果（无样式）
项目3 设计制度宣传展板
1.制度宣传展板效果如图1-2-5所示的页面。所需辅助文字材料如下：
图1-2-5 《大型分析仪器管理办法》最终效果图
(2)设计网页初步效果。
列表项的内容分别如下，如图1-2-6所示。
图1-2-6 《大型分析仪器管理办法》初始效果图
大型仪器必须有专人保管，须配有稳压电源，使用前须先检查仪器间各电路连接情况，再开稳压电源，然后再启动仪器开关。
必须严格执行仪器设备运行记录制度，记录仪器运行状况、开关机时间。凡不及时记录者，一经发现，停止使用资格一周。
使用仪器必须熟悉本仪器的性能和操作方法，本科生作毕业论文使用时应有教师在场，熟悉操作使用后必须经有关教师和实验人员同意方可进行独立操作。
仪器使用完毕，必须将各使用器件擦洗干净归还原处，盖上防尘罩，关闭电源，打扫完室内清洁，方可离开。
下次使用者，在开机前，首先检查仪器清洁卫生、仪器是否有损坏，接通电源后，检查是否运转正常。发现问题及时报告管理员，并找上一次使用者问明情况，知情不报者追查当次使用者责任。
若在操作使用期间出现故障，应及时关闭电源，并向有关管理人员报告，严禁擅自处理、拆卸、调整仪器主要部件，凡自行拆卸者一经发现将给予严重处罚。用后切断电源、水源，各种按钮回到原位，并做好清洁工作、锁好门窗。
所有仪器设备的操作手册及技术资料原件一律建档保存，随仪器使用的只能是复印件。
保持仪器清洁，仪器的放置要远离强酸、强碱等腐蚀性物品，远离水源、火源、气源等不安全源。
各仪器要根据其保养、维护要求，进行及时或定期的干燥处理、充电、维护、校验等，确保仪器正常运转。每学期进行一次仪器使用检查，发现有损坏应及时请有关部门维修。
仪器不能随意搬动，更不能借给外单位使用；校内人员经实验室主任批准后可在实验室按上述规定使用。
项目4 制作饭店菜单价目表
1.编程实现绿晶饭店菜单价目表效果如图1-2-7所示。所需辅助文字材料如下：
图1-2-7 绿晶饭店菜单价目表页面
菜单具体列表内容分别如下：
心满意粥
菜心粒肉片粥.......6元
皮蛋瘦肉粥.........5元
香茜鱼片粥.........8元
生菜丝骨腩粥.......6元
枣丝杞子猪肝粥.....6元
状元及第粥.........8元
生菜肚丝粥.........8元
明火白粥...........2元
饮料
矿泉水...........2元/瓶
旺仔牛奶.........5元/瓶
高山青草奶......10元/瓶
王老吉...........5元/罐
雪碧.............4元/瓶
可口可乐.........4元/罐
和其正凉茶.......4元/罐
康师傅红/绿茶....4元/瓶
红酒
特饮干红.........................98元/瓶
法国查尔斯干红..................128元/瓶
注册解百纳干红..................168元/瓶
张裕圆桶干红（特选级）黑色......168元/瓶
张裕圆桶解百纳（特选级）红色...258元/瓶
张裕卡斯特（特选级）黑色.........398元/瓶
初始化页面效果如图1-2-9所示。
图1-2-8 绿晶饭店菜单价目表初始页面
实验过程及结果：
项目一：文本与段落标记的应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>格式化文本信息</title>
</head>
<body>
<h6>[1.标题字应用]</h6>
<h3 align="center">软件工程是全国就业薪酬涨幅最大的专业</h3>
<h6 align="left">软件工程是全国就业薪酬涨幅最大的专业</h6>
<h6 align="right">软件工程是全国就业薪酬涨幅最大的专业</h6>
<hr color="red">
<h6>[2.段落、字体标记应用]</h6>
<p style="color: blue;font-family: 隶书;"> 网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。</p>
<h6>[3.文本标记应用]</h6>
<p><strong>2X<sup>2</sup>+3x=9 </strong> <i>x<sub>1</sub>+x<sub>2</sub>=10 </i><br>
<i>地址：江苏省南京市珠江路1924号</i></p>
<p style="margin-left:35px ;margin-right: 35px;">超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。</p>
<h6>[4.其他排版标记应用]</h6>
<pre>
<font size="7" color="red">春 思</font>
——李白
燕草如碧丝，秦桑低绿枝。
当君怀归日，是妾断肠时。
春风不相识，何事入罗帏？
【评析】:这是一首描写思妇心绪的诗。开头两句以相隔遥远的燕秦春天景物起兴，写独处 秦地的思妇触景生情，终日思念远在燕地卫戍的夫君，盼望他早日归来。三、四句由 开头两句生发而来，继续写燕草方碧，夫君必定思归怀己，此时秦桑
已低，妾已断 肠，进一层表达了思妇之情。五、六两句，以春风掀动罗帏时，思妇的心理活动，来 表现她对爱情坚贞不二的高尚情操。全诗以景寄情，委婉动人。</pre></p>
<hr color="fuchsia">
</body>
</html>
效果图：
项目二：设计新闻访问列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无序列表实现新闻显示</title>
<style type="text/css">
ul{color: #0000FF;}
h2{background-color: #EEEEEE;}
</style>
</head>
<body>
<h2 align="left">科研发展</h2>
<p>高校咨询 科技前沿 成果展示 学术会议</p>
<ul>
<li>国防科技大学员问鼎2014国际数模竞赛最高奖</li>
<li>同济大学教授阮仪三获2014亨利•霍普•里德奖</li>
<li>中科大徐春叶教授获2014年国际材料科学奖</li>
<li>北京和睦家医院肺癌诊疗会诊中心成立</li>
<li>兰州大学博士生获全国优秀博士学位论文提名</li>
</ul>
</body>
</html>
效果图：
项目三：设计制度宣传展板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
background: url(img/prj_image2_2.jpg);
}
h2 {
color: white;
background-color:rgb(153,153,255);
}
ol {
font-weight: 505;
}
</style>
</head>
<body>
<h2 align="center">大型分析仪器管理办法</h2>
<ol>
<li>大型仪器必须有专人保管，须配有稳压电源，使用前须先检查仪器间各电路连接情况，再开稳压电源，然后再启动仪器开关。</li>
<li>必须严格执行仪器设备运行记录制度，记录仪器运行状况、开关机时间。凡不及时记录者，一经发现，停止使用资格一周。</li>
<li>使用仪器必须熟悉本仪器的性能和操作方法，本科生作毕业论文使用时应有教师在场，熟悉操作使用后必须经有关教师和实验人员同意方可进行独立操作。</li>
<li>仪器使用完毕，必须将各使用器件擦洗干净归还原处，盖上防尘罩，关闭电源，打扫完室内清洁，方可离开。</li>
<li>下次使用者，在开机前，首先检查仪器清洁卫生、仪器是否有损坏，接通电源后，检查是否运转正常。发现问题及时报告管理员，并找上一次使用者问明情况，知情不报者追查当次使用者责任。</li>
<li>若在操作使用期间出现故障，应及时关闭电源，并向有关管理人员报告，严禁擅自处理、拆卸、调整仪器主要部件，凡自行拆卸者一经发现将给予严重处罚。用后切断电源、水源，各种按钮回到原位，并做好清洁工作、锁好门窗。
</li>
<li>所有仪器设备的操作手册及技术资料原件一律建档保存，随仪器使用的只能是复印件。</li>
<li>保持仪器清洁，仪器的放置要远离强酸、强碱等腐蚀性物品，远离水源、火源、气源等不安全源。</li>
<li>各仪器要根据其保养、维护要求，进行及时或定期的干燥处理、充电、维护、校验等，确保仪器正常运转。每学期进行一次仪器使用检查，发现有损坏应及时请有关部门维修。</li>
<li>仪器不能随意搬动，更不能借给外单位使用；校内人员经实验室主任批准后可在实验室按上述规定使用。</li>
</ol>
<h4 align="right">大型仪器管理办公室</h4>
</body>
</html>效果图：
项目四：制作饭店菜单价目表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h3 {
color: red;
}
ul {
list-style-type: none;
font-family: 隶书;
}
body {
text-align: center;
background-image: url(img/prj_image_2_4_153.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
}
</style>
</head>
<body>
<h3 align="center">绿晶饭店菜单价目表</h3>
心满意粥
<ul>
<li>菜心粒肉片粥.......6元</li>
<li>皮蛋瘦肉粥.........5元</li>
<li>香茜鱼片粥.........8元</li>
<li>生菜丝骨腩粥.......6元</li>
<li>枣丝杞子猪肝粥.....6元</li>
<li>状元及第粥.........8元</li>
<li>生菜肚丝粥.........8元</li>
<li>明火白粥...........2元</li>
</ul>
饮料
<ul>
<li>矿泉水...........2元/瓶</li>
<li>旺仔牛奶.........5元/瓶</li>
<li>高山青草奶......10元/瓶</li>
<li>王老吉...........5元/罐</li>
<li>雪碧.............4元/瓶</li>
<li>可口可乐.........4元/罐</li>
<li>和其正凉茶.......4元/罐</li>
<li>康师傅红/绿茶....4元/瓶</li>
</ul>
红酒
<ul>
<li>特饮干红.........................98元/瓶</li>
<li>法国查尔斯干红..................128元/瓶</li>
<li>注册解百纳干红..................168元/瓶</li>
<li>张裕圆桶干红（特选级）黑色......168元/瓶</li>
<li>张裕圆桶解百纳（特选级）红色...258元/瓶</li>
<li>张裕卡斯特（特选级）黑色.........398元/瓶</li>
</ul>
</body>
</html>
效果图：
欢迎指正！ 欢迎欢迎！
579
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
