七、HTML 文本格式化
一、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 Web6、文字方向
此例演示如何改变文字的方向。
<!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>…...
OSI 模型和 TCP/IP 模型的异同
开放式系统互联模型（OSI）是一个参考标准，解释协议相互之间应该如何相互作用。TCP/IP协议是美国国防部发明的，是让互联网成为了目前这个样子的标准之一 OSI：物理层，数据链路层，网络层࿰…...
创新性文生视频模型，南洋理工开源FreeInit
文本领域的ChatGPT，画图领域的Midjourney都展现出了大模型强大的一面，虽然视频领域有Gen-2这样的领导者，但现有的视频扩散模型在生成的效果中仍然存在时间一致性不足和不自然的动态效果。 南洋理工大学S实验室的研究人员发现，扩散…...
linux的页缓存page cache
目录 如何查看系统的 Page Cache？ 为什么 Linux 不把 Page Cache 称为 block cache？ Page Cache 的优劣势 Page Cache 的优势 加快数据访问 减少 IO 次数，提高系统磁盘 I/O 吞吐量 Page Cache 的劣势 由于我们开发的程序要运行的话一般…...
数字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，具体信息如下所示。 Error Message **ERROR: (TA-152): A latency path from the ‘Fa…...
虹科方案丨从困境到突破：TigoLeap方案引领数据采集与优化变革
来源：虹科工业智能互联 虹科方案丨从困境到突破：TigoLeap方案引领数据采集与优化变革 原文链接：https://mp.weixin.qq.com/s/H3pd5G8coBvyTwASNS_CFA 欢迎关注虹科，为您提供最新资讯！ 导读 在数字化工厂和智能制造时…...
自检服务器，无需服务器、不用编程。
自检服务器，无需服务器、不用编程。 大家好，我是JavaPub. 这几年自媒体原来热，很多人都知道了个人 IP 的重要性。连一个搞中医的朋友都要要做一个自己的网站，而且不想学编程、还不想花 RMB 租云服务。 老读者都知道，…...
下InheritableThreadLocal引起的问题)
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 -> {// 模拟从数据库中获取 …...
【C++期末编程题题库】代码+详解18道
适合期末复习c看，或者刚入门c的小白看，有的题会补充知识点，期末复习题的代码一般比较简单，所以语法上没那么严谨。本文所有题目要求全在代码块的最上面。 目录 1、设计复数类 2、设计Computer类 3、实现相加的函数模板 4、圆类…...
一种DevOpts的实现方式：基于gitlab的CICD（一）
写在之前 笔者最近准备开始入坑CNCF毕业的开源项目，看到其中有一组开源项目的分类就是DevOpts。这个领域内比较出名的项目是Argocd，Argo CD 是一个用于 Kubernetes 的持续交付 (Continuous Delivery) 工具，它以声明式的方式实现了应用程序的…...
nodejs和vuejs的区别
一、vue项目开发中，两个经常混合使用。 不同： 1、概念不同： 一个是前端框架，一个是服务端语言。 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使…...
16、Kubernetes核心技术 - 节点选择器、亲和和反亲和
目录 一、概述 二、节点名称 - nodeName 二、节点选择器 - nodeSelector 三、节点亲和性和反亲和性 3.1、亲和性和反亲和性 3.2、节点硬亲和性 3.3、节点软亲和性 3.4、节点反亲和性 3.5、注意点 四、Pod亲和性和反亲和性 4.1、亲和性和反亲和性 4.2、Pod亲和性/反…...
面试算法96：字符串交织
题目 输入3个字符串s1、s2和s3，请判断字符串s3能不能由字符串s1和s2交织而成，即字符串s3的所有字符都是字符串s1或s2中的字符，字符串s1和s2中的字符都将出现在字符串s3中且相对位置不变。例如，字符串"aadbbcbcac"可以由…...
什么是Vue.js的响应式系统（reactivity system）？如何实现数据的双向绑定？
Vue.js的响应式系统是指一种能够跟踪数据变化并实时更新相关界面的机制。它是Vue.js框架的核心特性之一。 在Vue.js中，你可以使用数据绑定语法将数据绑定到DOM元素上。当绑定的数据发生变化时，Vue.js会自动监听这些变化并更新相关的DOM元素。 Vue.js实…...
力扣labuladong一刷day52天LRU算法
力扣labuladong一刷day52天LRU算法 文章目录 力扣labuladong一刷day52天LRU算法概念一、146. LRU 缓存思路一：使用双向链表加map来手动实现。思路二：使用LinkedHashMap 概念 LRU的全称为Least Recently Used，翻译出来就是最近最少使用的意思…...
CCNP课程实验-06-EIGRP-Trouble-Shooting
目录 实验条件网络拓朴 环境配置开始排错错误1：没有配置IP地址，IP地址宣告有误错误2：R3配置了与R1不同的K值报错了。错误3：R4上的AS号配置错，不是1234错误4：R2上配置的Key-chain的R4上配置的Key-chain不一致…...
判断完全数-第11届蓝桥杯省赛Python真题精选
[导读]：超平老师的Scratch蓝桥杯真题解读系列在推出之后，受到了广大老师和家长的好评，非常感谢各位的认可和厚爱。作为回馈，超平老师计划推出《Python蓝桥杯真题解析100讲》，这是解读系列的第27讲。 判断完全数&#…...
【Bootstrap5学习 day12】
Bootstrap5 导航 Bootstrap5提供了一种简单快捷的方法来创建基本导航，它提供了非常灵活和优雅的选项卡和Pills等组件。Bootstrap5的所有导航组件，包括选项卡和Pillss，都通过基本的.nav类共享相同的基本标记和样式。 创建基本导航 要创建简单…...
算法训练第五十九天|503. 下一个更大元素 II、42. 接雨水
503. 下一个更大元素 II： 题目链接 给定一个循环数组 nums （ nums[nums.length - 1] 的下一个元素是 nums[0] ），返回 nums 中每个元素的 下一个更大元素 。 数字 x 的 下一个更大的元素 是按数组遍历顺序，这个数字之…...
mysql之数据类型、建表以及约束
目录 一. CRUD 1.1 什么是crud 1.2 select(查询) 1.3 INSERT(新增) 1.4 UPDATE(修改） 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…...
夜间自动化利器：OpenClaw+nanobot定时执行爬虫任务
夜间自动化利器：OpenClawnanobot定时执行爬虫任务 1. 为什么选择OpenClaw做夜间自动化 凌晨三点，我的电脑屏幕突然亮了起来。这不是灵异事件，而是OpenClaw正在执行我预设的爬虫任务——收集行业数据、清洗整理、存入数据库，整个…...
从GitHub开源项目到一键部署：OFA模型在星图平台的快速落地
从GitHub开源项目到一键部署：OFA模型在星图平台的快速落地 1. 引言 你是不是也遇到过这种情况？在GitHub上看到一个特别酷的AI项目，比如OFA这种能看图说话、理解多模态信息的模型，心里痒痒的想立刻上手试试。结果呢，光…...
告别设备标识混乱！用uniappx插件Ba-IdCode-U一站式获取OAID/AndroidID/IMEI（附隐私合规指南）
跨平台开发者的设备标识管理实战：从混乱到合规的完整解决方案 每次启动新项目时，开发者们是否总在纠结该用哪种设备标识？OAID、AndroidID还是IMEI？国内厂商的兼容性问题怎么解决？隐私合规的红线又在哪里？本…...
GIL已死，GIL万岁？——2024大厂Python并发岗面试题库首发（含性能压测对比数据）
第一章：GIL已死，GIL万岁？——2024大厂Python并发岗面试题库首发（含性能压测对比数据）一道高频真题：为什么 asyncio.run() 启动的协程无法被 multiprocessing.Process 并发执行？ 该问题直指 Pyth…...
你有多难拒绝别人？免费个人边界感与拒绝能力测试，看清你的“不敢拒绝“根源
你有多难拒绝别人？免费个人边界感与拒绝能力测试，看清你的"不敢拒绝"根源 引言 你有没有过这样的时刻—— 朋友临时约你，你明明很累想休息，却还是答应了同事请你帮忙做不属于你的工作，你不好意思拒绝&…...
Presto函数实战指南：从基础到高阶应用
1. Presto函数入门：从零开始掌握基础操作 第一次接触Presto函数时，我完全被它丰富的功能震撼到了。记得当时我需要快速分析一个包含数百万条记录的日志表，传统方法需要写复杂的MapReduce作业，而Presto仅用几行SQL函数就搞定了。下…...
【英飞凌】TC3XX单片机型号解码：从命名规则看芯片选型
1. 英飞凌TC3XX单片机命名规则解析 第一次接触英飞凌TC3XX系列单片机时，我完全被那一长串型号搞懵了。TC387TP、TC377T、TC397QP...这些看似随机的字母数字组合，其实隐藏着丰富的芯片信息。经过几个项目的实战，我终于摸清了这套命名规则的规律…...
OpenClaw跨平台脚本：nanobot统一管理mac与Windows文件
OpenClaw跨平台脚本：nanobot统一管理mac与Windows文件 1. 为什么需要跨平台文件管理 在日常工作中，我经常需要在macOS和Windows双系统间切换。最让我头疼的就是文件路径的兼容性问题——macOS使用正斜杠/而Windows使用反斜杠\。每次写脚本都要为不同平…...
告别丑曲线！PPT波浪线绘制保姆级教程（含压缩技巧）
告别丑曲线！PPT波浪线绘制保姆级教程（含压缩技巧） 在商务演示、学术报告或品牌提案中，一条流畅的波浪线往往能成为视觉焦点——它既能引导观众视线，又能传递动态趋势。但PPT自带的形状库中，那些生硬的预设曲…...
当我谈 Rax 按端拆分代码的时候我谈些什么：代码规范相关
前言在跨端开发领域，Rax 作为一个备受关注的框架，凭借其“一次编写，多端运行”的理念，为开发者带来了巨大的效率提升。然而，随着业务规模的扩大和终端形态的多样化（Web、Weex、小程序、Node 等）…...