一、用到的工具
系统自带的文本编辑器，整篇内容样式一样，不好看。可以下载一种文本编辑器，比如 Notepad++ 免费的（会有高亮，方便看）：
还有更强大的编辑器 VS Code，样子跟集成工具一样，但是没有上面说的文本编辑器轻量。编辑前端代码，可以安装的插件：view-in-browser（编辑器右键打开 HTML 页面，不用每次去点 html 文件用浏览器运行）、Live Server（保存代码后会自动刷新页面，不用在浏览器手动刷新）。
调试工具，浏览器按：Fn+F12 或右键检查，html 阶段看元素、选中元素可以在控制台调试 css，直接在上面修改，页面符合预期后再改代码。JS 阶段观察控制台 console.log 打印的信息。
可以直接在控制台改代码调试，但是不能修改服务器上的代码。
二、HTML（骨）
1、什么是 HTML
超文本（超过文本，内容可以是视频、图片、音频、链接等）标记语言（用不同标签来包含不同类型的内容）。
标签通常是一对，少部分单个，开始标签中可以带属性。比如 id：标识该标签唯一身份。
标签层次结构，构成 Dom 树，每个标签就是一个元素：
在 VS Code 里创建一个 html 文件，!+Enter，自动生成 html 结构：
2、常用标签
（1）标题标签
h1~h6，数字越大，字号越小：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
（2）段落 p、换行 br、空格
HTML 中，段落（<p>内容</p>）、换行（<br/>）、空格（转义字符 ）全部失效。
根据浏览器宽度排版：
段落跟换行的间隙也不一样：
网上查 html 转义字符表。
（3）图片标签 img
<img src="https://pica.zhimg.com/v2-b9baddb53f230dfbabb4f1f62f4c4c9c_r.jpg?source=1940ef5c" alt="显示失败" title="小猫咪" width="500">属性：
- 图片来源 src：可以是本地绝对路径、相对路径、网络路径（在网络图片上右键，复制图片链接）。
- alt：图片显示失败时，显示的默认文字。
- width、height：宽、高。一般只设置宽，高度自适应原比例。
- title：鼠标放到图片上，浏览器显示的文字。
（4）超链接
点击超链接会跳转页面。
<a href="./text.rar">下载文件</a>
<a href="https://sogou.com/" target="_blank">打开搜狗</a>属性：
- href：跳转到的资源的路径。可以是本地绝对路径、相对路径、网络路径、#（占位作用，不会跳转）。如果资源是压缩包，则会下载。
- target：跳转方式。_self 在当前页面跳转（默认）；_blank 在新的页面跳转。
（5）表格标签
<table border="1" cellspacing="0" width="200" height="100" cellpadding="15">
<tr>
<td rowspan="2">11</td>
<td colspan="2">12</td>
<!-- <td>13</td> -->
</tr>
<tr>
<!-- <td>21</td> -->
<td>22</td>
<td>23</td>
</tr>
</table>标签：table（表）、tr（行）、td（单元格）。
表属性：
- border：表格边框线的粗细，空表示没有，1 表示 1 px。
- cellspacing：单元格之间的间隙。
- width、height：宽高。
- cellpadding：单元格内容到边框的距离。
单元格属性：
- rowspan、colspan：合并行、宽。
（6）表单标签
可以输入数据的标签。
表单控件：input 标签
属性：
- type：选哪种控件。
- name：给控件起名字，相同名字的空间为一组（对于单选、多选控件很重要）。
- value：控件的默认输入值。
- checked：默认被选中（单选、多选控件）。
各种控件：
文本框 <input type="text"> <br/>
密码框 <input type="password"> <br/>
<!-- 同 name 的为一组，才能实现只能点击一个 -->
<!-- id 标识唯一的标签，label 的 for 属性可绑定到某个标签，实现点击文字也能选择 -->
单选 <input type="radio" name="gender" id="gender1"> <label for="gender1">男性</label>
<input type="radio" name="gender" id="gender2"> <label for="gender2">女性</label> <br/>
多选框 <input type="checkbox" name="hobby"> 音乐
<input type="checkbox" name="hobby"> 画画
<input type="checkbox" name="hobby"> 打篮球
<input type="checkbox" name="hobby"> 跳舞 <br/>
<!-- 普通按钮按了没动作，需搭配JS，后面再学 -->
<input type="button" value="普通按钮">
<button>普通按钮</button>
<input type="submit" value="提交">
表单域：form 标签
把 form 标签内获取到的数据，用什么方式（method，http 的方法）提交到哪个页面（action）。
表单控件的 name 就是请求字符串中键值对的键，而值就是 value 默认值或者输入值。传输的数据，最好是 ascii 码表里的字符，避免前后端多余的编码解码处理。
<!-- 表单标签 -->
<form action="demo.html" method="get">
文本框 <input type="text" name="userName"> <br/>
密码框 <input type="password" name="password"> <br/>
<!-- 同 name 的为一组，才能实现只能点击一个 -->
<!-- id 标识唯一的标签，label 的 for 属性可绑定到某个标签，实现点击文字也能选择 -->
单选 <input type="radio" name="gender" id="gender1" value="0"> <label for="gender1">男性</label>
<input type="radio" name="gender" id="gender2" value="1"> <label for="gender2">女性</label> <br/>
多选框 <input type="checkbox" name="hobby" value="0"> 音乐
<input type="checkbox" name="hobby" value="1"> 画画
<input type="checkbox" name="hobby" value="2"> 打篮球
<input type="checkbox" name="hobby" value="3"> 跳舞 <br/>
<input type="submit" name="submit" value="submit">
</form>
<!-- 普通按钮按了没动作，需搭配JS，后面再学 -->
<input type="button" name="button" value="普通按钮">
<button>普通按钮</button>
textarea 标签
标签的内容，就是标签的默认值；rows、cols 设置行、列。
<form action="demo.html" method="get">
<textarea name="introduce" rows="10" cols="30">hello!</textarea> <br/>
<input type="submit" name="submit" value="submit">
</form>
select 标签
selected 默认选中。
<select name="city">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2" selected="selected">广州</option>
<option value="3">深圳</option>
</select>
（7）无语义标签 div、span
就是用来装一个布局内所有标签的盒子，方便同一设置样式、动作。div 独占一行，span 不换行。
（8）列表标签
ul：无序列表。一般用这个
ol：有序列表。一般不用，顺序自己打
li：列表中一行。
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<ol>
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
3、综合练习（用户注册界面）
代码：
<body>
<div>
<h1>用户注册</h1>
</div>
<div>
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="userName" placeholder="请输入用户名"></td>
</tr>
<tr>
<td>手机号</td>
<td><input type="text" name="phone" placeholder="请输入手机号"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password" placeholder="请输入密码"></td>
</tr>
</table>
</div>
<div>
<input type="button" value="注册"> <span>已有帐号</span> <a href="#" target="_blank">登录</a>
</div>
</body>页面：
三、CSS（皮）
CSS 基本格式：修饰谁+哪些修饰。每条修饰格式：键:值;
1、三种引入方式
- 行内引入：标签内使用。只修饰某一个标签，修饰不能太复杂。
- 内部引入：定义 style 标签，一般放在 head 标签中。每个 html 页面都需要定义一个，内容容易重复。
- 外部引入：定义 link 标签，一般放在 head 标签中。html 与 css 分离，企业用的方式。
2、选择器
用于选择修饰哪些元素。
（1）标签选择器
选择某种标签。语法：标签名 {}
修饰全部 div：
因为标签 a 有默认样式，就近原则，div 的 css 没生效。加上 a 的 css 即可。
（2）类选择器
选择某一类。标签属性中，加上 class 属性，同 class 的为同一类。语法：.类名 {}
只修饰部分 div：
（3）id 选择器
选择某个 id 的标签。标签属性中，加上唯一标识 id。语法：#id值 {}。
只选择某一个 div：
（4）复合选择器
以上三种的复合。>=2
ul>li*3 快捷键，ul 里包 3 个 li。
选择 ul 里的 li（如果直接选择 li，ol 的 li 也会被选择。如果把 ul 里的 li 加上同一个 class，又太麻烦）：（ul 与 li 是父子，祖先后代关系都行）
选择 ul 里的 css1 类：
选择 ol 标签和 a 标签：（并集）
如果只是 ol，a 因为有默认样式（就近原则），不会被修饰。
选择所有是 css1 类的 li 标签：（交集，两个选择器紧挨着）
（5）通配符选择器
选择所有标签。适用场景：不同浏览器有不同的默认样式，比如边界距离。为了不影响后续添加的 css，通常会把浏览器默认样式清空（比如化妆师化妆前，会卸妆）。语法：* {}
比如，浏览器页面的 body 有默认的 margin：
3、常用 css 样式
这一部分是怎么修饰。最重要的是会查网上的资料，比如：
MDN Web Docs （MDN Web Docs）
（1）color
英文字母、十进制 rgb、十六进制 rgb、rgba（带透明色）：
（2）font
复合属性。
- font-style：字体。可以设置多个字体，从左到右优先级，用户系统有哪个就用哪个。
- font-size：常用的是 px 单位，静态的，在每个浏览器上都不会变。em，相对于父元素的大小。
（3）border
复合属性，可以同时设置关于 border 的多个属性（顺序不定）。例如：border: 1px solid purple;
也可以单独设置：
- border-color
- border-style：边框的样式。solid，实线。默认是 none，不显示。也符合下述的上下左右。
- border-width：边框粗细。也是符合属性，细分上下左右。如果设置的 1 个值，表示四边相同。2 个值，上下、左右。三个值，上、左右、下。四个值，上、右、下、左（顺时针）。
（4）width、height
块级元素（独占一行的元素，如 div、p、h1~h6）才能设置。行内元素（如 span、a、input）不能。
display 可修改显示模式：
- block：行内改块级。
- inline：块级改行内。
（5）margin、padding
这俩都是相对距离。对于某元素，如果另一个元素相对它在里面，它们的距离就是 padding；如果另一个元素相对它在外面，它们的距离就是 margin。
同样，这俩值，也是复合属性，可以设置 1~4 个值。
四、JavaScript（魂）
JavaScript 是个脚本语言，不用像 Java 一样编译，可以直接插入 HTML。它跟 Java 没任何关系，只不过参考了 Java 的一些语法，叫 JavaScript 是蹭热度。
1、基础语法
（1）变量声明
- var：过时了，不管。
- let：声明变量。
- const：声明常量。
变量命名规则跟 Java 一样。+ 可以拼接字符串。\n 表示换行。
（2）变量类型
number（数字）、string（字符串，单引号、双引号都可）、boolean（true、false）、undefined（未初始化的变量值）。typeof 返回变量类型。
JavaScript 是动态弱类型语言（变量声明不用固定类型，即动态。不同类型的变量之间可以互相转换，即弱类型）；Java 是静态强类型语言。
consle.log() 打印数据到浏览器调试控制台。
（3）运算符
重点是 ==、=== （!=、!==）的区别，还有除号 / 。
- ==：只比较内容。
- ===：比较内容和类型。
- /：不整除。
（4）JavaScript 对象
这个对象是指结构化数据类型，不是指 Java 中的对象。
数组
定义：new 或者 [ ]。里面的值类型可以不同。
查、增、改：下标访问，从 0 开始。
删：splice(x,y)，从下标 x 开始删 y 个。
数组下标可以是非法值，像字典一样用：
函数
两种定义方式：类似 Java 的；匿名函数。
重点关注函数的形参：实参比形参多，多的部分不参加运算；实参比形参少，少的形参为 undefined。number+undefined=NAN（Not A Number） string+undefined=拼接
对象
跟 Java 的对象概念差不多，使用时要 new。
2、三种引入方式
CSS 是元素修饰，加载网络时，让用户提前看到画面能提升体验感，所以 CSS 引入一般放到 head。而 JS 是用户与网页的交互动作，可以暂缓放到外观之后，所以 JS 一般放到 body 的末尾。
3、JQuery
就是 JavaScript 的框架，现在已经过时不用，但是它作为经典框架进行入门教学。
（1）引入依赖
下载 JQuery CDN：
右键，打开链接，右键，另存为：
外部引入 JQuery：
（2）语法
选择什么元素，对元素执行了什么动作，这些动作触发了什么操作。
$(选择器).什么动作(function(){
触发什么操作
})执行 JQuery 代码前，要加：
$(document).ready(function(){
JQuery code
})
// 可简写成
$(function(){
JQuery code
})防止页面（document）没加载完毕，就执行动作。
（3）选择器
跟 CSS 差不多，选择哪些元素：
（2）事件
对元素做的动作。
更多事件查文档。
（3）操作元素
操作元素的值
获取：没参数
设置：有参数
操作元素的属性
获取：attr("属性")
设置：attr("属性", "内容")
操作元素的 css 属性
获取：css("css 属性")
设置：css("css 属性", "css 值")
添加元素
删除元素
- remove()：删除被选元素及子元素。
- empty()：删除备选元素的子元素。
五、综合实践
1、猜数字
<!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>
<div>
<button id="reset">重新开始一局游戏</button>
</div>
<div>
<span>请输入要猜的数字：</span>
<input type="text" id="guess">
<button id="buttonGuess">猜</button>
</div>
<div>
<span>已经猜的次数：</span>
<span id="count">0</span>
</div>
<div>
<span>结果：</span>
<span id="result"></span>
</div>
<script src="jquery-3.7.1.min.js"></script>
<script>
$(function() {
// 每局生成一个随机数
let num = Math.floor(Math.random()*100)+1;
console.log(num);
let count = 0;
// 点击 “猜”，执行比较逻辑
$("#buttonGuess").click(function() {
// 每猜一次，设置计数
count++;
$("#count").text(count);
// 获取输入值，比较
let guess = $("#guess").val();
if(guess < num) {
$("#result").text("猜小了");
$("#result").css("color", "red");
}else if(guess > num) {
$("#result").text("猜大了");
$("#result").css("color", "red");
} else {
$("#result").text("猜对了");
$("#result").css("color", "green");
}
})
// 点击重新开始，重置
$("#reset").click(function() {
// 重新生成随机数
num = Math.floor(Math.random()*100)+1;
console.log(num);
// 输入清空
$("#guess").val("");
// 结果清空
$("#result").text("");
// 猜的次数置 0
count = 0;
$("#count").text(count);
})
})
</script>
</body>
</html>2、表白墙
直接导入 html、css，实现 js。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>留言板</title>
<style>
.container {
width: 350px;
height: 300px;
margin: 0 auto;
/* border: 1px black solid; */
text-align: center;
}
.grey {
color: grey;
}
.container .row {
width: 350px;
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
.container .row input {
width: 260px;
height: 30px;
}
#submit {
width: 350px;
height: 40px;
background-color: orange;
color: white;
border: none;
margin: 10px;
border-radius: 5px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>留言板</h1>
<p class="grey">输入后点击提交, 会将信息显示下方空白处</p>
<div class="row">
<span>谁:</span> <input type="text" name="" id="from">
</div>
<div class="row">
<span>对谁:</span> <input type="text" name="" id="to">
</div>
<div class="row">
<span>说什么:</span> <input type="text" name="" id="say">
</div>
<input type="button" value="提交" id="submit" onclick="submit()">
<!-- <div>A 对 B 说: hello</div> -->
</div>
<script src="jquery-3.7.1.min.js"></script>
<script>
// 实现 submit 的操作
function submit() {
// 获取输入值
let from = $("#from").val();
let to = $("#to").val();
let say = $("#say").val();
// TODO，判断输入是否合法
if(from == "" || to == "" || say == "") {
return;
}
// 拼接
let html = "<div>" + from +" 对 " + to +" 说: " + say + "</div>"
// 添加元素
$(".container").append(html);
// 清空输入值
$(":input").val("");
}
</script>
</body>
</html>