HTML / CSS大前端
HTML+CSS+JavaScript 前端基础知识体系梳理
前端开发三大核心技术：HTML、CSS 和 JavaScript。HTML 部分讲解了文档结构、常用标签及语义化标签；CSS 部分涵盖了基础结构、选择器（标签、类、ID、通配符、复合）及常用属性（颜色、字体、边距）；JavaScript 部分介绍了变量声明（var/let/const）、函数、对象创建及 jQuery 库的引入与基础语法。文章旨在帮助读者建立前端基础认知，理解网页结构与交互逻辑。
前端开发三大核心技术：HTML、CSS 和 JavaScript。HTML 部分讲解了文档结构、常用标签及语义化标签；CSS 部分涵盖了基础结构、选择器（标签、类、ID、通配符、复合）及常用属性（颜色、字体、边距）；JavaScript 部分介绍了变量声明（var/let/const）、函数、对象创建及 jQuery 库的引入与基础语法。文章旨在帮助读者建立前端基础认知，理解网页结构与交互逻辑。
HTML (Hyper Text Markup Language)，超文本标记语言。 超文本: 比文本要强大。通过链接和交互式方式来组织和呈现信息的文本形式。不仅仅有文本，还可能包含图片、音频，或者经审阅过的评注、补充或脚注等。
标记语言: 由标签构成的语言。
例如：
<h1>这是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
这里的 h1, h2 就是标签。
一般结构如下所示：
<html>
<head>
<title>第一个页面</title>
</head>
<body>
hello world
</body>
</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 等可以是任何的类型，包括数组也是一样的。
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)); // 30
console.log(add(1, 2, 3, 4)); // 10
console.log(typeof add);
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 来创建对象：
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();
建议使用 minified 版本（压缩版，不易读，文件小，性能高）。
<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>
这就是一个点击交互，然后按键消失的操作。
事件包括：
$(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 基础用法。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 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