HTML、CSS 和 JavaScript 是构建现代网页的三大核心技术。本文系统介绍了 HTML 文件结构、常用标签及表单处理；讲解了 CSS 引入方式、选择器分类及盒模型属性；涵盖了 JavaScript 变量定义、数据类型、运算符、数组函数对象语法，以及 jQuery 库的基础用法。最后通过一个猜数字游戏示例，演示了 DOM 操作与事件绑定的实际应用。
HTML 决定网页的框架 文本、图片、表单、按钮
CSS 显示网页中控件的样式外观 颜色、大小、间距、排版
JS 表示处理逻辑 点击按钮发生什么、表单怎么校验、数据怎么变化
使用 ! + Tab 快捷生成。
标题标签 h1-h6
段落标签 p 在 HTML 中，段落、换行符、空格都会失效。如果需要分成段落，需要使用专门的标签。
换行标签 br / 分割线 hr
<br/> 是规范写法，不建议写成 <br>。
图片标签 img
src 表示图片的路径
./ ../（以 html 文件为基准）D:/rose.jpg 网络 https://img2.baidu.comwidth / height 用来控制元素（尤其是图片）的宽度和高度。超链接 a
<a href="http://www.baidu.com" target="_blank">百度</a>
href: 跳到哪个链接target: 打开方式
_self: 当前页面打开（默认）_blank: 新标签页打开# 在 href 中占位 <a href="#">空链接</a>表格标签 table
table 表示表格，tr 表示行，td 表示单元格。
表单标签 form 提交
action: 提交到哪个页面（或接口）表单标签 input 输入 属性：
type: 决定输入框的类型name: 输入框名字value: 输入框默认值checked: 是否默认选中eg.
name 相同 → 多选一；checked → 默认选中select 标签（下拉菜单）
select 用来创建'下拉选择框'，option 用来定义下拉里的每一项。
<option selected>日本</option>
打开页面时：默认选中'日本'
textarea 标签（多行文本域）
textarea 用来让用户输入'多行文本'，比如留言、评论、简介。
rows: 显示几行（高度）cols: 每行大约多少字符（宽度）textarea 没有 value 属性，默认内容写在标签中间。无语义标签 div & span
div 和 span 都是无语义标签，用于布局。
div 是块级元素，独占一行。span 是行内元素，不独占一行。p { /* 选择器（找谁） */ color: red; /* 声明（属性：值） */ font-size: 30px; /* 声明 */ }
: 分开，用 ; 结束<div style="color: green;">绿色</div>
style 的值就是 CSS 属性键值对<style>
/* CSS 写在 HTML 文件里 */
</style>
<head> 中<link rel="stylesheet" href="style.css">
style.css 这个样式文件，引入到当前 HTML 页面中使用。.css 文件中，HTML 只负责结构。rel="stylesheet" 是什么意思？
rel = relationship（关系）stylesheet = 样式表选中页面中所有 div 标签，颜色改为绿色。
每个标签中可以定义类名，class="g1 g2 g3" 可以定义多个类名，用空格隔开，起到分组的作用。
.g1 的元素# 选择 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 是一种用来控制网页行为和交互的脚本语言。
onclick: 点击事件引号里的内容：JS 代码（进行弹窗操作）<script> 标签中写 JavaScript<script> 告诉浏览器：里面是 JS<script> 要写在最后面，要等元素生成后，才能对元素绑定操作。<script>
document.getElementById("btn").onclick = function () {
alert("点到我了");
};
</script>
document: 当前网页（整个 HTML 页面）getElementById: 通过 id 查找元素<script src="script.js" defer></script>
defer 的意思是：让 JavaScript 延后执行，等 HTML 全部解析完成之后再执行。defer 就要这句放在最后面 </body> 上面。var name = 'zhangsan';
let name = 'zhangsan';
letconst 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)let e = null;console.log(typeof d); // "undefined"== 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() 在不传参数时用于获取内容，在传参数时用于设置内容，并返回 jQuery 对象。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 id="btn2">确定</button>
<br/>
已经猜的次数：
<span id="count">0</span>
<br/>
结果：
<span id="result"></span>
</div>
<button id="btn">重新开始</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(,);
}
});
$().((){
target = .(.() * ) + ;
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