前端面试题（HTML部分）

HTML部分

1、Doctype作用？有多少种Doctype文档类型？严格模式与混杂模式如何区分？

答：标签用来定义浏览器用哪种模式进行排版和js运行，它只能声明在HTMl标签的上面；如果不加这个标签会导致文档会以混杂模式来渲染；
共有多少种DOCTYPE文档类型？
HTML5：只有一种文档类型，即：
HTML4.0.1引用了DTD，有三种文档类型，strict、transitional、frameset
混杂模式：页面用最宽松的方式向后兼容显示；模拟老的浏览器防止站点无法访问；
严格模式：文档的排版布局方式和js运行方式都按照浏览器能支持的最高标准来进行；用来呈现遵循最高标准的网页；

2、文本流和文档流的含义区别

文档流：将窗体分成一行一行，让文档中可以显示的元素从左到右，从上到下依次显示，就是文档流；但是注意块级元素会独自占有一行；
文本流：是文字的一种顺序排列方式，从左到右，从上到下；

文档流和文本流的区别：文档流是相对盒子模型来说的，文本流是相对段落来说的；当元素浮动时，会脱离文档流，将不占据任何文档流空间，浮动元素的定位仍然相对文档流，从文档流抽出来挪动到一行的左侧或者右侧；但是文字却认同浮动元素所占有的空间，
文字会围绕浮动元素进行布局，浮动元素没有脱离文本流；
绝对定位和相对定位既脱离的文档流，又脱离了文本流；

3、对web语义化的理解：

• 当样式失去的时候，语义化的书写会让页面结构仍然保持清晰；
• 有利于SEO：语义化的书写让页面有效信息被搜索引擎所搜到；
• 方便其他设备解析（阅屏器，盲人阅读器，移动设备）以有意义的方式进行；
• 提高可读性：语义化的书写提高了代码的可读性，提高团队的效益；
  
  

4、 alt和title的区别：

• title 是html的一个全局属性，是对元素的一个解释说明，当鼠标划过该元素时，title属性的值会展示；
• alt是img元素的一个属性，当图片无法加载时显示alt属性的值，用来对图片进行描述，即使图片未展示，人们也能知道图片的大概内容，更加具有可读性；另一方面，alt属性的值能被搜索引擎捕捉到，所以尽量让alt属性值有意义；
  
  

5、HTML全局属性(global attribute)有哪些?

accesskey: 为元素设置快捷键；
class：类名；
contenteditable：文本是否能编辑；
contextmenu： 自定义右键弹出菜单；
data-*：为元素添加自定义属性；
dir：设置元素的排列方向；
draggable： 元素是否可以拖拽；
dragzone：设置拖放的方式，copy，move，link等；
hidden：设置一个元素是否显示；
id：设置元素唯一的标志id；
lang：设置元素内容的语言；
spellcheck：是否对元素内容进行拼写检查；
style: 行内css样式 ；
tabindex：表示元素可以通过tab键来控制选中；
title: 元素相关的建议信息 ；
translate: 规定是否应该翻译元素内容；

6、行内元素和块元素有哪些？这两者有什么区别？

行内元素有：a,span,img,strong,em,input
块级元素有：div,h1~h6,ul,li,tl,td,tr,p等
区别：
- 行内元素不能设置heigh，width，但是，高度可以通过line-height来设置；
- 行内元素不能设置margin-left,margin-right,padding-right,padding-left;

7、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？

绘画：canvas标签；
音频：audio标签；
本地存储的API：localStorage、sessionStorage；
语义化标签：article、footer、header、nav、section；
表单控件：date、calendar、time、email、url、search；
新的技术webworker, websocket, Geolocation;

css部分：

一、css sprites

CSS
Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
利用CSS的“background-image”，“background-
repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。
利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS
Sprites最大的优点，也是其被广泛传播和应用的主要原因； CSS
Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。所以C错误
解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便