前端学习篇 -- 基础学习

1、基础

1.1 用户片段

// html.json
{
    
    
  "Print to console": {
    
    
    "prefix": "mh",
    "body": [
      "<!DOCTYPE html>",
      "<html lang=\"zh-CN\">",
      "<head>",
      "\t<meta charset=\"UTF-8\">",
      "\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no\">",
      "\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
      "\t<meta http-equiv=\"apple-mobile-web-app-capable\" content=\"no\">",
      "\t<meta http-equiv=\"format-detection\" content=\"telephone=no\">",
      "\t<title>Document</title>",
      "</head>",
      "<body>",
      "\t$0",
      "</body>",
      "</html>"
    ],
    "description": "The full sample code - html5."
  },
  "html:5": {
    
    
    "prefix": "h5",
    "body": [
      "<!DOCTYPE html>",
      "<html lang=\"zh-CN\">",
      "<head>",
      "\t<meta charset=\"UTF-8\">",
      "\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
      "\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
      "\t<title>Document</title>",
      "</head>",
      "<body>",
      "\t$0",
      "</body>",
      "</html>"
    ],
    "description": "HTML5"
  },
  "script tag": {
    
    
    "prefix": "scr",
    "body": [
      "<script>",
      "\t$0",
      "</script>"
    ],
    "description": "script tag"
  },
  "style tag": {
    
    
    "prefix": "sty",
    "body": [
      "<style>",
      "\t$0",
      "</style>"
    ],
    "description": "style tag"
  }
}

// javascript.json
{
    
    
  "zhushi": {
    
    
    "prefix": "/*",
    "body": [
      "/**",
      " * \t$0",
      " */"
    ],
    "description": "注释"
  }
}

// vue.json
{
    
    
  "vue": {
    
    
    "prefix": "vue",
    "body": [
      "<template>",
        "\t$0",
      "</template>\n",
      "<script>",
      "export default {",
      // "  data() {",
      // "    return {\n",
      // "    }",
      // "  },",
      "  name: '$TM_FILENAME_BASE',",
      "}",
      "</script>\n",
      "<style scoped>\n",
      "</style>"
    ],
    "description": "创建一个自定义的vue组件代码块"
  }
}

1.2 通用属性

1.2.1 meta 标签与 icon

<head>
  <meta charset="UTF-8"> 	字体集gb2312 ，gbk，UTF-8
  <meta name="Generator" content="EditPlus?"> 制作工具是
  <meta name="Author" content=""> 作者是
  <meta name="Keywords" content=""> 关键字，便于搜索
  <meta name="Description" content=""> 网站描述文字
  <title>Document</title>
</head>
<link rel="shortcut icon" href="favicon.ico" />

1.2.2 文本元素

1.<b>加粗文字</b><br>
2.<strong>加粗文字</strong><br>

3.<i>文字倾斜</i>
4.<em>文字倾斜</em>

5.<del>删除文字</del>
6.<s>删除文字</s>

7.<u>文字加下划线</u>
8.<ins>文字加下划线</ins>

9.<sub>下标</sub>
10.<sup>上标</sup>

11.<q>加""</q>
12.英雄ying xiong<ruby>英雄<rt>ying xiong</rt></ruby>
13.<bdo dir="rtl/*从右到左*/">向方子文</bdo>
14.<mark>黄色背景

1.2.3 HTML实体集

不断行的空白           &nbsp;  &#160; 
半个空白（1个字符宽度）  &ensp;  &#8194;	
一个空白（2个字符宽度）  &emsp;  &#8195;		
<     &lt;    &#60;
>     &gt;    &#62;
>     &       &amp;   &#38;4、绝对路径和相对路径

1.2.4 iframe内联框架

主要属性：src;name/id;width;height

<a href="http://www.taobao.com" target="myframe">淘宝</a><br />

<iframe src="http://www.baidu.com" frameborder="1" width="50%" height="50%" name="myframe"></iframe>

1.3 服务器配置

1.3.1 一般步骤

购买服务器
- 独立服务器
- vps主机
- 虚拟主机
上传FTP
- IP地址
- FTP账号
- 密码
网页上传
申请域名
域名解析

1.3.2 免费服务器

http://free.3v.do

注册账号
记录主机名、用户名、密码、域名
利用cutftp上传
在浏览器输入域名，就能访问

1.3.3 github 发布

仓库名改为 .github.io 后缀
github pages 选第一个，后面的链接就是网址

2、移动web

2.1 新增的h5标签

