Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >第二篇 HTML元素与标签的区别

第二篇 HTML元素与标签的区别

原创
作者头像
侠客冷展堂
发布于 2021-12-17 09:41:59
发布于 2021-12-17 09:41:59
52900
代码可运行
举报
运行总次数:0
代码可运行

一、元素与标签的区别

元素elment:由开始标签Opening tag+内容Content+结束标签Closing tag组成;

代码语言:txt
AI代码解释
复制
<p>我很可爱</p>
我是元素
我是元素

标签:<p></p>,他是成对出现由符号“<”+标签名+符号“>”组成。从使用的意义来说,两者可以等同,因为没有内容的标签没有实质

性的意义。

二、HTML元素分类,什么是块级元素?什么是行内元素?

(1)块级元素block-level element:HTML中在原有的元素中,再添加该元素时,会不会另起一行显示;如

代码语言:txt
AI代码解释
复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML基础知识</title>
    </head>
    <body>
        <p style="background-color: red;">我是段落1
            <p style="background-color: black;color:#FFF">我是段落2</p>
        </p>
    </body>
</html>

效果

块级元素
块级元素

(2)行内元素inline elementHTML中在原有的元素中,再添加该元素时,与原来的元素在一行显示;

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML基础知识</title>
    </head>
    <body>
        <p style="background-color: red;">我是段落1
            <a style="background-color: black;color:#FFF">我是元素2</a>
        </p>
    </body>
</html>

效果

