前端面试题（一）

（1） 谈谈你对Web标准的理解。
WEB标准不是某一个标准，而是一系列标准的组合。
网页主要由三部分组成；
1>结构（Structure）结构化标准语言包括XHTML和XML
2>表现（Presentation）表现保准语言主要包括css
3>行为（Behavior）行为标准主要包括对象模型（如 W3C DOM），ECMAScript并且要求这三部分分离。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制定的标准，比如ECMA（European Computer Manufactures Associatio ）的ECMAScript标准。
以上3点相互分离有哪些优点呢？
（1）易于维护：只 需要更改css文件，就可以改变整站的样式
（2）页面相应快：HTML文档体积变小，响应的时间短
（3）可访问性：语义化的HTML（结构和表现相互分离的HTML）编写的网页文件，更加容易被屏幕阅读器识别。
（4）设备的兼容性：不同的样式表可以让网页在不同的设备上呈现不同的样式
（5）搜索引擎：语义化的HTML能更容易被搜索引擎解析，，提升排名

---

（2） 浏览器标准模式和怪异模式之间的区别是什么？
总的来说就是盒子模型 渲染模式的不同
盒模型
在怪异模式下，盒模型为IE盒模型
height =border-top+padding-top+content+padding-bottom+border-bottom；
width=border-left+padding-left+content+padding-right+border-right
而标准的盒模型
height=content;
width=content;
图片元素的垂直对齐方式
对于inline元素和table-cell元素，标准模式下vertical-align属性默认取值为baseline，在怪异模式下，table单元格中的图片的vertical-align属性的默认值为bottom，因此在图片的底部会有像素的空间
<table>元素中的字体
css中，对于font的属性都是可以继承的，怪异模式下，对于table元素，字体的某些元素不会从body等其他封装元素中继承得到，特别是font-size属性
内联元素的尺寸
标准模式下，non-replace inline元素无法自定义大小，怪异模式下，定义这些元素的width ，height属性可以影响这些元素显示 的尺寸。
元素的百分比高度
在css中对于元素的百分比高度的规定如下：百分比为元素 包含块的高度，不可以为负值，如果包含块的高度没有显示的给出，该值等同于auto，所以百分比的高度必须在元素有高度声明的情况下使用。
当一个元素使用百分比高度 的时候，标准模式下，高度取决于内容的变化，怪异模式下，百分比高度被正确的使用。
元素溢出的处理
标准模式下，overflow取默认值visible，在怪异模式下，该溢出会被当作扩展box来对待，即元素的大小由其内容决定，溢出不会裁剪，元素框自动的调整，包含溢出内容。

---

（3）<img>标签上的title与alt属性的区别是什么?
alt:当图片不显示的时候用文字替代
title：为该属性提供信息

---

（4）：你如何对网站的文件和资源进行优化？
1> 尽可能减少http请求的次数，将css,js图片各自合并
2> 将css放在页面的最上面
3> 将js放在页面的最下面
4>避免在css中使用表达式
5>将css,js都放在外部文件中
6> 减少DNS查询
7>最小化css,js减少文件的体积
8>避免重定向
9>移除重复的脚本
10>配置实体的标签ETag
11>使用AJAX缓存，让网站内容分批加载，局部更新
12> 使用CDN托管，降低通信的距离
13>添加Expire/Cache-Control头
14>启用Gzip压缩文件
详情请看：http://blog.csdn.net/carrie_zzz/article/details/78824289

---

（5）：什么是语义化的HTML？
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅 的代码的同时让浏览器的爬虫和及其很好的解析（直观的认识标签）

---

（6）：超级链接有哪些常见的表现形式？
普通超链接，语法：<a href="" target="">文本</a>
下载链接，即目标文档为下载资源，语法如：<a href="DAY02.zip”>下载</a>
电子邮件链接，用于链接到email,语法如下：<a href="mailto:[e-mail]">联系我们</a>
空连接，用于返回页面的顶部，语法如下：<a href="#">...</a>
链接到js以实现特定的功能语法如下：<a href ="javascript :．．．＂＞ＪＳ功能＜／ａ＞

---

