w1

第一题

列表的实现：
1.例子中是一个无序列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
2.因此要用无序列表的格式来写。
很明显，图中的列表中包含两个列表。
因此用两个标题，两个列表就可以描述出图中列表。
代码如下：

<html>
<body>
<pre style="font-size:20px">  语言</pre>
<u1>
<li>C#</li>
<li>JavaScript</li>
<pre style="font-size:20px">  编辑器</pre>
<u1>
<li>Atom</li>
<li>Visual Studio Code</li>
</body>
</html>

第二题

表格的属性：<table></table>
表格的表头(粗体居中的文本)的定义：<th></th>
使用边框属性来显示一个带有边框的表格：
<table border="1">
一行的定义：

<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>

<tr>行
<td>行中的其中一个元素。
而元素的位置与<td>的位置有关。
每一个行中的第几个元素就是第几列的元素。
在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。
具体的代码实现：

<htmL>
<body>
<table border="1">
 <th>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp.com域名的数量&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
 <th>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp.cn域名的数量&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
 <th>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp.net域名的数量&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
 <th>&nbsp </th>
<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>
</body>
</html>

第二题页面成果图：

html表格.png

第三题

HTML 表单用于搜集不同类型的用户输入。
<form>元素定义 HTML 表单：
实例

<form>
 .
form elements
 .
</form>

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
<input> 元素是最重要的表单元素。
文本输入
<input type="text" name=" ">
单选按钮输入

<input type="radio" name="" value="" checked>
<br>
<input type="radio" name="" value="">
.....

复选按钮输入

<form>
<input type="checkbox" name=""value"">
<br />
<input type="checkbox" name=""value="">
......
</form>

checked属性规定在页面加载时应该被预先选定的input 元素。
checked属性与 <input type="checkbox"> 或 <input type="radio"> 配合使用。
<textarea> 元素
<textarea> 元素定义多行输入字段（文本域）
提交按钮
<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮。
表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。
<hr/>定义水平线。

<!DOCTYPE html>
<html>
<body style="border:1px red solid">
<h1>统一建模语言理论测试</h1>
<pre>考试科目：统一建模语言
时间：100分钟
得分：</pre>
<form>
班级（必填）:<input type="text" name="class">
<br/>
学号（必填）:<input type="text" name="number">
<br/>
姓名（必填）:<input type="text" name="name">
</br>
</br>
<b style="fond-size:30px">一·填空题（每空5分，共20分）</b>
<br/>
<br/>
1.UML的中文全称是：</br>
<input type="text" name="T1">
<br/>
2.对象最突出的特征是：<br/>
<input type="text" name="T2-1"><input type="text" name="T2-2"><input type="text" name="T2-3">
<br/>
<br/>
<b style="fond-size:30px">二·选择题（每题10分，共20分）</b>
<br/>
<br/>
1.UML与软件工程的关系是：<br/>
<input type="radio" name="X1" value="X1A" >
(A)UML就是软件工程<br/>
<input type="radio" name="X1" value="X1B" >
(B)UML参与到软件工程中软件开发过程的几个阶段<br/>
<input type="radio" name="X1" value="X1C" >
(C)UML与软件工程无关<br/>
<input type="radio" name="X1" value="X1D" >
(D)UML是软件工程的一部分<br/>
2.Java语言支持：<br/>
<input type="radio" name="X2" value="X2A" >
(A)单继承<br/>
<input type="radio" name="X2" value="X2B" >
(B)多继承<br/>
<input type="radio" name="X2" value="X2C" >
(C)单继承和多继承都支持<br/>
<input type="radio" name="X2" value="X2D" >
(D)单继承和多继承都不支持<br/><br/>
<b style="fond-size:30px">三·多项选择题（每题10分，共20分）</b>
<br/>
<br/>
1.用例的粒度分为以下哪三种：<br/>
<input type="checkbox" name="DU1" value="DU1A">
(A)概述级<br/>
<input type="checkbox" name="DU1" value="DU1B">
(B)需求级<br/>
<input type="checkbox" name="DU1" value="DU1C">
(C)用户目标级<br/>
<input type="checkbox" name="DU1" value="DU1D">
(D)子功能级<br/>
2.类图由以下哪三部分组成：<br/>
<input type="checkbox" name="DU2" value="DU2A">
(A)名称(Name)<br/>
<input type="checkbox" name="DU2" value="DU2B">
(B)属性(Atribute)<br/>
<input type="checkbox" name="DU2" value="DU2C">
(C)操作(Operation)<br/>
<input type="checkbox" name="DU2" value="DU2D">
(D)方法(Function)<br/><br/>
<b style="fond-size:30px">四·判断题（每题10分，共20分）
</b>
<br/>
<br/>
1.用例图只是用于和客户交流和沟通的，用于确定需求。
<input type="radio" name="P1" value="P1T">
<input type="radio" name="P1" value="P1F"><br/>
2.在状态图中，终止状态在一个状态图中允许有任意多个。
<input type="radio" name="P2" value="P2T">
<input type="radio" name="P2" value="P2F"><br/>
<br/>
<b style="fond-size:30px">五·简答题（每题20分，共20分）
</b>
<br/>
<br/>
1.简述什么是模型以及模型的表现形式：
<textarea name="J" rows="10" cols="30"></textarea>
<br/>
<input type="submit" value="计算分数">
</form>
<hr/>
</body>
</html>

