1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <!--
  9.         列表:
  10.         无序列表:ul+li 列表类型+子项 无顺序的
  11.         有序列表:ol+li  列表类型+子类 有顺序的
  12.         自定义列表:dl+dt+dd 列表类型+标题+子项 ,一般用于网站底部,下面的服务支持等场景
  13.         快速生成代码:
  14.         li*6:快速成功6个li标签
  15.         ul>li*6:前面加个ul>,表示在生成li之前有个层次关系,通过>实现.但是只是生成框架,里面的子项是空的,因此引出下面的生成代码
  16.         ul{子项内容}*生成数:如果想要子类内容出现随生成数变化的数字,可以在{}中加$
  17.         优化到最后:ul>li{子项内容$}*生成数,可以一次性完成框架及内容的构建
  18.     -->
  19.  
  20.     <ul>
  21.         <li>无序列表1</li>
  22.         <li>无序列表2</li>
  23.         <li>无序列表3</li>
  24.         <li>无序列表4</li>
  25.         <li>无序列表5</li>
  26.     </ul>
  27.  
  28.     <ol>
  29.         <li>有序列表1</li>
  30.         <li>有序列表2</li>
  31.         <li>有序列表3</li>
  32.         <li>有序列表4</li>
  33.         <li>有序列表5</li>
  34.     </ol>
  35.  
  36.     <dl>
  37.         <dt>标题1</dt>
  38.         <dl>子项1</dl>
  39.         <dl>子项2</dl>
  40.         <dl>子项3</dl>
  41.         <dl>子项4</dl>
  42.         <dl>子项5</dl>
  43.     </dl>
  44.  
  45.     <ol>好吃排行榜
  46.         <li>蔬菜</li>
  47.             <ul>
  48.                 <li>子项1</li>
  49.                 <li>子项2</li>
  50.             </ul>
  51.         <li>水果</li>
  52.             <ul>
  53.                 <li>子项1</li>
  54.                 <li>子项2</li>
  55.             </ul>
  56.         <li>肉</li>
  57.             <ul>
  58.                 <li>子项1</li>
  59.                 <li>子项2</li>
  60.             </ul>
  61.     </ol>
  62. </body>
  63. </html>

2.html基础标签:无序+有序+自定义列表的更多相关文章

  1. HTML基础标签图片文本超链接列表表格介绍

    1.HTML基础标签图片常见代码形式<img src="图片路径地址" alt="属性名" title="占位符">常见的图片格 ...

  2. 我教女朋友学编程html系列(7)—Html无序列表、自定义列表、有序列表及常用例子

    昨天写的那篇文章<我教女朋友学编程Html系列(6)—Html常用表单控件>,基本上有1000人左右看了,那边文章是我站在前人的肩膀上修改来的,添加了截图和说明,合并了例子,使之更容易被初 ...

  3. Android零基础入门第39节：ListActivity和自定义列表项

    原文:Android零基础入门第39节:ListActivity和自定义列表项 相信通过前两期的学习,以及会开发最简单的一些列表界面了吧,那么本期接着来学习更多方法技巧. 一.使用ListActivi ...

  4. Swift基础－－使用TableViewController自定义列表

    首先建立一个swift项目,把storyboard的内容删掉,添加一个 Navigation Controller,然后设置storyboard对应界面的class,在Navigation Contr ...

  5. Web开发——HTML基础（高级文本格式 列表/style）

    文档资料参考: 参考:https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_fo ...

  6. HTML概念、语法及常用基础标签

    HTML基础语法 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. HTML基础标签学习

    HTML基础学习 前言 HTML基础学习会由HTML基础标签学习.HTML表单学习和一张思维导图总结HTML基础三篇文章构成,文章中博主会提取出重点常用的知识和经常出现的bug,提高学习的效率,后续会 ...

  8. HTML基础标签入门

    HTML基础标签 昨天学习了一些HTML的基本标签以及基本属性: HTML是一种超文本标记语言,其中PHP是世界上最好的语言(增加学习的动力荣誉感). HTML文档里包含三部分: <html&g ...

  9. Html5 基础－－－－列表详述

    html5列表 标签 列表分为:  有序列表/无序列表/自定义列表,用的最多的为无序列表和自定义列表 1.有序列表(order list) eg:把

随机推荐

  1. leetcode105

    /** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNode *left; * TreeNode ...

  2. Rabbitmq(6) 主题模式

    * 匹配1个 # 匹配所有 发送者: package com.aynu.bootamqp.service; import com.aynu.bootamqp.commons.utils.Amqp; i ...

  3. python爬虫之解析库Beautiful Soup

    为何要用Beautiful Soup Beautiful Soup是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式, 是一个 ...

  4. 2018 pycharm最近激活码

    今天更新了一下pycharm,结果之前的激活就不能用了,下面是新的激活方法: 1.mac下在终端进入etc目录: cd /etc 2.编辑hosts文件: vi hosts 将“0.0.0.0 acc ...

  5. 接入层高性能缓存技术nginx+redis利器OpenResty

    一. OpenRestyOpenResty是一个基于 Nginx与 Lua的高性能 Web平台,其内部集成了大量精良的 Lua库.第三方模块以及大多数的依赖项.用于方便地搭建能够处理超高并发.扩展性极 ...

  6. 安装SourceTree工具，无需注册就可以正常使用SourceTree

    1. 下载SourceTree安装包 2. 双击安装包进行安装,默认会直接安装在系统盘,此时桌面就会SourceTree的快捷键 3. 双击打开桌面的SourceTree,就会提示让你安装授权,那么接 ...

  7. matplotlib 坑

    1 archlinux里安装好matplotlib之后一定要安装python-cario pacman -S python-cairo

  8. [leetcode]41. First Missing Positive第一个未出现的正数

    Given an unsorted integer array, find the smallest missing positive integer. Example 1: Input: [1,2, ...

  9. Linux磁盘空间分析及清理（df、du、rm）

    1.df磁盘空间查看 df可以查看一级文件夹大小.使用比例.档案系统及其挂入点. [root@oms ~]# df -Th Filesystem Type Size Used Avail Use% M ...

  10. Spark2.0学习（一）--------Spark简介

    官网对Spark的介绍 http://spark.apache.org/ Apache Spark™ is a unified analytics engine for large-scale dat ...