【Web开发及人机交互导论】格式化文件

Alex_Shen
2021-05-17 / 0 评论 / 0 点赞 / 70 阅读 / 4,915 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-04-06,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

代码:Github仓库地址

一、实验目的

  1. 掌握标题字、段落、物理和逻辑样式等标记的语法。
  2. 了解列表基本类型,掌握无序列表、有序列表、定义列表的语法并学会使用。
  3. 掌握文字段落排版的基本规则。
  4. 能够完成文本型Web网面的设计。

二、实验环境

HBuilderX

三、实验步骤

项目1文字与段落格式化

  1. 建立HTML文档框架。
  2. 在HTML文档head标记中插入title标记。
  3. 在body标记中插入标题字标记,并应用属性实现居左、居中、居右对齐。
  4. 在body标记中插入水平分隔线标记,并应用颜色属性改变水平线颜色。
  5. 在body标记中插入物理样式、逻辑样式标记进行练习。分别插入段落标记、居中 标记、段落缩进标记、上下标标记等。

项目2 利用无序列表制作新闻列表

  1. 建立HTML文档框架
  2. 在HTML文档标记中插入style标记。
  3. 在style标记中分别定义新闻首行样式first_line、图层样式container、无序列表样式ul。
  4. 在body标记中插入图层,并应用图层样式;插入段落并应用首行样式实现新闻首 行效果;插入无序列表,并应用无序列表样式实现新闻导航。

项目3 利用有序列表制作《大型分析仪器管理办法》

  1. 建立HTML文档框架。
  2. 在HTML文档head标记中插入样式style标记。
  3. 在style标记中分别定义段落p标记样式和图层divrect样式。
  4. 在body标记中插入图层,在图层中插入段落标记和有序列表标记,实现管理制度显示。

项目4利用自定义列表制作章节目录1

  1. 建立HTML文档框架。
  2. 在HTML文档head标记中插入style标记。
  3. 在body标记中定义列表中上层项目标记dt样式。
  4. 在body标记中插入定义列表标记,制作教材的章节目录结构。
  5. 将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>

分析:

  1. 使用<div></div>将代码分块,加入注释,使结构更加清晰
  2. 利用不同物理样式标记/逻辑样式标记/标记属性更改文字样式。
    在这里插入图片描述
    项目二:代码如下
<!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>

分析:

  1. 在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. 如果要实现图1-27所示的页面效果,如何实现?写出实现HTML代码。

见上代码

  1. 如果将编号改为大写英文字母,如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>

在这里插入图片描述

0

评论区