无序列表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. 【209】SQL学习&C#连接数据库

    参考:传智播客.Net培训.net视频教程 >> [04]第四季 SQL(1-16)参考:传智播客.Net培训.net视频教程 >> [05]第五季 ADO.NET(1-30) ...

  2. Vs2013+opencv2.4.12+x64用VideoCapture无法打开视频

    环境变量中匹配的是x86的opencv_ffmpeg244.dll,与项目不匹配,需在项目exe文件同目录下添加X:\opencv\opencv2.4.12\build\x64\vc12\bin\op ...

  3. 安装JDK+Eclipse+Maven+Git/Gitee（windows系统和linux系统）

    1. 安装JDK 官网下载 下载java SE 下载 Java SE 7 1.1 windows配置jdk windows配置jdk 1.2 Ubuntu配置jdk Ubuntu 安装 JDK 7 / ...

  4. Mysql数据库实现高可用

    Mysql实现高可用 MMM MMM(master-master replication manager for mysql)mysql主主复制管理器. MMM是一套灵活的脚本程序,基于perl实现, ...

  5. 用ffmpeg命令将264裸码流封装成mp4（转载）

    转自:http://bbs.csdn.net/topics/370256130 ffmpeg -f h264 -i source.264 -vcodec copy out.mp4

  6. nodejs实现百度实时推送

    想要加快百度收录,肯定免不了链接提交吧,当然链接提交的方式有很多种,今天来说一下百度的实时推送.. 第一次看到这post请求确实有点萌逼,我自己是做前端的对后台接触确实不多,见到的前端发送post请求 ...

  7. iOS 管理View

    创建: 2018/04/26 完成: 2018/05/03 更新: 2018/05/04 增加UIStackView 更新: 2018/09/18 补充SFSafariViewController需要 ...

  8. 模板 - 数学 - 快速傅里叶变换/快速数论变换（FFT/NTT）

    先看看. 通常模数常见的有998244353,1004535809,469762049,这几个的原根都是3.所求的项数还不能超过2的23次方(因为998244353的分解). 感觉没啥用. #incl ...

  9. Vue 基础指令学习

    学习Vue的一些总结,第一次写博客,文笔实在是很差 不过我会不断写的. <template> <!--只能有一个根节点 --> <div> <pre> ...

  10. vs2010中的ADO控件及绑定控件

    要在项目中添加某一个ActiveX控件,则该ActiveX控件必须要注册.由于VS2010中,并没有自动注册ADO及ADO数据绑定控件(Microsoft ADO Data Control,Micro ...