HTML 标签介绍与常用标签的应用示例

HTML（Hypertext Markup Language）是用于创建网页结构和内容的标记语言。在 Web 开发中，了解常用的 HTML 标签以及它们的用途和语法是至关重要的。本文将介绍一些常用的 HTML 标签，并提供实际的应用示例。

1. `<html>` 标签

<html> 标签是 HTML 文档的根元素，用于表示 HTML 文档的开始和结束。所有其他 HTML 标签都必须包含在 <html> 标签之内。

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <!-- 页面内容 -->
  </body>
</html>

2. `<head>` 标签

<head> 标签用于定义 HTML 文档的头部部分，包含了一些与文档相关的元数据和链接引用。在 <head> 标签中，可以添加 <title> 标签用于定义文档标题，以及其他元素如 <meta> 标签、<link> 标签等。

<head>
  <title>My Webpage</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles.css">
</head>

3. `<body>` 标签

<body> 标签用于定义 HTML 文档的主体部分，包含了实际显示在浏览器窗口中的内容，如文本、图像、链接、表格等。

<body>
  <h1>Welcome to My Webpage</h1>
  <p>This is a paragraph.</p>
  <img src="image.jpg" alt="Image">
  <a href="https://example.com">Link</a>
  <table>
    <!-- 表格内容 -->
  </table>
</body>

4. `<h1>` - `<h6>` 标签

<h1> - <h6> 标签用于定义标题，其中 <h1> 表示最高级别的标题，<h6> 表示最低级别的标题。

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>

5. `<p>` 标签

<p> 标签用于定义段落，用于包含一段文字内容。

<p>This is a paragraph.</p>

6. `<a>` 标签

<a> 标签用于定义超链接，可以链接到其他网页、文件或页面内的某个位置。

<a href="https://example.com">Visit Example.com</a>

7. `<img>` 标签

<img> 标签用于插入图像，其中 src 属性指定图像的 URL，alt 属性提供图像的替代文本。

<img src="image.jpg" alt="Image">

8. `<ul>` 和 `<li>` 标签

<ul> 标签用于创建无序列表，而 <li> 标签用于定义列表项。

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

9. `<table>`、`<tr>`、`<td>` 标签

<table> 标签用于创建表格，<tr> 标签用于定义表格的行，<td> 标签用于定义表格的单元格。

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

10. `<form>` 和 `<input>` 标签

<form> 标签用于创建表单，而 <input> 标签用于定义输入字段。

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <input type="submit" value="Submit">
</form>

以上是一些常用的 HTML 标签及其示例用法。通过了解这些标签的作用和语法，我们可以更好地构建具有结构和内容的网页。当然，HTML 还有许多其他标签可供使用，你可以根据需要进一步探索和学习。

HTML 标签介绍与常用标签的应用示例

1. <html> 标签

2. <head> 标签

3. <body> 标签

4. <h1> - <h6> 标签

5. <p> 标签

6. <a> 标签

7. <img> 标签

8. <ul> 和 <li> 标签

9. <table>、<tr>、<td> 标签

10. <form> 和 <input> 标签

微信扫一扫：分享