跳到主要内容

HTML常用标签集合汇总

· 阅读需 5 分钟
文浩Marvin

以下是HTML中常用的标签及其解释和代码示例：

1. <html> : 定义HTML文档的根元素。​

代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <h1>Welcome to my webpage!</h1>
    <p>Here is some content.</p>
  </body>
</html>

2. <head> : 定义HTML文档的头部，包含元数据和其他引用。​

代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Welcome to my webpage!</h1>
    <p>Here is some content.</p>
  </body>
</html>

3. <title> : 定义文档的标题，显示在浏览器的标签页中。​

代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <h1>Welcome to my webpage!</h1>
    <p>Here is some content.</p>
  </body>
</html>

4. <body> : 定义HTML文档的主体部分。​

代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <h1>Welcome to my webpage!</h1>
    <p>Here is some content.</p>
  </body>
</html>

5. <h1>-<h6> : 定义HTML文档的标题，从最高级到最低级。​

代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
  </body>
</html>
  1. <p> : 定义段落。

代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
  </body>
</html>
  1. <a> : 定义链接。

代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <a href="https://www.example.com">Visit Example.com</a>
  </body>
</html>
  1. <img> : 定义图像。

代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <img src="image.jpg" alt="A beautiful image.">
  </body>
</html>
  1. <ul> : 定义无序列表。

代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </body>
</html>
  1. <ol> : 定义有序列表。

代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <ol>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ol>
  </body>
</html>
  1. <li> : 定义列表项。

代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
    <ol>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ol>
  </body>
</html>
  1. <table> : 定义表格。

代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
      <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
        <td>Row 1, Cell 3</td>
      </tr>
      <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
        <td>Row 2, Cell 3</td>
      </tr>
    </table>
  </body>
</html>
  1. <th> : 定义表格的表头单元格。

代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
      <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
        <td>Row 1, Cell 3</td>
      </tr>
      <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
        <td>Row 2, Cell 3</td>
      </tr>
    </table>
  </body>
</html>
  1. <td> : 定义表格的数据单元格。

代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
      <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
        <td>Row 1, Cell 3</td>
      </tr>
      <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
        <td>Row 2, Cell 3</td>
      </tr>
    </table>
  </body>
</html>
  1. <form> : 定义表单。

代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <form action="submit.php" method="post">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name"><br>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email"><br>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>
  1. <input> : 定义输入字段。

代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <form action="submit.php" method="post">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name"><br>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email"><br>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>
  1. <label> : 定义输入字段的标签。

代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <form action="submit.php" method="post">
      <label for="name">Name:</label>
      <input type="text" id="

以下是HTML中常用的标签及其解释和代码示例：

  1. <button> : 定义按钮。

代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <button>Click me!</button>
  </body>
</html>
  1. <select> : 定义下拉列表。

代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <select>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
  </body>
</html>
  1. <option> : 定义下拉列表中的选项。

代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <select>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
  </body>
</html>
  1. <textarea> : 定义文本域。

代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <textarea rows="4" cols="50">
      Enter text here...
    </textarea>
  </body>
</html>
  1. <label> : 定义表单元素的标签。

代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <form action="submit.php" method="post">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name"><br>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email"><br>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>
  1. <fieldset> : 定义表单的一组相关元素。

代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <form action="submit.php" method="post">
      <fieldset>
        <legend>Personal Information:</legend>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name"><br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email"><br>
      </fieldset>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>
  1. <legend> : 定义fieldset元素的标题。

<html>
  <body>
    <form action="submit.php" method="post">
      <fieldset>
        <input type="text" id="name" name="name"><br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email"><br>
      </fieldset>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>
  1. <div> : 定义文档中的一个区域，可用于布局。

代码示例：

<html>
  <body>
    <div class="container">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </body>
</html>

  1. <span> : 定义文本中的一个区域，可用于样式化。

代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
    <style>
      .highlight {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>This is some <span class="highlight">highlighted</span> text.</p>
  </body>
</html>

以下是HTML中常用的标签及其解释和代码示例：

  1. <iframe> : 定义一个内联框架，可用于在当前页面中嵌入其他页面。

代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <iframe src="https://www.google.com"></iframe>
  </body>
</html>
  1. <audio> : 定义音频内容。

代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <audio controls>
      <source src="music.mp3" type="audio/mpeg">
    </audio>
  </body>
</html>
  1. <video> : 定义视频内容。

代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <video controls>
      <source src="video.mp4" type="video/mp4">
    </video>
  </body>
</html>
  1. <source> : 定义<audio>或<video>元素的媒体资源。

代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <audio controls>
      <source src="music.mp3" type="audio/mpeg">
    </audio>
    <video controls>
      <source src="video.mp4" type="video/mp4">
    </video>
  </body>
</html>

31. <canvas> : 定义绘图区域，用于通过JavaScript绘制图形、动画等。​

代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "red";
        ctx.fillRect(10, 10, 50, 50);
      }
    </script>
  </head>
  <body>
    <canvas id="myCanvas" width="200" height="200"></canvas>
  </body>
</html>

32. <svg> : 定义可缩放矢量图形。​

代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <svg width="100" height="100">
      <rect x="10" y="10" width="80" height="80" fill="red" />
    </svg>
  </body>
</html>

33. <path> : 定义SVG中的路径。​

代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <svg width="100" height="100">
      <path d="M 10 10 L 50 90 L 90 10 Z" fill="red" />
    </svg>
  </body>
</html>

34. <g> : 定义SVG中的分组。​

代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <svg width="100" height="100">
      <g fill="red">
        <rect x="10" y="10" width="40" height="40" />
        <rect x="50" y="50" width="40" height="40" />
      </g>
    </svg>
  </body>
</html>

35. <path> : 定义SVG中的路径。​

代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <svg width="100" height="100">
      <path d="M 10 10 L 50 90 L 90 10 Z" fill="red" />
    </svg>
  </body>
</html>
Loading Comments...