当前位置： 首页 > news >正文

七、HTML 文本格式化

news 2025/8/26 6:48:00

一、HTML 文本格式化

加粗文本
斜体文本
电脑自动输出
这是 下标 和 上标

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML文本格式化</title>
</head><body><b>加粗文本</b><br><br><i>斜体文本</i><br><br><code>电脑自动输出</code><br><br>这是 <sub> 下标</sub> 和 <sup> 上标</sup></body></html>

运行结果：

二、HTML 格式化标签

  • HTML 使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式, 如：粗体 or 斜体
  • 这些HTML标签被称为格式化标签（请查看底部完整标签参考手册）。
  •  通常标签 <strong> 替换加粗标签 <b> 来使用
  •  <em> 替换斜体 <i>标签使用。
  • 然而，这些标签的含义是不同的：
  • <b> 与<i> 定义粗体或斜体文本。
  • <strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。

三、实例

1、文本格式化

        此例演示如何在一个 HTML 文件中对文本进行格式化

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML文本格式</title>
</head><body><b>这个文本是加粗的</b><br /><strong>这个文本是加粗的</strong><br /><big>这个文本字体放大</big><br /><em>这个文本是斜体的</em><br /><i>这个文本是斜体的</i><br /><small>这个文本是缩小的</small><br />这个文本包含<sub>下标</sub><br />这个文本包含<sup>上标</sup></body></html>

 运行结果：

2、预格式文本

        此例演示如何使用 pre 标签对空行和空格进行控制。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>pre 标签对空格进行控制</title>
</head><body><pre>此例演示如何使用 pre 标签对空行和    空格进行控制</pre></body></html>

运行结果：

 3、"计算机输出"标签

        此例演示不同的"计算机输出"标签的显示效果。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>"计算机输出"标签</title>
</head><body><code>计算机输出</code><br /><kbd>键盘输入</kbd><br /><tt>打字机文本</tt><br /><samp>计算机代码样本</samp><br /><var>计算机变量</var><br /><p><b>注释：</b>这些标签常用于显示计算机/编程代码。</p></body></html>

运行结果：

 4、如何在HTML 文件中写地址

        此例演示如何在 HTML 文件中写地址。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>如何在HTML 文件中写地址</title>
</head><body><address>Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>Visit us at:<br>Example.com<br>Box 564, Disneyland<br>USA</address></body></html>

运行结果：

 5、缩写和首字母缩写

        此例演示如何实现缩写或首字母缩写。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>缩写和首字母缩写</title>
</head><body><abbr title="etcetera">etc.</abbr><br /><acronym title="World Wide Web">WWW</acronym><p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p><p>仅对于 IE 5 中的 acronym 元素有效。</p><p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p></body></html>

运行结果：

注：当把鼠标放到etc和WWW缩略词语上时会显示完整的title内容：

etceteraWorld Wide Web

6、文字方向

        此例演示如何改变文字的方向。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>文字方向</title>
</head><body><p>该段落文字从左到右显示。</p><p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p></body></html>

运行结果：

 7、块引用

        此例演示如何实现长短不一的引用语。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>块引用</title>
</head><body><p>WWF's goal is to:<q>Build a future where people live in harmony with nature.</q>We hope they succeed.</p></body></html>

运行结果：

 <q></q>直接引用一段话

 8、删除字效果和插入字效果

        此例演示如何标记删除文本和插入文本。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>删除字效果和插入字效果</title>
</head><body><p>My favorite color is <del>blue</del> <ins>red</ins>!</p></body></html>

 运行结果：

相关文章：

七、HTML 文本格式化

一、HTML 文本格式化 加粗文本斜体文本电脑自动输出 这是 下标 和 上标 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>HTML文本格式化</title> </head><body><b>加粗文本</b><br>…...

编程日记 2024/1/6 8:32:03

OSI 模型和 TCP/IP 模型的异同

开放式系统互联模型&#xff08;OSI&#xff09;是一个参考标准&#xff0c;解释协议相互之间应该如何相互作用。TCP/IP协议是美国国防部发明的&#xff0c;是让互联网成为了目前这个样子的标准之一 OSI&#xff1a;物理层&#xff0c;数据链路层&#xff0c;网络层&#xff0…...

编程日记 2024/1/6 8:19:53

创新性文生视频模型，南洋理工开源FreeInit

