HTML文本格式化标签

HTML提供了多种标签用于文本的格式化,这些标签可以改变文本的外观(如粗细、斜体)或赋予文本特定的含义(如强调、引用)。

1. 基本文本样式标签

(1)粗体文本

使用<b><strong>标签可以使文本显示为粗体:

<b>:仅表示文本为粗体,无特殊语义

<strong>:表示文本具有重要性,有语义,搜索引擎会给予更多权重

示例:

<p>这是<b>粗体文本</b>(使用b标签)</p>
<p>这是<strong>重要的粗体文本</strong>(使用strong标签)</p>

显示效果:

这是粗体文本(使用b标签)

这是重要的粗体文本(使用strong标签)

(2)斜体文本

使用<i><em>标签可以使文本显示为斜体:

<i>:仅表示文本为斜体,无特殊语义,常用于技术术语、外来语等

<em>:表示文本需要强调,有语义,屏幕阅读器会重读该部分

示例:

<p>这个<i>术语</i>来自拉丁语(使用i标签)</p>
<p>请<em>立即阅读</em>这部分内容(使用em标签)</p>

显示效果:

这个术语来自拉丁语(使用i标签)

立即阅读这部分内容(使用em标签)

(3)其他文本样式标签

<u>:为文本添加下划线(注意:不要用于链接,链接默认有下划线)

<s>:为文本添加删除线,表示内容已被删除或不再有效

<mark>:为文本添加黄色背景,类似于荧光笔标记效果

<small>:使文本变小,常用于免责声明、版权信息等

<sup>:上标文本,常用于脚注或数学公式

<sub>:下标文本,常用于化学公式

示例:

<p>这是<u>带下划线的文本</u></p>
<p>原价:<s>199元</s>,现价:99元</p>
<p>请重点关注<mark>这部分内容</mark></p>
<p>主要内容<small>(注:最终解释权归本公司所有)</small></p>
<p>数学公式:a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>
<p>化学公式:H<sub>2</sub>O 是水的分子式</p>

显示效果:

这是带下划线的文本

原价:199元,现价:99元

请重点关注这部分内容

主要内容(注:最终解释权归本公司所有)

数学公式:a2 + b2 = c2

化学公式:H2O 是水的分子式

2. 语义化文本标签

除了改变文本外观,HTML还提供了一些具有特定语义的文本标签,这些标签不直接改变文本样式(或仅有轻微改变),但能帮助浏览器和搜索引擎理解文本的含义。

<abbr>:表示缩写词,可通过title属性提供完整含义

<address>:表示联系地址,通常显示为斜体

<blockquote>:表示长引用,通常会缩进显示

<q>:表示短引用,会自动添加引号

<cite>:表示引用的作品名称(如书籍、文章标题)

<code>:表示计算机代码,通常使用等宽字体

<pre>:表示预格式化文本,保留文本中的空格和换行

示例:

<p>我们使用<abbr title="HyperText Markup Language">HTML</abbr>创建网页。</p><p>联系地址:</p>
<address>北京市海淀区中关村大街1号<br>联系电话:12345678
</address><p>以下是一段长引用:</p>
<blockquote>生活就像海洋,只有意志坚强的人,才能到达彼岸。
</blockquote><p>孔子说:<q>学而时习之,不亦说乎?</q></p><p>我最近在读<cite>《HTML入门到精通》</cite>这本书。</p><p>使用<code>console.log()</code>可以在控制台输出信息。</p><p>以下是一段代码:</p>
<pre>
function greet() {console.log("Hello, World!");
}
greet();
</pre>

显示效果:

我们使用HTML创建网页。

联系地址:

北京市海淀区中关村大街1号

联系电话:12345678

以下是一段长引用:

生活就像海洋,只有意志坚强的人,才能到达彼岸。

孔子说:学而时习之,不亦说乎?

我最近在读《HTML入门到精通》这本书。

使用console.log()可以在控制台输出信息。

代码:

function greet() {console.log("Hello, World!");
}
greet();

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

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

相关文章

数据结构之单链表和环形链表的应用(二)-

