前端开发面试题集锦（一）
你如何理解HTML结构的语意化?
1、去掉或样式丢失的时候能让页面呈现清晰的结构；
2.屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页；
3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）；
4.搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重；
5.你的页面是否对爬虫容易理解非常重要，因为爬虫很大程度上会忽略用于表现的标记，而只注重语义标记；
6、便于团队开发和维护。
Doctype文档声明的严格模式和混杂模式，如何触发这两种模式，区分它们有何意义?
1、如何触发两种模式：
加入xml头部声明，可以触发IE浏览器的Quirks mode，触发之后，浏览器解析方式就和IE5.5一样，拥有IE5.5一样的bug和其他问题，行为（Javascript）也是如此。
2、IE6的触发：在XHTML的DOCTYPE前加入XML声明，
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML    1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd">
3、IE7的触发：在XML声明和XHTML的DOCTYPE之间，加入HTML注释
<?xml version="1.0" encoding="utf-8"?>
<!-- ... and keep IE7 in quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML    1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd">
4、IE6和IE7都可以触发的：在HTML4.01的DOCTYPE文档头部，加入HTML注释
<!-- quirks mode --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "/TR/html4/strict.dtd">
5、在页面顶部加<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML    4.01 Transitional//EN">，将触发“怪异模式”
6、没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本上所有的浏览器都是使用quirks mode呈现
谈谈以前端角度出发做好SEO需要考虑什么？
1、了解搜索引擎如何抓取网页和如何索引网页；
2、Meta标签优化；
3、如何选取关键词并在网页中放置关键词；
4、了解主要的搜索引擎；
5、主要的互联网目录
6、按点击付费的搜索引擎；
7、搜索引擎登录；
8、链接交换和链接广泛度（Link Popularity）；
9、标签的合理使用。
我们知道可以以外链的方式引入CSS文件，请谈谈外链引入CSS有哪些方式，这些方式的性能有区别吗？
CSS的引入方式最常用的有三种：
第一：在head部分加入<link rel="stylesheet" type="text/css" href="my.css"/>，引入外部的
CSS文件；
第二：在head部分加入
<style type="text/css">
div{margin: 0;padding: 0;border:1px red solid;}
</style>
第三：直接在页面的标签里加<div >
CSS Sprite是什么，谈谈这个技术的优缺点。
CSS sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到
中去，减少对服务器的请求次数，提高访问速度。
1、优点：
（1）利用CSS Sprites能很好地减少了网页的http请求，从而大大的提高了页面的性能，这也是CSS Sprite的优点，也是其被广泛传播和应用的主要原因；
（2）解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素命名，从而提高了网页的制作效率。
（3）换风格方便，只需要在一张或少张图片上修改图片的颜或样式，整个网页的风格就可以改变。维护起来也很方便。
2、缺点：
（1）在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内显示不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易将背景断裂；
（2）CSS Sprites在开发的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位是针线活，没什么难度，但是很繁琐。
（3）CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的好不要动，这样避免改动更多的css，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字加了，还要改动css。
以CSS3标准定义一个webkit内核浏览器识别的圆角（尺寸随意）
-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius:10px;
行内元素有哪些？块级元素有哪些？CSS的盒模型？
行内元素有：a b span I em img input select strong
级元素有：div ul ol li dl dt dd h1 h2 h3 h4 p
web前端开发笔试题库
盒模型：margin border padding width
前端页面有哪三层构成，分别是什么？作用是什么？
网页分成三个层次，即：结构层、表示层、行为层。
1、网页的结构层（structurallayer）由HTML 或XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”
2、网页的表示层（presentationlayer）由CSS 负责创建。CSS对“如何显示有关内容”的问题做出了回答。
3、网页的行为层（behaviorlayer）负责回答“内容应该如何对事件做出反应”这一问题。这是Javascript 语言和DOM 主宰的领域。
html中form里action方法的get和post有什么区别
1、Get是用来从服务器上获得数据，而Post是用来向服务器上传递数据。
2、Get将表单中数据的按照variable=value的形式，添加到action所指向的URL后面，并且两者使用“?”连接，而各个变量之间使用“&”连接；Post是将表单中的数据放在form 的数据体中，按照变量和值相对应的方式，传递到action所指向URL。
3、Get是不安全的，因为在传输过程，数据被放在请求的URL中，而如今现有的很多服务器、代理服务器或者用户代理都会将请求URL记录到日志文件中，然后放在某个地方，这样就可能会有一些隐私的信息被第三方看到。另外，用户也可以在浏览器上直接看到提交的数据，一些系统内部消息将会一同显示在用户面前。Post的所有操作对用户来说都是不可见的。
4、Get传输的数据量小，这主要是因为受URL长度限制；而Post可以传输大量的数据，所以在上传文件只能使用Post（当然还有一个原因，将在后面的提到）。
5、Get限制Form表单的数据集的值必须为ASCII字符；而Post支持整个ISO10646字符集。
6、Get是Form的默认方法。
html元素的id跟class什么区别
id和class是网页中两个通用属性，他们协同工作使整个页面丰富多彩，当我们为一个元素定义样式时，二者都可用，但有区别
1、在css样式表中书写时，id选择符前缀应加“#”，class选择符前缀应加“.”
2、id属性在一个页面中书写时只能使用一次，而class可以反复使用
3、id作为元素标签用于区分不同结构和内容，而class作为一个样式，可以应用到任何结构和内容当中去
4、布局上的一般原则：id先确定结构和内容再为它定义样式。而class正好相反，是先定义样式，然后在页面中根据不同需求把样式应用到不同结构和内容上

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。