WEB前端——body内常⽤标签（列表标签，table标签）⼀、列表标签
语义：标记⼀堆数据是⼀个整体/列表
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的⼦标签则可以是任意其他标签
2、有序列表（极少使⽤）
<h1>智商排名</h1>
<ol>
<li>Egon</li>
<li>刘清正</li>
<li>武佩奇</li>
<li>alex</li>
<li>元昊</li>
</ol>
<!--有序列表能⼲的事，完全可以⽤⽆序列表取代-->
<h1>智商排名</h1>
<ul >
<li>1. xiwang</li>
<li>2. dabao</li>
<li>3. xiaoer</li>
<li>4. wangxing</li>
<li>5. ayca</li>
</ul>
3、⾃定义列表（也会经常使⽤）
#1、作⽤分析
选择⽤什么标签的唯⼀标准，是看⽂本的实际语义，⽽不是看长什么样⼦
⽆序列表：内容是并列的，没有先后顺序
有序列表：内容是有先后顺序的
⾃定义列表：对⼀个题⽬进⾏解释说明的时候，⽤⾃定义列表，可以做⽹站尾部相关信息，⽹易注册界⾯的输⼊框
#2、⾃定义列表也是⼀个组合标签：dl>dt+dd
dl:defination list，⾃定义列表
dt：defination title，⾃定义标题
dd：defination 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 ⽤法举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul {
list-style: none;
}
</style>
</head>
<body>
<!--⽆序列表-->
<ul>
<li>
<h2>标题栏</h2>
</li>
<li>1.秒杀</li>
<li>2.优惠券</li>
<li>3.PLUS会员</li>
</ul>
<!--⽆序列表-->
<!--有序列表-->
<ol>
<li>秒杀</li>
<li>优惠券</li>
<li>PLUS会员</li>
</ol>
<!--有序列表-->
<!--⾃定义列表-->
<dl>
<dt>智商排名</dt>
<dd>1、egon</dd>
<dd>2、lxx</dd>
<dd>3、alex</dd>
<dd>4、hxx</dd>
<dt>颜值排名</dt>
<dd>egon</dd>
<dd>lxx</dd>
<dd>hxx</dd>
<dd>alex</dd>
</dl>
<!--⾃定义列表-->
<!--练习题-->
<dl>
<dt>购物流程</dt>
<dd>1111</dd>
<dd>1111</dd>
<dd>1111</dd>
<dt>配送⽅式</dt>
<dd>1111</dd>
<dd>1111</dd>
<dd>1111</dd>
<dt>⽀付⽅式</dt>
<dd>1111</dd>
<dd>1111</dd>
<dd>1111</dd>
</dl>
<hr>
<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>
列表标签⽤法举例
⼆、table标签
语义：标记⼀段数据为表格
1、介绍
#1、作⽤
表格标签是⼀种数据的展现形式，当数据量⾮常⼤的时候，使⽤表格的形式来展⽰被认为是最清晰的
#2、格式
<table>
<tr>
<td></td>
</tr>
</table>
tr代表表格的⼀⾏数据
td表⼀⾏中的⼀个普通单元格
th表⽰表头单元格
#3、注意点：
表格标签有⼀个边框属性，这个属性决定了边框的宽度。默认情况下这个属性的值为0，所以看不到边框
2、表格属性
#1、宽度和⾼度
可以给table和td设置width和height属性
1.1 默认情况下表格的宽⾼是按照内容的尺⼨来调整的，也可以通过给table标签设置widht和height来⼿动指定表格的宽⾼
1.2 如果给td标签设置width和height属性，会修改当前单元格的宽度和⾼度，只要不超过table的宽⾼，则不会影响整个表格的宽度和⾼度#2、⽔平对齐和垂直对齐
⽔平对齐align可以给table、tr、td标签设置
垂直对齐valign只能给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"
3、三种细线表格
#1、⽅式⼀
在标签中，想通过指定外边距为0来实现细线表格是不靠谱的，其实他是将2条线合成了⼀条线.所以看上去很不舒服，如下实现<table width="200px" height="200px" bgcolor="black" border="1" cellspacing="0px">
<tr bgcolor="white">
<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标签设置bgcolor
2、给tr标签设置bgcolor
3、给table标签设置cellspacing="1px"
注意：
table、tr、td标签都⽀持bgcolor属性
<table width="200px" height="200px" bgcolor="black" cellspacing="1px">
<tr bgcolor="white">
<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>
#3、⽅式三（）
<table border="1px" >
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>egon</td>
<td>male</td>
<td>18</td>
</tr>
<tr>
<td>alex</td>
<td>female</td>
<td>19</td>
</tr>
</table>
4、表格的结构
5、表的结构详解
  ps:
  整张表格table只能⽔平对齐，默认左对齐
  垂直⽅向都是默认中对齐
  tr  td可以⽔平左右对齐
为了⽅便管理维护以及提升语义，我们将表格中存储的数据分为四类：
#1、表格的标题:caption
特点：相对于表格宽度⾃动居中对齐
注意:
1.1 该标签⼀定要写在table标签⾥，否则⽆效
1.2 caption⼀定要紧跟在table标签内的第⼀个
#2、表格的表头信息:thead
特点：专门⽤来存储每⼀列的标题，只要将当前列的标题存储在这个标签中就会⾃动居中+加粗⽂字
#3、表格的主体信息:tbody
注意：
3.1 如果没有添加tbody，浏览器会⾃动添加
3.2 如果指定了thread和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="white">
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr bgcolor="white">
<td>egon</td>
<td>male</td>
<td>18</td>
</tr>
<tr bgcolor="white">
<td>egon</td>
<td>male</td>
<td>18</td>
</tr>
<tr bgcolor="white">
<td>egon</td>
<td>male</td>
html ul标签<td>18</td>
</tr>
</tbody>
<tfoot>
<tr bgcolor="white">
<td>3</td>
<td>3</td>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。