H5新特性
1.语义化标签
- header,content footer aside,nav,section,article
- 语义化标签的好处：结构清晰，易于阅读，可维护性更高
2.表单新特性
-
H5之前具有的type值：
text,password,radio,checkox,submit,button image,hidden
-
H5新增
Email：邮件输入域，在表单提交时提供简单的邮箱格式验证
tel：电话号码输入域，在手机浏览器中弹出数字键盘
search：搜索输入域，在手机浏览器中右下角呈现搜索按键
date：日期选择控件
-
H5表单可用的属性：
placeholder：站位符，用于在输入框中显示提示性文字
autocomplete：on/off，自动补全，是否自动记录之前提交的数据，以用于下一次输入建议
required：false/true，必需的/必填项，在表单提交时会验证是否有输入，没有输入则弹出提示消息
-
vedio
src: 用于告诉video标签需要播放的视频地址
autoplay: 用于告诉video标签是否需要自动播放视频
controls: 用于告诉video标签是否需要显示控制条
muted:静音
-
audio
src: 用于告诉audio标签需要播放的音频地址
autoplay: 用于告诉audio标签是否需要自动播放音频
controls: 用于告诉audio标签是否需要显示控制条
loop: 一般用于做广告视频, 用于告诉video标签音频播放完毕之后是否需要循环播放
preload: 预加载音频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效。
muted:静音
-
canvas画布
-
webstorage
- sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话页面才能访问并且当会话结束后数据也随之销毁。
- localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
-
websocket
- WebSocket是HTML5下一种新的协议（websocket协议本质上是一个基于tcp的协议）
- 它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的
- Websocket是一个持久化的协议
- WebSocket在建立握手时，数据是通过HTTP传输的。但是建立之后，在真正传输时候是不需要HTTP协议的
-
http和websocket相同点
都是基于tcp的，都是可靠性传输协议
都是应用层协议
- WebSocket是双向通信协议，模拟Socket协议，可以双向发送或接受信息
- HTTP是单向的
- WebSocket是需要浏览器和服务器握手进行建立连接的
- 而http是浏览器发起向服务器的连接，服务器预先并不知道这个连接
-
总结
首先，客户端发起http请求，经过3次握手后，建立起TCP连接；http请求里存放WebSocket支持的版本号等信息，如：Upgrade、Connection、WebSocket-Version等；
然后，服务器收到客户端的握手请求后，同样采用HTTP协议回馈数据；
最后，客户端收到连接成功的消息后，开始借助于TCP传输信道进行全双工通信。
CSS3新特性
圆角边框：border-radius:
border-radius:5px 4px 3px 2px;/*四个值分别代表左上，右上，右下，
边框阴影 box-shadow:
box-shadow：X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
边框图片：border-image
旋转 rotate()
缩放 scale()
CSS3 盒子模型
css有两种盒模型，标准盒模型(W3C盒模型)和IE盒模型
-
标准盒模型（W3C盒模型）box-sizing：content-box(元素默认)
属性width,height只包含内容content，不包含border和padding。
如果额外设置了padding和border值，计算盒子实际大小时会加上padding和border。
盒子大小= (width + border + padding)*(height + border + padding)
设置padding和border影响盒子实际大小，即会把盒子撑大
box-sizing：content-box(元素默认)
//不设置padding和border div:200*200
div {
box-sizing: content-box;
width: 200px;
height: 200px;
background-color: purple;
}
//设置padding和border div:260*260
div {
box-sizing: content-box;
width: 200px;
height: 200px;
padding: 20px;
border: 10px solid black;
background-color: purple;
}
-
IE盒模型(怪异盒模型)
盒子的width,height只包含内容content，border，padding。
如果额外设置了padding和border值，盒子的内容宽高content会受到影响，而盒子实际大小不会收到影响
盒子大小=width*height（这里的with已经包括了padding，content,border）
如果额外设置了padding和border值，内容的宽高content = width/height - border宽高 - padding的宽高
box-sizing：border-box //不设置padding和border div:200*200 div { box-sizing: border-box; width: 200px; height: 200px; background-color: purple; } //设置padding和border div:200*200 //盒子的实际宽高不变，内容区域宽高缩小为140px，减去了padding和border的宽高。 div { box-sizing: border-box; width: 200px; height: 200px; padding: 20px; border: 10px solid black; background-color: purple; }
es6新特性
类
clsss让javaScript的面向对象编程变得更简单和易于理解
class Animal{
//构造函数，实例化的时候会被调用，如果不指定，那么会有一个不带参数的默认构造函数.
constructor(name,age){
this.name = name;
this.age = age;
}
}
let animal = new Animal("liang",18)
let和const
{
var a = 10;
console.log(a); // 输出10
{
let a = 10;
}
console.log(a); //-1 or Error“ReferenceError: a is not defined”
const PI = 3.1415;
PI // 3.1415
PI = 3; //TypeError: Assignment to constant variable.
模板字符串
// 不使用模板字符串
var name = 'Your name is ' + first + ' ' + last + '.'
// 使用模板字符串
var name = `Your name is ${first} ${last}.`
// 通过${}就可以完成字符串的拼接，只需要将变量放在大括号之中
解构赋值
var foo = ["one", "two", "three", "four"];
var [one, two, three] = foo;
console.log(one); // "one"
console.log(three); // "three"
//如果你要忽略某些值，
var [first, , , last] = foo;
console.log(first); // "one"
console.log(last); // "four"
var a, b; //先声明变量
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
var a, b;
[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7
var a = 1;
var b = 3;
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1
const student = {
name:'Ming',
age:'18',
city:'Shanghai'
};
const {name,age,city} = student;
console.log(name); // "Ming"
console.log(age); // "18"
三点运算符
函数简写
在es6之前，对象中必须包含属性和对应属性值，在es6中对象可以只写变量
const student = {
name:name,
age:age,
city:city
}; // 不用ES6
const student = {
name,
age,
city
}; // 用了ES6
箭头函数
promise
是js中进行异步编程的解决方案
解决回调地狱的
axios
基于Promise操作方式的ajax封装包
直接用它来发送ajax,可以轻松拿到成功结果
btns[1].onclick =function(){
// 发送ajax请求 返回结果是Promise对象
axios({
// 请求类型
method:'post',
url:'http://localhost:3000/posts',
// 设置请求体
data:{
title:"今天心情不错",
auyhor:"里昂"
}
}).then(response =>{
console.log(response)
})
}
//
btns[1].onclick = function(){
axios.post('/axios-server'),{
username:'admin',
password:'123456'
},{
// url 参数
params:{id:200,vip:100},
// 请求头参数
headers:{a:'abacd'}
}
}
ajax
// getElementsByTagName 返回 指定节点 内带有 指定标签名 的 所有元素
const btn = document.getElementsByTagName('button')[0];
const result = document.getElementById('result')
btn.onclick = function(){
console.log('test')
//1.创建对象
const xhr = new XMLHttpRequest();
// 2.初始化
xhr.open('Get','http://127.0.0.1:8000/server?a=100&b=200');
//3.发送
xhr.send();
// 4.事件绑定 处理服务器返回的结果
// readystate 是xhr对象中的属性，表示状态 0初始化 1open方法调用完毕 2send方法调用完毕 3服务端返回了部分结果 4服务端返回了所有结果
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
//判断响应状态吗
if(xhr.status >=200 && xhr.status<300){
//处理结果
// 响应行 头 空行 体
console.log(xhr.status,xhr.statusText,xhr.getAllResponseHeaders(),xhr.response)
result.innerHTML = xhr.response
}
}
}
}
2272
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
