jackwong992 / article Goto Github PK

View Code? Open in Web Editor NEW

2.0 2.0 0.0 177 KB

慢慢来，其实会很快

Home Page: http://www.feelone.top/article/

HTML 100.00%

article's People

Contributors

Stargazers

Watchers

article's Issues

They way to the font-end: 垂直居中的几种表现形式

垂直居中在我们网页开发中见到的很多，今天我们就来简单的介绍几种垂直居中的方式：
我们都知道居中其实很好控制，例如：text-align: center可以实现居中。但是对于垂直来说，所以需要分别来针对不同模型进行做出改变。

padding上下相等实现垂直居中
代码实现：http://js.jirengu.com/tiwakizowi/2/edit
这种居中实现，text-align控制了行内元素的水平居中，padding:40px 0; 实现了垂直方向的居中，上下的内边距是一样的。
优点：内容自适应的，无论你往里面怎么样动态的添加内容，其格式还是垂直居中的。
缺点：如果想实现某种弹窗效果，在屏幕的**这种方法就很那实现了。
这时候我们需要引入第二种，绝对定位实现垂直居中。
position绝对定位实现垂直居中
代码实现：http://js.jirengu.com/yeverubeqa/2/edit
通过代码的展示，我们可以得到可以通过position: absolute;绝对定位的方式让其展示在屏幕的垂直居中。
但是这里的top:50%;或者具体的某个元素的值的大小是父容器元素的百分之50，所以要添加margin-top: -1/2 hegiht; margin-left: -1/2 widht;
当然也可以通过transform: translate(-50%,-50%);代替margin-top,margin-left但是使用之前要考虑好兼容性的问题。
好处：适合实现复杂的内容弹窗。
vertical-align实现垂直居中
代码实现：http://js.jirengu.com/pafixasuco/5/edit

.middle{
  text-align: center;
}
.middle::before{
  content: ' ';
  display: inline-block;
  height: 100%;
  vertical-middle: middle;
}

这里我们可以看到：
第一，使用text-align: center;实现水平居中。
第二，加入伪元素，设置元素的高度为100%。
第三，我们都知道vertical-align都是针对于行内元素或者表格元素，这里需要改变display的实现。
第四：vertical-middle:middle 实现水平居中。
4. table-cell实现垂直居中
table-cell的垂直居中与vertical-align相类似，
代码实现：http://js.jirengu.com/waxesamexi/1/edit
具体实现如下：

 .box {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  display: table-cell;
  vertical-align: center;
  text-align: center;
}

但是这里需要注意的是使用了display: table-cell;就改变了box的展现方式，对于以后的重构可能会埋下bug。
关于更多的垂直居中的方式，未完待续...

The way to the font end : css3入门

Now：我开始学习css3了。

transition:动画的过渡

html:
 <div class="box"></div>
css: 
 .box{
        width: 200px;
        height: 200px;
        background: red;
        transition: 1s;
    }
    .box:hover{
        width:400px;
        height: 400px;
        background: green;
    }

tag-attribute-select：标签属性选择

E[attr] 只使用属性名，但是没有任何属性值
E[attr ="value"] 指定属性名，并且指定了该属性的属性值
E[attr~="value"]指定一个属性名，并且具有属性值；此属性值有一个词列表，列表之前以空格隔开，词列表包含了一个value的词，等号前面的~不能不写！
E[attr^="value"]指定属性名，并且有属性值，属性值是以value为开头的
E[attr$="value"]指定属性名，并且有属性值，属性值是以value为结束的
E[attr*="value"]指定属性名，并且有属性值，属性值中含有value值的
E[attr|="value"]指定属性名，并且有属性值，属性值是以value为开头或者以value-为开头的

css：
    p[class]{background: green;}
    p[class="jack"]{background:pink;}
    p[class~="first"]{background: black;}
    p[class^="g"]{background: blue;}
    p[class$="m"]{background: yellow;}
    p[class*="q"]{font-size: 30px;}
    p[class|="a"]{color: red;}
html：
         <p class="jack">你好，你真的好吗？</p>
         <p class="alex">你好，你真的好吗？</p>
         <p class="pony first">你好，你真的好吗？</p> 
         <p class="grose">你好，你真的好吗？</p>        
         <p class="gtony">你好，你真的好吗？</p>        
         <p class="tom">你好，你真的好吗？</p> 
         <p class="tom">你好，你真的好吗？</p>
         <p class="a-q">这是一个测试</p>
         <p class="a-q">这是一个测试</p>                       
         <p class="a">这是一个测试</p>

Structure selector：结构选择器
xx:first-child{} //xx下面的第一个元素
xx:last-child{} //xx下面的最后一个元素
xx:nth-child(n) //xx下面的第n个元素
xx:nth-child(2n) //xx下面的第2n个元素
xx:first-of-type{} //xx下面第一个子节点且节点类型为E

css:
    p:first-child{background: pink;}
    p:last-child{background: red;}
    p:nth-child(2){background: green;}
    p:nth-child(2n){background: blue;}
html:
        <p>你好，这是一个测试的例子</p>
        <p>你好，这是一个测试的例子</p>
        <p>你好，这是一个测试的例子</p>
        <p>你好，这是一个测试的例子</p>
        <p>你好，这是一个测试的例子</p>

文本新增属性：
rgba(0,0,0,0.x)：通过最后一个a的属性取值（0-1）来判断颜色的透明度。
与opticty区别不同的是，rgba只改变背景颜色的透明度，而opticty也改变字体颜色透明度
地址：opticty与rgba的区别

