bootstrap：
用bootstrap进行网页的修饰，源码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
</head>
<body style="border:1px red solid; padding:10px">
<h1 class="text-center"><strong>统一建模语言理论测试</strong></h1>
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<label class="control-label col-md-4" for="formGroupInputLarge">考试科目：统一建模语言</label>
<label class="control-label col-md-4" for="formGroupInputLarge">时间：100分钟</label>
<label class="control-label col-md-4" for="formGroupInputLarge">得分</label>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-md-4">
<form class="form-inline">
<div class="form-group">
<label>班级（必填）：</label>
<input type="text" class="form-control" id="exampleInputName2" />
</div>
</form>
</div>
<div class="col-md-4">
<form class="form-inline">
<div class="form-group">
<label class="control-label">学号（必填）：</label>
<input type="text" class="form-control" id="exampleInputName2" />
</div>
</form>
</div>
<div class="col-md-4">
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">姓名（必填）：</label>
<input type="text" class="form-control" id="exampleInputName2" />
</div>
</form>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"> 一、填空题（每空5分，共20分） </h3>
</div>
<div class="panel-body">
<div style="margin:5px">
1.UML的中文全称是:
</div>
<input type="text" class="form-control" />
<div style="margin-top:15px">
<div style="margin:5px">
2.对象最突出的特征是：
</div>
<div class="row">
<div class="col-xs-4">
<input type="text" class="form-control" />
</div>
<div class="col-xs-4">
<input type="text" class="form-control" />
</div>
<div class="col-xs-4">
<input type="text" class="form-control" />
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"> 二、选择题（每空10分，共20分） </h3>
</div>
<div class="panel-body">
1.UML与软件工程的关系是：
<br />
<div class="radio">
<label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" /> (A)UML就是软件工程 </label>
</div>
<div class="radio">
<label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" /> (B)UML参与到软件工程中软件开发过程的几个阶段 </label>
</div>
<div class="radio">
<label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" /> (C)UML与软件工程无关 </label>
</div>
<div class="radio">
<label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" /> (D)UML是软件工程的一部分 </label>
</div>
<div style="margin-top:15px">
2.Java语言支持：
<br />
<div class="radio">
<label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" /> (A)单继承 </label>
</div>
<div class="radio">
<label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" /> (B)多继承 </label>
</div>
<div class="radio">
<label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" /> (C)单继承和多继承都支持 </label>
</div>
<div class="radio">
<label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" /> (D)单继承和多继承都不支持 </label>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"> 三、多项选择题（每空10分，共20分） </h3>
</div>
<div class="panel-body">
1. 用例的粒度分为以下哪三种：
<br />
<div class="checkbox">
<label> <input type="checkbox" value="" /> (A)需求级 </label>
</div>
<div class="checkbox">
<label> <input type="checkbox" value="" /> (B)概述级 </label>
</div>
<div class="checkbox">
<label> <input type="checkbox" value="" /> (C)用户目标级 </label>
</div>
<div class="checkbox">
<label> <input type="checkbox" value="" /> (D)子功能级 </label>
</div>
<div style="margin-top:15px">
2. 类图由以下哪三部分组成：
<br />
<div class="checkbox">
<label> <input type="checkbox" value="" /> (A)名称(Name) </label>
</div>
<div class="checkbox">
<label> <input type="checkbox" value="" /> (B)属性(Attribute) </label>
</div>
<div class="checkbox">
<label> <input type="checkbox" value="" /> (C)操作(Operation) </label>
</div>
<div class="checkbox">
<label> <input type="checkbox" value="" /> (D)方法(Function) </label>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"> 四、判断题（每题10分，共20分） </h3>
</div>
<div class="panel-body">
1.用例图只是用于和客户交流和沟通的，用于确定需求。
<div class="radio">
<label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" /> <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> </label>
</div>
<div class="radio">
<label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" /> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> </label>
</div>
<div style="margin-top:15px">
2.在状态图中终止状态在一个状态图中允许有任意多个。
<div class="radio">
<label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" /> <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> </label>
</div>
<div class="radio">
<label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" /> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> </label>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"> 五、简答题（每题20分，共20分） </h3>
</div>
<div class="panel-body">
<div style="margin:5px">
1.简述什么是模型以及模型的表现形式？
</div>
<textarea class="form-control" rows="3"></textarea>
</div>
</div>
<center>
<button type="button" class="btn btn-success">计算分数</button>
</center>
<hr />
</body>
</html>
效果如图：
效果图
JavaScript
字符串
字符串必须使用引号包围，其中，引号可以使用单引号也可使用双引号，但必须成对出现。如：
"Hello World"
'世界，你好'
'Hello World,1946'
日志输出
利用console中输出.log()中括号内的内容，如:
console.log('Hello World');
在控制台输出字符串的结果是该字符串引号内的字符,不包含引号。且输出的是字符本身(javascript)，而不是字符的类型(String)。
注释符号
分号可加可不加，但当多条语句写于一行时，必须加分号。
对js进行注释时单行注释使用//多行使用/* */进行注释。
复制声明
JavaScript 中创建变量经常被称为 “声明” 变量。需要通过 var 语句来声明 JavaScript 变量。
声明之后，变量并没有值，不过我们可以在声明变量时向变量 赋值:
var x = 5;
var name = "Tom";
简单数据类型
- undefined : 这个值表示变量不含有值。
- null : 这个值表示变量为空。
undefined 和 null 的区别是:typeof(undefined) 返回值是 'undefined'，typeof(null) 返回值是字符串 'object'(对象类型)。
- boolean : true 或 false 代表布尔值。
- number : javascript 只有一种数字类型。数字可以带小数点，也可以不带。如:123 和12.3
- srting : 字符串是字符的载体，而且必须被成对的引号包围。
复杂数据类型
javascript中的复杂数据类型只有一种，即 对象(object)。
{} 花括号，用来定义一个对象；
- 定义方式：
对象由花括号包围。在括号内部，属性以键值对的形式，如 key : value 来定义，又称属性名和属性值。属性间由逗号分隔。例如:
var student={name:'Tom', finish_work:true, id:123};
- 获取方式
name = student.name;
或
name = student['name'];
特殊的对象 - 数组(array)
数组由方括号包围。在括号内部，数据以独立值的形式 value 来定义。数据值之间由逗号分隔。比如课程名的数组:
var courses = [ "Maths", "Chinese", "Biology", "Physics"];
需要注意数组的下标(序号)是从零开始的。
算术运算符
- +加号
- -减号
- /除号
- *乘号
- %求余
- ++累加
- -- 递减
优先级：++ -- ， * / % ， + -
关于+：
+运算符除了用于代码中数学计算，还可以用于把字符串变量加起来(连接起来)，这时的 + 运算符就不是数学运算中的 求和 了，而是字符串运算中的 拼接 作用。
比较运算符
x == y //等于 (判断x，y的值是否相等)
x === y //等于 (判断x，y的值和类型是否都相同)
x != y //不等于 (判断x，y的值是否不相等)
x > y //大于 (判断x是否大于y)
x < y //小于 (判断x是否小于y)
x >= y //大于等于 (判断x是否大于或者等于y)
x <= y //小于等于 (判断x是否小于或者等于y)
当表达式符合判断条件时，返回值是true 不符合判断条件时，返回值是false。
逻辑运算符
逻辑运算符就三种
&& || !
条件运算符
JavaScript中条件判断语句的基本语法:
condition ? expr1 : expr2;
condition实际值为true时，执行expr1。condition实际值为false时，执行expr2。
判断语句
语法：
// 当 condition 的结果是 true 时，statement1 将会被执行。
// 否则，statement2 将会被执行。
if (condition) {
statement1; //当 condition 的值为 true 时，statement1 被执行。
} else {
statement2; //当 condition 的值为 false 时，statement2 被执行。
}
循环语句
语法 :
// for循环的语法:结合下面流程图理解(每次循环的执行顺序为:1-2-4-3, 1-2-4-3, ...)
for (1初始化表达式;2条件表达式;3更新表达式)
{
4循环体函数
}
// 语法拆解
for (变量=初始值;变量<=最终值;变量=变量+步进值)
{
需要执行的代码块
}
函数
- 声明
通过函数声明语句来定义一个函数.函数声明语句以关键字 function 开始，其后跟有 函数名 参数列表 和 函数体代码块。
function 函数名(参数, 参数, ...){
代码块
}
- 调用
在javascript中，代码是自上而下执行的，但函数的声明代码不会被执行，准确的说，函数的声明代码也是被执行了，只不过执行的结果就跟声明变量一样，只是声明而已。 只有在调用该函数时才会执行该函数内部的代码。如：
console.log("1");
function write(){ // 声明一个函数(没有参数，且没有返回值)
console.log("2");
}
console.log("3");
write(); // 调用函数
/*执行结果
console > 1
console > 3
console > 2*/
作用域
所有{}包起来的代码，都可以称之为 “代码块” ， 英文名叫Block。
每个代码块都有一个自己的作用域，作用域决定了变量能否被访问（不论读取变量还是修改变量）。
访问的规则大概是这样的：
- 在最上层没有任何{}包裹的作用域为顶层作用域，声明的变量是哪里都可以访问的
- 任何一个代码块，{}之间的代码区域称之为它的作用域，每一对大括号括起来的代码块里声明的变量，只能在这个代码块的作用域里访问，不过在js里是不具备这个能力的。 这是一个语言缺陷，在新版js（所谓的EcmaScript6，简称es6）中加入了let关键字，使用let关键字声明的变量就会遵守块级作用域的规则了， 但是es6目前不是所有浏览器都支持
- 代码块是有层级的，在一个代码块里写的新的代码块，后者是前者的子作用域
- 子作用域可以访问父作用域的变量，但是父作用域无法访问子作用域的变量
- 作用域的父级的父级作用域的变量，该作用域里也可以访问，甚至无穷多级父的作用域里的变量都可以被访问，这种无穷多级的父，被称之为祖先
- 顶层作用域是所有作用域的祖先
