web笔记

文本标签

• 内容标题 h1-h6
• 水平分隔符: hr
• 段落标签: p
• 换行: br
• 加粗 b
• 斜体 i
• 下划线 u
• 删除线 s

列表标签

• 无序标签: ul 内部 li
• 有序标签: ol 内部 li
• 嵌套列表: 有序列表和无序列表都可以任意无限嵌套

图片标签 img

• src: 资源路径
  • 相对路径:访问站内资源使用
    • 图片与页面在同级目录: 直接写图片名
    • 图片在页面的上级目录：…/图片名
    • 图片在页面的下级目录：文件夹名/图片名
  • 绝对路径：访问站外资源使用
• alt：当图片不能正常显示时显示的文本
• title：鼠标在图片上悬停时显示的文本
• width/height 设置图片的宽高，两种赋值方式：1.像素 2.百分比 如果只设置宽度高度会等比例缩放

超链接 a

• href：资源路径
• a标签包裹文本为文本超链接 包裹图片为图片超链接
• 页面内部跳转，在目的地元素里面添加id属性 然后通过超链接href="#id"的方式跳转到目的地元素的位置

表格标签 table

• tr：行
• td：列
• th：表头
• caption：表格标题
• border：边框
• colspan：跨列
• rowspan：跨行

表单form

• action：设置提交地址
• input：元素
• type：类型
  • text：文本输入
  • radio：单选按钮
  • submit：提交按钮
  • checkbox：复选框
  • date：日期选择器
  • sumit：提交按钮
  • reset：提交按钮
  • button：自定义按钮
• name：表单的名称
• placeholder：占位文本
• value：设置默认值
  单选框中value必须写 不写则提交on checked设置默认选中
• maxlength：最大字符长度
• select：下拉列表标签
  与option同时使，selected设置默认选中

CSS引入方式

• 内联样式：在标签的style属性中添加样式代码 不能复用
• 内部样式：在head标签里面添加style标签, 通过选择器找到元素后再添加样式代码, 可以复用但是不能多页面复用
• 外部样式：在单独的css样式文件中写样式代码, 在html页面中通过link标签引入, 可以多页面复用,可以将样式代码和html代码分离开. link rel=“stylesheet” href="***.css"

选择器

标签名选择器

• 格式：标签名{样式代码}
• 匹配页面中的所有同名标签

id选择器

• 格式：#id{样式代码}
• 当需要选择页面中某一个元素时使用

 #p1{
      color: red;
    }

类选择器

• 格式：.class{样式代码}
• 当需要选择页面中多个不相关元素时, 给多个元素添加相同的class属性值即可

.c1{
      color: antiquewhite;
    }

分组选择器

• 格式: p,#abc,.xyz{样式代码}
• 将多个选择器合并为一个选择器的写法

属性选择器

• 格式: 标签名[属性名=‘值’]{样式代码}

 input[type='text']{
      background-color: brown;
    }

子孙后代选择器

