HTML body里的文本与文本格式标签怎么使用

发布时间：2022-08-03 17:06:21 作者：iii
来源：亿速云阅读：200

HTML body里的文本与文本格式标签怎么使用

HTML（HyperText Markup Language）是构建网页的基础语言。在HTML文档中，<body>标签包含了网页的主要内容，而文本是网页内容的核心部分。为了在网页中展示文本，并对其进行格式化，HTML提供了多种文本和文本格式标签。本文将详细介绍这些标签的使用方法，帮助您更好地掌握HTML中的文本处理技巧。

1. 基本文本标签

1.1 `<p>` 标签

<p> 标签用于定义段落。段落是网页中最常见的文本块，通常用于组织内容。

<p>这是一个段落。</p>
<p>这是另一个段落。</p>

1.2 `<h1>` 到 `<h6>` 标签

<h1> 到 <h6> 标签用于定义标题。<h1> 是最高级别的标题，<h6> 是最低级别的标题。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

1.3 `<br>` 标签

<br> 标签用于插入换行符。它是一个空标签，不需要闭合标签。

<p>这是第一行。<br>这是第二行。</p>

1.4 `<hr>` 标签

<hr> 标签用于在网页中插入水平线，通常用于分隔内容。

<p>这是第一段。</p>
<hr>
<p>这是第二段。</p>

2. 文本格式化标签

2.1 `<b>` 和 `<strong>` 标签

<b> 标签用于加粗文本，而 <strong> 标签不仅加粗文本，还表示文本的重要性。

<p>这是<b>加粗</b>的文本。</p>
<p>这是<strong>重要</strong>的文本。</p>

2.2 `<i>` 和 `<em>` 标签

<i> 标签用于斜体文本，而 <em> 标签不仅斜体文本，还表示文本的强调。

<p>这是<i>斜体</i>的文本。</p>
<p>这是<em>强调</em>的文本。</p>

2.3 `<u>` 标签

<u> 标签用于给文本添加下划线。

<p>这是<u>下划线</u>的文本。</p>

2.4 `<s>` 和 `<del>` 标签

<s> 标签用于给文本添加删除线，而 <del> 标签不仅添加删除线，还表示文本已被删除。

<p>这是<s>删除线</s>的文本。</p>
<p>这是<del>已删除</del>的文本。</p>

2.5 `<sup>` 和 `<sub>` 标签

<sup> 标签用于上标文本，而 <sub> 标签用于下标文本。

<p>这是<sup>上标</sup>的文本。</p>
<p>这是<sub>下标</sub>的文本。</p>

2.6 `<mark>` 标签

<mark> 标签用于高亮显示文本。

<p>这是<mark>高亮</mark>的文本。</p>

2.7 `<small>` 标签

<small> 标签用于缩小文本。

<p>这是<small>缩小</small>的文本。</p>

2.8 `<abbr>` 标签

<abbr> 标签用于定义缩写或首字母缩略词。title 属性用于提供缩写的完整形式。

<p><abbr title="HyperText Markup Language">HTML</abbr> 是构建网页的基础语言。</p>

2.9 `<q>` 标签

<q> 标签用于定义短引用。浏览器通常会自动在引用内容周围添加引号。

<p>他说：<q>这是引用的内容。</q></p>

2.10 `<blockquote>` 标签

<blockquote> 标签用于定义长引用。通常用于引用大段文本。

<blockquote>
    这是长引用的内容。通常用于引用大段文本。
</blockquote>

2.11 `<cite>` 标签

<cite> 标签用于定义引用的来源或作者。

<p><cite>HTML 教程</cite> 由 W3Schools 提供。</p>

2.12 `<code>` 标签

<code> 标签用于定义计算机代码片段。

<p>这是<code>代码</code>片段。</p>

2.13 `<pre>` 标签

<pre> 标签用于定义预格式化文本。预格式化文本会保留空格和换行符。

<pre>
    这是预格式化的文本。
    它会保留空格和换行符。
</pre>

2.14 `<kbd>` 标签

<kbd> 标签用于定义键盘输入。

<p>按下 <kbd>Ctrl</kbd> + <kbd>C</kbd> 复制文本。</p>

2.15 `<var>` 标签

<var> 标签用于定义变量。

<p>变量 <var>x</var> 的值是 10。</p>

2.16 `<time>` 标签

<time> 标签用于定义日期或时间。

<p>今天是 <time datetime="2023-10-01">2023年10月1日</time>。</p>

3. 文本布局标签

3.1 `<div>` 标签

<div> 标签用于定义文档中的块级元素。它通常用于布局和样式化。

<div style="background-color: lightblue;">
    <p>这是一个块级元素。</p>
</div>

3.2 `<span>` 标签

<span> 标签用于定义文档中的内联元素。它通常用于样式化文本的一部分。

<p>这是<span style="color: red;">红色</span>的文本。</p>

3.3 `<header>` 标签

<header> 标签用于定义文档或部分的页眉。

<header>
    <h1>网页标题</h1>
    <p>网页描述</p>
</header>

3.4 `<footer>` 标签

<footer> 标签用于定义文档或部分的页脚。

<footer>
    <p>版权所有 &copy; 2023</p>
</footer>

3.5 `<nav>` 标签

<nav> 标签用于定义导航链接。

<nav>
    <a href="#">首页</a> |
    <a href="#">关于我们</a> |
    <a href="#">联系我们</a>
</nav>

3.6 `<section>` 标签

<section> 标签用于定义文档中的节或部分。

<section>
    <h2>章节标题</h2>
    <p>章节内容。</p>
</section>

3.7 `<article>` 标签

<article> 标签用于定义独立的内容块，如博客文章或新闻文章。

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

3.8 `<aside>` 标签

