块级元素:独占一行,对宽高的属性值生效;如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽;

行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高!

其中还有一种结合两种模式有点的显示模式:

行内块元素:结合的行内和块级的有点,不仅可以对宽高属性值生效,还可以多个标签存在一行显示;

行内标签:包含a、span、em、strong、b、i、u、label、br;

特点:可以多个标签存在一行,不能直接设置行内标签的高度、宽度、行高以及顶和底边距,完全靠内容撑开宽高!

a标签:主要用来链接一个其他的网页;

span标签:主要用来对行内的文字进行一些样式以及其他的操作;

em标签:一般用来对文字进行强调,使用斜体体现出来;

strong标签:一般用来对文字进行强调,使用加粗字体体现出来;

img标签:图片引用标签,其中 src属性中写入图片的地址;

var标签:JavaScript中命名变量的标签。

块标签:包含p、div、ul、ol、li、dl、dt、dd、h1~h6、form;

特点:独占一行,对高度、宽度、行高以及顶和底边距都可设置的属性值生效;如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽;

p标签:段落标签,段落文字使用,默认格式:段尾进行换行;

div标签:划分块的主要使用标签;

ul标签:无序列表的主标签,后面的标号为圆点(黑色);

ol标签:有序列表的主标签,后面一般跟有序的1,2,3,4,5...;

li标签:列表中的主体使用标签

dl标签:自定义标签的主标签;

dt标签:自定义标签的表头;

dd标签:自定义标签的表头的解释(描述)信息;

h1~h6:6级标题标签、字体的大小依次变小。

行内块标签:img,input,textarea

特点:结合的行内和块级的有点,不仅可以对宽高属性值生效,还可以多个标签存在一行显示;

+++++++++++++++++++++++++++++++++++++++++

各种标签之间的转换

1、块级标签转换为行内标签:display:inline;

2、行内标签转换为块级标签:display:block;

3、转换为行内块标签:display:inline-block;

            各个标签之间的区别

块标签:独自占领一行、可以进行宽高的数值的设定;

行标签:在一行内显示、不可以进行宽高的数值设定;

行内块标签:能和其他元素待在一行,能设置宽高;

                嵌套规则

块标签可以套行标签,行标签不可以套块标签。

P标签不要套块属性标签,可以套a,span,文本。。。

嵌套的时候注意代码的缩进。

在这之前有说过 text-align这个属性是否生效,原因是块级标签如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽,那么在100%的宽度中居中生效;但是行内元素的宽完全是靠内容撑开,所以宽度就是内容撑开的宽

基本上就是这个属性之间的转换!

