HTML5初学者笔记
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5初学者笔记相关的知识，希望对你有一定的参考价值。
参考技术A 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
python初学笔记
注释：
任何时候，我们都可以给程序加上注释。注释是用来说明代码的，给自己或别人看，而程序运行的时候，Python解释器会直接忽略掉注释，所以，有没有注释不影响程序的执行结果，但是影响到别人能不能看懂你的代码。
Python的注释以 # 开头，后面的文字直到行尾都算注释
# 这一行全部都是注释...
print ‘hello‘ # 这也是注释
注释还有一个巧妙的用途，就是一些代码我们不想运行，但又不想删除，就可以用注释暂时屏蔽掉：
# 暂时不想运行下面一行代码:
# print ‘hello, python.‘
什么是变量
在Python中，变量的概念基本上和初中代数的方程变量是一致的。
例如，对于方程式 y=x*x ，x就是变量。当x=2时，计算结果是4，当x=5时，计算结果是25。
只是在计算机程序中，变量不仅可以是数字，还可以是任意数据类型。
在Python程序中，变量是用一个变量名表示，变量名必须是大小写英文、数字和下划线（_）的组合，且不能用数字开头，比如：
a = 1
变量a是一个整数。
t_007 = ‘T007‘
变量t_007是一个字符串。
在Python中，等号=是赋值语句，可以把任意数据类型赋值给变量，同一个变量可以反复赋值，而且可以是不同类型的变量，例如：
a = 123 # a是整数
print a
a = ‘imooc‘ # a变为字符串
print a
这种变量本身类型不固定的语言称之为动态语言，与之对应的是静态语言。
静态语言在定义变量时必须指定变量类型，如果赋值的时候类型不匹配，就会报错。例如Java是静态语言，赋值语句如下（// 表示注释）：
int a = 123; // a是整数类型变量
a = "mooc"; // 错误：不能把字符串赋给整型变量
和静态语言相比，动态语言更灵活，就是这个原因。
请不要把赋值语句的等号等同于数学的等号。比如下面的代码：
x = 10
x = x + 2
如果从数学上理解x = x + 2那无论如何是不成立的，在程序中，赋值语句先计算右侧的表达式x + 2，得到结果12，再赋给变量x。由于x之前的值是10，重新赋值后，x的值变成12。
最后，理解变量在计算机内存中的表示也非常重要。当我们写：a = ‘ABC‘时，Python解释器干了两件事情：
1. 在内存中创建了一个‘ABC‘的字符串；
2. 在内存中创建了一个名为a的变量，并把它指向‘ABC‘。
也可以把一个变量a赋值给另一个变量b，这个操作实际上是把变量b指向变量a所指向的数据，例如下面的代码：
a = ‘ABC‘
b = a
a = ‘XYZ‘
print b
最后一行打印出变量b的内容到底是‘ABC‘呢还是‘XYZ‘？如果从数学意义上理解，就会错误地得出b和a相同，也应该是‘XYZ‘，但实际上b的值是‘ABC‘，让我们一行一行地执行代码，就可以看到到底发生了什么事：
执行a = ‘ABC‘，解释器创建了字符串 ‘ABC‘和变量 a，并把a指向 ‘ABC‘：
执行b = a，解释器创建了变量 b，并把b指向 a 指向的字符串‘ABC‘：
执行a = ‘XYZ‘，解释器创建了字符串‘XYZ‘，并把a的指向改为‘XYZ‘，但b并没有更改：
所以，最后打印变量b的结果自然是‘ABC‘了。
定义字符串
如果字符串本身包含‘怎么办？比如我们要表示字符串 I‘m OK ，这时，可以用" "括起来表示：
"I‘m OK"
类似的，如果字符串包含"，我们就可以用‘ ‘括起来表示：
‘Learn "Python" in imooc‘
如果字符串既包含‘又包含"怎么办？
这个时候，就需要对字符串的某些特殊字符进行“转义”，Python字符串用\进行转义。
要表示字符串 Bob said "I‘m OK".
由于 ‘ 和 " 会引起歧义，因此，我们在它前面插入一个\表示这是一个普通字符，不代表字符串的起始，因此，这个字符串又可以表示为
‘Bob said \"I\‘m OK\".‘
注意：转义字符 \ 不计入字符串的内容中。
常用的转义字符还有：
\n 表示换行
\t 表示一个制表符
\\ 表示 \ 字符本身
raw字符串与多行字符串
如果一个字符串包含很多需要转义的字符，对每一个字符都进行转义会很麻烦。为了避免这种情况，我们可以在字符串前面加个前缀 r ，表示这是一个 raw 字符串，里面的字符就不需要转义了。例如：
r‘\(~_~)/ \(~_~)/‘
但是r‘...‘表示法不能表示多行字符串，也不能表示包含‘和 "的字符串（为什么？）
如果要表示多行字符串，可以用‘‘‘...‘‘‘表示：
‘‘‘Line 1
Line 2
Line 3‘‘‘
上面这个字符串的表示方法和下面的是完全一样的：
‘Line 1\nLine 2\nLine 3‘
还可以在多行字符串前面添加 r ，把这个多行字符串也变成一个raw字符串：
r‘‘‘Python is created by "Guido".
It is free and easy to learn.
Let‘s start learn Python in imooc!‘‘‘
以上是关于HTML5初学者笔记的主要内容，如果未能解决你的问题，请参考以下文章