表格标签
基本使用
table 标签: 表示整个表格
tr: 表示表格的一行
td: 表示一个单元格
th: 表示表头单元格. 会居中加粗
thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
tbody: 表格得到主体区域.
table 包含 tr , tr 包含 td 或者 th.
表格标签有一些属性, 可以用于设置大小边框等. 但是一般使用 CSS 方式来设置.
这些属性都要放到 table 标签中.
align 是表格相对于周围元素的对齐方式. align=“center” (不是内部元素的对齐方式)
border 表示边框. 1 表示有边框(数字越大, 边框越粗), “” 表示没边框.
cellpadding: 内容距离边框的距离, 默认 1 像素
cellspacing: 单元格之间的距离. 默认为 2 像素
width / height: 设置尺寸.
<!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="20" cellspacing="0" width="500" height="500"> <thead> <th>姓名</th> <th>性别</th> <th>年龄</th> </thead> <tbody> <tr> <td>张三</td> <td>男</td> <td>10</td> </tr> <tr> <td>李四</td> <td>女</td> <td>10</td> </tr> <tr> <td>王五</td> <td>女</td> <td>66</td> </tr> </tbody> </table> </body> </html>
效果 :
和并单元格
跨行合并: rowspan=“n”
跨列合并: colspan=“n”
- 先确定跨行还是跨列
- 找好目标单元格(跨列合并, 左侧是目标单元格; 跨行合并, 上方是目标单元格)
- 删除的多余的单元格
跨行和并 :
<!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="20" cellspacing="0" width="500" height="500"> <thead> <th>姓名</th> <th>性别</th> <th>年龄</th> </thead> <tbody> <tr> <td>张三</td> <td>男</td> <td rowspan="2">10</td> </tr> <tr> <td>李四</td> <td rowspan="2">女</td> </tr> <tr> <td>王五</td> <td>66</td> </tr> </tbody> </table> </body> </html>
效果 :
跨列和并 :
<!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="20" cellspacing="0" width="500" height="500"> <thead> <th>姓名</th> <th>性别</th> <th>年龄</th> </thead> <tbody> <tr> <td colspan="2">张三,男</td> <td >10</td> </tr> <tr> <td>李四</td> <td>女</td> <td>10</td> </tr> <tr> <td>王五</td> <td>女</td> <td>66</td> </tr> </tbody> </table> </body> </html>
效果 :
列表标签
主要使用来布局的. 整齐好看.
无序列表(重要) : ul li
有序列表(用的不多) : ol li
自定义列表(重要) : dl (总标签) dt (小标题) dd (围绕标题来说明)
<!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> <h3>无序列表</h3> <ul> <li>西游记</li> <li>水浒传</li> <li>红楼梦</li> <li>三国演义</li> </ul> <h3>有序列表</h3> <ol> <li>西游记</li> <li>水浒传</li> <li>红楼梦</li> <li>三国演义</li> </ol> <h3>自定义列表</h3> <dl> <dt>中国四大名著</dt> <dd>西游记</dd> <dd>水浒传</dd> <dd>红楼梦</dd> <dd>三国演义</dd> </dl> </body> </html>
效果 :
表单标签
表单是让用户输入信息的重要途径.
组成部分 :
表单域: 包含表单元素的区域. 重点是 form 标签.
表单控件: 输入框, 提交按钮等. 重点是 input 标签
form 标签
<form action="test.html" method="get" > ... [form 的内容] </form>
两个重要属性 : action, method
action : 表单提交到哪 (地址)
method : 以何种方式提交. (两种方式 : get, post)
input 标签
各种输入控件, 单行文本框, 按钮, 单选框, 复选框.
type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.
name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一.
value: input 中的默认值.
checked: 默认被选中. (用于单选按钮和多选按钮)
maxlength: 设定最大长度.
1.文本框
文本框 : <input type="text">
可以输入文字,数字等.
2.密码框
密码框 : <input type="password">
可以看到, 输入密码它会自动保密.
3.单选框
性别: <input type="radio" name="sex">男 <input type="radio" name="sex" checked="checked">女 <!-- 注意两个属性的名字得一样, 否则进行可以多选 -->
4.复选框
爱好: <input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox"> 打游戏
可以进行多选.
5.普通按钮
<input type="button" value="我是个按钮">
当前点击无反应, 需搭配 js 使用.
6.提交按钮
<form action="test.html" method="get"> <input type="text" name="username"> <input type="submit" value="提交"> </form>
提交按钮必须放到 form 标签内. 点击后就会尝试给服务器发送.
7.清空按钮
<form action="test.html"> <input type="text" name="username"> <input type="submit" value="提交"> <input type="reset" value="清空"> </form>
清空按钮必须放在 form 中. 点击后会将 form 内所有的用户输入内容重置.
8.选择文件
<input type="file">
点击选择文件, 会弹出对话框, 选择文件.
select 标签
实现下拉菜单的功能.
option 中定义 selected=“selected” 表示默认选中.
<select> <option>北京</option> <option selected="selected">上海</option> </select>
还可以给的第一个选项, 作为默认选项 :
<select> <option>--请选择年份--</option> <option>1991</option> <option>1992</option> <option>1993</option> <option>1994</option> <option>1995</option> </select>
textarea 标签
<textarea rows="3" cols="50"> </textarea>
如果不进行设置大小, 那就是默认大小.
rows 和 cols 也都不会直接使用, 都是用 css 来改的.
无语义标签: div & span
div 标签, division 的缩写, 含义是 分割
span 标签, 含义是跨度 (&span 用来缩进)
就相当于是两个盒子. 用于网页布局
div 是独占一行的, 是一个大盒子.
span 不独占一行, 是一个小盒子.
<div> <span>三国演义</span> <span>水浒传</span> <span>红楼梦</span> </div> <div> <span>三国演义</span> <span>水浒传</span> <span>红楼梦</span> </div>
