HTML
Hyper Text Markup Language 超文本标记语言
1.html5为什么只需要写<! DOCTYPE HTML>
答:这是w3c制定的规则,是文档类型声明,语义化说是告诉浏览器和其他开发者,这个文档使用的是html5标准。
2.html5新特性有哪些
答:header、footer、aside、nav、video、audio、canvas、localStorage、sessionStorage、cookie、output、datalist、keygen、data、time、email、url、search···
3.XHTML和HTML有什么区别
答:XHTML:
1)所有的标记都必须有一个相应的结束标记;
2)所有标签的元素和属性的名字都必须使用小写;
3)所有的XHTML标记都必须合理嵌套;
4)所有的属性都必须用引号""括起来;
5)XHTML文档必须拥有根元素。
4.什么是渐进式渲染
答:指打开页面先加载首页显示内容;,之后再随着时间或者滚动页面进行后面的加载。
5.前端页面有哪三层构成,分别是什么?作用是什么?
结构标准:制作网页按照html标准结构写网页;
表现标准:用来美化网页CSS;
行为标准:用来实现网页中用户的动作处理JavaScript。
6.浏览器的内核有哪些
答:
Trident(IE内核):IE、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等;
Gecko(firefox):火狐浏览器
webkit(Safari):Apple
Blink:谷歌浏览器
7.什么是语义化的HTML
答:就是写出的HTML代码符合内容的结构,选择合适的标签,能够便于开发者阅读和写出更优雅的代码,比如页面结构写顶部用header标签,导航有nav标签等,同时也让浏览器的爬虫和机器更好的解析。
实体字符
CSS
Cascading Style Sheets 层叠样式表
特性
层叠性、继承性、优先级
块级元素
特点:块级独占一行;可以设置宽高;如果没设置宽度,那么其宽度等于父元素的宽度。
比如:div,p,ul,ol,dl,li,dd,h1-h6
转换:display:block;
行内元素
特点:都在一行显示,不能设置宽度和高度。
比如:span,a,font,strong,em,i
转换:display:inline
行内块元素
特点:都在一行上显示,可以设置宽度和高度。
比如:img,input
转换:display:inline-block;
选择器优先级
!important>行内样式>id选择器(#)>类选择器(class)>标签选择器>通配符选择器
CSS3新特性有哪些
答:颜色--RGBA、文字阴影--text-shadow、边框圆角--border-radius、边框阴影--box-shadow、盒子模型--box-sizing、设置背景图片的尺寸--background-size、渐变--linear-gradient、过渡动画--transition、媒体查询多栏布局、伸缩布局、transform:translate···
清除浮动的几种方式
1)父级div设置height;
2)结尾处加空div标签clear:both;
3)父级div定义伪类:after和zoom;
4)父级div定义overflow:hidden或者auto;
常见的适配方案
< meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
详细的描述一下position
1)position:absolute--绝对定位的元素,相对于其父元素进行定位。
2)position:relative--生成相对定位的元素,相对于其正常位置进行定位。
3)position:fixed--固定定位,相对于浏览器窗口进行定位。
4)position:static--默认值,没有定位,元素在正常的文档流
JavaScript
JavaScript的组成
1)ECMAScript:是JS的核心,描述了语言的基本语法和数据类型,是JS的语法规范
2)BOM:浏览器对象模型,通过BOM可以操作浏览器窗口,如:弹出框
3)DOM:文档对象模型,一套操作页面元素的API
JavaScript的输入、输出方式
输出:
1)alert() --弹出一个提示框(提示/警告文字)
2)document.write() --会将输入的内容放置到body标签内部,作为html内容
3)console.log() --代码后台
输入:
prompt('提示文字', 默认值);
对象的创建方式
1)对象字面量
var o = { name: 'jay', age: 18, sex: true, sayHi: function () { console.log(this.name); }};复制代码 2)new Object()创建对象
var person = new Object();person.name = 'Jolin';person.age = 16;person.job = 'actor';person.sayHi = function() { console.log('Hello,everyBody');}复制代码 3)工厂函数创建对象
function createPerson(name, age, job) { var person = new Object(); person.name = name; person.age = age; person.job = job; person.sayHi = function(){ console.log('Hello,everybody'); } return person;}var p1 = createPerson('Jay', 18, 'actor');复制代码 4)自定义构造函数
function Person(name, age, job){ this.name = name; //this是关键字，这里代表“自己”，“当前对象” this.age = age; this.job = job; this.sayHi = function(){ console.log('Hello,everybody'); }}var p1 = new Person('Jay', 18, 'actor');复制代码 new关键字运行机制
1)new会在内存中创建一个新的空对象
2)new会让this指向这个新的对象
3)执行构造函数 目的是给这个新对象加属性和方法
4)new会返回这个新对象
this的使用场景
1)普通函数调用时,指向全局window
2)构造函数调用时,指向实例对象
3)对象方法调用时,指向该方法的对象
4)事件绑定时,指向绑定事件的对象
5)箭头函数中this指向外部函数作用域的this
JavaScript内置对象之Math(求绝对值,取整,随机数)
Math.random() 生成一个0-1之间的随机小数
Math.floor()/Math.ceil() 向下取整/向上取整
Math.round() 取整,四舍五入
Math.abs() 绝对值
Math.max()/Math.min() 求最大值/最小值
Math.sin()/Math.cos() 正弦/余弦
Math.pow/Math.sqrt() 求指数次幂/求平方根
JavaScript内置对象之Date(处理时间和日期,基于1970年1月1日)
getTime() 返回毫秒数和valueOf()结果一样
getMilliseconds()
getSeconds() 返回0-59
getMinutes() 返回0-59
getHours() 返回0-23
getDay() 返回星期几 0代表是周日 6代表是周六
getDate() 返回当前月的第几天
getMonth() 返回月份,从0开始
getFullYear() 返回4位的年份 如 2016
JavaScript内置对象之Array
push()/pop() 加入数组的末端/删除数组的最后一项
unshift()/shift() 在数组最前面插入项/删除数组中前面项
reverse() 翻转数组
sort() 根据字符,从小到大排序
slice() 从当前数组中截取一个新的数组，不影响原来的数组，参数start从0开始,end从1开始
splice() 删除或替换当前数组的某些项目，参数start, deleteCount, options(要替换的项目)
indexOf() 索引位置
forEach() 遍历数组不返回值,返回参数
join() 把数组中的所有元素放入一个字符串
JavaScript内置对象之String
concat() 拼接字符串,等效于'+','+'更常用
slice(start,end) 从start位置开始,截取到end位置,end取不到
substring() 方法同slice
substr(start,length) 从start位置开始,截取到length个字符,如果没有length参数,则截取到最后
toUpperCase() 转换为大写
toLowerCase() 转换为小写
search() 查找,返回找到的位置
replace() 替换,注意:一次只能替换一个
split() 将字符串以指定的字符分割为数组
JavaScript中动态操作DOM的方法
createElement 创建一个元素节点
creatTextNode 创建一个文本节点
appendChild 向元素的末尾追加一个节点
inserBefore(a,b) 意思是a节点会插入b节点的前面
removeChild 删除一个子节点
cloneChild 复制节点,接收布尔值参数,true表示深复制(复制节点及其所有子节点),false表示浅复制(复制节点本身,不复制子节点)
replaceChild 替换节点
document.getElementsByTagName() 通过标签名称查找节点
document.getElementsByName() 通过元素的Name属性的值查找节点
document.getElementById() 通过元素ID查找节点
事件的三个阶段,如何阻止事件冒泡
答:目标、捕获、冒泡
event.stopPropagation
call,apply,bind有什么区别
call()和apply()的第一个参数相同,是指定的对象,这个对象是该函数的执行上下文
call()在第一个参数之后的后续所有参数就是传入该函数的值
apply()只有两个参数,第一个是对象,第二个是数组
bind()不会立即执行该函数,他的参数和call()相同
闭包函数
1.什么是闭包?
当函数执行时,首先会形成一个私有作用域,这个私有作用域保护私有变量不收外界的干扰,我们把这个体制称为闭包。闭包是指有权访问另一个函数作用域中变量的函数。
2.闭包优点:
1)保护函数内的变量安全,加强了封装性;
2)在内存中维持一个变量,方便调用上下文的局部变量;
3.闭包缺点:
1)内存消耗;
2)滥用闭包函数会造成内存泄露,不能被垃圾回收机制所回收。
递归函数
1.什么是递归函数
答:递归函数即自调用函数,在函数体内直接或者调用自己本身函数
2.递归函数的优点
答:代码更加简洁清晰,可读性更好
3.递归函数的缺点
答:大量使用递归函数,会消耗空间,造成系统卡顿,非必要时建议不要使用递归函数。