跳到主要内容
HTML+CSS+JavaScript 前端三剑客基础知识体系 | 极客日志
HTML / CSS 大前端
HTML+CSS+JavaScript 前端三剑客基础知识体系 前端开发的核心技术栈：HTML、CSS 和 JavaScript。内容涵盖 HTML 文档结构、常用标签（如段落、图片、链接、表单）；CSS 基础结构、选择器类型及常用属性（颜色、字体、边距）；JavaScript 变量声明、函数定义、对象创建及 jQuery 库的引入与基础用法。旨在帮助读者建立前端基础知识框架，理解网页结构、样式与交互的实现原理。
宁静 发布于 2026/4/6 更新于 2026/5/25 1. HTML
1.1 什么是 HTML
HTML (Hyper Text Markup Language)，超文本标记语言。
超文本: 比文本要强大。通过链接和交互式方式来组织和呈现信息的文本形式。不仅仅有文本，还可能包含图片、音频，或者经审阅过的学者所加的评注、补充或脚注等。
标记语言：由标签构成的语言。
例如以下代码：
<h1 > 这是一级标题</h1 >
<h2 > 我是二级标题</h2 >
<h3 > 我是三级标题</h3 >
这里的 h1, h2 就是标签。
1.2 HTML 的基本结构
一般来说 HTML 的结构如下所示：
<html >
<head >
<title > 第一个页面</title >
</head >
<body > hello world</body >
</html >
解释：
html 标签是整个 html 文件的根标签 (最顶层标签)
head 标签中写页面的属性
body 标签中写的是页面上显示的内容
title 标签中写的是页面的标题
1.3 HTML 的快速入门
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"> 描述页面的字符编码方式。没有这一行可能会导致中文乱码。
1.4 HTML 常见的标签
1. 段落标签 在 HTML 中，段落、换行符、空格都会失效，如果需要分成段落，需要使用专门的标签。
<p > 这是一个段落</p >
<p > 这是一个段落</p >
p 标签描述的段落，前面没有缩进。
自动根据浏览器宽度来决定排版。
html 内容首尾处的换行、空格均无效。
在 html 中文字之间输入多个空格只相当于一个空格。
html 中直接输入换行不会真的换行，而是相当于一个空格。
2. 图片标签 注意这里的图片的来源就是这个程序的文件的目录下，这是直接路径。
3. 超链接标签
href: 必须具备，表示点击后会跳转到哪个页面。
target: 打开方式。默认是 _self。如果是 _blank 则用新的标签页打开。
<a href ="http://www.baidu.com" > 百度</a >
4. 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: 默认被选中。(用于单选按钮和多选按钮)
5. 无语义标签：div&span <div >
<span > 咬人猫</span >
</div >
<div >
<span > 兔总裁</span >
</div >
<div >
<span > 阿叶君</span >
</div >
div 标签，division 的缩写，含义是分割。
span 标签，含义是跨度。
就是两个盒子。用于网页布局。
div 是独占一行的，是一个大盒子。
span 不独占一行，是一个小盒子。
2. CSS
2.1 什么是 CSS CSS 能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果。能够做到页面的样式和结构分离。
2.2 CSS 基础结构
选择器决定针对谁修改 (找谁)
声明决定修改啥。(干啥)
声明的属性是键值对。使用 ; 区分键值对，使用 : 区分键和值。
<style>
p {
color : red;
font-size : 30px ;
}
</style>
<p >hello</p >
CSS 要写到 style 标签中 (后面还会介绍其他写法)
style 标签可以放到页面任意位置。一般放到 head 标签内
2.3 CSS 选择器 CSS 选择器的主要功能就是选中页面指定的标签元素。选中了元素，才可以设置元素的属性。
CSS 选择器主要分以下几种:
标签选择器
class 选择器
id 选择器
复合选择器
通配符选择器
1. 标签选择器
2. class 选择器 .font32 { font-size : 32px ; }
注意：这里是有一个点的；
一个类可以被多个标签使用，一个标签也能使用多个类 (多个类名要使用空格分割，这种做法可以让代码更好复用)。
3. id 选择器 注意：id 是唯一的，不能被多个标签使用 (是和 类选择器 最大的区别)。
4. 通配符选择器
5. 复合选择器
2.4 常用的 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 像素。
3. JavaScript
3.1 什么是 JavaScript JavaScript (简称 JS), 是一个脚本语言，解释型或即时编译型的编程语言。虽然它是作为开发 Web 页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中。
这里的语言主要是用作交互的操作，他与 HTML 和 CSS 的关系如下所示：
HTML: 网页的结构 (骨)
CSS: 网页的表现 (皮)
JavaScript: 网页的行为 (魂)
<body >
<script >
alert ("Hello JavaScript!" )
</script >
</body >
此时进行输出就是弹出一个提示框，可以看到此时的我们就可以进行点击交互了。
3.2 JavaScript 的基础语法 创建变量 (变量定义/变量声明/变量初始化), JS 声明变量有 3 种方式；
var : 早期 JS 中声明变量的关键字，作用域在该语句的函数内 var name = 'zhangsan';let : ES6 中新增的声明变量的关键字，作用域为该语句所在的代码块内 let name = 'zhangsan';const : 声明常量的，声明后不能修改 const name = 'zhangsan'; 注意：JavaScript 是一门动态弱类型语言，变量可以存放不同类型的值 (动态)。所以 var 等可以是任何的类型，包括数组也是一样的。
直接进行函数的学习，关于 JavaScript 的函数方法的写法具体是如下所示的：
function hello (console .log ("hello" );
}
hello ();
这是第一种的写法，就是 function 加上方法的名字，然后具体的操作，调用就是直接方法名字即可。
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);
这就是第二种写法，将 add 变量作为 sum 的返回的值，然后再进行调用操作。
var student = {
name : '蔡徐坤' ,
height : 175 ,
weight : 170 ,
sayHello : function (console .log ("hello" );
}
};
console .log (student.name );
console .log (student['height' ]);
student.sayHello ();
这就是主要的对象的创建的方式，还有一种就是通过 new 来创建对象，那么通过 new 对象来进行操作的方式如下：
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 ();
3.3 使用 JQuery 操作 JavaScript
1. 引入对应的库 <script src ="https://code.jquery.com/jquery-3.7.1.min.js" > </script >
uncompressed: 非压缩版本 (易读，但是文件较大，传输速度慢)
minified: 压缩版 (不易读，文件小，性能高，开发中推荐)
slim: 精简瘦身版，没有 Ajax 和一些特效
slim minified: slim 的压缩版
<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 属性的操作。
4. 总结 本文主要讲解了关于前端三剑客的基础认知：HTML+CSS+JavaScript 的基础知识。旨在帮助读者建立前端基础知识框架，理解网页结构、样式与交互的实现原理。
相关免费在线工具 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
