Web 前端基础核心知识点梳理

一、HTML 基础

1.1 浏览器内核

浏览器内核主要由渲染引擎和 JS 引擎组成。渲染引擎负责解析 HTML/CSS 并渲染页面，JS 引擎则负责执行 JavaScript 代码。不同浏览器的内核差异直接影响页面的兼容性：

浏览器	内核	备注
IE	Trident	适配 IE 及早期 Edge
Firefox	Gecko	近年市场份额下降，存在打开速度慢、升级频繁问题
Safari	WebKit	常被误称为 Chrome 内核（Chrome 现已改用 Blink）
Chrome	Chromium/Blink	Blink 是 WebKit 分支，多数国产浏览器最新版基于 Blink 二次开发
Opera	Presto/Blink	早期用 Presto，现跟随 Chrome 使用 Blink
Edge	EdgeHTML/Blink	新版 Edge 已切换为 Blink 内核

1.2 Web 标准（核心）

Web 标准由 W3C 等组织制定，旨在解决浏览器渲染差异。核心分为三部分：结构（HTML）、表现（CSS）和行为（JavaScript）。

标准类型	核心技术	作用描述
结构标准	HTML	对网页元素整理、分类
表现标准	CSS	设置元素版式、颜色、大小等外观
行为标准	JavaScript	定义网页交互逻辑、动态效果

1.3 HTML 文档结构

HTML 文档后缀为 .html，基础结构如下。注意 <!DOCTYPE html> 声明文档类型为 HTML5，lang 属性指定页面语言。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的主页</title>
    <!-- 可选：添加网页小图标 -->
    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
</head>
<body>
    页面核心内容
</body>
</html>

1.4 HTML 标签基础

1.4.1 标签分类

类型	语法格式	示例
双标签	`<标签名>内容</标签名>`	`<body>内容</body>`
单标签	`<标签名 />`	`<br />、<hr />`

1.4.2 标签关系

嵌套关系：子元素缩进 1 个 Tab 键，如 <head><title></title></head>。
并列关系：上下对齐，无缩进，如 <head></head><body></body>。

1.5 HTML 常用标签

1.5.1 排版标签

标签	语法	作用说明
标题标签	`<h1>~<h6>`	标题层级从 h1（最大）到 h6（最小），独占一行
段落标签	`<p>文本</p>`	定义文本段落，上下有默认间距
水平线标签	`<hr />`	显示水平线，单标签
换行标签	`<br />`	强制换行，单标签
div 标签	`<div>内容</div>`	块级布局容器，一行仅能放一个
span 标签	`<span>内容</span>`	行内布局容器，一行可放多个

1.5.2 文本格式化标签

推荐使用语义化标签，而非纯样式标签。

效果	基础标签	语义化标签	推荐使用
粗体	`<b>`	`<strong>`	strong
斜体	`<i>`	`<em>`	em
删除线	`<s>`	`<del>`	del
下划线	`<u>`	`<ins>`	ins

1.5.3 图像与链接

图像标签 (img)：重点掌握路径和替代文本。

<img src="图像 URL" alt="图片加载失败提示" title="鼠标悬浮提示" width="100" height="100" />

链接标签 (a)：控制跳转目标和新窗口打开。

<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="index.html">首页</a>
<a href="#">空链接</a>

锚点定位：通过 id 和 href="#id" 实现页面内跳转。

<p id="target">目标位置</p>
<a href="#target">跳转到目标位置</a>

1.5.4 特殊字符与注释

特殊字符需使用实体名称或编号，例如空格  、小于号 <。注释仅在源代码可见，快捷键通常为 Ctrl+/。

<!-- 注释内容 -->

1.5.5 路径规范

相对路径：以当前文件为基准，如同目录 img/logo.png，上一级 ../img/logo.png。
绝对路径：以根目录或完整 URL 为基准，本地 D:\web\img\logo.png，网络 http://xxx.com/logo.png。

1.6 列表、表格与表单

列表包括无序 (ul)、有序 (ol) 和自定义 (dl)。

表格需注意合并单元格 (rowspan, colspan) 以及边框和内边距的设置。

表单 (form) 是交互的核心，包含以下控件：

input 控件：支持 text, password, checkbox, radio, file 等多种类型。
label 标签：通过 for 属性关联 input 的 id，提升点击体验。
textarea：多行文本域。
select：下拉选择框。

<form action="submit.php" method="post">
    <input type="text" name="username" placeholder="请输入用户名">
    <input type="submit" value="提交">
</form>

1.7 HTML5 新特性

新增了更多 input 类型（如 email, tel, url, date）以提升原生校验能力，同时引入了 audio 和 video 多媒体标签。

<audio src="music.mp3" controls loop muted></audio>
<video src="video.mp4" controls loop muted></video>

