QD1-P8 HTML 格式化标签(font、pre、b、strong、i、u、del、s、sub、sup)

news2024/11/25 16:46:18

本节学习:HTML 格式化标签。

本节视频

www.bilibili.com/video/BV1n64y1U7oj?p=8

一、font 标签

  • 用途:定义文本的字体大小、颜色和 face(字体类型)。

  • 示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>P8-格式化标签</title>
	</head>
	<body>
		示例文字<br />
		<font color="red" size=5"" face="仿宋">示例文字</font><br />
		<font color="red" size=5"" face="楷体">示例文字</font>
	</body>
</html>

渲染效果

Clip_2024-10-09_15-17-29

二、pre 标签

  • 用途:HTML 代码中的文本渲染到浏览器时,默认忽略换行,默认将多个空格视为一个空格。在 HTML 中需使用标签确定文本格式,例如 pre 标签,定义预格式化文本,渲染时将会:

    • 保留文本中的空格和换行
    • 并且使用等宽字体
  • 示例

pre 标签中的文本会保持输出的格式展现在浏览器中

Clip_2024-10-09_15-23-29

三、粗体

  • b 标签和 strong 标签都有加粗效果
示例文字1

<b>示例文字2</b>

<strong>示例文字3</strong>

渲染​​

Clip_2024-10-09_15-34-45

b 标签的本意就是加粗,strong 标签的本意是突出显示。

三、斜体

斜体使用 i 标签,示例

斜体:<i>斜体</i>

渲染

​​​Clip_2024-10-09_15-48-06

四、下划线

下划线使用 u 标签,示例

下划线:<u>下划线</u>

渲染

Clip_2024-10-09_15-50-10

五、中划线(删除线)

中划线使用 s 标签或者 del 标签,示例

中划线:<del>中划线</del>

渲染

Clip_2024-10-09_15-51-40

六、上标

上标使用 sup 标签,示例

上标:2<sup>10

渲染

Clip_2024-10-09_15-52-55

七、下标

下标使用 sub 标签,示例

下标:H<sub>2</sub>O

渲染

Clip_2024-10-09_15-53-56

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

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

相关文章

Tkinter:为什么多个Frame相互覆盖?

在 Tkinter 中&#xff0c;Frame 是一个容器部件&#xff0c;用于组织和管理布局。如果多个 Frame 出现在同一个父容器中并且看起来相互覆盖&#xff0c;通常与布局管理器的使用方式或控件的创建顺序有关。 以下是几个常见的原因和解决方案&#xff0c;帮助你了解为什么多个 F…

生产报工信息化全流程大讲解

在企业的生产管理中&#xff0c;生产报工是一个关键环节&#xff0c;但传统的生产报工方式存在诸多痛点&#xff0c;制约了企业的发展。随着数字化技术的发展&#xff0c;多个平台为企业提供了有效的解决方案。基于生产报工信息化方案报告》白皮书&#xff0c;本文深入探讨生产…

三菱FX3U PLC绝对定位- DRVA指令

指令格式 相关软元件一览 功能和动作 这是采用绝对驱动的单速定位指令。采用从原点(0点)开始的距离指定方式&#xff0c; 也被称为绝对驱动方式。 1、在指令执行过程中&#xff0c;即使改变操作数的内容&#xff0c;也不反映到当前的运行中。 在下次的指令驱动时才有效…

客户服务的未来趋势:智能化与人性化的融合

在当今这个日新月异的数字时代&#xff0c;企业的竞争已不再局限于产品或服务的本身&#xff0c;而是延伸到了客户体验的每一个细微之处。数字化转型作为推动这一变革的重要力量&#xff0c;正深刻改变着客户服务的面貌&#xff0c;使之变得更加智能、便捷且充满人性化。随着人…

最长回文子串-双下标动态规划

题目来源&#xff1a;Leetcode 5.最长回文子串 DP定义&#xff1a; 容易想到&#xff0c;用一个二维数字dp[i][j]来表示s[i:j]是否是回文串&#xff0c;如s“daba”。dp[1][3]1表示"aba"为回文串&#xff1b; 递归条件 想要判断字符串"aba"是否为回文…

MySQL--事务(详解)

目录 一、前言二、本文章目标三、什么是事务&#xff1f;四、事务的ACID特性五、为什么要使用事务六、如何使用事务6.1 查看支持使用事务的引擎6.2语法6.3 开启⼀个事务&#xff0c;执行更新后回滚6.4 开启一个事务更新后提交6.5 保存点6.6 自动/手动提交事务 七、事务的隔离性…

X86、ARM架构镜像

1. 简介 ARM 镜像和 x86 镜像是为不同处理器架构设计的软件镜像。ARM&#xff08;Advanced RISC Machine&#xff09;架构和 x86 架构是两种主流的处理器指令集架构&#xff0c;它们在设计和性能特点上有所不同。以下是 ARM 镜像和 x86 镜像的一些主要区别&#xff1a; 处理器架…

LangGraph入门(一)为什么要用LangGraph

