HTML Tags|极客教程

HTML Tags

HTML（Hypertext Markup Language）是用于创建网页的标记语言，可以通过一系列的标签来定义并展示网页内容。本文将详细介绍一些常见的HTML标签，以便帮助读者更好地理解和使用HTML。

1. 标题标签

标题标签用于定义网页中的标题，通常由<h1>到<h6>六个不同级别的标签组成，分别表示不同级别的标题，其中<h1>是最高级别，<h6>是最低级别。

<h1>how2html.com</h1>
<h2>how2html.com</h2>
<h3>how2html.com</h3>
<h4>how2html.com</h4>
<h5>how2html.com</h5>
<h6>how2html.com</h6>

2. 段落标签

段落标签用于定义网页中的段落，通常由<p>标签来表示。

<p>how2html.com is a great website for learning HTML.</p>

3. 链接标签

链接标签用于创建超链接，可以通过<a>标签来实现。其中href属性用于指定链接的地址。

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

4. 图片标签

图片标签用于在网页中插入图像，可以通过<img>标签来实现。其中src属性用于指定图片的路径。

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

5. 列表标签

列表标签用于创建有序列表和无序列表，可以通过<ul>和<ol>标签来分别表示，列表项则使用<li>标签。

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

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

6. 表格标签

表格标签用于创建表格，可以通过<table>标签表示，表头通过<th>标签，表格行通过<tr>标签，单元格通过<td>标签。

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
</table>

7. 表单标签

表单标签用于创建用户输入表单，可以通过<form>标签表示，输入框通过<input>标签，提交按钮通过<button>标签等。

<form action="submit.php" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
  <button type="submit">Submit</button>
</form>

8. 语义化标签

语义化标签用于增强网页结构的语义性，如<header>表示页眉，<nav>表示导航，<footer>表示页脚等。

<header>
  <h1>Welcome to how2html.com</h1>
</header>
<nav>
  <ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="about.html">About</a></li>
  </ul>
</nav>
<footer>
  <p>© 2022 how2html.com. All Rights Reserved.</p>
</footer>

9. 块级元素和行内元素

块级元素通过display: block;属性在页面上显示为块状，独占一行；行内元素通过display: inline;属性在页面上显示为行内元素，不独占一行。

<div style="display: block;">This is a block-level element.</div>
<span style="display: inline;">This is an inline-level element.</span>

10. 元标签

元标签用于设置网页的一些元信息，比如字符编码、关键词、描述等，可以通过<meta>标签来实现。

<meta charset="UTF-8">
<meta name="keywords" content="HTML, Tags, Tutorial">
<meta name="description" content="A comprehensive guide to HTML tags.">

11. 文本格式化标签

文本格式化标签用于改变文本的样式，如加粗、斜体、删除线等，可以通过<b>、<i>、<s>等标签来实现。

<p><b>how2html.com</b> is a great <i>website</i> for learning HTML.</p>

12. 多媒体标签

多媒体标签用于在网页中嵌入音频和视频，可以通过<audio>和<video>标签来实现，分别设置src属性指向音频和视频文件。

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

<video controls>
  <source src="video.mp4" type="video/mp4">
</video>

13. 注释标签

注释标签用于在HTML代码中添加注释，可以解释代码的作用或提供相关信息，注释不会在页面上显示。

<!-- This is a comment. -->

14. 文档结构标签

文档结构标签用于定义文档的结构，如<html>表示HTML文档的开始，<head>包含文档的元信息，<body>包含文档的主体内容。

<!DOCTYPE html>
<html>
<head>
  <title>HTML Tags</title>
</head>
<body>
  <h1>Welcome to how2html.com</h1>
</body>
</html>

Output:

HTML Tags

15. 嵌套标签

HTML标签可以相互嵌套，形成复杂的结构，比如在<div>中嵌套<p>标签。

<div>
  <p>This is a paragraph inside a div element.</p>
</div>

16. 空元素标签

空元素标签指没有内容的标签，如<br>用于换行，<hr>用于水平线，<img>用于图像等。

<p>First line.<br>Second line.</p>
<hr>
<img src="image.jpg" alt="Image Description">

17. 超文本锚点

超文本锚点标签用于在页面内部或外部创建锚链接，可以通过<a>标签设置href属性和id属性来实现。

<a href="#section1">Jump to Section 1</a>
...
<h2 id="section1">Section 1</h2>

18. 组合标签

多个标签可以组合使用，形成更复杂的HTML结构，如在<div>中使用多个不同的标签组合展示内容。

<div>
  <h2>Section Heading</h2>
  <p>This is a paragraph.</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

19. 其他常用标签

除了上述介绍的常见标签外，HTML还有许多其他标签可以用来实现不同的功能，如<aside>用于侧边栏内容，<blockquote>用于引用内容，<code>用于显示代码等。

<aside>
  <h3>Related Articles</h3>
  <ul>
    <li><a href="article1.html">Article 1</a></li>
    <li><a href="article2.html">Article 2</a></li>
  </ul>
</aside>

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

<code>
  console.log("Hello, how2html.com");
</code>