二、CSS 基础

2.1 CSS 概述

CSS 用于控制网页外观，核心是'选择器 + 样式声明'。

2.2 CSS 引入方式

推荐优先使用外部样式表，便于复用和维护。

使用方式	语法示例	适用场景
行内样式	`<div style="color: red;">`	临时样式，不推荐
内部样式	`<style>...</style>`	单页面样式
外部样式	`<link rel="stylesheet" href="style.css">`	多页面复用，强烈推荐

2.3 字体样式

常用属性包括 font-size (字号), font-family (字体), font-weight (粗细) 等。复合属性 font 可一次性设置，但顺序不可随意调换。

div { font: italic bold 16px "微软雅黑"; }

三、CSS 选择器

3.1 基本选择器

优先级从高到低依次为：行内样式 > ID 选择器 > 类选择器 > 标签选择器 > 通配符选择器。同级遵循就近原则。

3.2 复合与伪类选择器

并集：.box, #nav { color: red; }
后代/子元素：.nav li vs .nav > li
链接伪类：注意 LVHA 顺序（Link, Visited, Hover, Active），否则 hover 可能失效。

四、CSS 外观属性

常用属性包括 color (颜色), line-height (行高), text-align (对齐), text-indent (首行缩进), text-decoration (修饰) 等。文字阴影 text-shadow 支持多重叠加。

五、标签模式与背景

5.1 显示模式

块级 (block)：独占一行，宽高可设（如 div, p）。
行内 (inline)：不独占一行，宽高不可设（如 a, span）。
行内块 (inline-block)：不独占一行，宽高可设（如 img）。

可通过 display 属性相互转换。

5.2 背景样式

背景图片可通过 background-position 定位，配合 background-size 缩放。精灵图 (Sprite) 技术利用一张大图减少 HTTP 请求，通过偏移量显示不同图标。

六、盒子模型

每个元素都是一个盒子，由内容 (content)、内边距 (padding)、边框 (border) 和外边距 (margin) 组成。

边框：支持实线、虚线、圆角 (border-radius)。
内边距：控制内容与边框的距离，支持顺时针简写。
外边距：控制元素间距，注意相邻元素的塌陷合并问题，可通过触发 BFC 解决。
溢出处理：overflow: hidden 常用于清除浮动或隐藏多余内容。

七、浮动与定位

7.1 浮动 (float)

浮动元素脱离标准流，常用于多列布局。清除浮动推荐使用伪元素法：

.clearfix::after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
}

7.2 定位 (position)

相对定位：保留原位置，用于微调。
绝对定位：脱离标准流，参考最近的已定位祖先元素（子绝父相）。
固定定位：相对于浏览器窗口，常用于导航栏。

叠放次序由 z-index 控制，数值越大越靠上。

八、JavaScript 基础

8.1 引入方式

建议将脚本放在 body 末尾，避免阻塞渲染。

<script src="script.js"></script>

8.2 DOM 操作

核心流程是获取元素后修改其属性或样式。

// 获取元素
var box = document.getElementById("box");

// 修改内容
box.innerText = "文本内容"; // 不解析标签
box.innerHTML = "<i>斜体</i>"; // 解析标签

// 修改样式
box.style.width = "200px";
box.style.backgroundColor = "blue";

// 修改属性
img.setAttribute("src", "new.jpg");

8.3 事件与定时器

鼠标事件：onmouseover, onmouseout, onclick 等。
键盘事件：onkeydown，通过 keyCode 判断按键。
定时器：setInterval 用于循环执行，clearInterval 停止。

var timer = setInterval(function() {
    box.style.left += 10;
}, 100);

状态切换常配合标志位 (flag) 使用，实现开关效果。

总结

Web 前端开发建立在 HTML 结构、CSS 样式与 JavaScript 交互之上。掌握盒子模型计算、浮动清除原理以及 DOM 操作细节，能有效规避常见布局陷阱。后续学习框架时，这些基础概念依然是理解组件化与响应式的基石。

一、HTML 基础

1.1 浏览器内核

浏览器	内核	备注
IE	Trident	适配 IE 及早期 Edge
Firefox	Gecko	近年市场份额下降，存在打开速度慢、升级频繁问题
Safari	WebKit	常被误称为 Chrome 内核（Chrome 现已改用 Blink）
Chrome	Chromium/Blink	Blink 是 WebKit 分支，多数国产浏览器最新版基于 Blink 二次开发
Opera	Presto/Blink	早期用 Presto，现跟随 Chrome 使用 Blink
Edge	EdgeHTML/Blink	新版 Edge 已切换为 Blink 内核

1.2 Web 标准（核心）

