目录
六、HTML的其他标签
6.1 表格标签
注：表格不是用来布局页面的，而用来展示数据的，为嵌套结构
<table>
<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>
</table>
table : 表格标签，最外面一个框
tr : 一行 row
td : 一行里的单元格数据，有几个单元格即有几列 data
th : 表头单元格标签 (会居中、加粗）head
-
表格标签的属性
注: 这些属性要写到表格标签table里去！
-
表格结构代码
<body>
<table 属性="">
<thead> //表格的头部区域
<tr>
<th></th> <th><th> //每个单元格的头部
</tr>
</thead> //表格的头部区域
<tbody> //表格的主体区域
<tr>
<td></td> <td></td> //每个单元格的数据
</tr>
</tbody> //表格的主体区域
</table>
</body>
-
合并单元格
①确定是跨行还是跨列
②找到目标单元格，写上合并代码：
跨行：
rowspan="数量">
跨列：
colspan="数量">
③删除多余单元格：ctrl+/
例如：合并第一行的第2、3列，以及第一列的第2、3行
<table align="center" cellspacing="0" cellpadding="20" border="1" width="400" height="300" >
<thead>
<tr>
<th>a </th>
<th colspan="2">b </th>
<!-- <th>c </th> -->
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td>4</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>5</td>
<!-- <td>7</td> -->
</tr>
</tbody>
</table>
6.2 列表标签
注 ：表格是用展示数据的，列表是用来布局的
-
无序列表（重点）ul （unorder）
<h4>列表标题</h4>
<ul>
<li>列表项1</li>
<li>列表项2</li>
...
</ul>注 ：
①li之间是并列的，没有顺序之分
②ul之间只能嵌套li，不能直接放其他标签或者文字
③li之间可以容纳所有元素
④会带有自己的样式属性（小黑点），实际使用时通过CSS来设置
②、③、④也同样适用于有序列表
-
有序列表ol order
<ol>
<li>列表项1</li>
<li>列表项2</li>
...
</ol>-
自定义列表dl define
<dl>
<dt>名词</dt>
<dd>名词的解释1</dd>
<dd>名词的解释2</dd>
</dl>注 ：dl里只能放dt和dd，dd可以有若干个
-
列表总结
6.3 表单标签
一个完整的表单通常由：表单域、表单元素（控件）、提示信息 3部分组成。
-
表单域
作用：表单域就是一个区域，可将它范围内的表单元素信息 提交给 后台服务器。实现用户信息的搜集和传递。
定义：<form></form>
常用属性：写在from内部
<form action="demo.php" method="post" name="表单1">
</form>-
表单元素（控件）
①input输入表单元素——input是一个单标签
<input type="属性值">type属性的属性值以及描述：
其他的属性：
name，为每个表单元素取名，写在input内部，单选按钮的一组和复选框的一组要取相同的名。
value，为表单元素赋值，写在input内部，单选按钮和复选框看不到值，text能看见。每个value值不同。
注 ：
1 name 和 value 是每个表单元素都有的属性，主要给后台人员使用
2 name属性值是自定义的，要求单选按钮内部一组之间、复选框内部一组要有相同的name值（用来区别不同的表单元素）
3 value只在文本框中能看到效果，其余的复选框之类的看不到（刚打开页面就能在表单元素中看到文字）
4 checked属性主要针对单选按钮和复选框，作用（打开网页即默认勾选某个表单元素）
5 maxlength 是用户能在表达元素中输入的最大字符数，较少使用
6 submit提交按钮，可以把表单域form里面的表单元素 里面的值提交给后台服务器（sex=男这样的形式）
7 reset按钮，可以还原表单元素初始的默认状态
8 button普通按钮，后期结合js搭配使用
9 file文件域使用场景：上传文件时使用
<b>文本框</b>的使用效果: <br>
用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
<br>
<b>隐藏文本框</b>的使用效果: <br>
密 码：<input type="password" name="pw"> <br>
<br>
<b>单选按钮</b>的使用效果: <br>
性 别：男<input type="radio" name="sex" value="男"> 女<input type="radio" name="sex" value="女"> <br>
<br>
<b>复选框</b>的使用效果: <br>
爱 好：做饭<input type="checkbox" name="hobby" value="做饭"> 绘画<input type="checkbox" name="hobby" value="绘画"> 唱歌<input type="checkbox" name="hobby"value="唱歌"><br>
<br>
<b>默认勾选</b>的使用效果: <br>
<input type="checkbox" name="agree" value="同意" checked="checked"> 我已同意注册条款和会员加入标准 <br>
<b>提交按钮</b>的使用效果: <br>
<input type="submit" value="免费注册"> <br>
<br>
<b>重置按钮</b>的使用效果: <br>
<input type="reset" value="重置"> <br>
<br>
<b>普通按钮</b>的使用效果: <br>
<input type="button" value="获取短信验证码"> <br>
<br>
<b>文件域</b>的使用效果: <br>
上传头像<input type="file"> <br>
<br>②<label>标签：与input配合使用
使用场景：绑定一个表单元素，当点击文本时，光标转到相应的表单元素上，以增加用户体验。（不用再点表单元素如复选框、单选框，而点其对应的文字即可）
用法：label标签的for属性与input标签的id属性相同
<label for="sex">男</label>
<input type="radio" name="sex" id="sex"/>③select下拉表单元素——是一个双标签
使用场景：有多个选项供用户选择，并且想节约页面空间时。
<form>
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
</form>注：
1 <select>中至少包含一对<option>
2 <option>中定义selected="selected"时，表示当前项即为默认选中项。
④textarea文本域元素
使用场景：用户输入内容较多的情况，就不能使用文本框表单了。留言板、评论等。
<form>
评论区：
<textarea cols="50" rows="3">请输入您的评论</textarea> //cols和rows属性不用记，实际开发是在CSS中设置
</form>注区分 :
1 单选按钮/复选框默认选择：是在input标签里加checked="checked"
2下拉菜单默认选择：是在select标签里加selected="selected"
使用文档：
w3school网站、MDN网站
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
