HTML标签通过内置默认display值决定布局行为：block元素（如<div><p>）独占一行、可设宽高；inline元素（如<span>）并排显示、宽高无效；inline-block元素（如<img><input>）并排且可设宽高；语义标签（如<header><section>）默认为block，不影响样式但提升结构与可访问性；void元素（如<img><meta>）严禁写结束标签，否则解析异常。
HTML 标签如何决定元素在页面中的布局行为
HTML 标签本身不直接控制视觉样式，但它们自带默认的 display 值，这直接影响元素是否独占一行、能否设宽高、是否参与文档流。浏览器内置的用户代理样式表（UA stylesheet）为每个标签预设了这些值。
常见表现形式分三类：
-
<div>、<p>、<h1>～<h6>、<ul>、<ol>默认是display: block：独占一行，宽度撑满父容器，可设width/height/margin/padding -
<span>、<strong>、<em>、<a>默认是display: inline：不换行，宽度由内容决定，不能设width/height，margin仅左右生效 -
<img>、<input>、<button>默认是display: inline-block：不换行但可设宽高和全部 margin/padding，常被误认为“天然居中”——其实只是 inline 水平对齐导致的视觉错觉
为什么 <div> 和 <span> 看起来“没区别”，实际影响很大
表面看都是空容器，但语义和默认渲染完全不同：<div> 是块级容器，天然形成布局上下文；<span> 是行内容器，强行塞进段落里可能破坏换行逻辑。
典型踩坑场景：
立即学习“前端免费学习笔记（深入）”；
- 用
<span>包裹一段文字并想加margin-top—— 不生效，因为 inline 元素忽略垂直 margin - 把多个
<div>并排写，结果竖着堆叠 —— 因为它们默认是 block，不是 flex 或 inline-block - 给
<a>加display: block后点击区域变大，但若没清除默认text-decoration，下划线会撑满整块
<header>、<section> 这类语义化标签会影响结构还是样式？
纯语义标签（<header>、<nav>、<main>、<article>、<aside>、<footer>）默认仍是 display: block，和 <div> 渲染一致。它们不改变视觉表现，只影响 DOM 结构层级、辅助技术（如屏幕阅读器）解析和 SEO 权重。
但要注意：
- 某些旧版浏览器（如 IE8 及更早）不认识这些标签，需
document.createElement注册或引入html5shiv - 如果用
<section>替代<div>却不配合 heading（<h2>等），会导致文档大纲断裂，无障碍访问工具无法正确构建导航树 - CSS 选择器如
section > h2依赖真实嵌套关系，若写成<section><div><h2>就失效
自闭合标签（如 <img>、<meta>）为什么不能写 </img>
HTML5 规范明确将 <img>、<input>、<link>、<br>、<hr> 等定义为 void elements，即“不允许有结束标签”。写成 <img src="x"></img> 会被解析器忽略闭合标签，甚至干扰后续 DOM 结构。
错误示例后果：
-
<img src="a.jpg"></img><p>text</p>→ 实际解析为<img src="a.jpg"><p>text</p>，</img>被丢弃 -
<meta charset="utf-8"></meta>→ 第二个</meta>被当成无效标记，可能触发 HTML 验证警告 - 在 XHTML 模式下强制要求闭合（
<img src="x" />），但现代 HTML5 页面无需也不推荐这种写法
真正需要关注的是属性拼写和值合法性——比如 <img src="" alt=""> 中 alt 为空且非装饰图，会被屏幕阅读器读作“图片”，造成可访问性问题。
