目录
目标
- 能够书写表格
- 能够写出无序列表
- 能够写3~4个常用input表单类型
- 能够写出下拉列表表单
- 能够使用表单元素实现注册页面
- 能够独立查阅W3C文档
一、表格标签
- 表格的主要作用
主要用于显示,展示数据。
- 表格的基本语法
<!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="2" cellspacing="2" cellpadding="2" width="50%">
<tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
<tr><td>张三</td><td>男</td><td>18</td></tr>
<tr><td>李四</td><td>女</td><td>19</td></tr>
<tr><td>王五</td><td>男</td><td>20</td></tr>
</table>
</body>
</html>
- <table></table>是用于定义表格的标签。
- <tr></tr>是用于定义表格中的行,必须嵌套在<table></table>标签中。
- <td></td>用于定义表格中的单元格,必须嵌套在<tr></tr>标签中。
- 字母td指表格数据(table data),即数据单元格的内容。
- 表头单元格标签
一般表头单元格位于表格的第一行或第一列,表头单元格里的文本内容加粗居中显示。
<th>标签表示HTML表格的表头部分(table head的缩写)
- 表格属性
<!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>
<tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
<tr><td>张三</td><td>男</td><td>18</td></tr>
<tr><td>李四</td><td>女</td><td>19</td></tr>
<tr><td>王五</td><td>男</td><td>20</td></tr>
</table>
</body>
</html>
表格标签这部分属性我们实际上开发并不使用,后面通过css来设置
目的有两个:
- 记住这些单词,后面css用的到。
- 直观感受表格的外观形态。
属性名 | 属性值 | 描述 |
align | left、center、right | 规定表格相对周围元素的对齐方式 |
border | 1或者"" | 规定表格单元是否拥有边框,默认为"",表示没有边框 |
cellpadding | 像素值 | 规定单元边沿与其内容之间的空白,默认1像素 |
cellspacing | 像素值 | 规定单元格之间的空白,默认2像素 |
width | 像素值或百分比 | 规定表格的宽度 |
- 案例一——小说排行榜
成品演示:
代码:
<!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" cellspacing="0" cellpadding="0" width="500" height="249">
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></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="down.jpg"></td>
<td>124</td>
<td>675432</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>3</td>
<td>西游记</td>
<td><img src="up.jpg"></td>
<td>212</td>
<td>7654</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>4</td>
<td>红楼梦</td>
<td><img src="up.jpg"></td>
<td>23</td>
<td>75645</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>5</td>
<td>甄嬛传</td>
<td><img src="down.jpg"></td>
<td>121</td>
<td>7676</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>6</td>
<td>水浒传</td>
<td><img src="up.jpg"></td>
<td>576576</td>
<td>1231421</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>7</td>
<td>三国演义</td>
<td><img src="up.jpg"></td>
<td>234</td>
<td>7686</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
</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>Document</title>
</head>
<body>
<table align="center" border="1" cellspacing="0">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</body>
</html>
为了更好的表示表格的语义,可以将表格分割成表格头部和表格主体两大部分。
在表格标签中,分别用:<thead>标签 表示表格的头部区域,<tbody>标签 表示表格的主体区域,这样可以更好的分清表格结构。
注意:
- <thead></thead>内部必须有<tr>标签。
- <tbody></tbody>用于放数据本体。
- 以上标签均放在<table></table>中。
- 合并单元格
<!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 width="500" height="249" border="1" cellspacing="0">
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
- 合并方式
- 跨行合并:rowspan="合并单元格的个数"
- 跨列合并:colspan="合并单元格的个数"
- 目标单元格
- 跨行:最上侧单元格为目标单元格,写合并代码
- 跨列:最左侧单元格为目标单元格,写合并代码
- 合并步骤
- 确定跨行还是跨列
- 找到目标单元格,确定合并数量
- 删除多余单元格
二、列表标签
- 列表主要作用
列表就是用来布局的,最大的特点是整齐、有序,它作为布局会更加自由和方便。
- 列表主要分类
列表可以分为三大类:无序列表、有序列表和自定义列表。
- 无序列表
<!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>
<h4>你的家庭成员有?</h4>
<ul>
<li>爸爸</li>
<li>妈妈</li>
<li>爷爷</li>
<li>奶奶</li>
<li>我</li>
</ul>
</body>
</html>
<ul>标签表示HTML中项目的无序列表,一般会以项目符号呈现表项,而列表项使用<li>标签定义。
注意:
- 无序列表之间的数据是并列的。
- <ul></ul>中只可以嵌套<li></li>标签,嵌套其他的标签不可以。
- <li></li>中可以放任何元素,是一个容器。
- 无序列表会带有自己的样式属性,可以更改,但一般用css,无需自己更改。
- 有序列表
<!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>
<h4>价格排行榜</h4>
<ol>
<li>a 10000</li>
<li>b 1000</li>
<li>c 100</li>
</ol>
</body>
</html>
<ol>标签表示HTML中项目的有序列表。
注意:
- <ol></ol>中只能嵌套<li></li>标签,嵌套其他标签不可以。
- <li></li>中可以放任何元素,是一个容器。
- 有序列表会带有自己的样式属性,可以更改,但一般用css,无需自己更改。
- 自定义列表
<!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>
<dl>
<dt>项目A</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dd>内容3</dd>
<dt>项目B</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dd>内容3</dd>
</dl>
</body>
</html>
<dl>标签表示HTML中项目的自定义列表,该标签会与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用。
注意:
- <dl></dl>里面只能包含<dt>和<dd>。
- <dt>和<dd>个数没有限制,经常是一个<dt>对应多个<dd>。
三、表单标签
- 为什么需要表单
为了收集用户信息。
跟用户进行交互。
- 表单的组成
在HTML中,一个完整的表单由表单域、表单控件(也称为表单元素)和提示信息3个部分组成。
- 表单域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表单域(了解)</title>
</head>
<body>
<form action="demo.php" method="POST" name="name1">
</form>
</body>
</html>
包含表单元素的区域。
在HTML标签中,<form>标签用于定义表单域。
<form>会把它范围内的表单元素信息提交给服务器。
常用属性:
属性 | 属性值 | 作用 |
action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址。 |
method | get/post | 用于设置表单数据的提交方式,其值为get或者post。 |
name | 名称 | 用于指定表单的名称,以区分同一个页面中的多个表单域。 |
- 表单控件(表单元素)
- 分类:
- input输入表单元素
- select下拉表单元素
- textarea文本域元素
- <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>问卷</title>
</head>
<body>
<!-- 表单元素的使用 -->
<form action="zhuce.php" method="post" name="注册表">
<!-- text 输入内容 -->
<!-- placeholder用于框内提示语 -->
<!-- maxlength 规定可以输入的最大长度 -->
用户名:<input type="text" name="username" placeholder="请输入用户名" maxlength="10"> <br />
<!-- password 输入内容隐藏 -->
密码:<input type="password" name="password" placeholder="请输入密码" maxlength="6"> <br />
<!-- radio 单选按钮 -->
<!-- 只有这里的radio元素拥有相同的name才能实现多选一 -->
<!-- value 可以根据选择返回相应的值 -->
<!-- checked 当页面打开时默认勾选的选项 -->
性别:男 <input type="radio" name="sex" value="男" checked="checked"> 女 <input type="radio" name="sex" value="女"> <br />
<!-- checkbox 复选框 -->
爱好:吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby" value="睡觉"> 打豆豆 <input type="checkbox" name="hobby" value="打豆豆"> <br />
<!-- submit 提交信息 -->
<input type="submit" name="submit" value="注册">
<!-- reset 可以还原到初始默认状态 -->
<input type="reset" name="reset" value="重新填写">
<!-- button 普通按钮 后期结合JavaScript搭配使用 -->
<input type="button" name="button" value="我是按钮"> <br />
<!-- file 文件域 上传文件使用 -->
上传头像:<input type="file" name="file">
</form>
</body>
</html>
<input>标签用于收集用户信息。
在<input>标签中,包含一个type属性,根据不同的type属性值,输入字段拥有很多种形式。
注意:
- <input />标签为单标签。
- type属性设置不同的属性值用来指定不同的控件类型。
type属性的属性值及其描述如下:
属性值 | 描述 |
button | 定义可点击按钮(多数情况下,用于通过JavaScript启动脚本)。 |
checkbox | 定义复选框。 |
file | 定义输入字段和"浏览"按钮,供文件上传。 |
hidden | 定义隐藏的输入字段。 |
image | 定义图像形式的提交按钮。 |
password | 定义密码字段,该字段中的字符被掩码。 |
radio | 定义单选按钮(多选一) |
reset | 定义重置按钮,重置按钮会清除表单中的所有数据。 |
submit | 定义提交按钮,提交按钮会把表单数据发送到服务端。 |
text | 定义单行的输入字段,用户可在其中输入文本,默认宽度为20个字符。 |
除了type外,还有其它一些属性:
属性 | 属性值 | 描述 |
name | 由用户自定义 | 定义input元素的名称 |
value | 有用户自定义 | 规定input元素的值 |
checked | checked | 规定此input元素首次加载时应当被选中 |
maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
placeholder | 由用户自定义 | 规定输入字段框内的提示语 |
- name和value是每个表单元素都有的属性值,主要给后台人员使用。
- name表单元素的名字,要求单选按钮和复选框要有相同的name值。
- checked属性主要针对于单选按钮和复选框,主要作用一打开页面,就可以默认选中某个表单元素。
- maxlength是用户可以在表单元素输入最大字符数,一般较少使用。
- <label>标签
<!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>label标签的使用</title>
</head>
<body>
<!-- 有了label标签,可以直接通过点字来进行输入 -->
<form>
<label for="username">用户名:</label><input type="text" id="username" placeholder="请输入用户名">
<br />
<label for="password">密码:</label><input type="password" id="password" placeholder="请输入密码">
<br />
<label for="男">男</label><input type="radio" id="男" name="sex" value="男">
<label for="女">女</label><input type="radio" id="女" name="sex" value="女">
</form>
</body>
</html>
<label>标签为input元素定义标注(标签)
<label>标签用于绑定一个表单元素,当点击<label>标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验。
核心:<label>标签的for属性应当与相关元素的id属性相同。
- <select>表单元素
<!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>select表单元素使用</title>
</head>
<body>
<form>
籍贯:
<select>
<option>安徽</option>
<option>浙江</option>
<option>江苏</option>
<option selected="selected">请选择</option>
</select>
</form>
</body>
</html>
使用场景:在页面中,如果有多个选项让用户选择,并且想要节约页面空间时,可以使用<select>标签控件定义下拉列表。
注意:
- <select>里面至少包含一对<option>。
- 在<option>中定义selected="selected"时,当前项即为默认选项。
- <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>textarea文本域表单元素的使用</title>
</head>
<body>
<form>
反馈:
<textarea name="textarea" id="textarea" rows="5" cols="50" placeholder="请输入内容"></textarea>
</form>
</body>
</html>
使用场景:在用户输入内容较多的情况下,我们可以使用<textarea>标签。
在表单元素中,<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>注册页面</title>
</head>
<body>
<form>
<table width="600">
<h4>青春不常在,抓紧谈恋爱</h4>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="nan" id="nan"><label for="nan"><img src="images/man.jpg">男</label>
<input type="radio" name="sex" value="nv" id="nv"><label for="nv"><img src="images/woman.jpg">女</label>
</td>
</tr>
<tr>
<td>生日</td>
<td>
<select>
<option selected="selected">--请选择年--</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
</select>
<select>
<option selected="selected">--请选择月--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select>
<option selected="selected">--请选择日--</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
</td>
</tr>
<tr>
<td>所在地区</td>
<td>
<input type="text" placeholder="请输入地区">
</td>
</tr>
<tr>
<td>婚姻状况</td>
<td>
<input type="radio" name="situation" value="未婚" id="未婚"><label for="未婚">未婚</label>
<input type="radio" name="situation" value="已婚" id="已婚"><label for="已婚">已婚</label>
<input type="radio" name="situation" value="离婚" id="离婚"><label for="离婚">离婚</label>
</td>
</tr>
<tr>
<td>学历</td>
<td>
<select>
<option selected="selected">--请选择学历--</option>
<option value="小学">小学</option>
<option value="初中">初中</option>
<option value="高中">高中</option>
<option value="大学">大学</option>
</select>
</td>
</tr>
<tr>
<td>喜欢的类型</td>
<td>
<input type="checkbox" name="love">妩媚的
<input type="checkbox" name="love">可爱的
<input type="checkbox" name="love">小鲜肉
<input type="checkbox" name="love">老腊肉
<input type="checkbox" name="love">都喜欢
</td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<textarea name="text" placeholder="请输入内容"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="免费注册">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" name="1">我同意注册条款和会员加入标准
</td>
</tr>
<tr>
<td></td>
<td>
<a href="#">我是会员,立即登录</a>
</td>
</tr>
<tr>
<td></td>
<td>
<h3>我承诺</h3>
<ul>
<li>年满18岁、单身</li> <br />
<li>抱着严谨的态度</li> <br />
<li>真诚寻找另一半</li> <br />
</ul>
</td>
</tr>
</table>
</form>
</body>
</html>
五、查阅文档
经常查阅文档是一个非常好的学习习惯。