表格标签
表格属性
``
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格标签</title>
</head>
<body>
<table align="center" border="1" cellpadding="10" cellspacing="0" witdh="500" height="250"> <!-- 这些属性要写到表格标签也就是table里面去 -->
<!-- border 边框 默认为"" 无边框 或1为边框 -->
<!-- cellpadding 像素值 设置文字和单元格边框的距离 默认为1像素 -->
<!-- cellspacing 像素值 设置单元格之间的空白 默认为2像素 -->
<!-- width 像素值或百分比 设置表格的宽度 -->
<!-- 表头单元格th 文本内容加粗居中显示 -->
<!-- tr标签表一行 td标签表示一行中的一个单元格 -->
<tr><th>姓名</th> <th> 性别 </th> <th>年龄</th> </tr>
<tr><td>伍骏</td> <td> 男 </td> <td>22</td> </tr>
<tr><td>方光磊</td> <td> 男 </td> <td>23</td> </tr>
<tr><td>夏灿</td> <td> 男 </td> <td>22</td> </tr>
</table>
</body>
</html>
表格案例
使用<thead> 和<tbody>可以使代码非常好整理 更好的划分结构
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table align ="center" border ="1" cellpadding ="5" cellspacing ="0" wight="500">
<tr><th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>进入搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="../../../html使用手册/第二天/down.jpg"/></td>
<td>345</td>
<td>123</td>
<td><a href ="#" target="_blank">贴吧</a> <a href ="#" target="_blank">图片</a>
<a href ="#" target="_blank">百科</a>
</td>
</tr>
合并单元格
<!-- 合并单元格
跨行合并 rowspan ="合并单元格个数" 跨列合并 colspan="合并单元格个数" -->
<!-- 目标单元格 写合并代码 跨列是左侧为目标 跨行为上面的为目标 -->
<table width="500" height="250" border="1" cellspacing ="0">
<tr>
<td></td>
<td colspan ="2"></td>
<!-- 合并了第一行二三单元格 删除第三个单元格 -->
</tr>
<tr>
<td rowspan= "2"></td>
<td></td>
<td></td>
<!-- 合并了第二三列的第一个单元格删除第三列的第一个单元格 -->
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
2列表标签
2.1无序列表(重点)
<h4>您喜欢的水果是？</h4>
<ul>
<li>榴莲</li>
<li>芒果</li>
<li>香蕉</li>
<li>橙子</li>
<li><p>苹果</p></li>
</ul>
2.2有序列表(重点)
2.3自定义列表(重点)
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系我们</dd>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系我们</dd>
</dl>
2.4列表总结
3.表单标签
3.3表单域
表单
input表单元素
input 属性
文本框和密码框 text password
<body>
<!-- action属性 表示数据接收的地址 放到demo.pho里 -->
<form action="demo.php" methon="POST" name="name1">
<!-- text文本框 用户输入任何文字 -->
用户名:<input type ="text"> <br/>
<!-- password 密码框 用户看不见输入的密码 -->
密码: <input type ="password">
</form>
</body>
单选按钮和复选框 radio checkbox
性别: 男<input type ="radio"> 女 <input type="radio"> <br/>
<!-- checkbox 复选框 可以实现多选 -->
爱好: 吃东西 <input type="checkbox"> 睡觉<input type ="checkbox"> 打豆豆 <input type ="checkbox">
name和value属性
<!-- 单选按钮和复选框可以设置chechked 属性 当页面打开的时候就可以默认选中这个按钮 -->
我同意此条款<input type ="radio" name="TiaoKuan" value="条款" checked="checked">
