前端学习进度小记2

语义化 HTML 学习笔记

语义化是一个自然的趋势，这是为了将真正的优化交给专门的层次做，人来更好的可读和维护我们的代码，在现代 Web 开发中，HTML 不仅仅是为了显示内容，更是传递结构与语义的语言。理解语义化 HTML，可以让我们的网页在可访问性、SEO、可维护性等方面都更出色。

所以什么是语义化（Semantic）HTML？

语义化 HTML 指的是使用能够表达内容意义的标签来构建网页，而不是单纯用 <div> 或 <span> 包裹所有内容。举个例子，下面就是一个现代的HTML网页描述

<header>
  <h1>My Blog</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h2>Understanding CSS</h2>
    <p>CSS is a stylesheet language used to describe the presentation of a document written in HTML.</p>
  </article>
  <aside>
    <h3>Related Articles</h3>
    <ul>
      <li><a href="#">HTML Basics</a></li>
      <li><a href="#">JavaScript Tips</a></li>
    </ul>
  </aside>
</main>
<footer>
  <p>&copy; 2025 My Blog</p>
</footer>

在上面的代码中，每个标签都有明确的意义：

<header> 表示页眉；
<nav> 表示导航菜单；
<main> 是主体内容；
<article> 表示独立的文章块；
<aside> 是侧边栏或补充内容；
<footer> 是页脚。

这样的结构不仅让开发者一眼就能看懂，也让屏幕阅读器和搜索引擎轻松理解页面结构。

为什么要关心语义化 HTML？

当然，不光是可维护性，咱们还有很多其他实实在在的好处可以考虑。比如说

可访问性提升

屏幕阅读器和其他辅助技术依赖 HTML 的语义来理解页面。例如：

<h2>最新文章</h2>
<ul>
  <li><a href="#">CSS 入门指南</a></li>
  <li><a href="#">JavaScript 异步学习</a></li>
</ul>

这里 <h2> 明确标记了“最新文章”的标题，辅助设备可以快速跳转和朗读，让视觉受限用户也能高效浏览内容。

SEO 更友好

搜索引擎通过语义标签理解页面内容：

<article> 表示独立条目；
<header> 和 <footer> 帮助区分页面结构；
<nav> 告诉搜索引擎哪些是导航链接。

可维护性与可读性

当团队协作时，语义化的 HTML 让同事更容易理解页面结构，减少注释依赖，也方便后期样式或功能扩展。

样式与结构分离

语义化 HTML 鼓励把内容结构和样式分开，通过 CSS 控制外观，而不是靠 <div> + 类名堆积样式。

良好的结构层次（Hierarchy）为何重要？

不要用 CSS 的 font-size 去模拟标题层级，语义性优先。

HTML 的标题标签 <h1>–<h6> 定义了文档的大纲（document outline）：

<h1>网页设计入门</h1>
<h2>HTML 基础</h2>
<h3>标签与属性</h3>
<h2>CSS 基础</h2>
<h3>选择器与优先级</h3>

一个良好的正确的层次可以提升可读性，用户可快速扫描信息，帮助屏幕阅读器理解内容层级。避免搜索引擎抓取混乱。

呈现型 HTML vs 语义化 HTML

表现型 HTML：关注外观或布局，过度使用 <b>, <i> 或 <div>/<span>。

<div class="header">
  <div class="logo">My Site</div>
  <div class="menu">...</div>
</div>

语义化 HTML：标记表达内容意义，结构清晰：

<header>
  <div class="logo">My Site</div>
  <nav>...</nav>
</header>

更多语义对比示例：

<!-- 不推荐 -->
<b>重要提示</b>
<i>强调内容</i>

<!-- 推荐 -->
<strong>重要提示</strong>
<em>强调内容</em>

<strong> 与 <em> 表示语义上重要或强调；
<b> 与 <i> 仅视觉效果，无语义意义。

常用语义元素与用途

类型	常用标签	用途
文档结构	`<header>`, `<nav>`, `<main>`, `<aside>`, `<section>`, `<article>`, `<footer>`	页面或区块结构
文本语义	`<p>`, `<h1>`–`<h6>`, `<blockquote>`, `<cite>`, `<q>`, `<address>`	段落、标题、引用、联系信息
强调	`<strong>`, `<em>`, `<mark>`	重要或强调内容
列表	`<ul>`, `<ol>`, `<li>`, `<dl>`, `<dt>`, `<dd>`	有序/无序列表或定义列表
媒体	`<figure>`, `<figcaption>`, `<picture>`, `<img alt="">`, `<audio>`, `<video>`	图片、音频、视频及说明
表单	`<form>`, `<label>`, `<fieldset>`, `<legend>`, `<input>`, `<button>`, `<select>`	用户输入交互
表格	`<table>`, `<thead>`, `<tbody>`, `<tfoot>`, `<tr>`, `<th>`, `<td>`	数据表格

