码迷,mamicode.com
首页 > Web开发 > 详细

HTML常用标签三

时间:2019-10-28 21:00:30      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:数据   合并   解释   设置   列表项   cells   order   有序列表   输入   

表格标签

  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>

HTML常用标签三

标签:数据   合并   解释   设置   列表项   cells   order   有序列表   输入   

原文地址:https://www.cnblogs.com/SSPOFA/p/11755249.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!