HTML常用文本标签以及注释文本

aMereNobody

已于 2024-03-31 14:27:41 修改

阅读量2.7k html 文章标签：前端 html

于 2024-03-30 11:13:51 首次发布

本文链接：https://blog.csdn.net/lh11223326/article/details/137168202

html 专栏收录该内容

10 篇文章 7 订阅

实践：

在默认的情况下，浏览器会比普通文本更大和更粗的字体显示标题中的内容，使用<h1>标签定义的标题字体最大，而使用<h6>定义的标题字体最小。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <h1>一个简陋的网页</h1>
    <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.EpxMzbWHD39VZ-nmL0fs4AHaFj?w=195&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7"
        alt="此图片加载成功了？？" title="此图片加载成功了">
    <p class="change">此表示可以显示一段文本</p>
    <a href="https://www.bilibili.com/">此链接到bilibili</a>
    <ul>
        <li>
            <a href="https://www.bilibili.com/" id="content">
                <b id="url">https://www.bilibili.com/</b>
            </a>
        </li>
        <li>无序列表第二行</li>
        <li>无序列表第三行</li>
    </ul>

    <hr>
    <h2>新的开始</h2>
    <br>
    <input type="text">

    <ul>
        <li style="color: aquamarine;">此文本的颜色为青色</li>
        <li>
            <a href="https://www.bilibili.com/" style="color:red;">点击跳转bilibili</a>
        </li>
    </ul>

    <h3>一段路程</h3>

    <div class="Name1 Name2 Name3">此处应该有点内容</div>
    <p class="cont">此处并没有什么内容</p>
    <div class="cont Name1">此处没有内容</div>

    <h4>快结束了....</h4>

    <h6>无人的结束....</h6>
</body>

</html>

注意：在网页上使用标签时，浏览器内置的样式会在每个标题上下添加一定的空白区域(外边距)，后续可以通过CSS中的margin来设置空白区域的大小。

上述代码的运行结果为:

总结：

使用标题标签时需要注意的是:

HTML标题标签只能用来定义标题，不可以使用标题标签来对文本进行加粗设计；
由于搜索引擎（如百度等）是使用标题来索引网页结构和内容的，因此使用标题标签有利于搜索引擎的抓取。
标题标签并不是随意使用，要根据使用的环境，按照级别由高到低的使用标题标签。

应该使用<h1>标签来标记最重要的标题，该标题常位于页面顶部，而且一个HTML文档中通常应该有且仅有一个<h1>标题，至于较低级别的标题标签(如<h2>,<h3>,<h4>),的使用可以不加太多的限制。

2.段落标签：

前言：

HTML中可以使用段落标签<p>来将文档中的内容分割为若干个段落，语法格式如下:

段落标签有开始标签<p>还有结束标签</p>，开始标签和结束标签里面的内容会被视为段落，段落标签在很多网站里面都会用到，如下图:

需要注意的是：浏览器内置样式会在段落上下自动添加一定的空白区域(外边距)，可以使用CSS中的margin属性来设置空白区域的大小。

在HTML4以及更早的版本之前，可以省略段落标签的结束标签，浏览器会自动补全缺失的结束标签，如下：

<p>bilibili

<p>前端教程

<p>前端教程-哔哩哔哩_Bilibili

段落中的空格：

在默认情况下，段落标签会对文本中的空格符进行合并，将多个空格显示为一个空格的效果，具体表现为:

如果段落中出现多个连续的空格，浏览器会忽略这些空格只保留一个。
如果段落中出现多个连续的行，浏览器会将这些换行转换成一个空格。

如下代码:

<p>bili             bili</p>
<p>前端教程</p>
<p>前端教程-哔哩哔哩_                                 bilibili</p>

在想要在段落标签中换行，需要专门的换行的标签<br>，<br>标签属于自闭合标签，因此不需要对应的结束标签</br>,如下:

<p>前端教程 <br> -哔哩哔哩_ <br>bilibili</p>

总结:

段落标签在实际开发中很常用，但是常常需要配合其他标签才能达到更好的效果。

3.文本格式化标签：

前言:

一些HTML标签除了具有一定的语义(含义)外，还有默认样式，如<i>设置字体为斜体，<em>强调标签中的内容，并使标签中的字体倾斜。如下是用来文本格式化的标签，表格如:

