艺兔的编程博客

Appearance

常用文本标签：标题、段落、强调 ​

这一节我们来看一下与文本相关的一些标签。 我们平时使用world编写文章的时候，我们可以将文本设置为标题1,标题2, 也可以对文本进行段落的分割，或者是对于一些我们觉得重要的文字进行斜体标记或者加粗标记等。html文档 同样具有这些类似功能的标签。

标题 heading ​

通常一篇文章都会有大小不同的标题， 标题通常为一个或几个段落的概述，用户通过阅读标题就能大致知道文章的内容，同时让文章的内容看上去更有层次感。

在html 中，标题一共有6种，分别是标题1，标题2,标题3,标题4,标题5和标题6。 用英文来写就是 heading1到 heading6, 同样的方式，使用在html标签中，都会使用简写形式。那么标题的标签分别就是 h1, h2, h3, h4, h5, h6。我们来编写下这6种标题，看看它们在浏览器中显示的样子。

html
<!DOCTYPE html>
<html>
  <head>
    <title>构建网页的基础语言：HTML</title>
  </head>
  <body>
    <h1>构建网页的基础语言：HTML</h1>
    <h2>构建网页的基础语言：HTML</h2>
    <h3>构建网页的基础语言：HTML</h3>
    <h4>构建网页的基础语言：HTML</h4>
    <h5>构建网页的基础语言：HTML</h5>
    <h6>构建网页的基础语言：HTML</h6>
  </body>
</html>

我们在h1到h6标题放在一起，在浏览器中显示出来，可以看出明显的层次感，h1最大，h6最小。

现在我们来看一下我们要做的博客页面，我们有个最大的标题艺兔的编程博客, 然后有一个相对小点的文章标题构建网页的基础语言：HTML, 在文章的内容中，我们为了让文章更有层次感，还有像什么是HTML？和 我们为什么要学习HTML? 这样的更小一点的标题。 现在我们来编写下这些标题。

我们先从标题1开始，<h1>艺兔的编程博客</h1> , 然后创建标题2，<h2>构建网页的基础语言：HTML</h2>, 然后我们还有两个标题三 <h3>什么是HTML？</h3> ， <h3>我们为什么要学习HTML? </h3> 。

通常在实际开发中， 我们用<h1>来标记文章的顶级标题， <h2>来标记副标题，h3来标记文章内容中的标题. 像<h4>-<h6>就尽可能不用了，以免让页面结构太臃肿。还有就是一个页面你只用一次<h1>标签，虽然一个页面你写多个h1标签，并不会违反html语法，但是这是约定俗成的，真要说用什么作用，那比如说只写一次<h1>标签，至少对搜索引擎优化能起作用。

html
<!DOCTYPE html>
<html>
  <head>
    <title>构建网页的基础语言：HTML</title>
  </head>
  <body>
    <h1>构建网页的基础语言：HTML</h1>
    <h2>构建网页的基础语言：HTML</h2>
    <h3>构建网页的基础语言：HTML</h3>
    <h4>构建网页的基础语言：HTML</h4>
    <h5>构建网页的基础语言：HTML</h5>
    <h6>构建网页的基础语言：HTML</h6>

    <h1>艺兔的编程博客</h1>
    <h2>构建网页的基础语言：HTML</h2>
    <h3>什么是HTML？</h3>
    <h3>我们为什么要学习HTML?</h3>
  </body>
</html>

段落 paragraph ​

现在我们要在刚才写的标题中间添加文章段落，段落的作用也是为了便于让文章更便于阅读。同样的道理，如果我们来设计html这么语言。我们会这么写<段落>, 英文是<paragraph>, 那么简写后就是<p>. 我们现在把文章的段落给添加上。

html
<!DOCTYPE html>
<html>
  <head>
    <title>构建网页的基础语言：HTML</title>
  </head>
  <body>
    <h1>构建网页的基础语言：HTML</h1>
    <h2>构建网页的基础语言：HTML</h2>
    <h3>构建网页的基础语言：HTML</h3>
    <h4>构建网页的基础语言：HTML</h4>
    <h5>构建网页的基础语言：HTML</h5>
    <h6>构建网页的基础语言：HTML</h6>

    <h1>艺兔的编程博客</h1>
    <h2>构建网页的基础语言：HTML</h2>
    <p>作者：Deepseek 本文生成于：2055年2月30日（星期八）。</p>
    <p>
      现代网站和网页应用的核心技术由 HTML、CSS 和 JavaScript构成：HTML负责网页的结构与内容，CSS控制样式与布局，而JavaScript则实现交互与动态功能，三者协同工作，共同支撑起万维网的开发基础，无论是简单的静态页面还是复杂的在线应用，最终都依赖于这三种基础语言在浏览器中的运行。
    </p>
    <p>
      在这篇文章中，我们主要讲解HTML。我们将学习什么是HTML以及我们为什么要学习HTML。
    </p>
    <h3>什么是HTML？</h3>
    <!-- 省略... -->
    <h3>我们为什么要学习HTML?</h3>
    <!-- 省略... -->
  </body>
</html>

注释 ​

这个html文档中我们最初写的<h1>-<h6>中的内容是我们刚开始测试用的，不属于我们这个博客页面，我们可以删除它。但现在我们是学习阶段，我们可以使用注释来代替删除。在html中，被注释的代码，它是不会显示在浏览器中的，注释非常有用，如果我们写的一些代码比较复杂，为了以后我们自己或者让别人能更快的理解我们的代码，我们就需要给代码写上一些注释。在html中我们使用 <!-- --> 来注释代码。它也是用 <! 开头的，和我们最开始学的声明文档<!DOCTYPE html>一样，它也是遵循SGML/XML 语法规则来设计的。所以记住注释 <!-- --> 它也不是html标签。 注释后的代码如下, 注释完后我们可以重新加载下浏览器页面，看看下面的内容是不是消失了。

