HTML常用标签三

表格标签

1. 表格的作用

   表格主要用于显示、展示数据，因为他们可以让数据显示的非常规整，可读性非常好，特别是后台展示数据的时候，能够熟练运用表格就先的很重要，一个清爽简约的表格能够把繁杂的数据表现的很有条理。

2. 表格的基本语法

   <table>
       <tr>
           <td></td>
   
       </tr>
   </table>
   

   • <table></table> 用于定义表格的标签
   • <tr></tr> 标签用于定义表格中的行，必须嵌套在<table></table> 标签中
   • <td></td> 用于定义表格中的单元格，必须嵌套在<tr></tr> 标签中

3. 表头单元格

   • <th></th> 标签表示HTML表格的表头部分

4. 表格属性

   • 表格标签的属性在实际开发中不常用，后面通过CSS来设置

属性名	属性值	描述
align	left\center\right	规定表格相对周围的对齐方式
border	1或者”“	桂东表格单元是否拥有边框，默认为”“，表示没有边框
cellpadding	像素值	规定单元边沿与其他内容之间的空白，默认1px
cellspacinng	像素值	规定单元格之间的空白，默认为2px
width	像素值或百分比	规定表格宽度

1. 表格的结构标签

   在表格标签中，分别用：<thead>标签表示表格的头部区域，<tbody> 表示表格的主体区域

2. 合并单元格

   • 确定是跨行还是跨列
   • 找到目标单元，写上合并方式=合并的单元数量，比如；<td colspan="2"></td>
   • 删除多余单元格

列表

1. 列表分类

   • 无序列表

     • <ul> 标签定义无序列表，一般会以项目符号呈现表项，而列表项使用<li> 标签定义

     <ul>
         <li>列表项1</li>
         <li>列表项2</li>
         <li>列表项3</li>
     </ul>
     

     • • 无序列表的各项列表之间没有顺序级别之分，是并列的
       • <ul> </ul> 中只能嵌套<li> </li> ,直接在<ul> </ul> 标签中输入其他标签或者文字的做法是不允许的
       • <li> </li> 之间相当于一个容器，可以容纳所有元素
       • 无序列表会带有自己的样式属性，但实际使用中，我们会使用CSS来设置

   • 有序列表

     • <ol> 标签定义有序列表，列表排序以数字来显示，而列表项使用<li> 标签定义

     <ol>
         <li>列表项1</li>
         <li>列表项2</li>
         <li>列表项3</li>
     </ol>
     

     • • <ol> </ol> 中只能嵌套<li> </li> ,直接在<ol> </ol> 标签中输入其他标签或者文字的做法是不允许的
       • <li> </li> 之间相当于一个容器，可以容纳所有元素
       • 有序列表会带有自己的样式属性，但实际使用中，我们会使用CSS来设置

   • 自定义列表

     • 自定义列表常用于对术语或名词进行解释和描述，定义列表的列标前没有任何项目符号
     • <dl> 标签用于自定义描述列表（或定义列表），该标签会与<dt> (定义项目/名字)和<dd> (描述每一个项目/名字)一起使用

     <dl>
         <dt>名词1</dt>
         <dd>名词一解释1</dd>
         <dd>名词一解释2</dd>
     </dl>
     

     • • <dl> </dl> 中只能嵌套<dt> <dd>
       • <dt> <dd>没有各数限制，经常一个<dt>对应多个<dd>