HTML5记录
一、VS code引入插件后运行，终端执行
command+L+O
二、引入外部js文件：
1、js的exports.a = a；方式暂时不知道怎么做
2、直接引入，script之后可以直接使用。参照html-vue项目
3、数据类型
String、Number、Boolean、Null、undefined、symbol、Object、Array、Function
三、 JS显示数据方式：
window.alert()
document.write()
innerHTML=‘’
console.log()
四、 let、const、var
https://www.runoob.com/js/js-let-const.html
- let 声明的变量只在 let 命令所在的代码块{}内有效。用 let 关键字声明的全局作用域变量不属于 window 对象。不能先使用再声明。
- var 关键字声明的变量不具备块级作用域的特性，它在 {} 外依然能被访问到，在{}内var与外部同名的属性，外面的会被覆盖。声明的全局对象属于window，可以使用window.对象名访问到。可以先使用再声明。
- const 声明一个只读的常量，一旦声明，常量的值就不能改变（并非不可变，而是不可全局替换，参照声明对象和数组）。
五、全局变量、局部变量注意点
如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。
function xxx(){
name = ‘hello’
}
六、事件：
https://www.runoob.com/jsref/dom-obj-event.html
onchange、onclick、onmouseover、onmouseout、onkeydown、onload…
html dom onclick之类的直接使用，vue是@click，小程序是bindTap
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
七、 this关键字：
1、在对象方法中， this 指向调用它所在方法的对象。
2、单独使用 this，它指向全局(Global)对象。
3、函数使用中，this 指向函数的所属者。
4、严格模式下函数是没有绑定到 this 上，这时候 this 是 undefined。
5、在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素。
6、apply 和 call 允许切换函数执行的上下文环境（context），即 this 绑定的对象，可以将 this 引用到任何对象。
var person1 = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
var person2 = {
firstName:"John",
lastName: "Doe",
}
person1.fullName.call(person2); // 返回 "John Doe"
八、 箭头函数：
1、有的箭头函数都没有自己的 this。 不适合定义一个 对象的方法。
2、当我们使用箭头函数的时候，箭头函数会默认帮我们绑定外层 this 的值，所以在箭头函数中 this 的值和外层 的 this 是一样的。
3、箭头函数是不能提升的，所以需要在使用之前定义。
4、使用 const 比使用 var 更安全，因为函数表达式始终是一个常量。
九、闭包：
闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。
直观的说就是形成一个不销毁的栈环境。
闭包会持有父方法的局部变量和参数并且不会随父方法销毁而销毁
不必要的闭包只会增加内存消耗
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();
add();
add();
add(); // counter = 3
十、 事件
body事件：onload、onunload
元素事件：onclick、onmouseover、onmouseout、onmousedown、onmouseup、onfocus
事件捕获
document.getElementById(‘demo’).addEventListener(‘事件名’, 方法名, 是否捕获传递)
方法名：如果是相应事件，则只可写方法名methodName，写成methodName()则会自动执行
如果方法需要传递参数，则只可以使用匿名函数，function( { methodName(p1, p2) } );
是否捕获传递：默认false，即冒泡传递
IE8和更早版本：x.attachEvent("onclick", myFunction);
/*
* 参数：
* obj：要绑定事件的对象
* eventStr：事件(注意：这里不要on)
* callback：回调函数
*/
function bind(obj , eventStr , callback){
if(obj.addEventListener){
//大部分浏览器
obj.addEventListener(eventStr , callback , false);
}else{
//IE8及以下
obj.attachEvent("on"+eventStr , function(){
//在匿名函数中调用回调函数
callback.call(obj);
});
}
}
十一、Window加载，页面声明周期入口
window.onload = function () { }
十二、数据存储
localStorage不会被自动删除，
setItem(key)、
getItem(key)、
removeItem(key)、
clear()、
key(index)
sessionStorage 网页关闭会自动删除
cookie
sql
manifest文件
区别：
localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。
sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。
十三、 CSS声明权重（选择器）
内联>ID>伪类>属性>类>元素/类型>通用
!important会改变优先级
十四、 元素隐藏/显示
1、dispatch：none 隐藏 不占用空间
2、visibility：hidden 隐藏，仍然占用空间
3、v-if 存在/不存在
4、v-show 只生成一次，占用内存
十五、 Position
static 默认方式，没有定位
fixed 相对于浏览器窗口固定定位，不占用文档流，其他元素会相对位移
absolute 相对于最近的已定位父元素定位，不占用文档流，其他元素会相对位移
relative 相对于自身的定位
sticky 粘滞定位，基于用户的滚动位置定位
十六、 float
1、只能左右浮动
2、左右浮动，直到外边缘碰到另一个浮动元素
3、浮动之后的元素将围绕它
4、浮动之前的元素不受影响
5、如果是图像浮动，下面的文本流将环绕它
6、clear声明的元素， 属性指定元素两侧不能出现浮动元素。
推荐使用flex布局
十七、 文字显示…
单行
{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 100px;
}
任意行
{
display: -webkit-box;
/* -webkit-box-orient: vertical; */
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
//超出多少行显示省略号
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
十八、 box-shadow顺序
h-shadow v-shadow blur spread color insect
水平阴影 垂直阴影 模糊 阴影尺寸 颜色 外阴影转到内阴影
十九、 flex布局 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
容器属性：
属性/说明可选值
f方向： lex-direction
row | row-reverse | column | column-reverse;
换行：flex-wrap
nowrap | wrap | wrap-reverse;
简写：flex-flow
<flex-direction> || <flex-wrap>;
主轴上的对齐方式：justify-content
flex-start | flex-end | center | space-between | space-around;
交叉轴上如何对齐：align-items
flex-start | flex-end | center | baseline | stretch;
多根轴线的对齐方式：align-content。
如果项目只有一根轴线，该属性不起作用
flex-start | flex-end | center | space-between | space-around | stretch;
项目item属性:
order：排列顺序，越小越靠前
<integer>
flex-grow：放大比例，2比1占用的空间大一倍
<number>; /* default 0 */
flex-shrink：缩小比例，默认1，当空间不足时等比例缩小。如果一个项目的属性为0，其他项目都为1，则空间 不足时，前者不缩小
<number>; /* default 1 */
flex-basis：定义了在分配多余空间之前，项目占据的主轴空间
<length> | auto; /* default auto */
flex ：简写
none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] /* default 0 1 auto*/
align-self：允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
auto | flex-start | flex-end | center | baseline | stretch;
网友评论