html标签通过内置默认display值决定布局行为：block元素（如）独占一行、可设宽高；inline元素（如）并排显示、宽高无效；inline-block元素（如）并排且可设宽高；语义标签（如）默认为block，不影响样式但提升结构与可访问性；void元素（如）严禁写结束标签，否则解析异常。

HTML 标签如何决定元素在页面中的布局行为

HTML 标签本身不直接控制视觉样式，但它们自带默认的 display 值，这直接影响元素是否独占一行、能否设宽高、是否参与文档流。浏览器内置的用户代理样式表（UA stylesheet）为每个标签预设了这些值。

常见表现形式分三类：

• <div>、<code><p></p>、<h1></h1>～<h6></h6>、<ul></ul>、<ol></ol> 默认是 display: block：独占一行，宽度撑满父容器，可设 width/height/margin/padding
• <span></span>、<strong></strong>、<em></em>、<a></a> 默认是 display: inline：不换行，宽度由内容决定，不能设 width/height，margin 仅左右生效
• <img>、<input>、<button></button> 默认是 display: inline-block：不换行但可设宽高和全部 margin/padding，常被误认为“天然居中”——其实只是 inline 水平对齐导致的视觉错觉

为什么 <div> 和 <code><span></span> 看起来“没区别”，实际影响很大

表面看都是空容器，但语义和默认渲染完全不同：<div> 是块级容器，天然形成布局上下文；<code><span></span> 是行内容器，强行塞进段落里可能破坏换行逻辑。

典型踩坑场景：

• 用 <span></span> 包裹一段文字并想加 margin-top —— 不生效，因为 inline 元素忽略垂直 margin
• 把多个 <div> 并排写，结果竖着堆叠 —— 因为它们默认是 block，不是 flex 或 inline-block <li>给 <code><a></a> 加 display: block 后点击区域变大，但若没清除默认 text-decoration，下划线会撑满整块

<header></header>、<section></section> 这类语义化标签会影响结构还是样式？

纯语义标签（<header></header>、<nav></nav>、<main></main>、<article></article>、<aside></aside>、<footer></footer>）默认仍是 display: block，和 <div> 渲染一致。它们不改变视觉表现，只影响 DOM 结构层级、辅助技术（如屏幕阅读器）解析和 SEO 权重。 <p>但要注意：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx"><img src="https://img.php.cn/upload/skill/000/000/081/179051045119472.jpg" alt="html-to-pptx" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="overflowclass">html-to-pptx</a> <p class="overflowclass">将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。</p> </div> <a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>某些旧版浏览器（如 IE8 及更早）不认识这些标签，需 <code>document.createElement 注册或引入 html5shiv

• 如果用 <section></section> 替代 <div> 却不配合 heading（<code><h2></h2> 等），会导致文档大纲断裂，无障碍访问工具无法正确构建导航树
• CSS 选择器如 section > h2 依赖真实嵌套关系，若写成 <section><div> <h2> 就失效 <h3>自闭合标签（如 <code><img>、<meta>）为什么不能写

HTML5 规范明确将 <img>、<input>、<link>、<br>、<hr> 等定义为 void elements，即“不允许有结束标签”。写成 <img src="x"> 会被解析器忽略闭合标签，甚至干扰后续 DOM 结构。

错误示例后果：

• <img src="a.jpg"><p>text</p> → 实际解析为 <img src="a.jpg"><p>text</p>， 被丢弃
• <meta charset="utf-8"> → 第二个 被当成无效标记，可能触发 HTML 验证警告
• 在 XHTML 模式下强制要求闭合（<img src="x">），但现代 HTML5 页面无需也不推荐这种写法

真正需要关注的是属性拼写和值合法性——比如 <img src="" alt=""> 中 alt 为空且非装饰图，会被屏幕阅读器读作“图片”，造成可访问性问题。