HTML—标签的分类,span和div标签,不同的标签之间类型转换

标签的分类:

块级标签:无论内容多少,会充满整个行。大小可自定义

                例:p,h1,ul,ol,hr 等

行级标签:自身的大小就是标签的大小,不会占一整行。大小不可调

                例:font,b,i,a 等

行级块标签:自身的大小就是标签的大小,不会占一整行。大小可自定义

                例:input,img 等

三种标签的演示:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p {
				width: 200px;
				height: 200px;
				background-color: red;
			}

			b {
				width: 200px;
				height: 200px;
				background-color: green;
			}

			img {
				width: 500px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<p>块级标签</p>

		<b>行级标签</b>

		<img src="day03/img/jd-head.png" />

	</body>
</html>

网页效果:

div标签和span标签的特点:

先来看一段代码的效果:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p {
				background-color: red;
			}

			div {
				background-color: green;
			}
		</style>
	</head>
	<body>
		<p>p标签</p>
		<p>p标签</p>

		<div>div标签</div>
		<div>div标签</div>

	</body>
</html>

网页效果:

div标签和span标签的特点,即为什么需要div标签和span标签

        div是一个块级标签,span是一个行级标签

        观察上图可以看到在两个p标签之间有一段间隙,而两个div标签之间没有。这是因为p标签作为段落标签有一些他自己的默认格式,而div标签没有。

        同理对于行级标签,如b标签你选中某一个词,但是却并不想对这个词进行加粗操作,就需要程序员手动的再调整字体格式。如果使用span标签不会对内容产生影响。

        综上所述:对于一般的标签或多或少都有一些他自己默认的格式,而div标签是一个纯净的块级标签,span标签是一个纯净的行级标签。编程人员可以使用div标签和span标签对指定内容进行修饰,而不需要先去删除原来的格式。

行级标签和块级标签的互相转换:

关键字:display

值:

        块转行:inline

        行转块:block

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			span {
				display: block;/* 将行级标签修改为块级标签 */
				background-color: red;
			}

			div {
				display: inline;/* 将块级标签修改为行级标签 */
				background-color: green;
			}
		</style>
	</head>
	<body>
		<span>span标签</span>
		<span>span标签</span>

		<div>div标签</div>
		<div>div标签</div>

	</body>
</html>

网页效果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/460143.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

人工智能程序使用的编程语言

用C语言可以写人工智能程序吗&#xff1f; 可以用C语言编写具有人工智能功能的程序&#xff0c;但是较为复杂。C语言是一种通用的编程语言&#xff0c;它在执行速度和资源控制方面表现出色&#xff0c;这使得它适合于需要高性能处理的人工智能应用&#xff0c;如游戏AI&#xf…

三种方式使用纯 CSS 实现星级评分

本文介绍三种使用纯 CSS 实现星级评分的方式。每种都值得细品一番~ 五角星取自 Element Plus 的 svg 资源 <svg xmlns"http://www.w3.org/2000/svg" viewBox"0 0 1024 1024" style""><pathfill"currentColor"d"M283.84 …

MySQL大小写敏感、MySQL设置字段大小写敏感

文章目录 一、MySQL大小写敏感规则二、设置数据库及表名大小写敏感2.1、查询库名及表名是否大小写敏感2.2、修改库名及表名大小写敏感 三、MySQL列名大小写不敏感四、lower_case_table_name与校对规则4.1、验证校对规则影响大小写敏感4.1、验证校对规则影响排序 五、设置字段内…

Django之图形验证码

Django之图形验证码 目录 Django之图形验证码【1】静态图片【2】视图层绑定静态文件【3】PIL生成图片(固定背景)【4】将图片存储在内存【5】生成文本信息【6】实现图片刷新 【1】静态图片 最基础的生成图片就是获取静态文件 <div style"margin-left: 10px;">…

idea+vim+pycharm的块选择快捷键

平时开发的时候&#xff0c;有的时候我们想用矩形框住代码&#xff0c;或者想在某列上插入相同字符 例如下图所示&#xff0c;我想在22-24行的前面插入0000 1. Idea的快捷键&#xff1a;option 鼠标 2. Pycharm的快捷键&#xff1a;shift option 鼠标 2. Vim 块选择 v/V/c…

Python读取Excel工作表数据写入CSV、XML、文本

Excel工作簿是常用的表格格式&#xff0c;许多数据呈现、数据分析和数据汇报都是以Excel工作表的形式进行。然而&#xff0c;在实际的数据管理、分析或自动化流程构建过程中&#xff0c;我们常常需要将这些Excel中的数据迁移至更其他数据系统&#xff0c;或者以文本形式存储以便…

AI日报:欧盟人工智能法案通过后行业面临合规障碍

文章目录 人工智能新规对web爬网的影响对英国的影响。 人工智能新规 立法者已经通过了欧盟人工智能法案。企业现在必须确保其人工智能应用程序符合规则。 全面的新规定对可能影响公民权利的人工智能系统实施制裁&#xff0c;并有可能彻底禁止某些系统。 违反规定的公司可能面…

4、鸿蒙学习-@ohos.promptAction (弹窗)

创建并显示文本提示框、对话框和操作菜单。 说明 本模块首批接口从API version 9开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。 该模块不支持在UIAbility的文件声明处使用&#xff0c;即不能在UIAbility的生命周期中调用&#xff0c;需要在创建…

音频占用磁盘空间太多 需要把mp3音频转aac音频缩小占用空间 应该怎么操作?

一&#xff1a;什么是aac格式&#xff1f; aac是一种音频压缩格式&#xff0c;它是MPEG-2标准下的一种音频压缩方式&#xff0c;也可以作为HE-AAC&#xff0c;AAC或AAC-LC格式使用&#xff0c;是音频压缩领域中的一种重要格式。与MP3的比较&#xff0c;aac在保证音质的同时可以…

C++类与对象二

目录 一、类的嵌套 二、对象引用私有数据成员 通过公有函数为私有成员赋值 利用指针访问私有数据成员 利用函数访问私有数据成员 利用引用访问私有数据成员 三、成员函数重载 四、this指针 一、类的嵌套 #include <iostream> using namespace std;class CC1 { p…

Tomcat会话保持

文章目录 Tomcat会话保持1、代理服务器配置2、web服务器配置3、会话保持3.1 方法一&#xff1a;修改代理服务器配置&#xff08;nginx&#xff09;3.2 方法二&#xff1a;修改web服务器配置&#xff08;tomcat&#xff09;访问官方文档&#xff0c;查看需要添加的配置文件修改t…

C++STL栈与队列的实现

我最近开了几个专栏&#xff0c;诚信互三&#xff01; > |||《算法专栏》&#xff1a;&#xff1a;刷题教程来自网站《代码随想录》。||| > |||《C专栏》&#xff1a;&#xff1a;记录我学习C的经历&#xff0c;看完你一定会有收获。||| > |||《Linux专栏》&#xff1…

【Streamlit学习笔记】实现包含多个sheet的excel文件下载

1、什么是Streamlit Streamlit是一个免费的开源框架&#xff0c;用于快速构建和共享漂亮的机器学习和数据科学Web应用程序&#xff0c;官网链接 Streamlit Streamlit API链接 API reference 实际项目中遇到的问题&#xff1a;包含多个sheet的excel文件下载&#xff0c;下面将给…

STM32初识2

复位和时钟控制&#xff08;RCC&#xff1a;reset clock control&#xff09; 系统复位 当发生以下任一事件时&#xff0c;产生一个系统复位&#xff1a; 1. NRST 引脚上的低电平 ( 外部复位 ) 2. 窗口看门狗计数终止 (WWDG 复位 ) 3. 独立看门狗计数终止 (IWDG 复位 ) …

【JAVA基础】API:Math、System、runtime、object、BigInteger 、BigDecima、爬虫、分组、时间类、包装类

1.Math 2.System public class Main {public static void main(String[] args) {int[] arr {1, 2, 3, 4, 5, 6, 7, 8};int[] arr1 new int[8];System.arraycopy(arr,0,arr1,1,5); // 从1970.1.1开始到现在的毫秒形式long l1 System.currentTimeMillis();//171046475…

HandyControl PropertyGrid及自定义编辑器

前提条件 项目引入对应HandyControl对应版本包。 使用案例 UI部分 <Window xmlns:hc"https://handyorg.github.io/handycontrol"><hc:TabControl><hc:TabItem Header"默认样式"><hc:PropertyGrid Width"380" SelectedO…

huawei services HK华为云服务

huaweiserviceshk是一种云计算服务&#xff0c;为华为云服务用户提供了多种服务&#xff0c;包括云服务器、数据库、存储、网络等&#xff0c;用户可以根据自己的需求选择不同的服务并支付相应的费用 如何付费呢&#xff0c;这里可以使用441112&#xff0c;点击获取 卡片信息在…

swiftUI中的可变属性和封装

swiftUI的可变属性 关于swift中的属性&#xff0c;声明常量使用let &#xff0c; 声明变量使用var 如果需要在swiftUI中更改视图变化那么就需要在 var前面加上state 。 通过挂载到state列表 &#xff0c;从而让xcode找到对应的改变的值 例子&#xff1a; import SwiftUIstruc…

前端组件化:构建高效应用的艺术

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

点的基本操作

点的基本操作 要求 提供空间点数据文本文件&#xff0c;包含ID、name、X、Y四个字段信息&#xff0c; 1&#xff09;读取数据&#xff0c;并且在窗口中显示点的具体位置&#xff0c;用实心圆绘制。 2&#xff09;鼠标任意点击三个点&#xff0c;将点连线&#xff0c;用黑色笔…
最新文章