目录一、相交链表二、环形链表I三、环形链表II总结一、相交链表 相交链表 首先理解什么是链表相交&#xff0c;相交即存在共用的节点&#xff0c;链表相交有三种情况&#xff0c; 中间位置相交头部就开始相交尾部相交 如图pcurA和pcurB就都有一个next指针指向同一个节点 这…

属性关键字

属性关键字深拷贝与浅拷贝类型各类对象深浅拷贝判断完全深拷贝的实现属性关键字property、synthesize和dynamic原子操作读写权限内存管理strong &#x1f19a; copy总结深拷贝与浅拷贝 先前学习OC时已经对深浅拷贝进行了一次学习&#xff0c;这里进行一个复习总结和补充&#…

突发奇想,还未实践,在Vben5的Antd模式下,将表单从「JS 配置化」改写成「模板可视化」形式(豆包版)

在 Vben5 的 Antd 模式下&#xff0c;完全可以将表单从「JS 配置化」改写成「模板可视化」形式&#xff0c;把表单项直接写在 Vue 模板中&#xff0c;更直观且符合传统 Vue 开发习惯。以下是完整的改写示例&#xff0c;保留原功能但结构更清晰&#xff1a; 改写思路 放弃 JS 中…

【更新完毕】2025数学建模国赛E题思路代码文章高教社杯全国大学生数学建模-AI 辅助智能体测

全部更新完毕 包含完整的文章全部问题的代码、结果、图表 完整内容请看文末最后的推广群基于AI姿态识别的立定跳远运动分析与个性化训练优化研究 随着《国家学生体质健康标准》的颁布实施&#xff0c;通过AI技术辅助体育运动分析已成为提升学生体质健康水平的重要手段。本研究针…

小白友好,无需基础也能快速上手的AI部署工具,一键部署

AI大模型相信已经成为许多人工作和生活中的得力助手。然而&#xff0c;对于大多数普通用户而言&#xff0c;将强大的AI模型部署到自己的电脑上&#xff0c;似乎是一项遥不可及的技术活&#xff0c;往往涉及到复杂的命令行操作、环境配置和代码调试。那有没有一种工具&#xff0…

《Python复刻植物大战僵尸开源项目实战:Pygame框架+JSON关卡设计,解锁塔防游戏开发新技能》​

&#x1f4cc; 大家好&#xff0c;我是智界工具库&#xff0c;每天分享好用实用且智能的开源项目&#xff0c;以及在JAVA语言开发中遇到的问题&#xff0c;如果本篇文章对您有所帮助&#xff0c;请帮我点个小赞小收藏小关注吧&#xff0c;谢谢喲&#xff01;&#x1f618; 博主…

CCS——将工程中的 include / lib 修改为相对路径,方便工程分享

在使用 Code Composer Studio (CCS) 开发 DSP 或 ARM 工程时&#xff0c;经常会遇到这样一个问题&#xff1a;在 A 电脑上能正常编译的工程&#xff0c;拷贝到 B 电脑上后就报错。错误的原因通常是 工程使用了绝对路径&#xff0c;而不同电脑上的文件路径不一致&#xff0c;比如…

java解析网络大端、小端解析方法

文章目录一、背景介绍二、说明核心概念&#xff1a;什么是字节序&#xff08;Endianness&#xff09;&#xff1f;大端字节序 (Big-Endian)小端字节序 (Little-Endian)三、不同解析方式介绍一、背景介绍 中转台通过SNMP协议V1\V2上报中转台IP&#xff0c;然后程序解析入库&…

【数据分享】土地利用矢量shp数据分享-甘肃

今天要说明数据就是土地利用shp数据分享-甘肃。数据介绍▲ 1km土地利用数据&#xff08;2020年&#xff09;▲ 土地利用数据&#xff08;2025年&#xff09;▲土地利用数据&#xff08;2018年&#xff09;▲ 30m土地利用数据&#xff08;2023年&#xff09;▲ 公路铁路道路河流…

java log相关:Log4J、Log4J2、LogBack,SLF4J

目录测试maven依赖logback.xml测试主程序测试输出arthas查看logger总结使用参考文档测试 maven依赖 <dependencies><!-- SLF4J API --><dependency><groupId>org.slf4j</groupId><artifactId>slf4j-api</artifactId><version>…

