每天十道前端面试题第一天

1.介绍一下你对浏览器内核的理解;

   主要分成两部分，渲染引擎和js引擎

• 渲染引擎：用于获取html,css和图片，然后输出至显示器或打印机。
• js引擎：解析和执行javascript来实现网页的动态效果

2.浏览器的内核分别是什么；

• IE：trident内核
• Firefox:  gecko内核
• safari:  webkit内核
• Opera:  Blink内核（以前是presto内核，现已经改用Chrome的Blink内核）
• Chrome:Blink内核 （基于webkit,Google与Opera Software共同开发）

3.怎么理解语义化；

语义化标签就是有语义的标签，它可以清晰地向我们展示它的作用和用途，例如h1-h6标题标签，它可以将文字加粗放大，所以常应用于标题。

1）语义化标签的好处有：

• 语义化标签具有可读性，使得文档结构清晰
• 浏览器便于读取，有利于SEO优化
• 展现在页面中时，用户体验好
• 便于团队开发和维护

2）常见的语义化标签有哪些；

h1~h6,title,p,strong,i,del,ul等（  div和span不是！）

3)HTML5新增的语义化标签有哪些；

header、section、article、aside、hgroup、figure、figcaption、nav、footer等

4.谈谈你对web标准以及W3C的理解和认识

• web标准不是一个标准，是由w3c与其他标准化组织制定的一系列标准的集合，主要包括结构、表现、行为三个方面。
• 结构标准：用于对网页元素进行整理和分类，主要由HTML标签组成；
• 表现标准:  用于设置网页元素的板式，颜色，大小等外观样式，主要指css样式表；
• 行为标准：指网页模型的定义以及交互的编写，主要由js和dom组成
• web标准一般是将该三部分独立分开，使其更具有模块化，但一般行为变化时，结构和表现也会变化，这使得这三者的界限并不那么清晰。

W3C标准对web标准提出的规范化要求：

• 对于结构要求：标签闭合，标签字母小写，标签不允许随意嵌套；
• 对于css,js要求：尽量使用外链css样式和js脚本，使结构，表现，行为分为三块，符合规范；
• 同时提高页面渲染速度，提高用户体验，代码维护简单，便于改版。

5.<img/>中的alt和title有何异同；

• alt属性：图片无法显示的替换文字，是对图片内容的描述，替换文字的语言由lang属性指定；
• title属性：是对图片的说明性文字，无论图片是否正常显示，鼠标悬停时都会出现。

6.strong与em的异同；strong与b的异同；em与i的异同；

• strong:粗体强调标签，强调，表示内容的重要性；em:斜体强调标签，更强烈强调，表示内容的强调点；
• strong语气更强，使用阅读设备阅读网络时，strong会重读，b只是展示强调内容；
• em表示强调的文本，语气更强，i只是展示内容为斜体。

7.什么是XHTML;

XHTML指扩展超文本标记语言，它的目标是取代HTML , XHTML1.0和HTML4.01几乎是相同的，是更严格更纯净的HTML版本；建立XHTML的目的是实现HTML到XML的过渡。

XHTML与HTML的区别：

• 功能差别：XHTML可以兼容各大浏览器、手机等，并且浏览器也能快速正确地编译网页；
• 书写习惯差别：XHTML元素必须被正确嵌套，闭合，标签名和属性名必须小写，文档必须拥有根元素等

8.div是什么，在div之前用什么做网站布局； 

• 网站布局有两种，一种是div+css布局，div是网页布局的盒子标签，通过与css样式的配合来布局，是目前主流的布局方式
• 另外一种，是在div之前，用table来布局，但table嵌套布局很多，网站加载慢，布局层级不清晰

   div+css的布局较table布局有什么优点；

• 改版的时候更方便，只要css文件；
• 页面加载速度更快、结构化清晰、页面显示整洁；
• 表现与结构相分离；
• 易于优化，搜索引擎更友好，排名更容易靠前。

9.空元素（单标签元素）有哪些？

<br>、<img>、<meta>、<link>、<input>、<hr>(水平分割线)

10.行内元素有哪些？块级元素有哪些？它们的区别是什么？

• 行内元素：a,b,br,del,em,i,input,img,span,strong,sup,sub,select,textarea,u（链接里面不能放链接，链接里可以放块级元素）
• 块级元素：div,p,ul,li,ol,dl,dt,dd,h1~h6,hr,table,form(不常见的：address,center,pre,blockquote段落缩进,marquee滚动文本)
• 行内块元素：img,form
• 区别：行内元素：1、设置宽高无效；2、对margin仅左右有效，上下无效，padding上下左右都有效，但会撑大空间；3、不会自动换行；4、行内元素内只能包含行内元素，不能包含块元素；///块级元素：1、设置宽高有效，宽度未设置时，默认为父元素的100%；2、对margin，padding上下左右都有效; 3、可以自动换行； 4、多个块元素自上到下依次排列； 5、块元素内可以包含块元素和行内元素。///行内块元素：1、不自动换行；2、设置宽高有效； 3、默认排列方式从左到右。