<aside> 标签用于定义与主要内容相关但不直接相关的内容，如侧边栏。

<aside>
    <h3>侧边栏标题</h3>
    <p>侧边栏内容。</p>
</aside>

3.9 `<main>` 标签

<main> 标签用于定义文档的主要内容。

<main>
    <h1>主要内容标题</h1>
    <p>主要内容。</p>
</main>

3.10 `<figure>` 和 `<figcaption>` 标签

<figure> 标签用于定义独立的流内容，如图片、图表等。<figcaption> 标签用于定义 <figure> 的标题。

<figure>
    <img src="image.jpg" alt="图片描述">
    <figcaption>图片标题</figcaption>
</figure>

4. 文本样式与CSS

虽然HTML提供了多种文本格式标签，但在实际开发中，通常使用CSS来控制文本的样式。以下是一些常见的CSS文本样式属性：

4.1 `color` 属性

color 属性用于设置文本颜色。

<p style="color: red;">红色文本。</p>

4.2 `font-family` 属性

font-family 属性用于设置文本字体。

<p style="font-family: Arial, sans-serif;">Arial 字体。</p>

4.3 `font-size` 属性

font-size 属性用于设置文本大小。

<p style="font-size: 20px;">20px 大小的文本。</p>

4.4 `font-weight` 属性

font-weight 属性用于设置文本粗细。

<p style="font-weight: bold;">加粗文本。</p>

4.5 `text-align` 属性

text-align 属性用于设置文本对齐方式。

<p style="text-align: center;">居中对齐的文本。</p>

4.6 `text-decoration` 属性

text-decoration 属性用于设置文本装饰，如下划线、删除线等。

<p style="text-decoration: underline;">下划线文本。</p>

4.7 `line-height` 属性

line-height 属性用于设置行高。

<p style="line-height: 1.6;">1.6 倍行高的文本。</p>

4.8 `letter-spacing` 属性

letter-spacing 属性用于设置字符间距。

<p style="letter-spacing: 2px;">字符间距为 2px 的文本。</p>

4.9 `word-spacing` 属性

word-spacing 属性用于设置单词间距。

<p style="word-spacing: 5px;">单词间距为 5px 的文本。</p>

4.10 `text-transform` 属性

text-transform 属性用于设置文本大小写转换。

<p style="text-transform: uppercase;">大写文本。</p>

5. 总结

HTML提供了丰富的文本和文本格式标签，帮助开发者更好地组织和展示网页内容。通过合理使用这些标签，可以创建出结构清晰、内容丰富的网页。同时，结合CSS的使用，可以进一步控制文本的样式，提升网页的视觉效果。希望本文能帮助您更好地理解和掌握HTML中的文本处理技巧。

HTML body里的文本与文本格式标签怎么使用

HTML body里的文本与文本格式标签怎么使用

1. 基本文本标签

1.1 <p> 标签

1.2 <h1> 到 <h6> 标签

1.3 <br> 标签

1.4 <hr> 标签

2. 文本格式化标签

2.1 <b> 和 <strong> 标签

2.2 <i> 和 <em> 标签

2.3 <u> 标签

2.4 <s> 和 <del> 标签

2.5 <sup> 和 <sub> 标签

2.6 <mark> 标签

2.7 <small> 标签

2.8 <abbr> 标签

2.9 <q> 标签

2.10 <blockquote> 标签

2.11 <cite> 标签

2.12 <code> 标签

2.13 <pre> 标签

2.14 <kbd> 标签

2.15 <var> 标签

2.16 <time> 标签

3. 文本布局标签

3.1 <div> 标签

3.2 <span> 标签

3.3 <header> 标签

3.4 <footer> 标签

3.5 <nav> 标签

3.6 <section> 标签

3.7 <article> 标签

3.8 <aside> 标签

3.9 <main> 标签

3.10 <figure> 和 <figcaption> 标签

4. 文本样式与CSS

4.1 color 属性

4.2 font-family 属性

4.3 font-size 属性

4.4 font-weight 属性

4.5 text-align 属性

4.6 text-decoration 属性

4.7 line-height 属性

4.8 letter-spacing 属性

4.9 word-spacing 属性

4.10 text-transform 属性

5. 总结

相关阅读

1.1 `<p>` 标签

1.2 `<h1>` 到 `<h6>` 标签

1.3 `<br>` 标签

1.4 `<hr>` 标签

2.1 `<b>` 和 `<strong>` 标签

2.2 `<i>` 和 `<em>` 标签

2.3 `<u>` 标签

2.4 `<s>` 和 `<del>` 标签

2.5 `<sup>` 和 `<sub>` 标签

2.6 `<mark>` 标签

2.7 `<small>` 标签

2.8 `<abbr>` 标签

2.9 `<q>` 标签

2.10 `<blockquote>` 标签

2.11 `<cite>` 标签

2.12 `<code>` 标签

2.13 `<pre>` 标签

2.14 `<kbd>` 标签

2.15 `<var>` 标签

2.16 `<time>` 标签

3.1 `<div>` 标签

3.2 `<span>` 标签

3.3 `<header>` 标签

3.4 `<footer>` 标签

3.5 `<nav>` 标签

3.6 `<section>` 标签

3.7 `<article>` 标签

3.8 `<aside>` 标签

3.9 `<main>` 标签

3.10 `<figure>` 和 `<figcaption>` 标签

4.1 `color` 属性

4.2 `font-family` 属性

4.3 `font-size` 属性

4.4 `font-weight` 属性

4.5 `text-align` 属性

4.6 `text-decoration` 属性

4.7 `line-height` 属性

4.8 `letter-spacing` 属性

4.9 `word-spacing` 属性

4.10 `text-transform` 属性