序列化标签

1.有序标签--ol和li

有序列表标签是<ol>，是一个双标签。在每一个列表项目前要使用<li>标签。<ol>标签的形式是带有前后顺序之分的编号。如果添加或者删除一个列表项，编号会自动调整。

<ol>

<li>第一项</li>

<li>第一项</li>

<li>第一项</li>

...

</ol>

有序标签的属性--start

start属性是用来设置编号开始的数字，默认从1开始，该属性可省略。如果从其他数字，如2开始，设置‘start=2’，可以从负数开始。

有序标签的属性--type

type属性用于设置编号为数字或者字母等的类型，如'type=a',则编号用英文字母表示。

type=1-->表示用数字编号1,2,3...

type=a-->表示用小写字母编号a,b,c...

type=A-->表示用大写字母A,B,C...

type=I-->表示用大写罗马数字标号I,II,III...

type=i-->表示用小写罗马数字标号i,ii,iii

如果不想要序号显示，可设置ol的style属性'text-decoration: none'

无序标签--ul和li

无序列表标签是<ul>，是一个双标签。在每一个列表项目前要使用<li>标签。列表前的序号类型变成了符号。

<ul>

<li>第一项</li>

<li>第一项</li>

<li>第一项</li>

...

</ul>

可通过设置type属性，改变符号类型，默认是实心圆

type=disc-->实心圆

type=circle-->空心圆

type=square-->小方块

如果不想要序号显示，可设置ul的style属性'list-style-type: none'

嵌套标签--dl、dt和dd

定义列表默认为两层，第一层标签<dt>，第二层标签<dd>。通常是成对出现。

<dl>

<dt>名词1</dt>

<dd>名词1的解释1</dd>

<dd>名词1的解释2</dd>

<dt>名词2</dt>

<dd>名词2的解释1</dd>

<dd>名词2的解释2</dd>

</dl>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>小白</title>

</head>

<body>

水平显示菜单

<ul style="list-style-type: none">

    <!--list-style-type: none 去掉圆点-->

    <!--display: inline-block 变为行内元素， 并且可以设置高度和宽度-->

    <li style="display:inline-block;width:20%;background: darkseagreen">水煮肉片</li>

    <li style="display:inline-block;width:20%;background: darkseagreen">蚂蚁上树</li>

    <li style="display:inline-block;width:20%;background: darkseagreen">宫保鸡丁</li>

    <li style="display:inline-block;width:20%;background: darkseagreen">豆腐圆子汤</li>

</ul>

<br>

<hr/>

有以下书籍可供选择：

<ol type="A">

    <!--去掉原有装饰：text-decoration: none-->

    <li><a href="https://baike.so.com/doc/801785-848140.html" style="text-decoration: none;color: #f10180">额尔古纳河右岸</a></li>

    <li><a href="#">月亮与六便士</a></li>

    <li><a href="#">面纱</a></li>

    <li><a href="#">平凡的世界</a></li>

</ol>

<br>

<hr/>

<br>

<h3 align="center">python</h3>

<dl>

    <dt style="color: darkblue">数值类型</dt>

    <dd>数值、bool</dd>

    <dd>字符串</dd>

    <dd>列表</dd>

    <dd>元祖</dd>

    <dd>字典</dd>

    <dt style="color: darkblue;">循环</dt>

    <dd>while循环</dd>

    <dd>for循环</dd>

</dl>

</body>

</html>

