常用标签

掌握HTML常用标签是网页开发的第一步，以下是高频使用的核心标签。

文本标签

段落与标题

<!-- 标题 h1-h6 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

<!-- 段落 -->
<p>这是一个段落文本</p>

<!-- 换行 -->
第一行<br>第二行

<!-- 水平线 -->
<hr>

文本格式化

<strong>重要文本（加粗）</strong>
<em>强调文本（斜体）</em>
<mark>高亮文本</mark>
<small>小号文本</small>
<del>删除文本</del>
<ins>插入文本</ins>
<sub>下标</sub>
<sup>上标</sup>

链接标签

基础链接

<!-- 外部链接 -->
<a href="https://example.com">外部网站</a>

<!-- 新窗口打开 -->
<a href="https://example.com" target="_blank">新窗口</a>

<!-- 页内锚点 -->
<a href="#section1">跳转章节</a>
<h2 id="section1">章节1</h2>

协议链接

<a href="mailto:test@example.com">发送邮件</a>
<a href="tel:13800138000">拨打电话</a>
<a href="file.pdf" download>下载文件</a>

图片标签

<img src="image.jpg" alt="图片描述" width="300" height="200">

列表标签

无序列表

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
</ul>

有序列表

<ol>
    <li>第一步</li>
    <li>第二步</li>
</ol>

定义列表

<dl>
    <dt>术语</dt>
    <dd>定义描述</dd>
</dl>

容器标签

div与span

<!-- div：块级容器 -->
<div class="container">
    <div class="row">行容器</div>
</div>

<!-- span：行内容器 -->
<p>文本中<span class="highlight">高亮部分</span>继续文本</p>

标签类型对比

块级标签

<div>、<p>、<h1>-<h6>、<ul>、<ol>、<li>、<table>、<form>、<header>、<footer>、<section>、<article>

特点：

• 独占一行
• 可设置宽高
• 可包含块级和行内元素

行内标签

<span>、<a>、<img>、<strong>、<em>、<br>、<input>、<button>

特点：

• 不独占一行
• 不能设置宽高（img除外）
• 只能包含行内元素

要点总结

1. 标题层级：h1最高，每页通常只用一个h1
2. alt必写：图片alt提升可访问性和SEO
3. 语义优先：优先使用语义化文本标签
4. 容器选择：大区域用div，小片段用span