标签	功能
<b>....</b>	加粗标签中的字体。
<em>....</em>	强调标签中的内容，并使标签中的字体倾斜。
<i>...</i>	定义标签中的字体为斜体。
<small>...</small>	定义标签中的字体为小号字体。
<strong>....</strong>	强调标签中的内容，并将字体加粗。
<sub>....</sub>	定义上下标文本。
<sup>...</sup>	定义上标文本。
<ins>....</ins>	定义文档的其余部分之外的插入文本。
<del>...</del>	在文本内容上添加删除线。
<code>...</code>	定义一段代码。
<kbd>...</kbd>	用来表示文本是通过键盘输入的。
<samp>....</samp>	定义程序的样本。
<var>...</var>	定义变量。
<pre>....</pre>	定义预格式化的文本，被该标签包裹的文本会保留所有的空格和换行符，字体也会呈现为等宽字体。
<abbr>...</abbr>	用来表示标签中的内容为缩写形式。
<address>...</address>	用来定义文档作者的联系信息，被该标签包裹的文本通常会以斜体呈现，并在文本前面换行。
<bdo>...</bdo>	定义标签中的文字方向。
<blockquote>...</blockquote>	定义一段引用的文本，例如名人名言，文本会以换行输入，并在左右两边进行缩进。
<q>...</q>	定义一段短引用，浏览器会将引用的内容使用双引号包裹起来。
<cite>...</cite>	表示对某个文献的引用，例如书籍或杂志的名称，文本会以斜体显示。
<dfn>....</dfn>	yonl

按照作用可以把上述标签分为两类:

物理标签：这类标签用来设置文本的外观
逻辑标签：这类标签用来赋予文本一些逻辑或语义值

通过上表可以看出，有些标签虽然效果一样，但是语义并不同，如<strong>和<b>标签，<em>和<i>标签，下面就来说明他们之间的关系;

<strong>和<b>标签的区别:

在默认情况下，<strong>和<b>标签都可以使文本以粗体展示其中的文本，但是<strong>标签是说明标签里内容具有很高的重要性，而<b>标签仅仅只是加粗并没有别的含义。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>&lt;strong&gt;和&lt;b&gt;标签演示</title>
</head>
<body>
    <p>你学会了 <strong>HTML</strong> </p>
    <p>你已经超越<b>80%</b>的程序员</p>
</body>
</html>

此处给HTML加<strong>标签是为了强调HTML的其的重要性，以及它的震撼效果。而给网址添加<b>标签仅仅是为了视觉上的粗效果，这样能引起读者的注意。

<em>和<i>标记之间的区别:

<em>和<i>标签在默认情况下均为斜体显示标签里的文本，<em>标签具有强调的语义，用来表示内容的重要性，但是<i>标签仅仅只是用来定义斜体文本的。

代码如下:

<p>你学会了 <em>HTML</em> </p>
<p>你已经超越<i>80%</i>的程序员</p>

总结：

在使用文本格式化标签的时候需要注意标签的语义(含义)，然后再选择合适的标签，如强调重要的文本应该使用<strong>而不是<b>,因为<b>标签的作用仅仅只是加粗，不能只是为了达到效果就胡乱使用这样是不对的。

4.如何注释：

前言：

HTML注释主要用来对文档中的代码进行解释说明，注释也是代码的一部分，但浏览器会自动忽略注释的内容，所以用户在网页中是看不到注释的。

注释在我们编写代码的过程很有作用，因为一个完整的网页中的HTML代码起码有上千行，此时我们若要修改某部分代码则需要花费很长的时间去找，但是有了注释就不需要这么麻烦，我们可以根据他的功能或者其他作用将程序划分然后注释，这样既对自己阅读方便也方便他人阅读，可以大大提高代码的可读性。

如何在代码中注释:

在HTML中，里面的内容皆为注释的内容，里面的内容会被编译器，浏览器忽略。如下代码:

<!DOCTYPE html>
<!-- 此为头注释 -->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 此为中间注释 -->
<body>
    
    <ul>
        <!-- 下面有几行被注释掉了 -->
        <li>第一行的内容</li>
        <!-- <li>第二行的内容</li> -->
        <li>第三行的内容</li>
        <li>第四行的内容</li>
        <!-- <li>第五行的内容</li> -->
    </ul>

</body>
<!-- 此为尾注释 -->
</html>

可以看到的是注释可以出现在HTML文档的任意位置，包括文档头，尾，中间，标签外部，标签内容中。注释除了可以用来对代码的说明外，还可以用来注释掉代码，如果某段代码不想执行了就可以直接注释掉。上述代码运行结果如: