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

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

image.png 步骤1:问候一下div标签 首先,让我们一起认识一下div标签,这是一个极为常用的标签。所谓的标签,就是高度为0,宽度100%的标签,也就是说,它是独占一的!...image.png 原来如此,span标签里面有什么,宽度和高度会根据里面的内容自己撑起来,还真是皮包骨呢。还有,跟div标签不同的是,span标签不会独占一。...根据上面的步骤,我们知道div是独占一的,而span的宽度完全根据内容来决定,这个就是区分块元素和行内元素的试金石。现在我们引入一张图片: ?...image.png 我们要引入1.jpg,只需要在html中加入这一代码。 效果: ?...步骤4:行内标签标签的转换 首先,继续上一个问题,怎样让行内标签换行,最简单的办法:div不是标签吗?那直接在外面套一层div不就好了? <!

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

    【网页前端】HTML标签以及框架标签

    专栏介绍 【前端网页】 目前主要更新HTML,一起学习一起进步。...本期介绍 本期主要介绍HTML标签以及框架标签 文章目录 1.HTML基本语法(二)         1.1标签:span         1.2标签:div 2.自学扩展         2.1...框架标签 1.HTML基本语法(二)         1.1标签:span 标签,用于在效果中 一上定义一个,进行内容显示。...② Span 不会自动换行 适用于少量数据展示 示例: 效果:         1.2标签:div  标签,用于在效果中 定义一,默认占满一,进行内容的显示...1 默认占满一 2 会自动换行 适用于大量数据展示 示例: 效果: Div 和 span 的应用场景对比 2.自学扩展         2.1 框架标签

    90120

    HTML元素和元素

    元素:整行排列,不能改变大小(宽度和高度),宽度默认文字宽度,当元素排列过多时( 超过浏览器的宽度时自动强制换行 )。 元素:一个元素独占一,宽度默认浏览器的宽度,可以改变宽度和高度。...行内元素:属于元素,但又有元素的属性,横行排列但又可以设置宽度和高度。...组合文档中的行内元素 语气更强的强调的内容 定义下标文本 定义上标文本 多行的文本输入控件 打字机或者等宽的文本效果 定义变量 元素列表...定义预格式化的文本 标签定义 HTML 表格 标签表格主体(正文) 表格中的标准单元格 定义表格的页脚(脚注或表注) 定义表头单元格...原文地址《HTML元素和元素》

    3.2K20

    【CSS】标签显示模式 ① ( 标签显示模式 | 元素 )

    - 标签显示模式 : 指的是 标签显示的方式 , 标签类型有很多 , 不同的情景使用不同类型的标签 ; 元素 : div 标签 独占一显示 , 对应 标签 ; 行内元素 : span 标签可以...在一放置多个进行显示 , 对应 行内标签 ; 二、元素 ---- 1、元素简介 元素 可以 独占一显示 , 常见的 元素 标签 : 标题标签 : , , … ,... ; 段落标签 : ; 标签 : ; 列表标签 : , , ; 上述标签都会 独占一显示 ; 2、元素特点 元素 特点 : 独占一...: 元素 会 独占父容器 的一 , 宽度默认充满父容器 ; 大小可控 : 标签 的 高度 , 宽度 , 内边距 , 外边距 可以自定义设置 ; 默认宽度 : 元素 默认 宽度 是 父容器 的...DOCTYPE html> 元素 <base

    1.8K30

    HTML元素和行内元素

    常见的元素有~、、、、、等, 其中标签是最典型的元素。...元素的特点: (1)总是从新开始 (2)高度,高、外边距以及内边距都可以控制。 (3)宽度默认是容器的100% (4)可以容纳内联元素和其他元素。...(a特殊 a里面可以放元素 ) 注意: 只有文字才能组成段落,因此p里面不能放元素,同理还有这些标签h1,h2,h3,h4,h5,h6,dt,他们都是文字类标签,里面不能放其他元素。...a里面可以放元素 元素和行内元素区别 元素的特点: (1)总是从新开始 (2)高度,高、外边距以及内边距都可以控制。...行内元素的特点: (1)和相邻行内元素(行内)在一上,但是之间会有空白缝隙。 (2)默认宽度就是它本身内容的宽度。 (3)高度,高、外边距以及内边距都可以控制。

    3.4K60

    HTML 盒元素、盒及可替换元素特点

    HTML 盒元素、盒及可替换元素特点 一、常见盒元素 常见的盒元素有 span、strong、em、i、img、video、audio、a。...这些盒元素的特点如下: 盒子填充与宽度:盒子沿着内容方向填充,宽度由内容决定。 宽高设置:盒元素不可以直接设置宽高,只能设置高。...二、盒 定义为 display: inline-block; 的盒子。 特点包括: 显示方式:不独占一。 盒子模型尺寸:盒子模型尺寸都有效,可以设置宽高、高以及内外边距。...空格折叠:空白折叠发生在行盒内部或者盒之间。 三、可替换元素与非可替换元素 非可替换元素:大部分元素页面上显示的结果取决于元素的内容,如常见的文本标签等。...盒特性:绝大部分可替换元素均为盒。 盒子模型:可替换元素类似于盒,盒子模型中所有尺寸都有效,包括宽高。

    7110

    HTML中的内联元素与元素

    元素 元素(block element)生成一个元素框,(默认地)它会填充其父元素的内容,旁边不能有其他元素,它在元素框之前和之后生成了“分隔”符。...元素总是在新上开始并占据一整行,宽度和高度以及外边距和内边距都可以控制,宽度始终与浏览器宽度一样,与内容无关。元素可以容纳内联元素和其他元素。...内联元素与元素的转换 元素(block element)和内联元素(inline element)都是html规范中的概念。在加入了CSS控制以后,可以改变元素和内联元素之间的差异。...定义一个框架集form创建 HTML 表单h1定义最大的标题h2定义副标题h3定义标题h4定义标题h5定义标题h6定义最小的标题hr创建一条水平线legend元素为 fieldset 元素定义标题li标签定义列表项目...标签定义 HTML 表格tbody标签表格主体(正文)td表格中的标准单元格tfoot定义表格的页脚(脚注或表注)th定义表头单元格thead标签定义表格的表头tr定义表格中的 3.2 行内元素列表

    3K30

    HTMLHTML 标签 ③ ( 链接标签 | 注释标签 )

    文章目录 一、链接标签 二、注释标签 HTML 常用的标签有如下类型 : 排版标签 文本格式化标签 图像标签 链接标签 , 其中 链接涉及到 相对路径 与 绝对路径问题 ; 一、链接标签 ----...文件页面 , 如 index.html ; 首页 ; 空链接 : 如果没有确定链接目标 , 设置 # 值 , 该链接暂时是空链接 ; <a href=...没有任何效果 ; 点击链接 4 , 跳转到博客页面 ; 点击链接 5 , 原窗口保留 , 在新窗口显示博客页面 ; 二、注释标签 ---- 如果在 HTML 页面中进行 代码注释 ,...则可以使用 注释标签 ; 在 注释标签 中的内容 , 不显示在页面 中 ; 注释是给 程序员 看的 , 用于标注代码作用 ; 通常情况下 , 都在代码的上方一位置添加注释 ; 注释代码示例 : <!

    10.5K20

    【Java 进阶篇】HTML元素详解

    元素通常用于构建网页的结构,而内联元素则嵌套在元素内,用于添加文本和其他内容。本文将重点介绍HTML元素,包括其定义、常见元素和示例代码。 1. 什么是元素?...元素是HTML中的元素类型,它们通常用于创建网页的结构和布局。元素以新开始,占据其父元素(通常是一个元素)的整个可用宽度,因此会导致元素在页面上显示为一个独立的。...元素可以包含其他元素或内联元素。 2. 常见的HTML元素 2.1. 元素 元素是HTML中最常见的容器元素之一。...HTML元素的特点 HTML元素具有以下特点: 以新开始,占据整行的宽度。 可以包含其他元素和内联元素。 可以用于创建网页的结构和布局。...本文介绍了常见的HTML元素,包括其定义、示例代码以及特点。通过合理使用元素,您可以更好地组织和呈现网页内容,提升用户体验。希望本文对您理解HTML元素有所帮助。

    36440

    HTMLHTML 表格总结 ★★★ ( 表格标签 | 标签 | 单元格标签 | 表格标签属性 | 表头单元格标签 | 表格标题标签 | 合并单元格 )

    文章目录 一、表格标签组成 ( 表格标签 | 标签 | 单元格标签 ) 二、table 表格属性 ( border 属性 | align 属性 | width 属性 | height 属性 ) 三、...( 表格标签 | 标签 | 单元格标签 ) ---- HTML 表格 由 3 种标签 组成 : 表格 涉及 的标签都是 双标签 ; 表格标签 : 表格最 外围的标签 , 用于包裹整个表格 ; 其中...包含若干 tr 标签 ; 整个表格内容 标签 : 标签内是 一的内容 , 其中 包含若干 td 标签 ; 表格中一的内容 单元格标签 : 表格中一个单元格中的内容...-- 表格标签 --> 表格标题 <!

    3.1K10

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券