HTML二
2018-03-19 本文已影响0人
嗷老板
三、HTML的复杂标签
1、表格标签
table 定义一个表格
tr 定义表格中的行
td 定义表中的列
th 定义行中的表头
table的属性：
width 定义的是表格的宽度
height 定义的是表格的高度
border 定义的是表格的边框
align 定义的是表格显示的位置
示例：
<table align="center" width="800" height="300" border="1" >
<tr align="center">
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr align="left">
<td>张三</td>
<td>20</td>
<td>男</td>
</tr>
<tr align="right">
<td>李四</td>
<td>18</td>
<td>女</td>
</tr>
</table>
表格标签
2、表格标签的跨行跨列
td的属性
colspan 规定的是单元格横跨列的数量
rowspan 规定的是单元格竖跨行的数量
示例：
<table width="800" height="300" border="1">
<tr>
<td align="center" colspan="4" >
学生信息
</td>
</tr>
<tr align="center">
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>学历</td>
</tr>
<tr align="center">
<td>张三</td>
<td>20</td>
<td>男</td>
<td rowspan="2">本科</td>
</tr>
<tr align="center">
<td>李四</td>
<td>18</td>
<td>女</td>
</tr>
</table>
表格标签（跨行跨列）
3、块级标签
行级标签：有空的放到一行后面，放不下的另起一行，主要有<span>、<font>标签。
块级标签：直接另起一行，主要有<div>、<p><h1>标签。
块标签：
div：默认可以换行，代表页面中的一块区域，必须结合css才能看出效果
span：默认不换行
示例：
<div style="border: 1px solid red;width: 200px;height: 150px;">这是一个div标签</div>
<div style="border: 1px solid blue;">这是一个div标签</div>
<span>这是一个span标签</span>
<span>这是一个span标签</span>
块级标签
4、框架标签
用来整合多个页面使用，主要设计网站后台页面
frameset标签：设置整体的布局，整合多个页面
属性rows：将页面横向切分
rows属性中可以传入多个值，多个值用逗号隔开，页面被切分成几个部分就有几个frame标签
属性cols：将页面纵向切分
frame标签：框架里面的页面
属性src：设置页面的地址
注意：
frameset可以嵌套frameset
如果使用frameset标签，不用使用body标签
示例：
<frameset rows="15%,85%">
<frame src="top.html" />
<frame src="main.html" />
</frameset>
框架标签
5、表单标签
- form 表单标签
重要的属性
action 设置表单要提交到的地址，默认提交到当前页面
method 设置表单的请求（提交）方式
get 默认的提交方式，把表单要提交的数据拼接到地址栏后面，但必须要有name属性
post 把表单要提交的数据藏到请求体中（HTTP协议） - input 输入项标签
重要的属性
type
text 文本框
password 密码框（不显示输入的密码）
radio 单选按钮
checkbox 复选框
file 文件选择框，用于文件上传
hidden 隐藏域，把不需要用户看到，并且后台还需要的数据，一起放到表单中，提交给后台
submit 提交，把指定的数据提交到后台服务器，默认提交到当前页面
reset 重置，恢复页面刚打开时的效果
button 按钮，配合后面的js使用
name
在后台需要通过表单项的name属性来获取其对应的内容
对单选按钮和复选框进行分组
如果表单项没有那么属性，则无法提交到后台
value：值的默认属性
其他属性
readonly 只读，无法修改
checked 单选按钮和复选框的默认选择 - select 选择框标签
name
option 选择框选择项标签
属性
value
selecte：默认选择 - textarea 文本域标签
name
cols 设置宽
rows 设置高
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="test2.html" method="get">
用户名：
<input type="text" name="username"/>
<br /> 密码：
<input type="password" name="password"/>
<br /> 性别：
<input type="radio" name="gender" value="男" checked="checked"/>男
<input type="radio" name="gender" value="女"/>女
<br /> 爱好：
<input type="checkbox" name="hobbies" value="篮球"/>篮球
<input type="checkbox" name="hobbies" value="足球"/>足球
<input type="checkbox" name="hobbies" value="乒乓球"/>乒乓球
<br /> 附件：
<input type="file" />
<br /> 隐藏域：
<input type="hidden" />
<br />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
<input type="button" value="按钮" />
<br />
学科：
<select name="subject">
<option value="01">java</option>
<option selected="selected">php</option>
<option>python</option>
</select>
<br />
备注：<textarea name="备注" rows="10" cols="50"></textarea>
</form>
</body>
</html>
<!-- 接收页面-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>接收成功</h1>
</body>
</html>
表单标签
四、案例：标签的综合应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table width="90%" border="1" align="center">
<tr>
<td>
<table border="1" width="100%">
<td><img src="img/logo.png" /></td>
<td><img src="img/header.png" /></td>
<td>
<a href="http://www.itcast.cn" target="_blank">登录</a>
<a href="http://www.itcast.cn" target="_blank">注册</a>
<a href="http://www.itcast.cn" target="_blank">购物车</a>
</td>
</table>
</td>
</tr>
<tr bgcolor="black">
<td>
<a href="http://www.itcast.cn" target="_blank">首页</a>
<a href="http://www.itcast.cn" target="_blank">电脑办公</a>
<a href="http://www.itcast.cn" target="_blank">手机数码</a>
</td>
</tr>
<tr background="img/regist_bg.jpg" height="400">
<td align="center">
<form action="succese.html" method="get" >
<table border="5" width="60%" bgcolor="white">
<tr>
<td>用户名</td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" name="rePassword" /></td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="text" name="email"/></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="gender" value="男" checked="checked"/>男
<input type="radio" name="gender" value="女"/>女
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" name="hobbies" value="篮球" checked="checked"/>篮球
<input type="checkbox" name="hobbies" value="足球"/>足球
<input type="checkbox" name="hobbies" value="排球"/>排球
<input type="checkbox" name="hobbies" value="乒乓球"/>乒乓球
</td>
</tr>
<tr>
<td>籍贯</td>
<td>
<select name="city">
<option value="">请选择</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
</select>
</td>
</tr>
<tr>
<td>头像</td>
<td><input type="file" name="upload"/></td>
</tr>
<tr>
<td>简介</td>
<td>
<textarea name="info" cols="20" rows="4" >我是</textarea>
</td>
</tr>
<tr>
<td>生日</td>
<td>
<input type="date" name="birthday"/>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册" />
<input type="reset" value="重置" />
<input type="button" value="我是按钮" />
</td>
</tr>
</table>
</form>
</td>
</tr>
<tr>
<td>
<img src="img/footer.jpg" width="100%"/>
</td>
</tr>
<tr>
<td align="center">
<a href="http://www.itcast.cn" target="_blank">关于我们</a> 联系我们 招贤纳士 法律声明 <a href="http://www.itcast.cn" target="_blank">友情链接</a> 支付方式 配送方式 服务声明 广告声明<br />
Copyright © 2005-2018 传智商城 版权所有
</td>
</tr>
</table>
</body>
</html>
案例
