html 作业二
项目1：文本与段落标记的应用
第一部分：“1.标题字应用”
（1）启动Hbuilder软件，新建HTML网页，在首行插入注释语句：，保存文件名称为prj_2_1.html。
（2）在head标记中插入title标记，内容为“格式化文本信息”。
（3）在body 标记中插入注释语句，内容为"1.标题字应用”，然后便用标记，定义小标题，内容为“1.标题字应用”。
（4）在body标记中分别插人1、4、5号标题字标记，并应用属性实现居中、居左、居右对齐。标题字的内容均为“软件工程是全国就业薪酬涨幅最大的专业”。
（5）在body标记中插入一条颜色为#ff3333的水平分隔线标记。
第二部分：“2.段落、字体标记应用”
（6）在body标记中插入标记，定义小标题,内容为“2.段落、字体、标记应用”。再插人注释语句,内容为“2.段落、字体标记应用”。
（7）在body标记中插人段落标记，对段落内容进行字体控制，样式:“字体隶书、大小5、颜色blue"，并在段首插入4个空格。段落的内容如下:
段落的内容如下：
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。
第三部分：“3.文本标记应用”
（8）在body标记中插人标记,定义小标题，内容为“3.文本标记应用”。再插人注释语句，内容为“3.文本标记应用”。
（9）在body标记中插人上标、下标和地址标记完成页面内容的设置,并实现前两行内容居中显示。后三行内容采用块缩进(块引用)标记。具体内容如下:
2X2+3x=9 x1+x2=10
地址：江苏省南京市珠江路1924号
超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。
第四部分：“4.其它排版标记应用”
（10）在body标记中插人标记，定义小标题，内容为“4.其他排版标记应用”。
（11）在body标记中插人预设格式标记，内容为一首诗等。采用font标记设置字体大小及颜色。其中诗标题字体大小为7，作者和内容信息字体大小为5。内容如下:
《春思》
李白
燕草如碧丝，秦桑低绿枝。
当君怀归日，是妾断肠时。
春风不相识，何事入罗帏？
【评析】:这是一首描写思妇心绪的诗。开头两句以相隔遥远的燕秦春天景物
起兴，写独处 秦地的思妇触景生情，终日思念远在燕地卫戍的夫君，盼望他
早日归来。三、四句由 开头两句生发而来，继续写燕草方碧，夫君必定思归
怀己，此时秦桑已低，妾已断 肠，进一层表达了思妇之情。五、六两句，以
春风掀动罗帏时，思妇的心理活动，来 表现她对爱情坚贞不二的高尚情操。
全诗以景寄情，委婉动人。
（12）在body标记中插入一条“颜色为#ff00ff、大小为3”的水平分隔线标记。
（13）完成代码设计，查看网页效果。
代码如下：
<!--prj_2_1.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>格式化文本信息</title>
</head>
<body>
<!--1.标题字应用-->
<strong>【1.标题字应用】</strong>
<h1 align="center">软件工程是全国就业薪酬涨幅最大的专业</h1>
<h4 align="left">软件工程是全国就业薪酬涨幅最大的专业</h4>
<h5 align="right">软件工程是全国就业薪酬涨幅最大的专业</h5>
<hr color="#ff3333">
<!--2.段落、字体标记应用-->
<strong>【2.段落、字体标记应用】</strong>
<p><font size="5" color="blue" style="font-family:隶书;"> 网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。</font></p>
<!--3.文本标记应用-->
<strong>【3.文本标记应用】</strong>
<br>
2X<sup>2</sup>+3x=9 <em> x<sub>1</sub>+x<sub>2</sub>=10</em>
<br>
<em>地址：江苏省南京市珠江路1924号</em>
<p > 超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。</p>
<strong>【4.其他排版标记应用】</strong>
<pre>
<font color="red" size="7">春思</font>
<font color="black" size="5">
——李白
燕草如碧丝，秦桑低绿枝。
当君怀归日，是妾断肠时。
春风不相识，何事入罗帏?
【评析】:这是一首描写思妇心绪的诗。开头两句以相隔遥远的燕秦春天景物
起兴，写独处 秦地的思妇触景生情，终日思念远在燕地卫戍的夫君，盼望他
早日归来。三、四句由 开头两句生发而来，继续写燕草方碧，夫君必定思归
怀己，此时秦桑已低，妾已断 肠，进一层表达了思妇之情。五、六两句，以
春风掀动罗帏时，思妇的心理活动，来 表现她对爱情坚贞不二的高尚情操。
全诗以景寄情，委婉动人。
</font>
</pre>
<hr size="3" color="#ff00ff">
</body>
</html>
项目2：高校资讯新闻条目设计
编程实现如图2 所示的页面，具体步骤如下:
图2用无序列表实现新闻版块效果
(1) 启动Hbuilder软件，新建HTML网页，在首行插入注释语句：，保存文件名称为prj_2_2.html。
(2)编辑主体内容。在body标记中插人div标记(从HTML工具栏中选择div标记图标)，在 div标记中分别插人下列标记:
①插入标题字h2标记,内容为“科研发展”。
②插入段落标记，内容为“高校资讯 科技前沿 成果展示 学术会议”。
③插人无序列表ul标记，依次添加列表项。列表项的内容如下:
国防科技大学员问鼎2014国际数模竞赛最高奖
同济大学教授阮仪三获2014亨利•霍普•里德奖
中科大徐春叶教授获2014年国际材料科学奖
北京和睦家医院肺癌诊疗会诊中心成立
兰州大学博士生获全国优秀博士学位论文提名
编辑完后，保存HTML文档，并通过浏览器查看网页效果
(3)定义样式。在head标记中插人style 标记，在style标记中分别定义bt、div1两个类样式，ul、h2两个标记样式,分别如下:
.bt{font-size:22px; font-family:黑体;margin:0 auto;padding;0 20px;}
.div1{width:530px; height:28px;border:1px solid #ccff99;}
ul{list-style-type:disc;font-size:22px;line-height:33px;color:blue;}
h2{font-size:32px;background: #ebabeb; color: #000099;margin:0 auto 10px auto;}
(4)引用样式，在body标记中分别给div、p等标记引用样式，格式分别如下:
高校资讯 科技前沿 成果展示 学术会议
代码如下：
<!--prj_2_2.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无序列表实现新闻显示</title>
<style type="text/css">
.bt{font-size:22px; font-family:黑体;margin:0 auto;padding;0 20px;}
.div1{width:530px; height:280px;border:1px solid #ccff99;}
ul{list-style-type:disc;font-size:22px;line-height:33px;color:blue;}
h2{font-size:32px;background: #ebebeb; color:#000092;margin:0 auto 10px auto;}
</style>
</head>
<body>
<div class="div1">
<h2>科研发展</h2>
<br>
<p class="bt" > 高校资讯 科技前沿 成果展示 学术会议</p>
<ul type="disc">
<li>国防科技大学员问鼎2014国际数模竞赛最高奖</li>
<li>同济大学教授阮仪三获2014亨利•霍普•里德奖</li>
<li>中科大徐春叶教授获2014年国际材料科学奖</li>
<li>北京和睦家医院肺癌诊疗会诊中心成立</li>
<li>兰州大学博士生获全国优秀博士学位论文提名</li>
</ul>
</div>
</body>
</html>