HTML 标签简介

HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。它由一系列的元素（或称为标签）组成，这些元素可以告诉浏览器如何显示网页内容。以下是一些常用的HTML标签及其用途的详细介绍。

基本结构

每个HTML文档都包含以下基本结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>
  • <!DOCTYPE html>：文档类型声明，告诉浏览器这是一个HTML5文档。
  • <html>：根元素，所有内容都包含在这个标签内。
  • <head>：包含文档的元数据，如<title>、<meta>、<link>和<script>等。
  • <title>：定义文档的标题，显示在浏览器的标题栏或页面的标签上。
  • <body>：包含可见的页面内容。

文本内容

标题

<h1>最大的标题</h1>
<h2>次大的标题</h2>
<h3>中等标题</h3>
<h4>较小的标题</h4>
<h5>更小的标题</h5>
<h6>最小的标题</h6>
  • <h1> 到 <h6>：定义标题，<h1> 是最大的标题，<h6> 是最小的标题。

段落

<p>这是一个段落。</p>
  • <p>：定义段落。

链接

<a href="https://www.example.com" target="_blank">访问示例网站</a>
  • <a>：定义超链接，href 属性指定链接的目标URL，target="_blank" 会在新标签页中打开链接。

强调

<em>强调文本</em>
<strong>重要文本</strong>
  • <em>：表示强调的文本，通常显示为斜体。
  • <strong>：表示重要的文本，通常显示为粗体。

列表

无序列表

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>
  • <ul>：定义无序列表。
  • <li>：定义列表项。

有序列表

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>
  • <ol>：定义有序列表。
  • <li>：定义列表项。

图像

<img src="image.jpg" alt="描述" width="100" height="100">
  • <img>：定义图像，src 属性指定图像的URL，alt 属性提供图像的替代文本，width 和 height 属性指定图像的宽度和高度。

容器

区块

<div>
    这是一个区块。
</div>
  • <div>：定义文档中的分区或节，用于组织内容。

行内

<span>这是一个行内元素。</span>
  • <span>：定义行内元素，用于组织内容但不创建新的块级元素。

表单

<form action="/submit-form" method="post">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="user_name">
    <input type="submit" value="提交">
</form>
  • <form>：定义表单，用于收集用户输入。
  • <label>：定义标签，for 属性与输入字段的 id 属性关联。
  • <input>：定义输入字段，type 属性指定输入类型（如文本、提交按钮等）。

表格

<table border="1">
    <tr>
        <th>表头1</th>
        <th>表头2</th>
    </tr>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
</table>
  • <table>：定义表格。
  • <tr>：定义表格行。
  • <th>：定义表头单元格。
  • <td>：定义表格单元格。

多媒体

音频

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    您的浏览器不支持音频元素。
</audio>
  • <audio>：定义音频内容，controls 属性提供控件（如播放、暂停按钮）。

视频

<video controls width="320" height="240">
    <source src="movie.mp4" type="video/mp4">
    您的浏览器不支持视频元素。
</video>
  • <video>：定义视频内容，controls 属性提供控件，width 和 height 属性指定视频的宽度和高度。

语义化标签

HTML5引入了一些新的语义化标签，用于更好地描述页面结构：

<header>页面头部</header>
<nav>导航链接</nav>
<article>文章内容</article>
<section>区段</section>
<aside>侧边栏</aside>
<footer>页面底部</footer>
  • <header>：定义文档或区段的头部。
  • <nav>：定义导航链接。
  • <article>：定义独立的内容区块。
  • <section>：定义文档中的区段。
  • <aside>：定义侧边栏。
  • <footer>：定义文档或区段的底部。
Last Updated:
Contributors: Lee