结束课堂上的HTML部分，开始CSS部分
HTML表格和表单
一、表格
table标签代表一个表格，在table标签中配合 tr th td 标签来制作一个表格
- tr 即 table row, 代表表格中的一行
- td 即 table data cell ,代表一行中的一个单元格
- th 即 table header cell, 代表表格中的一个表头
- 对 单元格设置 rowspan colspan可实现单元格之间的合并效果
实例 ：
Table.PNG
具体的代码如下 :
<table border="1px">
<tr> <!-- 每一个 tr 标签定义一行的内容 -->
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
</tr>
<tr>
<td>学生A</td>
<td>大学英语</td>
<td>0x208</td>
</tr>
<tr>
<td>学生B</td>
<td>大学英语</td>
<td>1000001000</td>
</tr>
<tr>
<td>学生C</td>
<td>大学英语</td>
<td>01010</td>
</tr>
<tr>
<td>学生S</td>
<td>大学英语上</td>
<td rowspan="2">91</td>
</tr>
<tr>
<td>学生S</td>
<td>大学英语下</td>
</tr>
</table>
用于修饰的CSS样式表:
table{
border: 3px crimson solid;
border-collapse: collapse; <!-- 表示单元格之间只保留一个边框 -->
color: purple;
font-size: 20px;
text-align: center;
width: 500px;
}
表单 form
表单是为了让使用者填写数据，并将数据发送到指定的网页，可以在设计表单时对输入信息做诸多的限制(长度、内容等)，在填写完表单之后需要通过点击 submit 按钮进行提交操作。
一个简单的表单：
<form action="emailList" method="post">
<%--这里的 type 表示用户输入域的类型
不同的输入内容根据不同的 name 分开
value属性决定了这个输入的值是什么，所以文本框不会设置value的值
因为要等待用户的输入
--%>
<label>用户名</label> <input type="text" name="userName">
<label>密码</label> <input type="password" name="password">
<label>邮箱</label> <input type="email" name="email">
<%--type = submit 点击按钮之后表单信息就会被发送--%>
<%--也可以通过 input 设置 type = submit 来进行提交--%>
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
这里的action属性制定了表单中的数据会被发送到哪里，而method属性决定如何发送。如果选择 method = "get"的话，表单数据就会以字符串的形式显示在浏览器的地址栏上。
例如：
-
输入数据：
get2.PNG
-
数据显示在地址栏中，通过字符串拼接的方式发送过去
get.PNG
至于表单与目标页面的工作原理，见Java web 系列 No.1
第二部分 ：CSS3
一个形象的比喻：HTML就像一个刚买到的裸车，CSS与Javascript一个让车子变得好看，一个让车子成为变形金刚。
严肃一些，CSS就是规定了HTML中各种标签的样式，并能赋予HTML元素一些交互性。
一、如何使用CSS
1.外部样式表：
将CSS文件与HTML文件分开来，将需要使用的CSS文件通过link标签链接到HTML文件中，这种方法好处在于灵活性和可重用性高。
2.内嵌样式表：
通过在head标签里写一个 style 标签，然后在里面写CSS样式代码即可
3.内联样式表：
通过直接在元素标签里面指定 style 属性(HTML标签都有一个style属性，其值即为规定的样式)
CSS样式很丰富，对于不同的标签有很多很多的样式可以选择，具体可以查看一些手册和在线教程。
二、CSS选择器：
1.元素/标签选择器：
这种选择器会将样式应用到这种元素或标签的所有实例上，例如：
table{
border: 3px crimson solid;
border-collapse: collapse;
color: purple;
font-size: 20px;
text-align: center;
width: 500px;
}
2.类选择器：
实际上就是选定一类的元素，给他们加上同样的样式。类选择器选中所有设置了相同类名的元素。
(1) 部分CSS样式
.content{
width: 1100px;
height: 500px;
margin: 0 auto;
background: lightgray;
padding: 20px;
}
(2)对应的HTML部分
<div class="content-wrapper">
<div class="content">内容一</div>
<div class="content">内容二</div>
<div class="content">内容三</div>
<div class="content">内容四</div>
</div>
3.id选择器：
每一个元素只能有一个唯一的id，通过id属性来设置。id选择器为某个元素单独地设置样式
#content-wrapper{
border: 3px crimson solid;
border-collapse: collapse;
color: purple;
font-size: 20px;
text-align: center;
width: 500px;
}
<div id="content-wrapper">
<div class="content">内容一</div>
<div class="content">内容二</div>
<div class="content">内容三</div>
<div class="content">内容四</div>
</div>
总体来说，类选择器更加经常使用。还有很多的选择器，能够实现更多样的功能，因为课程上没有涉及到，可以参考相关教程。
三、三种方式的优先级：
使用的优先顺序:
外部 -> 内敛 -> 内联 是应用顺序，而最后使用的是最后定义的样式
也就是说内联样式覆盖之前的所有样式定义
使用外部的样式表更佳，这样可以将样式和HTML更好地分离开来，也可以增加样式的重用性
如果同一样式定义中，多次重复定义了同一样式，那么后面的会覆盖前面的定义
四、一个小技巧：
在工程中，某些元素可能会默认拥有一些 margin 和 padding ，所以为了不影响我们自己的设计，需要首先清除所有元素的 padding 和 margin 属性：
使用 * 可以选中所有标签：
*{
margin:0;
padding:0;
}
五、CSS注释：
与很多高级语言相同： /**/
这样既可以是多行，也可以是单行
六、一个小栗子
使用CSS简单 美化表格：
.demo-table1{
/*边框是否重叠，选择separate是不重叠的,也就是默认的效果,双边框*/
border-collapse: collapse;
/*单元格内容和单元格边框的的内容的距离*/
padding: 10px;
border: 1px solid lightcoral;
}
td,tr{
border: 1px solid black;
/*控制 td tr中的内容居中*/
text-align: center;
}
第三部分：有关HTML的补充
有关表单中的 button、复选框checkbox、单选框radio
(1) Buttons :
有四种按钮 ：设置属性 type =
(1) Submit : 触发表单提交信息
(2) Reset : 触发表单重置所有信息默认值
(3) button : 不具有任何功能，留给JS代码去触发函数使用
(4) image : 一个图片按钮
表单中经常使用 submit按钮进行提交，当然也可以通过 input标签 (type = submit) 进行提交
<button type="submit">提交</button>
<button type="reset">重置</button>
(2) 单选框：radio
<input type="radio" name="radio1" value="dish1">小米粥
<input type="radio" name="radio1" value="dish2">雁北妈妈菜
<input type="radio" name="radio1" value="dish3">京酱肉丝
值得注意的是，只有当一组 radio 的name属性一样时，才能构成一组单选框，否则会变成多选框，而我们点击了某一个选项的时候，这个选项对应的 value 值会传送到服务器端，所以使用时要注意： 至少同时设置 name 和 value
(3) 有关复选框、Combo box、list box等可以参考相关教程 (偷个懒~~~)
网友评论