- A+
所属分类:Web前端
一、列表标签
语义:标记一堆数据是一个整体/列表
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 style="list-style: none"> <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、方式三(style="border-collapse: collapse;border: 1px solid red") <table border="1px" style="border-collapse: collapse;border: 1px solid red"> <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> <td>18</td> </tr> </tbody> <tfoot> <tr bgcolor="white"> <td>3</td> <td>3</td> <td>3</td> </tr> </tfoot> </table> </body> </html>
6、表格单元格合并
#1、水平向上的单元格colspan 可以给td标签添加一个colspan属性,来把水平方向的单元格当做多个单元格来看待 <td colspan="2"></td> #2、垂直向上的单元格rowspan 可以给td标签设置一个rowspan属性,来把垂直方向的的单元格当成多个去看待 #注意注意注意: 1、由于把某一个单元格当作了多个单元格来看待,所以就会多出一些单元格,所以需要删掉一些单元格 2、一定要记住,单元格合并永远是向后或者向下合并,而不能向前或向上合并
单元格合并举例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1px" align="center" width="500px" height="500px" style="border-collapse: collapse;border: 1px solid green"> <caption>老爷们培训学员信息统计</caption> <thead> <th>姓名</th> <th>年龄</th> <th>智商</th> </thead> <tbody> <tr> <td>艾莉克斯</td> <td>73</td> <td>70</td> </tr> <tr> <td>egon</td> <td>18</td> <td>70</td> </tr> <tr> <td>艾莉克斯</td> <td>73</td> <td>70</td> </tr> </tbody> <tfoot> <td>统计</td> <td>43.6</td> <td>90</td> </tfoot> </table> </body> </html>
单元格合并
7、传统布局
传统的布局方式就是使用table来做整体页面的布局,布局的技巧归纳为如下几点: #1、定义表格宽高,将border、cellpadding、cellspacing全部设置为0 #2、单元格里面嵌套表格 #3、单元格中的元素和嵌套的表格用align和valign设置对齐方式 #4、通过属性或者css样式设置单元格中元素的样式 传统布局目前应用: #1、快速制作用于演示的html页面 #2、商业推广EDM制作(广告邮件)