1.article标签：定义一个独立内容区块：一篇文章、一个视频文件
2.section标签：定义一个区域，如文章的章节等
3.nav标签：定义目录导航
4.aside标签：定义侧边栏
5.figure/figcaption标签：定义一组媒体内容以及它们的标题
6.header/footer标签：定义一个头部/底部
7.hgroup标签：标题分组
8.address标签：地址、联系信息等

2.2 屏幕视口认识

在PC端中，视口就是我们浏览器的大小。

在移动设备上，视口不再受浏览器窗口大小影响。
允许开发者自定义视口大小，通常设备都会有一个默认的视口大小

2.2.1 像素密度（PPI）

所谓像素密度，就是每英寸能够容纳多少个像素。
像素密度越大，那么画面越精细(例如我的82年的iphone)
像素密度越小，那么画面越渣(来，拿出你们的诺基亚)

2.2.2 设备独立像素

设备独立像素，本质上是一个不同设备的像素比例关系，但是注意，不同的设备比例是不一样。而且不由开发者决定，这是屏幕硬件在一开始就设定好的。

可以通过js方法：window.devicePixelRatio 获取

常见苹果设备独立像素比例

设备名	屏幕分辨率	CSS像素	比例关系
iphone 3G	320 * 480	320 * 480	1:1
Iphone 4	640 * 960	320 * 480	2:1
Iphone6/7/8	750*1334	667 * 375	2:1
Iphone plus	1080*1920	414*736	3:1

如果像素比例是1的设备，那就是低清屏幕。
如果像素比例是2的设备，那就是高清屏幕。(第一个视网膜屏幕R屏)
如果像素比例是3的设备，那就是更加高清的，甚至成为超清屏幕。
pc端默认的比例是1:1,但是可以通过滚轮缩放来调整这个比例。

2.2.3 2倍图概念

因为不同设备的像素比例不一样，所以同一张图片在不同设备中显示会有失真效果，变模糊。

为了保证在不同设备中都要清晰的显示，那么就有了多倍图的概念。

例如当一张50 * 50的图片在比例为1的设备上显示的时候，可以正常清晰显示。
但如果这个时候把图片放到比例为2的设备上时，相当于把图片进行了放大，那这个时候就会失真。
所以，一般项目开发中会准备不同规格的图片，也就是1x图，2x图，3x图。
通过js代码判断是什么比例的屏幕，就对应使用什么倍数的图片。

2.3 媒体查询

多媒体查询语法

@media not|only mediatype and (expressions) {     
   CSS 代码...; 
}

not: 用来排除掉某些特定的设备的，比如 @media not print（非打印设备）
only: 用来定某种特别的媒体类型

mediatype >>
all 用于所有多媒体类型设备
print 用于打印机
screen 用于电脑屏幕，平板，智能手机等

expressions >>
最小最大宽度

外联式语法

当浏览区域宽度大于800px的时候，使用link中的css文件

<link rel="stylesheet" href="css/index.css" media="screen and (min-width: 800px)">

内嵌式语法

@media screen and (min-width: 500px) {
    /* 当页面宽度大于500px时,设置背景颜色为红色 */
    body {
        background-color: red;
    }
}

判断最小屏幕，从小到大写，后面会覆盖前面的

判断最大屏幕，从大到小写，后面会覆盖前面的

2.4 防抖和节流

2.4.1 防抖

顾名思义，防止抖动，以免把一次事件误认为多次，敲键盘就是一个每天都会接触到的防抖操作

登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖
调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖
文本编辑器实时保存，当无任何更改操作一秒后进行保存

// 非立即执行,当用户停止输入一段时间（比如500ms）后才执行发送请求

function debounce (func, time) {
    
    
  let timer = null
  return function (...args) {
    
    
    timer && clearTimeout(timer)
    timer = setTimeout(() => {
    
    
      func.apply(this, args)
    }, time)
  }
}

input.onkeypress = debounce(function () {
    
    
  console.log(input.value) // 事件处理逻辑
}, 500)

// 立即执行
function debounce (func, time) {
    
    
  let timer = null
  let flag = true
  return function (...args) {
    
    
    timer && clearTimeout(timer)
    if (flag) {
    
    
      func.apply(this, args)
      flag = false
    }
    timer = setTimeout(() => {
    
    
      flag = true
    }, time)
  }
}

// 合并版
function debounce (func, time = 500, isImmediate = false) {
    
    
  let timer = null
  let flag = true
  // isImmediate = true 立即执行
  if (isImmediate) {
    
    
    return function (...args) {
    
    
      timer && clearTimeout(timer)
      if (flag) {
    
    
        func.apply(this, args)
        flag = false
      }
      timer = setTimeout(() => {
    
    
        flag = true
      }, time)
    }
  }
  // isImmediate = false 非立即执行
  return function (...args) {
    
    
    timer && clearTimeout(timer)
    timer = setTimeout(() => {
    
    
      func.apply(this, args)
    }, time)
  }
  
}