HTML基础知识(块级标签,行内标签,行内块标签)的更多相关文章

  1. block(块级元素)和 inline(内联元素) 的区别

    block(块级元素)和 inline(内联元素) 的区别 (2009-01-05 10:32:07) 转载▼ 标签: 杂谈 分类: div+css div这样的块级元素,就会自动占据一定矩形空间,可 ...

  2. HTML哪些是块级元素,哪些是行内元素、

    块级元素:块级大多为结构性标记 <address>...</adderss> <center>...</center>  地址文字 <h1> ...

  3. 块级元素的text-align对行内元素和果冻元素(inline-block)的作用

    块级元素社设置了text-align:center以后,对其直接行内元素/果冻元素.继承行内元素/果冻元素都会产生“居中效应”. <style> .test4{ text-align: c ...

  4. 行内元素与块级元素的区别,行内块级元素在IE8-的兼容性

    行内元素与块级元素的区别 行内元素最好不要包裹块级元素,但是块级元素可以任意的包裹行内元素 行内元素如果其上一个元素也是行内元素,则他们会分布在统一水平线上,即在一行上排列,块级元素不论上一个元素是行 ...

  5. javascript中不存在块级作用域,所以要小心使用在块级作用域中的函数声明所带来的作用域混乱.

    在javascript中函数的作用域是一个非常重要的概念. javascript中是没有块级作用域,但是有函数作用域的概念. 我们在开发的过程中,经常会遇到这样的问题, 某个函数我暂时不需要,不想声明 ...

  6. css基础 行内元素 块级元素

    1.行内元素(内联元素 inlineElement) 特点:不占据一行,无法设置宽高及行高,其宽度随着内容增加,高度随字体大小而改变,margin只对左右起作用,上下无效. 常见有: a - 锚点,b ...

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

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

  8. 浅谈css的行内类型标签和块级标签

    常用标签的行内类型标签有:a.span.img:块级标签有:div.p.h1~6.ul.ol.li.dl.dt.dd. 行内类型标签的特征:标签的大小由标签的内容决定,不能设置width和height ...

  9. html元素类型 块级元素、内联元素(又叫行内元素)和内联块级元素。

    html中的标签元素大体被分为三种不同的类型:块级元素.内联元素(又叫行内元素)和内联块级元素. 块级元素特点: 1.每个块级元素都从新的一行开始,并且其后的元素也另起一行.(霸道,一个块级元素独占一 ...

  10. css 行内元素和块级元素

    1. 块级元素默认在新行开始,如常见的div和p标签,行内元素默认在同行开始显示,如a,span标签 2.块级元素一般用于做容器,可容纳行内和块级元素,可设置width和height,行内元素只能容纳 ...

随机推荐

  1. CodeForces Round#480 div3 第2场

    这次div3比上次多一道, 也加了半小时, 说区分不出1600以上的水平.(我也不清楚). A. Remove Duplicates 题意:给你一个数组,删除这个数组中相同的元素, 并且保留右边的元素 ...

  2. codeforces 747D. Winter Is Coming(贪心)

    题目链接:http://codeforces.com/problemset/problem/747/D 题意:冬天有n天,冬天用的轮胎总共能用k天,一开始车子用的是夏天的轮胎. 给出n天的平均气温,温 ...

  3. 牛客暑假多校 F RIKKA with Line Graph

    题意: 现在有一副完全图, 将他转化成线图. 线图就是 把原来的图上的边都变成点, 然后如果原来的任意2条边存在公共点, 他们就会有一条边, 边权为原来的2条边的和. 最后求出线图中的任意2点的最短路 ...

  4. 解决flutter:unable to find valid certification path to requested target 的问题

    1.问题 周末在家想搞搞flutter,家里电脑是windows的,按照官网教程一步步安装好以后,创建flutter工程,点击运行,一片红色弹出来,WTF? PKIX path building fa ...

  5. 基于SpringBoot从零构建博客网站 - 开发文章详情页面

    文章详情页面是博客系统中最为重要的页面,登录用户与游客都可以浏览文章详情页面,只不过只有登录用户才能进行其它的一些操作,比如评论.点赞和收藏等等. 本次的开发任务只是将文章详情页面展示出来,至于一些收 ...

  6. NGINX的启停命令、以及动态加载配置文件的命令

    -- 启动(不推荐):在nginx目录下有一个sbin目录,sbin目录下有一个nginx可执行程序../nginx -- 启动(指定配置文件,推荐)/usr/local/nginx/sbin/ngi ...

  7. js中数组方法大全

    js数组方法大全 一:前言 我们在学到js中数组的时候,我们会接触到js中数组的一些方法,这些方法对我们来说,可以很遍历的达到我们想要的结果,但是因为方法比较多,有些方法也不常用,可能会过一段时间就会 ...

  8. Empire – PowerShell 后渗透攻击框架

    0x01 简介 Empire是一个后开发框架.它是一个纯粹的PowerShell代理,具有加密安全通信和灵活架构的附加功能.Empire具有在不需要PowerShell.exe的情况下执行PowerS ...

  9. Django与mongodb数据库的连接

    1.最开始需要下载一个第三方模块:mongoengine 2.下载完成之后,需要在settings中完成配置(在DATABASES后面,别问我为什么,问了我也不告诉你...) connect中传入的是 ...

  10. 漏洞复现:MS17-010缓冲区溢出漏洞(永恒之蓝)

    MS17-010缓冲区溢出漏洞复现 攻击机:Kali Linux 靶机:Windows7和2008 1.打开攻击机Kali Linux,msf更新到最新版本(现有版本5.x),更新命令:apt-get ...