标题综合笔记
HTML
超文本标记语言，网页其实就是一个HTML文档，HTML规范由W3C制定（W3C规范）
XML
可拓展标记语言
XML文档的语义约束为DTD（文档类型定义，基本格式）
- XML与HTML的区别
HTML5
Html+css+js在内的一套技术组合
对HTML标准的第五次修改
主要目的是将互联网语义化，更好地支持人类及机器阅读，更好地支持各种媒体嵌入
特点：1.强化了web网页的表现性能，追加了本地数据库，提供了更多能支持网络应用的标准集合
H5不需要参考DTD
- H5与之前版本的区别
- 文档声明上更加简洁（只有一段
<!DOCTYPE html>） - 标签语义化
- 新添了表单元素的属性和类型：email，data等
- 利用canvas配合js实现绘图功能，新增video标签
- H5的新特性
- 语义化标签
- audio,video
- Header,footer
- Hgroup(h1~h6)
- figure/figcaption
- mark(标记元素高亮标签）
- 新的表单控件
- canvas
- localstorage & sessionstorage
- data-
- page visibility
-
标签语义化
利用富有语义化的标签来创建网页结构
优点：1.代码结构清晰，便于开发和维护
2.便于其他设备解析根据语义渲染
3.有利于seo优化，搜索引擎爬虫会根据不同的标签赋予不同的权重 -
HTML 中文乱码
原因：
1.没有设置HTML编码，在meta中设置charset属性为utf-8
2.如果使用记事本直接编辑html容易造成html编码乱码 -
H5的离线存储
在线状态下，浏览器第一次请求时会根据html头部的manifast属性对对应的内容进行离线存储
离线状态下，浏览器会加载对应内容
再次发送请求时，浏览器会对比mainfest文件是否更新，更新则重新下载对应资源进行离线存储 -
localstorage & sessionstorage
统称web storage
目标：提供cookie职外的存储会话数据的路径
提供一种存储大量可以跨会话存在的数据的机制
- 相同点
用来存储客户端临时信息的对象
只能用来存储字符串对象
不同浏览器无法共享 - 不同点
local的生命周期是永久，除非手动删除
session的生命周期为当前窗口，窗口关闭则结束，∴相同浏览器不同页面（同源）可以共享local不可以共享session - 应用场景
local：长期登录信息
session：敏感账号一次性登录
cookie& session 和 localstorage & sessionstorage
- cookie
服务器发送给客户端的特殊信息，以文本形式保存在客户端，每次请求时都会带上cookie
如果不设置过期时间，则关闭会话销毁，如果设置了则被保存在硬盘内，过期销毁 - session
存储在服务器
服务器首次收到请求时创建session对象，之后每次收到请求都会检查是否存在sessionID，有则返回对应的session对象，没有则创建，sessionID在客户端存储在cookie中
如果浏览器禁用cookie，利用URL重写response.encodeURL(url)可以将sessionID拼接到访问地址后 - localstorage & sessionstorage
webstorage的优点
比起cookie存储空间更大
因为只存在于客户端不会与服务器交互，节省了网路流量，也能更快显示
不用担心会被截获，但仍有伪造风险
数据操作比cookie方便
参考
-
a标签的四个伪类
其中，css中的伪类及伪元素 参考
顺序
:link 未访问链接
:visited 已访问链接
:hover 鼠标悬停
:active 鼠标点击瞬间 -
input有哪些属性
共有23种属性，常见的有
value 定义输入字段的初始值
readonly 规定输入字段只读
disabled 规定字段禁用
autocomplete 规定form的自动完成功能
autofocus 自动获取焦点
-
input中readonly和disabled的区别
作用：都是让用户不能更改表单域中的内容
区别：readonly只针对type为text，password，textarea，并可以进行表单提交
disabled对所有表单元素有效，不能进行表单提交 -
H5中的form表单元素
H5中的表单元素的自动完成功能：输入框输入内容时浏览器自动将输入历史列举在输入框下。
如何关闭：form标签中设置autocomplete:on/off -
input兼容性
在type为button时，value不能为空，否则无法与其他表单元素头部对齐
-
内联块元素
特征：
跟块元素一样可以设置宽高
跟内联元素一样可以放在一行显示
常见有<img> <input>
内联块元素之间会有小间隙的原因：
因为内联元素的空格和换行会被解析
解决方案：1.将回车空格去除（但会影响代码美观）
2.eg.<img>可以给它的父级的font-size设置为0 或者 将它的宽高都设为100% -
BFC
BFC: block formatting context，给予一个独立的空间，让空间里的子元素不会影响到外面的布局
属于块级元素
触发BFC的css属性列举：
· overflow: hidden
·display: inline-block
·position: absolute
·position: fixed
·display: table-cell
·display: flex
BFC的应用：解决margin塌陷
参考
参考 -
标签嵌套
块元素内+内联/部分块 √
内联元素内+块 ×
内联元素内+内联 √
块元素不能放在p标签内
h1~h6/p/dt内只能放内联不能放块
a标签内嵌套a标签会被解析成兄弟关系
<!-- a标签进行嵌套的时候 -->
<a href="#outer">outerA
<a href="#inner">innerA</a>
</a>
<!-- 而浏览器则会解析成 -- >
<a href="#outer">outerA</a>
<a href="#inner">innerA</a>
可以用object标签包裹嵌套
<a href="#outer">
outerA
<object><a href="#inner">innerA</a></object>
</a>
p标签内嵌套块级标签会被解析成兄弟关系
- 页面可见性（Page Visibility)
H5新增的api
主要用来判断用户是否在与页面进行交互，即页面是否被隐藏（是否最小化或者切换标签页到后台），页面被其他软件遮盖不算是隐藏
·document.hidden
·document.visibilityState
·visibilitychange事件
参考
eg.页面不可见则停止播放
var vidElem = document.getElementById('video-demo');
document.addEventListener('visibilitychange', startStopVideo);
function startStopVideo() {
if (document.visibilityState === 'hidden') {
vidElem.pause();
} else if (document.visibilityState === 'visible') {
vidElem.play();
}
}
如何优化网页
优化网页是指 1.提高加载速度 2.提高页面表现性
参考
提高加载速度：
- 减少http请求数量
- 使用CDN
- 添加expires头
- 对图片进行压缩，若图片不超过10k，webpack会直接转化为base64
- 将样式表放在头部，减少首屏出现的时间，提高用户体验，防止白屏
- 将脚本放在底部，由于js的下载会打断DOM的更新，放在首屏范围内会截断首屏内容，此外也是为了保证脚本能按顺序执行
参考 - 避免使用css表达式（expression）[消耗性能，计算频率非常高]
- 更多使用外部的js和css，使用外部的文件浏览器会进行缓存，下次加载就会直接利用缓存
- 减少DNS查找
- 避免重定向，如果当前页面发送重定向会影响整个HTML文档的传输
- 多利用get少用post，get会在客户端进行缓存，post不会
- DNS && CDN
参考
- DNS：通过域名查找ip
减少DNS查找：将静态资源都放在一个域名下，减少dns请求 - CDN：内容分发网络，将用户的请求重新导向离用户最近的服务节点上
当用户发出请求时，修改DNS让用户访问CDN，CDN给用户分配离用户最近/有所需内容缓存/目前最空闲的服务器，用户向被分配的服务器访问，如果被指定的缓存服务器没有所需内容，被指定的服务器则向上一级缓存服务器请求内容，直至追溯到本来的源服务器
CSS
盒子模型
标准盒子：宽度 = 内容宽度（content） + padding + border + margin
低版本ie盒子：宽度 = 内容宽度（content + padding + border） + margin
css3的新特性
- css3实现圆角 border-radius / 阴影 box-shadow / 对文字加特效（text-shadow）
- border-image
- 线性渐变（gradient）
- transform：
旋转 rotate(9deg)
缩放 scale(0.85,0.90)
定位 translate(0px,-30px)
倾斜 skew(-9deg,0deg) - css选择器
rgba() 指定颜色 opacity设置透明度
hsl()指定颜色（色调+饱和度+亮度） - 伪元素 ::selection
- 媒体查询，多栏布局
-
hack
由于不同浏览器对css的解析认识不同，导致生成页面效果不同，利用hack针对不同的浏览器分别对应css样式
参考 -
两栏自适应布局
父级设定display:flex
参考 -
如何垂直居中一个浮动元素
1.已知元素宽高.head-a { width: 150px; height: 150px; position: absolute; //fixed top:50%; left:50%; transform: translate(-50%,-50%); //负的宽高的一半或-50% }2.未知元素宽高
.txt-a{ width:100px; height:100px; position: absolute; top:0; left:0; bottom:0; right:0; margin:auto; }
以上情况的居中如果父元素为relative则以父元素为base
如果父元素没有设置relative则以整个画布为base -
响应式布局
根据屏幕分辨率的不同自适应的布局
参考
ES6 新特性
- let & const
const 定义一个只读常量，须立即初始化
不会出现变量提升，声明的变量一定要在声明后使用
不允许重复声明变量，声明的变量不再属于window
块级作用域 - 解构赋值
JS
-
同步和异步
js是单线程语言
js将同步任务盛放在主线程，而异步任务盛放在任务队列，执行程序首先执行主线程，主线程结束后再读取任务队列 -
HTTP
http协议是基于请求与响应模式的、无状态的、应用层的协议
1.同源
url的协议+域名+端口三者都相同时才会被判断为同源
2.跨域
有src属性的标签不受同源影响，如img/link
– 1.当一级域名相同时，不同的二级域名想要共享cookie
①设置document.domain共享cookie//同域document提供页面间的互操作，需要载入iframe var ifr = document.createElement('iframe'); ifr.src='http://b.a.com/bar'; ifr.onload = function() { var ifrdoc = ifr.contentDocument || ifr.contentWidnwo.document; ifrdoc.getElementById("foo".innerHTML); } ifr.style.display = 'none'; document.body.appendChile(ifr);②服务器设置cookie时，指定cookie所属域名为一级域名
– 2.当利用iframe/window.open打开非同源窗口时
①利用片段标识符（#）传输信息，URL上的#不会进行刷新页面
②利用window.name传输信息，监听字窗口的window.name会影响网页性能
③H5的API：window.postMessage允许非同源窗口通信
– 3.jsonp
ajax请求会被同源限制，但jsonp不会，但只支持get请求
且只能解决跨域HTTP请求问题，不能解决不同于的两个页面间如何进行js调用问题//创建一个script标签 var script = document.createElement("script"); //给src设置接口地址，并带一个callback函数名 script.src = "http://127.0.0.1:8888/index.php?callback=jsonpCallback"; //插入页面 document.head.appendChild(script); //通过所定义的函数名去接收后台返回的数据 function jsonpCallback(data){ //jsonp返回的对象是json 可以直接使用 //ajax取得的数据是json字符串需要转换成json对象才能使用 }
3.**http状态码** 由三位数字组成 200：请求成功 3xx：重定向 4xx：客户端出错 5xx：服务器错误
4.互联网协议
参考
实体层：最下层，物理手段把电脑连接起来，负责传送0和1的电信号
链接层：负责确定0和1的分组方式
以太网协议：确定了电信号的分组方式，由标头（HEAD)和数据（DATA）组成一帧
MAC地址：每台电脑的网卡接口，mac地址是不重复的
广播：以太网将数据包发给内网络内所有的计算机，计算机通过对比标头内的mac地址是否与自己一致来决定是否接收数据
网络层：广播机制无法发送给不同子网络的计算机，而仅凭mac地址无法辨识是否处于同一子网络，便诞生了网络地址（IP地址）
IP协议：规定网络地址的协议，定义生成IP地址
ip地址格式：176.16.254.1（网络部分+主机部分）
为了判断ip地址的哪一部分代表网络部分，即计算机是否处于同一子网络，出现了子网掩码
子网掩码格式：255.255.255.0
IP地址和子网掩码做与(AND)运算结果相同说明是同一子网络
IP数据包放进以太包传输，以太包就变成了：
head(以太mac)+head(ip)+data
ARP协议：两个计算机不属于一个子网络时，交由网关处理，而属于同一子网络时，利用ARP协议获得同一网络的主机mac地址
传输层：利用端口鉴别接收到的数据包应该被哪个程序使用
UDP协议：规定了端口信息，放进ip数据包则变成了
head(以太mac)+head(ip)+head(port)+data
TCP协议：由于UDP协议发出后无法确认对方是否收到，TCP协议就是有了确认机制的UDP协议，如果发出后没有收到确认，则发出方就知道需要重发
应用层：规定应用程序的数据格式，即解析接收到的数据包呈现给用户
最终的以太数据包
5.ajax
与后台交互请求数据，以XMLHttpRequest为核心，一种用于创建快速动态网页的技术
在不需要重新刷新页面的情况下，Ajax 通过异步请求加载后台数据，提高用户体验和页面性能。
异步的javascript 能够及时向服务器请求和处理响应，而不阻塞用户，达到无刷新的效果
原生ajax请求步骤
//创建XMLHttpRequest对象
var ajax = new XMLHttpRequest();
//规定请求类型，URL，是否异步
ajax.open('GET', url, true);//true为异步
//请求内容编码类型
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");//POST需要设置请求数据类型
//发送请求
ajax.send(null);//post请求数据放在send里
//接收服务器响应数据
ajax.onreadystatechange = function () {
if (ajax.readyState == 4 && (ajax.status == 200) {
var data = ajax.responseText;//ajax返回的数据是json字符串，需要转换成json对象
console.log(data)
}
};
GET和POST请求的区别
1.GET请求发送数据量比POST小
2.GET请求参数拼接在url上请求，POST放在send里
3.POST比GET安全
//GET
ajax.open("GET","/list?page=5");
ajax.send();
//POST
ajax.open("POST","/list");
ajax.send("page=5");
json对象与json字符串的转换
//字符串转对象
JSON.parse(json)
//对象转字符串
JSON.stringify(json)
//json字符串格式 "name":"shily"
//json对象格式 name:"shily"
6.闭包
js中没有块级作用域，js文件间定义的变量可以相互访问，容易造成命名冲突
优点：避免全局变量的污染
缺点：不会被垃圾回收机制回收，容易造成内存泄漏
特征：
①函数嵌套函数
②函数内部可以引用外部的参数和变量
③参数和变量不会被垃圾回收机制回收
7.继承
js中的继承都是模拟继承
①采用构造函数绑定的方式，使用apply、call来借调需要级成的父对象的构想函数
②利用prototype属性，将要继承的子构造函数的原型对象指向父构造函数构建出来的实例对象
会导致继承链紊乱
③是②的改进，将要继承的子构造函数的原型对象指向父构造函数的原型对象，比②效率高，但是由于指向同一个原型对象，更改属性会映射到另一个函数中
④创建一个空对象，将空对象的原型对象指向父构造函数的原型对象，用这个空构造函数创建一个实例对象，再将子构造函数的原型对象指向它，实现继承
⑤采用拷贝方式
拷贝分为深拷贝和浅拷贝
参考
js中基本数据类型放在栈内存中
引用数据类型放在堆内存中，在栈内存中存放的是指向它的地址
浅拷贝：当将一个对象赋值给另一个对象的过程中，其实只是把指向这个对象的地址传递了，此时改变其中一个对象的属性，另一个也会被影响
①简单的赋值语句
②ES6的新函数Object.assign()
//assign(target,source)后者覆盖前者的拼接操作
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }
console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }
//浅拷贝特性，基本类型不影响，引用类型相互影响
let obj1 = { person: {name: "kobe", age: 41},sports:'basketball' };
let obj2 = Object.assign({}, obj1);
obj2.person.name = "wade";
obj2.sports = 'football'
console.log(obj1); // { person: { name: 'wade', age: 41 }, sports: 'basketball' }
③对象的解构：展开运算符{...object}
es6特性，与assign（）功能相同
let obj1 = { name: 'Kobe', address:{x:100,y:100}}
let obj2= {... obj1}
obj1.address.x = 200;
obj1.name = 'wade'
console.log('obj2',obj2) // obj2 { name: 'Kobe', address: { x: 200, y: 100 } }
④concat() & slice()
array1.concat(array2)
⑤loash的_.clone方法
var _- require('lodash');
var obj2 = _.clone(obj1);
深拷贝：将父对象拷贝到子对象中，两者的内存和操作互不干涉
①JSON.parse(JSON.stringify())
将对象转成json字符串，再将字符串解析成对象，缠身新的对象，导致开辟新的栈，实现深拷贝
可以实现数组和对象，但不能处理函数和正则，按照如此处理，正则会变成空对象，函数会变成null
②lodash的_.cloneDeep
③jQuery.extend()
var $ = require('jquery');
var obj2 = $.extend(deepCopy, target, object1, [objectN]);//第一个值为true时为深拷贝
试题：手写一个深拷贝
↑参考页拉到最后
Canvas
详解
canvas是H5的新标签，本身只是一个图形容器（画布），需js在内部完成
<canvas id="canvas"></canvas>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
//实心矩形
context.fillRect(0,0,100,100);//x起点，y起点，width，height
//空心矩形
context.storkeRect(120,0,100,100);
//实心圆
context.beginPath();
context.arc(300,350,100,0,Math.PI*2,true);
context.closePath();
context.fillStyle = 'rgba(0,255,0,0.25)';
context.fill();
//获取像素点
var imageData = context.getImageData(0,0,image.widht,image.height);
1395
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