从零开始理解 CSS：让网页“活”起来的语言

HTML是Backbone，那么CSS就是Decorator，一个装饰。正是因为有了 CSS，网页才从“能看”变成“好看”。

什么是 CSS？它在网页中扮演什么角色？

HTML 负责定义“是什么”，而 CSS 负责定义“看起来怎样”。比如下面这段 HTML：

<h1>Hello, world!</h1>
<p>Welcome to my website.</p>

没有 CSS 时，浏览器只是按默认样式展示。但只要加上一点点样式：

h1 {
  color: #0078d7;
  text-align: center;
  font-family: "Segoe UI", sans-serif;
}

p {
  color: #555;
  line-height: 1.6;
}

我们立刻就会有一个比刚才美观的多的样式了。

一条 CSS 规则的解剖结构

CSS 规则由两部分组成：选择器（selector） 和 声明块（declaration block）。

p {
  color: red;
  font-size: 18px;
}

选择器 p：告诉浏览器要选中所有 <p> 元素。
声明块 { ... }：包含若干“属性: 值”对。

每一条声明控制一个样式属性，结尾要加分号 ;。想象它就像“对谁做什么”：

对 p 元素，设置颜色为红色，字体大小为 18px。

meta viewport 是干嘛的？

当你打开一个网页，发现手机上文字小得几乎看不清，那很可能是因为它没有正确设置 viewport。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这行代码告诉浏览器“请以设备实际宽度渲染页面，而不是桌面那一套宽度再缩小。”，有了它，响应式设计才能发挥作用，否则所有内容都会被“压缩成迷你版 PC 页面”。

浏览器默认样式

浏览器其实自带一份“隐藏的 CSS 文件”，称为 User Agent Stylesheet。例如：

h1 { font-size: 2em; margin-top: 0.67em; margin-bottom: 0.67em; }
p  { margin-top: 1em; margin-bottom: 1em; }
ul { padding-left: 40px; }

这解释了为什么即使你没写样式，标题仍然是大号字，段落之间仍然有间距。实际开发中，常会使用 Normalize.css 或 CSS Reset 来清除这些差异，获得统一的起点。

三种写 CSS 的方式

我们有三种编写CSS的方式，分别是内联样式（Inline CSS），内部样式（Internal CSS）和外部样式（External CSS），其中第三个是我们最推介的。

内联样式（Inline CSS）

直接写在标签的 style 属性中：

<p style="color: blue;">This text is blue.</p>

优点是简单快捷；缺点是难维护、无法复用。
一般只在 JavaScript 动态修改样式时使用。

内部样式（Internal CSS）

写在 <style> 标签里：

<head>
  <style>
    p { color: green; }
  </style>
</head>

适合单页面的小项目。

外部样式（External CSS）

最推荐的方式：将样式写入单独文件，并在 <head> 中引入：

<link rel="stylesheet" href="styles.css">

这样可以缓存、复用、版本控制，更符合“内容与样式分离”的思想。

宽度与高度的工作方式

CSS 盒模型是理解布局的基础。默认情况下，每个元素都像一个盒子：

| margin |
| border |
| padding |
| content |

CSS 属性：

width: 200px;
height: 100px;
padding: 20px;
border: 2px solid black;
margin: 10px;

默认 box-sizing: content-box —— width 只包含内容，不含内边距和边框。
如果改为 box-sizing: border-box，则所有 padding 和 border 都会包含在宽高内，更易控制。

推荐全局设置：

* {
  box-sizing: border-box;
}

CSS 组合器（Combinators）

CSS 不仅能选择单个元素，还能表示层级关系：

div p { color: red; }     /* 后代选择器：div 内所有 p */
div > p { color: blue; }  /* 子选择器：div 直接子元素 p */
h1 + p { color: green; }  /* 相邻兄弟：紧跟在 h1 后的 p */
h1 ~ p { color: gray; }   /* 通用兄弟：同级中在 h1 后的所有 p */

