结束课堂上的HTML部分,开始CSS部分
HTML表格和表单
一、表格
table
标签代表一个表格,在table标签中配合 tr
th
td
标签来制作一个表格
- tr 即 table row, 代表表格中的一行
- td 即 table data cell ,代表一行中的一个单元格
- th 即 table header cell, 代表表格中的一个表头
- 对 单元格设置 rowspan colspan可实现单元格之间的合并效果
实例 :
具体的代码如下 :
姓名
科目
成绩
学生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 按钮进行提交操作。
一个简单的表单:
这里的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等可以参考相关教程 (偷个懒~~~)