HTML基本知识（2）
表格
创建表格
表格是用来展现数据的 使数据更加参差标准
- table:表格标签
- tr:行标签 只能嵌套在表格标签内
- td:单元格标签 用来存储数据 只能嵌套在tr中 td能够嵌套任何标签
表格属性
<table border="1" height="200" width="200" cellspacing="0" cellpadding="5"> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> </tr> <tr> <td>尧子陌</td> <td>男</td> <td>24</td> </tr> <tr> <td>惊鸿</td> <td>男</td> <td>24</td> </tr> </table>表头单元格标签
表头单元格标签个别位于表格的第一行或第一列，用标签th示意，th和td一样但会让字体加粗并居中。
<body> <table border="1" height="200" width="200" cellspacing="0" cellpadding="5"> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td>尧子陌</td> <td>男</td> <td>24</td> </tr> <tr> <td>惊鸿</td> <td>男</td> <td>24</td> </tr> </table></body>表格题目
表格题目必须位于表格中才有意义 用caption示意 且表格题目会追随表格一起挪动
<table height="315" width="500" border="1" cellspacing="0" cellpadding="2" align="center"> <caption>个人信息表</caption> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td>尧子陌</td> <td>男</td> <td>24</td> </tr> <tr> <td>惊鸿</td> <td>男</td> <td>24</td> </tr> </table>表格案例
<body> <table border="1" cellspacing="0" cellpadding="0" align="center" height="300" width="500"> <caption><h2>小说排行耪</h2></caption> <tr> <th>排名</th> <th>关键词</th> <th>趋势</th> <th>今日搜寻</th> <th>最近七日</th> <th>相干链接</th> </tr> <tr> <td>1</td> <td>鬼吹灯</td> <td><img src="./images/down.jpg" alt=""></td> <td>345</td> <td>123</td> <td> <a href="#">贴吧</a> <a href="#">百度</a> <a href="#">图片</a> </td> </tr> <tr> <td>2</td> <td>盗墓笔记</td> <td><img src="./images/up.jpg" alt=""></td> <td>34555</td> <td>123444</td> <td> <a href="#">贴吧</a> <a href="#">百度</a> <a href="#">图片</a> </td> </tr> <tr> <td>3</td> <td>西游记</td> <td><img src="./images/up.jpg" alt=""></td> <td>24555</td> <td>13444</td> <td> <a href="#">贴吧</a> <a href="#">百度</a> <a href="#">图片</a> </td> </tr> <tr> <td>4</td> <td>东游记</td> <td><img src="./images/up.jpg" alt=""></td> <td>3455</td> <td>3444</td> <td> <a href="#">贴吧</a> <a href="#">百度</a> <a href="#">图片</a> </td> </tr> <tr> <td>5</td> <td>甄嬛传</td> <td><img src="./images/up.jpg" alt=""></td> <td>3555</td> <td>1444</td> <td> <a href="#">贴吧</a> <a href="#">百度</a> <a href="#">图片</a> </td> </tr> <tr> <td>6</td> <td>水浒传</td> <td><img src="./images/up.jpg" alt=""></td> <td>355</td> <td>12344</td> <td> <a href="#">贴吧</a> <a href="#">百度</a> <a href="#">图片</a> </td> </tr> <tr> <td>7</td> <td>三国演义</td> <td><img src="./images/up.jpg" alt=""></td> <td>3555</td> <td>13444</td> <td> <a href="#">贴吧</a> <a href="#">百度</a> <a href="#">图片</a> </td> </tr> </table>单元格合并
单元格合并的程序：先上 后下 先左 后右
单元格合并三部曲
- 先确定是跨行合并 跨列合并
- 依据先上 后下 先左 后右的程序找到合并的指标单元格
- 删除多余的单元格
<table border="1" cellspacing="0" cellpadding="0" width="500" height="300" align="center"> <caption>个人信息表</caption> <tr> <td colspan="3" rowspan="3"></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <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> </table>复制代码表格划分构造
<body> <table border="1" cellspacing="0" cellpadding="0" width="600" height="200"> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>尧子陌</td> <td>女</td> <td>26</td> </tr> <tr> <td>惊鸿</td> <td>男</td> <td>28</td> </tr> </tbody> <tfoot> <tr> <td>地址</td> <td colspan="2">地球村</td> </tr> </tfoot> </table></body>表格总结
列表
列表用来布局 让布局形式更加参差对立 自在搭配更高容器外面装载着构造 款式统一的文字或图片的一种模式 叫做列表
无序列表
无序列表指的是没有程序的列表 由<ul></ul> <li><li>两组标签组成注意事项
- ul标签中只能寄存li标签
- li标签就像一个容器 能够寄存任意的标签
- 列表领有本人的款式 交给css来解决
<ul> <li>香蕉</li> <li>凤梨</li> <li>苹果</li> <li>火龙果</li> <li>丑橘</li> <li>菠萝</li> </ul>复制代码有序列表
有程序的列表 简称有序列表 由<ol></ol> <li></li>两组标签组成复制代码 <h2>国家排行榜</h2> <ol> <li>美国</li> <li>中国</li> <li>俄罗斯</li> <li>英国</li> <li>法国</li> <li>意大利</li> </ol>自定义列表
对术语或者名词进行解释的列表 简称自定义列表 由<dl></dl> <dt></dt> <dd></dd>组成复制代码 <dl> <dt>名词</dt> <dd>名词解释1</dd> <dd>名词解释2</dd> <dd>名词解释3</dd> </dl>表单
表单的作用：收集用户信息表单三局部：表单 提示信息 表单域
input类型
注意事项
1. <input />标签为单标签2. type属性设置不同的属性值示意不同的控件类型3. 除了type属性外 input还有别的属性4. value指表单关上要显示的文字value
表单值 表单默认显示的文本
name
name:表单的名字 为了区别不同的表单
checked属性
checked属性示意默认选中状态
总结
<body> <p>账号：<input type="text" value="请输出账号" name="username"></p> <p>明码：<input type="password" value="请输出明码" name="password"></p> <p>性别：<input type="radio" name="sex">男<input type="radio" name="sex">女<input type="radio" name="sex">人妖</p> <p>喜好：<input type="checkbox" name="hobby">篮球<input type="checkbox" name="hobby">足球<input type="checkbox" name="hobby">乒乓球</p> <p>搜寻：<input type="button" value="搜寻"></p> <p>文件：<input type="file"></p> <pre><input type="submit"> <input type="reset"> </pre></body>lable标签
点击lable标签的文字时 光标会跳往被绑定的表单元素外面
第一种办法
间接用lable来包裹
<label > 账号：<input type="text" value="请输出账号"> </label>第二种办法
间接用for id来实现
<label for="password">账号：</label> <input type="text" name="password" id="password">文本域textarea
textarea:文本域 用来输出多行文字的 属于双标签 能够当留言板应用
<h2>留言板</h2> <textarea name="" id="" cols="30" rows="10"> </textarea>下拉菜单
select:下拉菜单
注意事项
- select标签至多蕴含一对option标签
- option标签定义selected标签即为选中的默认值
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <select name="" id=""> <option value="" >请抉择以后的省</option> <option value="" selected>北京</option> <option value="">上海</option> <option value="">浙江</option> <option value="">广东</option> <option value="">河南</option> </select> <select name="" id=""> <option value="">请抉择以后的市</option> <option value="">南阳市</option> <option value="">商丘市</option> <option value="">驻马店市</option> <option value="">信阳市</option> <option value="">郑州市</option> </select></body></html>form表单域
form：表单域 对用户信息进行收集和传递 form会将表单的所有内容提交到服务器
<form action="Yao.PHP" method="POST" name="sheet"> <p>账号:<input type="text" name="username"/></p> <p>账号:<input type="password" name="password"/></p> <pre><input type="submit"> <input type="reset"></pre> </form>综合案例
<body> <table width="600" align="center"> <caption> <h4>青春不常在 放松谈恋爱</h4> </caption> <!-- 第一行 --> <tr> <td>性别</td> <td> <img src="./images/man.jpg" /> <input type="radio" name=sex />男 <img src="./images/women.jpg" alt=""> <input type="radio" name="sex">女 </td> </tr> <!-- 第二行 --> <tr> <td>生日</td> <td> <select name="" id=""> <option value="">请抉择年</option> <option value="">1996</option> <option value="">1997</option> <option value="">1998</option> </select> <select name="" id=""> <option value="">请抉择月</option> <option value="">12</option> <option value="">11</option> <option value="">10</option> </select> <select name="" id=""> <option value="">请抉择日</option> <option value="">1</option> <option value="">2</option> <option value="">3</option> </select> </td> </tr> <!-- 第三行 --> <tr> <td>所在地区</td> <td> <lable> <input type="text"></lable> </td> </tr> <!-- 第四行 --> <tr> <td>婚姻状况</td> <td> <input type="radio" name="matrimony">未婚 <input type="radio" name="matrimony">已婚 <input type="radio" name="matrimony">离异 </td> </tr> <!-- 第五行 --> <tr> <td>学历</td> <td><input type="text" value="高中"></td> </tr> <!-- 第六行 --> <tr> <td>月薪</td> <td><input type="text" value="5000~10000"></td> </tr> <!-- 第七行 --> <tr> <td>手机号</td> <td><input type="text" value=""></td> </tr> <!-- 第八行 --> <tr> <td>呢称</td> <td><input type="text" value=""></td> </tr> <!-- 第九行 --> <tr> <td>喜爱的类型</td> <td> <input type="checkbox" name="genre"> 御姐 <input type="checkbox" name="genre"> 萝莉 <input type="checkbox" name="genre"> 宅女 <input type="checkbox" name="genre"> 傻白甜 </td> </tr> <!-- 第十行 --> <tr> <td>自我介绍</td> <td><textarea name="" id="" cols="30" rows="10"></textarea></td> </tr> <!-- 第十一行 --> <tr> <td></td> <td><img src="./images/btn(1).png" alt=""></td> </tr> <!-- 第十二行 --> <tr> <td></td> <td><input type="checkbox" name="agree">我批准注册条款和会员退出规范</td> </tr> <!-- 第十三行 --> <tr> <td></td> <td><a href="#">我是会员 立刻登录</a></td> </tr> <!-- 第十四行 --> <tr> <td></td> <td> <h5>我承诺</h5> <ul> <li>未满18岁</li> <li>抱着恋爱的态度</li> <li>真挚为了另一半</li> </ul> </td> </tr> </table> 查阅材料
- w3c :www.w3school.com.cn/
- MDN:developer.mozilla.org/zh-CN/