浏览器页面有哪三层构成,分别是什么,作用是什么?
构成: 结构层、表示层、行为层
分别是: HTML CSS JavaScript
作用: HTML实现页面结构;CSS完成页面的表现与风格;JavaScript实现一些客户端的功能与业务。
什么是语义化的HTML?
- 直观的认识标签,对于搜索引擎的抓取有好处,用正确的标签做正确的事情。
- html语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析。
- 在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的。
- 搜素引擎的爬虫依赖标签来确定上下文和各个关键字的权重,利于SEO。
- 使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。
CSS居中(包括水平居中和垂直居中)
水平居中设置
内联元素居中
行内元素
设置 text-align:center;
Flex布局
设置display:flex; justify-content: center;(灵活运用,支持Chrome,Firefox,IE9+)设置dispaly:table-cell 再设置 vertical-align:middle;
块级元素居中
- 定宽块状元素 设置左右margin:auto;
- 不定宽块状元素
- 在元素外加入table标签(完整的,包括table,tbody,tr,td),该元素写在td内,然后设置
margin: auto; - 给该元素设置display: inline;
- 父元素设置position:relative和left: 50%, 子元素设置position:relative和left: 50%
- 在元素外加入table标签(完整的,包括table,tbody,tr,td),该元素写在td内,然后设置
垂直居中设置
- 使用position:absolute(fixed),设置left,top,marign-left,margin-top的属性;
- 使用position:fixed(absolute)属性, margin:auto这个不要忘记;
- 使用display: table-cell属性使内容垂直居中;
- 使用css3的新属性transfrom:translate(x,y)属性;
- 使用:before元素
CSS3有哪些新特性?
CSS3实现圆角(border-radius: 8px),阴影(box-shadow: 10px),对文字加特效(text-shadow),
线性渐变(gradient),变换(transform)【rotate/旋转, scale/缩放, translate/位移, skew/倾斜】
增加了更多的CSS选择器、多背景、 rgba。
事件委托是什么?
让利用时间冒泡的原理,让自己的所触发的时间,让他的父元素代替执行!
添加、删除、替换、插入到某个接点的方法
obj.appendChild()
obj.removeChild()
obj.replaceChild()
obj.insertBefore()
什么叫优雅降级和渐进增强?
优雅降级
Web站点在所有新式浏览器中都能正常工作,如果用户使用额是老式浏览器,则代码会检查以确认它们
是否能正常工作。由于IE独特的盒模型布局问题,针对不同版本的IE的hack实践过优雅降级了,为那些
无法支持功能的浏览器增加候选方案,使之在旧式浏览器上以某种形式降级体验却不至于完全失效。渐进增强
从被所有浏览器支持的基本功能开始,逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础
浏览器的额外样式和功能。当浏览器支持时,它们会自动地呈现出来并发挥作用。
JavaScript原型,原型链?有什么特点?
- 原型对象也是普通的对象,是对象一个自带隐式的proto属性,原型也有可能有自己的原型,如果一个原型
对象的原型不为null的话,我们就称之为原型链 - 原型链是由一些用来继承和共享属性的对象组成的(有限的)对象链
如何阻止事件冒泡和默认事件
阻止冒泡
现代浏览器:e.stopPropagation();
低版本浏览器: e.cancelBubble = true;
阻止默认事件
现代浏览器: e.preventDefault();
低版本浏览器:return false;
IOS苹果和微信中音频和视频实现自动播放的方法
// 一般情况下,这样就可以自动播放了,但是一些奇葩IPone机不可以
document.getElementById('audio').play();
// 必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效
document.addEventListener('WeixinJSBridgeReady',funciton () {
document.getElementById('audio').play();
document.getElementById('video').play();
}, false);