无序列表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. MyEclipse10.0的破解过程详细图解

    1 首先下载破解软件包:http://pan.baidu.com/s/1pLB6xEb 并解压: 2 按照百度经验操作即可http://jingyan.baidu.com/article/cbf0e5 ...

  2. emacs在org-mode时输出pdf时，只输出为链接

    这个找到问题了,写错格式了,输出pdf中要内嵌图像,格式要写成[[file:/home/xxx/yyy.jpg]],不能写成file:/home/xxx/yyy.jpg或者[[file:/home/x ...

  3. css margin边界叠加问题详谈

    问题:给子元素一个margin-top值,其父元素会跟着往下走margin-top的值 一.代码展示 HTML <body> <div class="box"&g ...

  4. hdoj1001【智障了。。。】

    我不得不写这样一发,来提醒自己,本来是想在xixi面前1minAC,然后: 我没有用long long. wa一发 他告诉我每个案例后都要再加一个空行,没看见PE一 #include<iostr ...

  5. Codeforces687A【未完继续....】

    http://codeforces.com/problemset/problem/687/A

  6. 3dmath复习随笔

    左手坐标系与右手坐标系 旋转正方向,下图是右手系,左手系同理 向量 点乘: 叉乘: dx是左手系,使用行向量,vABC,乘矩阵用左乘 opengl是右手系,使用列向量,CBAv,乘矩阵用右乘 u3d貌 ...

  7. P5162 WD与积木（多项式求逆+生成函数）

    传送门 题解 比赛的时候光顾着算某一个\(n\)的答案是多少忘了考虑不同的\(n\)之间的联系了--而且我也很想知道为什么推着推着会变成一个二项式反演-- 设\(f_n\)为\(n\)块积木时的总的层 ...

  8. java hashCode 作用

    hashCode 作用,对象根据hashCode的值分区域存放 /** * hashCode 作用 * * @author Administrator * */ public class Point ...

  9. PHP常见的输出语句 echo()、print()、print_r()、var_dump()、pinrtf()之间的区别

    echo().print().print_r().var_dump().pinrtf()之间的区别 1.print() :简单输出语句,可以输出字符串,变量.表达式等单项的值!(不能输出数组.对象等复 ...

  10. 18.3.2从Class上获取信息(方法)

    package d18_3_1; import java.lang.reflect.Method; import java.util.Arrays; /** * 获取Class对应类所包含的方法的四个 ...