<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <meta http-equiv="x-ua-compatible" content="IE=edge">
</head>
<body>
<!--列表分三种 -->
<!--无序的 <ul></ul>-->
<!--有序的 <ol></ol>-->
<!--标题的 <dl></dl>  -->
        <!--<dt> 标题</dt>-->
        <!--<dd>内容</dd> -->
<!--1 ul无序列表的用法 li 成对出现 前面可以加符号 -->
<ul type="square">
<!--disc实心圆点 默认值-->
 <!--空心圆点 circle-->
 <!--square 实心方块-->
    <li>我是无序表1</li>
    <li>我是无序表2</li>
    <li>我是无序表3</li>
</ul>
<ul type="none">
   <li>我是无序表1</li>
    <li>我是无序表2</li>
    <li>我是无序表3</li>
</ul>
<!--ul无序列表的用法 li 成对出现 前面可以加符号 -->

<!--ol有序列表的用法不加参数和无序一样的
参数为 type ='数字类型1 a A I i start = '开始值'
 li 成对出现 前面可以加符号 -->
<!--1 数字列表，默认值-->
 <!--a 小写字母-->
 <!--Ⅰ大写罗马-->
 <!--ⅰ小写罗马-->
<ol type="I" start="10">
    <li>我是有序列表1</li>
    <li>我是有序列表2</li>
    <li>我是有序列表3</li>
</ol>
<!--ol的注释结束-->
<!--3标题列表 dl  dt是标题列表中的标题  dd 是dt的内容-->
<dl>
    <dt>我是标题列表的标题</dt>
    <dd>我是表列表标题下得内容1</dd>
    <dd>我是表列表标题下得内容2</dd>
</dl>
<!--标题列表的注释结束-->
<!--4表格的建立头和身体应用 -->
<table>
    <thead>
     <tr>
          <th>我是表格头部标题的行1标题加粗</th>
          <th>我是表格头部标题的行2标题加粗</th>
     </tr>
    </thead>
    <tbody>
    <tr>
        <td>我是表格身体行内容1</td>
        <td>我是表格身体行内容2</td>
    </tr>
    </tbody>
 <!--border = '1' 表格边框  cellpadding 内边距 字到边框的距离&ndash;&gt;-->
<!--cellspacing 外边距 字边框到表格边框的距离-->
<!--width 像素百分比 (最好通过css来设置长宽)\-->
<!--rowsapan: 单元格个竖跨多少行\-->
<!--colspan: 单元格个横跨多少列\
</table>
<!---->
<table border="1">
    <thead>
    <tr>
        <th>我是表格列表的头部的标题</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>爱好</th>
    </tr>
    </thead>
    <tbody>
      <tr>
         <td>我是表格列表的身体行内容1</td>
         <td>Egon</td>
         <td colspan="2" >男</td>
         <!--<td>男</先删除此处17才能合并td>-->
          <td rowspan="2">我合并列删除前提删除下一个行</td>
         <!--<td rowspan="2">杠娘</td>     合并单元格要在前个表格操作保证要操作的表格是空-->
          <td >篮球</td>
    </tr>
    <tr>
         <td>我是表格列表的身体行内容2</td>
         <td>Egon2</td>
         <td>172</td>
         <td>男2</td>
        <!--<td>篮球 要合并上边的篮球这边不能显示</td>  -->
        <td >足球</td>
    </tr>

          <!--<td rowspan="2">我合并行2 </td>-->
          <!--<td colspan="2">我合并列2 </td>-->
          <!--rowspan="2"  colspan="2"-->

    </tbody>
</table>
</body>

</html>