阅读langgraph文档后编写&#xff0c;原文链接 https://langchain-ai.github.io/langgraph/concepts/high_level/ agent介绍 大语音模型LLMs是非常强大的&#xff0c;特别是LLMs与外部API或者检索数据库结合时&#xff0c;将使得的大模型如虎添翼。所以&#xff0c;在调用LLM之…

xss-labs靶场第六关测试报告

目录 一、测试环境 1、系统环境 2、使用工具/软件 二、测试目的 三、操作过程 1、注入点寻找 2、使用hackbar进行payload测试 3、绕过结果 四、源代码分析 五、结论 一、测试环境 1、系统环境 渗透机&#xff1a;本机(127.0.0.1) 靶 机&#xff1a;本机(127.0.0.…

使用通义千问模拟ChatGPT-o1进行思考,并以类似于ChatGPT-o1的形式输出

prompt 你是ChatGPT O1&#xff0c;旨在通过第一性原理思维和基于证据的推理来解决用户问题。你的目标是提供清晰、循序渐进的解决方案、基础概念&#xff0c;并从头开始构建答案。 ### 指导原则&#xff1a; 以下是为大模型采用这种方法而设计的系统提示&#xff1a; 1. 理解…

LeetCode | 69.x的平方根

这道题很适合用二分来解决&#xff0c;算是二门入门的一个练手题吧思想就是首先设置两个指针&#xff0c;一个是0&#xff0c;一个是x&#xff0c;相当于在数轴上划定一个区域 [ 0 , x ]然后计算数轴中间值和我们想要找的值的大小关系&#xff0c;因为数轴是有序的&#xff0c;…

汉诺塔问题递归与非递归实现

汉诺塔问题描述 问题&#xff1a;有三根柱子&#xff08;A、B、C&#xff09;和若干个不同大小的盘子&#xff0c;最初所有盘子都在柱子 A 上&#xff0c;按大小顺序从上到下排列。目标是将所有盘子移动到柱子 C 上&#xff0c;遵循以下规则&#xff1a; 每次只能移动一个盘子…

Leetcode 在排序数组中查找元素的第一个和最后一个位置

这段代码的目的是在一个有序的数组中查找目标元素的第一个和最后一个位置。如果目标元素不存在&#xff0c;返回 [-1, -1]。算法要求时间复杂度为 O(log n)&#xff0c;所以使用了二分查找的思想。 主要思路&#xff1a; 使用两次二分查找&#xff1a; 第一次二分查找用于找到…

《OpenCV计算机视觉》—— 人脸识别

识别图片如下&#xff1a; 完整代码&#xff1a; import cv2image cv2.imread(face.png) gray cv2.cvtColor(image, cv2.COLOR_BGR2GRAY) """ 加载分类器 """ faceCascade cv2.CascadeClassifier(haarcascade_frontalface_default.xml) &…

UE5 使用Animation Budget Allocator优化角色动画性能

Animation Budget Allocator是UE内置插件&#xff0c;通过锁定动画系统所占CPU的预算&#xff0c;在到达预算计算量时对动画进行限制与优化。 开启Animation Budget Allocator需要让蒙皮Mesh使用特定的组件&#xff0c;并进行一些编辑器设置即可开启。 1.开启Animation Budget…

浏览器指纹原理及技术实现探索

文章目录 [TOC](文章目录) 前言一、什么是浏览器指纹&#xff1f;二、浏览器指纹的作用三、 浏览器指纹如何保证唯一性四、浏览器指纹的隐私问题五、如何应对浏览器指纹&#xff1f;六、目前常用的技术方案七、技术实现探索1、简易方式2、fingerprintjs2方式 八、总结 前言 在…

国家药包材标准数据库在线查询方法<实用篇>

从业于医药相关的包材行业这么多年&#xff0c;对于许多医药行业的生产企业、药品检验机构、药品注册申请人以及医疗机构的朋友而言&#xff0c;查询国家药包材标准是他们日常工作的一部分&#xff0c;相对容易。然而&#xff0c;对于那些刚进入这个行业的新手或者普通大众来说…

【测试】自动化——常用函数

元素的定位 查找元素&#xff1a;find_element(方式&#xff0c;“元素”)&#xff0c;表示查找一个元素&#xff1b; find_element(方式&#xff0c;“元素”)&#xff0c;表示查找多个元素。 ###使用查找多个元素 ChromeInsChromeDriverManager().install() driverwebdriv…

uniapp学习(005-2 详解Part.2)

零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战&#xff0c;开发打包微信小程序、抖音小程序、H5、安卓APP客户端等 总时长 23:40:00 共116P 此文章包含第41p-第p51的内容 文章目录 mainifest.json文件配置获取微信小程序appid注册微信小程序微信小程序控制台图形界…

Linux 命令:每日一学,文件查找之find命令实践

[ 知识是人生的灯塔&#xff0c;只有不断学习&#xff0c;才能照亮前行的道路 ] 0x00 前言简述 描述&#xff1a;前面我们一些学习了Linux文件内容查看、分隔列、排序、统计等命令&#xff0c;相信认真学习实践过的看友都已经初步掌握了吧&#xff0c;今天我们继续学习下Linux中…