作业2：
该列表为无序列表，其中语言、编辑器用空格进行布局。
其中无序列表用<ul></ul>包裹列表
有序列表用<ol></ol>包裹列表
并都使用<li></li>包裹列表项
主要代码如下：
<p> 语言</p>
<ul>
<li>C#</li>
<li>JavaScript</li>
</ul>
<p> 编辑器</p>
<ul>
<li>Atom</li>
<li>Visual Studio Code</li>
</ul>
作业2：
关于表格使用<tr></tr>表示表格的行内容，<th></th>用来定义表头，<td></td>用来表示单元格内容即表中数据，大体使用如下：
<table>
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
需要注意的是当一个单元格为空时，为了避免单元格的边框没有被显示出来。在空单元格中添加一个空格占位符，就可以将边框显示出来。
作业的代码如下：
<table border="1" width="1000">
<tr align="center">
<th>.com域名的数量</th>
<th>.cn域名的数量</th>
<th>.net域名的数量</th>
<th> </th>
</tr>
<tr>
<td>2003年</td>
<td>1000</td>
<td>2000</td>
<td>3000</td>
</tr>
<tr>
<td>2004年</td>
<td>4000</td>
<td>5000</td>
<td>6000</td>
</tr>
<tr>
<td>2005年</td>
<td>7000</td>
<td>8000</td>
<td>9000</td>
</tr>
</table>
作业3：
因为只需要书写HTML难度不大因此只贴上代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body style="border:1px red solid">
<div style="padding-left:10px">
<h1>统一建模语言理论测试</h1>
<p>考试科目：统一建模语言<br/>
时间：100分钟<br/>
得分：<br/>
班级（必填）：<input type="text" name="class"><br/>
学号（必填）：<input type="text" name="sid"><br/>
姓名（必填）：<input type="text" name="name"></p>
<p>一、填空题（每空5分，共20分）</p>
<p> 1.UML的中文全称是：<br/>
<input type="text"><br/>
2.对象最突出的特征是：<br/>
<input type="text"> <input type="text"> <input type="text"></p>
<p>二、选择题（每空10分，共20分）</p>
<p>1.UML与软件工程的关系是：<br/>
<input type="radio" name="1">(A)UML就是软件工程<br/>
<input type="radio" name="1">(B)UML参与到软件工程中软件开发过程的几个阶段<br/>
<input type="radio" name="1">(C)UML与软件工程无关<br/>
<input type="radio" name="1">(D)UML是软件工程的一部分<br/>
2.Java语言支持：<br/>
<input type="radio" name="2">(A)单继承<br/>
<input type="radio" name="2">(B)多继承<br/>
<input type="radio" name="2">(C)单继承和多继承都支持<br/>
<input type="radio" name="2">(D)单继承和多继承都不支持<br/>
</p>
<p>三、多项选择题（每空10分，共20分）</p>
<p>1. 用例的粒度分为以下哪三种：<br/>
<input type="checkbox">(A)需求级<br/>
<input type="checkbox">(B)概述级<br/>
<input type="checkbox">(C)用户目标级<br/>
<input type="checkbox">(D)子功能级<br/>
2. 类图由以下哪三部分组成：<br/>
<input type="checkbox">(A)名称(Name)<br/>
<input type="checkbox">(B)属性(Attribute)<br/>
<input type="checkbox">(C)操作(Operation)<br/>
<input type="checkbox">(D)方法(Function)<br/>
</p>
<p>四、判断题（每题10分，共20分）</p>
<p>1.用例图只是用于和客户交流和沟通的，用于确定需求。<input type="radio" name="R"><input type="radio" name="R"><br/>
2.在状态图中终止状态在一个状态图中允许有任意多个。<input type="radio" name="F"><input type="radio" name="F"></p>
<p>五、简答题（每题20分，共20分）</p>
<p>1.简述什么是模型以及模型的表现形式？<textarea></textarea></p>
<input type="button" value="计算分数"><br/>
<hr/>
</div>
</body>
</html>
实现效果如图所示：
作业4：
对上面的使用css进行修饰美化，所使用css的代码如下：
body{
font-family: "SF Pro SC","SF Pro Text","SF Pro Icons","PingFang SC","Helvetica Neue","Helvetica","Arial",sans-serif;
}
img{
width: 20px;
height: 20px;
}
.t{
margin-top: 10px;
}
.head{
text-align: center;
}
.p1{
border:1px solid;
border-width:90%;
margin-left: 5%;
margin-right:5%;
padding: 15px;
margin-top: 20px;
}
#p11{
padding-right:210px;
}
#p12{
padding-right:90px;
}
.question{
margin-top: 20px;
border: 1px solid;
background-color: #BEBEBE;
border-width:90%;
margin-left: 5%;
margin-right:5%;
padding: 15px;
font-weight: bold;
border-style: solid solid none solid;
}
.p2{
border:1px solid;
border-width:90%;
margin-left: 5%;
margin-right:5%;
padding: 15px;
border-style: none solid solid;
}
.tarea{
margin: 10px;
padding:20px;
width: 90%;
height: 60px;
overflow-y:visible;
}
.btn {
border:1px solid;
background-color: #398BFB;
border-radius: 5px;
padding: 5px 10px;
color: #fff;
}
.b{
margin-left:200px;
margin: 20px;
text-align: center;
}
对HTML内的修改为：
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="work4.css" type="text/css" />
</head>
<body style="border:1px red solid">
<div style="padding-left:10px">
<h1 class="head">统一建模语言理论测试</h1>
<div class="p1">
<span id="p11">考试科目：统一建模语言</span>
<span id="p11">时间：100分钟</span>
<span id="p11">得分：</span>
</div>
<div class="p1">
<span id="p12">班级（必填）：<input type="text" name="class" style="width:150px;"></span>
<span id="p12">学号（必填）：<input type="text" name="sid" style="width:150px;"></span>
<span id="p12">姓名（必填）：<input type="text" name="name" style="width:150px;"></span>
</div>
<div class="question">一、填空题（每空5分，共20分）</div>
<div class="p2">
1.UML的中文全称是:<br/>
<input type="text" style="width:150px;" class="t">
<div style="margin-top:15px">
2.对象最突出的特征是：<br/>
<input type="text" style="width:150px;" class="t"> <input type="text" style="width:150px;" class="t"> <input type="text" style="width:150px;" class="t">
</div>
</div>
<div class="question">二、选择题（每空10分，共20分）</div>
<div class="p2">
1.UML与软件工程的关系是：<br/>
<input type="radio" name="1" class="t">(A)UML就是软件工程<br/>
<input type="radio" name="1" class="t">(B)UML参与到软件工程中软件开发过程的几个阶段<br/>
<input type="radio" name="1" class="t">(C)UML与软件工程无关<br/>
<input type="radio" name="1" class="t">(D)UML是软件工程的一部分<br/>
<div style="margin-top:15px">
2.Java语言支持：<br/>
<input type="radio" name="2" class="t">(A)单继承<br/>
<input type="radio" name="2" class="t">(B)多继承<br/>
<input type="radio" name="2" class="t">(C)单继承和多继承都支持<br/>
<input type="radio" name="2" class="t">(D)单继承和多继承都不支持<br/>
</div>
</div>
<div class="question">三、多项选择题（每空10分，共20分）</div>
<div class="p2">
1. 用例的粒度分为以下哪三种：<br/>
<input type="checkbox" class="t">(A)需求级<br/>
<input type="checkbox" class="t">(B)概述级<br/>
<input type="checkbox" class="t">(C)用户目标级<br/>
<input type="checkbox" class="t">(D)子功能级<br/>
<div style="margin-top:15px">
2. 类图由以下哪三部分组成：<br/>
<input type="checkbox" class="t">(A)名称(Name)<br/>
<input type="checkbox" class="t">(B)属性(Attribute)<br/>
<input type="checkbox" class="t">(C)操作(Operation)<br/>
<input type="checkbox" class="t">(D)方法(Function)<br/>
</div>
</div>
<div class="question">四、判断题（每题10分，共20分）</div>
<div class="p2">
1.用例图只是用于和客户交流和沟通的，用于确定需求。
<div class="t">
<input type="radio" name="R">
</div>
<div class="t">
<input type="radio" name="R">
</div>
<div style="margin-top:15px">
2.在状态图中终止状态在一个状态图中允许有任意多个。
<div class="t">
<input type="radio" name="F">
</div>
<div class="t">
<input type="radio" name="F">
</div>
</div>
</div>
<div class="question">五、简答题（每题20分，共20分）</div>
<div class="p2">1.简述什么是模型以及模型的表现形式？
<div>
<textarea class="tarea"></textarea>
</div>
</div>
<div class="b">
<input type="button" value="计算分数" class="btn">
</div>
<hr/>
</div>
</body>
</html>
最终运行如图所示：
至于为什么不使用table进行页面布局，我的理解是：
- table必须在页面加载完之后才能显示未加载完之前table只是一个空白；
- table会限制一些属性的自由度；
- table会让页面变得很死。
网友评论