文本领域的ChatGPT&#xff0c;画图领域的Midjourney都展现出了大模型强大的一面&#xff0c;虽然视频领域有Gen-2这样的领导者&#xff0c;但现有的视频扩散模型在生成的效果中仍然存在时间一致性不足和不自然的动态效果。 南洋理工大学S实验室的研究人员发现&#xff0c;扩散…...

编程日记 2024/1/6 8:18:52

linux的页缓存page cache

目录 如何查看系统的 Page Cache&#xff1f; 为什么 Linux 不把 Page Cache 称为 block cache&#xff1f; Page Cache 的优劣势 Page Cache 的优势 加快数据访问 减少 IO 次数&#xff0c;提高系统磁盘 I/O 吞吐量 Page Cache 的劣势 由于我们开发的程序要运行的话一般…...

编程日记 2024/1/6 8:16:50

数字IC后端实现之Innovus TA-152错误解析（分频generated clock定义错误）

**ERROR: (TA-152): A latency path from the ‘Fall’ edge of the master clock at source pin… Error Code TA-152 在数字IC后端实现innovus中我们经常会看到这类Error&#xff0c;具体信息如下所示。 Error Message **ERROR: (TA-152): A latency path from the ‘Fa…...

编程日记 2024/1/6 8:15:49

虹科方案丨从困境到突破：TigoLeap方案引领数据采集与优化变革

来源&#xff1a;虹科工业智能互联 虹科方案丨从困境到突破&#xff1a;TigoLeap方案引领数据采集与优化变革 原文链接&#xff1a;https://mp.weixin.qq.com/s/H3pd5G8coBvyTwASNS_CFA 欢迎关注虹科&#xff0c;为您提供最新资讯&#xff01; 导读 在数字化工厂和智能制造时…...

编程日记 2024/1/6 8:14:48

自检服务器，无需服务器、不用编程。

自检服务器&#xff0c;无需服务器、不用编程。 大家好&#xff0c;我是JavaPub. 这几年自媒体原来热&#xff0c;很多人都知道了个人 IP 的重要性。连一个搞中医的朋友都要要做一个自己的网站&#xff0c;而且不想学编程、还不想花 RMB 租云服务。 老读者都知道&#xff0c…...

编程日记 2024/1/6 8:13:47

Java并行流parallelStream()下InheritableThreadLocal引起的问题

