HTML+CSS+js常见知识点

时间:2023-03-08 15:15:41
HTML+CSS+js常见知识点

一、HTML、CSS常见知识点

1.垂直居中盒子

/* 方法一 */
html, body { width: 100%; height: 100%; padding: 0; margin: 0; }
.box { width: 300px; height: 300px; background: yellowgreen; margin: 0 auto; position: relative; top: 50%; margin-top: -150px; }
/* 方法二 */
html, body { width: 100%; height: 100%; padding: 0; margin: 0; }
.box { width: 300px; height: 300px; background: yellowgreen; margin: 0 auto; position: relative; top: 50%; transform: translateY(-50%); }
/* 方法三 */
html, body { width: 100%; height: 100%; padding: 0; margin: 0; }
body { display: flex; align-items: center; justify-content: center; }
.box { width: 300px; height: 300px; background: yellowgreen; }

2、浏览器间的hack方法

ie6--------------------->-
ie6/7------------------->+,=,~,!,@,#,$,%,^,&,*,`
ie6\ie7\ie8\ie9\ie10---->\9
ie9\ie\10--------------->\9\0
firefox----------------->-moz-
chrome,360------------------>-webkit-

3、WEB语义化有利于SEO优化和快速查找

H5新特性:

(1)用于绘画canvas元素;

(2)用于媒介回放的video和audio;

(3)本地离线存储localStorage长期存储数据,浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除;

(4)语义化更好的元素,如:header、article、section、footer、nav\aside(定义侧边栏)\details(描述文档某个部分的细节) \dialog(定义对话框)\figure(规定独立的流内容)\progress(定义任何类型的任务的进度);

(5)表单控件,如:datetime(显示完整日期)\date(显示日期)\time\email\url(网页地址)\search(谷歌下输入文字后,会多出一个关闭X)\range\tel\number\color.

CSS3新功能:圆角、多背景、动画与渐变、box阴影、背景透明等。

二、JS常见知识点

1、同源策略(同协议、同域名、同端口):JS重要的安全度量标准,为了防止某个文档或脚本从多个不同的源装载。

2、作用域链:保证执行环境里有权访问的变量和函数是有序的,作用域链的变量“只能”向*问,变量访问到window即终止。

3、原型链:通过函数对象或普通对象自带的_proto_属性进行访问。

4、闭包:指一个变量在他自身作用域外被使用了,就叫发生了闭包。

例子:
var fun(n,o){
consle.log(o);
return{
fun:function(m){
return fun(m,n);
}
}
}