一、HTML
1、<image>标签上title属性与alt属性的差异是什么？
alt属性是为了给那些不能看到你文档中图像的浏览者供应笔墨解释的。且长度必须少于100个英笔墨符或者用户必须担保更换笔墨尽可能的短。
这包括那些利用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和利用屏幕阅读器的用户等。
title属性为设置该属性的元素供应建议性的信息。利用title属性供应非实质的额外信息。参考《alt和title属性的差异及运用》
2、分别写出以下几个HTML标签：笔墨加粗、下标、居中、字体
加粗：<b>、<strong>
下标：<sub>
居中：<center>
字体：<font>、<basefont>、参考《HTML标签列表》
3、请写出至少5个html5新增的标签，并解释其语义和运用处景
section：定义文档中的一个章节
nav：定义只包含导航链接的章节
header：定义页面或章节的头部。它常常包含 logo、页面标题和导航性的目录。
footer：定义页面或章节的尾部。它常常包含版权信息、法律信息链接和反馈建议用的地址。
aside：定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍旧很合理。
参考《HTML5 标签列表》
4、请说说你对标签语义化的理解？
a. 去掉或者丢失样式的时候能够让页面呈现出清晰的构造
b. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定高下文和各个关键字的权重；
c. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的办法来渲染网页；
d. 便于团队开拓和掩护，语义化更具可读性，遵照W3C标准的团队都遵照这个标准，可以减少差异化。
5、Doctype浸染? 严格模式与殽杂模式如何区分？它们有何意义?
声明位于文档中的最前面，处于 标签之前。奉告浏览器以何种模式来渲染文档。
严格模式的排版和 JS 运作模式是，以该浏览器支持的最高标准运行。
在殽杂模式中，页面以宽松的向后兼容的办法显示。仿照老式浏览器的行为以防止站点无法事情。
DOCTYPE不存在或格式禁绝确会导致文档以殽杂模式呈现。
6、你知道多少种Doctype文档类型？
标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
Standards （标准）模式（也便是严格呈现模式）用于呈现遵照最新标准的网页，
Quirks（原谅）模式（也便是疏松呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
7、HTML与XHTML——二者有什么差异
a. XHTML 元素必须被精确地嵌套。
b. XHTML 元素必须被关闭。
c. 标署名必须用小写字母。
d. XHTML 文档必须拥有根元素。
参考《XHTML 与 HTML 之间的差异》
8、html5有哪些新特性、移除了那些元素？
a. HTML5 现在已经不是 SGML 的子集，紧张是关于图像，位置，存储，多任务等功能的增加。
b. 拖拽开释(Drag and drop) API
c. 语义化更好的内容标签（header,nav,footer,aside,article,section）
d. 音频、***API(audio,video)
e. 画布(Canvas) API
f. 地理(Geolocation) API
g. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
h. sessionStorage 的数据在页面会话结束时会被打消
i. 表单控件，calendar、date、time、email、url、search
j. 新的技能webworker, websocket等
移除的元素：
a. 纯表现的元素：basefont，big，center, s，strike，tt，u；
b. 对可用性产生负面影响的元素：frame，frameset，noframes；
9、iframe的优缺陷？
优点：
a. 办理加载缓慢的第三方内容如图标和广告等的加载问题
b. iframe无刷新文件上传
c. iframe跨域通信
缺陷：
a. iframe会壅塞主页面的Onload事宜
b. 无法被一些搜索引擎索引到
c. 页面会增加做事器的http要求
d. 会产生很多页面，不随意马虎管理。
参考《iframe的一些记录》
10、Quirks模式是什么？它和Standards模式有什么差异？
在写程序时我们也会常常碰着这样的问题，如何担保原来的接口不变，又供应更强大的功能，尤其是新功能不兼容旧功能时。IE6以前的页面大家都不会去写DTD，以是IE6就假定 如果写了DTD，就意味着这个页面将采取对CSS支持更好的布局，而如果没有，则采取兼容之前的布局办法。这便是Quirks模式（怪癖模式，诡异模式，怪异模式）。
差异：总体会有布局、样式解析和脚本实行三个方面的差异。
a. 盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。
b. 设置行内元素的高宽：在Standards模式下，给等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。
c. 设置百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用
d. 设置水平居中：利用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失落效。
11、请阐述table的缺陷
a. 太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的丢失便是大大增加了冗余代码量。
b. 灵巧性差，比如要将tr设置border等属性，是弗成的，得通过td
c. 代码臃肿，当在table中套用table的时候，阅读代码会显得非常混乱
d. 混乱的colspan与rowspan，用来布局时，频繁利用他们会造玉成部文档顺序混乱。
e. 不足语义
参考《为什么说table表格布局不好？》
12、简述一下src与href的差异
src用于更换当前元素；href用于在当前文档和引用资源之间确立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接
"大众年夜众号【传智播客博学谷】回答关键词：前端 PS Java Python 大数据 区块链 测试 PPT JS HTML 简历 领取干系学习资料！
二、CSS
1、谈谈你对CSS布局的理解
2、请列举几种可以打消浮动的方法（至少两种）
浮动会漂浮于普通流之上，像浮云一样，但是只能旁边浮动。正是这种特性，导致框内部由于不存在其他普通流元素了，表现出高度为0（高度塌陷）。
a. 添加额外标签，例如<div style=\"大众clear:both\"大众></div>
b. 利用br标签和其自身的html属性，例如<br clear=\公众all\公众 />
c. 父元素设置 overflow：hidden；在IE6中还须要触发hasLayout，例如zoom：1；
d. 父元素设置 overflow：auto 属性；同样IE6须要触发hasLayout
e. 父元素也设置浮动
f. 父元素设置display:table
g. 利用:after 伪元素；由于IE6-7不支持:after，利用 zoom:1触发 hasLayout。
在CSS2.1里面有一个很主要的观点，那便是 Block formatting contexts （块级格式化高下文），简称 BFC。
创建了BFC的元素便是一个独立的盒子，里面的子元素不会在布局上影响表面的元素，同时BFC仍旧属于文档中的普通流。
IE6-7的显示引擎利用的是一个称为布局（layout）的内部观点。
参考《那些年我们一起打消过的浮动》
3、请列举几种隐蔽元素的方法
a. visibility: hidden；这个属性只是大略的隐蔽某个元素，但是元素占用的空间任然存在。
b. opacity: 0；一个CSS3属性，设置0可以使一个元素完备透明，制作出和visibility一样的效果。与visibility比较，它可以被transition和animate
c. position: absolute；使元素分开文档流，处于普通文档之上，给它设置一个很大的left负值定位，使元素定位在可见区域之外。
d. display: none；元素会变得不可见，并且不会再占用文档的空间。
e. transform: scale(0)；将一个元素设置为无限小，这个元素将不可见。这个元素原来所在的位置将被保留。
f. HTML5 hidden attribute；hidden属性的效果和display:none;相同，这个属性用于记录一个元素的状态
g. height: 0; overflow: hidden；将元素在垂直方向上紧缩为0,使元素消逝。只要元素没有可见的边框，该技能就可以正常事情。
h. filter: blur(0)；将一个元素的模糊度设置为0，从而使这个元素“消逝”在页面中。
参考《利用CSS隐蔽HTML元素的4种常用方法》《通过HTML和CSS隐蔽和显示元素的4种方法》
4、如何让一段文本中的所有英文单词的首字母大写
text-transform：
none| capitalize(将每个单词的第一个字母转换成大写) | uppercase(将每个单词转换成大写 ) | lowercase(将每个单词转换成小写 )
5、请简述CSS样式表继续
CSS样式表继续指的是，特定的CSS属性向下通报到子孙元素。会被继续下去的属性如下：参考《CSS样式表继续详解》
文本相关：font-family，font-size， font-style，font-variant，font-weight， font，letter-spacing，line-height，color
列表干系：list-style-image，list-style-position，list-style-type， list-style
6、请简述CSS的选择器
元素选择器： 、E、 E#id、 E.class
关系选择器：E、F、E>F、E+F、E~F
属性选择器：E[att]、E[att=\"大众val\"大众]、E[att~=\"大众val\"大众]、E[att^=\"大众val\"大众]、E[att$=\公众val\"大众]、E[att=\"大众val\公众]、E[att|=\"大众val\"大众]
伪类选择器：E:link、E:visited、E:hover、E:active、E:focus、E:lang(fr)、E:not(s)、E:root、E:first-child、E:last-chil等
伪工具选择器：E:first-letter/E::first-letter、E:first-line/E::first-line、E:before/E::before、E:after/E::after、E::selection
参考《选择符列表》
7、CSS伪类与CSS伪工具的差异
CSS 引入伪类和伪元素的观点是为了描述一些现有CSS无法描述的东西
根本差异在于：它们是否创造了新的元素（抽象）
伪类：一开始用来表示一些元素的动态状态，随后CSS2标准扩展了其观点范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类
伪工具：代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中
参考《CSS伪类与CSS伪元素的差异及由来》
8、请简述CSS的权重规则
一个行内样式+1000，一个id+100，一个属性选择器/class类/伪类选择器+10，一个元素名/伪工具选择器+1。
关系选择器将拆分为两个选择器再打算。参考《CSS权重》
9、请写出多种等高布局
a. 假等高列：利用背景图片，在列的父元素上利用这个背景图进行Y轴的铺放，从而实现一种等高列的假像
b. 给容器div利用单独的背景色（固定布局）（流体布局）：用元素中的最大高度撑大其他的容器高度
c. 创建带边框的两列等高布局：用border-left来做，只能利用两列。
d. 利用正padding和负margin对冲实现多列布局方法：在所有列中利用正的上、下padding和负的上、下margin，并在所有列表面加上一个容器，设置overflow:hiden把溢出背景切掉
e. 利用边框和定位仿照列等高：但不能利用在多列
f. 模拟表格布局等高列效果：兼容性不好，在ie6-7无法正常运行
10、在CSS样式中常利用px、em，各有什么利害，在表现上有什么差异？
px是相对长度单位，相对付显示器屏幕分辨率而言的。
em是相对长度单位，相对付当前工具内文本的字体尺寸。
px定义的字体，无法用浏览器字体放大功能。
em的值并不是固定的，会继续父级元素的字体大小，1 ÷ 父元素的font-size × 须要转换的像素值 = em值。
11、CSS中 link 和@import 的差异是什么？
a. link属于HTML标签，而@import是CSS供应的，且只能加载 CSS
b. 页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
c. import只在IE5以上才能识别，而link是HTML标签，无兼容问题
d. link办法的样式的权重 高于@import的权重
e. 当利用 Javascript 掌握 DOM 去改变样式的时候，只能利用 link 办法，由于 @import 眼里只有 CSS ，不是 DOM 可以掌握
12、position的absolute与fixed共同点与不同点
相同：
a. 改变行内元素的呈现办法，display被置为block
b. 让元素分开普通流，不霸占空间
c. 默认会覆盖到非定位元素上
差异：
absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。
当你滚动网页，fixed元素与浏览器窗口之间的间隔是不变的。
13、position的值， relative和absolute分别是相对付谁进行定位的？
absolute：天生绝对定位的元素，相对付 static 定位以外的第一个先人元素进行定位
fixed：天生绝对定位的元素，相对付浏览器窗口进行定位。 （IE6不支持）
relative：天生相对定位的元素，相对付其在普通流中的位置进行定位
static：默认值。没有定位，元素涌如今正常的流中
14、CSS3有哪些新特性？
CSS3实现圆角（border-radius），阴影（box-shadow），对笔墨加殊效（text-shadow），线性渐变（gradient），变形（transform）
增加了更多的CSS选择器 多背景 rgba，在CSS3中唯一引入的伪元素是::selection，媒体查询，多栏布局
参考《CSS3中的动画效果记录》、《CSS3中border-radius、box-shadow与gradient那点事儿》
15、为什么要初始化CSS样式？
由于浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化每每会涌现浏览器之间的页面显示差异。
当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情形下初始化。
16、阐明下 CSS sprites事理，优缺陷
CSS Sprites实在便是把网页中一些背景图片整合到一张图片文件中，
再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，
background-position可以用数字精确的定位出背景图片的位置。
优点：
a. 减少网页的http要求
b. 减少图片的字节
c. 办理了网页设计师在图片命名上的困扰，只需对一张凑集的图片上命名就可以了，不须要对每一个小元素进行命名
d. 改换风格方便，只须要在一张或少张图片上修正图片的颜色或样式，全体网页的风格就可以改变。
缺陷：
a. 在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不足宽，很随意马虎涌现背景断裂
b. CSS Sprites在开拓的时候，要通过photoshop或其他工具丈量打算每一个背景单元的精确位置
c. 在掩护的时候比较麻烦，如果页面背景有少许改动，一样平常就要改这张合并的图片
17、阐明下浮动和它的事情事理？
a. 浮动元素分开文档流，不霸占空间（引起“高度塌陷”征象）
b. 浮动元素碰到包含它的边框或者浮动元素的边框勾留。
18、浮动元素引起的问题
a. 父元素的高度无法被撑开，影响与父元素同级的元素
b. 与浮动元素同级的非浮动元素会跟随其后
c. 若非第一个元素浮动，则该元素之前的元素也须要浮动，否则会影响页面显示的构造
19、什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？
如果利用import方法对CSS进行导入，会导致某些页面在Windows下的IE涌现一些奇怪的征象：
以无样式显示页面内容的瞬间闪烁，这种征象称之为文档样式短暂失落效(Flash of Unstyled Content)，简称为FOUC。
事理：当样式表晚于构造性html加载，当加载到此样式表时，页面将停滞之前的渲染。此样式表被***和解析后，将重新渲染页面，也就涌现了短暂的花屏征象。
办理方法：利用LINK标签将样式表放在文档HEAD中。
20、line-height三种赋值办法有何差异？（带单位、纯数字、百分比）
带单位：px不用打算，em则会使元素以其父元素font-size值为参考来打算自己的行高
纯数字：把比例通报给后代，例如父级行高为1.5，子元素字体为18px，则子元素行高为1.518=27px
百分比：将打算后的值通报给后代
参考《line-height的理解》、《浅析line-height和vertical》，查看在线源码。
21、:link、:visited、:hover、:active的实行顺序是怎么样的？
L-V-H-A，l(link)ov(visited)e h(hover)a(active)te，即用喜好和讨厌两个词来概括
22、常常碰着的浏览器兼容性有哪些？如何办理？
a. 浏览器默认的margin和padding不同
b. IE6双边距bug
c. 在ie6，ie7中元素高度超出自己设置高度。缘故原由是IE8以前的浏览器中会给元素设置默认的行高的高度导致的
d. min-height在IE6下不起浸染
e. 透明性IE用filter:Alpha(Opacity=60)，而其他主流浏览器用 opacity:0.6
f. input边框问题，去掉input边框一样平常用border:none;就可以，但由于IE6在解析input样式时的BUG(优先级问题)，在IE6下无效
23、有哪项办法可以对一个DOM设置它的CSS样式？
a. 外部样式表：通过<link>标签引入一个外部css文件
b. 内部样式表：将css代码放在 <style> 标签内部
c. 内联样式：将css样式直接定义在 HTML 元素内部
24、什么是外边距重叠？重叠的结果是什么？
外边距重叠便是margin-collapse。
在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是先人关系）的外边距可以结合成一个单独的外边距。这种合并外边距的办法被称为折叠，并且因而所结合成的外边距称为折叠外边距。
折叠结果遵照下列打算规则：
a. 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
b. 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
c. 两个外边距一正一负时，折叠结果是两者的相加的和。
25、rgba()和opacity的透明效果有什么不同？
a. opacity浸染于元素，以及元素内的所有内容的透明度，rgba()只浸染于元素的颜色或其背景色。
b. 设置rgba透明的元素的子元素不会继续透明效果！
26、css属性content有什么浸染？有什么运用？
css的content属性专门运用在 before/after 伪元素上，用于来插入天生内容。
可以合营自定义字体显示分外符号。
"大众年夜众号【传智播客博学谷】回答关键词：前端 PS Java Python 大数据 区块链 测试 PPT JS HTML 简历 领取干系学习资料！