掌握这些组合器，可以不用写太多类名也能精准控制结构样式。

Inline vs Block 元素

HTML 元素按默认 display 类型可分为两类：

类型	典型元素	特性
Block	`div`, `p`, `h1`, `section`	独占一行，可设置宽高
Inline	`span`, `a`, `strong`	不独占一行，宽高由内容决定

示例：

<p>This is <span style="color:red;">inline</span> text.</p>

span 不会换行，只在文本中“嵌入”。

Inline-Block：两者的结合

.menu-item {
  display: inline-block;
  width: 100px;
  height: 40px;
  background: #eee;
}

inline-block 元素会在同一行排列（像 inline），但能设置宽高（像 block）。
适合做导航按钮、标签列表等。

⚠️ 注意：HTML 中换行或空格会造成元素之间出现空隙，通常可通过删除空格、设置 font-size: 0 等方式解决。

Margin 与 Padding：内外间距

.box {
  margin: 20px;
  padding: 10px;
  background: #f5f5f5;
}

🔹 Padding（内边距）：内容与边框之间的空间。
🔹 Margin（外边距）：元素与外部（其他元素）之间的距离。

例如：

<div class="box">Hello</div>

padding 会让背景扩展更大；
margin 会让盒子与外部保持距离。

💡 特别提醒：垂直方向上相邻块级元素的 margin 可能会“塌陷”（collapse），取两者中较大者而非相加，这常常导致新手疑惑“为什么间距不对”。

CSS 的层叠与优先级

什么是 CSS Specificity（优先级）

当多个规则作用于同一个元素时，浏览器需要判断“谁说了算”。CSS Specificity（特异性 / 优先级） 就是浏览器决定“哪条规则更重要”的方式。

三种来源的优先级：Inline、Internal、External

CSS 的规则可以来自三个地方，它们的优先级从高到低为：

内联样式（Inline CSS）
写在 HTML 元素内，例如：

<p style="color: red;">Hello</p>

优先级最高，因为它是直接绑在元素上的命令。

内部样式（Internal CSS）
写在 <style> 标签中：

<style>
  p { color: blue; }
</style>

外部样式（External CSS）
从独立文件引入：

<link rel="stylesheet" href="style.css">

当冲突时：内联 > 内部 > 外部（但这只是源层级优先级，真正决胜的还有选择器特异性与层叠顺序。）

通用选择器 `*` 与它的特异性

* {
  margin: 0;
  padding: 0;
}

* 代表“所有元素”，但它的特异性最低。在优先级计算中，它几乎可以视作 0 分。你可以用它快速重置全局样式，但别指望它压过其他规则。他的主要作用就是快速的fallback所有元素的默认实现。

特异性数值：0,0,0,0

类型选择器（Type Selector）

类型选择器直接指定标签名，例如：

p {
  color: green;
}

它的特异性比通用选择器稍高，但仍然很低。通常用于定义全局样式或默认样式。

特异性数值：0,0,0,1

类选择器（Class Selector）

类选择器使用 . 开头，例如：

.highlight {
  color: orange;
}

特异性比标签更高，可以覆盖掉基础样式。如果你写多个类（比如 .btn.primary），特异性会累加。

特异性数值：0,0,1,0

ID 选择器（ID Selector）

ID 是页面中唯一的标识，例如：

#title {
  color: purple;
}

它的优先级非常高，几乎能覆盖掉大多数普通样式。

特异性数值：0,1,0,0

⚠️ **但不要滥用 ID！**一旦用它写样式，维护性会变差。修改或复用都很麻烦。建议 ID 只用于 JavaScript 钩子，不用于样式控制。

`!important`：有点强的特殊标识

在 CSS 中，你可以用 !important 提升某条声明的优先级：

p {
  color: blue !important;
}

即使别的规则更具体，它也会被强制覆盖。但要注意，这个“核弹”一旦多了，样式之间就会开始互相打架。尤其是当你在多个地方都用了 !important，就会出现“互相抵消、谁都不好改”的局面。

最佳实践：

✅ 用它临时覆盖第三方库的样式。
❌ 不要在自己项目的常规样式中乱用。
❌ 不要在组件级样式里堆 !important。

层叠（Cascade）算法的工作原理

CSS 的名字中就有「Cascading（层叠）」——它描述的正是浏览器如何“决定最终样式”的流程。
可以把它想象成一个多层过滤器：

