序列化标签

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. EXAM-2018-7-29

    EXAM-2018-7-29 未完成 [ ] H [ ] A D 莫名TLE 不在循环里写strlen()就行了 F 相减特判 水题 J 模拟一下就可以发现规律,o(n) K 每个数加一减一不变,用m ...

  2. python+selenium自动化测试之登录

    selenium_login.py import unittest from selenium import webdriver class LoginTest(unittest.TestCase): ...

  3. idea，2018版破解方法

    1.准备安装文件 2.安装 ideaIU-2018.3.5.exe ,如这里是安装到IDEA这个文件夹: 3.复制JetbrainsIdesCrack-4.2-releasexxx.jar放到IDEA ...

  4. C++头文件和std命名空间

    C++ 是在C语言的基础上开发的,早期的 C++ 还不完善,不支持命名空间,没有自己的编译器,而是将 C++ 代码翻译成C代码,再通过C编译器完成编译.这个时候的 C++ 仍然在使用C语言的库,std ...

  5. 基于Python的Flask基础知识

    Flask简介 Flask 是一个使用 Python 编写的轻量级 Web 应用程序框架.Armin Ronacher带领一个名为Pocco的国际Python爱好者团队开发了Flask. 下面我们简单 ...

  6. 吴裕雄--天生自然Android开发学习：1.2 开发环境搭建

    现在主流的Android开发环境有: ①Eclipse + ADT + SDK ②Android Studio + SDK ③IntelliJ IDEA + SDK 现在国内大部分开发人员还是使用的E ...

  7. 微软推出精简版Windows10Lean系统意欲何为？

    提起Windows系统,自然无须多言都知道它的重要性.在经历了Windows Vista的失败. Windows 7的成功.Windows 8的平庸和Windows 10的复兴之后,微软算是积累下了大 ...

  8. undefined reference to 问题汇总及解决方法 ----- 还有一种问题没有解决（可能是顺序问题）

    1.链接时缺失了相关的目标文件 2.链接时缺少了相关的库文件 3.链接的库文件中有使用了另一个库文件 4.多个库文件链接顺序问题 5.定义与实现不一致 6.在c++代码中链接C语言的库   转载地址: ...

  9. 使用fastai完成图像分类

    by Wenqi Sun 1 min read Categories Deep Learning Tags Fastai CNN Application 1. 使用现有数据集进行分类 图像数据为Oxf ...

  10. Memcached笔记——（四）应对高并发攻击

    近半个月过得很痛苦,主要是产品上线后,引来无数机器用户恶意攻击,不停的刷新产品各个服务入口,制造垃圾数据,消耗资源.他们的最好成绩,1秒钟可以并发6次,赶在Database入库前,Cache进行Mis ...