行内元
行内元

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Day4:html和css
行高可以让一行文本在盒子中垂直居中对齐,文字的行高等于盒子的高度,行高-上距离-内容高度-下距离.
达达前端
2019/07/03
4.1K0
Day3:html和css
样式的显示效果是跟html元素中的类名先后顺序无关,而是跟css样式的书写上下顺序有关.
达达前端
2019/07/03
1.6K0
Day3:html和css
【Web前端】CSS”包装盒“--盒模型
CSS 盒模型(Box Model)在 CSS 中,所有的元素都被一个个的“盒子”包围着,理解这些“盒子”的基本原理,是我们使用 CSS 实现准确布局、处理元素排列的关键。
一条晒干的咸鱼
2024/11/19
1900
【Web前端】CSS”包装盒“--盒模型
【Web前端】常规流布局(补充)
CSS(层叠样式表)作为现代网页设计的基础之一,其布局功能一直是开发者关注的重点。了解CSS常规流布局是掌握网页布局的第一步。
一条晒干的咸鱼
2024/11/19
1200
【Web前端】常规流布局(补充)
【CSS】标签显示模式 ① ( 标签显示模式 | 块级元素 )
标签显示模式 : 指的是 标签显示的方式 , 标签类型有很多 , 不同的情景使用不同类型的标签 ;
韩曙亮
2023/03/30
2K0
【CSS】标签显示模式 ① ( 标签显示模式 | 块级元素 )
css中元素的变化
核心在于:块级标签可以嵌套任何的标签,文本级别的只能嵌套图片超链接 文字。 块级占一行,文本级不会。
贵哥的编程之路
2020/10/28
8190
HTML 面试要点:行内元素和块级元素
一个行内元素 (opens new window)只占据它对应标签的边框所包含的空间。
Cellinlab
2023/05/17
7320
CSS-02
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。
用户9615083
2022/12/25
2.1K0
CSS-02
【Web前端】HTML 列表和容器元素
HTML 提供了多种方式来组织和展示内容,其中包括无序列表、有序列表、分区元素 ​​<div>​​ 和内联元素 ​​<span>​​、以及如何使用 ​​<div>​​​ 进行布局和表格布局。
一条晒干的咸鱼
2024/11/19
1670
【Web前端】HTML 列表和容器元素
【CSS】标签显示模式 ③ ( 标签显示模式转换 | 行内元素转换为块级元素 | 块级元素转换为行内元素 | 块级元素、行内元素转换为行内块元素 )
在 CSS 样式中设置属性值 display: block; , 可以将 行内元素 转换为 块级元素 ;
韩曙亮
2023/03/30
1.6K0
【CSS】标签显示模式 ③ ( 标签显示模式转换 | 行内元素转换为块级元素 | 块级元素转换为行内元素 | 块级元素、行内元素转换为行内块元素 )
第2天:HTML常用标签
一、超链接a href:www.baidu.com(跳转页面);id名(锚点跳到相应div位置);01.rar(压缩包) target:_blank(新窗口打开);_self(当前窗口打开) 二、文件路径 绝对路径: (1)线上:线上绝对路径 (2)线下:完整路径
半指温柔乐
2018/09/11
1.2K0
第2天:HTML常用标签
【CSS】:圆角矩形与元素的显示模式
在我们使用电脑时,大多数的窗口都是圆角的。个人觉得圆角确实比直角耐看。 为了把网页上的窗口也做成圆角,我们可以通过border-radius使得边框带有圆角效果。 基本语法:
Yui_
2025/02/03
1830
【CSS】:圆角矩形与元素的显示模式
CSS进阶02-盒模型进阶
(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)
love丁酥酥
2018/08/27
5440
CSS进阶02-盒模型进阶
【CSS】标签显示模式 ② ( 行内元素 | 行内块元素 )
为 span 标签设置的 宽高 都是无效的 , 设置的 200 x 200 像素的宽高 , 显然没有成功 , 行内元素的宽高只取决于 元素 本身的宽高 ;
韩曙亮
2023/03/30
1.7K0
【CSS】标签显示模式 ② ( 行内元素 | 行内块元素 )
前端学习笔记之CSS属性设置 CSS属性设置
一 字体属性 1、font-weight:文字粗细 取值 描述 normal 默认值,标准粗细 bord 粗体 border 更粗 lighter 更细 100~900 设置具体粗细,400等同于normal,而700等同于bold inherit 继承父元素字体的粗细值 2、font-style:文字风格 normal 正常,默认就是正常的 italic 倾斜  3、font-size:文字大小 fs:一般是12px或13px或14px 注意: 1、通过font-size设置文字大小一定要带单位
Jetpropelledsnake21
2019/02/15
6.1K0
HTML基础-块级元素与内联元素
在网页设计与开发中,HTML作为构建内容的基础,其元素根据显示特性的不同被分为两大类:块级元素(Block-level Elements)和内联元素(Inline Elements)。理解这两者的区别及正确使用它们,对于构建结构清晰、布局合理的网页至关重要。
Jimaks
2024/06/07
3220
HTML基础-块级元素与内联元素
HTML及CSS常用知识点复习
(1)表单容器:<form action="点击提交后触发的服务器地址"></form>
申小兮
2023/04/20
1.1K0
HTML及CSS常用知识点复习
css基础知识点整理
css基础知识点整理 代码规范 放置规范 格式规范 代码规范 示例演示 基本选择器 元素选择器 类选择器 ID选择器 基本选择器的组合方式 层级关系 边框属性 border width height 代码演示: backgroud-color 布局 float---浮动属性 转换 dispaly 字体 font-size 字体的大小 color 字体的颜色 css中的盒子模型 什么是盒子模型 边框 内边距 padding 外边距---margin css和html的结合方式 行内样式 <
大忽悠爱学习
2021/11/15
3840
【一起来烧脑】一步学会HTML体系
HTML是用来描述网页的一种语言 叫超文本标记语言 HTML不是一种编程语言,而是一种标记语言 一套标记标签
达达前端
2019/07/19
1.3K0
【一起来烧脑】一步学会HTML体系
前端秘法基础式(CSS)(第二卷)
#ff0000表示红色,ff转成十进制就是255,一共有六位,每两位对应三原色中的一个,顺序是红绿蓝,每个颜色最多取到255,可以简写成#f00
一枕眠秋雨
2024/03/11
1060
前端秘法基础式(CSS)(第二卷)
相关推荐
Day4:html和css
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验