Java并行流parallelStream()下InheritableThreadLocal引起的问题 引起问题的代码。 List orgs00 Arrays.asList(new Org("aaa"),new Org("bbb"),new Org("aa0"));List orgs orgs00.parallelStream() .map(org -> {// 模拟从数据库中获取 …...

编程日记 2024/1/6 8:10:44

【C++期末编程题题库】代码+详解18道

适合期末复习c看&#xff0c;或者刚入门c的小白看&#xff0c;有的题会补充知识点&#xff0c;期末复习题的代码一般比较简单&#xff0c;所以语法上没那么严谨。本文所有题目要求全在代码块的最上面。 目录 1、设计复数类 2、设计Computer类 3、实现相加的函数模板 4、圆类…...

编程日记 2024/1/6 8:07:42

一种DevOpts的实现方式：基于gitlab的CICD（一）

写在之前 笔者最近准备开始入坑CNCF毕业的开源项目&#xff0c;看到其中有一组开源项目的分类就是DevOpts。这个领域内比较出名的项目是Argocd&#xff0c;Argo CD 是一个用于 Kubernetes 的持续交付 (Continuous Delivery) 工具&#xff0c;它以声明式的方式实现了应用程序的…...

编程日记 2024/1/6 8:06:41

nodejs和vuejs的区别

一、vue项目开发中&#xff0c;两个经常混合使用。 不同&#xff1a; 1、概念不同&#xff1a; 一个是前端框架&#xff0c;一个是服务端语言。 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型&#xff0c;使…...

编程日记 2024/1/6 8:05:40

16、Kubernetes核心技术 - 节点选择器、亲和和反亲和

目录 一、概述 二、节点名称 - nodeName 二、节点选择器 - nodeSelector 三、节点亲和性和反亲和性 3.1、亲和性和反亲和性 3.2、节点硬亲和性 3.3、节点软亲和性 3.4、节点反亲和性 3.5、注意点 四、Pod亲和性和反亲和性 4.1、亲和性和反亲和性 4.2、Pod亲和性/反…...

编程日记 2024/1/6 8:04:39

面试算法96：字符串交织

题目 输入3个字符串s1、s2和s3&#xff0c;请判断字符串s3能不能由字符串s1和s2交织而成&#xff0c;即字符串s3的所有字符都是字符串s1或s2中的字符&#xff0c;字符串s1和s2中的字符都将出现在字符串s3中且相对位置不变。例如&#xff0c;字符串"aadbbcbcac"可以由…...

编程日记 2024/1/6 8:03:37

什么是Vue.js的响应式系统（reactivity system）？如何实现数据的双向绑定？

Vue.js的响应式系统是指一种能够跟踪数据变化并实时更新相关界面的机制。它是Vue.js框架的核心特性之一。 在Vue.js中&#xff0c;你可以使用数据绑定语法将数据绑定到DOM元素上。当绑定的数据发生变化时&#xff0c;Vue.js会自动监听这些变化并更新相关的DOM元素。 Vue.js实…...

编程日记 2024/1/6 8:01:35

力扣labuladong一刷day52天LRU算法

力扣labuladong一刷day52天LRU算法 文章目录 力扣labuladong一刷day52天LRU算法概念一、146. LRU 缓存思路一&#xff1a;使用双向链表加map来手动实现。思路二&#xff1a;使用LinkedHashMap 概念 LRU的全称为Least Recently Used&#xff0c;翻译出来就是最近最少使用的意思…...

编程日记 2024/1/6 8:00:34

CCNP课程实验-06-EIGRP-Trouble-Shooting

目录 实验条件网络拓朴 环境配置开始排错错误1&#xff1a;没有配置IP地址&#xff0c;IP地址宣告有误错误2&#xff1a;R3配置了与R1不同的K值报错了。错误3&#xff1a;R4上的AS号配置错&#xff0c;不是1234错误4&#xff1a;R2上配置的Key-chain的R4上配置的Key-chain不一致…...

编程日记 2024/1/6 7:59:33

判断完全数-第11届蓝桥杯省赛Python真题精选

[导读]&#xff1a;超平老师的Scratch蓝桥杯真题解读系列在推出之后&#xff0c;受到了广大老师和家长的好评&#xff0c;非常感谢各位的认可和厚爱。作为回馈&#xff0c;超平老师计划推出《Python蓝桥杯真题解析100讲》&#xff0c;这是解读系列的第27讲。 判断完全数&#…...

编程日记 2024/1/6 7:57:31

【Bootstrap5学习 day12】

Bootstrap5 导航 Bootstrap5提供了一种简单快捷的方法来创建基本导航&#xff0c;它提供了非常灵活和优雅的选项卡和Pills等组件。Bootstrap5的所有导航组件&#xff0c;包括选项卡和Pillss&#xff0c;都通过基本的.nav类共享相同的基本标记和样式。 创建基本导航 要创建简单…...

编程日记 2024/1/6 7:56:30

算法训练第五十九天|503. 下一个更大元素 II、42. 接雨水

503. 下一个更大元素 II&#xff1a; 题目链接 给定一个循环数组 nums &#xff08; nums[nums.length - 1] 的下一个元素是 nums[0] &#xff09;&#xff0c;返回 nums 中每个元素的 下一个更大元素 。 数字 x 的 下一个更大的元素 是按数组遍历顺序&#xff0c;这个数字之…...

编程日记 2024/1/6 7:55:29

mysql之数据类型、建表以及约束

目录 一. CRUD 1.1 什么是crud 1.2 select(查询) 1.3 INSERT(新增) 1.4 UPDATE(修改&#xff09; 1.5 DELETE(删除) 二. 函数 2.1 常见函数 2.2 流程控制函数 2.3聚合函数 三. union与union all 3.1 union 3.2 union all 3.3 具体不同 3.4 结论 四、思维导图 一. CRUD 1.1…...

编程日记 2024/1/6 7:54:28

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

编程新知 2025/8/11 16:12:44

智慧医疗能源事业线深度画像分析（上）

引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

编程新知 2025/8/10 18:39:22

React Native 导航系统实战（React Navigation）

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

编程新知 2025/8/19 9:12:46

React Native 开发环境搭建（全平台详解）

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

编程新知 2025/7/14 21:22:23

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

编程新知 2025/8/16 7:00:37

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

编程新知 2025/8/21 16:26:57

ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

编程新知 2025/8/21 9:12:20

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

编程新知 2025/8/12 18:57:46

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

编程新知 2025/8/26 5:10:22

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

编程新知 2025/8/12 6:01:40