HTML 文本格式化

TML 文本格式化

加粗文本

斜体文本

电脑自动输出

这是下标和上标

HTML 格式化标签

HTML 使用标签<b> 与<i> 对输出的文本进行格式, 如：粗体 or 斜体

这些HTML标签被称为格式化标签（请查看底部完整标签参考手册）。

	通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。然而，这些标签的含义是不同的：<b> 与<i> 定义粗体或斜体文本。<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。

在线实例

文本格式化

此例演示如何在一个 HTML 文件中对文本进行格式化

预格式文本

此例演示如何使用 pre 标签对空行和空格进行控制。

"计算机输出"标签

此例演示不同的"计算机输出"标签的显示效果。

地址

此例演示如何在 HTML 文件中写地址。

缩写和首字母缩写

此例演示如何实现缩写或首字母缩写。

文字方向

此例演示如何改变文字的方向。

块引用

此例演示如何实现长短不一的引用语。

删除字效果和插入字效果

此例演示如何标记删除文本和插入文本。

HTML 文本格式化标签

标签	描述
<b>	定义粗体文本
<em>	定义着重文字
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气
<sub>	定义下标字
<sup>	定义上标字
<ins>	定义插入字
<del>	定义删除字

HTML "计算机输出" 标签

标签	描述
<code>	定义计算机代码
<kbd>	定义键盘码
<samp>	定义计算机代码样本
<var>	定义变量
<pre>	定义预格式文本

HTML 引文, 引用, 及标签定义

标签	描述
<abbr>	定义缩写
<address>	定义地址
<bdo>	定义文字方向
<blockquote>	定义长的引用
<q>	定义短的引用语
<cite>	定义引用、引证
<dfn>	定义一个定义项目。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

TML（HyperText Markup Language）是一种用于创建网页的标准标记语言。在HTML中，"元素"和"标签"是构建网页的基本组成部分，它们一起定义了网页的结构和内容。HTML标签是用来定义HTML元素的开始和结束的，而HTML元素是由标签及其包含的内容组成的。

参考文档：https://www.cjavapy.com/article/3303/

1、HTML 元素

HTML元素指的是从开始标签到结束标签的所有内容。它们是HTML文档的构建块，用于创建和组织网页内容。HTML元素可以包含文本、图片、链接、表格等多种类型的数据。元素可能包括一个开始标签和一个结束标签，也可能只有一个标签（在自闭合元素的情况下）。

1） <!DOCTYPE> 声明

用于定义文档类型，告诉浏览器此文档使用哪个HTML版本。

<!DOCTYPE html>

2） <html>

根元素，包含整个HTML文档。

<html lang="en">
</html>

3） <head>

包含文档的元数据，如标题、字符集声明和链接到样式表。

<head>
  <title>页面标题</title>
  <meta charset="UTF-8">
</head>

4）<title>

定义文档的标题，显示在浏览器的标题栏或页面的标签页上。

<title>这是文档的标题</title>

5）<body>

包含文档的所有可见内容，如文本、图片、链接和其他多媒体元素。

<body>
  <h1>这是一个主标题</h1>
  <p>这是一个段落。</p>
</body>

6） <header>

定义一个区域或页面的头部，通常包含标题和导航链接。

<header>
  <h1>网站标题</h1>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于</a></li>
    </ul>
  </nav>
</header>

7） <footer>

定义页面或区域的页脚部分，通常包含版权信息、联系信息等。

<footer>
  <p>版权所有 © 2024</p>
</footer>

8） <nav>

定义导航链接的部分，用于页面内或页面间的导航。

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">新闻</a></li>
  </ul>
</nav>

9）<section>

定义文档中的一个独立部分，通常与标题一起使用。

<section>
  <h2>章节标题</h2>
  <p>这是该章节的一些内容。</p>
</section>

10. <article>

定义可以独立于内容其余部分的完整自包含内容，例如博客帖子或新闻文章。

<article>
  <h2>文章标题</h2>
  <p>文章内容...</p>
</article>

11. <aside>

定义与周围内容稍微分离的内容，如侧边栏或广告栏。

<aside>
  <p>这是一些附加信息。</p>
</aside>

12. <figure> 和 <figcaption>

<figure> 定义独立的流内容（如图表、图像、代码示例等），<figcaption> 提供该内容的标题。

<figure>
  <img src="image.jpg" alt="描述性文本">
  <figcaption>图像标题</figcaption>
</figure>

2、HTML 标签

