无序列表ul

ul标签的格式为

<ul>
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
</ul>
<html >

<head>

    <title>Title</title>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

</head>

<body>

    <h1>HTML 属性赋予元素意义和语境</h1>

    <p>HTML 全局属性</p>

    <ul>

        <li>规定激活元素的快捷键</li>

        <li>规定元素内容是否可编辑</li>

        <li>规定元素是否可拖动</li>

    </ul>

</body>

</html>

效果

如果不想用圆点，想用方块只需要在ul标签里加上type属性就可以了，属性有

disc:    圆点  默认

square： 正方形

circle： 空心圆
<html >

<head>

    <title>Title</title>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

</head>

<body>

    <h1>HTML 属性赋予元素意义和语境</h1>

    <p>HTML 全局属性</p>

    <ul type="disc">

        <li>规定激活元素的快捷键</li>

        <li>规定元素内容是否可编辑</li>

        <li>规定元素是否可拖动</li>

    </ul>

    <ul type="square">

        <li>规定激活元素的快捷键</li>

        <li>规定元素内容是否可编辑</li>

        <li>规定元素是否可拖动</li>

    </ul>

    <ul type="circle">

        <li>规定激活元素的快捷键</li>

        <li>规定元素内容是否可编辑</li>

        <li>规定元素是否可拖动</li>

    </ul>

</body>

</html>

在来刷新看看效果

有序列表ol

ol标签的格式为

<ol>

    <li>内容1</li>

    <li>内容2</li>

    <li>内容3</li>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

</ol>
<html >

<head>

    <title>Title</title>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

</head>

<body>

    <h1>HTML 属性赋予元素意义和语境</h1>

    <p>HTML 全局属性</p>

    <ol >

        <li>规定激活元素的快捷键</li>

        <li>规定元素内容是否可编辑</li>

        <li>规定元素是否可拖动</li>

    </ol>

</body>

</html>

有序列表的type属性

1  数字1，2

a  小写字母a，b

A  大写字母A,B

i  小写罗马数字i

I  大写罗马数字I
<html >

<head>

    <title>Title</title>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

</head>

<body>

    <h1>HTML 属性赋予元素意义和语境</h1>

    <p>HTML 全局属性</p>

    <ol type="a">

        <li>规定激活元素的快捷键</li>

        <li>规定元素内容是否可编辑</li>

        <li>规定元素是否可拖动</li>

    </ol>

    <ol type="i">

        <li>规定激活元素的快捷键</li>

        <li>规定元素内容是否可编辑</li>

        <li>规定元素是否可拖动</li>

    </ol>

    <ol type="I">

        <li>规定激活元素的快捷键</li>

        <li>规定元素内容是否可编辑</li>

        <li>规定元素是否可拖动</li>

    </ol>

</body>

</html>

效果

定义列表

基本格式 dl，dt，dd三个是一起出现的，缺一不可

<dl>

    <dt>定义列表项</dt>

    <dd>列表项描述</dd>

    <dd>列表项描述</dd>

    <dt>定义列表项</dt>

    <dd>列表项描述</dd>

    <dd>列表项描述</dd>

    ...

</dl>
<html >

<head>

    <title>Title</title>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

</head>

<body>

    <dl>

        <dt>我是列表</dt>

        <dd>我是描述1</dd>

        <dd>我是描述2</dd>

        <dt>我是列表</dt>

        <dd>我是描述1</dd>

        <dd>我是描述2</dd>

    </dl>

</body>

</html>

效果

