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"
    -- 小于默认则为默认值
<!--# 三种方式实现细线表格-->
<!-- 方式一: -->
<!-- 在标签中,想通过指定外边距为0来实现细线表格是不靠谱的,其实他是将2条线合成了一条线.所以看上去很不舒服,如下实现 -->
<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">AGON</td>
        <td>male</td>
        <td>666</td>
    </tr>
    <tr align="center">
        <td>BGON</td>
        <td>male</td>
        <td>888</td>
    </tr>
    <tr align="center">
        <td>CGON</td>
        <td>male</td>
        <td>999</td>
    </tr>
</table>

<hr color="red">
<hr color="yellow">

<!-- 方式二: -->
<!-- 细线表格的制作方式:
        1、给table标签设置bgcolor
        2、给tr标签设置bgcolor
        3、给table标签设置cellspacing="1px"

      注意:
      table、tr、td标签都支持bgcolor属性
 -->
<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">AGON</td>
        <td>male</td>
        <td>666</td>
    </tr>
    <tr align="center" bgcolor="white">
        <td>BGON</td>
        <td>male</td>
        <td>888</td>
    </tr>
    <tr align="center" bgcolor="white">
        <td>CGON</td>
        <td>male</td>
        <td>999</td>
    </tr>
</table>

<hr color="red">
<hr color="yellow">

<!-- 方式三: -->
<!-- 不再单独设置单元格间距以及单元格边距,直接上:(style="border-collapse: collapse;border: 1px solid red")
注意:border-collapse:合并单元格;  border: 1px 是设置外边框宽度,与内边框无关。
-->
<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">AGON</td>
        <td>male</td>
        <td>666</td>
    </tr>
    <tr align="center">
        <td>BGON</td>
        <td>male</td>
        <td>888</td>
    </tr>
    <tr align="center">
        <td>CGON</td>
        <td>male</td>
        <td>999</td>
    </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制作(广告邮件)

练习:

<!-- 练习1代码 -->
<!DOCTYPE html>
<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>
<!--            <td>aaa</td>-->
<!--            <td>aaa</td>-->
        </tr>
        <tr bgcolor="white">
            <td rowspan="2">素菜</td>
            <td>芹菜西瓜</td>
            <td>花椒青椒</td>
        </tr>
        <tr bgcolor="white">
<!--            <td>aaa</td>-->
            <td>小葱冬瓜</td>
            <td>白菜泡椒</td>
        </tr>
        <tr bgcolor="white">
            <td rowspan="2">荤菜</td>
            <td>暴雨鸡翅</td>
            <td>清蒸电鳗</td>
        </tr>
        <tr bgcolor="white">
<!--            <td>aaa</td>-->
            <td>
                红烧坦克  <img src="96B.jpg" alt=""> 
            </td>
            <td>烤原子弹</td>
        </tr>

    </tbody>

</table>

</body>
</html>

<!-- 练习2代码 -->
<!DOCTYPE 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>

本文链接http://element-ui.cn/article/show-153842.aspx