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