无序列表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. 安装Nginx作为文件服务器

    我是在Windows上安装的,在Linux上也一样 #Windows server2008 R2 #Nginx1.12 Nginx安装包下载地址:http://nginx.org/en/downloa ...

  2. E20180403-hm

    accompany vt. 陪伴,陪同; 附加,补充; 与…共存; 为…伴奏 synchronous adj. 同时存在[发生]的,同步的 asynchronous adj. 异步的; particu ...

  3. Codeforces - Gym102028 - 2018 Jiaozuo Regional Contest

    http://codeforces.com/gym/102028 A. Xu Xiake in Henan Province 看起来像水题.乱搞一下,还真是. #include<bits/std ...

  4. BERT的几个可能的应用

      BERT是谷歌公司于2018年11月发布的一款新模型,它一种预训练语言表示的方法,在大量文本语料(维基百科)上训练了一个通用的"语言理解"模型,然后用这个模型去执行想做的NLP ...

  5. （六）SpringBoot整合Swagger2框架

    一:什么是Swagger Swagger是一款通过我们添加的注解来对方法进行说明,来自动生成项目的在线api接口文档的web服务. 二:添加Swagger2依赖 <dependency> ...

  6. Oracle 正则化

    摘抄自:http://www.cnblogs.com/scottckt/archive/2012/10/11/2719562.html ORACLE中的支持正则表达式的函数主要有下面四个: 1,REG ...

  7. 无法获得VMCI 驱动程序的版本: 句柄无效的解决方法

    关闭虚拟机,找到安装路径,用记事本打开.vmx结尾的文件 将vmci0.present = "TRUE"改为vmci0.present = "FALSE"保存

  8. fzu 2204 7 dp

    题目链接: fzu 2204 7 题目描述: 给出n个小球,每个小球只能涂黑色或者是白色,七个连续的不能是同种颜色,问有多少种涂色方法? 解题思路: 刚开始没有考虑到是环形的,WA的风生水起,怪我咯! ...

  9. Lucas+中国剩余定理 HDOJ 5446 Unknown Treasure

    题目传送门 题意:很裸,就是求C (n, m) % (p1 * p2 * p3 * .... * pk) 分析:首先n,m<= 1e18, 要用到Lucas定理求大组合数取模,当然p[]的乘积& ...

  10. Java图解

    java虚拟机 JVM运行过程: java开发工具包 java入门图解1 java入门图解2 java入门图解3 java入门图解4