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. C++的学习心得

    由于我们大一就学习的c++,跳过了c语言,VB的学习,在很多方面我们掌握的并不是特别好,在这几种语言中,几乎有时候会产生混淆,通过做大量的c++的题目感觉在题目中应用的最多的就是数组.指针.对类的应用 ...

  2. 使用ILSpy软件反编译.Net应用程序的方法及注意事项

    今天遇到之前同事写的代码没有源码了,但是客户要在原来的基础上修改程序!好在没有做加壳处理,所以就用了ILSpy软件进行反编译!下面把步骤及遇到的问题写下来: 1.打开ILSpy软件,点击File  , ...

  3. 弹性盒子模型属性之flex-shrink

    上一次,我们已经了解过flex-grow的具体用法后,这周,让我们一起来见一下flex-basis这个属性. flex-shrink 定义项目的缩小比例,默认值为1,注意前提是空间不足的情况下,项目缩 ...

  4. 小白必读:闲话HTTP短连接中的Session和Token

    本文引用了刘欣的文章,感谢原作者的分享. 1.引言 Http协议在现今主流的IM系统中拥有无可替代的重要性(在IM系统中用HTTP发起的连接被大家简称为http短连接),但Http作为传统互联网信息交 ...

  5. Kali学习笔记29:默认安装漏洞

    文章的格式也许不是很好看,也没有什么合理的顺序 完全是想到什么写一些什么,但各个方面都涵盖到了 能耐下心看的朋友欢迎一起学习,大牛和杠精们请绕道 默认安装漏洞: 早期Windows默认自动开启很多服务 ...

  6. 哈尔特征Haar

    哈尔特征(Haar-like features) 是用于物体识别的一种数字图像特征.它们因为与哈尔小波转换 极为相似而得名,是第一种即时的人脸检测運算. 历史上,直接使用图像的强度(就是图像每一个像素 ...

  7. 序列化与反序列化之JSON

    在不同编程语言之间传递对象,须把对象序列化为标准格式,比如XML 但更好的方法是序列化为JSON,因为JSON表示出来就是一个字符串,可被所有语言读取,也可方便地存储到磁盘或者通过网络传输 JSON不 ...

  8. 安卓Listview和Adapter数据设计

    ListView是一种用于垂直显示的列表控件,如果显示内容过多,则会自动出现垂直滚动条,每一行是一个View对象,在每一行上可以放置任何组件,Adapter适配器是数据和UI的桥梁,为数据显示提供了统 ...

  9. C# 配置文件Xml读写

    分析xxx.exe.config文件: <?xml version="1.0" encoding="utf-8"?> <configurati ...

  10. 【学习笔记】分类算法-k近邻算法

    k-近邻算法采用测量不同特征值之间的距离来进行分类. 优点:精度高.对异常值不敏感.无数据输入假定 缺点:计算复杂度高.空间复杂度高 使用数据范围:数值型和标称型 用例子来理解k-近邻算法 电影可以按 ...