Week 01 Training: Fundamentals of HTML & CSS

w1

2017-04-08  本文已影响10人  张青子

第一题

列表的实现：
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 Paste_Image.png

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

上一篇下一篇

猜你喜欢

热点阅读