1.对web的标准以及w3c的理解与区别。
web标准简单来说可以分为结构、表现和行为。其中结构主要是有HTML标签组成。
或许通俗点说,在页面body里面我们写入的标签都是为了页面的结构。
表现即指css样式表,通过css可以是页面的结构标签更具美感。
行为是指页面和用户具有一定的交互,同时页面结构或者表现发生变化,主要是有js组成。
2.xhtml和html有什么区别
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。(空标签必须使用结束标签)
标签名必须用小写字母。(标签名和属性对大小写敏感)
XHTML 文档必须拥有根元素
3.doctype?严格模式与混杂模式如何触发这两种模式,区别他们有什么意义?有什么优点?
** doctype文档声明。**
<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。(重点:告诉浏览器按照何种规范解析页面)
IE下如不书写文档声明会使用怪异模式解析网页导致一系列CSS兼容性问题。
严格模式下:页面排版及JS解析是以该浏览器支持的最高标准来执行
混杂模式:不严格按照标准执行,主要用来兼容旧的浏览器,向后兼容
意义:决定浏览器如何渲染网站(浏览器使用那种规范去解析网页)
触发:浏览器根据doctype是否存在和使用的是那种dtd来决定
** 严格模式**
user strict
为什么用严格模式:
消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;
消除代码运行的一些不安全之处,保证代码运行的安全;
提高编译器效率,增加运行速度;
为未来新版本的Javascript做好铺垫。
"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向,包括IE 10在内的主流浏览器,都已经支持它,许多大项目已经开始全面拥抱它。
另一方面,同样的代码,在"严格模式"中,可能会有不一样的运行结果;一些在"正常模式"下可以运行的语句,在"严格模式"下将不能运行。
语法与行为改变:
禁止this关键字指向全局对象
全局变量显式声明
禁止删除变量
对象不能有重名的属性
函数不能有重名的参数
4.行内元素有哪些?块级元素有哪些?CSS的盒模型?
行内元素: a b br i span input select
块级元素:div p h1 h2 h3 h4 form ul
Css盒模型:内容,border ,margin,padding
5.CSS引入的方式有哪些?link和@import的区别是什么?
内嵌,
导入外部样式@import,
链入外部样式<link>,
内部样式<head>
1)link属于XHTML标签,除了加载CSS外,还能用于定义RSS, 定义rel连接属性等作用; 而@import是CSS提供的,只能用于加载CSS;
2)页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;
3)import是CSS2.1 提出的,只在IE5以上才能被识别,而link是XHTML标签,无兼容问题;
6.CSS选择器有哪些?哪些属性可以继承,优先级算法如何计算?内联和!important的区别是什么?
class 选择器 .inner
id 选择器 #demo
标签 选择器 p
后代选择器 p a
伪类选择器 a:hover
伪元素选择器 a:after
属性选择器 input[type=checkbox]
优先级就近原则,同权重情况下样式定义最近者为准;
载入样式以最后载入的定位为准;
优先级为:
!important > id > class > tag
important比内联优先级高(style)
7.前端页面有哪三层构成,分别是什么?作用是什么?
结构层 Html 由html或XHTML的标记语言负责创建。标签,就是那些出现在尖括号里的单词,对网页内容的语义含义做出了描述,但这些标签不包含任何关于如何显示有关内容的信息。例如,p标签表达了这样一种语义:“这是一个文本段”。
表示层 CSS 由CSS负责创建。
行为层 js 负责回答“内容应该如何对事件做出反应”这一问题。这是JavaScript语言和DOM主宰的领域。
8.css基本语句的构成是?
HTML标记、具有上下文关系的HTML标记、用户定义的类、用户定义的ID、虚类、虚元素。
9.你做的页面在哪些浏览器测试过?这些浏览器的内核分别是什么?
IE浏览器的内核Trident、
Mozilla的Gecko、
google的WebKit、
Opera内核Presto;
10.浏览器兼容性的解决方法
1.在有的浏览器中,默认字体大小为12px,所以在设字体大小的时候,最小设为12px,如果在做的过程中,发现字体小于12,可直接作为图片使用
2.a标签对里不能嵌套a标签对
3.若给a标签内的内容样式加上样式,需要设置display:block;(在IE中如果设置宽高会自动变成块,在FF中则不会),但如果设置了float属性,就不需要设置display:block。
4.ul,ol在FF默认情况下,有list-style-type样式和padding值,dl在IE和FF默认情况下,有padding值,所以应该事先声明ul,li,ol,dl,dd,dd{margin:0;padding:0}。
5.作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应
6.关于手形光标. cursor: pointer. 而hand 只适用于 IE.
7.css布局中的居中问题:在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“margin-right: auto;margin-left: auto; ”需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个div,只要在每个拆出的div里定义margin-right: auto;margin-left: auto; 就可以了。
8.浮动ie产生的双倍距离 #box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离,这时需要设置display:inline; //使浮动忽略}
11.标签上title与alt属性的区别是什么?
Alt 当图片不显示是 用文字代表。
Title 为该属性提供信息
12.描述css reset的作用和用途?
Reset重置浏览器的css默认属性 浏览器的品种不同,样式不同,然后重置,让他们统一
13.解释css sprites,如何使用。
Css 精灵 把一堆小的图片整合到一张大的图片上,减轻服务器对图片的请求数量
好处:
1、减少了图片个数,这样减小了对服务器的请求。
2、整个图片的变小了,使得图片下载速度更快。
3、不用使用javascript代码,而是使用纯CSS就可以
14.浏览器标准模式和怪异模式之间的区别分别是什么?
所谓的标准模式是指,浏览器按W3C标准解析执行代码;
怪异模式则是使用浏览器自己的方式解析执行代码,因为不同浏览器解析执行的方式不一样,所以我们称之为怪异模式
15.你如何对网站文件和资源进行优化?期待的解决方案包括:
1. 确保网站信息描述全站统一
2. 清楚网站内部无效重复的信息
3. 让用户能迅速准确的在网站查看相关内容
4. 优化内部结构便于搜索引擎的理解和收录
文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用
16.什么是语义化的HTML?
1.语义化有利于SEO,有利于搜索引擎爬虫更好的理解我们的网页,从而获取更多的有效信息,提升网页的权重。
2.在没有CSS的时候能够清晰的看出网页的结构,增强可读性。
3.便于团队开发和维护,语义化的HTML可以让开发者更容易的看明白,从而提高团队的效率和协调能力。
4.支持多终端设备的浏览器渲染。
17.清除浮动的几种方式,各自的优缺点?
1)父级div定义height。
原理:给父级DIV定义固定高度(height),能解决父级DIV 无法获取高度得问题。
优点:代码简洁
缺点:高度被固定死了,是适合内容固定不变的模块。(不推荐使用)
2)a.结尾处加空div标签clear:both b.结尾处加br标签clear:both。
原理:添加一对空的DIV标签,利用css的clear:both属性清除浮动,让父级DIV能够获取高度。
优点:浏览器支持好
缺点:多出了很多空的DIV标签,如果页面中浮动模块多的话,就会出现很多的空置DIV了,这样感觉视乎不是太令人满意。(不推荐使用)
3)父级div定义伪类:after和zoom
原理:IE8以上和非IE浏览器才支持:after zoom(IE转有属性)可解决ie6,ie7浮动问题
优点:结构和语义化完全正确,代码量也适中,可重复利用率(建议定义公共类)
缺点:代码不是非常简洁(极力推荐使用)
4)父级div定义overflow:hidden。
原理:通过设置父元素overflow值设置为hidden;在IE6中还需要触发 hasLayout(zoom:1)
优点:代码简介,不存在结构和语义化问题
缺点:无法显示需要溢出的元素(亦不太推荐使用)
5)父级div定义overflow:auto。
原理:原理同方法6,在IE6中还需要触发 hasLayout(zoom:1)
优点:代码简介,不存在结构和语义化问题
缺点:firefox早期版本会无故产生focus,多个嵌套后,firefox某些情况会造成内容全选;IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等。
6)父级div也浮动,需要定义宽度。
这样做可以初步解决当前的浮动问题。但是也让父级浮动起来了,又会产生新的浮动问题。 不推荐使用
7)父级div定义display:table。
原理:将div属性强制变成表格
优点:不解
缺点:会产生新的未知问题。(不推荐使用)
比较好的是第3种方式,好多网站都这么用
18.javascript的typeof返回那些数据类型?
返回数据类型
undefined
string
boolean
number
symbol(ES6)
Object
Function
19.列举3种强制类型转换和2种隐试类型转换?
3种强制类型转换
Number(参数)把任何类型转换成数值类型
parseInt(参数1,参数2)将字符串转换成整数
parseFloat()将字符串转换成浮点数字
string(参数):可以将任何类型转换成字符串
Boolean()可以将任何类型的值转换成布尔值
2种隐试类型转换
加法运算符+是双目运算符,只要其中一个是String类型,表达式的值便是一个String。
对于其他的四则运算,只有其中一个是Number类型,表达式的值便是一个Number。
对于非法字符的情况通常会返回NaN: