ITPub博客

首页 > 应用开发 > Html/css > HTM之列表和表格的使用

HTM之列表和表格的使用

原创 Html/css 作者:Winter 时间:2019-03-08 13:51:07 0 删除 编辑

一、HTML与XHTML的区别

(1)在XHTML 中标签名称必须小写,在HTML 中标签名称既可以小写也可以大写;
(2)在XHTML 中标签必须封闭,在HTML中标签可以不成对出现;
(3)在XHTML 中标签必须严格嵌套,HTML对标签嵌套没有严格规定;
(4)在XHTML 中属性名称必须小写,在HTML 中也一样;
(5)在XHTML 中标签必须用双引号引起来,HTML中可以不用;

二、特殊符号

  • &nbsp ;表示空格;
  • " 表示双引号;
  • & 表示&符号;
  • > 表示大于号>;
  • &lt; 表示小于号<;
  • &copy; 表示版权符号©;

三、列表的使用

(1)无序列表

  • 无序列表是一个项目列表,使用项目符号标记无序列表的项目,无序列表也就是没有顺序的列表;
  • 无序列表的type属性取值有三种,分别是circle(圆圈)、disc(实心圆点)、square(方块);
    
    # 打印实心圆点的无序列表
    <body>
    <ul type="disc">
      <li>第一</li>
      <li>第二</li>
      <li>第三</li>
    </ul>
    </body>
    
    
    (2)有序列表
  • 有序列表也是由一个个列表项组成,列表想既可以使用数字标记,也可以使用字母标记;
  • 有序列表的type属性取值有5中,分别是1(数字)、i(小写罗马字母)、I(大写罗马字母)、a(小写字母)、A(大写字母);
    
    # 打印数字排序的有序列表
    <body>
    <ol type="1">
      <li>我最爱椰奶</li>
      <li>第二爱可乐</li>
      <li>第三爱橙汁</li>
    </ol>
    </body>
    
    

(3)定义列表

  • 定义列表是当无序列表和有序列表都不适合时,通过自定义列表来完成自定义展示,所以定义列表不仅仅是一个项目列表,而是项目和注释的组合;
    
    <body>
    <dl>
      <dt>春晓</dt>
        <dd>春眠不觉晓,处处闻啼鸟</dd>
        <dd>夜来风雨声,花落知多少</dd>
    </dl>
    </body>
    
    

四、表格的使用

(1)表格的基本结构

  • 单元格:表格的最小单位,一个或多个单元格纵横排列组成了表格;
  • 行:一个或多个单元格横向堆叠形成了行;
  • 列:一个或多个单元格纵向堆叠形成了列;
    
    <table>
    <tr>
      <td>第一行第一列</td>  
      <td>第一行第二列</td>  
      <td>第一行第三列</td>  
    </tr>
    <tr>
      <td>第二行第一列</td>  
      <td>第二行第二列</td>  
      <td>第二行第三列</td>  
    </tr>
    </table>
    
    
    (2)表格的对齐方式
  • align属性:left表示水平居左、center表示水平居中、right表示水平居右;
  • valign属性:top表示垂直置顶、middle表示垂直居中、bottom表示垂直靠底;

(3)表格的其他属性

  • th :一种特殊的单元格,加粗并居中;
  • caption :表格标题;
  • cellspacing :规定单元格之间的空间;
  • cellpadding :规定单元边沿与其内容之间的空白;
  • colspan :表格跨列;
  • rowspan :表格跨行;

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69908432/viewspace-2637883/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论
努力学习,做最好的自己!

注册时间:2019-01-23

  • 博文量
    129
  • 访问量
    110952