一．
HTML
**1. img标记属于什么类型元素？
答案：属于行内(inline)元素
2.结构标记有哪些？他们与div有什么相同之处，又有什么不同之处？
答案：header，nav，section，aside，footer，article
都是用来做布局的，但结构标记提高了语义性和可读性
3. 行内元素，块元素，空元素有哪些？
答案：
（1）行内元素：
a， span，i，img，b ,s,u，sup,sub,label
（2）块元素：
div ，dl，dt，dd，ul，li，ol，p，h1，h2，h3，h4，h5，结构标记
（3）空元素：
br-换行，hr-水平分割线
4. 什么是前端？
答案：
用HTML/CSS/JavaScript以及更多的框架技术，编写网站页面、App应用、小程序、2D&3D游戏、Web VR&AR等应用，通过内容设计、交互动画、数据操作构建项目与用户的交互界面。前端工程师在项目中可以与UI设计师和后台程序员合作，实现设计意图并调用后台接口，也可以独立工作完成强用户交互的各类应用。
5. HTML、CSS、JavaScript的作用是什么，为什么会产生这三种语言？
答案：这三种语言都是用来编写网页的，HTML用于搭建网页结构展示内容，CSS用于修饰HTML元素，JavaScript用于添加网页的交互验证。
6. 说说HTML5，CSS3的新特性，平时使用过哪些？
答案：
H5新特性：
结构标记（header，footer，section，article，aside，nav），新表单元素（url，email，number，date，month，color等），canvas，audio，video，地理定位，拖放，web存储，Web Workers，WebSocket等。
CSS3新特性：
复杂选择器器（属性选择器，伪类选择器，伪元素选择器，兄弟选择器等），边框倒角，边框阴影，渐变，转换，过渡，动画，弹性盒子，媒体查询技术等。
7、Doctype 作用? 严格模式与混杂模式如何区分？它们有何意义?
（1）、 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
（2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
（4）、DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。
8、对语义化如何理解？
答案：用正确的标签做正确的事情！
HTML 语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式 CCS 情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
9、iframe 有那些缺点？
iframe 会阻塞主页面的 Onload 事件；
iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的
并行加载。使用 iframe 之前需要考虑这两个缺点。如果需要使用 iframe，最好是
通过 javascript 动态给 iframe 添加 src 属性值，这样可以可以绕开以上两个问题。
10.对 WEB 标准以及 W3C 的理解与认识？
答案：
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链 css 和 js 脚本、结构与行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;
11.XHTML 和 HTML 有什么区别？
答案：
HTML 是一种基本的 WEB 网页设计语言，XHTML 是一个基于 XML 的置标语言最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。标签名必须用小写字母。
XHTML 文档必须拥有根元素。
12.img 标签上 title 与 alt 属性的区别是什么?
答案：alt ,当图片不显示时，在图片位置所显示的文字。
title,鼠标移入到元素上时，为该元素添加提示信息。
13.你如何对网站的文件和资源进行优化?
答案：解决方案包括：
文件合并
文件最小化/文件压缩
使用 CDN 托管
缓存的使用
二． CSS3
1.隐藏网页中的元素有几种方式？这些方法有什么区别？
答案：三种方法，
display:none; 脱离文档流，不占页面空间,会改变页面布局。
visibility:hidden ；不会脱离文档流，不会改变页面布局，仍占页面空间
opacity:0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件
2.如何解决子元素的上外边距溢出？
答案：在父元素的第一个子元素位置处添加一个空的table标记.
3.常用来设置透明度的方式有几种？他们之间有何区别？
答案：opacity或rgba
opacity能设置与元素相关各种颜色的透明度
rgba()只能设置当前某一种颜色的透明度
4.浮动会对父元素的高度带来什么影响？如何解决这个问题？
答案：子元素一旦浮动，父元素的高度为0，在父元素最后一个子元素位置处添加一个空的块级元素，并设置其clear属性值为both.
.clear:after{
display:block;
content:””;
clear:both;
}
5.哪些元素默认有外边距？
答案：body，p，h1-h6，ul，ol，dl，pre
6.网页中如何定义锚点？如何连接到锚点位置？
答案：a标记用name定义锚点，其他标记用id属性定义锚点，
连接到锚点的位置：href="#锚点名称"
7.框模型默认的计算方式是什么？要改变默认的计算方式用哪个属性及值？
答案：
实际占地宽度=左右外边距+左右边框+左右内边距+width
实际占地高度=上下外边距+上下边框+上下内边距+height
改变计算方式 box-sizing:border-box
8.实现时针转动效果需要用到CSS中哪些关键技术？
答案：旋转，动画，绝对定位
9.设置行内元素居中对齐用什么属性？
答案：text-align：center
10.如果要将表单中控件的值提交给服务器必须为控件设置什么属性？
答案：name和value属性
11.transition和animation的区别？
答案：
Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才能改变属性，
而animation不需要触发任何事件的情况下也会随时间改变属性值，并且transition为2帧，从from … to，而animation可以一帧一帧的，也可以理解为一个animation是由多个transition组成。
12. 如何实现水平垂直居中？
答案：
1、定位+外边距 盒子宽高已知， position: absolute; left: 50%; top: 50%; margin-left:-自身一半宽度; margin-top: -自身一半高度;
2、定位+transform 盒子高宽已知，
#container{ position:relative; border:1px solid red; width:800px; height:600px; }
#center{ width:100px; height:100px; background:blue; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); }
3、flex 布局
父级：
display: flex;
align-items: center;
justify-content: center;
13. 盒子模型你是怎么理解的？
答案：
元素框处理元素内容，内边距外边距以及边框的计算方式。
盒子模型有两种，W3C和IE盒子模型
（1）w3c的盒模型width=content，不包括margin，padding,border
（2）IE盒模型width=content+padding+border
（3）box-sizng border-box在已设定的宽度和高度之内去设定padding和border
content-box在已设定的高度和宽度之外设置padding和border
14. src和href的区别？
答案：
（1）href：
href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。
并行下载该文档，不会停止对当前文档的处理
（2）src：
src是source的缩写，src指向的内容会嵌入到文档当前标签所在位置
如img、script、iframe当浏览器解析到该元素时，会暂停浏览器的渲染，直到该资源加载完毕。
15. 说出link和import的区别？
答案：
（1）使用方法不同：
link一般在html头部定义，作为html标签，链接资源，主要用于链接外部的样式表
import一般定义在css内部，并且一定要在其他所有规则之前，也就是一般写在文件头部，并且专门拿来链css的。
（2）加载顺序差别
import比link延迟一些，它会等到页面下载完后才加载，因而可能会产生闪烁
16. 改变页面元素位置的定位方式及他们的区别？
答案：
relative 相对定位 相对于自身原来位置进行偏移，仍处于标准文档流中；
absolute 绝对定位 相对于最近的已定位的祖先元素, 有已定位(指position不是static的元素)祖先元素, 以最近的祖先元素为参考标准。如果无已定位祖先元素, 以body元素为偏移参照， 完全脱离文档流；
fixed 固定定位的元素会相对于视窗来定位,这意味着即便页面滚动，它还是会停留在固定的位置。固定定位也会脱离文档流。
17. display有哪些值，说明他们的作用？
答案：
display的取值可以是none/inline/block/inline-block/table
none:元素隐藏不可见，并且元素也不占页面空间。
Inline:元素将呈现行内元素的特点，多个元素在一行中显示，不允许修改尺寸，也不能设置垂直外边距。
block:元素将呈现块级元素的特点，每个元素独占一行，允许修改尺寸。
inline-block:元素将呈现行内块元素的特点，多个元素在一行中显示，但是可以修改尺寸。
table:元素将呈现表格的特点，由内容决定表格的显示方式。元素独占一行，允许修改尺寸。
18. 有两个div，外框和内框高度宽度都不定，内框垂直水平居中，利用css如何实现？
答案：.center{
display:flex;
justify-content:center;
align-items:center;
}
19. 说说em和rem的区别
答案：rem是基于html元素的字体大小来决定，而em则根据使用它的元素的字体大小决定（很多人错误以为是根据父类元素，实际上是元素继承了父类的属性才会产生的错觉）
20、浏览器的内核分别是什么?
答案：IE 浏览器的内核 Trident、Mozilla 的 Gecko、Chrome 的 Blink（WebKit 的分支）、 Opera 内核原为 Presto，现为 Blink；
21、为什么要初始化 CSS 样式？
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对 SEO 有一定的影响，但力求影响最小的情况下初始化。最简单的初始化方法就是： * {padding: 0; margin: 0;} （不建议）淘宝的样式初始化： body, h1, h2, h3, h4, h5, h6, hr, p, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, /5b8b/4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
ul, ol{ list-style:none;}
a{text-decoration:none; }
a:hover {text-decoration:underline; }
img{ border:0;}
button,input, select,textarea{ font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
22、CSS哪些属性可以继承？优先级算法如何计算？ CSS3 新增伪类有那些？
答案：
可继承的样式： font-size ,font-family ,color, background等;
不可继承的样式：border, padding ,margin ,width ,height ;
优先级就近原则，同权重情况下以最近者为准;
优先级为: !important > id > class > tag
important 比 内联优先级高
CSS3 新增伪类：
:first-child 选择属于其父元素的首个元素。
:last-child 选择属于其父元素的最后一个元素。
:only-child 选择属于其父元素唯一的元素。
:nth-child(n) 选择属于其父元素的任意一个子元素。
:empty 选择没有子元素的元素。
:not(selector) 将满足指定选择器的元素给排除在外。
23.描述 css reset 的作用。
答案：reset 重置浏览器为元素设置的默认样式，浏览器的种类不同，样式可能不同，重置是为了让他们统一样式。
24.清除浮动带来影响的几种方式，各自的优缺点
答案：
1、直接设置父元素高度，但不是每次都知道父元素的高度。
2、设置父元素也浮动，但不是任何时候父元素都需要浮动，而且浮动会影响后续元素。
3、为父元素设置 overflow属性，但如果有内容需要溢出显示的话，也会一同被隐藏。
4、在父元素中，追加空子元素，并设置其clear:both,但页面中会多出一个空元素。
5、用内容生成的方式:after{content:””;display:block;clear:both;}
25.px 和 em 的区别
px 和 em 都是长度单位，区别是，px 的值是固定的，指定是多少就是多少，计算比较容易。em 得值不是固定的，并且 em 会继承父级元素的字体大小。
浏览器的默认字体高都是 16px。所以未经调整的浏览器都符合: 1em=16px。那么 12px=0.75em, 10px=0.625em**