（７）：举例常用的结构　标记，并描述其作用
结构标记专门用于标识页面的不同结构，相对于使用<div> 元素而言，可以实现语义化的标签。 常用的结构标记有：
<header> 元素：用于定义文档的页眉；
<nav> 元素：用于定义页面的导航链接部分；
<section> 元素：用于定义文档中的节，表示文档中的一个具体组 成部分；
<article> 元素：常用于定义独立于文档的其他部分的内容；
<footer> 元素：常用于定义某区域的脚注信息；
<aside> 元素：常用于定义页面的一些额外组成部分，如广告栏、 侧边栏和相关引用信息等。

---

（８）：使用 元素显示文本与使用其他文本标记显示文本有什么同？

<label> 元素的直观效果是直接显示标记之间的文本，而且不会为文本呈现任何特殊效果。但是，它和其他文本标记所不同的是，它为鼠标用户改进了用户体验性。 这是因为，<label> 元素可以附带一个for属性，只要将该属性的值设置为表单中任何一个控件的id属性的值，则当用户点击该标签（文本）时，浏览器就会自动将焦点转到和标签相关的表单控件上。即：如果在<label>元素内点击文本，就会触发此控件。

---

（９）：锚点的作用是什么？如何创建锚点？
锚点是文档中某行的一个记号，类似于书签，用于链接到文档中的某个位置。当定义了锚点后，我们可以创建直接跳至该锚点（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。 在使用<a> 元素创建锚点时，需要使用name 属性为其命名，代码如下所示： <a name=”anchorname1”>锚点一</a> 然后就可以创建链接，直接跳转到锚点，代码如下所示： <a href=”#anchorname1”>回到锚点一</a>

---

（１０）：你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?
Trident：IE浏览器；
Gecko：Mozilla浏览器，比如Firefox；
Webkit：Safari浏览器，也是Chrome浏览器的内核原型；
Blink：Chrome浏览器，Opera浏览器。

---

（11）：写出几种IE6 BUG的解决方法
1>双边距BUG float引起的 使用display
2>像素问题 使用float引起的 使用dislpay:inline -3px
3>超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
4>Ie z-index问题 给父级添加position:relative
5.Png 透明 使用js代码 改
6.Min-height 最小高度 ！Important 解决’
7.select 在ie6下遮盖 使用iframe嵌套
8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用ov er:hidden,zoom:0.08 line-height:1px）

---

（12）：Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
1><!DOCTYPE> 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器， 用什么文档类型 规范来解析这个文档。
2>严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
3>在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
4>DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现

---

（13）：行内元素有哪些？块级元素有哪些？ 空(void)元素有那些
1>CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值， 比如div默认display属性值为“block”，成为“块级”元素； span默认display属性值为“inline”，是“行内”元素。
2>行内元素有：a b span img input select strong（强调的语气） 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
3>知名的空元素： <br> <hr> <img> <input> <link> <meta> 鲜为人知的是： <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

---

（14）link 和@import 的区别是？
1>link是XHTML标签除了加载CSS外还可以定义RSS等其他事物；@import属于css范畴，只能加载CSS
2> link引用css时，在页面载入时同时加载；@import需要页面网页完全载入以后加载
3>link是XHTML标签，无兼容性的问题；@import是在css2.1提出的，低版本的浏览器是不支持的
4>link支持使用javascript控制DOM去改变样式；而@import不支持

---

（15）：xhtml和html有什么区别
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。 标签名必须用小写字母。
XHTML 文档必须拥有根元素

---

（16）：html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
1>绘画 canvas
2> 用于媒介回放的 video 和 audio 元素
3>本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失,sessionStorage 的数据在浏览器关闭后自动删除
4>语意化更好的内容元素，比如 article、footer、header、nav、section
5> 新的技术webworker, websockt, Geolocation
移除的元素
纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；

---

（17）：HTML5 新的 DocType 和 Charset 是什么？

 <！DOCTYPE html> <meta charset=”UTF-8”>

---

（18）：除了音频和视频，HTML5 还支持其他什么新的媒体元素
< embed> 作为对外部应对容器
<track>为媒介规定外部文本轨道
<source>

---

（19）：HTML5 有哪些不同类型的存储，区别是什么？
HTML5 能够本地存储数据，在之前都是使用 cookies 使用的。HTML5 提供了下面两种本地存储方案：
localStorage 用于持久化的本地存储，数据永远不会过期，关闭浏览器也不会丢失。 sessionStorage 同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储

---

（20）：HTML5 标准提供了哪些新的 API？
Media api
History api