跳到主要内容
Web 前端开发基础核心知识点梳理 | 极客日志
HTML / CSS 大前端
Web 前端开发基础核心知识点梳理 Web 前端基础涉及 HTML 结构、CSS 样式及 JavaScript 交互逻辑。文章梳理了浏览器内核差异、Web 标准规范、常用标签语法、盒子模型原理、浮动定位机制以及 DOM 操作与事件处理。重点强调语义化标签使用、CSS 优先级规则、选择器应用及常见布局技巧,适合初学者系统掌握前端开发核心技能。
禅心 发布于 2026/4/5 更新于 2026/4/23 1 浏览一、HTML 基础
1.1 浏览器内核
浏览器内核主要由渲染引擎 (负责解析 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 定义网页交互逻辑、动态效果 吸引人的行为
1.3 HTML 文档结构(必掌握)
HTML 文档是后缀为 .html 的文本文件,基础结构如下:
<!DOCTYPE html >
<html lang ="en" >
<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 标签关系 关系 语法示例 格式规范 嵌套关系 <head><title></title></head>子元素缩进 1 个 Tab 键 并列关系 <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 ="宽度"
height ="高度" />
src:必选,图片路径(相对/绝对)。
alt:必选,图片无法加载时的替代文本。
title:可选,鼠标悬浮时显示的文本。
width/height:可选,仅设宽/高会等比缩放。
1.5.4 链接标签(a,重点) <a href ="跳转目标" target ="_self/_blank" > 文本/图片</a >
<a href ="http://www.baidu.com" target ="_blank" > 百度</a >
<a href ="index.html" > 首页</a >
<a href ="#" > 空链接</a >
1.5.5 锚点定位(难点)
<p id ="target" > 目标位置</p >
<a href ="#target" > 跳转到目标位置</a >
1.5.6 特殊字符(常用) 显示效果 实体名称 实体编号 适用场景 空格  文本中添加空格 < <<显示小于号 > >>显示大于号 & &&显示和号 ¥ ¥¥显示人民币符号 © ©©显示版权符号
1.5.7 注释标签 注释仅在源代码中可见,浏览器不渲染,用于标注代码含义。
1.5.8 路径(重点 + 难点) 路径类型 定义 示例 相对路径 以当前文件为参考基准 同目录:img/logo.png 上一级:../img/logo.png 绝对路径 以根目录 / 完整 URL 为基准 本地:D:\web\img\logo.png 网络:http://xxx.com/logo.png
1.6 列表与表单
1.6.1 列表 列表类型 核心标签 语法示例 适用场景 无序列表 <ul>+<li><ul><li>列表项 1</li><li>列表项 2</li></ul>导航、菜单等 有序列表 <ol>+<li><ol><li>步骤 1</li><li>步骤 2</li></ol>步骤、排名等 自定义列表 <dl>+<dt>+<dd><dl><dt>标题</dt><dd>描述 1</dd><dd>描述 2</dd></dl>说明、解释等
1.6.2 表格 <table border ="1" cellpadding ="2" cellspacing ="2" align ="center" width ="100%" >
<caption > 表格标题</caption >
<tr >
<th > 表头单元格</th >
<td > 普通单元格</td >
</tr >
<tr >
<td rowspan ="2" > 跨行合并</td >
<td colspan ="2" > 跨列合并</td >
</tr >
</table >
1.6.3 表单(核心)
(1)input 控件(单标签) type 值 语法示例 作用 text <input type="text" placeholder="请输入用户名">单行文本输入 password <input type="password">密码输入(隐藏) checkbox <input type="checkbox" name="hobby" value="game">复选框(name 相同为一组) radio <input type="radio" name="sex" value="male">单选框(name 相同为一组) button <input type="button" value="普通按钮">普通按钮 submit <input type="submit">提交表单 reset <input type="reset">重置表单 file <input type="file">文件上传 email <input type="email" required>邮箱格式校验(HTML5) number <input type="number">数字输入(HTML5)
(2)label 标签(关联控件) <label for ="username" > 账号:</label >
<input type ="text" id ="username" >
(3)textarea 文本域 <textarea rows ="5" cols ="30" maxlength ="100" > 默认文本</textarea >
(4)select 下拉框 <select >
<option value ="1" > 选项 1</option >
<option value ="2" selected > 默认选中</option >
</select >
(5)form 表单容器 <form action ="提交地址" method ="get/post" >
<input type ="text" name ="username" >
<input type ="submit" value ="提交" >
</form >
1.7 HTML5 新特性
1.7.1 新增 input 类型(重点) type 值 语法示例 功能说明 email <input type="email">校验邮箱格式 tel <input type="tel">手机号码输入(仅语义) url <input type="url">校验 URL 格式 search <input type="search">搜索框(语义化) range <input type="range">拖动滑块(数值选择) date <input type="date">日期选择器
1.7.2 新增属性 属性名 语法示例 作用 placeholder <input type="text" placeholder="请输入">输入框占位提示 required <input type="text" required>必填项(提交校验)
1.7.3 多媒体标签
(1)音频(audio) <audio src ="music.mp3" controls loop muted >
您的浏览器不支持音频播放
</audio >
(2)视频(video) <video src ="video.mp4" controls loop muted >
您的浏览器不支持视频播放
</video >
二、CSS 基础
2.1 CSS 概述 CSS(层叠样式表)用于控制网页元素的外观样式,核心是'选择器 + 样式声明'。
2.2 CSS 使用方式(3 种) 使用方式 语法示例 适用场景 推荐度 行内样式 <div style="color: red;">临时样式 不推荐 内部样式 <style>div { color: red; }</style>单页面样式 临时使用 外部样式 <link rel="stylesheet" href="style.css">多页面复用 强烈推荐
@import url("global.css" );
2.3 CSS 字体样式属性
2.3.1 基础属性 属性名 取值示例 说明 font-size 16px / 1.2em 字号(1em=16px,默认 16px) font-family "微软雅黑", "宋体", sans-serif 字体(多个字体逗号分隔) font-weight normal(400) / bold(700) / 100-900 字体粗细(900 最粗) font-style normal / italic / oblique 字体风格(italic 斜体)
2.3.2 复合属性(font)
div {
font : italic bold 16px "微软雅黑" ;
}
div {
font : 16px "微软雅黑" ;
}
2.4 CSS 注释
三、CSS 选择器
3.1 基本选择器(重点) 选择器类型 语法 示例 优先级 说明 通配符选择器 ** { margin: 0; }最低 匹配所有元素 标签选择器 标签名 div { color: red; }低 匹配所有该标签元素 类选择器 .类名.box { width: 100px; }中 匹配 class 为 box 的元素(可重复) ID 选择器 #ID 名#header { height: 50px; }高 匹配 id 为 header 的元素(唯一) 行内样式 style 属性 -最高 行内样式优先级最高
优先级规则 :行内样式 > ID 选择器 > 类选择器 > 标签选择器 > 通配符选择器;同级选择器遵循'就近原则'。
3.2 复合选择器(重点) 选择器类型 语法 示例 说明 并集选择器 选择器 1, 选择器 2 .box, #nav { color: red; }同时匹配多个选择器 后代选择器 父选择器 子选择器 .nav li { padding: 5px; }匹配父元素下所有后代元素 子选择器 父选择器 > 子选择器 .nav>li { margin: 0; }仅匹配父元素的直接子元素(亲儿子)
3.3 伪类选择器(重点)
(1)链接伪类
a :link { color : gray; }
a :visited { color : blue; }
a :hover { color : red; }
a :active { color : green; }
四、CSS 外观属性
4.1 文本颜色(color)
div {
color : red;
color : #ff0000 ;
color : rgba (255 , 0 , 0 , 0.5 );
}
4.2 行间距(line-height) div { line-height : 24px ; }
4.3 水平对齐(text-align) div { text-align : center; }
4.4 首行缩进(text-indent)
4.5 文本修饰(text-decoration) a { text-decoration : none; }
div { text-decoration : underline; }
div { text-decoration : line-through; }
4.6 字符间距(letter-spacing) div { letter-spacing : 2px ; }
4.7 文字阴影(text-shadow)
div { text-shadow : 2px 2px 3px #666 ; }
div { text-shadow : -5px 0 cyan, 5px 0 red; }
五、标签显示模式与背景样式
5.1 标签显示模式(核心) 模式 核心特征 代表标签 块级元素(block) 独占一行;宽高可设置;默认宽度 100%;可嵌套任意元素 div、p、h1-h6、ul/li、table 行内元素(inline) 不独占一行;宽高不可设置;大小由内容决定;仅可嵌套行内元素 a、span、b、em 行内块元素(inline-block) 不独占一行;宽高可设置 img、input、select
模式转换(display) div { display : inline; }
a { display : block; }
span { display : inline-block; }
5.2 背景样式(重点)
5.2.1 基础属性 属性名 取值示例 说明 background-color #fff / rgba(0,0,0,0.5) 背景颜色(支持透明) background-image url("img/bg.jpg") 背景图片 background-repeat no-repeat / repeat-x / repeat-y 图片重复方式(no-repeat 常用) background-position center / 50px 50px / 20% 20% 图片位置(水平 垂直) background-attachment fixed / scroll 图片是否固定(fixed 固定) background-size cover / contain / 100px 100px 图片缩放(cover 铺满,contain 完整显示)
5.2.2 复合属性(background)
div {
background : #fff url ("bg.jpg" ) no-repeat fixed center;
background-size : cover;
}
5.2.3 精灵图(Sprite) 核心原理:将多张小图合并为一张大图,通过 background-position 定位显示指定区域,减少 HTTP 请求。
.icon {
width : 50px ;
height : 50px ;
background : url ("sprite.png" ) no-repeat;
background-position : -20px -30px ;
background-size : 200px 150px ;
}
六、盒子模型(CSS 核心) 盒子模型是 CSS 布局的基础,每个元素都可视为一个'盒子',由四部分组成:内容(content)+ 内边距(padding)+ 边框(border)+ 外边距(margin)
6.1 边框(border)
div { border : 1px solid #ccc ; }
div { border-top : 2px red; }
div { border-style : solid; }
div { border-radius : 5px ; }
div { border-radius : 50% ; }
6.2 内边距(padding)
div { padding-left : 10px ; }
div { padding : 10px ; padding : 10px 20px ; padding : 10px 20px 30px ; padding : 10px 20px 30px 40px ; }
6.3 外边距(margin)
6.4 溢出处理(overflow) div {
width : 100px ;
height : 100px ;
overflow : hidden;
}
七、浮动(float)
7.1 浮动作用 解决块级元素默认独占一行的问题,实现多列布局(如导航、图文混排)。
7.2 语法 div { float : left; }
div { float : right; }
div { float : none; }
7.3 浮动特性
浮动元素脱离标准流,不占位置;
浮动元素会向左 / 右移动,直到碰到父元素或其他浮动元素;
浮动元素会影响后续标准流元素(需清除浮动)。
7.4 清除浮动
.parent { overflow : hidden; }
.clearfix ::after {
content : "" ;
display : block;
clear : both;
height : 0 ;
visibility : hidden;
}
.clearfix { *zoom : 1 ; }
八、定位(position)
8.1 定位模式 定位类型 语法 参考基准 特性 应用场景 相对定位 position: relative; 自身原位置 保留标准流位置(不脱标) 微调位置、作为绝对定位父容器 绝对定位 position: absolute; 最近的已定位祖先元素 脱离标准流(不占位置) 精准定位(子绝父相) 固定定位 position: fixed; 浏览器窗口 脱离标准流,固定位置 回到顶部、导航栏
8.2 边偏移(配合定位使用) div {
position : absolute;
top : 10px ;
left : 20px ;
}
8.3 叠放次序(z-index) div {
position : relative;
z-index : 999 ;
}
九、JavaScript 基础
9.1 JavaScript 使用方式
9.1.1 外部 JS 文件(推荐)
<script src ="script.js" > </script >
9.1.2 内嵌 JS 代码 <script >
console .log ("Hello JavaScript" );
</script >
9.2 核心操作:获取 / 修改元素
9.2.1 获取元素
var nav = document .getElementsByClassName ("nav" )[0 ];
var divs = document .getElementsByTagName ("div" )[0 ];
var box = document .getElementById ("box" );
9.2.2 修改元素内容
nav.innerText = "<i>文本内容</i>" ;
nav.innerHTML = "<i>文本内容</i>" ;
9.2.3 修改元素样式
nav.style .width = "200px" ;
nav.style .backgroundColor = "blue" ;
nav.style .fontSize = "16px" ;
9.2.4 修改元素属性
var src = img.getAttribute ("src" );
img.setAttribute ("src" , "new.jpg" );
9.3 JavaScript 事件(核心)
9.3.1 鼠标事件 var box = document .getElementsByClassName ("box" )[0 ];
box.onmouseover = function ( ) {
box.style .backgroundColor = "yellow" ;
};
box.onmouseout = function ( ) {
box.style .backgroundColor = "green" ;
};
box.onmousedown = function ( ) {
box.style .width = "150px" ;
};
box.onmouseup = function ( ) {
box.style .width = "100px" ;
};
box.onmousemove = function (e ) {
console .log ("X:" + e.clientX , "Y:" + e.clientY );
};
9.3.2 键盘事件
document .onkeydown = function (e ) {
console .log (e.keyCode );
var oLeft = parseInt (box.style .left ) || 0 ;
var oTop = parseInt (box.style .top ) || 0 ;
if (e.keyCode === 37 ) {
box.style .left = oLeft - 2 + "px" ;
} else if (e.keyCode === 39 ) {
box.style .left = oLeft + 2 + "px" ;
}
};
9.4 定时器(setInterval)
var oLeft = 0 ;
var timer = setInterval (function ( ) {
oLeft += 10 ;
box.style .left = oLeft + "px" ;
}, 100 );
9.5 旗帜法则(状态切换) var flag = true ;
box.onclick = function ( ) {
if (flag) {
box.style .width = "200px" ;
flag = false ;
} else {
box.style .width = "100px" ;
flag = true ;
}
};
总结
HTML 核心要点
HTML 是网页的结构基础,核心是标签的语义化和正确嵌套;
表单、列表、链接是交互类页面的核心组件,需掌握其语法和属性;
HTML5 新增的 input 类型、多媒体标签提升了页面原生能力。
CSS 核心要点
盒子模型是布局的基础,需理解 margin/padding/border 的作用和计算方式;
浮动和定位是实现复杂布局的核心,需掌握清除浮动和'子绝父相'的应用;
选择器优先级和显示模式转换是样式控制的关键。
JavaScript 核心要点
JS 主要用于页面交互,核心是'获取元素→修改元素/绑定事件';
事件(鼠标/键盘)和定时器是实现动态效果的基础;
innerHTML/innerText 的区别、样式修改的驼峰命名是高频易错点。
相关免费在线工具 Base64 字符串编码/解码 将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online
Base64 文件转换器 将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online
Markdown转HTML 将 Markdown(GFM)转为 HTML 片段,浏览器内 marked 解析;与 HTML转Markdown 互为补充。 在线工具,Markdown转HTML在线工具,online
HTML转Markdown 将 HTML 片段转为 GitHub Flavored Markdown,支持标题、列表、链接、代码块与表格等;浏览器内处理,可链接预填。 在线工具,HTML转Markdown在线工具,online
JSON 压缩 通过删除不必要的空白来缩小和压缩JSON。 在线工具,JSON 压缩在线工具,online
JSON美化和格式化 将JSON字符串修饰为友好的可读格式。 在线工具,JSON美化和格式化在线工具,online