HTML标签是HTML元素的一部分，用于从逻辑上开始或结束一个元素。标签通常成对出现，包括一个开始标签和一个对应的结束标签，结束标签的名称前会有一个斜线（/）作为区分。有些HTML标签是自闭合的，意味着它们不需要结束标签，如图像标签（<img />）和换行标签（<br />）。

标签	说明
<!DOCTYPE>	声明文档类型和HTML版本。
<html>	标识一个HTML文档的根元素。
<head>	包含了文档的元数据。
<title>	指定文档的标题。
<body>	包含了可见的页面内容。
<h1> - <h6>	定义标题，从 <h1> 到 <h6> 重要性递减。
<p>	定义段落。
<br>	插入一个换行符。
<hr>	在页面上绘制一条水平线。
<b>	定义粗体文本。
<i>	定义斜体文本。
<u>	定义下划线文本。
<strong>	定义重要文本。
<em>	定义强调文本。
<mark>	定义被标记或高亮的文本。
<small>	定义小号文本。
<sub>	定义下标文本。
<sup>	定义上标文本。
<a>	定义超链接。
<img>	在页面中嵌入图像。
<ul>	定义无序列表。
<ol>	定义有序列表。
<li>	定义列表项。
<table>	定义表格。
<th>	定义表格的表头单元格。
<tr>	定义表格的行。
<td>	定义表格单元。
<form>	定义HTML表单。
<input>	定义输入控件。
<textarea>	定义多行文本输入控件。
<button>	定义按钮。
<select>	定义下拉列表。
<option>	定义下拉列表中的选项。
<article>	定义文章。
<section>	定义文档中的一个区域（或节）。
<header>	定义介绍性内容或导航链接的容器。
<footer>	定义注脚或文档的页脚。
<nav>	定义导航链接的部分。
<aside>	定义侧边栏内容。

使用示例：

<!DOCTYPE html>
使用示例：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML标签使用示例</title>
</head>
<body>
<header>
    <h1>欢迎来到我的网页</h1>
    <nav>
        <a href="#content">主要内容</a> |
        <a href="#contact-form">联系表单</a>
    </nav>
</header>
<section id="content">
    <article>
        <h2>HTML基础</h2>
        <p>HTML是构建网页的基石。<strong>标签</strong>是它的核心组成部分。<mark>本文</mark>介绍了一些最常用的HTML标签。</p>
    </article>
    <aside>
        <h3>注意</h3>
        <p>记得检查HTML5的新特性和标签。</p>
    </aside>
    <ul>
        <li>文本标签</li>
        <li>列表</li>
        <li>表格</li>
        <li>表单</li>
    </ul>
    <ol>
        <li>先介绍基础</li>
        <li>然后是进阶</li>
    </ol>
    <table>
        <tr>
            <th>标签</th>
            <th>描述</th>
        </tr>
        <tr>
            <td><p></td>
            <td>段落标签</td>
        </tr>
        <tr>
            <td><a></td>
            <td>链接标签</td>
        </tr>
    </table>
</section>
<section id="images">
    <h2>图片</h2>
    <img src="example.jpg" alt="示例图片">
</section>
<footer>
    <section id="contact-form">
        <h2>联系我们</h2>
        <form>
            <label for="name">姓名:</label>
            <input type="text" id="name" name="name"><br>
            <label for="email">电子邮件:</label>
            <input type="email" id="email" name="email"><br>
            <input type="submit" value="提交">
        </form>
    </section>
    <p>© 2024 HTML标签示例</p>
</footer>
</body>
</html>

参考文档：Hhttps://www.cjavapy.com/article/3303/

TML文本格式化

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文档标题</title> 
</head> 
<body>

<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>

</body>
</html>

输出：

其他格式：

<strong>这个文本是加粗的</strong>

<em>这个文本是斜体的</em>

<big>这个文本字体放大</big>

<small>这个文本是缩小的</small>

HTML文本格式化标签

标签	描述
<b>	定义粗体文本
<em>	定义着重文字
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气
<sub>	定义下标字
<sup>	定义上标字
<ins>	定义插入字
<del>	定义删除字

HTML“计算机输出”标签

标签	描述
<code>	定义计算机代码
<kbd>	定义键盘码
<samp>	定义计算机代码样本
<var>	定义变量
<pre>	定义预格式文本

HTML引文，引用，及标签定义

标签	描述
<abbr>	定义缩写
<address>	定义地址
<bdo>	定义文字方向
<blockquote>	定义长的引用
<q>	定义短的引用语
<cite>	定义引用、引证
<dfn>	定义一个定义项目。

在线咨询

上一篇：在网页开发中，我们需要掌握的常用HTML标签有哪些？
下一篇：如何让JavaScript代码注释变得更科学

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商