HTML基础（二）列表标签的更多相关文章

  1. Bootstrap<基础二十> 标签

    Bootstrap 标签.标签可用于计数.提示或页面上其他的标记显示.使用 class .label 来显示标签,如下面的实例所示: <!DOCTYPE html> <html> ...

  2. 初学HTML 常见的标签(二) 列表标签

    上次介绍了一些简单的文本标签设计, 这篇介绍列表类标签, 通过列表能写出很好看的, 多元化的网络页面. ul-li 列表标签 <ul> <li>列表1</li> & ...

  3. 前端基础-html 列表标签,表格标签,表单标签

    一.列表标签 1.ul(无序列表)标签 ul(unordered list)无序列表,ul下的子元素只能是li(list item),如下示例: <ul> <li>第一项< ...

  4. web基础 (二) html标签

    一.html是什么? 超文本标记语言(Hypertext Markup Language,HTML)通过标签语言来标记要显示的网页中的各个部分.一套规则,浏览器认识的规则 浏览器按顺序渲染网页文件,然 ...

  5. Bootstrap <基础二十八>列表组

    列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...

  6. Bootstrap <基础二十九>面板（Panels）

    Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...

  7. Bootstrap<基础二十七> 多媒体对象（Media Object）

    Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的 ...

  8. Bootstrap <基础二十六>进度条

    Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...

  9. Bootstrap <基础二十五>警告（Alerts）

    警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个 ...

  10. Bootstrap<基础二十四> 缩略图

    Bootstrap 缩略图.大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap 创建缩略图的步骤如下: 在图像周围添加带有 ...

随机推荐

  1. auto_ptr智能指针

    C++的auto_ptr所做的事情,就是动态分配对象以及当对象不再需要时自动执行清理. 使用std::auto_ptr,要#include <memory>.

  2. chromium浏览器开发系列第一篇：如何获取最新chromium源码

    背景:      最近摊上一个事儿,领导非要让写一篇技术文章,思来想去,自己接触chrome浏览器时间也不短了,干脆就总结一下吧.于是乎,本文顺理成章.由于有些细节必需描述清楚,所以这次先讲如何拿到c ...

  3. 使用Code First 迁移发布asp.net mvc 程序

    通过Code First 迁移发布asp.net mvc应用程序,与在visual studio 程序包控制器管理台中运行Add-Migration ,Update-Database 一致. 在发布的 ...

  4. 简单聊聊ES6-Promise和Async

    前言 本篇博文出至于我的github仓库:web-study,如果你觉得对你有帮助欢迎star,你们的点赞是我持续更新的动力,谢谢! 异步编程在前端开发中尤为常见,从最早的XHR,到后来的各种封装aj ...

  5. Swift4 检验变量

    创建: 2018/05/03  判断类 public func isKind(of aClass: Swift.AnyClass) -> Bool  是否是aClass或其子类的实例  publ ...

  6. Swift里计数相关的小细节

    Swift里对于字符串这些引入了index型,相对其他语言而言字符操作更安全了,但是问题就是一不注意搞错范围就会有各种离奇的bug. 在讲主题前,先说个小细节. Swift里非常严密的定义了一大堆字符 ...

  7. Codeforces404C【构造】

    题意: 一个图有n个点,每一个点最多连接k条直线,给出多有起点到终点的距离,没有环,不能输出重边,输出所有有连接的单向边 思路: 就是简单想-不知道怎么说了,画个图,我们建边,那么距离是 i 就是连距 ...

  8. redis 发布订阅实现异步实时发短信

    redis 中发布和订阅可以实现消息的实时传输,这里我只是用它的事件驱动,当客户端发送了消息,服务器端立马可以接收指令处理相应的业务逻辑. 客户端 client.php <?php //发布 $ ...

  9. 安装kibana

    下载kibana5.1.1或者5.1.2版本的deb包,然后用dpkg命令安装 安装后启动位置在 /usr/share/kibana/bin中,在该目录下运行 ./kibana 即可启动 启动前应该先 ...

  10. 洛谷 P1589 泥泞路

    题目描述 暴雨过后,FJ的农场到镇上的公路上有一些泥泞路,他有若干块长度为L的木板可以铺在这些泥泞路上,问他至少需要多少块木板,才能把所有的泥泞路覆盖住. 输入输出格式 输入格式: 第一行为正整数n( ...