来源层级（作者样式、用户样式、浏览器默认样式）→ 作者样式（你写的）优先于浏览器默认。
重要性（normal vs. !important）→ 带 !important 的规则优先。
特异性（Specificity）→ 比较选择器权重。
出现顺序（Order）→ 如果以上都相同，后出现的覆盖前面的。

p { color: black; }         /* 基础规则 */
.text { color: green; }     /* class，权重更高 */
#main p { color: red; }     /* ID，更高 */
p { color: blue !important; } /* 强制覆盖 */

最终结果：文字是蓝色，因为 !important 获胜。

CSS 的继承（Inheritance）

CSS 中部分属性会自动“传下去”，这就是继承。例如：

body {
  color: #333;
  font-family: "Arial";
}

则 <p>、<span>、<em> 等后代元素会自动继承这些文本属性。但像 margin、border、background 等盒模型相关的属性不会继承。你也可以手动控制继承：

p {
  color: inherit;  /* 强制继承父元素颜色 */
}

或者强制阻止继承：

span {
  color: initial;  /* 回到默认样式 */
}

继承是层叠系统中的“血脉”，它让样式结构更自然、更简洁。

CSS 列表与链接样式

使用 margin 与 line-height 调整列表间距

HTML 列表分为两种：<ul>（无序列表）与 <ol>（有序列表）。它们的默认样式通常带有缩进和项目符号：

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

默认的样式中，我们每个 <li> 独占一行，前面有黑点符号（bullet），而且有默认的 margin 与 padding。如果你希望更精确地控制间距，可以使用：

ul {
  margin: 0;           /* 外边距 */
  padding-left: 20px;  /* 缩进距离 */
}

li {
  margin-bottom: 8px;  /* 控制每项间距 */
  line-height: 1.5;    /* 调整行距 */
}

line-height 控制的是文本行间距，适合微调行内文本密度；margin 控制整个列表项之间的距离，更适合整体排版。

例如文章目录、评论区、侧边菜单，往往会同时用两者搭配，使排版既整齐又舒展。

二、深入理解 list-style 属性族

CSS 提供了 list-style 相关属性来控制列表符号的样式。
它其实是一个“属性族”，包括三个子属性：

属性	作用	示例
`list-style-type`	控制符号形状	`disc`, `circle`, `square`, `decimal`, `none`
`list-style-position`	控制符号位置（在内容外或内）	`outside`, `inside`
`list-style-image`	使用自定义图片作为符号	`url("icon.png")`

例如：

ul {
  list-style-type: square;         /* 改成方块 */
  list-style-position: inside;     /* 符号在内容内侧 */
}

或使用图标替换默认符号：

ul {
  list-style-image: url("check.png");
}

组合简写写法：

ul {
  list-style: square inside url("check.png");
}

⚠️ 小技巧：如果你打算用 ::before 自定义符号（例如更精细的设计），请记得先 list-style: none; 去除默认符号。

ul.custom-list {
  list-style: none;
  padding-left: 0;
}

ul.custom-list li::before {
  content: "✔";
  color: #4caf50;
  margin-right: 8px;
}

三、为什么默认链接样式如此重要？

当我们看到一段蓝色、带下划线的文字时，大脑会立即判断那是一个可点击的链接。这是一种“约定俗成”的可用性规范。因此，默认链接样式其实是网页可访问性（accessibility）的一部分。

HTML 默认定义了链接样式：

