HTML 与 CSS 基础及书写规范

一句话：HTML 搭骨架，CSS 管表现——先把语义和盒模型搞对，再谈动画和框架。

写在前面

本文合并整理原「HTML/CSS 必备知识」与「命名和书写习惯」两篇笔记，按现代入门结构重写（废弃 font 标签式写法，保留实用考点）。

一、HTML 语义结构

常用标签

路径

二、CSS 如何生效

三种写法

1. 行内 style="" — 优先级高、难维护（JS 改样式时除外）
2. 内部 <style> — 单页小 demo
3. 外部 <link rel="stylesheet"> — 生产推荐

选择器与优先级

权重大致：!important > 行内 > #id > .class > 标签。

同一级：后写的覆盖先写的（层叠）。

盒模型

content + padding + border + margin

box-sizing: border-box 让 width 含 padding/border（布局更直觉）。

三、布局入门

Flex（一维）

.container {
  display: flex;
  justify-content: center;  /* 主轴 */
  align-items: center;      /* 交叉轴 */
  gap: 1rem;
}

常见需求

四、命名与书写规范（原 29 篇精华）

命名原则

• 小写英文，短横线连接：search-box，不用 _ 混用
• 语义化：nav、sidebar、btn-primary
• 避免 div1、red 当类名（颜色用 text-primary 等设计 token）

页面结构 id/class 参考

BEM 简版

<div class="card card--featured">
  <h3 class="card__title">标题</h3>
</div>

块 card、元素 __title、修饰符 --featured。

属性书写顺序（建议）

显示 → 定位 → 盒模型 → 字体文本 → 视觉（颜色/背景）→ 动画。

五、图片与媒体

响应式：max-width: 100%；本博客封面比 3:2。

踩坑

1. 用 br 撑间距 → 改 margin/padding
2. 滥用 !important → 难覆盖
3. 全站 h1 多个 → SEO 降权
4. 不写 alt → 无障碍与 SEO 受损

小结

• HTML 先语义标签，再 div 补位
• CSS 掌握盒模型 + Flex + 层叠规则
• 命名跟 BEM/团队规范，便于与 Vue/Tailwind 协作

原独立文章 html和css命名和书写习惯 已合并入本篇。

延伸阅读

• MDN HTML 指南
• MDN CSS 指南