跳到主要内容
HTML+CSS+JavaScript 前端基础知识体系梳理 | 极客日志
HTML / CSS 大前端
HTML+CSS+JavaScript 前端基础知识体系梳理 综述由AI生成 前端开发三大核心技术：HTML、CSS 和 JavaScript。HTML 部分讲解了文档结构、常用标签及语义化标签；CSS 部分涵盖了基础结构、选择器（标签、类、ID、通配符、复合）及常用属性（颜色、字体、边距）；JavaScript 部分介绍了变量声明（var/let/const）、函数、对象创建及 jQuery 库的引入与基础语法。文章旨在帮助读者建立前端基础认知，理解网页结构与交互逻辑。
猫巷少女 发布于 2026/4/5 更新于 2026/5/21 HTML
什么是 HTML
HTML (Hyper Text Markup Language)，超文本标记语言。
超文本: 比文本要强大。通过链接和交互式方式来组织和呈现信息的文本形式。不仅仅有文本，还可能包含图片、音频，或者经审阅过的评注、补充或脚注等。
标记语言: 由标签构成的语言。
例如：
<h1 > 这是一级标题</h1 >
<h2 > 我是二级标题</h2 >
<h3 > 我是三级标题</h3 >
这里的 h1, h2 就是标签。
HTML 的基本结构
一般结构如下所示：
<html >
<head >
<title > 第一个页面</title >
</head >
<body >
hello world
</body >
</html >
解释：
html 标签是整个 html 文件的根标签 (最顶层标签)
head 标签中写页面的属性
body 标签中写的是页面上显示的内容
title 标签中写的是页面的标题
HTML 的快速入门
基本结构示例：
<!DOCTYPE html >
<html lang ="en" >
<head >
<meta charset ="UTF-8" >
<title > JavaScript</title >
</head >
<body >
</body >
</html >
<!DOCTYPE html> 称为 DTD (文档类型定义), 描述当前的文件是一个 HTML5 的文件。<html lang="en"> 其中 lang 属性表示当前页面是一个 "英语页面"。<meta charset="UTF-8"> 描述页面的字符编码方式。没有这一行可能会导致中文乱码。
HTML 常见的标签
段落标签 在 HTML 中，段落、换行符、空格都会失效，如果需要分成段落，需要使用专门的标签。
<p > 这是一个段落</p >
<p > 这是一个段落</p >
p 标签描述的段落，前面没有缩进。
自动根据浏览器宽度来决定排版。
html 内容首尾处的换行、空格均无效。
在 html 中文字之间输入的多个空格只相当于一个空格。
html 中直接输入换行不会真的换行，而是相当于一个空格。
图片标签 注意这里的图片的来源就是这个程序的文件的目录下，这是直接路径。
超链接标签
href: 必须具备，表示点击后会跳转到哪个页面。
target: 打开方式。默认是 _self。如果是 _blank 则用新的标签页打开。
<a href ="http://www.baidu.com" > 百度</a >
input 标签 <input type ="radio" name ="sex" > 男 <input type ="radio" name ="sex" checked ="checked" > 女
各种输入控件，单行文本框，按钮，单选框，复选框。
type(必须有), 取值种类很多，button, checkbox, text, file, image, password, radio 等。
name: 给 input 起了个名字。尤其是对于单选按钮，具有相同的 name 才能多选一。
value: input 中的默认值。
checked: 默认被选中。(用于单选按钮和多选按钮)
无语义标签：div&span <div >
<span > 咬人猫</span >
</div >
<div >
<span > 兔总裁</span >
</div >
<div >
<span > 阿叶君</span >
</div >
div 标签，division 的缩写，含义是分割。
span 标签，含义是跨度。
就是两个盒子。用于网页布局。
div 是独占一行的，是一个大盒子。
span 不独占一行，是一个小盒子。
CSS
什么是 CSS CSS 能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果。能够做到页面的样式和结构分离。
CSS 基础结构
选择器决定针对谁修改 (找谁)
声明决定修改啥。(干啥)
声明的属性是键值对。使用 ; 区分键值对，使用 : 区分键和值。
<style>
p {
color : red;
font-size : 30px ;
}
</style>
<p >hello</p >
CSS 要写到 style 标签中。
style 标签可以放到页面任意位置。一般放到 head 标签内。
CSS 选择器 CSS 选择器的主要功能就是选中页面指定的标签元素。选中了元素，才可以设置元素的属性。
CSS 选择器主要分以下几种:
标签选择器
class 选择器
id 选择器
通配符选择器
复合选择器
1. 标签选择器
2. class 选择器 .font32 {
font-size : 32px ;
}
注意：这里是有一个点的；一个类可以被多个标签使用，一个标签也能使用多个类 (多个类名要使用空格分割)。
3. id 选择器 注意：id 是唯一的，不能被多个标签使用 (是和 类选择器 最大的区别)。
4. 通配符选择器
5. 复合选择器
常用的 CSS
1. color
英文单词，如 red,blue
rgb 代码的颜色 如 rgb(255,0,0)
十六进制的颜色 如 #ff00ff
2. font-size .text1 {
font-size : 32px ;
}
3. 外边距与内边距 padding: 内边距，设置内容和边框之间的距离。内容默认是顶着边框来放置的。用 padding 来控制这个距离；
margin：外边距，设置元素和元素之间的距离。
<style>
span {
border : red double 2px ;
margin-left : 20px ;
margin-right : 20px ;
}
</style>
这里只列举了 margin 这个外边距的概念，意思就是左右边距是 20 像素。
JavaScript
什么是 JavaScript JavaScript (简称 JS), 是一个脚本语言，解释型或即时编译型的编程语言。虽然它是作为开发 Web 页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中。
这里的语言主要是用作交互的操作，它与 HTML 和 CSS 的关系如下所示：
HTML: 网页的结构 (骨)
CSS: 网页的表现 (皮)
JavaScript: 网页的行为 (魂)
<body >
<script >
alert ("Hello JavaScript!" )
</script >
</body >
JavaScript 的基础语法 创建变量 (变量定义/变量声明/变量初始化), JS 声明变量有 3 种方式：
var : 早期 JS 中声明变量的关键字，作用域在该语句的函数内 var name = 'zhangsan';let : ES6 中新增的声明变量的关键字，作用域为该语句所在的代码块内 let name = 'zhangsan';const : 声明常量的，声明后不能修改 const name = 'zhangsan'; 注意：JavaScript 是一门动态弱类型语言，变量可以存放不同类型的值 (动态)。所以 var 等可以是任何的类型，包括数组也是一样的。
var name = 'zhangsan' ;
var age = 20 ;
function hello (console .log ("hello" );
}
hello ();
第二种写法，将 add 变量作为 sum 的返回的值：
var add = function (var sum = 0 ;
for (var i = 0 ; i < arguments .length ; i++) {
sum += arguments [i];
}
return sum;
}
console .log (add (10 , 20 ));
console .log (add (1 , 2 , 3 , 4 ));
console .log (typeof add);
对象的创建和调用 var student = {
name : '蔡徐坤' ,
height : 175 ,
weight : 170 ,
sayHello : function (console .log ("hello" );
}
};
console .log (student.name );
console .log (student['height' ]);
student.sayHello ();
var student = new Object ();
student.name = "蔡徐坤" ;
student.height = 175 ;
student['weight' ] = 170 ;
student.sayHello = function (console .log ("hello" );
}
console .log (student.name );
console .log (student['weight' ]);
student.sayHello ();
使用 JQuery 操作 JavaScript
1. 引入对应的库 建议使用 minified 版本（压缩版，不易读，文件小，性能高）。
<body >
<script src ="jquery.js" > </script >
</body >
放在当前项目中引入外部地址，会有外部地址不能访问的风险。
2. jQuery 的基础语法知识 jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
$() 是一个函数，它是 jQuery 提供的一个全局函数，用于选择和操作 HTML 元素。Selector 选择器，用来"查询"和"查找" HTML 元素
action 操作，执行对元素的操作
<button type="button" >点我消失</button>
<script src ="https://code.jquery.com/jquery-3.7.1.min.js" > </script > <script >
$(document ).ready (function ('button' ).click (function (this ).hide ();
});
});
</script >
文档就绪事件 (完成加载) $(document).ready(function)
点击事件 $(selector).click(function)
双击事件 $(selector).dblclick(function)
元素的值发生改变 $(selector).change(function)
鼠标悬停事件 $(selector).mouseover(function)
text() 设置或返回所选元素的文本内容html() 设置或返回所选元素的内容（包括 HTML 标签）val() 设置或返回表单字段的值 <body >
<script src ="jquery.js" > </script >
<input type ="button" value ="点击消失按钮" >
<div > <span > 你好</span > </div >
<input type ="text" value ="hello" >
<script >
$(document ).ready (function (var html = $("#test" ).html ();
console .log ("html 内容为:" +html);
var text = $("#test" ).text ();
console .log ("文本内容为:" +text);
var inputVal = $("input" ).val ();
console .log (inputVal);
});
</script >
</body >
总结 本文讲解了前端三剑客的基础认知：HTML+CSS+JavaScript 的基础知识。涵盖了 HTML 结构与标签、CSS 选择器与样式属性、JavaScript 变量函数及 jQuery 基础用法。
相关免费在线工具 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
