序列化标签

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. html5 一些好用的原生事件

    计算机技术发展这么多年, 有些方面太老了,不适合新时代的发展, 使用新的规范,更方便开发和使用, 提高各方使用人的工作效率, 何乐而不为 drag drop html5新增属性 某些操作使用拖拽比较方 ...

  2. 54）PHP，访问修饰符

    类外就是你再实例化成对象的时候  用你类里面的变量 继承的类内,  就是子类里面,但是实例化对象时,不能用 本类内,      只在本类的定义时用,子类不能用.

  3. 路由器协议----IGP、EGP、RIP、OSPF、BGP、MPLS

    1.路由控制的定义 <br>1.1.IP地址与路由控制   file:///var/folders/pz/cy11_lpd5rqfs66s778032580000gn/T/51.html ...

  4. C段和旁注

    踩点常用手段有哪些 1.旁站注入:利用同一 主机上面不同网站的漏洞得到 webshell,从而利用主机上的程序或者是服务所暴露的 用户所在的物理路径进行入侵.网站共享主机漏洞是更为严谨的学术叫法 2. ...

  5. 奇点云 x 阿里云 | 联合发布综合体数字化转型与数据创新解决方案

    2019年7月25日下午,在阿里云峰会上海站,奇点云入选阿里云首批联合解决方案合作伙伴,并联合发布了“综合体数字化转型与数据创新解决方案”,共同探索综合体的智能服务. 关于综合体的数字化转型,奇点云联 ...

  6. 1）session总结

    (1)session的由来: HTTP协议是一种无状态协议,服务器响应完之后就失去了与浏览器的联系,最早,Netscape将cookie引入浏览器,使得数据可以客户端跨页面交换,那么服务器是如何记住众 ...

  7. 学习python-20191230（1）-Python Flask高级编程开发鱼书_第04章_应用、蓝图与视图函数

    视频06: 1.自动导包快捷键——默认为alt + enter 键组合          选中的字符由小写变为大写——Ctrl + Shift + U键组合 2.DataRequired()——防止用 ...

  8. cs231n spring 2017 lecture11 Detection and Segmentation

    1. Semantic Segmentation 把每个像素分类到某个语义. 为了减少运算量,会先降采样再升采样.降采样一般用池化层,升采样有各种“Unpooling”.“Transpose Conv ...

  9. git使用的简要介绍

    GIT """ 什么是git:版本控制器 - 控制的对象是开发的项目代码 代码开发时间轴:需求1 > 版本库1 > 需求2 > 版本库2 > 版本 ...

  10. Jmeter之正则表达式提取

    一.正则表达式提取器: 1.比如需要提取如下响应文本中的 “<title> 孤舟点点 - 博客园找找看</title>” 里面的 “孤舟点点 - 博客园找找看”: 2.设置正则 ...