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：
网友评论