a:link    { color: #0000ee; text-decoration: underline; }
a:visited { color: #551a8b; }
a:hover   { color: #e60000; }
a:active  { color: #ff0000; }

如果你将所有链接都改成黑色无下划线，用户很可能分辨不出哪些是可点击的。所以即使定制了样式，也应保留明显的视觉反馈（颜色、下划线、hover 效果等）。

四、掌握链接的四种状态

CSS 允许我们针对不同状态定义样式，这被称为“链接伪类”。

a:link    { color: #0078d7; }   /* 未访问 */
a:visited { color: #551a8b; }   /* 已访问 */
a:hover   { color: #005fa3; }   /* 鼠标悬停 */
a:active  { color: #ff6600; }   /* 正在点击 */

示例：

<a href="#">普通链接</a>

效果：

初次加载时为蓝色；
点击过后变紫；
鼠标悬停变深蓝；
点击瞬间变橙色。

这种交互反馈不仅让页面“活”起来，也符合用户的心理预期。

深入理解 CSS 背景与边框：让页面更具层次感与可访问性

在掌握了文本、列表与链接的基础样式后，CSS 的下一步，是赋予页面丰富的视觉层次与质感。这部分内容将带你系统理解背景（background）与边框（border）相关的属性，包括背景图像的控制、渐变效果的创建、边框样式设计，以及设计时的可访问性思考。

背景图像的基础控制：Size、Repeat、Position、Attachment

CSS 的背景系统是极为强大的。通过 background-* 系列属性，我们可以精确控制背景图片的尺寸、平铺方式、定位和滚动行为。

设置背景图像

body {
  background-image: url('pattern.png');
}

这一行代码会在整个页面上绘制背景图片。
但仅此而已，往往还不够。图片会默认重复平铺（repeat），并从左上角开始绘制。

背景重复（background-repeat）

body {
  background-repeat: no-repeat;   /* 不重复 */
  background-repeat: repeat-x;    /* 横向重复 */
  background-repeat: repeat-y;    /* 纵向重复 */
}

一般来说，小图案或纹理（texture）会使用 repeat，而大背景图则使用 no-repeat。

背景位置（background-position）

背景默认从左上角开始绘制，我们可以通过关键字或坐标自定义位置：

body {
  background-position: center center;
  /* 或者使用像素/百分比 */
  background-position: 50% 50%;
}

这在响应式设计中尤其重要，可以保持图片主体永远居中。

背景尺寸（background-size）

控制图片如何适配容器：

body {
  background-size: cover;   /* 填满容器并裁剪 */
  background-size: contain; /* 等比例缩放，完整显示 */
}

cover 常用于 banner、hero section，保证视觉冲击力；
contain 则确保整个图片完整显示。

背景滚动行为（background-attachment）

该属性决定背景图像是否随页面滚动。

body {
  background-attachment: fixed;   /* 背景固定，常用于视差效果 */
}

通过 fixed，我们能实现一种“内容滑动在图片上方”的静态背景感。

背景渐变（Background Gradient）

渐变是一种不依赖图片的平滑色彩过渡方案，在现代设计中极为常见。

div {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
}

上面这段创建了一个从左到右的线性渐变。
更复杂的渐变类型还包括：

/* 径向渐变（从中心扩散） */
background: radial-gradient(circle, #2193b0, #6dd5ed);

/* 锥形渐变（围绕中心旋转） */
background: conic-gradient(from 0deg, red, yellow, green, blue, red);

渐变的优势：

无需加载图片，性能更佳；
无限分辨率，适配任何屏幕；
可以搭配透明度、动画等高级特效。

背景的可访问性考虑（Accessibility Considerations）

背景美观固然重要，但也必须确保内容可读性与可访问性。

对比度：前景文字与背景的对比度应足够高（建议 ≥ 4.5:1）。可使用工具 WebAIM Contrast Checker 检查。
避免动态或闪烁背景：快速变化的背景容易造成眩晕或注意力分散。
不要用背景传递关键信息：色彩与图案不应成为唯一的信息传达方式，例如“红色背景代表错误”应搭配文字说明。
保持简洁：复杂纹理可能干扰阅读或降低加载速度。

边框的艺术：从基本线条到装饰效果

边框（border）属性用于定义元素的外部边界，既能作为结构性分隔，也能承担装饰作用。

基本用法

div {
  border: 2px solid #4CAF50;
}

一个完整的 border 定义包含三个部分：

宽度（width）
样式（style）
颜色（color）

支持的样式包括 solid, dashed, dotted, double, groove 等：

p {
  border-style: dashed;
  border-color: #999;
  border-width: 1px 0; /* 上下边框 */
}

圆角与边框半径（border-radius）

button {
  border-radius: 12px;
}

圆角让 UI 更加柔和。也可以指定不同角：

div {
  border-radius: 10px 0 0 10px; /* 左侧圆角 */
}

配合渐变或阴影，可以创造出现代化卡片样式。

给图片加边框的多种方式

简单边框

img {
  border: 5px solid #ddd;
}

圆形头像效果

img {
  border-radius: 50%;
  border: 3px solid white;
}

阴影边缘

img {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

双层装饰边框

img {
  border: 5px double #666;
  outline: 3px solid #aaa; /* 外层轮廓 */
}

图像边框（border-image）

div {
  border: 10px solid transparent;
  border-image: url(border.png) 30 round;
}

这种方式允许使用图片素材作为边框，实现复杂视觉效果。