HTML——38.Span标签和字符实体

news2025/1/4 1:44:55
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>span标签和字符实体</title>
		<style type="text/css">
			h1{
				text-align: center;
			}
			p{
				text-indent: 2em;
			}
			span{
				color: red;
			}
		</style>
	</head>
	<body>
		<!--span标签:
			1.没有任何样式(纯洁无暇,一点自带的标签功能都没有,就是因为span标签没有功能,才方便给内容原汁原味的添加样式),是为了给文本增加额外的结构
			2.使用css给span元素中的内容添加丰富的样式
			3.span标签是使用最多的文本标签-->
			
		<!--字符实体:(用的较少)
			html中预留字符必须替换成字符实体,才能被浏览器正常识别
			常见的字符实体:
				小于号:&lt; 
				大于号:&gt;
				空格:&nbsp;
			-->
			
			&lt;h1&gt;  标签&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;是标题标签
			
		
	<h1>桃花源记</h1>
	<p>
		<b>晋太元中,武陵人捕鱼为业。</b>溪行,忘路之远近。忽逢桃花林,夹岸数百步,中无杂树,芳草鲜美,落英缤纷,渔人甚异之,复前行,欲穷其林。
	</p>

<p>
	<span>林尽水源,便得一山,山有小口,仿佛若有光。</span>便舍船,从口入。初极狭,才通人。复行数十步,豁然开朗。土地平旷,屋舍俨然,有良田美池桑竹之属。阡陌交通,鸡犬相闻。其中往来种作,男女衣着,悉如外人。黄发垂髫,并怡然自乐。</p>

<p>见渔人,乃大惊,问所从来。具答之。便要还家,设酒杀鸡作食。村中闻有此人,咸来问讯。自云先世避秦时乱,率妻子邑人来此绝境,不复出焉,遂与外人间隔。问今是何世,乃不知有汉,无论魏晋。此人一一为具言所闻,皆叹惋。余人各复延至其家,皆出酒食。停数日,辞去。此中人语云:“不足为外人道也。”</p>

<p>既出,得其船,便扶向路,处处志之。及郡下,诣太守,说如此。太守即遣人随其往,寻向所志,遂迷,不复得路。</p>

<p>南阳刘子骥,高尚士也,闻之,欣然规往。未果,寻病终,后遂无问津者。</p>
		
	</body>
</html>

在这里插入图片描述

字符实体:(用的较少)
html中预留字符必须替换成字符实体,才能被浏览器正常识别
常见的字符实体:
小于号:<
大于号:>
空格: 
在网页中不会显示"<" “>” ,如果写了就会被认为是标签,那如何能在网页上看到"<" “>” 符号呢, 用
& lt; h1 & gt; 就可以在屏幕上表现出
"< h1 >"了

在Html代码中多个空格,会在屏幕前显示一个,若正需要屏幕中显示的内容需要多个空格就用  

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

DAC8562的详细介绍

DAC8562的详细介绍 DAC8562是一款由德州仪器(Texas Instruments, TI)生产的高精度、低功耗的数模转换器(DAC),专为工业自动化、仪器仪表、医疗设备及消费电子等应用设计。以下是关于DAC8562芯片的详细介绍: DAC8562芯片的SPI接口配置主要包括以下几个方面:

计算机找不到xinput1_3.dll无法执行怎么办?电脑缺失xinput1_3.dll文件怎么修复?

当计算机提示找不到xinput1_3.dll文件&#xff0c;导致某些程序或游戏无法执行时&#xff0c;可以采取以下步骤来修复这个问题&#xff1a; 一、了解xinput1_3.dll文件 xinput1_3.dll是Microsoft DirectX for Windows的控制模块&#xff0c;它包含了一组函数和数据结构&#…

如何在谷歌浏览器中设置屏幕保护

在日常使用电脑的过程中&#xff0c;屏幕保护功能是一项非常实用的功能&#xff0c;它可以在我们暂时离开时保护隐私并节省能源。对于谷歌浏览器用户来说&#xff0c;了解如何设置和调整屏幕保护程序同样重要。本文将详细介绍如何在谷歌浏览器中设置屏幕保护&#xff0c;确保您…

mybatis 和 mybatisPlus 兼容性问题

项目采用的是 mybatis&#xff0c; 后续引入了 mybatisPlus&#xff0c;用 mybatisX 创建的四个类一直报错&#xff0c;提示找不到符号&#xff0c;意识到 mybatis 和 mybatisPlus 的兼容性问题&#xff0c;通过修改配置 两者的配置如下 #配置mybatis配置 mybatis:type-aliase…

WPF中数据绑定模式解析

背景&#xff1a;复习一下 -- 写的代码界面大概就是这样&#xff0c;TextBox和Slider空间&#xff0c;TextBox的Text属性绑定上Slider控件的Value。 Mode中的 1.OneTiem&#xff0c;Slider对TextBox中的数值只影响一次 2.OneWay&#xff0c;Slider对TextBox数值单向影响 3.One…

树莓派OpenWrt下怎么驱动带USB的摄像头

环境&#xff1a;使用VirtualBox虚拟机下安装的ubuntu22.04 LTS操作系统 安装编译需要的插件&#xff1a; sudo apt install -y ack antlr3 asciidoc autoconf automake autopoint binutils bison build-essential \ bzip2 ccache cmake cpio curl device-tree-compiler fas…

百度热力图数据获取,原理,处理及论文应用

