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
HTML介绍分为3部分，第一部分是HTML简介及历史，第二部分是HTML元素，第三部分是实战及学习笔记。
以下是第一部分：
参考资料：
w3.org, html 文档
HTML，即Hypertext markup language是万维网的核心标记语言，最初HTML被设计作为一门语言，用于语言描述科学文档，后续则被拓展用于描述一系列不同类型的文档，甚至应用。
1990-1995，迅速发展，从CERN到IETF(国际互联网工作组)接管.
1995-1997, 随着W3C建立，又变成由W3C主导，期间推出了HTML 3.2 和HTML 4.01
1998-2000，W3C停止HTML版本推进，开始研究XHTML 1.0（XML-based HTML 4.01), 其没有添加任何新特性，反而更加地长篇累牍，更严格的检测标准等。后续发布了XHTML 2.0，其与XHTML 1.0，HTTP 4.01不兼容。
期间直到2003，HTML没有版本的变化，但期间出现了 DOM Level 1 &2，提高了客户端的使用体验以及功能拓展。
2003，XForms(定位于下一代Web form)发布，其证明了很多它所拥有的新特性能拓展到HTML 4.01，Mozilla及Opera借此于2004年向W3C提出了更新HTML版本的提议，但W3C选择继续发展XML-based作为替代HTML。
于是Mozilla, Opera联合Apple组成新实体WHATWG，发展HTML 的Living document，对HTML继续进行拓展及新特性添加，直到后期W3C才转回HTML标准的制定，多谢WHATWG，才有了我们今天基本采用的HTML 5。
W3C与WHATWG于2008年一起发布了第一份草案，2014年正式发布HTML 5。
*MDN Web Docs 简介：Mozilla Developer Network的后续，致力于Web标准文档的发展以及Web开发资料分享，包括HTML5, JavaScript, CSS, Web APIs, Node.js以及网络扩展等
*HTML/XML/DOM等的语法上的一些区别：
namespaces不能用在HTML语法中，但可用作DOM及XHTML里；
<noscript>可被用在HTML里，但不能用在DOM,XHTML里，
-->仅仅能用在DOM里。
*Text: in the context of content models, means either nothing, or Text nodes. Text is sometimes used as a content model on its own, but is also phrasing content, and can be inter-element white space
Text nodes and attribute values must consist of Unicode characters
*<html>end tag, <head>start tag, end tag, <body>start tag, end tag等在满足一定条件情况下可以省略，更多可以省略的可以参考 这里 。
*块级及内联元素
块级元素会以可见的块呈现在页面上，其显示会与其前后的content有一行的间距，常用于呈现结构化的elements，如paragraph, list, nav, footer等，块级元素不能被内嵌在内联元素之中，块通常只出现在<body>里。
内联元素是包含在块里的，仅仅只包含一小部分内容，常呈现在段落里，如<a>, <em>, <strong>等。其存在将不会导致新的一行的产生。
注意可以使用css display 属性，设置inline为block。
*HTML parsing model
*<audio>, <canvas>, <embed>, <iframe>, 及MathTL, SVG里的元素为embeded元素
*元素是大小写不敏感的
直观点讲就是用外边距把box撑成居中。
margin也可以用顺时针的方式以一个语句定义四个外边距的大小
margin有一个auto属性用来设置浏览器边距，只能用在宽度上，不能用在高度上。
可以看到现在box实现了水平居中。
margin和padding一样可以简写。
margin负值可以让边框与浏览器合并。
margin为0的时候，box与浏览器还是有一段距离的，并没有完全贴边。
而想要贴边的话，可以给body单独一个标签选择器，令其margin=0,再让box类的margin-left=0.
以margin-left为例，给正值，box就向右边走，而给负值的话，box就向左侧走。我们管正值叫正方向，负值叫反方向。
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
一个小练习 ：制作下面的菜单效果：
效果：
发现中间的线似乎粗了点，这个问题是上一个格子的底边和下一个格子的顶边重合导致的。
这时候就要应用到margin的负值了，在选择器中加入下面这条语句
外边距合并指的是，当两个垂直外边距相遇时，长的外边距会将短的外边距替换。
一个例子：
建立两个盒子之后，我们想设置margin好让两个盒子分开。
我们想让两个盒子分开的更大一点，于是调整第二个盒子的顶部外边距
解决方法如下：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）