1.表格标签
1.1表格的作用
表格主要用于显示、展示数据,它可以让数据现实的更加规整,便于处理数据
表格不是用来布局页面的,而是用来展示数据的
1.2表格的基本语法
<table>
<tr>
<td>单元格里的内容</td>
....
</tr>
....
</table>
<table></table>
是用于定义表格的标签<tr></tr>
标签用于定义表格中的行,必须嵌套在<table></table>
标签中<td></td>
标签用于定义表格中的单元格,必须嵌套在<tr></tr>
标签中。
1.3表头单元格标签
一般表头单元格位于表格的第一行或者第一列,表头单元格里面的文本内容加粗居中显示
方法:<th>
标签表示HTML表格的表头部分(table head的缩写)
<table>
<tr>
<th>表头单元格里的内容</th>
....
</tr>
....
</table>
1.4表格的属性
表格标签属性并不常用,后面一般通过 CSS 来设置
目的有两个:
- 记住这些英语单词,后面CSS中会使用
- 直观感受表格的外观
属性名 | 属性值 | 描述 |
---|---|---|
align | left、center、right | 规定表格相对周围元素的对齐方式。 |
border | 1或"" | 规定表格是否有边框,默认为"",表示没有边框 |
cellpadding | 像素值 | 规定单元边沿与其内容的距离,默认的为1像素 |
cellspacing | 像素值 | 规定单元格之间的距离,默认为2像素 |
width或height | 像素值或百分比 | 规定表格的宽度或高度 |
1.5表格的结构标签
使用场景:表格太长,为了更好的表示表格的语义,可以将表格分割为表格头部和表格主体两大部分。
在表格标签中,分别用<thead>
标签表示表格的头部,用<tbody>
表示表格色主体区域,这样可以更好的分清表格结构。
如下面代码,使用这两个标签说明头部与主体(代码源于B站一名up主)
<!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>
<table align="center" width="500" height="249" border="1" cellspacing="0">
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>进入搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</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>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
</tbody>
</table>
</body>
</html>
1.6合并单元格
合并单元格的方式:
-
跨行合并:rowspan=“合并单元格的数目”
-
跨列合并:colspan=“合并单元格的个数”
目标单元格(写合并代码):
- 跨行:最上侧的单元格为目标单元格,写合并代码
- 跨列:最左侧单元格为目标单元格,写合并代码
合并单元格的方式:
- 先确定是跨行还是跨列
- 找到目标单元格,再确定合并的单元格数目。例如
<td colspan=2></td>
- 删除被合并的单元格
建议:先将表格框架写好,再去添加合并单元格的标签,最后在去删除被合并的单元格
2.列表标签
表格用来显示数据,而列表是用来布局的。
列表最大的特点就是整齐、整洁、有序。
分为三类:、
- 无序列表
- 有序列表
- 自定义列表
2.1无序列表
<ur>
标签表示HTML中的无序列表,一般会以项目符号呈现列表
而列表项用<li>
标签定义
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
- 无序列表中各项是并列的,没有顺序之分
<ul></ul>
标签中只能放<li>
标签,不能放入其他任何标签<li>
标签中可以放入任何标签- 无序列表会带有自己的样式属性,后面我们会使用CSS进行设计
2.2有序列表
<ol>
标签用来表示有序列表,<li>
标签用来定义列表项。
列表中的各项顺序会按定义是的顺序以数字来显示。
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
注意点:同无序列表
2.3自定义列表
自定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。
<dl>
标签用于定义描述列表,常与<dt>
(定义项目/名字)<dd>
(描述每一个项目/名字)标签一起使用
<dl>
<dt>名词</dt>
<dd>名次解释`</dd>
<dd>名词解释2</dd>
......
</dl>
注意:<dl>
中只能有<dd><dt>
3.表单
3.1为什么要表单
方便收集用户数据
3.2表单的组成
再HTML中一个完整的表单由表单域,表单控件(也称为表单元素)和提示信息3个部分组成。
3.3表单域
表单域是一个包含表单元素的区域
在HTML标签中<form>
标签用于定义表单域,以实现用户信息的收集和传递。
<form>
会将他范围里的表单元素信息传给服务器
<form action="urld" method="提交方式" name="表单域名">
各种表单元素控件
</form>
属性 | 属性值 | 作用 |
---|---|---|
action | url地址 | 用于接收并处理表单数据的服务器程序url地址 |
method | get/post | 用于设计表单数据的提交方式,其取值为get/post |
name | 名称 | 用于指定表单的名称,以区分同一个页面的多个表单域 |
3.4表单控件
3.4.1 <input>
输入表单元素
表单元素中<input>
标签用于收集用户信息
在<input>
标签中,包含一个type属性,根据不同的type属性值,输入的字段有很多形式
<input type="属性值"/>
<input/>
为单标签。
type属性设置不同的属性值用来指定不同的控件类型
属性值 | 描述 |
---|---|
button | 定义可点击按钮(多数情况,用于通过JavaScript启动脚本) |
checkbox | 定义复选框(多选) |
file | 定义输入字段和“浏览”按钮,供文件上传 |
hidden | 定义隐藏的输入字段 |
image | 定义图像形式的提交按钮 |
password | 定义密码字段,该字段中的字符被掩码 |
radio | 定义单选按钮(单选) |
rest | 定义重置按钮,重置按钮会重置表单内的所有数据 |
submit | 定义提交按钮,提交按钮会将表单数据发送到服务器 |
text | 定义单行的输入字段,用户可以在其中输入文本,默认宽度为20个字符 |
name | 定义input元素的名称(由用户自己定义) |
value | 规定input元素的值。(由用户自己定义) |
checked | 规定此input元素首次加载时应当被选中 |
maxlength | 规定输入字段中的字符的最大长度 |
当在一个栏目中设置多个单选按钮时,要想实现可以多选一,可以在每个单选按钮中设置为相同的名字
而多选按钮相同
<body>
<form action="xxx.php" method="get">
<!-- text 文本框 用户可以里面输入任何文字 -->
用户名: <input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
<!-- password 密码框 用户看不见输入的密码 -->
密码: <input type="password" name="pwd" > <br>
<!-- radio 单选按钮 可以实现多选一 -->
<!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
<!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->
性别: 男 <input type="radio" name="sex" value="男"> 女 <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"> 打豆豆 <input type="checkbox" name="hobby" checked="checked">
<br>
<!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 -->
<input type="submit" value="免费注册">
<!-- 重置按钮可以还原表单元素初始的默认状态 -->
<input type="reset" value="重新填写">
<!-- 普通按钮 button 后期结合js 搭配使用-->
<input type="button" value="获取短信验证码"> <br>
<!-- 文件域 使用场景 上传文件使用的 -->
上传头像: <input type="file" >
</form>
</body>
3.4.2<lable>
标签
<lable>
标签用于绑定一个表单元素,当点击<lable>
标签里的文本是可以选择该选项的
<lable for="sex">男</lable>
<input type="radio" name="sex" id=sex>
核心:<lable>
的for属性应当与相关元素的id相同
<lable for="text">用户名:</lable><input type="text" id="text">
3.4.3<select>
下拉标签
<select>
<option>选项一</option>
<option>选项二</option>
<option>选项三 </option>
</select>
1:< select>中至少含有一对
2:在<option>
中定义selected="selected"时,当前选项为默认选项
3.4.4文本域标签
<textarea>
w
</textarea>
d相同
<lable for="text">用户名:</lable><input type="text" id="text">
3.4.3<select>
下拉标签
<select>
<option>选项一</option>
<option>选项二</option>
<option>选项三 </option>
</select>
1:< select>中至少含有一对
2:在中定义selected="selected"时,当前页面为默认选项
3.4.4文本域标签
<textarea>
w
</textarea>
当用户输入的文字较多,就不能使用文本框表单<input type="text>,而是使用<textarea>
在表单元素中,<textarea>
用于定义多行文本输入控件,常用于留言板等
注意:可以在标签内定义行数与每行字数
cols=“每行字符数” rows=“规定的行数”.但在之后实际开发中,一般使用CSS来设计