系统讲解了前端开发的核心技术栈，包括 HTML 基础标签与结构、CSS 样式表引入及选择器用法、JavaScript 语言特性与对象操作，以及 jQuery 库的基本应用。文中通过表格、表单及猜数字游戏等实例演示了代码编写方法，旨在帮助初学者快速掌握网页构建与交互实现的基础流程。
HTML (Hyper Text Markup Language)，超文本标记语言。 ：比文本更强大，可以表示图片、音频、视频等。 通过进行控制，这些标签都是定义好的。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
这里的 h1、h2 和 h3 就是标签。
标签名 body 放到<>中。
<!-- 标签是成对出现的 -->
<h1>开始标签</h1>
<h1>结束标签</h1>
开始和结束标签中存放的是此时这个标签的内容。开始标签中可能会带有"属性"，并且有的标签也可能是单个标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试</title>
</head>
<body> hello world </body>
</html>
结构之间的关系构成一个DOM 树。
建议使用现代代码编辑器（如 VS Code）进行开发，功能丰富且支持多平台。
原本内容不会自动换行，可以使用 p 进行换行。
<p>这是一个段落</p>
<p>这是一个段落</p>
br 是一个单标签，间隙没有 p 标签大。
换行标签<br/>
<p>这是一个段落</p>
<p>这是一个段落</p>
p 是段落标签，换行以后每一段之间有一行间距；br 换行标签，所以行之间没有间距隔开。
<img src="../xingye.jpg" alt="这是一个人物" width="500px" height="500px" style="border: 2px solid black;">
src 表示图片路径，alt 表示图片未正常显示时显示的内容。
可以使用绝对路径或相对路径（../ 表示上一级目录）。以 html 所在位置为基准查找图片。
href：点击后跳转哪个页面。
target：打开方式。默认是 _self。如果是 _blank 则用新标签页打开。
外部链接：
<a href="https://wap.baidu.com/">百度</a>
内部连接：网站内部之间的链接，写相对路径即可。
<a href="demo1.html" target="_blank">点击后会跳转到 demo1.html</a>
空链接：使用 # 在 href 中占位。
<a href="#">空链接</a>
table 标签：表示整个表格。 tr：表示表格的一行。 td：表示一个单元格。 thead：表格的头部区域。 tbody：表格的主体区域。
align：表格对齐方式。 border：边框。 cellpadding：内容距离边框的距离。 cellspacing：单元格之间的距离。 width/height：设置尺寸。 rowspan：占据多少行。 colspan：占据多少列。
<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="500">
<tr><td>名字</td><td>性别</td><td>年龄</td></tr>
<tr><td>张三</td><td>男</td><td rowspan="2">18</td></tr>
<tr><td>李四</td><td>女</td></tr>
<tr><td colspan="2">李四</td></tr>
</table>
<form action="test.html">
<!-- form 内容 -->
</form>
各种输入控制，文本框，按钮，单选框，复选框。 type：text, button, checkbox, file, radio 等。 name：给 input 起个名字，尤其是单选按钮，必须有相同名字才可以是单选。 value：input 中的默认值。 checked：默认被选中，用于单选和复选按钮中。
<form action="test.html">
账号：<input type="text" name="Users" id="">
密码：<input type="password" name="password" id="">
性别：
<input type="radio" name="sex" id="male" value="0"><label for="male">男</label>
<input type="radio" name="sex" id="female" value="1"><label for="female">女</label>
</form>
复选框。
<input type="checkbox" name="chec">吃饭
<input type="checkbox" name="chec">睡觉
<input type="checkbox" name="chec">打游戏
<select name="sel" id="">
<option value="0">小学</option>
<option value="1">初中</option>
<option value="2">高中</option>
<option value="3" selected="selected">高中及以上</option>
</select>
文本域和按钮。
简介：<textarea rows="10" cols="100"></textarea>
注册：<input type="button" value="注册">
<input type="submit" value="注册">
button 按钮没有提交功能，submit 会提交。
<h1>用户注册</h1>
<table>
<tr><td>用户名</td><td><input type="text" placeholder="请输入用户名"></td></tr>
<tr><td>手机号</td><td><input type="number" placeholder="请输入手机号"></td></tr>
<tr><td>密码</td><td><input type="password" placeholder="请输入密码"></td></tr>
</table>
<div>
<input type="submit" value="注册">
<span>已有账号?</span>
<a href="#">登录</a>
</div>
CSS (Cascading Style Sheet)，层叠样式表，用于控制页面的样式。 CSS 能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果。能够做到页面的样式和结构分离。
选择器 + { 声明 }。选择器确定修改谁，声明决定修改成啥。
通常放到 head 中。
<style>
p{color: red}
div{color: rgb(180, 220, 22)}
span{color: blue}
</style>
将 style 放到一个 css 文件中，然后引用。
<link rel="stylesheet" href="demo.css">
在标签里面进行样式控制。
<p style="color: red;">一个段落</p>
a{color: red;}
div{color: green;}
.red{color: red;}
.blue{color: blue;}
使用 class 调用。
#div1{font-size: 32px;}
*{color: #ff0000;}
ul a{color: red;} /* 子孙 */
li > a{color: red;} /* 直接子元素 */
.text{color: red;}
.text{font-size: 32px;}
border-width：设置边框粗细。 border-style：设置边框类型（dotted, solid, double, dashed）。 border-color：设置边框颜色。
div{border: red solid 1px;}
只有块级元素（h1-h6, p, div 等）独占一行，才可以设置宽高。 行内元素（a, span）不独占一行，不可以设置宽高。
span{display: block;}
可以将行内元素修改为块级元素。
设置内容和边框之间的距离。
外边距，设置元素和元素之间的距离。
JavaScript (简称 JS)，是一个脚本语言，解释型或即时编译型的编程语言。 HTML：网页的结构 (骨)。 CSS：网页的表现 (皮)。 JavaScript：网页的行为 (魂)。
命名规则：组成字符可以是任何字母、数字、下划线 (_) 或美元符号 ($)。 数字不能开头，建议使用大驼峰。 JavaScript 是一门动态弱类型语言，var 类型可以放不同类型的值。
var name = 'zhangsan';
console.log(typeof name);
name = 12;
console.log(typeof name);
== 比较相等，会进行隐式类型转化。 === 比较相等，不会进行隐式类型转化。
var arr = new Array();
var arr2 = [];
var arr3 = [1, 2, 'hello', true];
增删查改：
// 查找
arr3.length
// 增
arr3[4] = 123;
// 改
arr3[3] = false;
// 删
arr3.splice(3, 1);
function hello(){
console.log('hello');
}
hello();
参数匹配问题：参数少会出现未定义，参数多会截取。
var student = {
name: '张三',
age: 18,
sayHello: function(){
console.log("hello");
}
};
JQuery 是一个快速、简洁且功能丰富的 JavaScript 框架，提供了选择器和 DOM 操作。
<script src="jquery-3.7.1.js"></script>
$( ) 是 JQuery 提供的一个全局函数，用于选择和操作 HTML 元素。
$(document).ready(function() {
$('button').click(function() {
$(this).hide();
});
});
以$开头，可以通过标签、class、id 进行选择。
事件组成：事件源、事件类型、事件处理程序。
获取和修改元素内容：
$('#div').html(); // 获取/设置 HTML
$('#input').val(); // 获取/设置表单值
$('#div').text(); // 获取/设置文本
获取/设置元素属性：
$('#jd').attr("href");
$('#jd').attr("href", "https://www.baidu.com/");
获取/设置 CSS 属性：
$('div').css('color');
$('div').css('color', 'blue');
append()：尾部插入。 prepend()：头部插入。 after()：之后插入。 before()：之前插入。
remove()：删除被选元素及其子元素。 empty()：删除被选元素的子元素。
每次要输入猜的数字，点击猜这个按钮，就会猜的次数++，结果显示猜大了还是猜小了。 点击重新开始就会重新生成 1~100 之间的数字，猜的次数重置为 0。
逻辑：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>猜数字</title>
<script src="jquery-3.7.1.js"></script>
</head>
<body>
<div style="margin: 0 auto; width: 500px;">
<button id="reset">从新开始游戏</button><br/>
请输入要猜的数字：<input type="number" id="inputNum"><br/>
<button id="guess">猜</button><br/>
已经猜的次数：<span id="count"> 0 </span><br/>
结果：<span id="result"></span>
</div>
<script>
let randNum = Math.floor(Math.random()*100)+1;
let count = 0;
$('#guess').click(function(){
count++;
$('#count').text(count);
let inputNum = $('#inputNum').val();
if(inputNum < randNum){
$('#result').text("猜小了");
$('#result').css('color','red');
} else if(inputNum > randNum){
$('#result').text("猜大了");
$('#result').css('color','red');
} else {
$('#result').text("猜对了");
$('#result').css('color','green');
}
});
$('#reset').click(function(){
count = 0;
randNum = Math.floor(Math.random()*100)+;
$().();
$().(count);
$().();
});
</script>
</body>
</html>
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 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