HTML
1.简述一下你对 HTML 语义化的理解？
p>①用正确的标签做正确的事情。
②html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的;
③ 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO;
④ 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
2.Label 的作用是什么？是怎么用的
label 标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
3.iframe 框架有那些优缺点？
优点
iframe 能够原封不动的把嵌入的网页展现出来。
如果有多个网页引用 iframe，那么你只需要修改 iframe 的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用 iframe 来嵌套，可以增加代码的可重用。
如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由 iframe 来解决。
缺点
框架结构中出现各种滚动条
iframe 会阻塞主页面的 Onload 事件
搜索引擎的检索程序无法解读这种页面，不利于 SEO
iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
4.HTML 与 XHTML 二者有什么区别
应该使用XHTML，因为XHTML是XML重写了HTML的规范，比HTML更加严格，表现如下：
1、XHTML中所有的标记都必须有一个相应的结束标签；
2、XHTML所有标签的元素和属性的名字都必须使用小写；
3、所有的XML标记都必须合理嵌套；
4、所有的属性都必须用引号“”括起来；
5、把所有‹和&特殊符号用编码表示；
6、给所有属性附一个值；
7、不要在注释内容中使用“--”；
8、图片必须使用说明文字。
5.HTML5 的 form 如何关闭自动完成功能？
将不想要自动完成的 form 或 input 设置为 autocomplete=off
6.title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区
①title用于网站信息标题，突出网站标题或关键字，一个网站可以有多个title，seo权重高于H1；H1概括的是文章主题，一个页面最好只用一个H1，seo权重低于title。
解析：
A.从网站角度而言，title则重于网站信息标题，突出网站标题或关键字用title，一篇文章，一个页面最好只
用一个H1，H1用得太多，会稀释主题；一个网站可以有多个title，最好一个单页用一个title以便突出网站页面
主题信息。
B.从文章角度而言，H1则概括的是文章主题，突出文章主题，用H1，面对的用户，要突出其视觉效果。
C.从SEO角度而言，title的权重高于H1，其适用性要比H1广。
②b为了加粗而加粗，strong为了标明重点而加粗
7.严格模式与混杂模式
严格模式：以浏览器支持的最高标准运行
混杂模式：页面以宽松向下兼容的方式显示，模拟老式浏览器的行为
8.前端页面有哪三层构成，分别是什么？作用是什
分成：结构层、表示层、行为层。
结构层（structural layer）
由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”
表示层（presentation layer）
由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。
行为层（behaviorlayer）
负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。
9.为什么用多个域名存储网站资源更有效？
1、CDN 缓存更方便
2、突破浏览器并发限制
3、节约 cookie 带宽
4、节约主域名的连接数，优化页面响应速度
5、防止不必要的安全问题
10. div+css 的布局较 table 布局有什么优点
分离 方便改版 快清晰简洁 seo
1.改版的时候更方便 只要改 css 文件。
2.页面加载速度更快、结构化清晰、页面显示简洁。
3.表现与结构相分离。
4.易于优化（seo）搜索引擎更友好，排名更容易靠前。
11.渐进增强和优雅降级之间的不同吗?
渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
（一开始保证最基本的功能，再改进和追加功能）
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
（一开始就构建完整的功能，再针对低版本浏览器进行兼容。）
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
12.html 常见兼容性问题？
1.双边距 BUG float 引起的，解决办法: 使用 display解决
2.3 像素问题 使用 float 引起的，解决办法: 使用 dislpay:inline -3px
3.超链接 hover 点击后失效，解决办法: 使用正确的书写顺序 link visited hover active
4.Ie z-index 问题，解决办法: 给父级添加 position:relative
5.Png 透明 ，解决办法: 使用 js 代码
6.Min-height 最小高度 ，解决办法: ！Important 解决
7.select 在 ie6 下遮盖，解决办法: 使用 iframe 嵌套
8.为什么没有办法定义 1px 左右的宽度容器，解决办法: （IE6 默认的行高造成的，使用 over:hidden,zoom:0.08 line-height:1px）
9.IE5-8 不支持 opacity，解决办法：
.opacity {
opacity: 0.4;
filter: alpha(opacity=60); /_ for IE5-7 _/
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=60)'; /_ for IE 8_/
}
10.IE6 不支持 PNG 透明背景，解决办法: IE6 下使用 gif 图片 或者filter滤镜
13..html5 有哪些新特性、移除了那些元素？
新特性：
拖拽释放(Drag and drop) API
语义化更好的内容标签（header,nav,footer,aside,article,section）
音频、视频 API(audio,video)
画布(Canvas) API
地理(Geolocation) API
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
表单控件，calendar、date、time、email、url、search
新的技术 webworker, websocket, Geolocation
移除的元素：
纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
支持 HTML5 新标签：
IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签， 可以利用这一特性让这些浏览器支持 HTML5 新标签， 浏览器支持新标签后，还需要添加标签默认的样式：
当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架
14.HTML 全局属性(global attribute)有哪些
accesskey:设置快捷键，提供快速访问元素如aaa在 windows 下的 firefox 中按 alt + shift + a 可激活元素
class:为元素设置类标识，多个类名用空格分开，CSS 和 javascript 可通过 class 属性获取元素
contenteditable: 指定元素内容是否可编辑
contextmenu: 自定义鼠标右键弹出菜单内容
data-*: 为元素增加自定义属性
dir: 设置元素文本方向
draggable: 设置元素是否可拖拽
dropzone: 设置元素拖放类型： copy, move, link
hidden: 表示一个元素是否与文档。样式上会导致元素不显示，但是不能用这个属性实现样式效果
id: 元素 id，文档内唯一
lang: 元素内容的的语言
spellcheck: 是否启动拼写和语法检查
style: 行内 css 样式
tabindex: 设置元素可以获得焦点，通过 tab 可以导航
title: 元素相关的建议信息
translate: 元素和子孙节点内容是否需要本地化
15.什么是渐进式渲染
渐进式渲染（progressive rendering）
渐进式渲染是用于提高网页性能（尤其是提高用户感知的加载速度），以尽快呈现页面的技术。
在以前互联网带宽较小的时期，这种技术更为普遍。如今，移动终端的盛行，而移动网络往往不稳定，渐进式渲染在现代前端开发中仍然有用武之地。
一些举例：
图片懒加载——页面上的图片不会一次性全部加载。当用户滚动页面到图片部分时，JavaScript 将加载并显示图像。
确定显示内容的优先级（分层次渲染）——为了尽快将页面呈现给用户，页面只包含基本的最少量的 CSS、脚本和内容，然后可以使用延迟加载脚本或监听DOMContentLoaded/load事件加载其他资源和内容。
异步加载 HTML 片段——当页面通过后台渲染时，把 HTML 拆分，通过异步请求，分块发送给浏览器。
16.img 上 title 与 alt
title 指图片的信息、alt 指图片不显示时显示的文字
CSS
1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒
（1）有两种， IE 盒子模型、W3C 盒子模型；
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
（3）区 别： IE 的 content 部分把 border 和 padding 计算了进去;
2.CSS 隐藏元素的几种方法（至少说出三种）
Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;
Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;
Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;
Position:不会影响布局，能让元素保持可以操作;
Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，浏览器支持度还要低;
3.CSS 清除浮动的几种方法（至少两种）
清除浮动： 核心：clear:both;
①使用额外标签法（不推荐使用）
在浮动的盒子下面再放一个标签，使用 clear:both;来清除浮动
a 内部标签：会将父盒子的高度重新撑开
b 外部标签：只能将浮动盒子的影响清除，但是不会撑开盒子
②使用 overflow 清除浮动（不推荐使用）
先找到浮动盒子的父元素，给父元素添加一个属性：overflow:hidden;就会清除子元素对页面的影响
③使用伪元素清除浮动(用的最多)
伪元素：在页面上不存在的元素，但是可以通过 css 添加上去
种类：
:after(在。。。之后)
:before(在。。。之前)
注意：每个元素都有自己的伪元素
.clearfix:after {
content:'';
height:0;
line-height:0;
display:block;
clear:both;
visibility:hidden; /_将元素隐藏起来_/\
}
在页面的 clearfix 元素后面添加了一个空的块级元素
（这个元素的高为 0 行高也为 0 并且这个元素清除了浮动）
.clearfix {
zoom:1;/_为了兼容 IE6_/
}
4.页面导入样式时，使用 link 和@import 有什么区别
Link 属于 html 标签，而@import 是 CSS 中提供的
在页面加载的时候，link 会同时被加载，而@import 引用的 CSS 会在页面加载完成后才会加载引用的 CSS
@import 只有在 ie5 以上才可以被识别，而 link 是 html 标签，不存在浏览器兼容性问题
Link 引入样式的权重大于@import 的引用（@import 是将引用的样式导入到当前的页面中）
5.伪元素和伪类的区别？
伪元素使用 2 个冒号，常见的有：::before，::after，::first-line，::first-letter，::selection、::placeholder 等；
伪类使用1个冒号，常见的有：:hover，:link，:active，:target，:not()，:focus等。
伪元素添加了一个页面中没有的元素（只是从视觉效果上添加了，不是在文档树中添加）；
伪类是给页面中已经存在的元素添加一个类。
6.CSS 选择符有哪些？哪些属性可以继承？优先级算
1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul id > class > tag
important 比 内联优先级高
7.CSS3新增伪类举例：
p:first-of-type 选择属于其父元素的首个 ‹p› 元素的每个 ‹p› 元素。
p:last-of-type 选择属于其父元素的最后 ‹p› 元素的每个 ‹p› 元素。
p:only-of-type 选择属于其父元素唯一的 ‹p› 元素的每个 ‹p› 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 ‹p› 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 ‹p› 元素。
:enabled、:disabled 控制表单控件的禁用状态。
:checked，单选框或复选框被选中。
8.行内元素和块级元素的具体区别是什么
块级元素(block)特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：
内联元素(inline)特性：
和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的 top/bottom(padding-top/padding-bottom)和外边距的 top/bottom(margin-top/margin-bottom)都不可改变（也就是 padding 和 margin 的 left 和 right 是可以设置的），就是里面文字或图片的大小。
9.什么是外边距重叠？重叠的结果是什么？
外边距重叠就是 margin-collapse。
在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
折叠结果遵循下列计算规则：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和
10.rgba()和 opacity 的透明效果有什么不同？
rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度，
而 rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果！）
11.css 中可以让文字在垂直和水平方向上重叠的两个
垂直方向：line-height
水平方向：letter-spacing
12. px 和 em 的区别
px 和 em 都是长度单位，区别是，px 的值是固定的，指定是多少就是多少，计算比较容易。em 得值不是固定的，并且 em 会继承父级元素的字体大小。
浏览器的默认字体高都是 16px。所以未经调整的浏览器都符合: 1em=16px。那么 12px=0.75em, 10px=0.625em。
13.如何垂直居中一个元素？
方法一：绝对定位居中（原始版之已知元素的高宽）
.content {
width: 200px;
height: 200px;
background-color: #6699ff;
position: absolute; /*父元素需要相对定位*/
top: 50%;
left: 50%;
margin-top: -100px; /*设为高度的1/2*/
margin-left: -100px; /*设为宽度的1/2*/
}
方法二：绝对定位居中（改进版之一未知元素的高宽）
.content {
width: 200px;
height: 200px;
background-color: #6699ff;
position: absolute; /*父元素需要相对定位*/
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /*在水平和垂直方向上各偏移-50%*/
}
方法三：绝对定位居中（改进版之二未知元素的高宽）
.content {
width: 200px;
height: 200px;
background-color: #6699ff;
margin: auto; /*很关键的一步*/
position: absolute; /*父元素需要相对定位*/
left: 0;
top: 0;
right: 0;
bottom: 0; /*让四个定位属性都为0*/
}
方法四：flex 布局居中
body {
display: flex; /*设置外层盒子display为flex*/
align-items: center; /*设置内层盒子的垂直居中*/
justify-content: center; /*设置内层盒子的水平居中*/
}
.content {
width: 200px;
height: 200px;
background-color: #6699ff;
}
14.BFC
什么是 BFC
BFC（Block Formatting Context）格式化上下文，是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。
形成 BFC 的条件
浮动元素，float 除 none 以外的值
定位元素，position（absolute，fixed）
display 为以下其中之一的值 inline-block，table-cell，table-caption
overflow 除了 visible 以外的值（hidden，auto，scroll）
BFC 的特性
内部的 Box 会在垂直方向上一个接一个的放置。
垂直方向上的距离由 margin 决定
bfc 的区域不会与 float 的元素区域重叠。
计算 bfc 的高度时，浮动元素也参与计算
bfc 就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。
15.用纯 CSS 创建一个三角形的原理是什么？
span {
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
}
16.移动端 1px 问题的解决办法
推荐解决方法：媒体查询 + transfrom
/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
}
17.哪些 css 属性可以继承？
可继承： font-size font-family color, ul li dl dd dt;
不可继承 ：border padding margin width height ;