2.4.2 节流

顾名思义，控制水的流量。控制事件发生的频率，如控制为1s发生一次，甚至1分钟发生一次

scroll 事件，每隔一秒计算一次位置信息等
浏览器播放事件，每个一秒计算一次进度信息等
input 框实时搜索并发送请求展示下拉列表，没隔一秒发送一次请求 (也可做防抖)

function throttle (f, wait) {
    
    
  let timer = null
  return (...args) => {
    
    
    if (timer) return
    timer = setTimeout(() => {
    
    
      f.apply(this, args)
      timer = null
    }, wait)
  }
}

2.4.3 总结

防抖：防止抖动，单位时间内事件触发会被重置，避免事件被误伤触发多次。代码实现重在清零 clearTimeout

节流：控制流量，单位时间内事件只能触发一次，如果服务器端的限流即 Rate Limit。代码实现重在开锁关锁 timer=timeout; timer=null

2.5 触屏事件

2.5.1 事件类型

touchstart: 开始触摸屏幕

touchmove: 手指移动

touchend: 手指离开

webkitTransitionEnd: 过渡效果完成后触发

touchcancel: 触摸意外中断（如突然打来电话）

2.5.2 事件对象

touches：位于屏幕上的所有手指
targetTouches：位于元素上的所有手指（常用）
changedTouches：touchstart 刚接触的触点，touchend 离开的触点

e.targetTouches[0] //记录第一个手指

2.5.3 手指对象的坐标获取

screenX / screenY: 触点距离屏幕左上角的位置
clientX / clientY: 触点相对当前视口的位置（常用）
pageX / pageY: 相对当前页面内容（包含滚动条）

e.targetTouches[0].v //记录第一个手指的位置

2.6 预处理语言

Sass、Less 、Stylus

2.6.1 Less

使用

装插件 Easy Less ，保存自动编译

npm 安装

> npm install less
> lessc styles.less styles.css  //编译

语法

变量，只能定义一次，不能重复使用

@color: #999;
@bgColor: skyblue;//不要添加引号

选择器变量

@Wrap: wrap;
//变量名 必须使用大括号包裹
#@{Wrap}{  
    color:#666;
}
/* 生成的 CSS */
#wrap{
    color:#666;
}

属性变量

@borderStyle: border-style;
@Soild:solid;
#wrap{
//变量名 必须使用大括号包裹
    @{borderStyle}: @Soild;
}
/* 生成的 CSS */
#wrap{
    border-style:solid;
}

嵌套

&，代表的上一层选择器的名字

媒体查询

#main {
    //something...
    @media screen {
        @media (max-width:768px){
            width:100px;
        }
    }
    @media tv {
        width:2000px;
    }
}
/* 生成的 CSS */
@media screen and (maxwidth:768px) {
    #main {
        width:100px; 
    }  
}
@media tv {
    #main{
        width:2000px;
    }
}

属性拼接方法

+_ 代表的是空格；+ 代表的是逗号

   .boxShadow() {
       box-shadow+: inset 0 0 10px #555;
   }
   .main {
       .boxShadow();
       box-shadow+: 0 0 20px black;
   }
   /* 生成后的 CSS */
   .main {
       box-shadow: inset 0 0 10px #555, 0 0 20px black;
   }

继承

   .animation {
       transition: all .3s ease-out;
       .hide{
           transform:scale(0);
       }
   }
   #main {
       &:extend(.animation);
   }
   #con {
       &:extend(.animation .hide);
   }
   /* 生成后的 CSS */
   .animation,
   #main {
       transition: all .3s ease-out;
   }
   .animation .hide , #con {
       transform: scale(0);
   }

继承全部

   #main {
       width: 200px;    
       &:after {
         content:"Less is good!";
       }
   }
   
   #wrap:extend(#main all) {}
   
   /* 生成的 CSS */
   #main,
   #wrap {
       width: 200px;
   }
   #main:after, 
   #wrap:after {
       content: "Less is good!";
   }

导入

   @import "main";
   //等价于
   @import "main.less";

2.6.2 Sass

Sass 和 Scss 其实是同一种东西，我们平时都称之为 Sass，写法上存在些不同
- sass 不使用花括号和分号，所以不被广为接受
```
// sass
#sidebar 
  width: 30%
  background-color: #fff
```
- scss 其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件
```
// scss
#sidebar {
  width: 30%
  background-color: #fff
}
```
使用
- 装插件 Easy Sass ，保存自动编译
- npm 安装
```
npm install -g sass //全局安装
```

