网页的列表和表格

列表的分类

无序列表

有序列表

自定义列表

  1. 有序列表

<!--有序列表-->
<ol>
    <li>辽宁</li>
    <li>沈阳</li>
    <li>东大</li>
</ol>

  1. 无序列表

<!--无序列表-->
<ul>
    <li>辽宁</li>
    <li>沈阳</li>
    <li>东大</li>
</ul>

  1. 自定义列表

<!--自定义列表-->
<dl>
    <dt>学科</dt>
    <dd>C++</dd>
    <dd>Python</dd>
    <dd>Java</dd>
</dl>

以上效果如下：

上述三个列表的完整代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--有序列表-->
<ol>
    <li>辽宁</li>
    <li>沈阳</li>
    <li>东大</li>
</ol>
<hr/>
<!--无序列表-->
<ul>
    <li>辽宁</li>
    <li>沈阳</li>
    <li>东大</li>
</ul>
<hr/>
<!--自定义列表-->
<dl>
    <dt>学科</dt>
    <dd>C++</dd>
    <dd>Python</dd>
    <dd>Java</dd>
</dl>
</body>
</html>

表格

  1. 表格有边框

<table border="1px">
</table>  

  1. 表格无边框

<table>
</table>  

  1. 跨行(比如一行的4列合并为1列，并写上1-1)

<!--跨列 colspan-->
        <td colspan="4">1-1</td>

  1. 跨列(比如一列的4行合并为1行，并写上2-1)

<!--跨行 rowspan-->
        <td rowspan="2">2-1</td>

以上效果如下：

上述三个列表的完整代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--表格
行  tr
列  td
-->
<table border="1px">
    <tr>
        <!--跨列 colspan-->
        <td colspan="4">1-1</td>
    </tr>
    <tr>
        <!--跨行 rowspan-->
        <td rowspan="2">2-1</td>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>
</body>
</html>
​

HTML的列表标签和表格标签的更多相关文章

  1. Day46（列表标签，表格标签，表单标签，css的引入方式，css选择器）

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  2. HTML基本标签，表格标签，框架标签

    1.html简介 1.1什么是html html全称:Hyper Text Markup Language(超文本标记语言) 备注:           a.超文本:页面内可以包含图片.链接,甚至音乐 ...

  3. HTML常用标签与表格标签

    超链接标签: <a href="超链接地址" target="_blank">超链接的文字</a> _blank或new是在新网页中打开 ...

  4. HTML核心标签之表格标签(一)

    表格的基本语法: <body> <table> <tr><td></td><td></td></tr> ...

  5. HTML-常用标签与表格标签

    超链接标签: <a href="超链接地址" target="_blank">超链接的文字</a> _blank或new是在新网页中打开 ...

  6. HTML高级标签之表格标签

    前面学习了一下HTML的经常使用标签, 今天開始高级标签之路! 一.表格标签 1.作用: 创建一张表格 2.各属性作用: <table cellspacing="0" cel ...

  7. HTML入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)

    一.转义字符由特殊字符包裹的文本 会当做标签去解析 对应不换行空格 对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响.<对应 ...

  8. 讲课笔记1——meta标签、表格标签

    图片属性:src(source): 图片的来源(路径),可以放置本地图片,也可以放网上的图片的url地址 [相对路径:        ./:当前目录            ../:跳出当前目录,到上一 ...

  9. HTML核心标签之表格标签(二)

    基本用法: <ul type="cir"> <li>显示数据</li> <li>显示数据</li> </ul> ...

随机推荐

  1. mnist识别优化——使用新的fashion mnist进行模型训练

    今天通过论坛偶然知道,在mnist之后,还出现了一个旨在代替经典mnist数据集的Fashion MNIST,同mnist一样,它也是被用作深度学习程序的“hello world”,而且也是由70k张 ...

  2. 第31届IMO 第2题

    题目 设n>=3,考虑一个圆上由2n-1个不同点构成的集合E.现给E中恰好k个点染上黑色,如果至少有一对黑点使得这两个黑点之间的弧上(两段弧中的某一个)包含恰好E中的n个点,就成这样的染色方法是 ...

  3. u盘变成Read-only file system

    先查看U盘的设备号,然后修改后重新挂载 fdisk -l sudo dosfsck -v -a /dev/sdb4  

  4. Java 中多态的实现（上）

    Java 中语法上实现多态的方式分为两种:1. 重载.2. 重写,重载又称之为编译时的多态,重写则是运行时的多态. 那么底层究竟时如何实现多态的呢,通过阅读『深入理解 Java 虚拟机』这本书(后文所 ...

  5. LaTeX技巧008：如何给文字添加阴影效果？

    大家可以使用这个包:shadowtext宏包

  6. centos8 常用软件

    防火墙 GUI版 https://blog.csdn.net/qq_36492368/article/details/80432259 dnf install -y firewall-config d ...

  7. [十二省联考2019] 异或粽子 - 可持久化Trie,堆

    求 \(n\) 元数列的 \(k\) 个不同的子区间使得各个子区间异或和之和最大. Solution (差点又看错题了) 做个前缀和,于是转化成求序列异或和最大的 \(k\) 个数对 建一棵可持久化 ...

  8. Git下载GitHub仓库里的某一个文件夹或某一个文件

    从Github上下载github上的整个项目,可以用下面指令: git clone https://github.com/XXX/xxxxx.git 其中:XXX是用户在Github上的用户名 xxx ...

  9. 判断IE版本的HTML语句[if lte IE 9]……[endif]

    我们常常会在网页的HTML里面看到形如[if lte IE 9]……[endif]的代码,表示的是限定某些浏览器版本才能执行的语句,那么这些判断语句的规则是什么呢?请看下文: <!--[if ! ...

  10. Windows恢复环境启动失败，重新配置WinRE

    前言 现在很多朋友追求系统镜像体积缩小,往往删除了系统镜像中C:\Windows\System32\Recovery\winre.wim这个文件,大小将近500MB,删除这个文件不会给系统造成其他影响 ...