html5--1.11列表

学习要点：

1.无序列表的基本格式

ul（unorder line）标签里面放li标签就好了，每一项就是一个li（LineItem）标签

<ul>

　　<li></li>

　　<li></li>

</ul>

2.无序列表的type属性

无序列表的type属性有三个值：1.disc（默认值）；2.circle；3.square

分别对应

  • 实心圆
  • 空心圆
  • 实心方块

这里演示的就是ul中type为circle的效果

在css中可以设置更多更加复杂的效果，比如前面加小图片

3.有序列表的基本格式

ol（order line）标签里面放li标签就好了，每一项就是一个li（LineItem）标签

<ol>

　　<li></li>

　　<li></li>

</ol>

4.有序列表的type属性

  1. 整数（默认值）；
  2. 大（小）写字母A\B\C...
  3. 大小写的罗马字母：i ii .../I II III

这里设置的ol的type为大写字母A

li标签里面放图片链接都是可以的，元素的嵌套

5.有序列表的start属性

定义列表的开始序号，比如第一项不是数字1，而是从10开始.......

就把ol的start属性设置成不同就可以了

6.有序列表的value属性

定义某个单个列表项的序号.......

  1. 可以通过value属性来设置不连续列表
  2. 我们之前都是对ol操作，这里是对li操作
  3. 因为要设置每一项，所以可以每一项任意设置
  4. 比如说之前是连续的123，这里却跳到了10
  5. 做法是把跳的那一项li的value属性单独设置成10就好了
  6. 设置之后，后面的值会在这个设置的值上面递增

7.自定义列表

自定义列表项组成：由 dl定义列表；dt定义列表项目；dd定义列表内容；

<dl>

　　<dt>列表项目一</dt>

　　<dd>列表项目一的内容</dd>

　　<dt>列表项目二</dt>

　　<dd>列表项目二的内容</dd>

</dl>

列表项目一
列表项目一的内容
列表项目二
列表项目二的内容
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>1.11列表</title>

 </head>

 <body>

     <p>学习要点：</p>

     <p style="color: #ff7f50">

     <ul>

         <li><strong><a href="#1">无序列表</a></strong><br></li>

         <li><strong><a href="#2">有序列表</a></strong><br></li>

         <li><strong><a href="#3">列表的属性</a></strong><br></li>

         <li><strong><a href="#4">自定义列表</a></strong></li>

     </ul>

     </p>

     <hr>

     <a id="1"></a>

     <h4>1.无序列表的基本格式</h4>

     <p style="color: #ff0000">ul（unorder line）标签里面放li标签就好了，每一项就是一个li（LineItem）标签</p>

     <p>&lt;ul&gt;</p>

     <p>　　&lt;li&gt;&lt;/li&gt;</p>

     <p>　　&lt;li&gt;&lt;/li&gt;</p>

     <p>&lt;/ul&gt;</p>

     <h4>2.无序列表的type属性</h4>

     <p>无序列表的type属性有三个值：1.disc（默认值）；2.circle；3.square</p>

     <p>分别对应

         <ul type="circle" style="color: #ff0000">

             <li><strong>实心圆</strong></li>

             <li><strong>空心圆</strong></li>

             <li><strong>实心方块</strong></li>

         </ul>

         <span style="color: #ff0000">

             这里演示的就是ul中type为circle的效果

         </span>

         <p>在<strong><span style="color: #ff0000">css</span></strong>中可以设置更多更加复杂的效果，比如前面加小图片</p>

     </p>

     <a id="2"></a>

     <h4>3.有序列表的基本格式</h4>

     <p style="color: #ff0000">ol（order line）标签里面放li标签就好了，每一项就是一个li（LineItem）标签</p>

     <p>&lt;ol&gt;</p>

     <p>　　&lt;li&gt;&lt;/li&gt;</p>

     <p>　　&lt;li&gt;&lt;/li&gt;</p>

     <p>&lt;/ol&gt;</p>

     <a id="3"></a>

     <h4>4.有序列表的type属性</h4>

     <ol type="A">

         <li>整数（默认值）；</li>

         <li>大（小）写字母A\B\C...</li>

         <li>大小写的罗马字母：i ii .../I II III</li>

     </ol>

     <p>这里设置的ol的type为大写字母A</p>

     <p>li标签里面放图片链接都是可以的，元素的嵌套</p>

     <h4>5.有序列表的start属性</h4>

     <p>定义列表的开始序号，比如第一项不是数字1，而是从10开始.......</p>

     <p>就把ol的start属性设置成不同就可以了</p>

     <h4>6.有序列表的value属性</h4>

     <p>定义某个单个列表项的序号.......</p>

     <ol>

         <li>可以通过value属性来设置不连续列表</li>

         <li>我们之前都是对ol操作，这里是对li操作</li>

         <li>因为要设置每一项，所以可以每一项任意设置</li>

         <li value="10">比如说之前是连续的123，这里却跳到了10</li>

         <li>做法是把跳的那一项li的value属性单独设置成10就好了</li>

         <li value="20">设置之后，后面的值会在这个设置的值上面递增</li>

     </ol>

     <a id="4"></a>

     <h4>7.自定义列表</h4>

     <p>自定义列表项组成：由 dl定义列表；dt定义列表项目；dd定义列表内容；</p>

     <p>&lt;dl&gt;</p>

     <p>　　&lt;dt&gt;列表项目一&lt;/dt&gt;</p>

     <p>　　&lt;dd&gt;列表项目一的内容&lt;/dd&gt;</p>

     <p>　　&lt;dt&gt;列表项目二&lt;/dt&gt;</p>

     <p>　　&lt;dd&gt;列表项目二的内容&lt;/dd&gt;</p>

     <p>&lt;/dl&gt;</p>

     <dl>

         <dt>列表项目一</dt>

         <dd>列表项目一的内容</dd>

         <dt>列表项目二</dt>

         <dd>列表项目二的内容</dd>

     </dl>

     <h4>

 </body>

 </html>

