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


相关文章
|
3月前
|
前端开发 JavaScript C++
震惊!!!html竟然被...... 一篇博客让你从0开始熟悉并掌握html 超详细html笔记 全网独一份
本文是一份超详细的HTML学习笔记,从基础认知开始,介绍了网页的构成、五大浏览器、web标准、HTML/CSS/JavaScript的区别,然后详细讲解了HTML的概念、骨架结构、常用快捷键、注释、标签结构和关系。接着,通过大量实例深入探讨了HTML的各种标签,包括排版标签、文本格式化标签、媒体标签、链接标签、列表标签、表格标签、表单标签、语义化标签和字符实体,旨在帮助读者从0开始熟悉并掌握HTML。
44 2
震惊!!!html竟然被...... 一篇博客让你从0开始熟悉并掌握html 超详细html笔记 全网独一份
|
12天前
|
移动开发 前端开发 搜索推荐
《前端技术基础》第01章 HTML基础【合集】
超文本标记语言(HyperText Markup Language,简称 HTML)是构建网页结构的基础标记语言。它与 CSS、JavaScript 协同,负责搭建网页“骨架”,用标签组织内容,像标题、段落、图片等元素,通过起始与结束标签(部分可单用,如`<img>`)界定层级与布局,将信息有序整合。标签含特定语义,向浏览器传达展示方式,为网页准确呈现及后续美化、交互筑牢根基。
64 25
|
30天前
|
人工智能 前端开发 JavaScript
前端基础之HTML
Web1.0、Web2.0 和 Web3.0 标志着互联网发展的三个阶段。Web1.0(静态互联网,1990年代初至2000年代初)以静态内容和单向信息流为主,用户仅能浏览。Web2.0(互动互联网,2000年代初至2010年代初)引入了用户生成内容和社交网络,内容动态且互动性强。Web3.0(语义互联网,2010年代至今)强调语义化、个性化、智能化及去中心化,结合AI、区块链等技术,提供沉浸式体验。HTTP和HTML作为互联网基础协议和技术,在各阶段不断演进,共同推动了现代互联网的发展。
前端基础之HTML
|
1月前
|
移动开发 前端开发 JavaScript
HTML(HyperText Markup Language,超文本标记语言)
HTML(HyperText Markup Language,超文本标记语言)
90 11
|
2月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
56 6
|
2月前
|
XML JavaScript 前端开发
如何解析一个 HTML 文本
【10月更文挑战第23天】在实际应用中,根据具体的需求和场景,我们可以灵活选择解析方法,并结合其他相关技术来实现高效、准确的 HTML 解析。随着网页技术的不断发展,解析 HTML 文本的方法也在不断更新和完善,
|
4月前
|
Web App开发 存储 移动开发
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性,包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签(如`header`、`footer`、`nav`等)及其新增表单控件和属性(如`url`、`email`、`date`类型输入框等)。这些改进增强了网页的功能性和用户体验。
63 1
前端基础(十七)_HTML5新特性
|
3月前
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js
|
3月前
|
Java BI API
spring boot 整合 itextpdf 导出 PDF,写入大文本,写入HTML代码,分析当下导出PDF的几个工具
这篇文章介绍了如何在Spring Boot项目中整合iTextPDF库来导出PDF文件,包括写入大文本和HTML代码,并分析了几种常用的Java PDF导出工具。
828 0
spring boot 整合 itextpdf 导出 PDF,写入大文本,写入HTML代码,分析当下导出PDF的几个工具
|
3月前
|
前端开发 JavaScript 数据安全/隐私保护
【前端基础篇】HTML零基础速通2
【前端基础篇】HTML零基础速通
33 2