前端面试题1
在网上找了很多面试题，好记性不如烂笔头
1.HTML与XHTML的区别
(1).xhtml元素必须被正确地嵌套
错误：<p><span>this is example.</p></span>
正确：<p><span>this is example.</span></p>
(2).xhtml元素必须被关闭
错误：<p>this is example.
正确：<p>this is example.</p>
空标签也必须被关闭
错误：<br>
正确：<br/>
(3).xhtml标签名必须用小写字母
错误：<P>this is example.<P>
正确：<p>this is example.</p>
(4).xhtml文档必须拥有根元素
空标签也必须被关闭
错误：<br>
正确：<br/>
(5)所有属性都必须使用双引号
在XHTML 1.0中规定连单引号也不能使用，所以全程都得用双引号。
错误：<div style=font-size:11px>hello</div>
正确：<div style="font-size:11px">hello</div
(6).不允许使用target="_blank"
从XHTML 1.1开始全面禁止target属性，如果想要有开新窗口的功能，就必须改写为rel="external"，并搭配JavaScript实现此效果。
错误：<a href="http://blog.mukispace.com" target="_blank">MUKI space</a>
正确：<a href="http://blog.mukispace.com" rel="external">MUKI space</a>
此外:
xhtml比html更注重语义，更接近xml,xhtml废除了一些html里面的标签
2web标准之语义化标签
语义化标签就是尽量使用有相对应的结构的含义的Html的标签
尽量用有结构含义的,少用无语义的，如<span>,<div>无意义，看不出是什么东西,可是<address>一看就知道这里面的是地址,em标签一看就知道这个是强调的内容,区分于不同内容。
（2）.更有利于特殊终端的阅读(手机，个人助理等）
CSS语义化其实更多地是指HTML的语义化。 比如下面的一个代码我们这样写：
<div class="h2">这是区块标题</div>
<div class="bd">这是区块内容</div>
<div>
但是语义化的写法更能使得 robot识别网页的结构，下面是语义化的写法：
<h2>这是区块标题</h2>
<p>这是区块内容</p>
</section>
对 于robot来说，它能够识别section（区块）、h2(二级标题)、p(文字段落)，但是不能识别出div所包含的内容，因为div这个标记本身是 无语义的（必要时通过class或id属性来赋予语义，但是这是次优选择）。 而HTML5新增的article、header、footer、nav、section等标签就是丰富了HTML原生的语义标签，在很大程度上满足了 HTML编写的需要。
语义化标签的好处是:（1）更利于搜索引擎的抓取（SEO的优化）和开发人员的维护(可维护性更高，因为结构清晰,so易于阅读)。
3.CSS层叠
层叠的意思就是“继承”、“权重”、“覆盖”，通过良好的层级命名更好的实现效果，更少的代码，更多的功能
解答一：
层叠指的是样式的优先级，当产生冲突时以优先级高的为准。
（1）. 开发者样式>读者样式>浏览器样式（除非使用!important标记 ）
（2）. id选择符>（伪）类选择符>元素选择符
（3）. 权重相同时取后面定义的样式
解答二：
CSS层叠是指CSS样式在针对同一元素配置同一属性时，依据层叠规则（权重）来处理冲突，选择应用权重高的CSS选择器所指定的属性，一般也被描 述为权重高的覆盖权重低的，因此也称作层叠。每个CSS选择器都会有一个权重（行内1000，id100，class10，tag1、可以这样认为），当 两个选择器同时配置同一元素的同一属性时（比如一个设置color：red，另一个color：black），就会产生冲突，而解决冲突的方案就是CSS 选择器的权重，权重高的来覆盖权重低的。
另外，继承的属性是权重重最轻的，会被上面的四个定义方式覆盖。
解答三：
我的理解是，层叠指的是上级标签的样式会自动继承到其所有下级标签，如针对<body>设置的标签选择器所设的字体样式会自动应用到<body>下的<p>中，除非<p>重写了相关样式将其覆盖。
CSS语义化的命名是指用易于理解的名称对html标签附加的class或id命名，如对于页面上方的<div>，可将其id设为header；页面下方的<div>设为footer，可以增强CSS的可维护性。
基本上层叠的意思就是“继承”、“权重”、“覆盖”，通过良好的层级命名更好的实现效果，更少的代码，更多的功能
4.浏览器的内核分别是什么
Ie浏览器的内核Trident、Moailla的Gecko、Chrome的Blink(Webkit的分支)、Opera内核原为Presto,现在为Blink
5.javascript怎样实现继承的
通过原型和构造器
6.如何解决跨域问题
jsonp,iframe,window.name,window.postMessage,在服务器上设置代理页面
7.iframe有哪些缺点
iframe会阻塞页面的onload事件
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript
动态给iframe添加src属性值，这样可以绕开以上两个问题
8.document.write和innerHTML的区别
document.write只能重绘整个页面
innerHTML可以重绘页面一部分
9.介绍一下css的盒子模型
1.有两种，IE盒子模型、标准W3C盒子模型，IE的content部分包含了border和pading
2.盒模型:内容(content)、填充(padding)、边界(margin)、边框(border)
10.css选择器
1.id选择器(#myid)
2.类选择器(.myclassname)
3.标签选择器(div,h1,p)
4.相邻选择器(h1+p)
5.子选择器(ul>li)
6.后代选择器(li a )
7.通配符选择器(*)
8.属性选择器(a[rel="external"])
9.伪类选择器(a:hover,li:nth-child)
优先级就近原则，同权重情况下样式定义最近者为准，载入样式以最后载入的定位为准
优先级为:!important>id>class>tag
important比内联优先级高
11.css3的新特性
css3实现圆角(border-radius:8px)
阴影(box-shadow:10px)
对文字加特效(text-shadow)，线性渐变(gradient),旋转(transform)
增加了更多css选择器 多背景 rgba
12.为什么要初始化css样式
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对css初始化往往会出现浏览器之间的页面显示差异
还有初始化样式会对SEO有一定影响
最简单的初始化方法就是*{padding:0;margin:0}(不建议)
淘宝的样式初始化:
textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; }
16.JSON的理解
JSON(javascript Object Notation)是一种轻量级的数据交互格式
他是基于javascipt的一个子集。数据格式简单，易于阅读，占用宽带小
{'age':'12','':'back'}
17.行内元素有哪些？块级元素有哪些？空元素(void)有哪些
块元素(block element) HTML标签分类明细
* address - 地址
* blockquote - 块引用
* center - 居中中对齐块
* dir - 目录列表
* div - 常用块级容易，也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单 （只能用来容纳其它块元素）
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
* noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
内联元素(inline element) HTML标签分类明细
* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器，定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量
可变元素 HTML标签分类明细
* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本
行内元素:a,b,span,img,input,strong,select,label,em,button,textarea
块级元素:div,ul,li,dl,dt,dd,p,h1-h6、blockquote
空元素:br,meta,hr,link,input,img
18.src和href的区别
href是指向网络资源所在的位置，建立和当前元素(锚点)或当前文档(链接)之间的链接，用于超链接
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置，在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素后，会暂停其他资源的下载和处理，直到将该资源加载，编译，执行完成，图片和框架等元素也如此，类似于将所指向资源嵌入到当前标签内。这也是为什么将js脚本放到底部而不是头部
19.px和em的区别
px和em都是长度单位，区别是px的值是固定的，指定是多少就是多少。em的值不是固定的，并且em会继承父级元素的字体大小。浏览器的默认字体高都是16px。所以未经调整的浏览器都符合:1em=16px.那么12px=0.75em,10px=0.625em
20.优雅降级和渐进增强
渐进增强:针对低版本浏览器进行构建页面，保证最基本的功能，然后在针对高级浏览器进行效果，交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
区别是优雅降级是从复杂的现状开始的，并试图减少用户体验的供给b,渐进增强则是从一个非常基础得，能够起作用的版本开始的，并不断扩充，以适应未来环境的需要，降级意味着往回看；而渐进增强意味着朝前看，同时保证其根基处于安全地带
21.添加，移除，复制创建和查找节点
1创建新节点
createDocumentFragment()//创建一个DOm片段
createElement()//创建一个具体的元素
createTextNode()//创建一个文本节点
2添加、移除、替换、插入
appendChild()//添加
removeChild()//移除
replaceChild()//替换
insertBefore()//插入
3查找
getElementsByTagName()//通过标签名称
getElementsByName()//通过元素name属性的值
getElementById()//通过元素Id,唯一性
22.HTTP事务的过程？
基本流程:
1.域名解析
2.发起TCP的3次握手
3.建立TCP链接后发起Http请求
4.服务器端响应Http请求，浏览器得到Html代码
5.浏览器解析Html代码,并请求Html代码中的资源
6.浏览器对页面进行渲染呈现给用户
23.<em>和<strong>标签的区别
<em>表示强调，<strong>表示更强烈的强调，在浏览器中<em>默认用斜体表示，<strong>用粗体表示
24.javascript的数据类型
基本数据类型:String,boolean,Number,Undefined,Null
引用数据类型:Object(Array,Date,RegExp,Function)
25.JS的事件流模型
事件冒泡:事件开始由最具体的元素接受，然后逐级向上传播
事件捕捉：事件由最不具体的节点先接受，然后逐级向下，一直到最具体的
DOM事件流:三个阶段：事件捕捉，目标阶段，事件冒泡
26.截取字符串abcdefg的efg
alert('abcdefg'.substring(4));
27.文档类型的作用是？你知道有多少张文档类型
影响浏览器对html代码的编译渲染
html2.0
html5
xhtml
28.CSS position 属性值：
- absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
- relative：生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
- fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。
- static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
- inherit：规定应该从父元素继承 position 属性的值。