python大佬养成计划----HTML网页设计（序列）的更多相关文章

  1. python大佬养成计划----HTML网页设计（表格）

    制作网页时,要合理规划网页布局.比如,在网页中添加一个表格,可分为上.中.下三部分,上部存放网页标题或LOGO图片,中间部分是整个网页的主体内容,底部就是相关制作信息.此外,单元格里还可再添加单元格, ...

  2. python大佬养成计划----flask_bootstrap装饰网页

    flask_bootstrap Bootstrap 是 Twitter 开发的一个开源框架,它提供的用户界面组件可用于创建整洁且具有吸引力的网页,而且这些网页还能兼容所有现代 Web 浏览器. Boo ...

  3. python大佬养成计划----基于flask_sqlalchemy的网页显示数据库信息

    网页显示数据库信息 使用我们刚学习的flask_sqlalchemy,在网页中显示数据库表中的数据.在开始运行程序前,确保数据库中执行过创建表和创建用户的操作,详见链接描述. # 模板文件templa ...

  4. python大佬养成计划----HTML DOM

    什么是DOM? DOM (Document Object Model) 译为文档对象模型,是 HTML 和 XML 文档的编程接口.HTML DOM 定义了访问和操作 HTML 文档的标准方法.DOM ...

  5. Web前端开发工程师养成计划【转载】

    Web前端开发工程师养成计划(入门篇) 最原始的忠告:这个世界上有想法的人很多,但是有想法又能实现它的人太少! 首先要感谢伟大的Web2.0概念.产品概念.用户体验概念.jQuery插件,是它们在中国 ...

  6. 2019.12.12网页设计大赛&2019.12.13程序设计大赛观后感

    有幸参加了一次网页设计大赛和程序设计大赛,其实在大一的时候就参加过一次程序设计大赛,那时候也没怎么听,现在又有了一次机会来听,这次就认真的听了这两次的比赛,也有很多的感悟. 1.要学习完成一个任务的多 ...

  7. BZOJ 4212: 神牛的养成计划

    4212: 神牛的养成计划 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 142  Solved: 30[Submit][Status][Discus ...

  8. 【BZOJ-4212】神牛的养成计划 Trie树 + 可持久化Trie树

    4212: 神牛的养成计划 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 136  Solved: 27[Submit][Status][Discus ...

  9. [BZOJ4212]神牛的养成计划

    [BZOJ4212]神牛的养成计划 试题描述 Hzwer 成功培育出神牛细胞,可最终培育出的生物体却让他大失所望...... 后来,他从某同校女神 牛处知道,原来他培育的细胞发生了基因突变,原先决定神 ...

随机推荐

  1. MRP运算报错-清除预留

    MRP运算报错-清除预留

  2. 吴裕雄--天生自然python机器学习：支持向量机SVM

    基于最大间隔分隔数据 import matplotlib import matplotlib.pyplot as plt from numpy import * xcord0 = [] ycord0 ...

  3. Serverless 的开发者工具建设

    本文将介绍 Serverless 生态下的开发者工具,并简述这些工具是如何贯穿开发.调试.测试和部署的生命周期,提升开发者效率的. 由于 Serverless 平台具备弹性扩缩.免运维.按需付费等特点 ...

  4. RDD(四)——transformation_key_value类型

    这里所有算子均只适用于pairRDD.pairRDD的数据类型是(k,v)形式的键值对: PartitionBy(Partitioner) 对pairRDD进行分区操作,如果原有的partioner和 ...

  5. Eclipse 快捷键(mac)

    Option + Command + X: 运行Command + O:显示大纲Command + 1:快速修复Command + D:删除当前行Command + Option + ↓:复制当前行到 ...

  6. The Chosen One+高精度

    题目描述 Welcome to the 2017 ACM-ICPC Asia Nanning Regional Contest. Here is a breaking news. Now you ha ...

  7. 前端-css-长期维护

    ###############    CSS简介    ################ # CSS # HTML是骨架 # CSS是样式 # JS是动作 # css和html是分成两个文件编写的,这 ...

  8. MS12-020 3389蓝屏攻击

    MS12-020 3389蓝屏攻击 search ms12_020 use exploit/dos/windows/rdp/ms12_020_maxchannelids set rhost 192.1 ...

  9. 每天一点Linux-01文档系统

    Windows: 以多根的方式组织文档 C: D: E:Linux: 以单根的方式组织文档 / /目录结构: FSH (Filesystem Hierarchy Standard) [root@yan ...

  10. Torque：轻应用背后的大蓄势 微软语音技术厚积薄发​

    Torque,为中国用户而来 此前,"微软车库"公开发布了一系列小而美的产品,它们全部由具有"极客创新"精神的微软员工在工作之外的时间构思和开发.Torque就 ...