语法

变量，只能定义一次，不能重复使用
```
$color: #fff;
```

嵌套

nav {
  a {
    color: red;
    &:hover {
      color:green;
    }
  }  
}

混合宏

//声明
@mixin border-radius{
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
//调用
button {
    @include border-radius;
}

继承

.btn {
    border: 1px solid #ccc;
    padding: 6px 10px;
    font-size: 14px;
}

.btn-primary {
    background-color: #f36;
    color: #fff;
    @extend .btn;
}

导入

@import "variables"
//等同于
@import "variables.scss";

3、表单

3.1 form 标签

用来定义表单类似于定义表格的table

3.1.1 form属性

action：指定表单的发送地址（服务器地址）
method：表单数据发送至服务器的方法，常用的有两种：get/post

3.1.2 get和post的区别

get方法提交，数据会附在网址之后主动提交给服务器
post方法提交，数据不会附在网址后

3.2 input 元素

用来设置表单的内容，比如文本框，按钮等
不仅可以布置在表单中，也可以在表单之外使用

3.2.1 input属性

type属性：指定输入内容的类型，默认为text：单行文本框
name属性：输入内容的识别名称
value属性：默认值
size属性：设置文本框宽度
maxlength属性：输入的最大字数
readonly属性：只读属性，设置内容不可变更，提交时会发送至服务器
formaction：重写表单的action属性
disabled属性:设置为不可用（不可操作）
required属性：设置该内容为必填项，否则无法提交
placeholder属性：设置默认值，当文本框获得焦点是被清空
autofocus属性：自动获得焦点
accesskey属性：指定快捷键，按Alt+“快捷键”，便获得焦点
tabindex属性：指定按Tab键，项目间的移动顺序
autocomplete属性：是否开启浏览器记忆功能
    on/off

3.2.2 type属性

text：  默认
submit：提交按钮，点击将数据发送至服务器 //只有submit可以提交，而且只提交带有name属性的表单          
reset： 重置按钮
button：普通按钮，默认type属性为submit
image： 图片式提交按钮
    格式：<input type="img" src="1.jpg" />
    
hidden：隐藏字段，该内容不会显示在页面上
    一般为网页设计者设置的变量数据，提交时，隐藏内容会提交到服务器

email：表示要输入一个电子邮箱
url：  表示要输入一个网址
tel：  表示要输入一个电话号码

number：允许输入的最大值/最小值/步长/默认值
    min/max/step/value
    
range：活动条，与number类似

时间类：datetime/time/date/week/month/datetime-local

color:可以建立一个有颜色的文本框
seacrch：建立一个搜索框

file：建立一个文件选取的输入框
    accept： 规定选取类型
    multipe：设定一次允许选择多个文件

cheakbox：建立一个复选框（可以多项选择）
    checked： 默认选择
    name：    属性一定要相同
    
radio：建立一个单选框
    checked：默认选择
    name属性一定要相同

3.3 select 标签

建立一个下拉菜单选项列表
其具体列表项要通过option建立

option属性

selected 默认选定

optgroup：对option元素进行分组
size：定义列表显示的列表项
multiple：定义是否可以多选
可以添加disabled和autofocus属性

3.4 lable 标签

用来为input元素定义标注，建立一个与之关联的标签

//for 属性关联
<label for="A">平面设计</label>
<input type="checkbox" id="A"/> 

//直接包裹
<label><input type="checkbox" />平面设计</label>

optgroup的分组名称

<select>
    <optgroup label="网页设计系列">
        <option value="HTML5">HTML5</option>
        <option value="CAD">CAD</option>
        <option value="ASP.NET">ASP.NET</option>
    </optgroup>
    <optgroup label="编程开发系列">
        <option value="Java">Java</option>
        <option value="JavaScript">JavaScript</option>
    </optgroup>
</select>

3.5 新增的表单属性

3.5.1 form属性

定义所属的一个或多个表单

<form action="demo-form.php" id="form1">
    First name: <input type="text" name="fname"><br>
    <input type="submit" value="提交">
</form>

Last name: <input type="text" name="lname" form="form1">  //所属 form1 表单

3.5.2 formmethod属性

定义表单提交的方式，定义在 type=“submit” 身上

<input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交">

3.5.3 formtarget属性

指定一个名称或一个关键字来指明表单提交数据接收后的展示，定义在 type=“submit” 身上

<form action="demo-form.php">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="submit" value="正常提交">
    <input type="submit" formtarget="_blank"
    value="提交到一个新的页面上"> //跟超链接 target 相似，formtarget 默认是_self
</form>

3.5.4 textarea元素

建立多行输入文本框

name/disabled/readonly/...
rows：设置多行文本的行数
cols：设置多行文本的每行显示的字数（宽度）
css属性 resize: none; //防止拖拽文本域

3.5.5 button元素

建立一个按钮，是一个双标签，其内部可以配置图片和文字
type属性：可以设置三个值 submit/reset/button与input元素含义相同，默认是submit

3.5.6 output元素

设置不同的数据输出

<form oninput="num.value=parseInt(num1.value)+parseInt(num2.value)">
    <input type="number" id="num1" />+
    <input type="number" id="num2" />=
    <output name="num" for="num1 num2"></output>
</form>

3.5.7 progress元素

建立一个进度条

max：进度的最大值
value：默认显示值
form：定义所属的一个或多个表单
<progress max="100" value="10"></progress>

3.5.8 meter元素

建立一个度量条，用来表示度量衡的评定

value：默认显示值
max：规定最大值，默认值为1
min：规定最小值，默认值为0
low：规定被视作低的标准
high：规定被视作高的标准
form：定义所属的一个或多个表单
<meter max="100" min="10" low="20" value="20"></meter>

3.5.9 fieldset元素

可将表单内的相关元素分组，通常会有一个边框

<fieldset>
    <legend><h3>用户注册：</h3></legend>
    用户名：<input type="text" />
    密码：<input type="password" />
    <input type="submit" />
</fieldset>

3.5.10 details元素

<details>
    <summary>用户点击</summary><br />
    <meter max="10000" value="8000" low="100" high="1000"></meter><br /><br />
    <meter max="10000" value="5000" low="100" high="1000"></meter><br /><br />
</details>

4、audio 与 video

4.1 audio

<audio controls="controls">
    <source src="video.mp3" type="audio/mp3" />
    <source src="video.webm" type="audio/wav" />
    <source src="video.ogg" type="audio/ogg" />
</audio>

4.2 video

<video controls="controls">
    <source src="video.mp4" type="video/mp4" />
    <source src="video.webm" type="video/webm" />
    <source src="video.ogg" type="video/ogg" />
</video>

4.3 source元素

src：要播放的视频的url地址
controls：controls 向用户显示控件，比如播放按钮
width:
height:
poster:url:视频播放前预览图片
muted:muted 视频自动静音播放
autoplay:autoplay 自动播放 //谷歌禁止，放弃使用
loop：循环播放

this.$refs.audio.volume = 0.2 //音量大小

play：正在播放事件

pause：停止播放事件

5、canvas

设置起点：moveTo（x坐标，y坐标）
设置终点：lineTo（x坐标，y坐标）
开始绘制：stroke()

指定线宽：lineWidth=数值
指定颜色：strokeStyle=“颜色值”

beginPath():用来创建新的路径
closePath():从当前点回到起始点的来封闭路径
fill():绘制一个实心的图形
指定颜色：fillStyle=“颜色值”

绘制矩形

1.rect(x,y,w,h)
2.strokeRect(x,y,w,h)无填充
3.fillRect(x,y,w,h)绘制“被填充”的图形
4.stroke()绘制已定义的路径

绘制圆弧

arc(x,y,r,开始角度,结束角度,true/false)

绘制文字

1.strokeText(“文字”,x,y,maxWith) 绘制空心文字
2.fillText(“文字”,x,y,maxWith) 绘制实心文字
3.字体样式：font=""

绘制渐变色

1.createLinearGradient()创建线性渐变

createLinearGradient(x1,y1,x2,y2)–颜色渐变的起点坐标和终点坐标

addColorStop(位置,“颜色值”)–0表示起点…插入点…1表示终点

2.createRadialGradient(x1,y1,r1,x2,y2,r2) 创建放射状/环形的渐变

绘制阴影

1.shadowOffsetX 设置阴影的水平偏移距离
2.shadowOffsetY 设置阴影的垂直偏移距离
3.shadowBlur 设置阴影的模糊系数
4.shadowColor 设置阴影的颜色

6、跨域解决小办法

1.在电脑上新建一个目录，例如：C:\MyChromeDevUserData

2:创建一个谷歌浏览器的快捷方式

3.在快捷方式上点击右键==》属性==》目标输入框里最后加上 --disable-web-security --user-data-dir=C:\MyChromeDevUserData，–user-data-dir的值就是刚才新建的目录。

3.点击应用和确定后关闭属性页面，并打开chrome浏览器。

再次打开chrome，发现有“–disable-web-security”相关的提示，说明chrome又能正常跨域工作了