序列化标签

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. [USACO09DEC]雪橇Bobsledding（贪心）

    https://www.luogu.org/problem/P2968 题目描述 Bessie has entered a bobsled competition because she hopes ...

  2. NOIP2000提高组T1 进制转换

    https://www.luogu.org/problem/P1017 题目描述 我们可以用这样的方式来表示一个十进制数: 将每个阿拉伯数字乘以一个以该数字所处位置的值减1为指数,以10为底数的幂之和 ...

  3. layui 触发 select 下option 被选择事件

    1.找到值为某一个的元素 var S0 = 'dd[lay-value='+ level+']'; 2.给该元素注册点击事件  siblings(兄弟节点) $('select[name=\'leve ...

  4. Linux_打包文件

    将多个文件打包成一个大文件,用tar命令 tar是将多个文件前后连接在一起,tar并不对文件进行压缩 tar -cf  要创建的打包文件名(最后加上.tar)  要打包的文件/列表      c代表创 ...

  5. ios Alamofire网络插件的使用

    pod 'Alamofire' import Alamofire let headers:HTTPHeaders = [ "aa":"bb" ] let par ...

  6. Socket设置超时时间

    主要有以下两种方式,我们来看一下方式1: Socket s=new Socket(); s.connect(new InetSocketAddress(host,port),10000); 方式2: ...

  7. 对kotlin和java中的synchronized的浅谈

    synchronized在java中是一个关键字,但是在kotlin中是一个内联函数.假如分别在java和kotlin代码锁住同一个对象,会发生什么呢,今天写了代码试了试.首先定义people类 12 ...

  8. warning: LF will be replaced by CRLF in ** 的原因及解决办法

    https://blog.csdn.net/man_zuo/article/details/88651416

  9. echo追加和覆盖

    追加: echo " " >> 文件名 覆盖: echo " " > 文件名

  10. python自动化测试之函数（匿名函数lambda和三目运算等（高级用法））

    ''' 匿名函数: lambda ''' def Add(a,b): print(a+b) Add(2,3) per = lambda a,b:a+b print(per(2,3)) ''' 三目运算 ...