文字阴影：text-shadow:x,y,shadow_degree,color 属性：水平方向的偏移距离，水平方向的偏移距离，偏移的程度(px)，阴影的颜色(color);当然也是可以实现多层阴影的，只需要在后面一直持续写下去就可以了。查看效果：[字体阴影](http://js.jirengu.com/qirihapuki/2/edit?html,output)

文字描边：-webkit-text-stroke：px color；属性：相当于文字的身上有了一个边框的效果。查看效果：[文字描边](http://js.jirengu.com/wuveqozibi/1/edit?html,css,output) 注意：文字描边属性只在webkit的浏览器上支持

文字的排列方式：direction 从右向左：rtl，从左到右：ltr 注意这里的排列方式相当于浮动中向左或者向右浮动，如果想倒序排列要配合unicode-bidi: bidi-override一起使用查看效果：[文字排列方式](http://js.jirengu.com/wesakopucu/2/edit)

超出文本的省略方式：text-overflow: clip/ellipsis 无省略号/ 有省略号这里需要注意的是，如果要使用text-overflow必须配合white-space: nowrap , overflow:hidden 才能正常显示查看演示效果：(文本超出省略方式)[http://js.jirengu.com/sunutewuxu/1/edit]

The way to the font end：JS基础

JS基础以及一些小的案例实现

for循环二维数组：

---
for (var i=0; i<arr.length;i++){
    for(var j=0; j<arr[i].length;j++){
       console.log(arr[i][j])
 }
}

JS中所有用到class的地方都必须换成className

this

指的是调用当前方法（函数）的那个对象。

自定义属性

HTML：
<input type="btton" value="按钮">
JS：
var oBtn = document.getElementsByTagName('input');
oBtn[0].abc="123";
console.log(oBtn[0].abc); // 123

JS可以为任何HTML元素添加任意自定义属性。
在JS中背景，color，相对路径都不能作为判断条件。
获取自身递增数字及匹配数组内容：
地址：http://js.jirengu.com/vudenelaxu/2/edit

数据类型：
number,string,boolean,object,null,undefined,symbol
检测数据类型的方法：typeof a
typeof的返回值：number,string,boolean,undefined,object,function(一种变量只存放一种数据类型)
5个false值：NaN，'',undefined,0,null
变量类型的转换
字符串转换为数字：parseInt(),parseFloat()
如果没有数字则返回NaN；如果开头为字符串，也是返回NaN
检测NaN的方法：isNaN()
NaN!==NaN NaN+number=NaN
隐式类型转换
==先把两边东西转为一样的类型，然后在比较
=== 不转换，直接比较
-直接就是数字减法转换
’+‘： 1. 字符串相加 2. 数字相加
’-，，/‘只有数学含义
注释：
单行注释： //
多行注释： / */

变量作用域：
局部变量：定义在一个函数里，只能在这个函数里使用
全局变量：不定义在函数里面，在任何地方可以使用
闭包：子函数可以使用父函数的局部变量

function aaa(){
	var a=1;
	function bbb(){
		alert(a);
	}
}

JS中的运算符
+-*/%：加，减，乘，除，取模
取模的实例：隔行换色，秒转时间
赋值：=，+=，-=
逻辑： &&与 ||或！非
运算符优先级：括号

程序流程控制：
判断：if switch
循环：while for do...while
跳出：break，continue
真/假: true,非零数字,非空字符串,非空对象
NaN，'',undefined,0,{}
switch(变量/值){
case 值1：... break;
case 值2：... break;
case 值3：... break;
default: ...
}

变量提升

JavaScript引擎工作方式是：先解析代码，然后获取所有声明的变量，在一行行的运行。
这样造成的结果是：所有的变量的声明语句，都是被提升到代码的头部，这就叫做变量提升。
例如：var a=3;
var b="ok";
在js引擎中是这样操作的：
先找到一个a变量，初始化的值为undefined，然后在找到一个b的变量初始化值为undefined
接着第二步，赋值。给a变量赋值为3，b变量赋值为字符串ok

函数传参（函数传递参数）

fn(100)
function fn(a){ alert(b)  }    //a=100

fn(100,'px')
function fn(a ,b){alert( a+b) }     // 100px

函数传递参数：参数=JS的数据类型：number，string，boolean，undfined，null，symbol，object
当然你也可以这样做：

fn( function(){ alert(1) } )
function fn(abc){
  abc();          //1
 }

例子：

function fn2(lol){
  lol(100)
 }
fn2( function(a){ alert( a ) } )

1.传参，lol指的是function(a){alert( a )}
2. 代入，执行lol这个函数代入为100，执行得到结果为100
注意：执行有名字的函数的时候不需要带括号
例如：

function fn4(){ alert(4) }
function fn3( fn ){
  fn();
}
fn3( fn4 )   //4

当然，参数的传递也可以是对象：
例如，我们平时在控制台输出可以使用console.log(1)

 function fn(w,d){
            w.onload=function(){
                d.body.innerHTML=123;
            }
        }
        fn(window,document);

函数传参重用代码：
1、尽量保证HTML代码结构一致，可以通过父极选取子元素
2、把核心的主程序实现，用函数封装起来
3、把每组里不同的值找出来，通过传参实现

JS作用域

什么是作用域？
域：空间，范围，区域...
作用：读、写

CSS学习篇：bootstrap

Bootrap的使用方法就是复制粘贴

bootstrap引入

官网下载、CDN引入
首先引入核心文件，本地核心css文件：.min.css 本地核心JS文件： .min.js
bootstrap的js文件都是基于在jQuery的基础之上的，所以要想让bootstrap成功跑起来要引入jQuery

栅格系统

col-mid-1栅格系统只占有1个，每一行是占有12个。
每一行的占有或者分布可以根据自己的需求：col-mid-x , 如果想发生偏移，可以引入：mid-offset-x
要注意的是栅格系统要每一行使用之前要加入row属性，不然会小15px

浏览器渲染机制/解决白屏和FOUC/async and defer分别是？

浏览器渲染机制：

解析HTML 标签，构建DOM树
解析CSS标签，构建CSSOM树
把DOM和CSSOM组合成渲染树
在渲染树的基础上进行布局，计算每个节点的几何结构
把每个节点绘制到屏幕上（painting）

白屏问题

如果样式放在标签的底部，对于IE浏览器而言，在某些场景之下（新窗口打开，刷新等）页面会出现白屏，而不是内容的逐步出现。
如果使用@import标签，即使CSS放入link，并且放在头部，也可能出现白屏。
通过前面的渲染机制的图片我们可以得到：
CSS建立CSSOM树以后，与DOM结合成为render tree，这时如果你把css代码放在页面的底部，解析的速度会变慢，就会出现白屏现象。
要注意的是出现白屏现象不是出现了bug，是浏览器自身出现的问题
解决办法：使用link标签样式表放在顶部

FOUC（flash of Unstyled Content）无样式内容闪烁
如果把样式放在底部，对于IE浏览器，在某些场景下（点击链接，输入URL，使用书签进入等），会出现FOUC现象（逐步加载无样式的内容，等CSS加载后页面突然展现样式），对于Firefox会一直表现出FOUC
对于Firefox浏览器的渲染机制不符合上面的图表，首先进行的是DOM树，然后直接进行render tree，等CSS加载完成后会一步进行展示。
建议JavaScript代码放在页面的底部（之前）

脚本会阻塞后面内容的实现
脚本会阻塞其后组件的下载
对于图片和CSS，在加载的时候会并发加载（如一个域名下同时下载两个文件），但是在加载的JavaScript代码的时候，会禁用并发，并且阻止其他内容的下载。所以把JS放在页面的顶部也会出现白屏的现象。

async和defer？
async指加载异步
我们都知道在没有defer或者async，浏览器会立即加载并执行指定的脚本，‘立即’指的是在渲染该script标签之下的文档元素之前，也就是说不等后续加载载入的文档元素，读到就加载执行。

有async，加载和渲染后续文档元素的过程将和script.js的加载与执行并行进行（异步）
例如：

<script async src="a.js"></script>       // a.js的内容是alert('1')
<script src="b.js"></script>      //b.js内容是alert('2')

正常的显示内容是先出现1，然后出现2。但是加入async 以后会先出现2，在出现1。
因为在加载和渲染后续文档元素的过程中是同时进行的。
defer：脚本延迟到文档解析和显示后执行，有顺序
async：不保证顺序

css和js在网页中的放置顺序？

CSS一般放在页面的顶部，在之前
CSS放在前端是页面渲染时首先是根据DOM结构生成一个DOM树然后加上CSS样式生成一个渲染树，如果CSS放在后面可能页面会出现闪跳的感觉，或者是白屏或者布局混乱样式很丑直到CSS加载完成。
js一般会放在页面的底部，因为js是阻塞加载，会影响页面加载的速度，如果js文件比较大，算法也比较复杂的话，影响更大。

222 The way to the front end（css）：Flex

布局流程图：

遵循原则：

不到万不得已的时候不写具体的height，width；
尽量使用高级的语法，如：flex，calc，box-sizing；
如果需要兼容IE浏览器，height，width尽量写死；
对于前端工程师来说更要注意：no pic no code

计划实现：

float布局：(支持IE5)

套路：
(1)子元素出现float：left或者float：right；
(2)父元素必定加上clearfix；
网上清除浮动的代码有很多，这里只介绍我自己经常使用的一个：

.clearfix:after {
   content:""; 
   display: block; 
   clear:both; 
}

example：

HTML:
<div class="father clearfix">
        <div class="son" style="float: left;">儿子1</div>
        <div class="son" style="float: right;">儿子2</div>
    </div>
CSS:
 .clearfix::after{
        content: '';
        display: block;
        clear: both;
    }
    .father{
        border: 1px solid red;
    }
    .son:nth-child(1){
        width: 30%;
        background-color: red; 
    }
    .son:nth-child(2){
        width: 70%;
        background-color: yellow; 
    }

导航条的实现：

HTML:
<div class="parent clearfix">
    <div class="child">logo</div>
    <div class="child">
      <div class="nav clearfix">
        <div class="navItem">导航1</div>
        <div class="navItem">导航2</div>
        <div class="navItem">导航3</div>
        <div class="navItem">导航4</div>
        <div class="navItem">导航5</div>
      </div>
  </div>

CSS:
.parent{
  margin-left: auto;
  margin-right: auto;
  background: #ddd;
}
.child{ }
.child:nth-child(1){
  width: 100px;
  background-color: #333;
  color: white;
  text-align: center;
  height: 36px;
  line-height: 36px;
  float:left;
}
.child:nth-child(2){
  float:right;
}
.clearfix::after{
  content: '';
  display: block;
  clear: both;
}
.clearfix{
  zoom: 1;
} /*IE 6*/
.content{
  border: 1px solid black;
  margin-right: 10px;
}
.nav{
  line-height: 24px;
  padding: 6px 0;
}
.navItem{
  margin-left: 20px;
  float:left;
}

主要使用：

noraml flow
float + clear
position relative + absolute
display inline-block
负margin

块级布局侧重垂直方向，行内布局侧重水平方向，flex的布局跟方向无关
flex布局可以实现空间自动分配，自动对齐
flex适用于简单的线性布局，更复杂的布局要交给grid
/flex使用之前是要在父级元素加入display: flex;/
主轴：main axis 侧轴：cross axis
main size / cross size
main start / main end ; cross start / cross end
flex item 子元素 / flex container 父元素

flex container：
flex-direction: row （默认，行内排列从左往右）/ row-reverse (反方向的，从右往左)/ column（从上往下排列）/ column-reverse(反方向的)
flex-wrap: nowrap（默认是不换行的）/ wrap(换行)
flex-flow: 是direction 和 wrap的结合： xx yy；
justi-content: space-between / space-around / flex-start/flex-end/center //主轴的对齐方式
空间都放在中间/空间都放在他们周围/都往起点靠/都往终点靠/全部往中间靠，没有间距
align-item: stretch
flex-direction/flex-wrap/just-content/align-item

The way to the font end: vue入门第二季

()

Vue入门第二季

lesson1_Vue.directive自定义指令
自定义指令中传递的三个参数
el: 指令所绑定的元素，可以用来直接操作DOM。
binding: 一个对象，包含指令的很多信息。
vnode: Vue编译生成的虚拟节点。

Vue.directive("jack" , function(el,binding){
 el.style = "color:" + binding.value;
});

el : 指令要绑定的元素
binding：是一个对象，里面还有自定义指令的相关信息
binding.value : 绑定的指令的具体值
binding.expression: 绑定的表达式值

binding的生命周期：
bind:function(){//被绑定
     console.log('1 - bind');
},
inserted:function(){//绑定到节点
      console.log('2 - inserted');
},
update:function(){//组件更新
      console.log('3 - update');
},
componentUpdated:function(){//组件更新完成
      console.log('4 - componentUpdated');
},
unbind:function(){//解绑
      console.log('5 - bind');
}

lesson2_Vue.extend自定义无参数标签

<author></author>
<script type="text/javascript">
    var authorExtend = Vue,extend({
      template: "<p><a :href='authorUrl'>{{authorName}}</a></p>",
      data: function(){
      return{
          authorName: 'jack',
          authorUrl: 'http://www.taobao.com' 
        } 
  }
  });
  new authorExtend().$mount('author');
</script>

lesson_5：template制作模板的三种写法

直接写在选项里的模板
template: <h1 style="color: red;">我是选项模板</h1>
写在script标签里面的模板

<script type="x-template" id="demo">
    <h2 style="color: red;">我是script模板</h2>
</script>
....
    template: '#demo3'

直接写在template标签里面

<template id="demo">
    <h2>你好，我是黑客</h2>
 </template>

....
 template: '#demo'

lesson_5: component组件

自定义全局的组件：

html: 
<hello></hello>
js:
Vue.component('hello',{
    template:`<h1>你好啊</h1>`
  })
var app= new Vue({
    el:'#app',
})

自定义局部组件：

html:
<hello></hello>
js:
var app=new Vue({
    el:'#app',
    components:{
    ’hello’:{
       template:`<h1>你好啊</h1>`
     }
  }
})

组件和指令的区别：
组件注册是一个标签，而指令则是定义标签的一个属性。实际开发的过程中组件用的比较多，指令用的比较少，因为指令的封装不如组件。

The way to the font end : 你真的了解HTML吗？

html4:

<!DOCTYPE html>
<html lang="en">
  <head> 
  <meat charset="UTF-8">
   <title>Document</title>
   </head>
   <body>
        < div class="header">
            <div class="nav"></div>
        </div>
         <div class="main"></div>
        <div class="footer"></div>
    </body>
</html>

html5:

<!DOCTYPE html>
<html lang="en">
  <head> 
  <meat charset="UTF-8">
   <title>Document</title>
   </head>
   <body>
        <header>
            <nav></nav>
        </header>
        <main>
            <article>
                <section></section>
            </article>
        </main>
        <footer></footer>
    </body>
</html>

1. HTML，XML，XHTML有什么区别？

HTML: 超文本标记语言，语法较为松散，不严格的web语言；例如：单标记语言

XML：可扩展的标记语言，主要用于存于数据和结构；
XTML：可扩展的超文本标记语言，基于XML，作用和HTML相类似，但语法更为严格；

2. 怎么理解HTML语义化？

语义化HTML是一种编写HTML的方式。
选择合理的标签，使用合理的代码结构，便于开发者阅读，同时可以让浏览器爬虫和机器很好的解析

3. 怎么理解内容，样式分离和行为分离的原则？

HTML：代表文本内容的主题灵魂，CSS代表文本的样式，而JS则控制文本的行为

写页面的时候不要管样式，主要放在HTML语义化和结构上。让HTML能体现页面结构或者内容
写JS的时候，尽量不要用JS去直接操作样式，而是通过给元素添加删除Class来控制样式的变化
HTML内不允许出现属性样式，尽量不要出现行内样式

4. 有哪些常见的meta标签？

  <meta charset="utf-8">
  <meta http-equiv ="X-UA-Compatible" content="IE=edge, chrome=1"> //针对于双核浏览器
  <meta name="viewport" content ="width=device-width ,initial-scale=1,maximum-scale=1"> 
    //移动端1:1展示
  <meta name="keywords" content="关键字">
  <meta name="description" content="主要内容">

5. 文档声明的作用?严格模式和混杂模式指什么？<!doctype html> 的作用？

方便浏览器以何种的方式来渲染这个页面。
严格模式就是说以html头部为例，给出严格的标准，按照这个模式进行渲染；而混杂模式则没有严格的标准，按照浏览器的意愿进行渲染页面。

作用：告诉浏览器以html5的方式解析渲染这个页面

6. 浏览器乱码的原因是什么？如何解决？

编码格式不正确导致的乱码。
文档的编码格式：meta charset="utf-8"和文件保存的编码格式应该一致才不会出错。

7. 常见的浏览器有哪些，什么内核？

IE的内核：Trident
chrome，safari内核： webkit
Opera的内核：Presto
Mozilla-Firfox的内核：Gecko
国内常见的浏览器厂商：webkit或者Trident

The way to the font-end： es6从小白到大白

ES6的学习开始了~~~

第一节：ES6的环境搭建

建立一个项目的工程目录，目录下有两个文件夹：src和dist

src是我们的工作环境，平时编写的代码都放在这里 dist是我们的生产环境，是利用babel编译成es5代码的文件今年，在HTML页面需要引入这里的js文件
src > index.html , index.js
index.html > <script src="./dist/index.js"></script> 注意这里就是要引入生产环境的index.js
index.js > let a = 1 ; console.log( a ) 模拟一下生产的环境，写一句简单的es6代码

初始化NPM的环境 npm init -y -y的意思是默认安装，如果npm安装速度较慢你可以尝试使用cnpm安装
安装一个转换的插件babel，第一次全局安装：npm install -g babel -cli
转换的命令： babel src/index.js -o dist/index.js 使用babel将src下的文件转换到dist文件夹下

理论上来说4是不能正常进行的，需要安装两个包：
(1)npm install --save-dev babel-preset-es2015 babel-cli 安装完成后会多出一个node_modules的文件夹，和一个package.json>add -> devDependencies
(2)在src文件夹下建立一个‘.babelrc’的文件，写入以下代码：

{            
       "presets":[
          "es2015"  
       ],
        "plugins":[]
  }

这样操作每次转换都要使用babel src/index.js -o dist/index.js很麻烦，所以我们需要简化以下操作：
在package.json文件夹下，找到并修改为以下："scripts":{ "build":"babel src/index.js -o dist/index.js}
以后我们通过命令行输入： npm run build 就可以将src的文件转换到dist中去了

第二节：新的声明方式
我们都知道在es5中有var=varable这种声明变量的方式，在ES6中又新增了let 和const这两种。
var 的声明是全局的，那么怎么判断是否是全局变量：

var a= '123';
window.onload = function(){
         console.log(a);              //页面加载完成以后控制台显示是123 ，判断是var是全局变量
 }

var的声明容易污染全局，let声明则是局部声明，没有污染外部的变量。const常量的声明方式。

第三节：变量的解构赋值
ES6允许一定模式，从数组对象中提取值，对变量进行赋值，也被称之为解构。
解构赋值可以在实际开发的过程中大量的减少我们的代码。

数组的解构赋值

比如，我们在为变量赋值前是这样的：
let a =1 ,let b= 2 , let c=3;
使用了数组的解构赋值以后是这样的：
let[a,b,c]=[1,2,3]
具体的操作步骤是这样的：（这里只讲述一次，后面都不在讲述）
在第一节中的index.js文件中编写：
let[a,b,c]=[1,2,3] console.log("a="+a);console.log("b="+b);console.log("c="+c)
然后打开控制台：看见a=1,b=2,c=3
当然你也可以这样写：
let[a,[b,c],d]=[1,[2,3],4]; console.log("a="+a); console.log("b="+b); console.log("c="+c); console.log("d="+d)
也可以设置一个默认值：
let[foo='true'] = [] ; console.log(foo)
当然也可以这样写：

let [a,b='天气好']=['今天' ];
console.log(a+b)       ->今天天气好

let[a,b='天气好']=['今天' ,undefined]
console.log(a+b)     -> 今天天气好   //这里的undefined是定义了没有赋值，所以会找天气好这个值

let[a,b='天气好']= ['今天', null]
console.log(a+b)     ->今天null        //这里的null直接为空值，所以不会找前面的天气好

对象结构赋值
学完了数组解构赋值那么来学对象解构赋值你可能会很轻松，只是稍微有点不同。
对象解构赋值eg：

let {today , weather}={today:'今天'  , weather:'天气好'};
console.log(today + weather);        ->结果显示是今天天气好

如果是前面的weather不小心写错，控制台会直接输出weather is not defined
如果是后面的weather不小心写错，控制台会直接输出undefined
和数组解构的不同：
数组的解构的值必须是一一对应的，这里的对象解构就没有那么多的要求。
只要key值对应的名称有就即可。
下面说一个比较容易踩坑的地方：

错误的写法： 
let foo;
{foo}={foo:'你好'}            //这种写法是错误的。先声明，后解构的必须在后面加上一对大括号。
 
正确的写法：
let foo;
({ foo}={foo:'你好'})

字符串的解构赋值
字符串的解构赋值和数组的解构赋值类似
eg：

  let[t,u,v,w,x,y,z]="huangfl"
  console.log(t);       //h
  console.log(u);       //u
  console.log(v);        //a
  console.log(w);        //n
  console.log(x);         //g  
  console.log(y);         //f
  console.log(z);          //l

这节课我简单的介绍了数组解构，对象解构和字符串解构。以及解构的过程中遇到的一些问题还有和数组解构相类似的地方。

第四节-对象扩展运算符和reset运算符

当编写一个方法时，我们允许它传入的参数是不确定的。这时候可以使用对象扩展运算符来作参数，看一个简单的列子：

function jspang(...arg){
    console.log(arg[0]);
    console.log(arg[1]);
    console.log(arg[2]);
    console.log(arg[3]);
 }
jspang(1,2,3);           //123undefined

对象扩展运算符出现之前是这样的：

   let arrOne = ['www','baidu','com']
   let arrTwo=arrOne;
   console.log(arrTwo)             //wwwbaiducom
   arrTwo.push('JackMa'); 
   console.log(arrOne)            //wwwbaiducomJackMa

显然这样的结果是不对的，我们只能进行部分改造，于是我引入了扩展运算符：

   let arrOne=['www','baid','com'];
   let arrTwo=[...arrayOne];
   console.log(arrTwo);             //wwwbaiducom
    arrTwo.push('JackMa');              
    console.log(arrOne);             //wwwbaiducom
    console.log(arrTwo);              //wwwbaiducomJackMa

rest运算符

如果你已经很好的掌握了对象扩展运算符，那么理解rest运算符并不困难，它们有很多相似之处，甚至很多时候你不用特意去区分。它也用…（三个点）来表示，我们先来看一个例子。

function jspang(first,...arg){
    console.log(arg.length);
}
jspang(0,1,2,3,4,5,6,7);            //7,因为reset意思是指剩余的部分，去掉第一个first只有7个

然后如何循环输出reset运算符呢？
可以使用for...of运算符：

 function baidu(first , ...arg){
        for(let val of arg){
          console.log(val);
       }
 }
 baidu(0,1,2,3,4,5,6)           //0,1,2,3,4,5,6

for…of的循环可以避免我们开拓内存空间，增加代码运行效率，所以建议大家在以后的工作中使用for…of循环。有的小伙伴会说了，反正最后要转换成ES5，没有什么差别，但是至少从代码量上我们少打了一些单词，这就是开发效率的提高。
总结：我们这节课学习了对象扩展运算符和reet运算符，它们两个还是非常类似的，但是你要自己区分，这样才能在工作中运用自如。

第五节：字符串模板

The way to the font end:从认识webpack（3.x）开始

The way to the font end:CSS基础

CSS全称：Cascading Style Sheets，层叠样式表
HTML注释：
CSS注释：/xxx/
JS注释：//

CSS的展现方式：内联样式，内部样式，外部样式 @import:url("abc.css")/"xxx.css" 用于从其他样式表引入样式规则，这些规则必须优先于其他类型的规则。

文件路径：

相对路径：

(1) css/a.css ./css/a.css
这两种的写法是一样的，只不过后面的写法更加规范一些。表示index.html和CSS文件夹是同级目录
(2)b.css
这种写法表示a.css和b.css在同级目录下
(3)../img/a.png
在a.css中要插入图片a.png，首先找到css/a.css，发现css和img同级所以需要在往上一级找，接着就是../img/a.png

绝对路径：

/user/bin/src/config
本地文件的绝对地址，相当于一个写死的地址。
网站路径：
http://cdn.swiper.js / http://bootstrap.css
一般我们写入网站的相对路径

书写规范：

语法区分大小写，但建议统一使用小写
不使用内联的style属性绑定样式
id和class使用有意义的单词，分隔符建议使用" - "
有可能就是用缩写（新手的话不建议使用缩写，还是老老实实的把全称给写了）
属性值为0的CSS省略单位
块内容注意要缩进
属性名冒号后面要加一个空格（别问问啥，防止以后踩坑）

选择器类型：

基础选择器
组合选择器
属性选择器
伪类选择器
伪元素选择器

基础选择器：

*：通用选择器
#：id选择器
.：类选择器
elmement：标签选择器

组合选择器：

多元素选择器：elmement , element{}
后代选择器： E F{} 匹配E元素所有的后代
子代选择器：E>F{ } 匹配E元素的子元素
相邻选择器：E+F{ } 匹配E元素直接相邻的同级元素F
普通相邻选择器：E~F{}匹配E元素之后的同级元素F
多个类的选择器： .class.active{} 选中既含有class属性又含有active属性的选择器
ID和class选择器：elment#id{}，同上。

属性选择器：

E[attr]:所有含有属性attr的元素
E[attr =value]:所有含有属性值attr=value的元素
E[attr~=value]: 匹配
E[attr^=value]:匹配属性值为attr以value开头的元素
E[attr$=value]:匹配属性值attr以value为结尾的元素
E[attr*=value]:匹配属性attr值包含value的元素

块级元素和行内元素

块级元素可以包含行内元素和块级元素，但是行内元素只能包括行内元素（文本，行内）
块级元素占据一整行的空间，行内占据自身宽度空间
宽高设置，内外边距的差异
block-level: div h1~h6 p hr form ul dl ol pre table li dd dt tr td th
inline-level: em strong span a br img button input label select textarea code script
宽高：对块级元素设置宽高有效，但是对行内元素设置宽高是无效的！
边框：border：width style color; border-top/right/left/bottom
用CSS实现三角形：

.triangle{
  width: 0px;
  height: 0px;
  border: 20px solid red;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-top-color: transparent;
}

margin/padding:外边距/内边距
margin/padding: top right bottom left;
margin外边距是合并的。
块级元素的居中margin： 0 auto；
行内元素的居中text-align: center;

文本

chrome: 设置的最小字体是12px，默认字体是16px
解决最小字体的方法：css中的语法： -webkit-text-transform: scale(0.75) // 原来字体的0.75倍
文本的对齐方式： text-align: left/right/center/justify(两边对齐)
首行缩进：text-indent: 首行缩进的距离
文字样式：text-decoration: none/underline/line-through/overline
改变文字大小：text-transform: none/uppercase（全部大写）/lowercase/capitalize（首字母大写）
改变字（单词）之间的间隔：word-spacing:
字母间隔修改的是字符和字母之间的间隔：letter-spancing:
单行文本溢出用...省略号表示：

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

隐藏or透明

opacity: 0; 透明度为0，整体
visibility： hidden; 和opacity: 0 类似
display： none 消失，不占用位置
background-color: rgba(0,0,0,.2)只是背景色透明

111

222

The way to the font end: CSS编码规范

CSS编码规范

语义化

语义化标签优先
基于功能命名，基于内容命名，基于表现命名
简略，明了，无后患
语义化标签：

<article> 
    <h1>编码规范</h1>
    <p>编码规范之很好的讲解：</p>
    <p><b>philongHuynh</b></p>
</article>

好坏对比：

<div class="left"></div>
<div class="red"></div>
<div class="s"></div>
<a class="link" href="#"></a>
---
<div class="success"></div>
<div class="theme-color"></div>
<a class="login" href="#"></a>

<article class="blue"><article>
<article class="redBg mt30 bigText"><article>
---
<article class="movie"></article>
<article class="news"></new>

推荐所有的命名都是小写，命名都用""包裹，用中横线链接多个单词，命名体现功能，不涉及表现。

常见命名：

用于外侧包裹： .wrap / .wrapper
包裹容器： .container / .ct
用于头部： .header
页面body: .body
页面尾部： .footer
用于侧边栏： .aside / sidebar
与header footer对应，用于主要内容：.content
导航元素： .navigation
分页： .pagination
tab切换： .tab> . tab
导航列表：.breadcrumbs
下拉菜单：.dropdown
文章：.article
主体：.main
头像：.thumbnail
媒体资源：.media
面板：.panel
鼠标放置上去的提示：.tooltip
鼠标弹出时的提示：.popup
按钮：.button / .btn
广告：.ad
二级导航：.subnav
菜单： .menu
标签： .tag
提示信息：.message / .notice
摘要：.sunmmary
logo: .logo
搜索框：.search
登录：.login
注册：.register
用户名：.username
密码：.password
广告条：.banner
版权：.copyright
弹窗：.model / .dialog

CSS规范：

tab用两个空格表示
css的:后加个空格，{ 前加个空格
每条声明后都加上分号
换行，而不是放到一行
颜色用小写，用缩写
小数不用加前缀，用.5代替0.5
元素结果为0的不用加单位
尽量使用缩写

想了解更多关于命名规范的相关知识：

google html css 命名规范：https://google.github.io/styleguide/htmlcssguide.xml
bootstrap命名规范：http://codeguide.bootcss.com/
命名真难：https://seesparkbox.com/foundry/naming_css_stuff_is_really_hard

伪类：
伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为变化而动态变化。
伪类列举
语言相关：:dir /:lang
状态：:link/:visited/:hover/ :active/ :focus
结构化：:not/:first-child/:last-child/:first-of-type/:nth-child/:nth-last-child/:nth-of-type/:only-child/:only-of-child/:traget
表单相关：:checked/:default/:disabled/:empty/:enabled/:in-range/:out-of-range/:scope
其他：:root/:fullscreen

伪元素：
伪元素用于创建一些不在文档树中的元素，并为其增加样式。
伪元素：::before/:before ::after/:after ::first-letter/:first-letter ::first-line/:first-line
::selection/::placeholder/::backdrop

The way to the font end: vue入门第一季

vue入门第一季

学习vue之前你需要具备以下的知识：

熟练的使用html标签
熟悉或者熟练的使用CSS，有写页面的经验
初，中级的JavaScript的经验
大致的了解nodeJs的相关知识

安装vue：
1：本地安装，直接下载到本地
2：CDN引入，直接在页面中引入（推荐使用）
安装方法：vuejs.org(英文网站) cn.vuejs.org(中文网站) > learn > api

学习vue之前希望你具备条件：

一个代码编辑器（推荐您使用vscode）
本地服务器，例如：http-server

lesson_1: 写一个helloworld的小例子吧
先写一个index.html的页面，主要用于指向例子：
第一节代码如下：

index.html:
`<body>
    <h1>vue2.0实例</h1>
    <hr>
    <ol>
        <li><a href="./01_helloworld.html">hello world实例</a></li>
    </ol>
</body>

然后开始写我们的demo，代码如下：

<body>
    <h1>hello world</h1>
    <hr>
    <div id="app">{{message}}</div>   //message就是显示要包裹的信息
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'hello world !'
        }
    })
    </script>
</body>

这样我们的一个小例子已经完成了，点击index.html中的“helloworld”会跳转至实例中,页面显示‘hello world’

lesson_2: v-if & v-else &v-show
v-if & v-else 看起来很熟悉，相当于我们之前见到的选择判断，那v-show是什么？v-show相当于css中的display：none属性。
实例代码：(下文中都是从index.html引入一个链接，不在演示index.html代码)

v-if.html:
<body>
    <h1>v-if & v-else & v-show</h1>
    <hr>
    <div id="app">
        <div v-if="islogin">
            如果你使用了v-if那么你就可以看到这句话
        </div>
    </div>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            islogin: true
        }
    })         
    </script>
</body>

解释：如果v-if的选择判断是正确的，那么会正产显示这句话；如果v-if是false，则不会显示这句话。

v-else实例：

<body>
    <h1>v-if & v-else & v-show</h1>
    <hr>
    <div id="app">
        <div v-if="islogin">
            如果你使用了v-if那么你就可以看到这句话
        </div>
        <div v-else="notlogin">
            如果你使用了v-else那么你可以看到这句话
        </div>
    </div>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            islogin: false,
            notlogin: true
        }
    })
    </script>

解释：如果v-if的显示是正常的，不会显示v-else下面的这句话。同样也就是说，v-else的正常显示必须是在v-if的判断为false的前提下。
v-show和v-if的显示效果类似，这里不做演示。
敲黑板的地方开始了(duang duang duang)：
v-if & v-show的区别是啥？

v-if：判断是否加载，可以减轻服务器的压力，在需要时加载。
v-show：调整css dispaly属性，可以使客户端操作更加流畅。

lesson_3:v-for实例
显然v-for就是循环的意思，但是这里和js有点不同的地方是：如果你想要在什么地方循环，那么你就在什么地方加入v-for。
具体代码如下：

v-for.html:
 <h1>v-for</h1>
    <hr>
    <div id="app">
        <ul>
            <li v-for="item in items">{{item}}</li>
        </ul>
    </div>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            items:[53,27,66,78,12]
        }
    })
    </script>

解释：所以在v-for循环就实现了，这里我们要循环的是li所以在li加入了v-for。
那么简单的循环实现了，排序在vue中该怎么实现呢？（例如：5,6,4,7 ->4,5,6,7）
如果是在以往的JS我们是这样实现的：

data:{
    items:[28,36,15,77,11]
},
 computed:{
     items:function(){
      return this.item.sort();
      }
}

👎 注意这种写法在vue中是错误的，error：when renderring root instance; 根命名错误
正确写法：

 <h1>v-for</h1>
    <hr>
    <div id="app">
        <ul>
            <li v-for="item in sortItems">{{item}}</li>
        </ul>
    </div>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            items:[53,27,6,78,12],
        },
        computed: {
            sortItems: function(){
                return this.items.sort(sortNumber);
            }
        }
    })
    function sortNumber(a,b){       
        return a-b;
    }
    </script>

//在JS中排序：21，31，4，51;这样的排序出现是正常的，如果想要实现：4,21,31,51.在上文中我封装了一个sortNumber函数，你直接调用就可以了。
字符串数组的循环：

实现效果：
jack ： 400
pony： 390
alex ：410
代码：
       <ul>
            <li v-for="student in students">
                {{student.name}}-{{student.money}}
            </li>
        </ul>
js:
           data:{
             students:[
                {name:'jack',money:400},
                {name:'pony',money:390},
                {name:'alex',money:410},
                ]
       }

接下来，我们进行数组对象方法的排序：
效果：pony: 390
jack:400
alex: 410
同样和上面的排序一样，我们需要提前封装一个数组对象方法的函数：

function sortByKey(array , key){
   return array.sort(function(a , b){
    var x =a[key];
     var y = b[key];
     return ((x<y) ? -1:((x>y)? :0 ))
    })
}

排序代码：

html:
        <ul>
            <li v-for="student in  sortStudents">
                {{student.name}}-{{student.money}}
            </li>
        </ul>
js:
      data: {
            students:[
                {name:'jack',money:400},
                {name:'pony',money:390},
                {name:'alex',money:410}
                ]
        },
        computed: {
            sortStudents: function(){
                return sortByKey(this.students,'money')
            }
        }

lesson_4:v-texth输出&v-html输出

v-txml具体代码如下：
<div id="app">
       第一种（普通输出）： {{message}} <br>
       第二种（v-text输出）：<span v-text="messages"></span>
    </div>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'hello world !',
            messages: 'hello world !'                        
        }
    })
    </script>

v-text的好处是在于，它是等dom预处理结束后才会进行输出，而一般的{{}}输出，如果你语法出现了错误，显示也是不正常的，但是你用了v-text如果语法错误，直接显示不出来。
v-html：

 <div id="app">
       第一种（普通输出）： {{message}} <br>                //普通的helloworld 字体
       第二种（v-html输出）：<span v-html="messages"></span>  //h1号字体的 helloworld
    </div>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'hello world !',
            messages: '<h1>hello world !</h1>'                        
        }
    })
    </script>

v-html指令有种预编译的感觉，它输出的代码都是经过编译过的代码，但是这类型的代码在实战的过程中应该慎用，因为会引起不必要的xss攻击风险。

v-on实例：

代码展示：
   <div id="app">
        本场比赛得分：{{fenshu}} <br>
        <button v-on:click="jiafen">加分</button>
        <button @click="jianfen">减分</button>
    </div>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            fenshu: 0
        },
        methods:{
        jiafen:function(){
            this.fenshu++;
        },
        jianfen:function(){
            this.fenshu--;
        }  
        }
    })
    </script>

v-on组件相当于JS中的时间，其中上述代码中的v-on:click的缩写方法是：@click
自定义加分：

<div id="app">
         本次得分：{{count}}
         <button v-on:click="add">加分</button>
         <input type="text" v-on:keyup.enter="onEnter" v-model="secondCount">
    </div>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            count: 1,
            secondCount: 1
        },
        methods:{
            add:function(){
                this.count++;
            },
            onEnter:function(){
                this.count = this.count + parseInt(this.secondCount);
            }
        }
    })
    </script>

解释：这是自定义加分的演示，这里要注意的地方是：在js中两个数字相加是默认为字符串相加，需要转换为数字相加，我在这里使用了parseInt。v-model是绑定数据源的意思，在下面的一节中会提到

lesson_6
v-model双向数据绑定：v-model实现的是双向数据，当用户在文本框输入文字的同时，屏幕也在同时输入文本框中的显示内容；其中v-model有几个属性，分别为：.lazy , .number , .trim
.lazy 属性：当用户在输入框输入文字的时候不会显示，离开输入框屏幕内容就会正常显示
.number 属性：当用户输入文字的时候不会显示，只有输入数字的情况下会显示，但是如果一字符为开头的也会正常显示。
.trim属性：屏幕显示去除文本输入的前后空格

code:
 <div id="app"><span v-text="message"></span>
        <h3>文本输入</h3>
    v-model:<input type="text"  v-model="message"><br>
    v-model.lazy: <input type="text" v-model.lazy="message"><br>
    v-model.number:<input type="text" v-model.number="message"><br>
    v-model.trim:<input type="text" v-model.trim="message"><br>
    </div>    
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'hello world !'
        }
    })
    </script>

多选框绑定一个值：

code:
<div id="app">
  <label>
    <input type="checkbox"  v-model="istrue" >
    {{istrue}}</label>   
    </div> 
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'hello world !',
            istrue: true
        }
    })
    </script>

选中则为true，去掉对号则为false；
多选框绑定数组：
单选框的绑定一个数组：

<label for="istrue">
        <input type="checkbox"  v-model="array_name" value="huangfl">huangfl
    </label>
    <label for="istrue">
        <input type="checkbox"  v-model="array_name" value="jackwong">jackwong
    </label>
    <label for="istrue">
        <input type="checkbox"  v-model="array_name" value="philonghuynh">philonghuynh
    </label><br>
    {{array_name}}
    </div> 
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'hello world !',
            istrue: true,
            array_name:[]
        }
    })
    </script>

当点击选框按钮的时候，下面的数组框会显示你选中的信息。
单选框选择性别信息：

<div id="app">
<label >
            <input type="radio" v-model="sex" value="男"> 男
    </labe>
    <label>    
            <input type="radio" v-model="sex" value="女">女      
    </label> <br>
      你选择的性别是：{{sex}}            
    </div> 
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'hello world !',
            istrue: true,
            array_name:[],
            sex: '男'        //表示默认选框是男
        }
    })
    </script>

lesson_7：
v-bind 标签元素选择属性：

<div id="app">
        <img v-bind:src="imgSrc">
    </div>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            imgSrc: 'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3116813668,3476052882&fm=173&s=08E273231862B69EFF1500DE0100C091&w=218&h=146&img.JPEG'
        }
    })
    </script>

对于a标签来说，在href输入一样的地址一样可以链接到。
当然也可以这样写：

css:.classA{color : red;}
html:<div v-bind:class="{classA:isok}"> 这行文本用于判断</div>
js: data{
   className:'classA'
   isok:true   //如果是true显示为红色，false则不显示
}

bind标签属性绑定数组元素：

 <div v-bind: class ="[class A,classB]"></div>
 data:{
     classA:'classA',
     classB:'classB'

bind标签属性绑定三元运算符：

<style type="text/css">
    .classA{
        color:red;
    }
    .classB{
        font-size: 50px;
    }
</style>
<body>
    <h1>hello world</h1>
    <hr>
    <div id="app">
        <img v-bind:src="imgSrc">
        <div v-bind:class="isok?classA:classB">你好这个世界</div>
    <hr>
    <input type="checkbox" v-model="isok">
    <label for="isok">isok={{isok}}</label>
    </div>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            classA: 'classA',
            classB: 'classB',
            isok: true
        }
    })
    </script>

当鼠标点击的时候会显示正确，为classA属性，false的情况下为classB属性
当然v-bind也可以对象style，例如：

html:
 <div v-bind:style='styleObject'>你好，我是小明；如果你绑定了对象属性，那么你会看到这行字会变成红色</div>
js:
  data:{
   styleObject:{
      color:'red',
      fontSize: '20px'  
}
}

lesson_8:指令其他部分
v-pre & v-cloak & v-once：
v-pre文本原样输出不经过任何编译，相当于html中的pre代码，直接加入到想要不编译的标签中就可以了
v-cloak: 渲染完成以后才会显示相关信息，只要放在想要的标签中加入即可。
v-once：只执行一次，例如上面所提到的双向数据绑定：

<div id="app">
        <span v-once>{{message}}</span> <br>
        <input type="text" v-model="message" >
    </div>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'hello world !'
        }
    })
    </script>

这里的v-once只会执行一次，就是刚刚加载完成时候这一次就会停止。
好了，第一季就到此结束了！

The way to the font end: form表单

form表单有什么作用？有哪些常用的input 标签，分别有什么作用？

表单是一个包含表单元素的区域，表单元素是允许用户在表单中输入信息的元素。

 <input tyepe="text" >  ->  文本输入框
 <input type="password">  -> 密码框
 <input type="radio">    ->单选框
 <input type="checkbox">  ->复选框
 <input type="file" accept="image/png">  ->上传文件，//图片文件
 <input type="submit" > -> 提交按钮
 <input type="reset" > ->重置按钮

post 和 get 方式的区别？

顾名思义：请求数据用get，传递数据用post
GET请求：
GET请求能够被缓存
GET请求会保存在浏览器的浏览记录中
GET请求有长度限制
GET请求主要用以获取数据
会将表单内的信息组装成url变成key&value的形式发送出去
POST请求：
POST请求不能被缓存下来
POST请求不会保存在浏览器浏览记录中
POST请求没有长度限制
请求的数据不会发生变化，会通过服务器传输给后台。

在input里，name 有什么作用？

name 属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据

radio 如何分组?

radio单选框标记，例如这样：

<input type="radio" name="gendle"  value="男">男
<input type="radio" name="gendle"   value="女">女

placeholder 属性有什么作用?

主要是用来文本显示需要提示用户的相关的信息

type=hidden隐藏域有什么作用? 举例说明

主要用于暂存信息。
作用：
可以埋下一个值，如果产品发生了迭代，可能会直接调用type=“hidden”的相关信息，一般用于开发者，用户一般发现不了。
也可以用于判断用户信息是否正确保证网页安全，防止黑客攻击。