051.HTML基础之body标签
day051.HTML基础之body标签
文章目录
- 一、HTML常用标签
-
- （一）body内其他常用标签
-
- 1.列表标签
-
- （1）**无序列表（列表标签中使用最多的一种，非常重要）：unordered list**
- （2）**有序列表（极少使用）**
- （3）**自定义列表（也会经常使用）**
- 2.table标签
-
- （1）table标签的作用及格式
- （2）表格属性
- （3）表格的结构
- （4）单元格合并
- （5）传统布局
- 3.from标签
-
- （1）什么是form表单
- （2）form表单标签的属性
- （3）form内表单控件
- （4）补充了解知识：
一、HTML常用标签
（一）body内其他常用标签
1.列表标签
语义：标记一堆数据是一个整体/列表
HTML中列表标签分为三种。
（1）无序列表（列表标签中使用最多的一种，非常重要）：unordered list
#1、作用：
-- 制作导航条、商品列表、新闻列表等
#2、组合使用ul>li
<ul>
<li>秒杀</li>
<li>优惠券</li>
<li>PLUS会员</li>
<li>闪购</li>
<li>拍卖</li>
<li>京东服饰</li>
<li>京东超市</li>
<li>生鲜</li>
<li>全球购</li>
<li>京东金融</li>
</ul>
#3、ul标签的属性type（这属于列表的样式，所以了解即可）
-- type：列表标识的类型
disc：实心圆(默认值)
circle：空心圆
square：实心矩形
none：不显示标识
-- 可以通过css直接去掉小圆点:
<style type="text/css">
ul {
list-style: none;
}
</style>
#4、注意
-- ul与li是组合标签应该一起出现，并且ul的子标签只应该是li，而li的子标签则可以是任意其他标签
# 无序列表练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>物品清单</h1>
<ul>
<li>
<h2>蔬菜</h2>
<ul>
<li>西红柿</li>
<li>花瓜</li>
<li>芹菜</li>
</ul>
</li>
<li>
<h2>水果</h2>
<ul>
<li>香蕉</li>
<li>菠萝</li>
<li>火龙果</li>
</ul>
</li>
</ul>
</body>
</html>
（2）有序列表（极少使用）
<h1>阿巴拉契亚山天降伟人的头衔h1>
<ol>
<li>帝国的皇帝li>
<li>阿美利加全境守护者li>
<li>欧罗巴的仲裁者li>
<li>蓝色星球最强军队的指挥官li>
<li>南朝鲜和扶桑四岛的慈父li>
ol>
<h1>阿巴拉契亚山天降伟人的头衔h1>
<ul style="list-style: none">
<li>1.帝国的皇帝li>
<li>2.阿美利加全境守护者li>
<li>3.欧罗巴的仲裁者li>
<li>4.蓝色星球最强军队的指挥官li>
<li>5.南朝鲜和扶桑四岛的慈父li>
ul>
（3）自定义列表（也会经常使用）
# 1、作用分析
--选择用什么标签的唯一标准，是看文本的实际语义，而不是看长什么样子
--无序列表：内容是并列的,没有先后顺序
--有序列表：内容是有先后顺序的
--自定义列表：对一个题目进行解释说明的时候，用自定义列表,可以做网站尾部相关信息，网易注册界面的输入框
# 2、自定义列表也是一个组合标签：dl>dt+dd
--dl:definition list，自定义列表
--dt：definition title，自定义标题
--dd：definition description，自定义描述
<dl>
<dt>自定义标题1</dt>
<dd>描述1</dd>
<dd>描述2</dd>
<dd>描述3</dd>
<dt>自定义标题2</dt>
<dd>描述1</dd>
<dd>描述2</dd>
<dd>描述3</dd>
<dt>自定义标题3</dt>
<dd>描述1</dd>
<dd>描述2</dd>
<dd>描述3</dd>
</dl>
# 3、注意:
3.1) dl>dt+dd应该组合出现，dl中只应该存放dt和dd，而可以在dt和dd中添加任意其他标签
3.2) 一个dt可以可以没有对应的dd，也可以有多个，但建议一个dt对应一个dd
# 自定义列表练习
<dl>
<dt><h5>购物流程</h5></dt>
<dd>购物流程</dd>
<dd>会员介绍</dd>
<dd>生活旅行</dd>
<dt><h5>配送方式</h5></dt>
<dd>上门自提</dd>
<dd>211限时达</dd>
<dd>配送服务查询</dd>
<dt><h5>支付方式</h5></dt>
<dd>货到付款</dd>
<dd>在线支付</dd>
<dd>分期付款</dd>
</dl>
2.table标签
语义：标记一段数据为表格
（1）table标签的作用及格式
#1、作用
-- 表格标签是一种数据的展现形式，当数据量非常大的时候，使用表格的形式来展示被认为是最清晰的
#2、格式
<table>
<tr>
<td></td>
</tr>
</table>
tr：代表表格的一行数据
td：表一行中的一个普通单元格
th：表示表头单元格
#3、注意点：
-- 表格标签有一个边框属性，这个属性决定了边框的宽度。默认情况下这个属性的值为0，所以看不到边框
# 小练习
<table border="1px" >
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr bgcolor="white" >
<td>Egon</td>
<td>male</td>
<td>18</td>
</tr>
<tr bgcolor="white">
<td>ALex</td>
<td>male</td>
<td>73</td>
</tr>
<tr bgcolor="white">
<td>Wxx</td>
<td>female</td>
<td>84</td>
</tr>
</table>
（2）表格属性
# 了解表格的属性
#1、宽度和高度
可以给table和td设置width和height属性
1.1 默认情况下表格的宽高是按照内容的尺寸来调整的，也可以通过给table标签设置widht和height来手动指定表格的宽高。
1.2 如果给td标签设置width和height属性，会修改当前单元格的宽度和高度，只要不超过table的宽高，则不会影响整个表格的宽度和高度。【当给首行/首列设置了width/height属性后，在后续的设置中，不超过前一个值的设置，以前一个为准，若超过则以后者为准】
#2、水平对齐和垂直对齐
1)、水平对齐align可以给table、tr、td标签设置
2)、垂直对齐valign【vertically align】只能给tr、td标签设置
========水平对齐===========
取值
align=“left”
align=“center”
align=“right”
2.1 给table标签设置水平对齐，可以让表格在水平方向上对齐。【表格在网页的左中右位置】
**强调：table只能设置水平方向**
2.2 给tr设置水平对齐，可以控制当前行所有单元格内容都水平对齐。【行内容的居左中右】
2.3 给td设置水平对齐，可以控制当前单元格内容水平对齐，tr与td冲突的情况下，以td为准。【在行整体基础上单元格内容的居左中右】
========垂直对齐===========
取值
valign=“top”
valign=“center”
valign=“bottom”
2.4 给tr设置垂直对齐可以让当前行所有单元格内容都垂直对齐。【行内容居上中下】
2.5 给td设置垂直对齐可以让当前单元格内容垂直对齐。【在行整体基础上单独居上中下】
#3、外边距和内边距
只能给table设置
3.1 外边距：单元格与单元格之间的间隔，cellspacing="3px"，默认值为2px
--
3.2 内边距：单元格边框与文字之间的距离/边距:cellpadding="200px"
-- 小于默认则为默认值
<table border="1px" width="500" height="300" cellspacing="0px" cellpadding="0px">
<caption>什么鬼表格caption>
<tr align="center">
<td >姓名td>
<td height="50">性别td>
<td >年龄td>
tr>
<tr align="center">
<td width="100">AGONtd>
<td>maletd>
<td>666td>
tr>
<tr align="center">
<td>BGONtd>
<td>maletd>
<td>888td>
tr>
<tr align="center">
<td>CGONtd>
<td>maletd>
<td>999td>
tr>
table>
<hr color="red">
<hr color="yellow">
<table border="0px" width="500" height="300" bgcolor="fuchsia" cellspacing="1px" cellpadding="0px">
<caption>什么鬼表格caption>
<tr align="center" bgcolor="white">
<td >姓名td>
<td height="50">性别td>
<td >年龄td>
tr>
<tr align="center" bgcolor="white">
<td width="100">AGONtd>
<td>maletd>
<td>666td>
tr>
<tr align="center" bgcolor="white">
<td>BGONtd>
<td>maletd>
<td>888td>
tr>
<tr align="center" bgcolor="white">
<td>CGONtd>
<td>maletd>
<td>999td>
tr>
table>
<hr color="red">
<hr color="yellow">
<table border="1px" width="500" height="300" style="border-collapse: collapse;border: 1px solid orangered">
<caption>什么鬼表格caption>
<tr align="center">
<td >姓名td>
<td height="50">性别td>
<td >年龄td>
tr>
<tr align="center">
<td width="100">AGONtd>
<td>maletd>
<td>666td>
tr>
<tr align="center">
<td>BGONtd>
<td>maletd>
<td>888td>
tr>
<tr align="center">
<td>CGONtd>
<td>maletd>
<td>999td>
tr>
table>
（3）表格的结构
# 为了方便管理维护以及提升语义，我们将表格中存储的数据分为四类：
# 1、表格的标题:caption
特点:相对于表格宽度自动居中对齐
注意:
1.1 该标签一定要写在table标签里，否则无效
1.2 caption一定要紧跟在table标签内的第一个
# 2、表格的表头信息:thead
特点：专门用来存储每一列的标题，只要将当前列的标题存储在这个标签中就会自动居中+加粗文字
# 3、表格的主体信息:tbody
注意：
3.1 如果没有添加tbody，浏览器会自动添加
3.2 如果指定了thead和tfoot，那么在修改整个表格的高度时，thead和tfoot有自己默认的高度，不会随着表格的高度变化而变化。
# 4、表尾信息:tfoot
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<!-- 培训信息统计表 -->
<table bgcolor="black" border="1" width="300px" height="300px" cellspacing="1px">
<caption>学员信息统计表</caption>
<thead>
<tr bgcolor="#00bfff">
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr bgcolor="white">
<td>帝国的皇帝</td>
<td>male</td>
<td>81</td>
</tr>
<tr bgcolor="white">
<td>阿美利加全境守护者</td>
<td>male</td>
<td>82</td>
</tr>
<tr bgcolor="white">
<td>欧罗巴的仲裁者</td>
<td>male</td>
<td>83</td>
</tr>
<tr bgcolor="white">
<td>蓝色星球最强军队的指挥官</td>
<td>male</td>
<td>84</td>
</tr>
<tr bgcolor="white">
<td>南朝鲜和扶桑四岛的慈父</td>
<td>male</td>
<td>85</td>
</tr>
</tbody>
<tfoot>
<tr bgcolor="white">
<td>3</td>
<td>2</td>
<td>1</td>
</tr>
</tfoot>
</table>
</body>
</html>
（4）单元格合并
#1、水平向上的单元格colspan
可以给td标签添加一个colspan属性，来把水平方向的单元格当做多个单元格来看待
<td colspan="2"></td>
#2、垂直向上的单元格rowspan
可以给td标签设置一个rowspan属性，来把垂直方向的的单元格当成多个去看待
#注意注意注意:
1、由于把某一个单元格当作了多个单元格来看待，所以就会多出一些单元格，所以需要删掉一些单元格
2、一定要记住，单元格合并永远是向后或者向下合并，而不能向前或向上合并
（5）传统布局
传统的布局方式就是使用table来做整体页面的布局，布局的技巧归纳为如下几点：
#1、定义表格宽高，将border、cellpadding、cellspacing全部设置为0
#2、单元格里面嵌套表格
#3、单元格中的元素和嵌套的表格用align和valign设置对齐方式
#4、通过属性或者css样式设置单元格中元素的样式
传统布局目前应用：
#1、快速制作用于演示的html页面
#2、商业推广EDM制作(广告邮件)
练习：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table--菜谱title>
head>
<body>
<table bgcolor="black" width="700" height="400" border="2px" style="border-collapse: collapse;border: 1px solid orangered">
<tbody>
<tr bgcolor="white">
<td width="50px" colspan="3" align="center">星期一菜谱td>
tr>
<tr bgcolor="white">
<td rowspan="2">素菜td>
<td>芹菜西瓜td>
<td>花椒青椒td>
tr>
<tr bgcolor="white">
<td>小葱冬瓜td>
<td>白菜泡椒td>
tr>
<tr bgcolor="white">
<td rowspan="2">荤菜td>
<td>暴雨鸡翅td>
<td>清蒸电鳗td>
tr>
<tr bgcolor="white">
<td>
红烧坦克 <img src="96B.jpg" alt="">
td>
<td>烤原子弹td>
tr>
tbody>
table>
body>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table--课程表title>
head>
<body>
<table width="700" height="300" border="1px" border="0" cellspacing="1" bgcolor="blue">
<caption>课程表caption>
<thead>thead>
<tbody align="center">
<tr bgcolor="white">
<td>项目td>
<td colspan="6">上课td>
<td>休息td>
tr>
<tr bgcolor="white">
<td>星期td>
<td>星期一td>
<td>星期二td>
<td>星期三td>
<td>星期四td>
<td>星期五td>
<td>星期六td>
<td>星期日td>
tr>
<tr bgcolor="white">
<td rowspan="4">上午td>
<td>语文td>
<td>数学td>
<td>英语td>
<td>英语td>
<td>物理td>
<td>计算机td>
<td rowspan="4">休息td>
tr>
<tr bgcolor="white">
<td>数学td>
<td>数学td>
<td>地理td>
<td>历史td>
<td>化学td>
<td>计算机td>
tr>
<tr bgcolor="white">
<td>化学td>
<td>语文td>
<td>体育td>
<td>计算机td>
<td>英语td>
<td>计算机td>
tr>
<tr bgcolor="white">
<td>语文td>
<td>数学td>
<td>英语td>
<td>英语td>
<td>物理td>
<td>计算机td>
tr>
<tr bgcolor="white">
<td rowspan="2">下午td>
<td>数学td>
<td>数学td>
<td>地理td>
<td>历史td>
<td>化学td>
<td>计算机td>
<td rowspan="2">休息td>
tr>
<tr bgcolor="white">
<td>数学td>
<td>数学td>
<td>地理td>
<td>历史td>
<td>化学td>
<td>计算机td>
tr>
tbody>
table>
body>
html>
3.from标签
语义：标记表单
（1）什么是form表单
#1、什么是表单？
表单就是专门用来接收用户输入或采集用户信息的
#2、表单的格式
<form>
<表单元素>
</form>
（2）form表单标签的属性
1)、action
1.1)、作用：指定向何处发送表单数据
1.2)、取值：
--绝对URL：https://www.baidu.com/a/b/c.html
--相对URL：/a/b/c.html,浏览器会自动补全
2)、method
2.1)、作用：定义表单提交数据的方式
2.2)、取值：
-- get:
--默认值，明文提交，提交的数据直接显示在url地址中，安全性低
--提交数据有大小限制，最大为2KB
-- post:
--提交的数据不会显示到url地址中，安全性高
--提交数据无大小限制
3)、enctype
3.1)、作用：规定在发送到服务器之前应该如何对表单数据进行编码。 默认地，表单数据会编码为 "application/x-www-form-urlencoded"。代表的是：在发送到服务器之前，所有字符都会进行编码。比如：空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值。
3.2)、取值：
--application/x-www-form-urlencoded：在发送前编码所有字符，不允许提交文件（默认）
--multipart/form-data：不对字符编码，在使用包含文件上传控件的表单时，必须使用该值
--text/plain：只对普通字符进行编码，如空格转换为 "+" 加号，但不对特殊字符以及文件编码
（3）form内表单控件
1)、input
1.1)、作用：用于接收用户输入或搜集用户信息
1.2)、属性：
--type属性指定控件类型，值为
--text输入时显示明文
--用户名：<input type="text" name="user">
--password输入时不显示明文
--密码：<input type="password" name="pwd">
--radio单选框
--单选框，默认情况下单选框不会互斥 注意：
--1、要想完成单选，多个input框的name属性值必须相同
--2、要想设定单选框的默认值，必须给input边距添加checked属性：checked="checked"
--3、在HTML中如果属性的取值和属性的名称一样，可以简写。比如checked="checked"简写为checked，但在XHTML必须写完整，所以在企业中还是建议写全。
--性别： <input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<input type="radio" name="gender" value="none" checked="checked">保密
--checkbox复选框
--爱好： <input type="checkbox" name="hobbies" value="basketball">篮球
<input type="checkbox" name="hobbies" value="football">足球
<input type="checkbox" name="hobbies" value="volleyball" checked="checked">排球
<input type="checkbox" name="hobbies" value="footbath" checked="checked">足浴
--file上传文件
--注意：form表单的method必须为POST，enctype必须为multipart/form-data <form action="/aaa" method="post" enctype="multipart/form-data">
<input type="file" name="uploadfile">
--普通按钮button：需要绑定onclick事件才能使用
--<input type="button" value="我是按钮" onclick="alert('我是弹窗提示信息')">
--<input type="image" src="96B.jpg" width="150" onclick="alert('我是弹窗提示信息')">
--提交按钮submit：可以自动提交
--<input type="submit" value="提交">
--重置按钮reset：把表单中填写好的数据清除
--<input type="reset" value="我是重置按钮">
--name指定提交数据的key
--value指定提交数据的value，可设置输入框的默认值
--用户名：<input type="text" name="user" value="egon">
--密码：<input type="password" name="pwd" value="123">
--placeholder提示用户应该输入什么样的数据
--用户名：<input type="text" name="user" placeholder="请输入用户名">
--密码：<input type="password" name="pwd" placeholder="请输入密码">
--disabled禁用该控件，不会提交任何关于该控件的数据
2)、label
2.1)、作用：关联文本与表单元素，实现点击文本时，如同点击表单元素一样
2.2)、属性：
-- for属性的值等于被关联的表单元素的ID值
-- <label for="uname">用户名：</label> <input type="text" name="username" id="uname">
性别：
<input type="radio" name="gender" value="male" id="gender1">
<label for="gender1">男</label>
<input type="radio" name="gender" value="female" id="gender2">
<label for="gender2">女</label>
3)、textarea
3.1)、作用：多行输入框
3.2)、属性：
--1、默认情况下，可以无限换行
--2、可以通过cols和row来指定宽度和高度，cols来指定行数，rows来指定列数，虽然指定了列数和行数，但仍可以无限往下输入
--3、默认情况下输入框是可以手动拉伸的，如果不想手动拉伸，需要定制css
<style type="text/css">
textarea {
resize: none;
}
</style>
--form
<form>
<textarea name="userinfo" id="" cols="50" rows="3" style="resize: none">
论颜值Agon秒杀一切，论才华更是无法想象
</textarea>
</form>
4)、select
4.1)、作用：下拉列表
4.2)、属性：
--name属性指定提交给后台数据的key
--size取值大于1，则为滚动列表，否则就是下拉列表
--mutiple设置多选
4.3)、outgroup：
--label属性设置提示信息
4.4)、option：
--value属性指定值提交给后台数据的value
4.5)、示例：
<form> <!--下拉列表-->
<p>籍贯</p>
<select name="addr" size="2">
<option value="深圳">深圳</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州" selected>广州</option>
</select>
<!--滚动列表 multiple设置以后实现多选效果，ctrl+鼠标左键进行多选-->
<p>意向工作城市</p>
<select name="city" size="5" multiple="multiple" style="display: inline-block;width: 100px">
<optgroup label="一线城市">
<option value="深圳">深圳</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州" selected>广州</option>
</optgroup>
<optgroup label="二线城市">
<option value="深圳">济南</option>
<option value="北京">青岛</option>
<option value="上海">烟台</option>
<option value="广州" selected>天津</option>
</optgroup>
</select>
</form>
（4）补充了解知识：
在form内还可以添加一种标签
<fieldset>添加边框
<legend>注册页面</legend>
表单控件......
</fieldset>