1常见笔试题：标准的HTML文档必须包含哪几个元素（）
【多选题】A.p B.html C.head D.div答案：B、C。HTML文档必须包括4个HTML元素，分别是DOCTYPE、html、head和body。
2.HTML与XHTML：HTML的格式比较松散，这会导致一些问题，下面只列出了两个比较有代表性的问题。（1）兼容性差，下面的代码可在浏览器中运行，但非常依赖浏览器的容错性，市面上的浏览器众多，各种未知的错误随时会发生。[插图]（2）移植性差，将来如果将网页移植到对格式要求严格的设备中（例如盲文设备），就必须重构。
DOCTYPE（Document Type Declaration）用于声明文档类型和DTD（Document TypeDefinition）规范，确保不同浏览器以相同的方式解析文档，以及执行相同的渲染模式。DTD就是文档类型定义，一种标记符的语法规则，保证SGML和XML文档格式的合法性。
以下选项是HTML5的DTD的是（）
【单选题】A.B.C.D.答案：B。HTML5因为不再基于SGML，所以在它的声明中不需要引用DTD。
- 下面最适合定义标题的方式是（）【单选题】A.
标题 B.标题
C.标题
D.标题 答案：C。h1~h6元素都可表示标题，但体现的重要性不同。section元素表示文档的一节，可以包含标题。p元素表示段落。header元素表示首部，可包含标题、logo、搜索框等。
常见笔试题：1.什么是Shadow DOM（影子中的DOM）?答案：Shadow DOM是浏览器的一种功能，能够自动添加子元素，例如audio元素（如以下代码所示）在网页中能使用进度条、音量控制等功能，这些相关元素都由浏览器自动生成。[插图]
-
元素属性src和href有何区别?答案：两者的功能不同。href（hypertext reference）能够建立一条通道，将当前文档和定义的资源连接起来。src（source）是将定义的资源嵌入到当前文档中。
-
img元素中的title和alt属性有何区别？答案：title是全局属性，提供额外的提示信息，当鼠标滑动到该元素时，显示定义的提示。link和style元素中的title比较特殊，表示样式表的名称；alt是局部属性，仅可用在img、input等元素中，提供在图片未载入或加载失败时的替代文本。注意，只有当input元素的type属性为image时，才能使用alt属性。
请列举表格布局的弊端。答案：表格布局主要有以下5方面的弊端。（1）可访问性差，表格布局中的内容从左到右和从上到下的读取并不总是有意义，并且还缺乏依赖关系，无障碍工具（如屏幕阅读器）从这些文档中获取的数据会非常混乱，影响用户的浏览。（2）难以实现响应式，通常可用媒体查询对不同设备呈现适合的界面，但表格布局需要用单元格嵌套表格，而单元格之间的合并要用元素的colspan或rowspan属性，不能用CSS属性简单的设置。（3）可维护性差，表格布局需要使用大量的元素属性，并且表格之间需要相互嵌套。这使得代码难以阅读，特别是如果不缩进，标签没有层次感，更加难以理解代码的意图。（4）不够语义化，表格布局会用到大量的单元格，单元格（th或td）不像nav、header、footer等元素有明确的含义。语义化的界面既能保持代码整齐，又能提升搜索引擎优化。（5）加载速度慢，嵌套的表越多，文档就变得越臃肿，不但会加长网络传输的时间，而且也会增加渲染的时间。
除了video和audio元素，HTML5还支持哪些其他的多媒体元素？答案：HTML5还支持embed和track元素。embed元素用于嵌入外部资源，例如SVG矢量图形、应用程序或插件等。track元素是audio和video的子元素，为多媒体文件添加辅助文本信息，例如字幕、屏幕阅读器说明和主题等。在Chrome浏览器中，可用WebVTT（网络视频文本轨道）文件和track元素结合（如以下代码所示），给媒体资源添加可同步显示的字幕。
用什么方法可以防止Cookie被盗取?答案：Cookie是先由浏览器向服务器发起请求，再由服务器响应后回传Set-Cookie首部（此时可设置HttpOnly属性）向客户端浏览器写入Cookie。在给Cookie设置HttpOnly属性后，就能够禁止页面的JavaScript访问这个Cookie，从而避免被盗取。
CSS
什么是CSS预处理器?答案：CSS预处理器（CSS Preprocessor）为CSS增加编程特性，通过编译器将使用新语法的文件输出为一个普通的CSS文件，解决CSS难以复用、代码冗余、可维护性低的问题，对CSS来说不是锦上添花而是雪中送炭。常用的预处理器有Less、Sass和Stylus。
CSS预处理器的缺点如下
（1）通过编译生成CSS文件，降低了对CSS文件的控制力，如果书写不当，那么编译出的CSS文件将会巨大而复杂。
（2）调试难度增加，在浏览器中调试的是编译后的CSS文件，并不是编译前的源码。
（3）带来了一定的学习成本，新人需要学习预处理器的语法规则。
用表格元素布局已经不再提倡，但用CSS将元素变为表格，再布局，这种方式不但可以弥补曾经的一些不足，还能取得一些奇效，例如可实现下面所列的4种效果。
（1）能够使用媒体查询，实现响应式布局。
（2）将某些信息（如联系方式、友情链接等）固定在页面底部，
即使中间没有内容，也不会移上来。
（3）实现动态内容的多列高度相等。
（4）让尺寸不固定的元素垂直居中。
常见笔试题：
display:none与visibility:hidden都可隐藏元素，二者有何区别?
将CSS属性display定义为none后，相当于元素没有了后代元素，在正常流中不占用任何空间，元素的真实尺寸将会丢失，还会导致浏览器的重排（reflow）和重绘（repaint）。
而将CSS属性visibility定义为hidden后，在正常流中还是会占用空间，仍具有元素的真实尺寸，只会导致浏览器重绘
元素选择器
1.通配选择器：通配选择器用星号（）表示，能够匹配文档中的所有元素，功能很强大，注意酌情使用。使用方式为：{}。
2.类型选择器：类型选择器根据元素名来选择元素，例如匹配所有的div元素：div {}。
3.类选择器：类选择器是以点号（.）开头，根据元素全局属性class的值来选择元素，例如匹配class的值为bfc的元素：.bfc {}。
4.ID选择器：ID选择器是以井号（#）开头，根据元素全局属性id的值来选择元素，例如匹配id的值为bfc的元素：#bfc {}。
5.属性选择器：属性选择器根据特定条件的属性来选择元素。需要注意的是，这个选择器既可以单独使用，也可以组合使用。
如果要组合使用，只能与元素（即类型选择器）搭配，例如“input[name]”能够匹配包含name属性的input元素，
而用“.bfc[name]”匹配将会失败。下面会列举三类属性选择器。
1.伪类选择器：伪类选择器（pseudo-class selector）用于描述元素的动态特征，再根据元素的特殊状态选择元素，常用的有链接伪类、位置伪类、表单伪类，具体如下所列，圆括号包裹的是相关选择器。（1）在链接元素中，常用的4个状态有未访问（:link）、已访问（:visited）、激活（:active）和悬停（:hover）。
（2）元素的位置可以是第一个（:first-child或:first-of-type）、最后一个（:last-child或:last-of-type）或第n个（:nth-child或:nth-of-type）。（3）表单元素用于搜集用户输入的数据，它们的状态有选中（:checked）、启用（:enabled）和禁用（:disabled）。
伪元素选择器：伪元素选择器（pseudo-element selector）用于处理文档内容，可指定某处的内容（即过滤内容）或添加内容。（1）过滤内容的选择器有::first-letter（首字符）、::first-line（首行）、::placeholder（占位符）和::selection（选中内容）。（2）添加内容的选择器有::before（元素之前插入内容）和::after（元素之后插入内容）。伪元素只能出现在选择器的最后位置，并且不能同时定义多个伪元素，如下所示。
CSS中类选择器和ID选择器有哪些区别?
答案：CSS中的类选择器和ID选择器主要有以下4个方面的区别：（1）类选择器是以点号（.）开头，ID选择器是以井号（#）开头。（2）类选择器根据class属性的值选择元素，ID选择器根据id属性的值选择元素。
（3）类选择器可以应用于多个元素，ID选择器只能应用于一个元素。
（4）ID选择器的特殊性（specificity）比类选择器要高。
伪类:first-child与:first-of-type有什么区别?
答案：伪类：first-child 表示父元素中的第一个子元素，只要这个元素是在第一个位置，就能匹配。伪类：first-of-type 表示父元素中的第一个与父元素相同类型的子元素，这个类型应该是相同的元素名。用一个例子来展示两者之间的不同，先创建一个 HTML 文档，代码如下所示，在div 元素中包含 span和p元素。
下列哪个选项无法赋给content属性（）【单选题】A.content:123 B.content:"\6211"C.content:no-open-quote D.content:no-close-quote答案：A。content属性的值不能用数字表示。“\6211”是“我”的16进制Unicode编码。no-open-quote和no-close-quote可分别删除open-quote与close-quote的引用。
链接有4种状态，包括未访问（:link）、已访问（:visited）、激活（:active）和悬停（:hover），声明的顺序是怎么样的?答案：推荐使用LVHA的顺序，通常这4个状态会使用同一个源声明，也不会单独地给某个状态标记重要性，4个状态的特殊性也相同（代码如下所示），因此影响权重的只有在样式表中所处的位置了。
用过calc()函数吗?它是什么，有什么作用?
答案：calc（）是 CSS 的一个函数，只有一个数学表达式参数，此函数可处理加、减、乘、除等数学运算，并且在表达式中可混用不同的单位，代码如下所示。在用百分比做自适应布局的时候，如果要进行计算会比较困难，例如为了让两个有边框的元素排列在一行，需要准确地算出各个元素的宽度，而宽度都是百分数，边框却是像素值。不同单位，很难得出结果，但有了calc（）函数后，结果就能手到擒来.
在CSS中用:background:transparent与opacity:0有什么区别?
在CSS中，transparent关键字相当于rgba(0,0,0,0)，作为background的属性值，仅仅是将元素的背景设为透明，元素中的内容还能显示而opacity会把元素和内容当成一个整体，当定义为0时，两者都会透明。
下面关于border:none以及border:0的区别
描述错误的是（）【多选题】A.当border为none的时候，边框无外观 B.当border为0的时候，边框宽度为0C.当border为none的时候，边框宽度为0 D.只要定义了边框宽度，就能显示边框.
响应式设计是流式网格、自适应图像和媒体查询的结合体，具体如下所列
（1）流式网格要求元素使用相对单位或百分比控制尺寸大小。
（2）自适应图像是指不给图像设置固定尺寸，根据流体网格进行缩放，最大到100%。
（3）创建不同的媒体查询，根据设备的尺寸和特点，设置适合的样式.
对于不支持媒体查询的古老浏览器，可以通过引入第三方插件来实现媒体查询。
移动端：移动设备的屏幕比桌面屏幕要小得多，为了让网页在小尺寸的屏幕上显示，浏览器会自动缩放视口，将内容变得异常小。
由于视口的缩放不可控，会导致媒体查询失效。为了使媒体查询能正确执行，需要在HTML文档中添加一个meta（元数据）元素，用它来控制视口的尺寸和缩放级别，代码如下所示。
如果要用JavaScript中的setTimeout()函数来实现动画，那么执行函数的时间间隔设为多久会比较合理?
答案：一般情况下屏幕频率为60Hz，也就是每秒刷新60次，合理的时间间隔就是16.7ms，计算过程如下所示。1000/60=16.7ms
1.视口和设备：视口可简单地理解为浏览器窗口（不包括边框、菜单栏等部分），也就是文档内容的可视区域。元数据meta元素可对视口的尺寸进行缩放、行为进行控制。在上表中将宽度、高度以及两者的比值分为了两类：视口和设备，设备的宽和高是真实屏幕的宽和高，不能进行缩放，例如iPhone 5，设备宽度是320px，视口宽度是640px。
2.关键字：在上表中有两个关键字，分别是orientation和scan，它们的功能如下所列：
（1）orientation适用于移动端的屏幕旋转，有两个可选值：landscape（横屏）和portrait（竖屏）。
（2）scan用于描述电视画面的扫描过程，也有两个可选值：progressive（逐行）和interlace（隔行）。
3.分辨率：分辨率可以用每英寸（dpi）或每厘米（dpcm）的点数来表示，其用法如下所示。[插图]4.设备像素比：设备像素比就是物理像素与设备独立像素在水平或垂直方向的比例，通常为了能更好地兼容各个浏览器，会在设备像素比之前加上浏览器前缀.
CSS预处理器和Bootstrap，前者能让CSS成为一门真正的编程语言，后者是一种目前较为流行的前端框架。
CSS Hack是一种编程技巧，它的作用是让CSS代码能兼容各个浏览器，尽量让页面取得想要的效果，避免出现错误的布局.
众所周知，IE浏览器一向特立独行，很多CSS Hack的出现，就是为了填补IE中的坑。下面的所有CSS Hack默认都运行在标准渲染模式中。
弹性布局：
流式布局并不适合在移动端使用，而弹性布局就比较合适。在流式布局中，一般高度、行高等都不用百分数，还是会用像素值，移动设备（例如手机、平板电脑等）的屏幕尺寸和分辨率千差万别，在分辨率高的设备中，元素看着会太小；而在分辨率低的设备中，元素看着又太大。弹性布局与流式布局一样都是相对布局，需要参照物，只是弹性布局参照的是字体大小。使用rem单位的弹性布局是现在比较流行的做法。
如何实现一个圣杯布局?答案：圣杯布局（Holy Grail）是指页面从上到下由页头、内容和页脚组成，内容由左、中、右三列组成：
除了Bootstrap，还听过或用过哪些其他前端框架?答案：除了流行的Bootstrap，目前市面上还有更为轻量的响应式前端框Foundation、轻量级的模块化框架Pure。而在国内同样也有许多优作品，例如HTML5跨屏前端框架AmazeUI、基于Vue 2.0的组件库Element等。
每个分页按钮有两种状态：激活（.active）和禁用（disabled.），激活状态中的按钮背景色会变为蔚蓝，禁用状态中的字体颜色会变为灰色。
响应式
栅格系统可用于各种设备，无论是桌面显示器的大屏幕，还是手机或平板的小屏幕，都能准确适配。Bootstrap创建了三个宽度阈值，分别是768px、992px和1200px。借用媒体查询可以让固定宽度的布局容器随着设备的不同而改变
有没有想过制作一套自己的UI库?
想过。一套经历过沉淀的UI库，有助于快速搭建页面，并且在兼容性、功能性等各方面都有保障。虽然现在市面上有很多精心雕琢的开源UI库，但可能在某些方面还不符合实际需求，而且要熟练驾驭第三方UI库，肯定需要一个过程，在这过程中必然会花费一定的时间与精力。
CSS预处理器（CSS Preprocessor）的出现弥补了CSS的缺陷
CSS预处理器并不能替代CSS，它只是为CSS加入了编程元素，把使用新语法的文件，编译为一个浏览器能识别的普通CSS文件。常用的CSS预处理器有两种：Less和Sass
