1. 无序列表 有序列表 自定义列表

1,无序列表

第一 你不必须有子标签  <li></li>

第二 ul天生自带内外边距

List-style的属性值 circle(空心圆) disc(实心圆)square(正方形)none(空)

2.  有序列表

ol 有序列表

  1. 内部必须有子标签<li>
  2. 天生自带内外边距

Ol和ul不同之处就在前面符号的区别。

用标签属性type修改

3.   自定义列表

Dl 自定义列表 dt 是小标题  dd内容

4.有的标签设置背景时会独占一行,还有的会随着内容的增减而改变自己的空间大小

根据以上现象,标签又分

块级: p h1-h6 div ul li ol dl 等

内敛:span img i b a em icon(矢量标签)

二者区别

块级

1,块级元素会独占一行

2,块级可以设置宽高

内敛

1,内敛不会独占一行

2,内敛不可以设置宽高

3,内敛元素的margin上下不起作用了

二者转换

块级转行级

给块级元素添加属性display:inline; display 显示  inline 行

行级转块级

给行级元素添加属性display:block;    block块

行级块元素

给需要的元素添加属性 display:inline-block;

(可以设置宽高了,可以在一行了,margin可以随便使用了)

列表 ul ol dl 和 块级标签和行及标签之间的转换的更多相关文章

  1. 重要的事情说三遍:列表 ul / ol 等是块级元素,是块级元素,块级元素

    HTML 块级元素 大多数 HTML 元素被定义为块级元素或内联元素. 编者注:“块级元素”译为 block level element,“行内元素”译为 inline element. 块级元素在浏 ...

  2. 列表(ul ol dl)

    Title 1 2 3 1 2 3 a 1 2 b 1 2 <!DOCTYPE html> <html lang="en"> <head> &l ...

  3. html标签的显示模式(块级标签,行内标签,行内块标签)(转)

    html标签的显示模式(块级标签,行内标签,行内块标签)   今天讲课的时候,讲到了html中的标签的显示模式,大致分为块级标签和行内标签.那么初学者在刚使用标签的时候会发现有些属性在一些标签上不起作 ...

  4. 块和内嵌总结,以及各个标签的应用。其中的ul ol dl特殊定义为auto,使得里面的内容展开

    <!doctype html> <html> <head> <meta charset="UTF-8"/> <title> ...

  5. HTML开发之(块级标签,行内标签,行内块标签)

    显示模式的特性: 主要分为两大类: 块级元素:独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽: 行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内 ...

  6. HTML基础知识(块级标签,行内标签,行内块标签)

    块级元素:独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽: 行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高! 其中还有一种结合两种模 ...

  7. CSS(3)---块级标签、行内标签、行内块标签

    块级标签.行内标签.行内块标签 html中的标签元素三种类型:块级标签.行内标签.行内块标签. 一.概述 1.块级标签 概念 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属 ...

  8. 基础复习之HTML (meta标签、块级元素与行内元素)

    一.meta标签 SEO 如何在不使用JS的情况下刷新页面(http-equiv="refresh" , content="time") 设置页面缓存 移动端设 ...

  9. css块级标签,行内标签,行内块标签的转换(2)

            css块级标签,行内标签,行内块标签的转换 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 在基础1中,我详细讲 ...

随机推荐

  1. Redis-06.Cluster

    Redis Cluster是一个高性能高可用的分布式系统.由多个Redis实例组成的整体,数据按照一致性哈希算法存储分布在多个Redis实例上,并对使用虚拟槽(Slot)对一致性哈希算法进行改进,通过 ...

  2. Struts2新漏洞S2-046在线实验环境全球首发

    Strust2 又出现漏洞啦?搞事情啊? 据说S2-046漏洞和S2-045漏洞非常相似,都是由报错信息带入了buildErrorMessage方法造成的, 只是这次存在两个触发点哦!危害嘛,你说嘞? ...

  3. Visual Studio 开发(一):安装配置Visual Studio Code

    一.为何使用Visual Studio Code 在学习音视频开发的时候,使用到了C和C++,在回顾复习C和C++的知识的时候,需要编写一些代码来加强理解. 虽然,有在线的语言编辑工具https:// ...

  4. 第48节:Java当中的集合框架

    Java当中的集合框架 01 在我们班里有50位同学,就有50位对象. // 简书作者:达叔小生 Student[] stus = new Student[20]; 结果来了一位插班生,该同学因为觉得 ...

  5. 前端切图神器-cutterman

    之前我写过一篇关于前端切图的博客:https://www.cnblogs.com/tu-0718/p/9741058.html 但上面的方法在切图量大时依然很费时间,下面向大家推荐这款免费切图神器 c ...

  6. Windows平台下kafka环境的搭建

    近期在搞kafka,在Windows环境搭建的过程中遇到一些问题,把具体的流程几下来防止后面忘了. 准备工作: 1.安装jdk环境 http://www.oracle.com/technetwork/ ...

  7. 关于PHP中拿到MySQL中数据中的中文在网页上显示为?的解决办法!

    问题: 解决方案: 在PHP 代码中 输入 : //$connection 是链接数据库返回的变量名: mysqli_set_charset($connection,'utf8'); 完美解决:

  8. JSON库的使用研究(一)

    最近用到JSON,收集了一些资料,整理如下: 选择一个合适的JSON库要从多个方面进行考虑: 字符串解析成JSON性能 字符串解析成Java Object性能 Java Object转JSON性能 集 ...

  9. 通过session的id号获取对应的session

    说说为什么要用session!!! 每次访问端通过普通http协议访问tomcat时,访问端包括网页或Android app等,tomcat都会自动生成一个不同的session,而且session的i ...

  10. 利用max-height适应多尺寸屏幕的下拉动画

    移动设备的特点之一便是屏幕尺寸多种多样,所以我们在制作针对移动设备的动画时必须不同尺寸屏幕的兼容性.比如我们要制作以下动画:红框2为详细内容,默认收起:红框1处为事件响应热区,点击后展开或收起红框2的 ...