表格的基本结构就是
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html课程表</title>
</head>
<body>
<table border="1">
<caption>课程表</caption><!--表格标题标签,居中显示-->
<tr> <!--可以理解为表格里的行-->
<th>星期一</th><!--一般作表格头,加粗且内容居中-->
<td>星期二</td>
</tr>
</table>
</body>
</html>
作为表格表头标签;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html课程表</title>
</head>
<body>
<table border="1">
<caption>课程表</caption><!--表格标题标签,居中显示-->
<tfoot>
<tr>
<td>晚自习</td>
<td>晚自习</td>
<td>晚自习</td>
<td>晚自习</td>
<td>晚自习</td>
</tr>
</tfoot>
<thead>
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody>
<tr>
<td>政治</td>
<td>生物</td>
<td>体育</td>
<td>数学</td>
<td>语文</td>
</tr>
<tr>
<td>英语</td>
<td>英语</td>
<td>数学</td>
<td>物理</td>
<td>化学</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>政治</td>
<td>化学</td>
</tr>
<tr>
<td>数学</td>
<td>化学</td>
<td>物理</td>
<td>生物</td>
<td>语文</td>
</tr>
</tbody>
</table>
</body>
</html>
thead、tbody、tfoot的顺序不会影响显示的结果:
(大家可以试着在以上代码添加以下属性,自己体验效果更好一点哦)
1.width、height:设置宽高。
2.align:设置对齐方式,值有:left、right、center。
3.bgcolor:设置背景颜色,这里拓展一下颜色的表示方式,一般有三种:rgb(x,x,x)(括号内的x可以从0~255)、#xxxxxx(每一个x都可以用十六进制表示)、colorname(直接用颜色名字,如:red、black等等)。
4.border:设置表格的边框宽度,如“1”等等。
5.cellpadding:规定单元边沿与其内容之间的空白,即如上表中的每一处文字和它所处边框之间的空白。
这是上述代码修改了cellpadding为10后的结果:
6.cellspacing:规定单元格之间的空白。
这是上述代码在修改了cellspacing为10之后的结果:
7.frame:规定外侧边框的哪个部分是可见的,值有以下几种:
(1)void:不显示外侧边框
(2)above:显示上部的边框
(3)below:显示下部边框(这里就不作演示了,与above同理)
(4)hsides:显示上部和下部的边框
(5)vsides:显示左部和右部的边框
(6)lhs:显示左边的边框
(7)rhs:显示右边的边框
(8)box:显示四个边框
(9)border:显示四个边框(和box一样)
8.rules:规定内侧边框的哪个部分是可见的,设置完rules后,cellspacing属性相当于没有作用,值有以下几种:
(1)none:没有边框
(2)groups:位于行组和列组之间的边框(指的是thead、tbody和tfoot之间)
(3)rows:位于行之间的边框
(4)cols:位于列之间的边框(与rows同理)
(5)all:位于行和列之间的边框(相当于单元格之间不留白)
1.align:规定水平对齐方式,值有:left、right、center、char(指定字符对齐,需要设置align=“char”,并指定char=“某个字符”)、justify(两端对齐)。
2.bgcolor:设置背景色,与table的一样。
3.valign:设置垂直对齐方式,值有:top(顶部)、middle(居中)、bottom(底部)、baseline(与基线对齐)。
基线是一条虚构的线。在一行文本中,大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果常常与 bottom 值相同。不过,如果文本的字号各不相同,那么 baseline 的效果会更好。如图所示:
注:, 标签相对于tr标签只多了width和height的属性
通过设置colspan和rowspan来实现,具体看以下代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html课程表</title>
</head>
<body>
<table border="1" cellpadding="10" frame="box" rules="all">
<caption>课程表</caption><!--表格标题标签,居中显示-->
<thead align="center" valign="middle" bgcolor="#ccc">
<tr>
<th>时间</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody align="center" valign="middle">
<tr>
<td rowspan="2">上午</td> <!--将两行并在一起-->
<td>政治</td>
<td>生物</td>
<td>体育</td>
<td>数学</td>
<td>语文</td>
</tr>
<tr>
<td>英语</td>
<td>英语</td>
<td>数学</td>
<td>物理</td>
<td>化学</td>
</tr>
<tr>
<td rowspan="2">下午</td> <!--将两行并在一起-->
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>政治</td>
<td>化学</td>
</tr>
<tr>
<td>数学</td>
<td>化学</td>
<td>物理</td>
<td>生物</td>
<td>语文</td>
</tr>
</tbody>
<tfoot align="center" valign="middle">
<tr>
<td rowspan="1">晚上</td>
<td colspan="5">晚自习</td> <!--将五列并在一起-->
</tr>
</tfoot>
</table>
</body>
</html>
:定义输入域(文本、密码、单选、复选、文件上传)。
常见属性有:
action:提交表单时向何处发送表单数据。
method:设置表单以何种方式提交数据,常见值有GET和POST。
GET和POST的区别
类型 | GET | POST |
---|---|---|
后退按钮/刷新 | 无害 | 数据会被重新提交(浏览器应该告知用户数据会被重新提交)。 |
书签 | 可收藏为书签 | 不可收藏为书签 |
缓存 | 能被缓存 | 不能被缓存 |
编码类型 | application/x-www-form-urlencoded | application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。 |
历史 | 参数会保存在浏览器记录中。 | 参数不会保存在浏览器历史中。 |
对数据长度的限制 | 有限制。当发送数据时,GET 方法向 URL 添加数据;URL 的长度是受限制的(URL 的最大长度是 2048 个字符)。 | 无限制 |
对数据类型的限制 | 只允许ASCII字符。 | 没有限制。也允许二进制数据。 |
安全性 | 与 POST 相比,GET 的安全性较差,因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET ! | POST 比 GET 更安全,因为参数不会被保存在浏览器历史或 web 服务器日志中。 |
可见性 | 数据在 URL 中对所有人都是可见的。 | 数据不会显示在 URL 中。 |
name属性
target:以何种方式打开action的URL(常见值有_blank(新窗口打开)、_self(当前窗口打开)、_parent、_top)。
enctype:发送表单数据前如何对其进行编码,常见的值有以下几种:
值 | 作用 |
---|---|
application/x-www-form=urlencoded | 在发送前编码所有字符 |
multipart/form-data | 不对字符编码,在使用包含文件上传控件的表单必须使用这个 |
text/plain | 空格转换为“+”加号,但不对特殊字符进行编码 |
常见属性有:type、name、maxlength(限制文字可输入的最长长度)、size(限制文本框的长度)、value、placeholder(默认提示文字)。这里主要介绍type属性。
type属性的值有:
text:文字域
password:密码域
radio:单选框(同一组的name值要相同,要设置默认选中的话就将其设置为checked就可以了)
checkbox:复选框(与单选框要求一样)
file:文件域(从本地选择文件上传)
submit:提交按钮(将表单内容提交)
reset:重置按钮(将表单内容重置)
button:普通按钮
hidden:隐藏域(传递给服务器的信息,不想给用户看见时,可以使用)
image:图像域
具体代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="">
<table>
<tr>
<td>姓名:</td>
<!-- 定义文本框和默认提示文字 -->
<td><input type="text" placeholder="请输入您的名字"><br></td>
</tr>
<tr>
<td>密码:</td>
<!-- 定义密码框和默认提示文字 -->
<td><input type="password" placeholder="请输入您的密码"></td>
</tr>
<tr>
<td>身份:</td>
<!-- 定义单选框并默认选中学生 -->
<td><input type="radio" name="identity" checked value="stu">学生
<input type="radio" name="identity" value="tea">老师</td>
</tr>
<tr>
<td>爱好:</td>
<!-- 定义多选框并默认选中篮球 -->
<td><input type="checkbox" name="hobbit" value="basketball" checked/>篮球
<input type="checkbox" name="hobbit" value="football" />足球
<input type="checkbox" name="hobbit" value="pingpong" />乒乓球</td>
</tr>
<tr>
<td>头像:</td>
<!-- 定义文件域 -->
<td><input type="file" name="avatar" /></td>
</tr>
<tr>
<td>性别:</td>
<!-- 定义下拉选择框,并默认选中女,option的默认选中是selected -->
<td><select name="sex" id="">
<option value="men">男</option>
<option value="women" selected>女</option>
</select></td>
</tr>
<tr>
<td>地区:</td>
<!-- 定义下拉选项组,并默认选择南宁 -->
<td><select name="district" id="">
<optgroup label="福建">
<option value="1">厦门</option>
<option value="2">莆田</option>
</optgroup>
<optgroup label="广西">
<option value="1" selected>南宁</option>
<option value="2">柳州</option>
</optgroup>
</select></td>
</tr>
<tr>
<td>个人简介:</td>
<!-- 定义多行输入文字域 -->
<td><textarea name="introduce" id="" cols="30" rows="4"></textarea></td>
</tr>
<tr>
<!-- 重置按钮 -->
<td><input type="reset" name="resetbtn"/></td>
<!-- 提交按钮 -->
<td><input type="submit" name="subbtn"/></td>
<!-- 图像按钮 -->
<td><input type="image" name="imgbtn" src="../img/logo.png"/></td>
</tr>
</table>
</form>
</body>
</html>
多行输入文本框
语法:
<!--rows表示可见行数,cols表示可见宽度-->
<textarea name="" id="" cols="30" rows="4"></textarea>
一般结合option或optgroup使用,若使用optgroup,则需要配合option使用,如:
<select name="district" id="">
<optgroup label="福建">
<option value="1">厦门</option>
<option value="2">莆田</option>
</optgroup>
<optgroup label="广西">
<option value="1" selected>南宁</option>
<!--selected表示默认选中-->
<option value="2">柳州</option>
</optgroup>
</select>
select常见属性:name、multiple(设置可选择多个属性,windows系统在选择时要按住ctrl键,mac系统要按住command键)、size(设置列表可见选项个数)。
特点:独占一行,可以自定义宽度和高度,以及四个方向的内外边距,默认的宽度为浏览器宽度(即100%),默认的高度即内容的高度。
作用:在网页布局中一般是用作容器。
常见的块元素有:div、h1~h6、ul、ol、dl、dt、dd、form、p
特殊的块元素:table,块元素的呈现,但是内部的内容标签是内联元素。
举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--定义四个块元素-->
<div style="width: 100px; background-color: red;">1</div>
<div style="width: 200px; background-color: red;">2</div>
<div style="width: 300px; background-color: red;">3</div>
<div style="width: 400px; background-color: red;">4</div>
</body>
</html>
内联元素也包含行内元素和行内块元素。
特点:与其他元素位于同一行,如果排列不下,才会进行换行;不可以自定义宽度和高度,以及垂直方向的内外边距,只能设置水平方向的内外边距。
作用:一般是作为内容的容器,显示具体的内容。
常见的行内元素:span、a、strong、b、em、i、label、br。
举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--通过css修改span的宽高-->
<style type="text/css">
span{
width: 200px;
height: 300px;
}
</style>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</body>
</html>
没有变化:
修改span的内边距:
(padding属性后如果只跟一个像素值的话,就表示四个方向上的边距都为这个像素值)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 通过css修改span的宽高 -->
<style type="text/css">
span{
width: 200px;
height: 300px;
padding: 100px;
}
</style>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</body>
</html>
特点:与行内元素并排显示,可自定义宽高和内外边距。
常见的行内块元素:img、input、textarea、button、select、iframe。
(这里就不作演示了,相当于就是结合了行内元素和块元素的特点)
其实块元素和内联元素之间可以通过css改变。
例如div原本是块元素,但是通过css改变相应属性后:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 通过css修改div -->
<style type="text/css">
div{
display: inline;
}
</style>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
</html>
结果div也变成了行内元素:
这一切都是由css中display属性值决定的,块元素所代表的display值是block,行内元素代表的display值是inline,行内块元素代表的display值是inline-block,可以通过修改display值来改变元素的特性。
1.块元素可以嵌套:块、行内、行内块元素。
2.特殊块元素:列表元素,需要配套使用,如:ul、ol、配合li使用,dl配合dt(列表标题)和dd(列表项)使用。
3.行内元素可以嵌套行内元素、行内块元素,不推荐嵌套块元素。
4.特殊行内元素:a标签不能嵌套a标签。如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="#"><a href="#">百度</a> 淘宝</a>
</body>
</html>