跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客GitHub 精选镜像工具UI配色美学隐私政策关于联系
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
HTML / CSS大前端

前端开发基础：HTML、CSS 与 JavaScript 核心知识体系

综述由AI生成系统介绍了前端开发的核心技术栈：HTML 负责页面结构与常见标签（段落、图片、链接、表单等），CSS 负责页面样式与布局（选择器、颜色、尺寸、边距等），JavaScript 负责页面交互与行为（变量、函数、对象及 jQuery 库的使用）。文章提供了基础语法示例与代码片段，帮助读者建立前端基础知识体系。

协议工匠发布于 2026/4/6更新于 2026/5/2123 浏览
前端开发基础：HTML、CSS 与 JavaScript 核心知识体系

前端开发基础：HTML、CSS 与 JavaScript 核心知识体系

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 的快速入门

标准的 HTML5 基本结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
< =>
JavaScript


这是一个页面内容
meta
charset
"UTF-8"
<title>
</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. 图片标签
<img src="rose.jpg">

注意这里的图片来源是程序的文件的目录下，这是直接路径。

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 基础结构

选择器 + {一条/N条声明}

  • 选择器决定针对谁修改 (找谁)
  • 声明决定修改啥。(干啥)
  • 声明的属性是键值对。使用 ; 区分键值对，使用 : 区分键和值。

代码如下：

<style>
p {
/* 设置字体颜色 */
color: red;
/* 设置字体大小 */
font-size: 30px;
}
</style>
<p>hello</p>

注意：

  • CSS 要写到 style 标签中。
  • style 标签可以放到页面任意位置。一般放到 head 标签内。

2.3 CSS 选择器

CSS 选择器的主要功能就是选中页面指定的标签元素。选中了元素，才可以设置元素的属性。 CSS 选择器主要分以下几种：

  1. 标签选择器
  2. class 选择器
  3. id 选择器
  4. 通配符选择器
  5. 复合选择器

示例代码：

<div>我是一个 div, class 为 font32</div>
<div>我是一个 div, class 为 font32</div>
<div><a href="#">我是一个 div</a></div>
<ul>
<li>aaa</li>
<li>bbb</li>
<li><a href="#">ccc</a></li>
</ul>
<ol>
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ol>
<button>提交</button>
1. 标签选择器
a { color: red; }
2. class 选择器
.font32 { font-size: 32px; }

注意：这里是有一个点的。 一个类可以被多个标签使用，一个标签也能使用多个类 (多个类名要使用空格分割，这种做法可以让代码更好复用)。

3. id 选择器
#submit { color: red; }

注意：id 是唯一的，不能被多个标签使用 (是和 类选择器 最大的区别)。

4. 通配符选择器
* { color: red; }

注意：置页面所有元素，颜色为红色。

5. 复合选择器
ul li a { color: blue; }

注意：这里的标签是有先后顺序的，不能调换顺序。

2.4 常用的 CSS

1. color
.text1{ color: red; }

颜色有如下几种表达方式：

  • 英文单词，如 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 等可以是任何的类型，包括数组也是一样的，所以这就比 Java 简单很多。

var name = 'zhangsan';
var age = 20;

可以看到这里的 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)); // 30
console.log(add(1, 2, 3, 4)); // 10
console.log(typeof add);

这就是第二种写法，将 add 变量作为 sum 的返回的值，然后再进行调用操作。

对象的创建和调用：

var student = {
name: '蔡徐坤',
height: 175,
weight: 170,
sayHello: function() {
console.log("hello");
}
};
// 1. 使用 . 成员访问运算符来访问属性 `.` 可以理解成 "的"
console.log(student.name);
// 2. 使用 [ ] 访问属性，此时属性需要加上引号
console.log(student['height']);
// 3. 调用方法，别忘记加上 ()
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. 引入对应的库

建议下载 minified 版本 (压缩版，不易读，文件小，性能高，开发中推荐)。 最后粘贴到代码中：

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

放在当前项目中引入外部地址，会有外部地址不能访问的风险。

2. jQuery 的基础语法知识

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

$(selector).action()

注意：

  • $() 是一个函数，它是 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 的基础知识。讲解内容涵盖基础结构、常用标签、样式控制及脚本交互逻辑。如需深入扩展，建议额外学习相关进阶课程。

目录

  1. 前端开发基础：HTML、CSS 与 JavaScript 核心知识体系
  2. 1. HTML
  3. 1.1 什么是 HTML
  4. 1.2 HTML 的基本结构
  5. 1.3 HTML 的快速入门
  6. 1.4 HTML 常见的标签
  7. 1. 段落标签
  8. 2. 图片标签
  9. 3. 超链接标签
  10. 4. input 标签
  11. 5. 无语义标签：div & span
  12. 2. CSS
  13. 2.1 什么是 CSS
  14. 2.2 CSS 基础结构
  15. 2.3 CSS 选择器
  16. 1. 标签选择器
  17. 2. class 选择器
  18. 3. id 选择器
  19. 4. 通配符选择器
  20. 5. 复合选择器
  21. 2.4 常用的 CSS
  22. 1. color
  23. 2. font-size
  24. 3. 外边距与内边距
  25. 3. JavaScript
  26. 3.1 什么是 JavaScript
  27. 3.2 JavaScript 的基础语法
  28. 3.3 使用 JQuery 操作 JavaScript
  29. 1. 引入对应的库
  30. 2. jQuery 的基础语法知识
  31. 4. 总结
  • 💰 8折买阿里云服务器限时8折了解详情
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 🤖 一键搭建Deepseek满血版了解详情
  • 一键打造专属AI 智能体了解详情
极客日志微信公众号二维码

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

微信公众号「极客日志V2」，在微信中扫描左侧二维码关注。展示文案：极客日志V2 zeeklog

更多推荐文章

查看全部
  • Vue3 与 TypeScript 核心面试题解析
  • Spring Cloud 微服务架构概述与工程搭建
  • PromptArmor: 简单有效的提示注入防御方法
  • Kimi 新模型 K2.5 多模态与编程能力实测
  • 三款主流云电脑部署 DeepSeek 模型性能实测对比
  • 多模态与编程能力兼得：Kimi 新模型 K2.5 实测
  • STM32 单片机智能家居安防控制系统
  • Pygame 游戏开发完整流程与实战解析
  • Java 虚拟机内存模型详解
  • 前端国际化 i18n 实战指南：架构、工具与避坑
  • BaseCTF Week3 Web 与 Misc 部分解题报告
  • 十五五规划视角下的 Java 程序员机遇与行业趋势
  • C++ 进阶：深入理解类与对象的默认成员函数
  • Python 兼职接单指南：爬虫、数据分析与 Web 开发实践
  • C++ 运算符详解
  • Stable Diffusion 模型原理与本地部署实践
  • OpenMAIC：清华开源 AI 课堂生成平台体验
  • 基于 STM32 的智能家居环境监测系统设计
  • C++ 模板的幻觉：实例化、重定义与隐藏依赖
  • Git 分支管理规范与流程指南

相关免费在线工具

  • 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