Web前端开发笔记——第二章 HTML语言 第三节 文本格式化标签

简介: Web前端开发笔记——第二章 HTML语言 第三节 文本格式化标签

前言


这里主要介绍对html语言中对文本的处理。


一、文本加粗、斜体标签


使用b标签或strong标签对文字进行加粗,使文本加粗显示,它表示为<b>文本</b>或<strong>文本</strong>

使用i标签或em标签对文字进行斜体,使文字斜体显示,它表示为<i>文本</i>或<em>文本</em>

例如,下列html代码中,对“HTML”进行加粗,对“Internet”进行斜体:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <p><b>HTML</b>的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的<i>Internet</i>资源连接为一个逻辑整体。<strong>HTML</strong>文本是由<strong>HTML</strong>命令组成的描述性文本,<b>HTML</b>命令可以说明文字,图形、动画、声音、表格、链接等。</p>
  </body>
</html>

运行结果如下:

1667053931384.jpg

这里还要了解Web语义化的知识,Web语义化指使页面有更好的结构与含义,使开发者、计算机都能快速理解网页的内容。

<em></em>标签也叫强调标签<strong></strong>也叫重点强调标签来对文本进行标识,本质上看起来和i标签b标签和是一样的,只不过em标签和strong标签是有语义的,它们更加明确,这就叫Web语义化,而i标签和b标签只是对文本进行斜体处理和粗体处理,它们无语义。


二、文本字体缩小、放大标签


使用small标签和big标签对文字字体缩小和放大显示,它表示为<small>文本</small>和<big>文本</big>

例如,下列html代码中,对第一段文本字体放大,对第二段文本字体缩小:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <p><small>HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。</small></p>
  <br />
  <p><big>超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中,也可能是其他文件,或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接,为人们查找,检索信息提供方便。</big></p>
  </body>
</html>

运行结果如下:

1667053969844.jpg


三、文本下标、上标标签


在html中,可以通过sub标签和sup标签对文本下标和上标,它表示为<sub>文本</sub>和<sup>文本</sup>

例如,下列html代码中,对第一段文字“HTML”进行下标,对第二段文字“超文本”进行上标:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <p><sub>HTML</sub>的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。</p>
  <hr />
  <p><sup>超文本</sup>是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中,也可能是其他文件,或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接,为人们查找,检索信息提供方便。</p>
  </body>
</html>

运行结果如下:

1667053997431.jpg


四、文本下划线、删除线标签


使用ins标签对文本底下添加下划线,它表示为<ins>文本</ins>

使用del标签对文本划上删除线,它表示为<del>文本<del>

例如,下列html代码中,对“判断:”底下添加下划线,对“0>1”划上删除线:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <ins>判断:</ins>
  <br />
  <del>0>1<del>
  </body>
</html>

运行结果如下:

1667054028937.jpg


五、双引号字符


使用&quot;字符来对文本进行引用,它是可以单独出现的,且";"不能漏掉,例如,下列html代码中,对“判断”加上双引号:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <p>&quot;判断&quot;
  <br />
  0>1</p>
  </body>
</html>

运行结果如下:

1667054055788.jpg


相关文章
|
1月前
|
人工智能 前端开发
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
|
1月前
|
存储 前端开发 JavaScript
从 Web 2.0 到 Web 3.0:前端开发的历史与未来
【10月更文挑战第4天】本文探讨了从 Web 2.0 到 Web 3.0 的前端开发演变过程。Web 2.0 时代,前端开发者从静态网页设计走向复杂交互,技术框架如 jQuery、React 和 Vue 带来了巨大的变革。而 Web 3.0 以区块链技术为核心,带来了去中心化的互联网体验,前端开发者面临与区块链交互、去中心化身份验证、分布式存储等新挑战。文章总结了 Web 2.0 和 Web 3.0 的核心区别,并为开发者提供了如何应对新技术的建议,帮助他们在新时代中掌握技能、设计更安全的用户体验。
56 0
从 Web 2.0 到 Web 3.0:前端开发的历史与未来
|
1月前
|
前端开发 JavaScript 开发者
Web组件:一种新的前端开发范式
【10月更文挑战第9天】Web组件:一种新的前端开发范式
43 2
|
1月前
|
移动开发 前端开发 JavaScript
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
180 0
|
1月前
|
存储 安全 前端开发
在前端开发中需要考虑的常见web安全问题和攻击原理以及防范措施
在前端开发中需要考虑的常见web安全问题和攻击原理以及防范措施
161 0
|
1月前
|
存储 前端开发 API
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
95 0
|
1月前
|
编解码 前端开发 JavaScript
Web前端开发需要掌握哪些知识?
Web前端在最近几年发展的十分迅速,报名进行Web前端培训的同学也越来越多。移动互联网的背景之下,每一个人每天会跟各式各样的手机端应用打交道,殊不知这些App都跟Web前端有着密不可分的关系。
|
1月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
113 3
|
23天前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
125 45
|
4天前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
18 2
下一篇
无影云桌面