网页的列表和表格

列表的分类

无序列表

有序列表

自定义列表

  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. C#实例之简单聊天室（状态管理）

    前言        状态管理是在同一页或不同页的多个请求发生时,维护状态和页信息的过程.因为Web应用程序的通信协议使用了无状态的HTTP协议,所以当客户端请求页面时,ASP.NET服务器端都会重新生 ...

  2. 【巨杉数据库SequoiaDB】社区分享 | SequoiaDB + JanusGraph 实践

    本文来自社区用户投稿,感谢小伙伴的技术分享 项目背景 大家好!在春节这段时间里,由于一直在家,所以花时间捣鼓了一下代码,自己做了 SequoiaDB 和 JanusGraph 的兼容扩展工作. 自己觉 ...

  3. jvm编译器的优化

    1.对byte.short.char赋值时,若右边范围没有超过左边类型的最大表达范围则会自动隐式的加上(byte).(short).(char)强制转换:若右边范围超过了左边类型的最大表达范围则编译失 ...

  4. 07-SV线程以及线程间的通信

    1.几种语句块的区别 (1)fork……join:块内语句以并发方式执行 (2)begin……end:块内语句以顺序方式执行 (3)fork……join_none:其块内语句执行时,父线程继续执行 ( ...

  5. waiting list

    Problem: how to cluster non-stationary multivariate time series. What are stationary time series How ...

  6. z3学习档案

    Reference: 看雪-z3巧解逆向 知乎:Z3一把梭 z3 solver学习 使用z3约束求解器解决CTF中的题目 Playing with Z3,hacking the serial chec ...

  7. PHP正则表达式及表单注册案例

    正则表达式是一种具有特定模式的用来匹配文本的字符串 preg_match 匹配 $pattern = '/php/'; $subject = "php 是最好的编程语言,php 没有之一!& ...

  8. JavaScript-事件类型

    DOM3事件类型: 1.UI事件:当用户与页面上的元素交互时触发 a.DOMActivate:元素已经被用户操作激活. b.load:(1)页面完全加载:window触发. (2)所有框架加载完毕:框 ...

  9. hyper-v虚拟机不能访问外网的解决方案

    直接说解决方案,将虚拟机的一张网卡改为旧版网络适配器即可.具体原因还不可知. 延申一下,一般应该使用的交换机,是“外部”类型即可.

  10. 一步步教你如何在Ubuntu虚拟机中安装QEMU并模拟模拟arm 开发环境（一）uImage u-boot（转）

    初次接触qemu是因为工作的需要,有时候下了班,可能需要在家研究一些东西,因为博主用到arm环境,这时候博主比较小气,不愿花钱买开发板,当然博主在这里给大家的建议是,如果要真正学懂arm构架的相关知识 ...