AES加密算法详细加密步骤代码实现--身份证号码加解密系统

系统概述 本系统是一个基于AES-256-CBC加密算法的身份证号码加解密工具&#xff08;手搓底层步骤&#xff09;&#xff0c;针对的是上一篇文章对的AES加密原理的讲解&#xff0c;虽说是演示&#xff0c;但功能完善&#xff0c;可单独提供接口给项目调用&#xff0c;采用Python…

LangChain: Models, Prompts 模型和提示词

获取openapikey #!pip install python-dotenv #!pip install openai import osimport openai ​ from dotenv import load_dotenv, find_dotenv _ load_dotenv(find_dotenv()) # read local .env file openai.api_key os.environ[OPENAI_API_KEY] # account for deprecat…

ACMESSL自动续签教程

目录 1、选择申请证书 ​编辑2、选择CA机构 ​编辑3、选择自动验签 ​编辑4、证书续签设置 5、自动发布设置 本教程实现ACMESSL自动续签&#xff0c;请按照此教程实现。 1、选择申请证书 点击快捷入口或者订单或证书列表中的【创建证书】按钮&#xff1a; 2、选择CA机构 …

基于飞算JavaAI的在线图书借阅平台设计实现

项目概述与需求分析 1.1 项目背景与意义 随着数字化时代的快速发展&#xff0c;传统图书馆管理模式已无法满足现代读者的需求。在线图书借阅平台通过互联网技术将图书资源数字化&#xff0c;为读者提供便捷的检索、借阅和管理服务&#xff0c;有效解决了传统图书馆开放时间有…

通过API接口管理企业微信通讯录案例

1.开始前需要登录企业微信管理员后台&#xff0c;开启通讯录同步&#xff0c;同时添加企业可信IP地址&#xff0c;记录下Secret信息和企业ID&#xff0c;后面的程序会用到这两个参数。2.下面是用python写的创建企业微信账号的具体案例。#!/usr/bin/env python3 # -*- coding: u…

硬件开发_基于物联网的自动售卖机系统

一.系统概述 物联网自动售卖机系统的主要功能如下&#xff1a; 核心控制器&#xff1a;采用STM32单片机作为系统核心&#xff0c;负责整体数据处理和各设备的统一控制。商品选择&#xff1a;支持语音识别及按键方式&#xff0c;方便用户在售卖机内选择商品。语音播报&#xff1…

AGENTS.md: AI编码代理的开放标准

每个项目都有一个 README.md 文件供人类阅读。但随着 AI 编码代理和 AI 辅助开发的兴起,我们需要一个新标准:AGENTS.md。这个 Markdown 文件定义了代理如何构建、测试和协作。 这就是 AGENTS.md 的作用。 它是一个简单的 Markdown 文件,告诉 AI 助手如何在你的项目中操作:…

如何解决 OutOfMemoryError 内存溢出 —— 原因、定位与解决方案

网罗开发&#xff08;小红书、快手、视频号同名&#xff09;大家好&#xff0c;我是 展菲&#xff0c;目前在上市企业从事人工智能项目研发管理工作&#xff0c;平时热衷于分享各种编程领域的软硬技能知识以及前沿技术&#xff0c;包括iOS、前端、Harmony OS、Java、Python等方…

阿里云服务器配置ssl-docker nginx

# 切换到您当前的目录 cd /AAAAAAAAAAAA# 创建存放nginx配置、证书和日志的目录结构 mkdir -p nginx-config/conf.d nginx-ssl nginx-logs# 为挂载做准备&#xff0c;您可能需要将当前dist目录内容移动到新的html目录 # 首先查看当前dist目录的内容 ls -la dist/# 如果html目录…

2025全球生成式引擎优化(GEO)服务商发展趋势与企业赋能白皮书

引言&#xff1a;人工智能技术的迅猛发展&#xff0c;特别是在生成式AI领域的突破&#xff0c;正以前所未有的力量重塑商业世界的竞争格局。对于寻求提升在线可见性、优化品牌互动及实现可持续增长的企业而言&#xff0c;生成式引擎优化&#xff08;GEO&#xff09;已然成为数字…