标签的正确用途是什么？

正确使用HTML标签能提升结构清晰度、可读性和SEO效果。1.

<div>是块级元素，适合布局和包裹大段内容，而<span>是行内元素，用于小范围文字控制或逻辑结构；常见错误包括在不该换行的地方使用<div>或滥用其布局而忽略语义化标签如<header>、<main>。2.表单中应通过for属性绑定<label>与<input>的id，以提升交互和无障碍体验，或将<input>嵌套在<label>内省略属性关联。3.必须写alt属性，用于替代显示和无障碍访问，装饰性图片可设空值但不可省略属性；常见误区包括用文件名或模糊描述代替具体语义。

HTML 标签的正确使用，其实并不是什么高深技术，但很多人在写网页的时候会忽略一些细节，导致结构混乱、可读性差甚至影响 SEO。想写出规范又实用的 HTML 页面，了解常用标签的作用和正确的用法是关键。

tag?" />

1. <div> 和 <code><span></span>：块级与行内容器的区别

<div> 是一个块级元素，默认情况下会独占一行，适合用来包裹一大段内容或作为布局容器；而 <code><span></span> 是行内元素，通常用于小范围的文字样式控制或者插入一小段逻辑结构。

比如你有一段文字，其中几个词需要特别处理：

tag?" />

<p>这是一段普通的文字，其中<em>“某些词语”</em>被强调了。</p>

这里如果只是加粗或者颜色变化，用 <span> 就够了；但如果要单独设置一个区块，比如一段介绍信息，那更适合用 <div> 或更语义化的标签如 <section>。

常见错误：

tag?" />

• 在不该换行的地方用了 <div>
• 用 <div> 堆砌整个页面结构，忽略了更有意义的标签（如 <header>、<main>、<footer>）

2. 表单中的 <label> 和 <input> 关联方式

很多人写表单时直接放个 <input>，不加 <label> 或者随便套个 for 属性，结果用户点击 label 无法聚焦输入框。正确的做法是通过 for 属性绑定 label 和 input 的 id：

<label for="username">用户名：</label>
<input type="text" id="username" name="username">

这样不仅对鼠标用户友好，也提升了屏幕阅读器等辅助工具的体验。

另外一个小技巧：
如果你把 <input> 放在 <label> 里面，也可以不用写 for 和 id：

<label>
  记住我
  <input type="checkbox" name="remember">
</label>

这种方式虽然省事，但需要注意嵌套结构是否会影响样式布局。

3. 图片标签 <img src="/static/imghw/default1.png" data-src="photo.jpg" class="lazy" alt="标签的正确用途是什么？" > 必须带 alt 属性

<img src="/static/imghw/default1.png" data-src="photo.jpg" class="lazy" alt="<页脚>标签的正确用途是什么？"> 中的 alt 属性不是可选，而是必须写。它有两个重要作用：

• 当图片加载失败时显示替代文字
• 提升网站无障碍访问能力，方便屏幕阅读器识别

如果你的图片是纯装饰性的，那可以留空 alt=""，但不能省略这个属性。

常见误区：

• 把 alt 写成文件名（例如 “banner1.jpg”）
• 忽略图片语义，写得过于笼统（比如只写“图片”）

---

基本上就这些。HTML 不复杂，但很多细节容易被忽视，尤其是刚开始学的人。多注意标签的意义和用法，不仅能写出更清晰的代码，还能提升用户体验和页面性能。