前端代码知识

一、HTML笔记(1) 基础入门(1.1) 网页制作两步记事本写代码→保存为.html后缀→浏览器打开。(1.2) 推荐工具谷歌浏览器调试方便、VSCode轻量快速。(1.3) VSCode快捷操作!回车生成HTML骨架Ctrl/注释ShiftAltF格式化CtrlS保存。(2) HTML5标准骨架(2.1) 第一行必须写!DOCTYPE html表示H5文档类型。(2.2) 根标签是html内部包含head和body。(2.3) head存放页面信息meta charsetUTF-8设置编码title定义网页标题。(2.4) body存放用户能看到的所有内容。(3) 常用文本标签(3.1) 标题标签h1到h6h1最大h6最小有利于SEO。(3.2) 段落用p标签换行用br水平线用hr。(3.3) 文本样式b粗体strong强调加粗i斜体em强调斜体del删除线span无意义行内标签。(4) 图片与超链接(4.1) 图片标签img是单标签属性包括src路径、alt替代文字、title提示、width、height。(4.2) 路径分三种绝对路径、相对路径./同级、../上级、网络路径。(4.3) 超链接用a标签href是跳转地址可包裹文字或图片。(5) 列表标签(5.1) 无序列表ulli常用于导航、菜单type可设置圆点、方块等样式。(5.2) 有序列表ollitype可设置数字、字母、罗马数字。(5.3) 列表支持嵌套快捷键ulli*数字可快速生成。(6) 表格标签(6.1) 表格由table、tr行、td单元格组成。(6.2) 常用属性border边框、width宽度、height高度。(6.3) 合并单元格colspan水平合并rowspan垂直合并。(7) 表单标签(7.1) 表单用formaction是提交地址method有get和post两种方式。(7.2) get数据可见适合少量数据post数据隐藏适合大量数据。(7.3) 常用表单项input typetext文本框、password密码框、radio单选、checkbox复选、select下拉、submit提交按钮。(8) 元素分类(8.1) 块级元素独占一行可设置宽高如div、p、h1~h6、ul、table。(8.2) 行内元素不换行不能设置宽高如a、span、b、em。(8.3) 行内块元素不换行可设置宽高如img、input、button。(9) H5新增语义化标签(9.1) header页面头部nav导航栏section区域aside侧边栏footer底部article文章内容。二、CSS笔记(1) CSS基础认知(1.1) CSS是层叠样式表用来控制网页样式和布局。(1.2) 引入方式有三种行内样式、内部样式style标签、外部样式link引入最推荐。(1.3) 语法结构选择器{属性:值;}。(2) CSS选择器(2.1) 基础选择器*全局选择器标签选择器.class类选择器#id选择器。(2.2) 关系选择器后代选择器用空格子代选择器用相邻兄弟用全部兄弟用~。(2.3) 优先级行内样式id选择器类选择器标签选择器。(3) 文字与文本样式(3.1) 颜色color字号font-size粗细font-weight字体font-family。(3.2) 对齐text-align修饰text-decoration缩进text-indent行高line-height。(4) 背景样式(4.1) background-color背景颜色background-image背景图片。(4.2) background-repeat是否平铺background-position位置background-size尺寸。(5) 盒子模型(5.1) 所有元素都可以看作盒子由内容content、内边距padding、边框border、外边距margin组成。(5.2) padding是内容与边框距离margin是盒子与盒子距离。(5.3) box-sizing:border-box让宽高包含边框和内边距。(6) 浮动布局(6.1) float:left或right让元素脱离文档流横向排列。(6.2) 浮动会造成父元素高度塌陷需要清除浮动。(6.3) 清除方法父元素overflow:hidden或使用伪类after设置clear:both。(7) 定位布局(7.1) relative相对定位不脱流相对于自身位置移动。(7.2) absolute绝对定位脱流相对于最近有定位的父元素移动。(7.3) fixed固定定位脱流相对于浏览器窗口固定不动。(7.4) z-index控制层级只对定位元素生效。(8) Flex弹性布局(8.1) 父元素设置display:flex开启弹性布局。(8.2) flex-direction控制排列方向row横向column纵向。(8.3) justify-content主轴对齐align-items侧轴对齐。(8.4) 子元素用flex设置占比。(9) CSS3新特性(9.1) 圆角border-radius阴影box-shadow。(9.2) 动画用keyframes定义animation调用。(9.3) 媒体查询media实现响应式布局。(9.4) 雪碧图和字体图标优化网页性能。三、JavaScript 笔记(1) JS基础(1.1) JavaScript是脚本语言实现网页交互。(1.2) 引入方式script内嵌、外部js文件、网络链接。(1.3) 输出方式console.log控制台输出alert弹窗document.write页面输出。(2) 变量与数据类型(2.1) 变量声明var、let、constlet块级作用域const常量不可修改。(2.2) 基本数据类型number、string、boolean、undefined、null。(2.3) 引用类型object、array、function。(2.4) typeof判断类型null的typeof结果是object。(3) 运算符(3.1) 算术运算符、-、*、/、%、、--。(3.2) 比较运算符只比较值同时比较值和类型推荐。(3.3) 逻辑运算符并且||或者!取反。(4) 流程控制(4.1) 条件语句if else、else if、switch case。(4.2) 三元运算符条件?成立执行:不成立执行。(4.3) 循环语句for循环、while循环。(4.4) break跳出整个循环continue跳过本次循环。(5) 数组常用方法(5.1) push尾部添加pop尾部删除shift头部删除unshift头部添加。(5.2) join转字符串concat合并数组indexOf查找元素reverse反转数组。(6) 字符串常用方法(6.1) charAt获取指定位置字符substring截取字符串。(6.2) indexOf查找位置trim去除两端空格split分割成数组。(7) 函数(7.1) 函数是可重复使用的代码块格式function函数名(参数){}。(7.2) return返回结果return后面代码不执行。(7.3) 函数可以传参提高代码复用性。(8) 内置对象(8.1) Math对象random随机数floor向下取整ceil向上取整abs绝对值。(8.2) Date对象获取当前时间年、月、日、时、分、秒。(9) DOM操作(9.1) 获取元素getElementById、getElementsByClassName、querySelector、querySelectorAll。(9.2) 操作内容innerText纯文本innerHTML识别HTML标签。(9.3) 操作样式style修改行内样式classList操作类名。(9.4) 创建元素document.createElement。(10) 事件操作(10.1) 常用事件click点击、input输入、change改变、mouseover鼠标移入、mouseleave鼠标移出。(10.2) 绑定方式on事件名、addEventListener。(10.3) 事件对象target获取触发元素preventDefault阻止默认行为stopPropagation阻止冒泡。(10.4) 事件委托把事件绑定给父元素代理子元素触发。(11) 定时器与优化(11.1) setTimeout延迟执行clearTimeout清除。(11.2) setInterval循环执行clearInterval清除。(11.3) 防抖频繁操作只执行最后一次用于搜索框。(11.4) 节流固定时间只执行一次用于滚动、窗口大小改变。