万花筒般的HTML标签世界：详解常用HTML标签

最新推荐文章于 2024-08-29 10:19:45 发布

花生君

最新推荐文章于 2024-08-29 10:19:45 发布

阅读量731

点赞数 4

分类专栏：经验分享文章标签： html5 前端

本文链接：https://blog.csdn.net/m0_54701273/article/details/141266082

版权

经验分享专栏收录该内容

63 篇文章 5 订阅

订阅专栏

HTML（超文本标记语言）是构建网页的基本语言。它通过标签来标记内容的性质，使得浏览器能够解析和显示这些内容。对于前端开发人员来说，掌握常用的HTML标签是必备技能。今天，我们将一起来探索这些标签，了解它们的用途及具体使用方法。

1. 基本结构标签

<!DOCTYPE html>：声明文档类型，告知浏览器这是一个 HTML5 文档。
<html>：根元素，包含整个 HTML 文档。
<head>：包含文档的元数据（metadata），如标题、样式、脚本等。
<title>：定义文档的标题，在浏览器标签栏显示。
<meta>：提供文档的元数据，如字符集、作者、描述等。
<link>：用于链接外部资源，如 CSS 文件。
<script>：用于嵌入或引用 JavaScript 代码。
<body>：包含文档的主体内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Title</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Content goes here -->
</body>
</html>

2. 文本内容标签

<h1> 至 <h6>：定义六个级别的标题，<h1> 级别最高，<h6> 级别最低。
<p>：定义一个段落。
<br>：插入一个换行符。
<hr>：插入一个水平线（水平分割线）。
<strong>：定义重要的文本，通常显示为粗体。
<em>：定义强调的文本，通常显示为斜体。
<small>：定义小号文本。
<blockquote>：定义一个长的引用。
<q>：定义一个短的引用。
<cite>：定义引用的来源。
<code>：定义计算机代码片段。
<pre>：定义预格式化文本，保留空格和换行。

<h1>Main Title</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph with a <strong>strong</strong> word and an <em>emphasized</em> word.</p>
<blockquote>
    This is a long quote.
</blockquote>
<pre>
    Preformatted text
    with preserved spaces
    and line breaks.
</pre>

3. 链接和媒体标签

<a>：定义一个超链接。
<img>：定义一个图像。
<audio>：定义音频内容。
<video>：定义视频内容。
<iframe>：定义一个内联框架，用于嵌入另一个文档。

<a href="https://www.example.com">Visit Example</a>
<img src="image.jpg" alt="Description of image">
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>
<video controls>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video element.
</video>
<iframe src="https://www.example.com" width="600" height="400"></iframe>

4. 列表标签

<ul>：定义一个无序列表。
<ol>：定义一个有序列表。
<li>：定义列表中的一个项目。

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

<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

5. 表格标签

<table>：定义一个表格。
<tr>：定义表格中的一行。
<th>：定义表格中的表头单元格。
<td>：定义表格中的单元格。
<caption>：定义表格的标题。

<table>
    <caption>Table Title</caption>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>

6. 表单标签

<form>：定义一个表单。
<input>：定义一个输入控件。
<label>：定义输入控件的标签。
<textarea>：定义一个多行文本输入控件。
<button>：定义一个按钮。
<select>：定义一个下拉列表。
<option>：定义下拉列表中的选项。

<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <label for="message">Message:</label>
    <textarea id="message" name="message"></textarea>
    <button type="submit">Submit</button>
</form>

7. 语义化标签

<header>：定义文档或部分的头部。
<nav>：定义导航链接的部分。
<main>：定义文档的主要内容。
<footer>：定义文档或部分的页脚。
<article>：定义一篇独立的文章。
<section>：定义文档中的一个独立的内容区域。
<aside>：定义与主要内容相关的辅助内容。

<header>
    <h1>Website Header</h1>
    <nav>
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
    </nav>
</header>

<main>
    <article>
        <h2>Article Title</h2>
        <p>This is an article.</p>
    </article>
    <section>
        <h2>Section Title</h2>
        <p>This is a section.</p>
    </section>
    <aside>
        <h2>Aside Title</h2>
        <p>This is an aside.</p>
    </aside>
</main>

<footer>
    <p>Website Footer</p>
</footer>

这些标签是构建 HTML 文档的基础，通过合理使用这些标签，可以创建结构清晰、语义明确的网页。