HTML / CSS大前端
HTML+CSS+JavaScript 前端三剑客基础知识体系
前端开发的核心技术栈：HTML、CSS 和 JavaScript。内容涵盖 HTML 文档结构、常用标签（如段落、图片、链接、表单）；CSS 基础结构、选择器类型及常用属性（颜色、字体、边距）；JavaScript 变量声明、函数定义、对象创建及 jQuery 库的引入与基础用法。旨在帮助读者建立前端基础知识框架，理解网页结构、样式与交互的实现原理。
前端开发的核心技术栈：HTML、CSS 和 JavaScript。内容涵盖 HTML 文档结构、常用标签（如段落、图片、链接、表单）；CSS 基础结构、选择器类型及常用属性（颜色、字体、边距）；JavaScript 变量声明、函数定义、对象创建及 jQuery 库的引入与基础用法。旨在帮助读者建立前端基础知识框架，理解网页结构、样式与交互的实现原理。
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 的基本结构示例：
<!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 中，段落、换行符、空格都会失效，如果需要分成段落，需要使用专门的标签。
<p>这是一个段落</p>
<p>这是一个段落</p>
注意：
<img src="rose.jpg">
注意这里的图片的来源就是这个程序的文件的目录下，这是直接路径。
_self。如果是 _blank 则用新的标签页打开。<a href="http://www.baidu.com">百度</a>
<input type="radio" name="sex">男 <input type="radio" name="sex" checked="checked">女
注意：
<div>
<span>咬人猫</span>
</div>
<div>
<span>兔总裁</span>
</div>
<div>
<span>阿叶君</span>
</div>
注意：
CSS 能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果。能够做到页面的样式和结构分离。
选择器 + {一条/N 条声明}
代码如下：
<style>
p {
/* 设置字体颜色 */
color: red;
/* 设置字体大小 */
font-size: 30px;
}
</style>
<p>hello</p>
注意:
CSS 选择器的主要功能就是选中页面指定的标签元素。选中了元素，才可以设置元素的属性。 CSS 选择器主要分以下几种:
a { color: red; }
.font32 { font-size: 32px; }
注意：这里是有一个点的； 一个类可以被多个标签使用，一个标签也能使用多个类 (多个类名要使用空格分割，这种做法可以让代码更好复用)。
#submit { color: red; }
注意：id 是唯一的，不能被多个标签使用 (是和 类选择器 最大的区别)。
* { color: red; }
注意：* 置页面所有元素，颜色为红色。
ul li a { color: blue; }
注意：这里的的标签是有先后顺序的，不能调换顺序。
.text1{ color: red; }
颜色有如下几种表达方式:
.text1{ font-size: 32px; }
设置的是这个字体的大小。
padding: 内边距，设置内容和边框之间的距离。内容默认是顶着边框来放置的。用 padding 来控制这个距离； margin：外边距，设置元素和元素之间的距离。
<style>
span{
border: red double 2px;
margin-left: 20px;
margin-right: 20px;
}
</style>
这里只列举了 margin 这个外边距的概念，意思就是左右边距是 20 像素。
JavaScript (简称 JS), 是一个脚本语言，解释型或即时编译型的编程语言。虽然它是作为开发 Web 页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中。
这里的语言主要是用作交互的操作，他与 HTML 和 CSS 的关系如下所示：
具体的代码格式如下：
<body>
<script>
alert("Hello JavaScript!")
</script>
</body>
此时进行输出就是弹出一个提示框，可以看到此时的我们就可以进行点击交互了。
创建变量 (变量定义/变量声明/变量初始化), JS 声明变量有 3 种方式；
var name = 'zhangsan';let name = 'zhangsan';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)); // 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();
可以使用 CDN 引入 jQuery 库：
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
补充：
最后，就可以粘贴到我们代码中了：
<body>
<script src="jquery.js"></script>
</body>
这样的好处就是：放在当前项目中。引入外部地址，会有外部地址不能访问的风险。
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
$(selector).action()
注意：
$() 是一个函数，它是 jQuery 提供的一个全局函数，用于选择和操作 HTML 元素。那么具体的实例操作就是如下：
<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>
这就是一个点击交互，然后按键消失的操作； 解释：等文件加载完毕后点击了这个按钮就会触发一个方法，这个方法就会导致消失的操作；
这里的事件就是点击操作的事件，但是还有其他的事件如下：
当然还有这个如何获取这个元素的内容：
<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 属性的操作。
本文主要讲解了关于前端三剑客的基础认知：HTML+CSS+JavaScript 的基础知识。旨在帮助读者建立前端基础知识框架，理解网页结构、样式与交互的实现原理。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML 转 Markdown 互为补充。 在线工具，Markdown 转 HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML 转 Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online