HTML标签作用

发布时间：2023-05-18

一、HTML 标签作用

HTML 标签是无序列表的容器，用于在网页中呈现不带序号的一组相关内容，如菜单列表、选项列表等。直接嵌套 HTML pre 标签时，常用来展示多行代码。 代码示例：

<ul>
   <li><pre>var name = "John";</pre></li>
   <li><pre>if (age > 18) {
      alert("You can vote!");
   }</pre></li>
</ul>

二、HTML pre 标签作用

HTML pre 标签是保留格式文本的容器，其中的文本不会被浏览器自动换行或删除多余的空格符，直接将标签中的内容原样输出。 在编写代码时，如果想要以固定的格式展示代码，如重要的注释、代码缩进等，就可以使用 HTML pre 标签。 代码示例：

<pre>
  <code>
    // This is a comment
    function helloWorld() {
       console.log("Hello, World!");
    }
  </code>
</pre>

三、HTML <a> 标签作用

HTML <a> 标签是超链接的容器，用于在网页中创建可点击链接，将网页内容和其他网页链接起来，目标网页在同一窗口打开或在新窗口打开。 在 HTML <pre> 标签中嵌套 <a> 标签时，可以将代码示例中的关键字或函数名转成超链接，方便用户查看 API 文档等其他内容。 代码示例：

<pre>
  <code>
    <a href="https://www.w3schools.com/html/default.asp" target="_blank">&lt;html&gt;</a>
    <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre" target="_blank">&lt;pre&gt;</a> 
    var message = 'Hello, World!';
    console.log(message);
  </code>
</pre>

四、HTML <sub> 标签作用

HTML <sub> 标签是下标文本的容器，用于在网页中呈现下标文本，如化学元素中的原子序数、数学公式中的下标等。 在 HTML pre 标签中嵌套 <sub> 标签时，可以用于在代码示例中呈现下标文本，如 JavaScript 中的数组下标、对象属性名等。 代码示例：

<pre>
  <code>
    var numbers = [0, 1, 2];
    var person = {
       name: 'John',
       age: '30'
    };
  </code>
</pre>

五、HTML 标签的作用

除了以上提到的标签外，HTML 标签还具有其他种类的作用。比如：

  1. 呈现文字、图片、视频等媒体内容的标签，如 <p>、<img>、<video> 等；
  2. 呈现表格的标签，如 <table>、<tr>、<td> 等；
  3. 呈现表单的标签，如 <form>、<input>、<select> 等；
  4. 定义 HTML 文档结构的标签，如 <html>、<head>、<body> 等。

六、HTML <pre> 的作用

HTML <pre> 标签是一种比较特殊的标签，它拥有其他 HTML 标签所不具备的特殊作用。当出现 HTML <pre> 标签时，将会将标签内的内容原样输出，忽略所有的 HTML 标记和空格缩进等。 HTML <pre> 标签通常用于在网页中呈现代码示例，代码中的空格、换行、注释等内容都可以明确保留。在出现代码示例时，HTML <pre> 标签是最常用的容器标签之一。 代码示例：

<pre>
  <code>
    var message = 'Hello, World!';
    console.log(message);
  </code>
</pre>

七、HTML <meta> 标签的作用

HTML <meta> 标签是用于为 HTML 文档中的元数据提供信息的容器，例如关键字、描述、作者、字符集等。这些元数据可以提供给搜索引擎、浏览器、社交媒体等其他应用程序使用。 代码示例：

<html>
  <head>
    <meta charset='UTF-8'>
    <meta name='keywords' content='HTML, CSS, JavaScript'>
    <meta name='description' content='Learn web development with HTML, CSS and JavaScript.'>
    <meta name='author' content='John Doe'>
  </head>
  <body>
    <h1>Welcome to my website!</h1>
  </body>
</html>
推荐文章