html标签怎么用_html常用标签使用指南【基础】

html标签的关键在于正确使用位置和属性，空元素如不可闭合，与区别在显示行为与嵌套规则，嵌套块级元素需谨慎，放置位置影响dom操作，嵌套层级须符合规范。

HTML 标签不是“怎么用”的问题，而是“在哪用、为什么必须这么写”的问题——写错位置或漏掉关键属性，浏览器要么不渲染，要么渲染出完全不符合预期的结构。

标签必须成对出现吗？<img alt="html标签怎么用_html常用标签使用指南【基础】" > 和 <br> 为什么没闭合

不是所有标签都需要闭合。html5 明确把 <img alt="html标签怎么用_html常用标签使用指南【基础】" >、<br>、<input>、<meta> 这类叫“空元素”（void elements），它们天生没有内容，语法上禁止写 <img alt="html标签怎么用_html常用标签使用指南【基础】" > 或 <br>。

• 写成 <img src="a.jpg" alt="html标签怎么用_html常用标签使用指南【基础】" > 不报错但无效，浏览器只认前半段，后半段被忽略
• xml 风格的自闭合写法 <img src="a.jpg" alt="html标签怎么用_html常用标签使用指南【基础】" > 在 HTML5 中合法，但斜杠纯属冗余，没必要加
• 混淆点常出现在 <div> 里误用 <code><p></p>：比如 <p>第一段</p> <p>第二段</p>，第二个 <p></p> 会自动触发前一个闭合，实际生成两个独立 <p></p>，不是嵌套
  

  <div> 和 <code><span></span> 到底该选哪个

  区别不在“语义强弱”，而在“默认显示行为”和“可嵌套范围”。<div> 是块级容器，<code><span></span> 是行内容器，这个差异直接影响布局和 CSS 作用方式。

  立即学习“前端免费学习笔记（深入）”；

  • <div> 默认独占一行，能直接设 <code>width/height，可以嵌套任何块级或行内元素
  • <span></span> 默认不换行，宽度由内容撑开，不能直接设宽高（除非改 display），只能嵌套行内元素（比如不能往 <span></span> 里塞 <div>） <li>常见错误：用 <code><span></span> 包一段按钮组想水平排列，结果按钮堆成一串没间距——该用 <div> 加 <code>display: flex，而不是硬调 <span></span> 的样式
    

    为什么 <a></a> 里套 <div> 会出问题 <p>HTML5 允许 <code><a></a> 包含块级元素，但前提是它“不包含交互式内容”——而 <button></button>、另一个 <a></a>、<input> 就不行。更关键的是，老浏览器或某些辅助工具可能不识别这种写法。

    • 现象：点击区域变小、键盘 Tab 跳转异常、屏幕阅读器读不出完整链接文本
    • 真正安全的写法是让 <a></a> 只包裹行内内容，块级结构用外层 <div> + <code>onclick 或事件委托替代
    • 如果非要用 <a></a> 包块级内容，确保 href 有效、加 role="link"、测试键盘导航路径

    <script></script> 放 还是 底部

    放哪取决于脚本是否操作 DOM。放在 里又没加 defer 或 async，99% 会报 Cannot read Property 'xxx' of NULL——因为 DOM 还没加载完，document.getElementById 找不到元素。

    • 同步脚本（无 async/defer）：必须放在 前，或监听 DOMContentLoaded
    • defer：脚本按顺序下载，等 DOM 解析完再执行，适合依赖 DOM 的初始化逻辑
    • async：下载不阻塞，下载完立刻执行，适合统计、广告等无依赖脚本，但执行顺序不确定
    • 现代写法倾向：放 + defer，比手动挪到底部更可控

    最常被忽略的其实是标签嵌套层级和上下文限制——比如 <p></p> 里不能放 <h1></h1>，<li> 外不能直接写 <div>，这些不是浏览器宽容就能绕过的规则，而是解析器强制修正的结果。写的时候顺手验证下 DOM 结构，比事后调试快得多。</div>