目录 0、示例数据1、百度热力图数据日期如何选择1.1、看日历1.2、看天气 2、百度热力图几天够研究&#xff1f;部分文章统计3、数据原理3.1.1 定位都包含哪些数据&#xff1f;3.1.2 ** 这个比较重要&#xff0c;后面还会再次出现。核密度的值怎么理解&#xff1f;**3.1.3 Csv-&…

如何确保Kafka集群的高可用?

大家好&#xff0c;我是锋哥。今天分享关于【如何确保Kafka集群的高可用&#xff1f;】面试题。希望对大家有帮助&#xff1b; 如何确保Kafka集群的高可用&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 要确保 Kafka 集群 的高可用性&#xff0c;需要…

【HarmonyOS之旅】ArkTS语法(二) -> 动态构建UI元素

目录 1 -> Builder 2 -> BuilderParam8 2.1 -> 引入动机 2.2 -> 参数初始化组件 2.3 -> 尾随闭包初始化组件 3 -> Styles 4 -> Extend 5 -> CustomDialog 1 -> Builder 可通过Builder装饰器进行描述&#xff0c;该装饰器可以修饰一个函数&…

理解生成协同促进?华为诺亚提出ILLUME,15M数据实现多模态理解生成一体化

多模态理解与生成一体化模型&#xff0c;致力于将视觉理解与生成能力融入同一框架&#xff0c;不仅推动了任务协同与泛化能力的突破&#xff0c;更重要的是&#xff0c;它代表着对类人智能&#xff08;AGI&#xff09;的一种深层探索。通过在单一模型中统一理解与生成&#xff…

用再生龙备份和还原操作系统(二)

续上篇&#xff1a;用再生龙备份和还原操作系统&#xff08;一&#xff09; 二&#xff0c;用再生龙制作硬盘备份文件&#xff08;也叫镜像文件&#xff09; 将需要备份的硬盘、做好的再生龙工具盘安装到同一台电脑上。开机&#xff0c;进入BIOS设置菜单。选择从工具盘启动。…

重新整理机器学习和神经网络框架

本篇重新梳理了人工智能&#xff08;AI&#xff09;、机器学习&#xff08;ML&#xff09;、神经网络&#xff08;NN&#xff09;和深度学习&#xff08;DL&#xff09;之间存在一定的包含关系&#xff0c;以下是它们的关系及各自内容,以及人工智能领域中深度学习分支对比整理。…

Windows安装了pnpm后无法在Vscode中使用

Windows安装了pnpm后无法在Vscode中使用 解决方法&#xff1a; 以管理员身份打开 PowerShell 并执行以下命令后输入Y回车即可。 Set-ExecutionPolicy RemoteSigned -Scope CurrentUser之后就可以正常使用了

django StreamingHttpResponse fetchEventSource实现前后端流试返回数据并接收数据的完整详细过程

django后端环境介绍&#xff1a; Python 3.10.14 pip install django-cors-headers4.4.0 Django5.0.6 django-cors-headers4.4.0 djangorestframework3.15.2 -i https://mirrors.tuna.tsinghua.edu.cn/pypi/web/simple 总环境如下&#xff1a; Package Version -…

如何在 Ubuntu 22.04 上安装 Webmin 教程

简介 在本教程中&#xff0c;我们将解释如何在 Ubuntu 22.04 服务器上安装 Webmin。 Webmin 是一个功能强大的基于 Web 的控制面板&#xff0c;它允许你通过一个简单的 Web 界面管理服务器的各个方面&#xff0c;例如用户帐户、DNS、防火墙、数据库等等。本指南将引导你完成在…

【一起python】银行管理系统

文章目录 &#x1f4dd;计算机基础概念&#x1f320; 导入模块&#x1f320;定义input_card_info函数&#x1f320; 定义check_password函数&#x1f320;初始化用户字典和欢迎信息&#x1f309; 主循环&#x1f309;开户操作&#x1f309;查询操作&#x1f309;取款操作&#…

【D3.js in Action 3 精译_047】5.2:图形的堆叠(一)—— 图解 D3 中的堆叠布局生成器

当前内容所在位置&#xff1a; 第五章 饼图布局与堆叠布局 ✔️ 5.1 饼图和环形图的创建 5.1.1 准备阶段&#xff08;一&#xff09;5.1.2 饼图布局生成器&#xff08;二&#xff09;5.1.3 圆弧的绘制&#xff08;三&#xff09;5.1.4 数据标签的添加&#xff08;四&#xff09…

自建私有云相册:Docker一键部署Immich,照片视频备份利器

自建私有云相册&#xff1a;Docker一键部署Immich&#xff0c;照片视频备份利器 前言 随着人们手机、PC、平板等电子产品多样&#xff0c;我们拍摄和保存的照片和视频数量也在不断增加。如何高效地管理和备份这些珍贵的记忆成为了一个重要的问题。 传统的云备份虽然方便&…

[微服务] - MQ高级

在昨天的练习作业中&#xff0c;我们改造了余额支付功能&#xff0c;在支付成功后利用RabbitMQ通知交易服务&#xff0c;更新业务订单状态为已支付。 但是大家思考一下&#xff0c;如果这里MQ通知失败&#xff0c;支付服务中支付流水显示支付成功&#xff0c;而交易服务中的订单…

【Unity3D】A*寻路(2D究极简单版)

运行后点击透明格子empty即执行从(0,0)起点到点击为止终点&#xff08;测试是(5,5)&#xff09;如下图 UICamera深度要比MainCamera大&#xff0c;Clear Flags:Depth only&#xff0c;正交视野 MainCamera保持原样&#xff1b;注意Line绘线物体的位置大小旋转信息&#xff0c;不…