html5--1.11列表的更多相关文章

  1. HTML5样式和列表、CSS链接的四种状态

    一.HTML5样式 1.标签: <style>:样式定义: <link>:资源引用: 2.属性: type="text/css":引入文档类型: rel=& ...

  2. Mozilla对HTML5规范支持列表

    翻译自Mozilla Developer Network 在2009年10月28日,HTML 5规范草稿在网络超文本应用技术工作组(WHATWG)中基本出于最后定稿阶段,这意味着HTML 5标准基本定 ...

  3. 关于 HTML5 的 11 个让人难以接受的事实

    HTML5为Web开发者提供了很多强大的新特性,但是它的一些特定的限制会让它无法和本地应用匹敌. HTML5整合进了很多新的特性,并且有可能提升Web编程模式.和每一个阅读技术资讯的人所知道的一样,没 ...

  4. HTML5中 HTML列表／块／布局 韩俊强的博客

    从简单到复杂HTML5详解:每日更新关注:http://weibo.com/hanjunqiang  新浪微博! 1.HTML列表 1.有序 2.无序 3.有序star属性 4.有序无序列表 代码: ...

  5. C++11 列表初始化

    在我们实际编程中,我们经常会碰到变量初始化的问题,对于不同的变量初始化的手段多种多样,比如说对于一个数组我们可以使用 int arr[] = {1,2,3}的方式初始化,又比如对于一个简单的结构体: ...

  6. c++11——列表初始化

    1. 使用列表初始化 在c++98/03中,对象的初始化方法有很多种,例如 int ar[3] = {1,2,3}; int arr[] = {1,2,3}; //普通数组 struct A{ int ...

  7. HTML5 第二章 列表和表格和媒体元素

    列表: (1)什么是列表? 列表就是信息资源的一种展示形式. (2)无序列表: 语法: <ul> <li>第1项</li> <li>第2项</li ...

  8. [HTML/HTML5]7 使用列表

    7.1  在Web页面中使用有序.无序.定义列表 (1)有序列表 有序列表中的每一个列表项之前,都以一个数字或字母作为编号. <ol> <li>树莓</li> &l ...

  9. 50个最受网友欢迎的HTML5资源下载列表

    完整附件下载地址:http://down.51cto.com/data/413867 附件预览: HTML 5游戏源码精选(共含9个游戏源码) http://down.51cto.com/zt/227 ...

随机推荐

  1. Bootstrap 模态框、轮播 结合使用

    Bootstrap 模态框和轮播分开使用的教程网上非常多.可是两者结合使用的样例和资料非常少. 两者结合使用时,開始我遇到了不少bug,如今分享给大家. 我的这个样例是把图片轮播嵌入到模态框里. 最后 ...

  2. vue2 axios 接口函数封装

    封装 axios 工具,编辑 src/api/index.js 文件 首先,我们要使用 axios 工具,就必须先安装 axios 工具.执行下面的命令进行安装 npm install axios - ...

  3. window.location.href重定向 不会触发webview

    通过window.location.href来重定向的,安卓不会触发shouldOverrideUrlLoading.

  4. 《android 1: 创建一个安卓项目》

    创建方式有两种: 通过Eclipse创建 在工具栏上选择New>android>android application project,或者在导航栏上选择file>new>pr ...

  5. 新安装的金蝶K3软件，初始化后，在基础资料中对于币别，科目，部门，客户等资料均无法新增，无法引出，等操作，K3CASysSet.dll

    新装K3,新建的帐套.导入科目点菜单或新增button均无反应,币别.客户等辅助核算项目也新增也无法保存. 在电脑上新安装的金蝶K3软件.初始化后.在基础资料中对于币别,科目,部门,客户等资料均无法新 ...

  6. const的理解、const指针、指向const的指针

    1.const 的理解 const 是C语言的一个关键字,需要注意的是,const 关键字是把变量变为一个只读的变量(也就是不可以作为左值),绝对不是将这个变量变为常量.也就是说经过const 修饰的 ...

  7. node.js介绍及Win7环境安装测试(转）

    官网描述: Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable ...

  8. C语言的##

    比如说我定义一个宏:#define DECLARE_DYNAMIC(class_name) \public:static CRuntimeClass class##class_name; \virtu ...

  9. SpringBoot开启https以及http重定向

    一.使用JDK keytool创建SSL证书 进入$JAVA_HOME/bin目录,运行以下命令 keytool -genkey -alias WeChatAppletsDemo -keypass - ...

  10. 10 redis--频道发布与消息订阅

    消息订阅 使用办法: 订阅端: Subscribe 频道名称 发布端: publish 频道名称 发布内容 客户端例子: redis 127.0.0.1:6379> subscribe news ...