目录：
一~七，HTML
八~ 十三，CSS
十四~二十二，JavaScript
二十三，总结与后续学习建议
一、web前端介绍
三件套：HTML-页面结构，CSS-页面样式和布局，Javascipt交互和动态功能
二、安装VScode开发环境
插件：Chinese (Simplified)+HTML css suport(css 快捷)+live server（实时显示web页面变化，不同步的话，把自动保存关闭）+Auto Rename Tag(修改标签时，对配对标签同时修改)
三、HTML简介及环境搭建
HTML为网页提供结构
HTML标签：控制文本格式
HTML文件结构：
<!DOCTYPE html> --》告诉浏览器文件格式
这是一个HTML文件
<html> --》文件开始/结束
<head>--》文档头部，设置文档的元信息
...
...
<head>
<body>--》实际显示在浏览器的内容
...
...
<body>
</html>
（快捷键：！+Tab）
示例demo.html:
创建->生成.html结构(快速生成，输入感叹号)->右击鼠标（live server）
四、常用文本标签
标题标签：6种 h1、h2...h6
段落标签：p(page)（段落）、b(bold)（加粗，strong也是加粗）、i(italic)（斜体）、u(underline)（下划线）、s（删除线）
有序列表与无序列表：ul li ;ol li
表格标签：table tr(table row) td(table data) th(table header)
五、HTML属性
定义、语法：
适合大多数HTML元素的属性：
<a href="https:/.../..." target="_blank">这是一个超链接 </a>（可以和其他同一行，！注：浏览器中同行）
href：hyper reference ,超链接
target:打开方式，4种打开方式：
br：换行
hr:换行
<img src="https:/.../..." alt="" width="200" height="100">（可以与其他的同行）
img:嵌入图像，实现图像的显示
六、html区块-行内元素和块元素
块元素：
行元素：
<em>:斜体,<i>也是
最常用的两个标签：
div:块表签，没有任何语义，仅用于组织内容，创建结构
nav-bar=nav
.nav #nav :快速生成同class，同id
span:行内元素，（把一小部分文本包装起来，以便于使用样式、css、js）用于内联、样式化文本，给文本的一部分应用样式或标记，通常与css，JS一起使用
七、HTML表单
表单：form标签--表单的容器
value规定input元素的值
placeholder--提醒输入
label和span对应相同意思，但是label仅限于在input里使用
单选
在 HTML 中，<input type="radio"> 要实现单选（即多个选项中只能选一个），关键就是多个 radio 元素要拥有相同的 name 属性值。这是因为：
原因：
浏览器会根据 name 属性将具有相同 name 的 radio 按钮视为一组。在同一组中，用户只能选择一个选项，选择另一个时前一个会自动取消选择。
for把label绑定到input元素
label的for属性一般与input的id绑定
type的password属性使它成为暗文
多选-checkbox
action--提交时，向何处发送填写的数据，一个URL，需要后端服务器提供api
input按钮的名称value=“上传”
八、CSS简介及导入方式
简介：
内联--直接在HTML中，style直接定义
内部--在head中
外部--单独把css放在css文件中，在head链接到HTML文档中（可重复使用）
css与HTML关系：
css语法：
选择器放在head中间
CSS三种导入方式：
九、CSS选择器
定义、类型：用于选择要应用样式的HTML元素
1-4：
5-6：
7-8：
伪类选择器：
🧠 举个简单的例子：
css
复制编辑
a:hover {
color: red;
}
👉 这个意思是：当鼠标悬停在链接上时（hover），把字体颜色变成红色。
🔥 常见的伪类选择器：
伪类说明:hover鼠标悬停时
:active鼠标点击的那一瞬间
:focus输入框被选中时（光标闪啊闪）
:first-child某个元素是父元素的第一个子元素
:nth-child(2)父元素的第 2 个孩子
📦 总结一下就是：
“伪类”是选中某种状态下的元素，比如“鼠标悬停时”、“是第一个孩子时”之类。
伪元素选择器
十、CSS常用属性
font:字体的复合属性，（顺序有要求）通过一个属性设置多个样式，比如通过font设置字体的粗细、大小……
line-height:行高
行内块元素：一行可以有多个行内块
但是不可以有多个块级元素
行内元素：高度、宽度由它所包含的内容决定
display--三者转换
div--行内元素
span转行内块元素
span转块级元素
十一、盒子模型
概念：
border的设置
边框：上右下左，顺时针
padding，margin的设置（demo）
实现：
十二. 浮动
传统网页布局方式：把盒子摆放位置
浮动：相邻没有间隙，如果父级宽度装不下这些浮动的盒子，多的盒子就另起一行；行内块元素彼此有缝隙
只会在父元素内部进行移动
浮动三大特性：
实现：
设置浮动float、父类坍塌（没有设置高度
）-->清除浮动（overflow，
伪元素清除法
）
十三.定位
定义：
实现：
相对定位（position：relative）
绝对定位：脱离正常文档流
固定定位：脱离正常文档流，相对于HTML页面定位，即使页面滚动也不会移动，保持相同位置
position:relative-微调,absolute,fixed
left,right,top,bottom
十四.JavaScript 简介及导入方式
定义：
作用：
JS导入方式：有两种 显示：Fn+F12-->Console
内联（script）：可以在body、head（script））
外联:创建.js文件-导入.js文件
基本输入输出：./js/（js文件夹）
打印到控制窗口：console.log()
显示到下拉框：alert（）
十五.JavaScript 变量与数据类型
变量的3个关键字：
var：可变，函数作用域
let:可变，块作用域（更安全更灵活）
const：常数
null和undefine区别
undefined：
默认的系统行为（未赋值、函数无返回值等）。
通常不推荐主动赋值 undefined，应使用 null 表示明确的空值。
null：
开发者主动清除变量或对象引用（如释放内存）。
作为函数的可选参数，表示“无值”。
十六. JavaScript 控制语句
条件语句：
if..else if..else if...else
循环语句：
无限循环一般while
while、for、break、continue
十七.JavaScript 函数
定义：
实现：
function1{console.log(' ');}
function2{return ;}——1.需要let 定义一个变量来接收
2.console.log('function2')
含参数的：function3（name）
作用域：全局变量、局部变量
外部打印局部变量时报错：
十八.JavaScript 事件
定义：将HTML、CSS、JavaScipt联系
事件绑定：
实现：
十九.JavaScript DOM
定义：对象（函数+变量）——对象是为了让函数和变量之间建立联系
节点树：
实现：用document操作节点数
DOM对象常用方法：
box1是一个元素
[0]---标记class1，box2是一个数组
TagName获取了三个<div>
修改页面的内容（innerHTML 是 写入内容 的一种方式，可以直接修改元素的内部结构或文本。）id名.innerHTML=' 修改后的内容 '
innerHTML：会解析（如链接a）并更新
innertext：纯文本，不会解析
dom绑定：
✅ 哪些方法返回的是“多个”？所以要 [0]
这些方法可能会选中多个元素，所以你会得到一个“类数组”，需要用 [0], [1] 来取出第几个：
方法返回类型示例是否需要 [0]？getElementsByClassName()HTMLCollection（类数组）.box是getElementsByTagName()HTMLCollection（类数组）div、p是querySelectorAll()NodeList（类数组）.box, div 等是
js
复制编辑
var divs = document.getElementsByTagName("div");
divs[0].innerHTML = "我改了第一个 div 的内容";
✅ 哪些方法返回的是“单个”？所以不需要 [0]
这些只会选中一个元素，所以直接用就行，不用 [0]。
方法返回类型示例是否需要 [0]？getElementById()单个元素（对象）id="box1"否querySelector()单个元素（第一个匹配项）.box, #id, p 等否
js
复制编辑
var box = document.getElementById("box1");
box.innerHTML = "直接改就行，不用加 [0]";
❓那这个“数组”到底能取几个？是不是无限？
不是无限，而是：
你页面上有几个符合条件的元素，它就返回几个。
你可以用 .length 来判断它有多少个。
js
复制编辑
var boxes = document.getElementsByClassName("box");
console.log(boxes.length); // 假如有3个class="box"，这里就是3
🔧 编码时小技巧：
如果你确定只改第一个元素，用 [0] 就够。
如果你想改多个，可以配合 for 循环：
js
复制编辑
var items = document.getElementsByClassName("box");
for (var i = 0; i < items.length; i++) {
items[i].style.color = "red";
}
二十.练习-表格的增删改查
js和html交互
要点过多，<0.o><O.o>
20. 练习-表格的增删改查 P20 - 18:30
二十一.移动端适配及 rem
不同设备显示效果不一样，移动端页面大小、形状不一，需要自适应、响应布局，使用户获得良好体验
viewport:
rem:
rem相对单位（倍数，10px，20rem--20*10px），相对于HTML页面，px是绝对单位，固定，不随页面变化而变化
绑定事件，调用函数
21. 移动端适配及 rem P21 - 00:02
二十二.Flex弹性盒子与容器属性
定义：
flex:
属性演示：
二十三.总结与后续学习建议
