作業(yè)2：
該列表為無(wú)序列表，其中語(yǔ)言灯帮、編輯器用空格進(jìn)行布局。
其中無(wú)序列表用<ul></ul>包裹列表
有序列表用<ol></ol>包裹列表
并都使用<li></li>包裹列表項(xiàng)
主要代碼如下：
<p> 語(yǔ)言</p>
<ul>
<li>C#</li>
<li>JavaScript</li>
</ul>
<p> 編輯器</p>
<ul>
<li>Atom</li>
<li>Visual Studio Code</li>
</ul>
作業(yè)2：
關(guān)于表格使用<tr></tr>表示表格的行內(nèi)容鉴分，<th></th>用來(lái)定義表頭妹田，<td></td>用來(lái)表示單元格內(nèi)容即表中數(shù)據(jù)，大體使用如下：
<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>
需要注意的是當(dāng)一個(gè)單元格為空時(shí)撩银，為了避免單元格的邊框沒(méi)有被顯示出來(lái)给涕。在空單元格中添加一個(gè)空格占位符，就可以將邊框顯示出來(lái)额获。
作業(yè)的代碼如下：
<table border="1" width="1000">
<tr align="center">
<th>.com域名的數(shù)量</th>
<th>.cn域名的數(shù)量</th>
<th>.net域名的數(shù)量</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>
作業(yè)3：
因?yàn)橹恍枰獣?shū)寫(xiě)HTML難度不大因此只貼上代碼：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body style="border:1px red solid">
<div style="padding-left:10px">
<h1>統(tǒng)一建模語(yǔ)言理論測(cè)試</h1>
<p>考試科目：統(tǒng)一建模語(yǔ)言<br/>
時(shí)間：100分鐘<br/>
得分：<br/>
班級(jí)（必填）：<input type="text" name="class"><br/>
學(xué)號(hào)（必填）：<input type="text" name="sid"><br/>
姓名（必填）：<input type="text" name="name"></p>
<p>一够庙、填空題（每空5分，共20分）</p>
<p> 1.UML的中文全稱(chēng)是：<br/>
<input type="text"><br/>
2.對(duì)象最突出的特征是：<br/>
<input type="text"> <input type="text"> <input type="text"></p>
<p>二抄邀、選擇題（每空10分耘眨，共20分）</p>
<p>1.UML與軟件工程的關(guān)系是：<br/>
<input type="radio" name="1">(A)UML就是軟件工程<br/>
<input type="radio" name="1">(B)UML參與到軟件工程中軟件開(kāi)發(fā)過(guò)程的幾個(gè)階段<br/>
<input type="radio" name="1">(C)UML與軟件工程無(wú)關(guān)<br/>
<input type="radio" name="1">(D)UML是軟件工程的一部分<br/>
2.Java語(yǔ)言支持：<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>三、多項(xiàng)選擇題（每空10分境肾，共20分）</p>
<p>1. 用例的粒度分為以下哪三種：<br/>
<input type="checkbox">(A)需求級(jí)<br/>
<input type="checkbox">(B)概述級(jí)<br/>
<input type="checkbox">(C)用戶(hù)目標(biāo)級(jí)<br/>
<input type="checkbox">(D)子功能級(jí)<br/>
2. 類(lèi)圖由以下哪三部分組成：<br/>
<input type="checkbox">(A)名稱(chēng)(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.用例圖只是用于和客戶(hù)交流和溝通的，用于確定需求钥飞。<input type="radio" name="R"><input type="radio" name="R"><br/>
2.在狀態(tài)圖中終止?fàn)顟B(tài)在一個(gè)狀態(tài)圖中允許有任意多個(gè)。<input type="radio" name="F"><input type="radio" name="F"></p>
<p>五衫嵌、簡(jiǎn)答題（每題20分读宙，共20分）</p>
<p>1.簡(jiǎn)述什么是模型以及模型的表現(xiàn)形式？<textarea></textarea></p>
<input type="button" value="計(jì)算分?jǐn)?shù)"><br/>
<hr/>
</div>
</body>
</html>
實(shí)現(xiàn)效果如圖所示：
作業(yè)4：
對(duì)上面的使用css進(jìn)行修飾美化楔绞，所使用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;
}
對(duì)HTML內(nèi)的修改為：
<!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">統(tǒng)一建模語(yǔ)言理論測(cè)試</h1>
<div class="p1">
<span id="p11">考試科目：統(tǒng)一建模語(yǔ)言</span>
<span id="p11">時(shí)間：100分鐘</span>
<span id="p11">得分：</span>
</div>
<div class="p1">
<span id="p12">班級(jí)（必填）：<input type="text" name="class" style="width:150px;"></span>
<span id="p12">學(xué)號(hào)（必填）：<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的中文全稱(chēng)是:<br/>
<input type="text" style="width:150px;" class="t">
<div style="margin-top:15px">
2.對(duì)象最突出的特征是：<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與軟件工程的關(guān)系是：<br/>
<input type="radio" name="1" class="t">(A)UML就是軟件工程<br/>
<input type="radio" name="1" class="t">(B)UML參與到軟件工程中軟件開(kāi)發(fā)過(guò)程的幾個(gè)階段<br/>
<input type="radio" name="1" class="t">(C)UML與軟件工程無(wú)關(guān)<br/>
<input type="radio" name="1" class="t">(D)UML是軟件工程的一部分<br/>
<div style="margin-top:15px">
2.Java語(yǔ)言支持：<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">三、多項(xiàng)選擇題（每空10分蔫耽，共20分）</div>
<div class="p2">
1. 用例的粒度分為以下哪三種：<br/>
<input type="checkbox" class="t">(A)需求級(jí)<br/>
<input type="checkbox" class="t">(B)概述級(jí)<br/>
<input type="checkbox" class="t">(C)用戶(hù)目標(biāo)級(jí)<br/>
<input type="checkbox" class="t">(D)子功能級(jí)<br/>
<div style="margin-top:15px">
2. 類(lèi)圖由以下哪三部分組成：<br/>
<input type="checkbox" class="t">(A)名稱(chēng)(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.用例圖只是用于和客戶(hù)交流和溝通的匙铡，用于確定需求图甜。
<div class="t">
<input type="radio" name="R">
</div>
<div class="t">
<input type="radio" name="R">
</div>
<div style="margin-top:15px">
2.在狀態(tài)圖中終止?fàn)顟B(tài)在一個(gè)狀態(tài)圖中允許有任意多個(gè)。
<div class="t">
<input type="radio" name="F">
</div>
<div class="t">
<input type="radio" name="F">
</div>
</div>
</div>
<div class="question">五鳖眼、簡(jiǎn)答題（每題20分黑毅，共20分）</div>
<div class="p2">1.簡(jiǎn)述什么是模型以及模型的表現(xiàn)形式？
<div>
<textarea class="tarea"></textarea>
</div>
</div>
<div class="b">
<input type="button" value="計(jì)算分?jǐn)?shù)" class="btn">
</div>
<hr/>
</div>
</body>
</html>
最終運(yùn)行如圖所示：
至于為什么不使用table進(jìn)行頁(yè)面布局钦讳，我的理解是：
- table必須在頁(yè)面加載完之后才能顯示未加載完之前table只是一個(gè)空白矿瘦；
- table會(huì)限制一些屬性的自由度；
- table會(huì)讓頁(yè)面變得很死愿卒。
