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= = =>


    页面核心内容

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

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

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

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

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 事件与定时器

总结

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

更多推荐文章

相关免费在线工具