前端开发的基础知识，涵盖 HTML 结构标签、CSS 样式引入与选择器、JavaScript 基础语法及 jQuery 库的使用。内容包括文件结构、常见标签用法、样式属性、变量数据类型、运算符、函数对象以及 DOM 操作和事件处理。通过猜数字游戏案例演示了实际应用场景。
使用快捷键 Tab 可快速生成基础结构。
<br/> 是规范写法，不建议写成 <br>。src 表示图片的路径
./, ../（以 html 文件为基准）D:/rose.jpg，网络 https://img2.baidu.comwidth / height 用来控制元素（尤其是图片）的宽度和高度。图片通常只改一个（宽或高），另一个会按比例自动缩放。如果同时强行改宽和高，比例不一致，就会导致图片变形。<a href="http://www.baidu.com" target="_blank">百度</a>
href: 跳到哪个链接target: 打开方式
_self: 当前页面打开（默认）_blank: 新标签页打开# 在 href 中占位 <a href="#">空链接</a>table 表示表格，tr 表示行，td 表示单元格。action: 提交到哪个页面（或接口）type: 决定输入框的类型name: 输入框名字value: 输入框默认值checked: 是否默认选中name 相同 → 多选一，checked → 默认选中name 的数据，跳转到 action 指定页面。select 用来创建'下拉选择框'，option 用来定义下拉里的每一项。
<option selected>日本</option>
textarea 用来让用户输入'多行文本'，比如留言、评论、简介。
rows: 显示几行（高度）cols: 每行大约多少字符（宽度）textarea 没有 value 属性，默认内容写在标签中间。div 和 span 都是无语义标签，用于布局。
div 是块级元素，独占一行。span 是行内元素，不独占一行。p { /* 选择器 */ color: red; /* 声明 */ font-size: 30px; /* 声明 */ }
: 分开，用 ; 结束style 的值就是 CSS 属性键值对。
<div style="color: green;">绿色</div>
<style> 标签，CSS 写在 HTML 文件里，通常放在 <head> 中。<link rel="stylesheet" href="style.css">
style.css 这个样式文件，引入到当前 HTML 页面中使用。CSS 写在独立的 .css 文件中，HTML 只负责结构。
rel="stylesheet" 是什么意思？
rel = relationship（关系）stylesheet = 样式表选中页面中所有 div 标签颜色改为绿色。
每个标签中可以定义类名，class="g1 g2 g3" 可以定义多个类名，用空格隔开，起到分组的作用。
.g1 的元素g1 里面的 g2：.g1 .g2# 选择 id选中页面里的'所有元素'。
选择 ul 的后代 li 的后代 a。选择多个用 , 隔开。
| 选择器 | 写法 | 选中谁 |
|---|---|---|
| 标签 | div | 所有 div |
| 类 | .box | class=box |
| ID | #id | id=id |
| 通配符 | * | 所有元素 |
| 复合 | ul li a | ul 里的 li 里的 a |
color: red; /* 英文单词 */
color: rgb(255, 0, 0); /* RGB */
color: #ff0000; /* 十六进制 */
border 是复合属性，包含 3 个维度：
solid: 实线（最常用）dashed: 虚线dotted: 点状double: 双线div, p, h1 ~ h6span, apadding-toppadding-bottompadding-leftpadding-rightmargin-topmargin-bottommargin-leftmargin-rightJavaScript 是一种用来控制网页行为和交互的脚本语言。
行内方式 JavaScript 代码直接写在 HTML 标签里。
onclick="alert('点击事件')"
onclick：点击事件引号里的内容：JS 代码（进行弹窗操作）。
内部方式
在 <script> 标签中写 JavaScript。
<script> 告诉浏览器：里面是 JS。
浏览器会按顺序执行，所以 <script> 要写在最后面，要等元素生成后，才能对元素绑定操作。
<script>
document.getElementById("btn").onclick = function () {
alert("点到我了");
};
</script>
document: 当前网页（整个 HTML 页面）getElementById: 通过 id 查找元素"btn": 要找的 id 名外部方式
<script src="script.js" defer></script>
defer 的意思是：让 JavaScript 延后执行，等 HTML 全部解析完成之后再执行。defer 就要这句放在最后面 </body> 上面。var name = 'zhangsan';
let name = 'zhangsan';
let。const name = 'zhangsan';
let age = 18;
let msg = "我今年" + age + "岁";
// msg 为字符串 "我今年 18 岁"
alert("第一行\n第二行");
let a = 10;
let b = 3.14;
let s1 = "hello";
let s2 = 'world';
let flag1 = true;
let flag2 = false;
let d;
// 变量声明了，但没赋值，只有一个值：undefined
console.log(typeof d); // "undefined"
let e = null;
== vs ===
== 只比较'值'，会进行隐式类型转换
20 == "20" // true
=== 同时比较'值 + 类型'，不会转换
20 === "20" // false
===。var arr = [1, 'abc', true, null];
arr.splice(4, 1)
{} 表示一个对象: 分隔键和值，, 分隔多个属性jQuery 是一个 JavaScript 前端库。
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
$(selector).action()
$(): jQuery 提供的全局函数，用来'选元素'
selector（选择器）：用来查找 HTML 元素（和 CSS 选择器一样）
action()（操作）：对选中的元素做事情（改内容、绑定事件、改样式等）
document 表示整个页面
.ready(): 等页面加载出来（等 btn 控件加载出来才行，不然绑定失败）
$('#btn'): 绑定 id=btn 的控件
.click(): 触发点击时执行该函数
$(this): 选择当前元素$(document): 选择整个网页$("CSS 选择器")
$("*"): 选择页面中的所有元素$('.class'): 选择 class 组的所有元素$("*") 是'全选内容'，$(document) 是'选网页本身'$(selector): 哪个控件
event: 什么事件
function(): 执行什么操作
html(), text(), val() 在不传参数时用于获取内容html(): 标签会生效；text(): 标签当普通文字color, font-size, width, height 都是 CSS 样式empty(): 只删除子元素remove(): 删除整个元素
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>猜数字</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div>
输入数字：<input type="text"><button>确定</button><br/>
已经猜的次数：<span>0</span><br/>
结果：<span></span>
</div>
<button>重新开始</button>
<script>
$(document).ready(function(){
let target;
let count;
// 初始化
target = Math.floor(Math.random() * 100) + 1;
count = 0;
// 猜数字
$("#btn2").click(function(){
let re = parseInt($("input").val());
if (isNaN(re)) {
$("#result").text("请输入数字");
return;
}
count++;
$("#count").text(count);
if (re > target) {
$("#result").text("大了");
$("#result").css("color","red");
} else if (re < target) {
$("#result").text("小了");
$("#result").css("color","red");
} else {
$("#result").text("对了！");
$("#result").css("color","green");
}
});
// 重新开始
$("#btn").click(function(){
target = Math.floor(Math.random() * 100) + 1;
count = 0;
$("#count").text(0);
$("#result").text("");
$("input").val("");
});
});
</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