HTML5初学者笔记

HTML5记录

一、VS code引入插件后运行，终端执行

二、引入外部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

五、全局变量、局部变量注意点

如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。

六、事件：

https://www.runoob.com/jsref/dom-obj-event.html

onchange、onclick、onmouseover、onmouseout、onkeydown、onload…

html dom onclick之类的直接使用，vue是@click，小程序是bindTap

七、 this关键字：

1、在对象方法中， this 指向调用它所在方法的对象。

2、单独使用 this，它指向全局(Global)对象。

3、函数使用中，this 指向函数的所属者。

4、严格模式下函数是没有绑定到 this 上，这时候 this 是 undefined。

5、在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素。

6、apply 和 call 允许切换函数执行的上下文环境（context），即 this 绑定的对象，可以将 this 引用到任何对象。

八、 箭头函数：

1、有的箭头函数都没有自己的 this 。 不适合定义一个 对象的方法。

2、当我们使用箭头函数的时候，箭头函数会默认帮我们绑定外层 this 的值，所以在箭头函数中 this 的值和外层 的 this 是一样的。

3、箭头函数是不能提升的，所以需要在使用之前定义。

4、使用 const 比使用 var 更安全，因为函数表达式始终是一个常量。

九、闭包：

闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。

直观的说就是形成一个不销毁的栈环境。

闭包会持有父方法的局部变量和参数并且不会随父方法销毁而销毁

不必要的闭包只会增加内存消耗

十、 事件

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)

十一、Window加载，页面声明周期入口

window.onload = function () { }

十二、数据存储

localStorage不会被自动删除，

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布局

十七、 文字显示…

单行

任意行

十八、 box-shadow顺序

十九、 flex布局 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

容器属性：

属性 / 说明可选值

f方向： lex-direction

换行：flex-wrap

简写：flex-flow

主轴上的对齐方式：justify-content

交叉轴上如何对齐：align-items

多根轴线的对齐方式：align-content。

如果项目只有一根轴线，该属性不起作用

项目item属性:

order：排列顺序，越小越靠前

flex-grow：放大比例，2比1占用的空间大一倍

flex-shrink：缩小比例，默认1，当空间不足时等比例缩小。如果一个项目的属性为0，其他项目都为1，则空间 不足时，前者不缩小

flex-basis：定义了在分配多余空间之前，项目占据的主轴空间

flex ：简写

align-self：允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

　简易笔记(EasyNote)是一个可以创建、编辑、并管理普通文本丰、丰富文本、超文本网页的笔记本程序。程序短小精悍， *** 作简单，可以满足在计算机面前长期工作者的日常事务记录，信息笔记及网络摘录的工作和学习需要。软件和浏览器(IE)巧妙结合可以自动把浏览器(IE)中选择的内容(文本或者图片)乃至整个网页摘录到笔记中并且自动保存！软件支持全文搜索，导入和导出功能可以和其他程序完美结合。笔记内容采用压缩及加密的办法保证笔记的私秘行和安全性，软件支持多个笔记数据文件，方便笔记文件的管理。主要功能： 1.创建并管理普通文本，丰富文本，网页等笔记 2.支持从word或者ie复制内容到当前笔记上，并保持原来格式不变 3.和ie整合，可以把选择的文本，图片或者整个网页加入到笔记本中 4.笔记可以加密，程序采用通用加密算法，系统不保存密码，保证笔记安全性 5.可以从文件夹中导入笔记及导出笔记，支持文件格式普通文本(txt),丰富文本(rtf),网页(htm) 6.支持笔记标题，索引，全文搜索 7.支持把剪贴板数据快捷粘贴新建笔记及屏幕快捷截取功能 8.同时支持多个笔记数据文件，快速切换笔记数据文件 9.新加笔记数据文件根据密码访问功能，保证整个笔记数据的安全 10.新加为笔记增加附件功能，使保持原文件格式的前提下，可以使保密文件更安全存放 最新更新(具体内容请参照软件帮助): 1.支持把剪贴板数据快捷粘贴新建笔记及屏幕快捷截取功能 2.同时支持多个笔记数据文件，快速切换笔记数据文件 3.新加笔记数据文件根据密码访问功能，保证整个笔记数据的安全 4.新加为笔记增加附件功能，使保持原文件格式的前提下，可以使保密文件更安全存放！

在字两边加<h1></h1>～<h6></h6>

<font size:1或2货3等等></font>

或者直接再两边加<B></B>这个是单纯加粗的

以前学的忘差不多了

---