无序列表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. Ubuntu中右击出现终端

    1 root用户 $sudo apt-get install  nautilus-open-terminal 2重启 3ok

  2. Spring Cloud Alibaba基础教程：Sentinel Dashboard中修改规则同步到Nacos

    上一篇我们介绍了如何通过改造Sentinel Dashboard来实现修改规则之后自动同步到Apollo.下面通过这篇,详细介绍当使用Nacos作为配置中心之后,如何实现Sentinel Dashbo ...

  3. CF1060E Sergey and Subway（点分治）

    给出一颗$N$个节点的树,现在我们**在原图中**每个不直接连边但是中间只间隔一个点的两个点之间连一条边. 比如**在原图中**$u$与$v$连边,$v$与$w$连边,但是$u$与$w$不连边,这时候 ...

  4. mysql 分区后查询效率

    准备工作: 蠕虫复制 文章表 增加数据到112万 语法:insert into  tableNameA  select * from tableNameB       未分区查询  54s 改变现有表 ...

  5. spark 机器学习 朴素贝叶斯 原理(一)

    朴素贝叶斯算法仍然是流行的挖掘算法之一,该算法是有监督的学习算法,解决的是分类问题,如客户是否流失.是否值得投资.信用等级评定等多分类问题.该算法的优点在于简单易懂.学习效率高.在某些领域的分类问题中 ...

  6. LuoguP3121 [USACO15FEB]审查（黄金）Censoring (Gold)【Hash做法】By cellur925

    题目传送门 其实这题正解是AC自动机的,字符串哈希吸氧才能过的,但是我太菜了不会...只能先用哈希苟了. 在扫描单词的时候首先把各个单词的哈希值和长度存起来.然后按照长度从小到大将各单词排序.而那个长 ...

  7. MySQL varchar 最大长度，text 类型占用空间剖析

    MySQL 表中行的最大大小为 65,534(实际行存储从第二个字节开始)字节.每个 BLOB 和 TEXT 列只占其中的 5 至 9 个字节. 那么来验证下 varchar 类型的实际最大长度: 测 ...

  8. Hexo瞎折腾系列(5) - 使用hexo-neat插件压缩页面静态资源

    为什么要压缩页面静态资源 对于个人博客来说,优化页面的访问速度是很有必要的,如果打开你的个人站点,加载个首页就要十几秒,页面长时间处于空白状态,想必没什么人能够忍受得了吧.我个人觉得,如果能把页面的加 ...

  9. Maxim Buys an Apartment CodeForces - 854B

    题意:已知一条街上有n幢房子,依次的编号为1~n,其中有k幢已经卖出去了但是不知道是哪k幢.当且仅当一幢房子没有卖出去且其两旁至少有一幢房子卖出去了的时候,认为这幢房子是好的.问这n幢房子中好的房子最 ...

  10. 与Cookie相比，Web Storage存在的优势

    与Cookie相比,Web Storage存在不少的优势,概括为以下几点:1. 存储空间更大:能提供5MB的存储空间(不同浏览器的提供的空间不同),Cookie仅4KB2. 存储内容不会发送到服务器: ...