阅读量:4
🔥博客主页： A_SHOWY
🎥系列专栏：力扣刷题总结录 数据结构 云计算 数字图像处理 力扣每日一题_
学习前端全套所有技术性价比低下且容易忘记，先入门学会所有基础的语法（css+js+heml），常用示例，再根据项目上手练习，哪里不会查哪里是最好的学习方式
搭建环境
下载VSCode，然后安装三个插件，中文插件，HTML CSS Support（写CSS快捷神器），Live Server（实时预览页面的变化），Auto Rename Tag（修改HTMl标签时候，同步修与之匹配的另一个标签）
HTML（超文本标记语言）
——为网页提供结构
他负责告诉浏览器某个部分是段落，图片视频还是列表，他是通过一系列的标签，双标签成对出现，开始标签和结束标签，内容在其之中。单标签没有结束标签，用于没有内容的元素。
HTML文件结构
告诉浏览器这是一个html文件- html双标签，根元素，是html文档的最外层容器，也是起始点
- head标签对：放置文档的源信息，比如文档的标题，编码格式，外部的样式表，css，js文件
- body标签对：实际显示浏览器页面的内容，文本，链接，图像等等
标签
可以观察页面
1.标题标签
2.段落标签
相比于段落标签，标题标签明显有一个加粗
3.有序列表标签
4.无序列表标签
5.表格标签
border就是table标签的一个属性，里面的值边框的粗细
HTML属性
1.a标签（href，target）
常用于链接位置，href属性定义链接的目标，target表明打开方式：_self是一个默认值，在当前窗口打开，_blank是在新窗口打开。_parent父窗口打开,_top在顶层窗口打开 
补：换行和下划线分割
2.img标签（src，alt，width，height）
src属性是可以是这个目录下直接写图像的名称，或者是网上的链接
alt属性是如果这个图像无法加载显示的字
块元素和行内元素
块元素
行内元素
div标签
块级标签，通常用于创建一个可以包含其他HTML元素的容器块，没有语义，用于组织内容，创建页面的布局结构，页眉，导航栏什么的
快捷键
span标签
行内元素，作用是相当于没有特殊元素的a标签和img标签，把一些文本包装起来。便于对他们使用一些样式CSS，或者JS行为
表单
1.input标签
1.placeholder&value
他有很多属性，placeholder是给一个提示，value是直接给一个值
2.label
加一个span标签就能实现这样，但是input有自己对应的一个属性label
3.type = test/radio
这个text属性是输入的形式，test就是文本 ，radio的话就是选择框
4.实现单选 +name
如果要实现单选，需要加一个name属性，而且这些name属性必须相一致，比如性别都是gender
5.for属性
一般与input中的id所对应的，id对于每个标签每个元素来说都是唯一的，在单选框用就不合适，可以在用户名中使用
6.密码暗文
直接把类别改成password
7.多选框
checkbox属性
8.type =submit & form的action属性
需要后端提供给我们的API指定提交到哪里 
CSS （层叠式样表）
HTML和CSS的关系
CSS语法
CSS导入方式
一共三种导入方式，注意优先级
1.内部样式表
CSS样式放在html文档的head标签中
2.内联样式
把CSS样式直接放在标签中
3.外部样式表
单独放在一个css文件中，在head里面使用link链接过来，允许多个页面重复使用相同样式。
效果
以下是三种样式的一个组合
选择器
1.元素选择器
上文已经演示过了
2.类选择器
.+类名
3.id选择器
4.通用选择器
5.子元素选择器
选择直接位于父元素内部的子元素，也就是一个大标签嵌套一个小标签
6.后代选择器
注意看这里要区别一下子代和后代的区别，第一个儿子p变成了黄绿色，而包含在里面的孙子没有变
注意一个顺序：id > 类 > 标签名 ，所以上面那个标签还是保持黄绿色，见下图
7.相邻元素选择器选择器
只渲染这个选定的标签之后的选择器
8.伪类选择器
比如说鼠标放到一个标签上，有一些变化
鼠标悬停特效
CSS常用属性
1.复合元素
以font为例子，补：行高
2.行内元素、块级元素和行内块元素 & width &height
- 行内块元素和块级元素都能设置宽和高
- 行内块如果只设置宽会等比例变
- 一行内可以有多个行内块，但是块级元素不行
- 行内块元素经典的就是img（展示的商品列表啥的），行内元素经典的是span，块级元素经典div
- 着一些div或span元素可以转换成行内块元素，三种元素可以相互转换
3.相互转换
*盒子模型
1.边框
边框会用了其他同理
浮动
1.传统网页布局方式
本质就是摆盒子，多种布局方式掺杂在一起
行内块不如这个浮动方便，而且这个浮动是在父元素中浮动的
2.左右浮动
现在是还没有添加浮动
现在设置左浮动和右浮动，发现都和行内块一样，占满一行再占用下一行
3.坍塌以及清除浮动
可以看到这时候设置了height，这个文本出现在后边 ，如果注释掉就出现了坍塌
方式1：hidden
方式2：伪元素清除法
4. 定位
浮动灵活不容易控制，定位可以精准定位
1.相对定位
可以看出不脱离文档流
2.绝对定位
可以看出脱离文档流，紫色的那个块直接上去了 ，根据已经定位的父级元素进行定位的，这个是和固定定位有所区别的。
3.固定定位
相对于浏览器窗口进行定位的,不管你怎么滑动滚轮，他这个位置是始终保持不变的 
JavaScript
javascript的作用
导入方式
三种导入方式，（1）head的内联，（2）head的外联，（3）body的内联。他们有一定顺序
alert弹窗打印
除了在控制台打印，可以弹窗打印，用alert
JS基本语法
undefined和null的区别
undefined是已被声明但是没有被赋值，可能将来被赋值，null被明确赋值为空或者不存在
JS控制语句
1.条件语句
和别的语言差不多 if else 和else if和c++差不多
2.循环语句
也和c++很像
for和while都能实现
3.break和continue
和c++也是一模一样 
函数
示例
作用域：全局作用域和局部作用域
在函数内都没问题，但在外部打印局部变量就会报错
事件处理
常见事件
绑定事件的方法
demo（点击触发，获取焦点和失去焦点）
DOM
简介
节点树
常规操作（获取节点，修改节点）
可以理解为获取这些标签节点，来对标签本身进行操作
DOM属性绑定事件
按钮为例子，方式1：
方式2
如果带上括号，直接触发，且按钮失效
实现表格的增删改查
先写CSS和HTML部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table{ width: 100%;/*整个页面*/ border-collapse: collapse;/*单元格之间的边框合并*/ margin-top: 20px;/*外边距*/ } th,td{ border: 1px solid gray; text-align: center; padding: 8px; } </style> </head> <body> <h1 style="text-align: center;">表格的增删改查</h1> <button>新增数据</button> <table> <tr> <th>姓名</th> <th>联系方式</th> <th>操作</th> </tr> <tr> <td>cpy</td> <td>1566545623</td> <td> <button>编辑</button> <button>删除</button> </td> </tr> </table> </body> </html>
再写JS部分
新增数据部分：
完整部分
JS部分代码
//新增数据 function addRow(){ var table = document.getElementById('table'); // console.log(table); //获取插入的位置 var length = table.rows.length; // console.log(length); //插入行节点 var newRow = table.insertRow(length); console.log(newRow); //插入列节点 var nameCol = newRow.insertCell(0); var phoneCol = newRow.insertCell(1); var actionCol = newRow.insertCell(2); //修改节点文本的内容 nameCol.innerHTML = '未命名'; phoneCol.innerHTML = '无联系方式'; actionCol.innerHTML='<button onclick="editRow(this)">编辑</button><button onclick= "deleteRow(this)">删除</button>' } //删除数据 function deleteRow(button){ // console.log(button ); //获取父节点 var row = button.parentNode.parentNode; console.log(row); //父节点的子节点删除 row.parentNode.removeChild(row); } //编辑数据函数 function editRow(button){ var row = button.parentNode.parentNode; var name = row.cells[0]; var phone = row.cells[1]; var inputName = prompt("请输入姓名") var inputPhone = prompt("请输入手机号") name.innerHTML = inputName; phone.innerHTML = inputPhone; } HTML+CSS部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table{ width: 100%;/*整个页面*/ border-collapse: collapse;/*单元格之间的边框合并*/ margin-top: 20px;/*外边距*/ } th,td{ border: 1px solid gray; text-align: center; padding: 8px; } th{ background-color: #ddd; } button{ margin-left: 5px; } </style> </head> <body> <h1 style="text-align: center;">表格的增删改查</h1> <button onclick="addRow()">新增数据</button> <table id = 'table'> <tr> <th>姓名</th> <th>联系方式</th> <th>操作</th> </tr> <tr> <td>cpy</td> <td>1566545623</td> <td> <button onclick="editRow(this)">编辑</button><button onclick="deleteRow(this)">删除</button> </td> </tr> </table> <script src="./js/table.js"></script> </body> </html>移动端布局&rem
需要响应式布局适应不同大小和分辨率的移动设备屏幕
使用rem能保证一直占着屏幕宽度的一半
Flex盒子模型
flex-direction决定主轴方向
flex-wrap选择换行方式
justify-content定义项目在主轴上的对齐方式 
align-items决定了项目在交叉轴上的对齐方式
align-content定义了多根轴线的对齐方式 