第三题页面效果：

第三题.png

第四题

CSS 概述
* CSS 指层叠样式表 (Cascading Style Sheets)
* 样式定义如何显示 HTML 元素
* 样式通常存储在样式表中
* 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
* 外部样式表可以极大提高工作效率
* 外部样式表通常存储在 CSS 文件中
* 多个样式定义可层叠为一
样式解决了一个普遍的问题
HTML 标签原本被设计为用于定义文档内容。通过使用<h1>、<p>、<table> 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。
由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。
为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。
所有的主流浏览器均支持层叠样式表。
样式表极大地提高了工作效率
样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。
由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。
层叠次序

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

* 
    1. 浏览器缺省设置
    2. 外部样式表
    3. 内部样式表（位于 <head> 标签内部）
    4. 内联样式（在 HTML 元素内部）

*

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
基础语法：
selector {declaration1; declaration2; ... declarationN }
示例：

CSS基础语法.png

类选择器允许以一种独立于文档元素的方式来指定样式。
该选择器可以单独使用，也可以与其他元素结合使用。
类选择器使用格式：
eg:

<h1 class="important">
This heading is very important.
</h1>

<p class="important">
This paragraph is very important.
</p>

语法：
即类名前有一个点号（.），然后结合通配选择器：
*.important {color:red;}
CSS样式：

<style type="text/css">
h1{text-align:center;}
.Q{margin-bottom:10px;}
.center{text-align:center;}
.p1{margin:20px;
    padding-top:10px;
    padding-bottom:10px;
    padding-right:10px;
    padding-left:10px;
    border-style:solid;
    border-width:1px;
}
.p11{
padding-right:300px;
}
.p12{
padding-right:100px;}
.QA{
border:1px solid;
font-weight:bold;
font-size;30px;
background-color:silver;
border-style:solid solid none solid;
border-width:90%;
margin-right:20px;
margin-left:20px;
margin-top:20 px;
padding-right:10px;
pading-left:10px;
padding-top:10px;
padding-bottom:10px;
}
.p2{
border: 1px solid;
border width:90%;
border:none solid solid;
margin-right:20px;
margin-left:20px;
padding-right:1%;
padding-left:1%;
padding-top;10px;
padding-bottom:20px;
}
.tex{
     margin: 10px;
    padding:20px;
    width: 90%;
    height: 60px;
    overflow-y:visible;
}
.btn{
 width:70px;
 height:40px;
 fond-size;20px;
 fond-weight;bold;
 background-color:cornflowerblue;
}
.b{
  margin-right:400px;
  margin:40px;
  text-align:center;
  margin-top:10px;
 }
</style>

具体代码实现：

<!DOCTYPE html>
<html>
<style type="text/css">
h1{text-align:center;}
.Q{margin-bottom:10px;}
.center{text-align:center;}
.p1{margin:20px;
    padding-top:10px;
    padding-bottom:10px;
    padding-right:10px;
    padding-left:10px;
    border-style:solid;
    border-width:1px;
}
.p11{
padding-right:300px;
}
.p12{
padding-right:100px;}
.QA{
border:1px solid;
font-weight:bold;
font-size;30px;
background-color:silver;
border-style:solid solid none solid;
border-width:90%;
margin-right:20px;
margin-left:20px;
margin-top:20 px;
padding-right:10px;
pading-left:10px;
padding-top:10px;
padding-bottom:10px;
}
.p2{
border: 1px solid;
border width:90%;
border:none solid solid;
margin-right:20px;
margin-left:20px;
padding-right:1%;
padding-left:1%;
padding-top;10px;
padding-bottom:20px;
}
.tex{
     margin: 10px;
    padding:20px;
    width: 90%;
    height: 60px;
    overflow-y:visible;
}
.btn{
 width:70px;
 height:40px;
 fond-size;20px;
 fond-weight;bold;
 background-color:cornflowerblue;
}
.b{
  margin-right:400px;
  margin:40px;
  text-align:center;
  margin-top:10px;
 }
