1.常用那几种浏览器测试？有哪些内核（Layout Engine）？

（Q1）浏览器：IE,Chrome，FireFox，Safari，Opera

（Q2）内核：Trident，Gecko，Presto，Webkit

2.说下行内元素和块级元素的区别？行内块元素的兼容性使用？（IE8一下）

（Q1）行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效（可以设置line-height），margin上下无效，padding上下无效。块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个

断行。

（Q2）兼容性：display:inline-block;*display:inline;*zoom:1;

3.清除浮动有哪些方式，比较好的是哪一种？

（1）父级div定义height（前提：对象内容高度要能确定并能计算好）

（2）在父级内的结尾处加空div并对其设置样式clear：both（缺点：会多加CSS和HTML标签）

（3）在父级元素上加一个class是clearfix定义这个class为 .clearfix:after{content: '';display: block;clear: both;} .clearfix{ /*兼容 IE*/ zoom: 1;}另/* 新浪使用方式 .clearfix:after{ content: '';display: block;clear: both;height: 0;visibility: hidden;}*/

（4）父级div定义overflow:hidden;zoom:1;

（5）父级div也浮动，但需要定义宽度

（6）父级div定义display:table;

（7）父级内的结尾处加br并定义clear:both

（8）父元素处于绝对定位

----------------------------------------------------------------------------------------------------》比较好的是第3种

4.box-sizing常用的属性有哪些？分别有什么作用？

（Q1）box-sizing:content-box|border-box|inherit;

（Q2）content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框（元素默认效果）。

border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

5.Doctype作用？标准模式与兼容模式各有什么区别？

（Q1）<!DOCTYPE>告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

（Q2）标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。

6.HTML5为什么只需要写<!DOCTYPE HTML>?

HTML5不基于SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照他们应该的方式来运行）。

而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

7.页面导入样式时，使用link和@import有什么区别？

（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS,定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS

（2）页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载；

（3）import是CSS2.1提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题。

8.介绍一下你对浏览器内核的理解？

主要分成两部分：渲染引擎（layout engineer 或Rendering Engine）和JS引擎。渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎则：解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

10.简述一下你对HTML语义化的理解？

用正确的标签做正确的事情。

html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样式css情况下也以一种文档格式显示，并且是容易阅读的；搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO；使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

web前端问题整理的更多相关文章

  1. WEB前端工程师整理的原生JavaScript经典百例

    一.原生JavaScript实现字符串长度截取 二.原生JavaScript获取域名主机 三.原生JavaScript转义html标签 四.原生JavaScript时间日期格式替换 Date.prot ...

  2. web前端素材整理汇总

    最近一直搞前端开发,整理下前端用的一些常用素材,分享给大家 框架类 Vue:https://cn.vuejs.org/ iview:https://www.iviewui.com/ 插件类 Jquer ...

  3. web前端优化整理（转）

    如今浏览器能够实现的特性越来越多,并且网络逐渐向移动设备转移,使我们的前端代码更加紧凑,如何优化,就变得越来越重要了. 开发人员普遍会将他们的代码习惯优先于用户体验.但是很多很小的改变可以让用户体验有 ...

  4. 手机移动端web前端常见问题整理

    移动端常见问题及解决方案 一.meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="w ...

  5. web前端笔记整理，从入门到上天，周周更新

    由于大前端知识点太多,所以一一做了分类整理,详情可见本人博客 http://www.cnblogs.com/luxiaoyao/ 一.HTML 1.注释 格式:<!-- 注释内容 --> ...

  6. Web前端（整理不好，自己未学）

    1.公司招聘信息 (1)小公司 (2)腾讯 ①社会招聘 ②校园招聘 (3)百度 ①社会招聘 ②实习 ③校园招聘 2.岗位要求 开发经验,良好的编程习惯,学习能力,至少二个项目开发设计,具备需求功能模块 ...

  7. Web前端笔记整理

    不使用Ajax无刷新提交: header('HTTP/1.1 204 No Content'); var a=document.createElement('img'); a.setAttribute ...

  8. web前端笔记整理一---HTML

    一 HTML标签1 页面及标记 1 HTML 文件结构 拓展名 .html或者.htm <!DOCTYPE html>// 声明 <html> html 主体 <head ...

  9. web前端笔记整理---CSS

    一   Css  文件 Css: 美化HTML的 4种选择器: 元素选择 类选择 ID选择 伪类选择 常用的布局方案 1 写在什么位置能好用. 1.1 元素里面 优先级是最高的 1.2 元素外,文件内 ...

随机推荐

  1. com.google.zxing:core 生成二维码的简单使用

    String content = ""; int size = 240; Hashtable<EncodeHintType, String> hints = new H ...

  2. git相关学习地址

    https://git-scm.com/book/zh/v2    这篇文章写得不错,值得一读

  3. Smarty使用-模版中编写js

      在smarty模版中编写js使用literal标签, Literal 标签区域内的数据将被当作文本处理,此时模板将忽略其内部的所有字符信息. 该特性用于显示有可能包含大括号等字符信息的 javas ...

  4. Linux_centos安装后无法进入图形界面

    问题 直接默认进入字符界面 root之后init 5也没用 解决方法 出现问题的原因在于安装时选择了最小安装,如图所示

  5. Sampling Distribution of the Sample Mean|Central Limit Theorem

    7.3 The Sampling Distribution of the Sample Mean population:1000:Scale are normally distributed with ...

  6. Java IO: Reader和Writer

    作者: Jakob Jenkov 译者: 李璟(jlee381344197@gmail.com) Reader 原文链接 Reader是Java IO中所有Reader的基类.Reader与Input ...

  7. 使用mybatis的动态sql解析能力生成sql

    需求: 计算平台,有很多表,打算提供一个基于sql的服务接口, sql不能完全在配置页面写死, 要能根据参数不同执行不同的语义,防止sql个数爆炸 把mybatis原码down下来, 改造一下测试用例 ...

  8. [LC] 45. Jump Game II

    Given an array of non-negative integers, you are initially positioned at the first index of the arra ...

  9. HttpClient GET和POST请求

    package com.rogue.hclient; import java.io.BufferedReader; import java.io.IOException; import java.io ...

  10. get 传中文，可以通过下面这种方式

    window.location.href=encodeURI("<%=path%>/XXX.XXX?name=中文"); 然后在后台通过new String(reque ...