代码：Github仓库地址
一、实验目的
- 掌握标题字、段落、物理和逻辑样式等标记的语法。
- 了解列表基本类型，掌握无序列表、有序列表、定义列表的语法并学会使用。
- 掌握文字段落排版的基本规则。
- 能够完成文本型Web网面的设计。
二、实验环境
HBuilderX
三、实验步骤
项目1文字与段落格式化
- 建立HTML文档框架。
- 在HTML文档head标记中插入title标记。
- 在body标记中插入标题字标记,并应用属性实现居左、居中、居右对齐。
- 在body标记中插入水平分隔线标记，并应用颜色属性改变水平线颜色。
- 在body标记中插入物理样式、逻辑样式标记进行练习。分别插入段落标记、居中 标记、段落缩进标记、上下标标记等。
项目2 利用无序列表制作新闻列表
- 建立HTML文档框架
- 在HTML文档标记中插入style标记。
- 在style标记中分别定义新闻首行样式first_line、图层样式container、无序列表样式ul。
- 在body标记中插入图层，并应用图层样式；插入段落并应用首行样式实现新闻首 行效果；插入无序列表，并应用无序列表样式实现新闻导航。
项目3 利用有序列表制作《大型分析仪器管理办法》
- 建立HTML文档框架。
- 在HTML文档head标记中插入样式style标记。
- 在style标记中分别定义段落p标记样式和图层divrect样式。
- 在body标记中插入图层，在图层中插入段落标记和有序列表标记，实现管理制度显示。
项目4利用自定义列表制作章节目录1
- 建立HTML文档框架。
- 在HTML文档head标记中插入style标记。
- 在body标记中定义列表中上层项目标记dt样式。
- 在body标记中插入定义列表标记，制作教材的章节目录结构。
- 将body内的所有元素统一放入图层中，使用图层的style属性定义样式或在样式表中定 义div、标记样式(图层的宽度、高度、背景颜色等属性)。
四、结果与分析
项目一：代码如下
<!DOCTYPE html>
<html>
<head>
<title>文字与段落格式化</title>
</head>
<body>
<div>
<h2 align="left">【标题字应用】</h2>
<h1 align="middle">软件工程是全国就业薪酬涨幅最大的专业</h1>
<h3 align="left">软件工程是全国就业薪酬涨幅最大的专业</h3>
<h6 align="right">软件工程是全国就业薪酬涨幅最大的专业</h6>
<hr color="red">
</div><!--Part1.1-->
<div>
<h3 align="left">【段落、字体标记应用】</h3>
<p style="text-indent:2em;"><font color="blue" size="4">12月23日，在圆满结束对美国、爱尔兰、土耳其的正式访问后，国家副主席回到北京。陪同人员同机抵达。</font></p>
<hr color="green">
</div><!--Part1.2-->
<div>
<h3 align="left">【物理、逻辑样式标记应用】</h3>
<p align="middle">
<strong>2X<sup>2</sup>+3x=9<br></strong>
2X<sup>2</sup>+3x=9<br>
<b>x<sub>1</sub>+x<sub>2</sub>=10</b><br>
<i>软件工程！</i><br>
<br>
</p>
<address>
<center>地址：</center>
<center>江苏省南京市珠江路1924号</center>
</address>
<hr color="skyblue">
</div><!--Part1.3-->
<div>
<h3 align="left">【其它排版标记应用】 </h3>
<pre>
《春思》
李白
燕草如碧丝，秦桑低绿枝。
当君怀归日，是妾断肠时。
春风不相识，何事入罗帏？
【评析】略。。。
</pre>
<hr color="purple">
</div><!--Part1.4-->
</body>
</html>
分析：
- 使用
<div></div>将代码分块，加入注释，使结构更加清晰 - 利用不同物理样式标记/逻辑样式标记/标记属性更改文字样式。
项目二：代码如下
<!DOCTYPE html>
<html>
<head>
<title>无序列表实现新闻显示</title>
<style type="text/css">
.first_line{font-size: 22px;font-family: 黑体;padding-left: 20px;}
.container{width: 600px;height: 200px;background-color: #ccff99;}
ul{list-style-type: disc;font-size: 22px;line-height: 33px;color: blue;}
</style>
</head>
<body>
<div class="container">
<p class="first_line">xxxx</p>
<ul type="disc">
<li >xxx</li>
<li >xxx</li>
<li >xxx</li>
<li >xxx</li>
<li >xxx</li>
</ul>
</div>
</body>
</html>
分析：
- 在head中加入
<style>利用CSS，修改容器及列表字体样式。
不知道为什么有问题，项目成品见Github
项目三：代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有序列表应用-规章制度显示</title>
<style>
p{
font-size: 22px;
font-family: 黑体;
text-align: center;
background-color: #0000ff;
color: #ffffff;
width: 900px;
}
.divrect{
width:900px;
height: 500px;
background-color: #ffcc33;
}
</style>
</head>
<body>
<p>大型分析仪器管理办法</p>
<div class="divrect">
<ol type="1" start="1">
<li>大型仪器必须有专人保管，须配有稳压电源，使用前须先检查仪器
间各电路连接情况，再开稳压电源，然后再启动仪器开关。</li>
<li>必须严格执行仪器设备运行记录制度，记录仪器运行状况、开关机
时间。凡不及时记录者，一经发现，停止使用资格一周。</li>
......
<li>各仪器要根据其保养、维护要求，进行及时或定期的干燥处理充电
维护、校验等，确保仪器正常运转。每学期进行一次仪器使用检查发
现有损坏应及时请有关部门维修。</li>
<li>仪器不能随意搬动，更不能借给外单位使用；校内人员经实验室主任
批准后可在实验室按上述规定使用。</li>
</ol>
</div>
</body>
</html>
拓展与提高
- 如果要实现图1-27所示的页面效果，如何实现？写出实现HTML代码。
见上代码
- 如果将编号改为大写英文字母，如A、B、C……程序代码如何修改？
将
<ol type="1" start="1">修改为<ol type="A" start="1">
有序列表中可以设置type属性为1，a，A，i，I，start属性设置列表开始值。
项目四：代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>显示书目录</title>
<style>
dt{
font-size: 20px;
font-family: "黑体";
color: black;
}
</style>
</head>
<body>
<div style="width: 300px;height: 380px;background-color: #ee3344;">
<p >前端开发技术</p>
<dl>
<dt>第1章 Web页面设计简介</dt>
<dd>1.1 万维网概述</dd>
<dd>1.2 HTML语言</dd>
<dd>1.3 △Web页面设计相关概念</dd>
<dd>1.4 Web页面设计和浏览工具</dd>
<dt>第2章 HTML基础</dt>
<dd>2.1 △HTML文档结构</dd>
<dd>2.2 HTML基本语法</dd>
<dd>2.3 注释</dd>
<dd>2.4 编写HTML文档的注意事项</dd>
<dt>第3章 文字与段落</dt>
<dd>3.1 文字内容</dd>
<dd>3.2 文字样式</dd>
<dd>3.3 文字修饰</dd>
<dd>3.4 段落</dd>
</dl>
</div>
</body>
</html>
841
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
