目录
本章介绍一下 HTML语言常用的三种元素:表格、列表和表单
| 表格
表格 · 基本语法
基本语法
表格不是用来布局页面的,是用来展示数据的
表头标签
结构标签
我们可以通过表格结构标签,把表格的代码编写分为 [表头] 和 [表体] 两大部分
表格 · 属性(了解)
今后,表格的 align border width height 等属性都是在CSS中定义的
需要注意的是: cellpadding cellspacing无法写在CSS中
-
cellpadding:把文字看作一个矩形、其矩形与该单元格之间的距离为cellpadding
-
cellspacing:单元格和单元格之间的距离
表格 · 合并单元格
代码示例
<!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>Document</title>
</head>
<body>
<p>原始表格</p>
<table border="1" cellspacing="0" width="100" height="100">
<tr> <td>@</td> <td>@</td> <td>@</td> </tr>
<tr> <td>@</td> <td>@</td> <td>@</td> </tr>
<tr> <td>@</td> <td>@</td> <td>@</td> </tr>
</table>
<p>跨列合并单元格</p>
<table border="1" cellspacing="0" width="100" height="100">
<tr> <td>@</td> <td colspan="2">@</td> <!-- <td>@</td>--> </tr>
<tr> <td>@</td> <td>@</td> <td>@</td> </tr>
<tr> <td>@</td> <td>@</td> <td>@</td> </tr>
</table>
<p>跨行合并单元格</p>
<table border="1" cellspacing="0" width="100" height="100">
<tr> <td>@</td> <td>@</td> <td>@</td> </tr>
<tr> <td rowspan="2">@</td> <td>@</td> <td>@</td> </tr>
<tr> <!--<td>@</td>--> <td>@</td> <td>@</td> </tr>
</table>
</body>
</html>
表格 · 总结
| 列表
列表 · 简介
列表 · 三大列表语法
无序列表(重要)
有序列表
-
注意事项和无序列表一致
自定义列表
-
注意事项和无序列表一致
-
自定义列表相当于给一个列表加了一个列表头~~
列表 · 总结
| 表单
表单 · 简介
-
表单的作用:让用户填写信息,收集用户的信息
-
表单的构成:表单域(整个表单写在这里面)、表单控件(用户输入)、提示信息
-
表单的种类:inpuit输入元素、select下拉表单元素、textarea文本域元素
表单 · 表单域
表单 · input
input的基本简介
基本语法:
input的 type属性详解
-
注意:多个type=”radio”的input必须要有相同的名字,才能多选一
input示例
<!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>Document</title>
</head>
<body>
<h3>input表单元素</h3>
<form action="#" method="get" name="表单域名称">
input的text属性 <input type="text"> <br>
input的password属性 <input type="password"><br>
input的button属性 用于触发按钮响应 <input type="button" value="button"><br>
input的submit属性 用于提交数据到服务器 <input type="submit" value="submit"><br>
input的radio属性 用于单选按钮的定义 【A】<input type="radio" > 【B】<input type="radio"><br>
对于同名name的radio属性,会被视为一组,无法多选
【A】<input type="radio" name="1" value="送到后台的值"> 【B】<input type="radio" name="1" value="XXX" checked><br>
input的checkBox属性,用于多选 【A】<input type="checkbox" name="1"> 【B】<input type="checkbox" name="1"> 【C】<input type="checkbox" name="1">
</form>
</body>
</html>
表单 · input 各属性的使用场景
表单 · label标签
作用:增加用户体验
比如选择男女性别的时候,可以让用户点击头像就可以选中标签
在输入text文本的时候,点击文本的提示信息,就可以把光标放在输入栏内。
表单 · select textarea
示例:
<!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>Document</title>
</head>
<body>
<h4>下拉表单元素select</h4>
<form>
购买课程:
<select>
<option>Java基础</option>
<option>Java后端基础</option>
<option>Java后端</option>
<option>Java前端</option>
<option>Java互联网技术</option>
</select>
<input type="submit" value="购买"/>
</form>
<h4>文本域表单元素textarea</h4>
<form>
备忘录:
<textarea cols="10" rows="3">textarea中间写的东西作为默认文字展示</textarea>
</form>
</body>
</html>
HTML 总结