适合初学者的HTML网页分块布局代码-html教程-PHP中文网

语义化标签（header/main/footer）、重置盒模型、flex布局、max-width居中是构建可用页面的四步基础：header放logo导航，main唯一且不嵌套，footer按需使用；重置margin/padding并设box-sizing；用flex对齐替代float；先控宽再响应式。

适合初学者的html网页分块布局代码

用 `<header></header>`、`<main></main>`、`<footer></footer>` 搭出基础结构

浏览器能识别语义化标签，不靠 CSS 也能看出页面骨架。初学者常直接堆 <div>，结果改起来费劲、屏幕阅读器也读不准。用原生语义标签是最低成本的结构保障。<ul> <li> <code><header></header> 放 logo、导航栏；一个页面通常只用一次

<main></main> 只能出现一次，且不能嵌套在 <article></article> 或 <aside></aside> 里——这是 W3C 明确规定的

<footer></footer> 不一定在页面最底：它属于其最近的 <section></section> 或整个页面，按需使用

给块加边框和间距前先重置 `margin` 和 `padding`

直接写 margin: 20px; 很容易被浏览器默认样式干扰，比如 <h1></h1> 自带上下边距，<p></p> 也有，叠在一起就失控。

开头加一段 * { margin: 0; padding: 0; box-sizing: border-box; } ——box-sizing: border-box 让 width/height 包含 padding 和 border，计算更直观
别用 float 布局：初学容易卡在“父容器塌陷”上，现在用 display: flex 或 display: grid 更稳
想让 <header></header> 固定在顶部？加 position: sticky; top: 0; 就行，不用 JS

用 `flex` 快速对齐导航栏和内容区

导航栏左对齐 logo、右对齐菜单项，或者三栏等宽卡片，flex 几行代码就能搞定，比传统浮动或绝对定位容错率高得多。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
<p>.nav ul {
display: flex;
list-style: none;
gap: 1rem;
}</p>

justify-content 控制主轴（默认水平）对齐方式：flex-start、center、space-between 最常用
gap 替代 margin 控制子元素间距，不会影响首尾元素的外边距
如果内容区要两栏布局（左侧文章+右侧侧边栏），给 <main></main> 加 display: flex;，再设子元素 flex: 3 和 flex: 1 即可