• 格式: body div div p{样式代码}
• 上面格式匹配的是body里面的div里面的div里面的所有p(包括子元素和后代元素)

 body div div p{
      color: red;

子元素选择器

• 格式: body>div>div>p{样式代码}
• 上面格式匹配的是body里面的div里面的div里面的所有子元素p(不包含后代元素)

body>div>p{
      color:blue;
    }

伪类选择器

• 选择的是元素的状态
• link:未访问
• visited:访问过
• hover:悬停
• active:点击
• 格式：a:link/visited/hover/active{样式代码}

a:link{color: red}/*未访问状态*/
    a:visited{color: green}/*访问过状态*/
    a:hover{color: yellow}/*悬停状态*/
    a:active{color: pink}/*点击状态*/

分区标签

• div:块级分区元素, 特点: 独占一行
• span: 行内分区元素, 特点: 共占一行
• 如何对页面内容进行分区:
  • 一个页面至少分为3大区, 头/体/脚, 每一个大区再划分n个小区

<div>头</div>
<div>体</div>
<div>脚</div>

• html5标准中新增了几个分区标签,作用和div一样,为了提高代码的可读性 ,包括: header头,footer脚,section区域,
  article文章/正文, nav导航

<header></header>
<section></seciont>或<article></article>
<footer></footer>

背景图片

• background-image:url(“路径”) ; 设置背景图片
• background-repeat:no-repeat; 禁止重复
  background-size: 100px 200px; 设置背景图片尺寸 宽 高
  background-position: 横向 纵向; 控制位置, 像素偏移值 和 百分比两种方式

文本和字体相关样式

• text-align: left/right/center; 文本水平对齐方式
• text-decoration: overline/underline/line-through/none 文本修饰
• line-height:20px; 行高, 多行文本可以控制行间距, 单行文本可以实现垂直居中
• font-size: 20px; 设置字体大小
• font-weight:bold/normal; 设置加粗或去掉加粗
• font-style:italic; 设置斜体
• font-family:xxx,xxx,xxx; 设置字体
• font: 20px xxx,xxx,xxx; 设置字体大小和字体
• text-shadow: 颜色 x偏移值 y偏移值 浓度（值越大越模糊）

元素的显示方式display

• block: 块级元素的默认值 , 特点: 独占一行,可以修改元素的宽高 , 包括: div,h1-h6,p
• inline:行内元素的默认值, 特点:共占一行, 不可以修改元素的宽高, 包括: span, b,i,s,u,超链接a
• inline-block:行内块元素的默认值, 特点:共占一行, 可以修改宽高, 包括:img,input
• none:隐藏元素
• 行内元素不能修改宽高, 如必须修改则需要先把display改成block或inline-block

盒子模型

• 作用: 控制元素的显示效果包括: 尺寸 元素位置 边框 元素内容的位置
• 盒子模型: 内容+外边距+边框+内边距
• 内容:content 负责控制元素的尺寸
• 外边距margin:负责控制元素的位置
• 边框border:负责控制元素的边框
• 内边距padding:负责控制元素内容的位置

盒子模型之内容Content

• width/height
• 赋值方式:
  • 像素: 200px
  • 上级元素的百分比: 50%
• 行内元素不能修改宽高

盒子模型之外边距

• 外边距: 元素距上级元素或相邻兄弟元素的距离称为外边距
• 赋值方式:
  • margin-left/right/top/bottom:10px; 单独某个方向赋值
  • margin:10px; 四个方向赋值
  • margin:10px 20px; 上下10 左右20
  • margin:10px 20px 30px 40px; 上右下左 顺时针赋值
• 上下相邻彼此添加外边距取最大值 ,左右相邻相加
• 行内元素上下外边距无效
• 粘连问题: 当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距会出现粘连问题,给上级元素添加overflow:hidden解决
• 部分标签会自带外边距,比如: body ,h1-h6,p,列表标签

盒子模型之边框

• 赋值方式:
  • border-left/right/top/bottom:粗细 样式 颜色; 单独某一个方向添加边框
  • border:粗细 样式颜色; 四个方向添加边框
  • border-radius: 20px ; 圆角, 值越大越圆, 超过宽高的一半为正圆

盒子模型之内边距

• 内边距: 元素边缘距内容的距离为内边距
• 赋值方式: 和外边距类似
  • padding-left/right/top/bottom:10px;
  • 单独某个方向赋值 padding:10px;
  • 四个方向赋值 padding:10px 20px; 上下10 左右20
  • padding:10px 20px 30px 40px; 上右下左 顺时针赋值
• 给元素添加内边距会影响元素的宽高

CSS的三大特性

• 继承性: 元素可以继承上级元素文本和字体相关的样式, 部分标签自带的效果不受继承影响,如:超链接的字体颜色
• 层叠性:多个选择器可能选择到同一个元素, 添加的样式不同的时候会全部层叠生效, 如果作用的样式相同则由优先级决定哪个生效
• 优先级: 作用范围越小优先级越高, id> class>标签名>继承(继承属于间接选中优先级比较低)

居中相关

• text-align:center; 让元素的文本内容居中, 让元素里面的行内元素自身和行内块元素自身居中
• margin:0 auto; 让块级元素自身居中

元素定位

• 静态定位
  • 默认的定位方式, 也称为文档流定位
  • 格式: position:static
  • 特点: 元素以左上为基准,块级元素从上往下依次排列,行内元素从左向右依次排列 ,无法实现层叠效果
  • 通过外边距控制元素的位置?
• 相对定位
  • 格式: position:relative
  • 特点: 可以实现层叠效果, 元素不脱离文档流(不管元素显示到什么位置 仍然占着原来的位置)
  • 通过left/right/top/bottom让元素相对于初始位置做偏移
  • 应用场景: 当需要移动某个元素而其它元素不受影响时使用(元素位置微调)
• 绝对定位
  • 格式: position:absolute
  • 特点: 可以实现层叠效果, 元素脱离文档流(不占原来的位置)
  • 通过left/right/top/bottom让元素相对于窗口或某一个上级元素做位置偏移,如果需要相对于某个上级元素,必须给上级元素设置为相对定位
  • 应用场景: 当需要网页面中添加一个元素, 这个元素不影响其他元素的显示位置时使用绝对定位
• 固定定位
  • 格式: position:fixed;
  • 特点: 元素固定在窗口的某个位置, 元素脱离文档流
  • 通过left/right/top/bottom让元素相对于窗口做位置偏移
  • 应用场景: 当需要将元素固定在窗口某个位置时使用
• 浮动定位
  • 格式: float:left/right
  • 特点: 元素脱离文档流, 从当前所在行向左或向右浮动,当撞到上级元素边缘或其他浮动元素时停止.
  • 浮动元素一行装不下会自动换行, 换行时有可能被卡住当元素的所有子元素全部浮动时,自动识别的高度为0,后面的元素会顶上来出现显示异常,给元素添加overflow:hidden解决
  • 应用场景: 当需要将纵向排列的元素改成横向排列时使用

显示层级z-index

• 当元素修改定位方式时,会出现元素层叠的问题, 通过z-index可以控制层叠的元素谁显示在上面 谁显示在下面
• 必须改了定位方式之后z-index样式才会生效
• z-index值越大显示层级越靠前

溢出设置Overflow

• visible(默认): 超出部分显示
• hidden: 超出部分隐藏
• scroll: 超出部分滚动显示

JavaScript

• 作用: 负责给页面添加动态效果.
• 语言特点:
  • 属于弱类型语言:
    • java: String name = “tom”; int age=18; name=30; 报错
    • javascript: let name=“tom”; let age=18; name=30;不会报错
• 属于脚本语言,不需要编译直接解析执行. 基于面向对象
• 安全性强:JS语言只能访问浏览器内部的数据,浏览器以外的程序或磁盘中的数据禁止访问.
• 交互性强: 因为JS语言是嵌入在html页面中的语言,随着页面一起传递到客户端,运行在客户端的语言,离用户更近一些,java语言是运行在服务器的语言, 所以JS语言交互性更强

添加JS语言

• 内联: 在标签的事件属性中添加js代码, 当事件触发时执行
  • 事件: 系统给提供的特定时间点.
  • 点击事件: 在用户点击元素时触发的时间点
• 内部:在html页面中任意位置添加script标签,在标签体内写JS代码
• 外部:在单独的js文件中写js代码, 在html 页面中通过script标签的src属性引入

变量

• JavaScript属于弱类型语言
  • java: String name = “tom”; int age=18; name=30; 报错
  • avascript: let name=“tom”; let age=18; name=30; 不会报错
• let和var关键字的区别
  • 使用let声明的变量, 作用域和Java语言一样
  • 使用var声明的变量, 相当于声明的是一个全局变量
  • 举例:
    JavaScript:
    for(let i=0;i<10;i++){
    let y=i+1;
    }
    let z = y-i; 不会报错,但是y和i 是访问不到的
    for(var i=0;i<10;i++){
    var y=i+1;
    }
    var z = y-i; y和i是可以访问的

数据类型

• JavaScript中只有引用类型(对象类型)
• 常见的对象类型:
  • number: 数值类型, 相当于java中所有数值类型的总和
  • string: 字符串 , 可以用单引号或双引号修饰 ‘tom’ “tom”
  • boolean: 布尔值 , true/false
  • undefined: 未定义 ,当变量只声明不赋值时,变量的类型为未定义
  • 获取变量类型的方式: typeof 变量

运算符

• 算术运算符: ±/% JS中除法会自动根据结果转换
• 关系运算符: > < >= <= == ===
  • ==: 先统一等号两边的类型,再比较值 “666”==666 true
  • ===: 先比较类型,类型相同之后再比较值 “666”==666 false
• 逻辑运算符: && ,|| , !
• 三目运算符: 条件?值1:值2

方法

• Java: public 返回值类型 方法名(参数列表){方法体}
• JS: function 方法名(参数列表){方法体}
• 常见的四种方法:
  • 无参无返回值
  • 无参有返回值
  • 有参无返回值
  • 有参有返回值
• 声明方法的三种方式:
  • function 方法名(参数列表){方法体}
  • let 方法名 = function(参数列表){方法体}
  • let 方法名 = new Function(“参数1”,“参数2”,“方法体”);

NaN

• Not a Number: 不是数
• isNaN(变量) 判断变量是否是NaN , true代表是NaN false代表不是NaN

BOM浏览器对象模型

• 包含和浏览器相关内容
• window对象: 该对象的属性和方法称为全局属性和全局方法, 访问时可以省略掉window.

window对象中常见的方法

• alert(“xxx”) 弹出提示框
• confirm(“xxxx”) 弹出确认框
• prompt(“xxx”) 弹出文本框
• parseInt() 将字符串或小数转成整数
• parseFloat() 将字符串转成整数或小数
• isNaN() 判断变量是否是NaN
• console.log() 浏览器控制台输出
• let timer = setInterval(方法,时间间隔) 定时器
• clearInterval(timer) 停止定时器
• setTimeout(方法,时间间隔) 只执行一次的定时器

Window对象中常见的属性

• location 位置
  • location.href 获取或修改浏览器的请求地址
  • location.reload() 刷新页面
  • location.search 获取浏览器地址栏中的参数
• history 历史(指当前浏览器页卡的历史, 关闭后则清除)
  • history.length 历史页面数量
  • history.back() 返回上一页面
  • history.forward() 前往下一页面
  • history.go(n) n是正值前进 负值后退 0代表刷新

DOM 文档对象模型

• 和页面相关内容
• 通过元素的id获取元素对象
  • let 元素对象 = document.getElementById(“元素id”);
• 通过CSS中接触到的选择器获取元素对象
  • let 元素对象 = document.querySelector(“选择器”);
• 获取和修改元素的文本内容 元素对象
  • .innerText; //获取 元素对象
  • .innerText=“xxx”; //修改
• 获取和修改表单中的控件的值
  • 控件.value //获取
  • 控件.value=“xxx” //修改
• 创建元素对象
  • let 元素对象 =document.createElement(“标签名”);
• 添加元素对象
  • document.body.appendChild(元素对象);
• 给元素的属性赋值
  • 元素对象.src = “…/b.jpg”;
  • 元素对象.属性=“值”;

前端MVC设计模式

• MVC设计模式:实际上就是把前端实现一个业务功能的代码划分为3部分
• Model : 模型 , 指数据模型对应的是从服务器获取到数据的部分代码.
• View: 视图 , 指页面部分代码
• Controller: 控制器, 把数据模型的内容展示到页面中的过程称为控制器部分
• 前端MVC设计模式的弊端: 需要在Controller部分频繁进行DOM操作(遍历查找元素过程)会影响效率, 从而影响用户的体验度

M,V,VM设计模式

• Model : 模型 , 指数据模型 对应的是获取到数据的部分代码.
• View: 视图 , 指页面部分代码
• VM: 视图模型,
• 将页面中可能发生改变的元素在内存中和某一个变量进行绑定, 当变量的值发生改变时,会自动从内存中找到和变量对应的元素并进行修改,不需要像MVC设计模式中每次进行遍历查找, 从而提高了效率,提高了用户体验度.

VUE框架

• VUE框架是基于MVVM设计模式的前端框架.
• 工作原理: Vue框架中的Vue对象是MVVM设计模式中的VM视图模型,
  此对象负责将页面中改变的元素和data里面的变量进行绑定, 初始化时,变量的值是什么页面就显示成什么,
  并且Vue对象会一直监听着data里面变量值得改变,
  当值发生改变时,会自动找到与其绑定的元素并且让元素跟着发生改变,改变元素的过程是不需要程序员参与的, 从而提高了开发效率,
  由于这个过程不需要频繁的进行DOM操作(遍历查找元素) 从而提高了执行效率.

引入前端 三方框架的两种方式:

• 把框架文件下载到本地,复制到自己的工程中进行引入
• 从CDN服务器直接引入到自己工程.

Vue常用指令

• {{变量}} : 插值, 让此处的文本内容和变量进行绑定 ,不需要依赖某个标签存在
• v-text=“变量”:让元素的文本内容和变量进行绑定, 需要依赖标签
• v-html=“变量”: 让元素的标签内容和变量进行绑定
• v-bind:属性名=“变量”, 让元素的某个属性的值和变量进行绑定 , 简写可以把v-bind去掉
• v-model=“变量”:让控件的value属性和某个变量进行双向绑定, 双向绑定: 变量会影响页面显示的内容,页面元素的内容改变也会影响变量,当需要从代码中获取控件的值时使用双向绑定
• v-on:事件名=“方法”, 绑定元素的事件,方法需要声明在Vue对象里面的methods属性里面, 简写是@事件名=“方法”
  • @click 点击事件
  • @change 值改变事件
  • @blur 失去焦点事件
• v-for="(变量,i) in 数组变量"; 让元素的显示数量和数组进行绑定, 同时遍历数组中的每一个对象,变量代表的是数组中的每一个对象, i代表的是当前遍历的下标
• v-if=“变量”, 元素的显示状态和变量进行绑定, true显示,false不显示(删除元素)
• v-else和v-if指令结合使用, 显示状态和v-if的元素取反
• v-show=“变量”,元素的显示状态和变量进行绑定,true显示,false不显示(通过样式隐藏了元素), 需要元素需要频繁切换显示状态使用v-show的执行效率会高于v-if