html
<!-- 
<h1>构建网页的基础语言：HTML</h1>
<h2>构建网页的基础语言：HTML</h2>
<h3>构建网页的基础语言：HTML</h3>
<h4>构建网页的基础语言：HTML</h4>
<h5>构建网页的基础语言：HTML</h5>
<h6>构建网页的基础语言：HTML</h6> 
-->

强调和着重强调 - 斜体和粗体 ​

在我们写文章的时候，对于一些词语我们觉得挺重要的，希望这些词的显示效果与别的文字有所差别，那么我们会用粗体或者是斜体来显示它们。 比如说：我们这个博客页中<p>作者：Deepseek 本文生成于：2055年2月30日（星期八）。</p> 这里面的作者Deepseek我们要着重强调下，将这个词加粗显示。在html5之前，我们可以使用<b>标签来标记，<b> 是粗体 bold 的简写. 那我们可以这样来标记<b>Deepseek</b>. 我们在浏览器上查看下，Deepseek 这个词已经正确的被加粗了。

但是现在我们基本不用<b>这个标签，因为html语言 从 1.0 版本一直发展到5.0, 也就是我们现在学习的html5, 其中语义化标签是html5的一个重要特性。所谓语义化标签是指使用具有明确含义的 HTML 标签来描述网页内容的结构和含义，而不仅仅是定义样式或布局。 比如我们刚才的<b>标签，它确实是将字体给加粗了，这个只是视觉上的改变。本身并没有着重强调的意思。 我们要这个字体加粗的本意是要着重强调，加粗只是我们着重强调的一种手段。所以现在我们使用<strong>标签来代替<b>标签，<strong> 翻译成中文就是具有强烈醒目的意思。替换后，在浏览器中显示的结果还是一样的。

在我们的博客页面还有这么一句话现代网站和网页应用的核心技术由 HTML、CSS 和 JavaScript构成, 其中核心技术 这个词我也要强调下，但是不用着重强调，在html5之前我们使用斜体<i>来标记。斜体 italic的简写。 但是<i>本身也具备意义，所以现在我们使用<em>来代替<i>. <em> 是 emphasize 的简写，这个词翻译成中文就是强调的意思。虽然我们用 <i>核心技术</i> 和 <em>核心技术<em> 在浏览器中都是以斜体的方式显示。但是我们现在得使用<em>这个语义化标签。

html
<p>作者：<strong>Deepseek</strong> 本文生成于：2055年2月30日（星期八）。</p>
<p>
  现代网站和网页应用的<em>核心技术</em>由 HTML、CSS 和 JavaScript 构成：HTML负责网页的结构与内容，CSS控制样式与布局，而JavaScript则实现交互与动态功能，三者协同工作，共同支撑起万维网的开发基础，无论是简单的静态页面还是复杂的在线应用，最终都依赖于这三种基础语言在浏览器中的运行。
</p>

好了，本节课就到这里了，接下来请按照我已经做好的博客页面，用今天我们学习的标题，段落，强调文本这些标签将你自己的页面也标记完整吧。

html
<!DOCTYPE html>
<html>
  <head>
    <title>构建网页的基础语言：HTML</title>
  </head>

  <body>
    <!--
    <h1>构建网页的基础语言：HTML</h1>
    <h2>构建网页的基础语言：HTML</h2>
    <h3>构建网页的基础语言：HTML</h3>
    <h4>构建网页的基础语言：HTML</h4>
    <h5>构建网页的基础语言：HTML</h5>
    <h6>构建网页的基础语言：HTML</h6>
    -->

    <h1>📖 艺兔的编程博客</h1>

    <h2>构建网页的基础语言：HTML</h2>
    <p>作者：<strong>Deepseek</strong> 本文生成于：2055年2月30日（星期八）。</p>
    <p>
      现代网站和网页应用的<em>核心技术</em>由 HTML、CSS 和 JavaScript 构成：HTML负责网页的结构与内容，CSS控制样式与布局，而JavaScript则实现交互与动态功能，三者协同工作，共同支撑起万维网的开发基础，无论是简单的静态页面还是复杂的在线应用，最终都依赖于这三种基础语言在浏览器中的运行。
    </p>
    <p>
      在这篇文章中，我们主要讲解HTML。我们将学习什么是HTML以及我们为什么要学习HTML。
    </p>

    <h3>什么是HTML？</h3>
    <p>
      HTML是超文本标记语言，英文全称：<strong>H</strong>yper<strong>T</strong>ext<strong>M</strong>arkup<strong>L</strong>anguage。是开发者用来结构化和描述网页内容的标记语言（注意：并非编程语言）。
    </p>
    <p>
      HTML通过元素定义内容类型：段落、链接、标题、图片、视频等。浏览器能解析HTML代码并将其呈现为可视化网页。
    </p>
    <p>在HTLML中，大多数元素都是由三部分组成:</p>
    <!-- 这里是有序列表 -->
    <p>更多内容可查阅 MDN Web 文档</p>

    <h3>我们为什么要学习HTML?</h3>
    <p>掌握这门语言的理由有很多，大致我想到有以下五大原因：</p>
    <!-- 这里是无序列表 -->
    <p>希望本文让你有所收获，我们下次见！</p>
  </body>
</html>