前端关于列表的基础 day47的更多相关文章

  1. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  2. 我的前端之旅--SeaJs基础和spm编译工具运用[图文]

    标签:seajs   nodejs   npm   spm   js 1. 概述 本文章来源于本人在项目的实际应用中写下的记录.因初期在安装和使用Seajs和SPM的时候,有点不知所措的经历.为此,我 ...

  3. [转]前端利器：SASS基础与Compass入门

    [转]前端利器:SASS基础与Compass入门 SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让 ...

  4. 李洪强和你一起学习前端之(1)Html基础

     1 快捷键的认识(虽然我用的是MAC,但是这里以windows快捷键来讲,但是MAC电脑可以把Ctrl换成command试试)   Ctrl + c 复制 Ctrl + v 粘贴 Ctrl + a ...

  5. 前端(五)-Vue简单基础

    1. Vue概述 Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架,发布于2014年2月. 与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用. Vue的核心库只 ...

  6. 前端学PHP之基础语法

    × 目录 [1]代码标识 [2]注释 [3]输出 [4]计算表达式 [5]大小写 [6]空白符 前面的话 PHP是一种创建动态交互性站点的强有力的服务器端脚本语言.PHP能够包含文本.HTML.CSS ...

  7. 前端利器：SASS基础与Compass入门

    SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让css看起来更像是一门语言,这种特性也被称为“cs ...

  8. 通过PHP前端后台交互/通过ajax前端后台交互/php基础传输数据应用/简单的留言版/简单的注册账户/简单的登录页/

      前  言  PHP     通过上一篇博客,注册账号与登录页面--前后台数据交互  跳转转到index主页,接下来进入主页留言板功能,通过ajax向后台传输数据,同时发表留言. 具体的内容分析如下 ...

  9. 软件测试必备-前端知识点之html基础

    前端必备知识点 第一部分:HTML基础 一. web前端标准 1. 结构标签----html 2. 样式标准,美化----css 3. 行为标准---js 二. 五大浏览器厂商 1. ie 2. 谷歌 ...

随机推荐

  1. 0.1.3 set的用法

    set的特性是,所有元素都会根据元素的键值自动排序,set的元素不像map那样可以同时拥有实值(value)和键值(key),set元素的键值就是实值,实值就是键值.set不允许两个元素有相同的键值. ...

  2. Python 2.7.x 使用Requests发起https请求时报Warning的问题

    warning :如下 /usr/local/lib/python2.7/dist-packages/requests/packages/urllib3/connectionpool.py:852: ...

  3. mybatis使用@param("xxx")注解传参和不使用的区别

    public interface SystemParameterMapper { int deleteByPrimaryKey(Integer id); int insert(SystemParame ...

  4. java使用线程设置定时任务

    private static int a=0; public static void main( String[] args ) { timer(); } public static void tim ...

  5. mybatis调用存储过程的两种方式

    先总结和说明一下注意点: 1.如果传入的某个参数可能为空,必须指定jdbcType 2.当传入map作为参数时,必须指定JavaType 3.如果做动态查询(参数为表名,sql关键词),可以使用${} ...

  6. SpringMvc4.2.5 零配置出现 No mapping found for HTTP request with URI（转）

    原文地址:SpringMvc4.2.5 零配置出现 No mapping found for HTTP request with URI 采用 spring 零配置,参考 http://hanqunf ...

  7. [转载]Python使用@property装饰器--getter和setter方法变成属性

    原贴:为什么Python不需要getter和setter getter 和 setter在java中被广泛使用.一个好的java编程准则为:将所有属性设置为私有的,同时为属性写getter和sette ...

  8. 接口测试--postman简介

    一.什么是接口测试 接口测试是测试系统组件间接口的一种测试.接口测试主要用于检测外部系统与系统之间以及内部各个子系统之间的交互点.测试的重点是要检查数据的交换,传递和控制管理过程,以及系统间的相互逻辑 ...

  9. Linux NTP服务配置 for Oracle RAC

    安装Oracle 11g RAC时,我们需要配置ntp服务.在使用虚拟机的情况下对于时钟同步方式的配置有很多种方式,可以使用vmware自带的时钟同步功能,也可以直接将本地的一个节点用作时间服务器.本 ...

  10. AMR文件结构

    转自:http://blog.csdn.net/dinggo/article/details/1966444 https://blog.csdn.net/wlsfling/article/detail ...