<!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. 电脑用U盘启动

    除了根据提示按DEL或者F2进入到BIOS界面更改设置之外. 还可以在开机时按F8或F12进入到引导界面,可直接选择USB. 当把登录用户登录,其他用户都被禁用时,电脑登不进去.要制作启动U盘,进入到 ...

  2. Webpack实现路由懒加载的三种方式

    原文指路:https://blog.csdn.net/qq_37540004/article/details/78727063 第一种: 引入方式(正常引入): const router = new ...

  3. php url处理

    http_build_query() $data = array("name"=>"callback" , "value"=>& ...

  4. Alyona and a tree CodeForces - 739B (线段树合并)

    大意: 给定有根树, 每个点$x$有权值$a_x$, 对于每个点$x$, 求出$x$子树内所有点$y$, 需要满足$dist(x,y)<=a_y$. 刚开始想错了, 直接打线段树合并了..... ...

  5. 一篇文章一张思维导图看懂Android学习最佳路线(转载）

    Android学习路线从4个阶段来对Android的学习过程做一个全面的分析:Android初级.中级.高级以及资深工程师.只针对Android应用开发,不针对Rom开发和逆向工程等.方便起见虚拟“小 ...

  6. spring boot(二）web综合开发

    上篇文章介绍了Spring boot初级教程:spring boot(一):入门,方便大家快速入门.了解实践Spring boot特性:本篇文章接着上篇内容继续为大家介绍spring boot的其它特 ...

  7. python 小练习 5

    Py从小喜欢奇特的东西,而且天生对数字特别敏感,一次偶然的机会,他发现了一个有趣的四位数2992, 这个数,它的十进制数表示,其四位数字之和为2+9+9+2=22,它的十六进制数BB0,其四位数字之和 ...

  8. WDA基础十二：FREE PROGRAM SH (WDA TREE)

    一个需要用TREE展示搜索帮助的需求: 1.创建WDA程序:ZCATEGORY 2.Component Controller中添加节点: (说明,此节点仅在搜索帮助程序中使用,可以不用interfac ...

  9. Oracle中的instr()函数 详解及应用

    1)instr()函数的格式  (俗称:字符查找函数) 格式一:instr( string1, string2 )    /   instr(源字符串, 目标字符串) 格式二:instr( strin ...

  10. Hadoop--单点故障修复

    nameNode单点故障修复 1.启动虚拟机,启动集群  此时我们将主机hadoop1关机(断掉主机),开始抢救: 1.使用 秘书(secondaryNameNode),成功率不是100%  (这里我 ...