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

七、HTML 文本格式化

news 文章来源：https://blog.csdn.net/All_are_vanity/article/details/135345030 2025/1/12 16:13:16

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

三、实例

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>加粗文本 …...

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

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

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

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

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

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

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

linux的页缓存page cache

目录如何查看系统的 Page Cache？ 为什么 Linux 不把 Page Cache 称为 block cache？ Page Cache 的优劣势 Page Cache 的优势加快数据访问减少 IO 次数，提高系统磁盘 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，具体信息如下所示。 Error Message **ERROR: (TA-152): A latency path from the ‘Fa…...

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

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

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

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

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

自检服务器，无需服务器、不用编程。大家好，我是JavaPub. 这几年自媒体原来热，很多人都知道了个人 IP 的重要性。连一个搞中医的朋友都要要做一个自己的网站，而且不想学编程、还不想花 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看，或者刚入门c的小白看，有的题会补充知识点，期末复习题的代码一般比较简单，所以语法上没那么严谨。本文所有题目要求全在代码块的最上面。目录 1、设计复数类 2、设计Computer类 3、实现相加的函数模板 4、圆类…...

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

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

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

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

nodejs和vuejs的区别

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

编程日记 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，请判断字符串s3能不能由字符串s1和s2交织而成，即字符串s3的所有字符都是字符串s1或s2中的字符，字符串s1和s2中的字符都将出现在字符串s3中且相对位置不变。例如，字符串"aadbbcbcac"可以由…...

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

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

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

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

力扣labuladong一刷day52天LRU算法

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

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

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

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

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

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

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

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

【Bootstrap5学习 day12】

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

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

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

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

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

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…...

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

复试 || 就业day04(2024.01.05)项目一

文章目录前言线性回归房价预测加载数据数据查看数据拆分数据建模模型的验证、应用模型的评估总结前言 💫你好，我是辰chen，本文旨在准备考研复试或就业 💫本文内容来自某机构网课，是我为复试准备的第一个项目 &#…...

编程日记 2024/1/6 7:50:24

华为机试真题实战应用【赛题代码篇】-最小传输时延（附python、C++和JAVA代码实现）

目录问题描述输入描述：输出描述：知识储备解题思路思路一...

编程日记 2024/1/6 7:48:23

C++ 运算符重载

（Operator） 加分减法 []的重载 #include <iostream> using namespace std;class time1 {public:time1(){shi0;fen0;miao0;}time1(int shi, int fen, int miao){this->shi shi;this->fen fen;this->miao miao;}time1 operator (ti…...

编程日记 2024/1/6 7:45:20

vue3学习【2】vite起步和开发工具基本配置

vite的简介官方文档刚起步学习，所以我们只需要按照官方文档的入门流程即可。推荐阅读一下官网的为什么使用vite vite目前需要的node版本是18，可以参考上一篇文章的安装nvm，用来进行多版本的node管理。 vite安装与使用 npm create vitela…...

编程日记 2024/1/6 7:44:19

计算机创新协会冬令营——暴力枚举题目06

我给大家第一阶段的最后一道题就到这里了，下次得过段时间了。所以这道题简单一点。但是足够经典下述题目描述和示例均来自力扣：两数之和题目描述给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出和为目标值 target …...

编程日记 2024/1/6 7:43:18

单片机快速入门

参考连接： 安装MinGW-64（在win10上搭建C/C开发环境）https://zhuanlan.zhihu.com/p/85429160MinGW-64; 链接：https://pan.baidu.com/s/1oE1FmjyK7aJPnDC8vASmCg?pwdy1mz 提取码：y1mz --来自百度网盘超级会员V7的分享C…...

编程日记 2024/1/6 7:42:17

Eureka相关问题及答案(2024)

1、什么是Eureka？ Eureka是一个由Netflix开发的服务发现（Service Discovery）工具，它是Spring Cloud生态系统中的一个关键组件。服务发现是微服务架构中的一个重要概念，它允许服务实例在启动时注册自己，以便…...

编程日记 2024/1/6 7:41:15

Django 7 实现Web便签

一、效果图二、会用到的知识目录结构与URL路由注册request与response对象模板基础与模板继承ORM查询后台管理三、实现步骤 1. terminal 输入 django-admin startapp the_10回车 2. 注册， 在 tutorial子文件夹settings.py INSTALLED_APPS 中括号添加 "the…...

编程日记 2024/1/6 7:39:14

Jenkins集成部署java项目

文章目录 Jenkins简介安装 Jenkins简介 Jenkins能实时监控集成中存在的错误，提供详细的日志文件和提醒功能，还能用图表的形式形象的展示项目构建的趋势和稳定性。官网安装在官网下载windows版本的Jenkins 但是我点击这里浏览器没有反应&#xff0…...

编程日记 2024/1/6 7:38:13

FFmpeg之——获取上传视频的尺寸（长、宽）

获取上传视频的尺寸： 获取视频尺寸通常需要借助第三方库FFmpeg。首先，确保你的系统中已安装了FFmpeg，并且FFmpeg的可执行文件路径已经添加到你的系统环境变量中。 1.官网下载ffmpeg 进入链接: ffmpeg官网网址，点击下载wind…...

编程日记 2024/1/6 7:36:11

免费视频素材网站哪个最好/站长之家工具高清

WINDOWS 7 PRO X86 2015年9月增量补丁包，从Windowsupdate.log中提取的微软官方下载地址，大部分是2015年9月8日发布的，可以通过下载软件批量下载：http://download.windowsupdate.com/d/msdownload/update/software/secu/2015/08/wi…...

编程日记 2025/1/12 13:49:37

wordpress音乐盒/东莞seo网站排名优化公司

1. 流水线实现多周期指令简图2. MIPS流水线基本流程1. 取指令；2. 读寄存器和译码；3. 执行ALU和地址计算；4. 存储器访问；5. 写结果到寄存器。3. 非流水与流水的对比：非流水的执行时间– 3条指令共需3800＝240…...

编程日记 2025/1/12 12:50:53

低价做网站/佛山网站建设模板

写入文件操作加载文件模块操作 const fs require(fs/promises);实现写文件操作 let msg Hello World, 你好世界!;调用 fs.writeFile() 进行文件写入 // fs.writeFile(file, data[, options], callback) fs.writeFile(./hello.txt, msg, utf8, function(err) {// console.log…...

编程日记 2025/1/12 12:17:01