HTML结尾与CSS3 (No.3)

结束课堂上的HTML部分，开始CSS部分

HTML表格和表单

一、表格
table标签代表一个表格，在table标签中配合 tr th td 标签来制作一个表格

tr 即 table row, 代表表格中的一行
td 即 table data cell ,代表一行中的一个单元格
th 即 table header cell, 代表表格中的一个表头
对单元格设置 rowspan colspan可实现单元格之间的合并效果

实例：

Table.PNG

具体的代码如下 :

姓名	科目	成绩
学生A	大学英语	0x208
学生B	大学英语	1000001000
学生C	大学英语	01010
学生S	大学英语上	91
学生S	大学英语下

用于修饰的CSS样式表:

table{
            border: 3px crimson solid;
            border-collapse: collapse;            
            color: purple;
            font-size: 20px;
            text-align: center;
            width: 500px;
        }

表单 `form`

表单是为了让使用者填写数据，并将数据发送到指定的网页，可以在设计表单时对输入信息做诸多的限制(长度、内容等)，在填写完表单之后需要通过点击 submit 按钮进行提交操作。
一个简单的表单：


              <%--这里的 type 表示用户输入域的类型
                  不同的输入内容根据不同的 name 分开
                  value属性决定了这个输入的值是什么，所以文本框不会设置value的值
                  因为要等待用户的输入
              --%>
              用户名 
              密码 
              邮箱 

              <%--type = submit 点击按钮之后表单信息就会被发送--%>
              <%--也可以通过 input 设置 type = submit 来进行提交--%>

这里的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部分

    内容一
    内容二
    内容三
    内容四

3.id选择器：
每一个元素只能有一个唯一的id，通过id属性来设置。id选择器为某个元素单独地设置样式

#content-wrapper{
            border: 3px crimson solid;
            border-collapse: collapse;
            color: purple;
            font-size: 20px;
            text-align: center;
            width: 500px;
        }

    内容一
    内容二
    内容三
    内容四

总体来说，类选择器更加经常使用。还有很多的选择器，能够实现更多样的功能，因为课程上没有涉及到，可以参考相关教程。
三、三种方式的优先级：

使用的优先顺序:
外部 -> 内敛 -> 内联是应用顺序，而最后使用的是最后定义的样式
也就是说内联样式覆盖之前的所有样式定义
使用外部的样式表更佳，这样可以将样式和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) 进行提交

(2) 单选框：radio

小米粥
雁北妈妈菜
京酱肉丝

值得注意的是，只有当一组 radio 的name属性一样时，才能构成一组单选框，否则会变成多选框，而我们点击了某一个选项的时候，这个选项对应的 value 值会传送到服务器端，所以使用时要注意： 至少同时设置 name 和 value
(3) 有关复选框、Combo box、list box等可以参考相关教程 (偷个懒~~~)

HTML结尾与CSS3 (No.3)

HTML表格和表单

表单 form

第二部分 ：CSS3

第三部分：有关HTML的补充

你可能感兴趣的:(HTML结尾与CSS3 (No.3))

表单 `form`

第二部分：CSS3