WEB前端——body内常用标签(列表标签,table标签)

  • A+
所属分类:Web前端
摘要

语义:标记一堆数据是一个整体/列表html中列表标签分为三种1、无序列表(列表标签中使用最多的一种,非常重要):unordered list


一、列表标签

语义:标记一堆数据是一个整体/列表

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

用法举例

WEB前端——body内常用标签(列表标签,table标签)WEB前端——body内常用标签(列表标签,table标签)

<!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、表格的结构 

WEB前端——body内常用标签(列表标签,table标签)

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、一定要记住,单元格合并永远是向后或者向下合并,而不能向前或向上合并

单元格合并举例:

WEB前端——body内常用标签(列表标签,table标签)WEB前端——body内常用标签(列表标签,table标签)

<!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制作(广告邮件)