首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

HTML&CSS 课程】03 块标签行内标签

image.png 步骤1:问候一下div标签 首先,让我们一起认识一下div标签,这是一个极为常用的块标签。所谓的块标签,就是高度为0,宽度100%的标签,也就是说,它是独占一行的!...步骤2:问候一下span标签 span是行内标签,啥叫行内标签呢?行内标签就是一种皮包骨的标签!(哈哈,够精辟了) 首先,我们在页面中加一个空的span标签。...步骤3:图片img是什么标签 网页中是可以引入图片的,在html中,我们用img标签来引入图片。 标签有两个必需的属性:src 和 alt。...根据上面的步骤,我们知道div是独占一行的,而span的宽度完全根据内容来决定,这个就是区分块元素和行内元素的试金石。现在我们引入一张图片: ?...步骤4:行内标签与块标签的转换 首先,继续上一个问题,怎样让行内标签换行,最简单的办法:div不是块标签吗?那直接在外面套一层div不就好了? <!

1.2K50

HTML元素和行内元素

常见的行内元素有、、、、、、 、、、等,其中标签最典型的行内元素。...(a特殊 a里面可以放块元素 ) 注意: 只有文字才能组成段落,因此p里面不能放块元素,同理还有这些标签h1,h2,h3,h4,h5,h6,dt,他们都是文字类块标签,里面不能放其他块元素。...a里面可以放块元素 块元素和行内元素区别 块元素的特点: (1)总是从新行开始 (2)高度,行高、外边距以及内边距都可以控制。...行内块元素(inline-block) 在行内元素中有几个特殊的标签——、、, 可以对它们设置宽高和对齐属性,有些资料可能会称它们为行内块元素。...标签显示模式转换 display 块转行内:display:inline; 行内转块:display:block; 块、行内元素转换为行内块: display: inline-block; 此阶段,我们只需关心这三个

3.4K60
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    CSS样式块元素,行内元素,行内元素

    前言 HTML元素按布局属性可以分为三种类型:块元素、行内元素、行内块元素 这篇文章梳理一下他们的区别与联系 一、区别 1.块元素 属性 默认独占一行 如果不设置宽度,默认是父的宽度。...即使设置的宽度,也会占用一行 可以设置全部属性 2.行内元素 属性 不会独占一行,可以与其他非块元素同行 不是全部属性都生效。margin的上下,padding的上下,宽度,高度都不可以设置。...行内元素里面不可以嵌套块元素 3.行内块元素 属性 不会独占一行,可以与其他非块元素同行 可以设置全部属性 代码换行时,会出现间隔。...二、联系 可以通过css的display的属性来转换 block 块元素 inline 行内元素 inline-block 行内元素 display: block; // 设置元素为块元素...display: inline: // 设置元素为行内元素 display: inline-block; // 设置元素为行内块元素 三、常见标签 1.块元素 div,p,ul,li(列表)

    2.1K30

    行内元素、块元素和行内元素的区别和联系

    HTML,也叫“超文本标记语言”,其元素无非就是行内元素、块元素和行内元素。...行内元素最常用的就是 span , br 和 a ,之前 b , i 和 small 标签也比较常见,分别用来设置加粗,斜体和缩小字体。但这种特殊的样式,最好还是用 CSS 来实现。...HTML新增的一些语义化标签,也是块元素: 文章内容。 伴随内容。 音频播放。 视频。 绘制图形。...行内元素: 行内元素也被称为可置换元素,它们既可以设置宽高又不会占据一整行的空间。 常见的行内元素有 img , button , input , select , textarea 。...» 行内元素、块元素和行内元素的区别和联系

    35830

    html视频标签属性_html音频标签

    Html5方案 以上的讨论实际上的大前提是:视频基于Html5的方案。...但是随着ios设备的流行,flash已经不是万能药了,越来越多的视频网站提供多元的解决方案,而且偏向于html5:也就是说,通过检测agent是否支持html5来决定使用video还是flash。...当然针对flash和flv的方案,也有多种实现方法,笔者能够想到的有如下两种: 服务端根据agent的类型,输出不同的html,如果支持html5就输出video+mp4(avc)和webm(或者ogg...),否则输出flash相关的标签或脚本 使用html5shiv和html5-video是IE也能够支持video标签,并且使用Flash播放器来代替原生的video播放,参考 将object内嵌在video...http://diveintohtml5.info/video.html 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/168178.html原文链接:https:

    8.6K20

    行内、块行内块三者元素的区别

    1.行内元素: 特点: 与其他行内元素并排,不能设置宽高,默认的宽度就是文字的宽度。...行内元素有: 除了p之外,所有的文本级标签,都是行内元素。p是个文本级标签,但是是个块元素。 ... ......块元素:所有的容器标签,都是块元素,以及p标签。div , h系列 , li , dt ,dd。...注意: 段落元素(文字元素)内不能放块元素 例如,p标签里不能放div标签,h1中也不能放div ... ...... 3.行内块元素 特点: 和相邻的行内元素(包含行内块)在一行上,它们直接会有空白缝隙; 一行可以显示多个; 默认宽度就是内容的宽度; 高度、宽度、内外边距都可以自定义; 注意了:

    10210

    【CSS】CSS 总结 ② ( CSS 字体文本样式 - 大小 字体 粗细 斜体 颜色 对齐 | CSS 标签显示模式 - 块元素 行内元素 行内块元素 ) ★

    1、块元素 标签显示模式 : 指的是 标签显示的方式 , 标签类型有很多 , 不同的情景使用不同类型的标签 ; 块元素 : div 标签 独占一行显示 , 对应 块标签 ; 行内元素 : span...标签可以 在一行放置多个进行显示 , 对应 行内标签 ; 块元素 特点 : 独占一行 : 块元素 会 独占父容器 的一行 , 宽度默认充满父容器 ; 大小可控 : 标签 的 高度 , 宽度 , 内边距...是 其本身 的 宽度 ; 容器特性 : 行内元素 作为 容器 , 只能 存放 文本 或 行内元素 , 不能存放 块元素 ; 3、行内块元素 行内块元素 标签 是 特殊的标签 , 可以在 一行内显示多个...; 样式设置 : 行内块元素 可以 设置 宽度 , 高度 , 内边距 , 外边距 , 行高 等属性 ; 4、块元素 / 行内元素 / 行内块元素 相互转换 块元素 / 行内元素 / 行内块元素 相互转换...: 块元素 -> 行内元素 : 设置属性值 display: block; , 可以 将 行内元素 转换为 块元素 ; span { /* 行内元素 转换为 块元素

    1.9K10

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券