Web 标准由 W3C 等组织制定，旨在解决浏览器渲染差异。核心分为三部分：结构（HTML）、表现（CSS）和行为（JavaScript）。

标准类型	核心技术	作用描述
结构标准	HTML	对网页元素整理、分类
表现标准	CSS	设置元素版式、颜色、大小等外观
行为标准	JavaScript	定义网页交互逻辑、动态效果

1.3 HTML 文档结构

HTML 文档后缀为 .html，基础结构如下。注意 <!DOCTYPE html> 声明文档类型为 HTML5，lang 属性指定页面语言。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的主页</title>
    <!-- 可选：添加网页小图标 -->
    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
</head>
<body>
    页面核心内容
</body>
</html>

1.4 HTML 标签基础

1.4.1 标签分类

类型	语法格式	示例
双标签	`<标签名>内容</标签名>`	`<body>内容</body>`
单标签	`<标签名 />`	`<br />、<hr />`

1.4.2 标签关系

嵌套关系：子元素缩进 1 个 Tab 键，如 <head><title></title></head>。
并列关系：上下对齐，无缩进，如 <head></head><body></body>。

1.5 HTML 常用标签

1.5.1 排版标签

标签	语法	作用说明
标题标签	`<h1>~<h6>`	标题层级从 h1（最大）到 h6（最小），独占一行
段落标签	`<p>文本</p>`	定义文本段落，上下有默认间距
水平线标签	`<hr />`	显示水平线，单标签
换行标签	`<br />`	强制换行，单标签
div 标签	`<div>内容</div>`	块级布局容器，一行仅能放一个
span 标签	`<span>内容</span>`	行内布局容器，一行可放多个

1.5.2 文本格式化标签

推荐使用语义化标签，而非纯样式标签。

效果	基础标签	语义化标签	推荐使用
粗体	`<b>`	`<strong>`	strong
斜体	`<i>`	`<em>`	em
删除线	`<s>`	`<del>`	del
下划线	`<u>`	`<ins>`	ins

1.5.3 图像与链接

图像标签 (img)：重点掌握路径和替代文本。

<img src="图像 URL" alt="图片加载失败提示" title="鼠标悬浮提示" width="100" height="100" />

链接标签 (a)：控制跳转目标和新窗口打开。

<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="index.html">首页</a>
<a href="#">空链接</a>

锚点定位：通过 id 和 href="#id" 实现页面内跳转。

<p id="target">目标位置</p>
<a href="#target">跳转到目标位置</a>

1.5.4 特殊字符与注释

特殊字符需使用实体名称或编号，例如空格  、小于号 <。注释仅在源代码可见，快捷键通常为 Ctrl+/。

<!-- 注释内容 -->

1.5.5 路径规范

相对路径：以当前文件为基准，如同目录 img/logo.png，上一级 ../img/logo.png。
绝对路径：以根目录或完整 URL 为基准，本地 D:\web\img\logo.png，网络 http://xxx.com/logo.png。

1.6 列表、表格与表单

列表包括无序 (ul)、有序 (ol) 和自定义 (dl)。

表格需注意合并单元格 (rowspan, colspan) 以及边框和内边距的设置。

表单 (form) 是交互的核心，包含以下控件：

input 控件：支持 text, password, checkbox, radio, file 等多种类型。
label 标签：通过 for 属性关联 input 的 id，提升点击体验。
textarea：多行文本域。
select：下拉选择框。

<form action="submit.php" method="post">
    <input type="text" name="username" placeholder="请输入用户名">
    <input type="submit" value="提交">
</form>

1.7 HTML5 新特性

新增了更多 input 类型（如 email, tel, url, date）以提升原生校验能力，同时引入了 audio 和 video 多媒体标签。

<audio src="music.mp3" controls loop muted></audio>
<video src="video.mp4" controls loop muted></video>

二、CSS 基础

2.1 CSS 概述

CSS 用于控制网页外观，核心是'选择器 + 样式声明'。

2.2 CSS 引入方式

推荐优先使用外部样式表，便于复用和维护。

使用方式	语法示例	适用场景
行内样式	`<div style="color: red;">`	临时样式，不推荐
内部样式	`<style>...</style>`	单页面样式
外部样式	`<link rel="stylesheet" href="style.css">`	多页面复用，强烈推荐

2.3 字体样式

常用属性包括 font-size (字号), font-family (字体), font-weight (粗细) 等。复合属性 font 可一次性设置，但顺序不可随意调换。

div { font: italic bold 16px "微软雅黑"; }

三、CSS 选择器

3.1 基本选择器

优先级从高到低依次为：行内样式 > ID 选择器 > 类选择器 > 标签选择器 > 通配符选择器。同级遵循就近原则。

3.2 复合与伪类选择器

