HTML标签使用手册：新手必看的20个常用标签详解

本文链接：https://blog.youkuaiyun.com/qq_63520660/article/details/145536371

一、写给初学者的前言

学习HTML就像学习写字，首先要认识每个"笔画"（标签）的用法。本文将通过生活化的比喻+实例代码，带你快速掌握最常用的20个HTML标签。即使零基础，也能轻松搭建出结构清晰的网页！

二、网页的基本骨架

每个HTML文件都像一本精装书，必须有以下结构：

<!DOCTYPE html>  <!-- 声明这是HTML5文档 -->
<html>           <!-- 整本书的封面封底 -->
<head>           <!-- 书的版权页（用户看不见） -->
    <meta charset="UTF-8">  <!-- 设置字符编码 -->
    <title>我的第一个网页</title>  <!-- 书名 -->
</head>
<body>           <!-- 书的正文内容 -->
    <!-- 所有可见内容都写在这里 -->
</body>
</html>

三、常用标签详解（附代码示例）

1️⃣ 文本排版标签

标签	作用	示例	注意点
`<h1>`~`<h6>`	标题	`<h1>主标题</h1>`	从h1到h6字号递减，每页建议只有一个h1
`<p>`	段落	`<p>这是一个段落</p>`	会自动添加段间距
`<br>`	换行	`第一行<br>第二行`	单标签，不需要闭合
`<hr>`	分割线	`<hr>`	常用于内容区块分隔
`<strong>`	强调	`<strong>重要!</strong>`	显示为加粗，表示语义重要性
`<em>`	强调	`<em>请注意</em>`	显示为斜体，表示语气强调

对比实验：

<p>这是普通文本</p>
<p><strong>这是重要文本</strong></p>
<p><em>这是强调文本</em></p>

2️⃣ 媒体标签

图片标签 `<img>`

<img src="cat.jpg" 
     alt="一只橘猫" 
     width="300" 
     title="点击查看大图">

关键属性：
- src：图片路径（必填）
- alt：图片加载失败时的替代文字（必填）
- width/height：控制尺寸（建议只设置一个保持比例）

多媒体标签（HTML5新增）

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

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

3️⃣ 导航与链接

超链接 `<a>`

<!-- 外部链接 -->
<a href="https://www.example.com" target="_blank">访问示例网站</a>

<!-- 锚点链接 -->
<a href="#section2">跳转到第二部分</a>
<h2 id="section2">第二部分内容</h2>

<!-- 下载链接 -->
<a href="document.pdf" download>下载PDF</a>

4️⃣ 列表标签

无序列表（购物清单样式）

<ul>
    <li>牛奶</li>
    <li>面包</li>
    <li>鸡蛋</li>
</ul>

有序列表（烹饪步骤）

<ol>
    <li>准备食材</li>
    <li>热锅倒油</li>
    <li>翻炒食材</li>
</ol>

5️⃣ 表格标签

<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>城市</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
        <td>北京</td>
    </tr>
</table>

<tr>：表格行
<td>：普通单元格
<th>：表头单元格（自动加粗居中）

6️⃣ 表单标签（用户输入）

<form action="/submit">
    <!-- 文本输入 -->
    <label>用户名：<input type="text" required></label>
    
    <!-- 密码输入 -->
    <label>密码：<input type="password"></label>
    
    <!-- 下拉选择 -->
    <select>
        <option value="bj">北京</option>
        <option value="sh">上海</option>
    </select>
    
    <!-- 多行文本 -->
    <textarea rows="4" placeholder="请输入留言..."></textarea>
    
    <!-- 提交按钮 -->
    <button type="submit">提交</button>
</form>

7️⃣ 布局标签（HTML5语义化）

标签	用途说明	示例场景
`<header>`	网页头部	放置Logo和导航
`<nav>`	导航区域	主导航菜单
`<section>`	内容区块	文章章节
`<article>`	独立内容	博客文章、新闻
`<footer>`	网页底部	版权信息、联系方式
`<div>`	通用容器	样式布局

四、新手避坑指南

1️⃣ 常见错误案例

<!-- 错误示例：重复id -->
<div id="header"></div>
<div id="header"></div> <!-- id必须唯一 -->

<!-- 错误示例：标签嵌套 -->
<a href="#">
    <a href="#">禁止嵌套!</a> 
</a>

<!-- 错误示例：忘记闭合标签 -->
<p>这是一个未闭合的段落

2️⃣ 属性使用禁忌

属性	适用标签	错误用法示例
`disabled`	表单元素	`<p disabled>`
`multiple`	`<input type="file">`	`<input type="text" multiple>`
`selected`	`<option>`	`<input selected>`

五、实战案例：个人简介页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>张三的简历</title>
</head>
<body>
    <header>
        <h1>张三</h1>
        <nav>
            <a href="#info">基本信息</a> |
            <a href="#skills">技能特长</a>
        </nav>
    </header>

    <section id="info">
        <h2>📌 基本信息</h2>
        <img src="avatar.jpg" alt="头像" width="150">
        <ul>
            <li>年龄：25岁</li>
            <li>职业：前端开发学习者</li>
            <li>邮箱：zhangsan@example.com</li>
        </ul>
    </section>

    <section id="skills">
        <h2>💻 技能特长</h2>
        <ol>
            <li>HTML网页结构搭建</li>
            <li>基础CSS样式编写</li>
            <li>JavaScript交互开发</li>
        </ol>
    </section>

    <footer>
        <hr>
        <p>© 2023 张三的简历</p>
    </footer>
</body>
</html>