HTML表格与表单的标签与属性
表格的标签与属性
1.标签
table：表格标签<table></table>
tr：表格行标签<tr></tr>
td：标准单元格<td></td>
th：表头单元格<th></th>
table表格由 tr 和 td / th 标签组成
实例一：
//实例一源码<table border="1"><tr><th>名称</th><th>单价</th><th>数量</th></tr><tr><td>拖鞋</td><td>35元</td><td>15对</td></tr><tr><td>棉拖</td><td>68元</td><td>10对</td></tr></table>
复杂结构的表格由更多的HTML标签组成
caption：表格标题标签<caption></caption>
标签必须直接放置到 <table> 标签之后。
每个表格只能定义一个标题
thead：表头标签<thead></thead>
tbody：表格主体标签<tbody></tbody>
tfoot：表注标签<tfoot></tfoot>
thead 元素应该与 tbody 和 tfoot 元素结合起来使用。
实例二：
//实例二源码<table border="1"><caption>沃尔玛拖鞋采购单</caption><thead><tr><th>名称</th><th>单价</th><th>数量</th></tr></thead><tbody><tr><td>拖鞋</td><td>35元</td><td>15对</td></tr><tr><td>棉拖</td><td>68元</td><td>10对</td></tr></tbody><tfoot><tr><td>备注:</td><td colspan="2">2021年3月21日采购</td></tr></tfoot></table>
table属性
- border【边框属性】
border="1"可自定义单元格边框大小 - cellspacing【单元格之间的间距属性】
cellspacing="0"可自定义单元格之间间距 - cellpadding【单元格内间距属性】
cellpadding="5"可自定义单元格内间距 - width【宽度属性】
width="50%"可使用百分比、px、em、rem、vw、vh等单位 - heigth【高度属性】
heigth="50%"可使用百分比、px、em、rem、vw、vh等单位 - bgcolor【背景颜色属性】
bgcolor="red"可自定义背景颜色 - align【对齐属性】
align="center"只有left、right 、center、justify - rowspan【纵向单元格合并】
rowspan="3"数值为3则纵向合并3个单元格 - colspan【横向单元格合并】
colspan="6"数值为6则横向合并6个单元格
实例三
//实例三源码<table border="1" width="50%" cellspacing="0" cellpadding="5" align="center" ><caption><h3>山卡拉课程表</h3></caption><thead style="background-color: #e60021;"><tr><th>时间</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr></thead><tbody align="center"><tr><td rowspan="4" bgcolor="lightyellow">上午</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>美术</td><td>数学</td><td>计算机</td><td>音乐</td><td>数学</td></tr><tr><td>英语</td><td>美术</td><td>计算机</td><td>数学</td><td>语文</td></tr></tbody><tbody align="center"><tr><td colspan="6" bgcolor="violet">课间午休</td></tr></tbody><tbody align="center"><tr><td rowspan="3" bgcolor="lightyellow">上午</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>英语</td><td>美术</td><td>计算机</td><td>数学</td><td>语文</td></tr></tbody></table>
表单的标签与属性
1.表单的标签
form 标签用于创建表单
form 标签可包含以下四种标签
<input>标签用于搜集用户信息<fieldset></fieldset>元素可将表单内的相关元素分组<textarea></textarea>多行文本输入控件标签<legend></legend>元素为 fieldset 元素定义标题<label></label>元素为元素定义标记<select></select>元素为下拉选项框<option></option>标签用于定义列表中的可用选项。<datalist></datalist>标签定义选项列表,请与 input 元素配合使用该元素,来定义 input 可能的值。
datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。
请使用 input 元素的 list 属性来绑定 datalist。
2.表单属性
<form action="" method="post"></form>
- action 规定当提交表单时向何处发送表单数据。
- method 规定表单提交方式，方式分为get和post两种。
<label for="username">账号:</label><input type="text" name="username" id="username" autofocus required placeholder="必须是6-8位">
- for 绑定指定表单元素。
- type 设定元素类型。
- button 按钮
- checkbox 多选框
- file 文件选择
- hidden 隐藏
- image 图片
- password 密码
- radio 单选框
- reset 重置按钮
- submit 提交按钮
- text 文本输入框
- name 元素名称。
- id 元素ID。
- autofocus 自动获取焦点。
- required 设定该元素为必填项。
- placeholder 规定帮助用户填写输入字段的提示。
- value 设定元素值
<label>段位：<select name="level" id=""><option value="1" selected>青铜</option><option value="2">黄金</option><option value="3">铂金</option><option value="4">钻石</option><option value="4">超凡大师</option><option value="4">王者</option></select></label>
- selected 默认选项
<label>搜索：<input type="text" name="search" id="" list="keyword"><datalist id="keyword"><option value="php"></option><option value="python"></option><option value="javascript"></option><option value="java"></option></datalist></label>
- list 与datalist进行绑定
完整示例图
完整示例源码
<form action="" method="post"><fieldset style="width: 230px;"><legend>必填项</legend><div><label for="username">账号:</label><input type="text" name="username" id="username" autofocus required placeholder="必须是6-8位"></div><div><label for="password">密码:</label><input type="password" name="password" id="password" required placeholder="必须是字母+数字"></div><div><label for="email">邮箱:</label><input type="email" name="email" id="email" placeholder="demo@mail.com"></div></fieldset><div><label for="gender">性别：</label><input type="radio" name="gender" value="male" id="male"><label for="male">男生</label><input type="radio" name="gender" value="female" id="female"><label for="female">女生</label><input type="radio" name="gender" value="secret" id="secret" checked><label for="secret">保密</label></div><div><label for="gender">爱好：</label><input type="checkbox" name="hobby[]" value="php" id="php"><label for="php">PHP</label><input type="checkbox" name="hobby[]" value="javascript" id="javascript"><labelfor="javascript">JavaScript</label><input type="checkbox" name="hobby[]r" value="java" id="java"><label for="java">Java</label><input type="checkbox" name="hobby[]r" value="python" id="java"><label for="python">python</label></div><div><label>段位：<select name="level" id=""><option value="1" selected>青铜</option><option value="2">黄金</option><option value="3">铂金</option><option value="4">钻石</option><option value="4">超凡大师</option><option value="4">王者</option></select></label><label>搜索：<input type="text" name="search" id="" list="keyword"><datalist id="keyword"><option value="php"></option><option value="python"></option><option value="javascript"></option><option value="java"></option></datalist></label></div><div><input type="submit"></div></form>
总结：
- HTML 标签元素很多，要彻底掌握要多写多练。
- 熟悉各类型标签的组合结构使用，有利于页面布局与SEO优化