并集：.box, #nav { color: red; }
后代/子元素：.nav li vs .nav > li
链接伪类：注意 LVHA 顺序（Link, Visited, Hover, Active），否则 hover 可能失效。

四、CSS 外观属性

常用属性包括 color (颜色), line-height (行高), text-align (对齐), text-indent (首行缩进), text-decoration (修饰) 等。文字阴影 text-shadow 支持多重叠加。

五、标签模式与背景

5.1 显示模式

块级 (block)：独占一行，宽高可设（如 div, p）。
行内 (inline)：不独占一行，宽高不可设（如 a, span）。
行内块 (inline-block)：不独占一行，宽高可设（如 img）。

可通过 display 属性相互转换。

5.2 背景样式

背景图片可通过 background-position 定位，配合 background-size 缩放。精灵图 (Sprite) 技术利用一张大图减少 HTTP 请求，通过偏移量显示不同图标。

六、盒子模型

每个元素都是一个盒子，由内容 (content)、内边距 (padding)、边框 (border) 和外边距 (margin) 组成。

边框：支持实线、虚线、圆角 (border-radius)。
内边距：控制内容与边框的距离，支持顺时针简写。
外边距：控制元素间距，注意相邻元素的塌陷合并问题，可通过触发 BFC 解决。
溢出处理：overflow: hidden 常用于清除浮动或隐藏多余内容。

七、浮动与定位

7.1 浮动 (float)

浮动元素脱离标准流，常用于多列布局。清除浮动推荐使用伪元素法：

.clearfix::after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
}

7.2 定位 (position)

相对定位：保留原位置，用于微调。
绝对定位：脱离标准流，参考最近的已定位祖先元素（子绝父相）。
固定定位：相对于浏览器窗口，常用于导航栏。

叠放次序由 z-index 控制，数值越大越靠上。

八、JavaScript 基础

8.1 引入方式

建议将脚本放在 body 末尾，避免阻塞渲染。

<script src="script.js"></script>

8.2 DOM 操作

核心流程是获取元素后修改其属性或样式。

// 获取元素
var box = document.getElementById("box");

// 修改内容
box.innerText = "文本内容"; // 不解析标签
box.innerHTML = "<i>斜体</i>"; // 解析标签

// 修改样式
box.style.width = "200px";
box.style.backgroundColor = "blue";

// 修改属性
img.setAttribute("src", "new.jpg");

8.3 事件与定时器

鼠标事件：onmouseover, onmouseout, onclick 等。
键盘事件：onkeydown，通过 keyCode 判断按键。
定时器：setInterval 用于循环执行，clearInterval 停止。

var timer = setInterval(function() {
    box.style.left += 10;
}, 100);

状态切换常配合标志位 (flag) 使用，实现开关效果。

Web 前端基础核心知识点梳理

一、HTML 基础

1.1 浏览器内核

1.2 Web 标准（核心）

1.3 HTML 文档结构

1.4 HTML 标签基础

1.4.1 标签分类

1.4.2 标签关系

1.5 HTML 常用标签

1.5.1 排版标签

1.5.2 文本格式化标签

1.5.3 图像与链接

1.5.4 特殊字符与注释

1.5.5 路径规范

1.6 列表、表格与表单

1.7 HTML5 新特性

二、CSS 基础

2.1 CSS 概述

2.2 CSS 引入方式

2.3 字体样式

三、CSS 选择器

3.1 基本选择器

3.2 复合与伪类选择器

四、CSS 外观属性

五、标签模式与背景

5.1 显示模式

5.2 背景样式

六、盒子模型

七、浮动与定位

7.1 浮动 (float)

7.2 定位 (position)

八、JavaScript 基础

8.1 引入方式

8.2 DOM 操作

8.3 事件与定时器

总结

Web 前端基础核心知识点梳理

一、HTML 基础

1.1 浏览器内核

1.2 Web 标准（核心）

1.3 HTML 文档结构

1.4 HTML 标签基础

1.4.1 标签分类

1.4.2 标签关系

1.5 HTML 常用标签

1.5.1 排版标签

1.5.2 文本格式化标签

1.5.3 图像与链接

1.5.4 特殊字符与注释

1.5.5 路径规范

1.6 列表、表格与表单

1.7 HTML5 新特性

二、CSS 基础

2.1 CSS 概述

2.2 CSS 引入方式

2.3 字体样式

三、CSS 选择器

3.1 基本选择器

3.2 复合与伪类选择器

四、CSS 外观属性

五、标签模式与背景

5.1 显示模式

5.2 背景样式

六、盒子模型

七、浮动与定位

7.1 浮动 (float)

7.2 定位 (position)

八、JavaScript 基础

8.1 引入方式

8.2 DOM 操作

8.3 事件与定时器

总结

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具