HTML常用标签用法全解析：构建语义化网页的核心指南

news2025/5/17 16:57:47

HTML作为网页开发的基石，其标签的合理使用直接影响页面的可读性、SEO效果及维护性。本文系统梳理HTML核心标签的用法，结合语义化设计原则与实战示例，助你构建规范、高效的网页结构。

一、基础结构与排版标签

1.1 文档结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

<!DOCTYPE html>：声明HTML5文档类型
<html>：根元素，lang属性指定语言（如zh-CN支持中文SEO优化）
<head>：存放元数据，如CSS/JS链接、视口设置

1.2 标题与段落

标签	说明	示例
`<h1>`	最高级标题，一个页面仅一个	*`<h1>主标题</h1>`*
`<p>`	段落文本，自动添加上下间距	`<p>这是一个段落</p>`
`<br>`	换行（非段落结束），如地址分行显示	`地址：<br>北京市`
`<hr>`	水平分隔线，用于内容区块分隔	`<hr>`

注意：

h1到h6层级递减，字体大小与语义权重同步降低
多个空格/回车在HTML中仅显示为一个空格，需用<br>或<pre>保留格式

二、文本格式化与语义标签

2.1 强调与样式

标签	语义说明	示例
`<strong>`	重要内容（屏幕阅读器强调）	`<strong>警告！</strong>`
`<em>`	强调语气（斜体）	`<em>请注意</em>`
`<del>`	删除文本（原价显示）	`<del>￥999</del>`
`<sub>/<sup>`	下标/上标（化学公式、注释）	`H<sub>2</sub>O`
`<pre>`	保留空格与换行（代码展示）	`<pre>console.log("Hello");</pre>`

对比：

<b>仅加粗样式，<strong>强调语义
<i>为斜体样式，<em>表示强调语气

2.2 容器标签

标签	用途	特性
`<div>`	通用块级容器，用于布局划分	无默认样式，需CSS修饰
`<span>`	行内容器，包裹短文本或图标	与`<p>`不同，不自动换行
`<header>`	页面/区块头部（Logo、导航）	语义化替代`<div class="header">`
`<footer>`	页脚（版权信息、联系方式）	提升SEO可读性

三、超链接与媒体嵌入

3.1 超链接（`<a>`）

<a href="https://example.com" target="_blank" title="示例网站">访问</a>

属性：
- target="_blank"：新标签页打开
- href="#section1"：页内锚点跳转（需配合id）
- download：强制下载资源（如PDF文件）

3.2 图像（`<img>`）

<img src="image.jpg" alt="图片描述" width="400" loading="lazy">

关键属性：
- alt：图片加载失败时的替代文本（SEO必备）
- loading="lazy"：延迟加载提升性能

3.3 音视频（HTML5新增）

<video controls muted autoplay>
    <source src="video.mp4" type="video/mp4">
</video>
<audio src="audio.mp3" controls></audio>

controls：显示播放控件
autoplay muted：自动播放需静音（浏览器策略）

四、列表与表格

4.1 列表类型

类型	标签结构	适用场景
无序列表	*`<ul><li>项目</li></ul>`*	导航菜单、商品特征
有序列表	*`<ol><li>步骤1</li></ol>`*	操作流程、排名展示
自定义列表	`<dl><dt>术语</dt><dd>解释</dd></dl>`	词汇表、参数说明

4.2 表格构建

<table border="1">
    <thead>
        <tr><th>姓名</th><th>年龄</th></tr>
    </thead>
    <tbody>
        <tr><td>张三</td><td>25</td></tr>
    </tbody>
</table>

合并单元格：
- colspan="2"：跨列合并
- rowspan="2"：跨行合并
语义化结构：<thead>、<tbody>、<tfoot>分割表格区域

五、表单交互元素

5.1 基础表单

<form action="/submit" method="POST">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="username" required>
    
    <label>性别：
        <input type="radio" name="gender" value="male">男
        <input type="radio" name="gender" value="female">女
    </label>
    
    <input type="submit" value="提交">
</form>

输入类型：
- type="email"：邮箱格式验证
- type="password"：掩码输入
- type="file"：文件上传

5.2 高级控件

控件	标签	功能
下拉选择	`<select><option>选项</option>`	省市区选择、分类筛选
多行文本	`<textarea rows="4"></textarea>`	用户评论、长文本输入
日期选择	`<input type="date">`	生日、预约时间选择