HTML 与 XHTML 二者有什么区别
应该使用XHTML，因为XHTML是XML重写了HTML的规范，比HTML更加严格，表现如下：
1、XHTML中所有的标记都必须有一个相应的结束标签；
2、XHTML所有标签的元素和属性的名字都必须使用小写；
3、所有的XML标记都必须合理嵌套；
4、所有的属性都必须用引号“”括起来；
5、把所有‹和&特殊符号用编码表示；
6、给所有属性附一个值；
7、不要在注释内容中使用“–”；
8、图片必须使用说明文字。
Doctype，知道这是干什么的么？
‹!DOCTYPE› 声明位于文档中的最前面的位置，处于 ‹html› 标签之前。
1.告知浏览器文档使用哪种 HTML 或 XHTML 规范。
2.告诉浏览器按照何种规范解析页（如果你的页面没有 DOCTYPE 的声明，那么 compatMode 默认就是 BackCompat,浏览器按照自己的方式解析渲染页面）
解析：
doctype 是一种标准通用标记语言的文档类型声明，目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义（DTD）来解析文档。
声明是用来指示web浏览器关于页面使用哪个HTML版本进行编写的指令。 声明必须是HTML文档的第一行，位于html标签之前。
浏览器本身分为两种模式，一种是标准模式，一种是怪异模式，浏览器通过 doctype 来区分这两种模式，doctype 在 html 中的作用就是触发浏览器的标准模式，如果 html 中省略了 doctype，浏览器就会进入到 Quirks 模式的怪异状态，在这种模式下，有些样式会和标准模式存在差异，而 html 标准和 dom 标准值规定了标准模式下的行为，没有对怪异模式做出规定，因此不同浏览器在怪异模式下的处理也是不同的，所以一定要在 html 开头使用 doctype。
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为了标明重点而加粗
前端页面有哪三层构成，分别是什么？作用是什
分成：结构层、表示层、行为层。
结构层（structural layer）
由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”
表示层（presentation layer）
由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。
行为层（behaviorlayer）
负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。
渐进增强和优雅降级之间的不同吗?
渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
（一开始保证最基本的功能，再改进和追加功能）
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
（一开始就构建完整的功能，再针对低版本浏览器进行兼容。）
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
知道什么是微格式吗？
微格式（Microformats）是一种让机器可读的语义化 XHTML 词汇的集合，是结构化数据的开放标准。是为特殊应用而制定的特殊格式。
优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。（应用范例：豆瓣，有兴趣自行 google）
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滤镜
什么是渐进式渲染
渐进式渲染（progressive rendering）
渐进式渲染是用于提高网页性能（尤其是提高用户感知的加载速度），以尽快呈现页面的技术。
在以前互联网带宽较小的时期，这种技术更为普遍。如今，移动终端的盛行，而移动网络往往不稳定，渐进式渲染在现代前端开发中仍然有用武之地。
一些举例：
图片懒加载——页面上的图片不会一次性全部加载。当用户滚动页面到图片部分时，JavaScript 将加载并显示图像。
确定显示内容的优先级（分层次渲染）——为了尽快将页面呈现给用户，页面只包含基本的最少量的 CSS、脚本和内容，然后可以使用延迟加载脚本或监听DOMContentLoaded/load事件加载其他资源和内容。
异步加载 HTML 片段——当页面通过后台渲染时，把 HTML 拆分，通过异步请求，分块发送给浏览器。
如何在页面上实现一个圆形的可点击区域？
答案：css3、js、map 加 area
一.border-radius (css3)
对于圆形，最直接的方法想到的就是 css3 的圆角属性，这个属性可以将 html 元素的形状设置为圆形，这之后你想对该圆形区域设置什么事件就设置什么事件(当然包括点击)。（这里就不做具体的 test 了）
二.通过事件坐标来实现（js）
也就是通过 js 来进行一个区域判断，进而简介地的形成可点区域，以下给出主要的 js 测试代码：
// 获取目标元素
var box = document.getElementById(‘box’);
// 对目标元素target的圆形区域进行一个点击事件绑定
function bindClickOnCircleArea(target, callback) {
target.onclick = function(e) {
e = e || window.event;
// target中心点的坐标
var x1 = 100;
var y1 = 100;
// 事件源坐标
var x2 = e.offsetX;
var y2 = e.offsetY;
// 校验是否在圆形点击区，在的话就执行callback回调
// 计算事件触发点与target中心的位置
var len = Math.abs(Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)));
// 通过半径进行校验
if (len ‹= 100) {
callback();
} else {
alert(‘死鬼，跑哪去啊，你老婆我是黄皮肤还是白皮肤都分不清了吗’);
}
};
}
// 执行
bindClickOnCircleArea(box, function() {
alert(‘老婆，你让我好找啊，呜呜呜’);
});
三.通过 map 加 area
‹img src=’…/imgs/test.jpg’ width=‘200’ border=‘0’ usemap=’#Map’ /›
‹map name=‘Map’ id=‘Map’›
‹area
shape=‘circle’
coords=‘100,100,100’
href=‘http://www.baidu.com’
target=’_blank’
/›
‹/map›
DOM 和 BOM 有什么区别
BOM
Browser Object Model，浏览器对象模型
BOM 是为了操作浏览器出现的 API，window 是其的一个对象
window 对象既为 javascript 访问浏览器提供 API，同时在 ECMAScript 中充当 Global 对象
DOM
Document Object Model，文档对象模型
DOM 是为了操作文档出现的 API，document 是其的一个对象
DOM 和文档有关，这里的文档指的是网页，也就是 html 文档。DOM 和浏览器无关，他关注的是网页本身的内容。
介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒
（1）有两种， IE 盒子模型、W3C 盒子模型；
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
（3）区 别： IE 的 content 部分把 border 和 padding 计算了进去;
CSS 隐藏元素的几种方法（至少说出三种）
Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;
Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;
Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;
Position:不会影响布局，能让元素保持可以操作;
Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，浏览器支持度还要低;
.页面导入样式时，使用 link 和@import 有什么区别
Link 属于 html 标签，而@import 是 CSS 中提供的
在页面加载的时候，link 会同时被加载，而@import 引用的 CSS 会在页面加载完成后才会加载引用的 CSS
@import 只有在 ie5 以上才可以被识别，而 link 是 html 标签，不存在浏览器兼容性问题
Link 引入样式的权重大于@import 的引用（@import 是将引用的样式导入到当前的页面中）
伪元素和伪类的区别？
伪元素使用 2 个冒号，常见的有：::before，::after，::first-line，::first-letter，::selection、::placeholder 等；
伪类使用1个冒号，常见的有：:hover，:link，:active，:target，:not()，:focus等。
伪元素添加了一个页面中没有的元素（只是从视觉效果上添加了，不是在文档树中添加）；
伪类是给页面中已经存在的元素添加一个类。
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，单选框或复选框被选中。
rgba()和 opacity 的透明效果有什么不同？
rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度，
而 rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果！）
如何垂直居中一个元素？
方法一：绝对定位居中（原始版之已知元素的高宽）
.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;
}
}
那么问题来了，如何垂直居中一个 img（用更简便的方法。）
.content {
//img的容器设置如下
display: table-cell;
text-align: center;
vertical-align: middle;
}
用纯 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;
}
display:none 与 visibility:hidden 的区别是什么？
display : 隐藏对应的元素但不挤占该元素原来的空间。
visibility: 隐藏对应的元素并且挤占该元素原来的空间。
即是，使用 CSS display:none 属性后，HTML 元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用 visibility:hidden 属性后，HTML 元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。
CSS3 动画（简单动画的实现，如旋转等）
让一个 div 元素旋转 360 度示例
div 的样式结构:
div {
margin: 50px auto;
width: 200px;
height: 200px;
background-color: pink;
}
设置旋转属性的类名:
div.rotate {
/* 旋转360度 /
transform: rotate(360deg);
/ all表示所有属性,1s表示在一秒的时间完成动画 */
transition: all 1s;
}
transition 有四个属性:
property: 规定应用过渡的 CSS 属性的名称。
duration: 定义过渡效果花费的时间。默认是 0,单位是 s。
timing-function: 规定过渡效果的时间曲线。默认是 ‘ease’。匀速’linear’,加速’ease-in’,减速’ease-out’,先快后慢’ease-in-out’。
delay: 规定过渡效果何时开始。默认是 0。单位 s。
可以连写: transition: property duration timing-function delay;
给 div 元素设置鼠标移入时旋转,也就是给它加上.rotate 类名.鼠标移出时移除类名
$(function() {
$(‘div’)
.mouseenter(function() {
$(this).addClass(‘rotate’);
})
.mouseleave(function() {
$(this).removeClass(‘rotate’);
});
});
选择器
E:last-child 匹配父元素的最后一个子元素 E。
E:nth-child(n)匹配父元素的第 n 个子元素 E。
E:nth-last-child(n) CSS3 匹配父元素的倒数第 n 个子元素 E。
box-sizing:border-box会产生怎样的效果？
元素默认应用了box-sizing: content-box，元素的宽高只会决定内容（content）的大小。
box-sizing: border-box改变计算元素width和height的方式，border和padding的大小也将计算在内。
元素的height = 内容（content）的高度 + 垂直方向的padding + 垂直方向border的宽度
元素的width = 内容（content）的宽度 + 水平方向的padding + 水平方向border的宽度
文本超出部分显示省略号
单行
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // 最多显示几行
overflow: hidden;