</style>
<body style="border:1px red solid">
<h1>统一建模语言理论测试</h1>
<div class="p1">
  <span class="p11">考试科目：统一建模语言</span>
  <span class="p11">时间：100分钟</span>
  <span class="p11">得分：</span>
</div>
<div class="p1">
   <span class="p12">
   班级（必填）:<input type="text" name="class">
   </span>
   <span class="p12">
   学号（必填）:<input type="text" name="number">
   </span>
   <span class="p12">
   姓名（必填）:<input type="text" name="name">
   </span>
</div>
<div class="QA">
一·填空题（每空5分，共20分）</div>
<div class="p2">
<span class="Q">
<b>1.UML的中文全称是：</b></br>
<input type="text" name="T1">
</span><br/>
<span class="Q">
<b>2.对象最突出的特征是：</b><br/>
<input type="text" name="T2-1"><input type="text" name="T2-2"><input type="text" name="T2-3">
</span>
</div><br/>
<div class="QA">

二·选择题（每题10分，共20分）</div>
<div class="p2">
<b>1.UML与软件工程的关系是：</b><br/>
<input type="radio" name="X1" value="X1A" >
(A)UML就是软件工程<br/>
<input type="radio" name="X1" value="X1B" >
(B)UML参与到软件工程中软件开发过程的几个阶段<br/>
<input type="radio" name="X1" value="X1C" >
(C)UML与软件工程无关<br/>
<input type="radio" name="X1" value="X1D" >
(D)UML是软件工程的一部分<br/>

<b>2.Java语言支持：</b><br/>
<input type="radio" name="X2" value="X2A" >
(A)单继承<br/>
<input type="radio" name="X2" value="X2B" >
(B)多继承<br/>
<input type="radio" name="X2" value="X2C" >
(C)单继承和多继承都支持<br/>
<input type="radio" name="X2" value="X2D" >
(D)单继承和多继承都不支持<br/>
</div><br/>
<div class="QA">

三·多项选择题（每题10分，共20分）</div>
<div class="p2">
<b>1.用例的粒度分为以下哪三种：</b><br/>
<input type="checkbox" name="DU1" value="DU1A">
(A)概述级<br/>
<input type="checkbox" name="DU1" value="DU1B">
(B)需求级<br/>
<input type="checkbox" name="DU1" value="DU1C">
(C)用户目标级<br/>
<input type="checkbox" name="DU1" value="DU1D">
(D)子功能级<br/>
<b>2.类图由以下哪三部分组成：</b><br/>
<input type="checkbox" name="DU2" value="DU2A">
(A)名称(Name)<br/>
<input type="checkbox" name="DU2" value="DU2B">
(B)属性(Atribute)<br/>
<input type="checkbox" name="DU2" value="DU2C">
(C)操作(Operation)<br/>
<input type="checkbox" name="DU2" value="DU2D">
(D)方法(Function)<br/>
</div><br/>
<div class="QA">
四·判断题（每题10分，共20分）</div>
<div class="p2">
1.用例图只是用于和客户交流和沟通的，用于确定需求。
<input type="radio" name="P1" value="P1T">T
<input type="radio" name="P1" value="P1F">F
<br/>
2.在状态图中，终止状态在一个状态图中允许有任意多个。
<input type="radio" name="P2" value="P2T">T
<input type="radio" name="P2" value="P2F">F
</div><br/>
<div class="QA">
五·简答题（每题20分，共20分）</div>
<div class="p2">
1.简述什么是模型以及模型的表现形式：
<div>
<textarea class="tex"></textarea>
</div>
</div>
<div class="b">
<button class="btn">计算分数</button>
<hr/>
</body>
</html>

效果图：

Paste_Image.png

为什么不使用Table对页面布局
使用CSS边框，能够创造出效果更出色的边框，而且可以应用于任何元素。
而且使用<table>元素进行文档布局不是表格的正确用法.<table>元素的作用是显示表格化的数据。

最后编辑于：2017.12.06 11:27:43

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 199,440评论 5赞 467
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 83,814评论 2赞 376
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 146,427评论 0赞 330
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 53,710评论 1赞 270
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 62,625评论 5赞 359
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,014评论 1赞 275
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,511评论 3赞 390
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,162评论 0赞 254
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,311评论 1赞 294
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,262评论 2赞 317
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,278评论 1赞 328
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,989评论 3赞 316
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,583评论 3赞 303
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,664评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,904评论 1赞 255
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,274评论 2赞 345
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 41,856评论 2赞 339

w1

第一题

第二题

第三题

第四题

推荐阅读更多精彩内容