一、Html5、Css3 篇
1、HTML5 新增那些标签?
语义化标签
<header> 定义文档的头部区域
<nav> 定义导航链接
<article> 内容标签
<section> 定义文档某个区域
<aside> 侧边栏标签
<footer> 定义了文档的尾部区域
<figure> 规定独立的流内容（图像、图表、照片、代码等）
<figcaption> 定义 <figure> 元素的标题
增强表单功能 (类型和属性)
音频视频：<Audio> 、<video>
画布：<Canvas>
SVG 绘图
地理位置
拖拽 APL
WebStorage （本地存储：LocalStorage / SessionStorage ）
2、HTML、XHTML、XML 有什么区别？
XML： XML 是可扩展标记语言，主要是用来存储和传输数据，而非显示数据，可以用来标记数据，定义数据类型，允许用户对自己的标记语言进行定义。
HTML：HTML 是超文本标记语言，主要是用来描述网页的一种标记语言，通过标记标签来描述网页。
XHTML：XHTML 是可扩展超文本标记语言，XHTML 基于 XML 和 HTML 而来，也是用来描述网页的标记语言，是更严格的 HTML 版本。例如：XHTML 元素必须被正确地嵌套，标签名必须用小写字母， 文档必须拥有根元素，对于图片需添加 alt 属性等。XHTML 和 HTML 4.01 几乎是相同的，XHTML 是 W3C 标准。
XML和HTML区别：XML 相比 HTML 语法要求严格。HTML 是预定义的，XML 标签是免费的、自定义的、可扩展的。HTML 的设计目的是显示数据并集中于数据外观，XML 的设计目的是描述数据、存放数据并集中于数据的内容。XML 是一种跨平台的，数据处理和传输的工具。总的来说，XML用来传输数据，而 HTML 和 XHTML 用来描述网页，XHTML 比 HTML 更为严格。
3、 XML和JSON的区别？
JSON：JSON 是一种轻量级的数据交换格式，它基于 JavaScript 的一个子集，简单的说 JSON 就是一串字符串用于不同平台的数据交换。
XML：XML 是可扩展标记语言，是标准通用标记语言 (SGML) 的子集，XML 主要是用来存储和传输数据，而非显示数据，可以用来标记数据、定义数据类型，允许用户对自己的标记语言进行定义。
JSON和XML区别：JSON 数据的体积小，传递速度更快，与 JavaScript 数据交互更加方便，更容易解析处理。XML 对数据的描述性比较好。JSON 支持数组，XML 不支持数组。JSON 不支持命名空间，XML 支持命名空间。JSON 容易阅读，XML 难以阅读和解释。JSON 不使用结束标记，XML 有开始和结束标签。JSON 的安全性较低，不支持注释，仅支持 UTF-8 编码。XML 比 JSON 更安全，支持注释，支持各种编码。
4、是否了解W3C的规范？
w3c 标准指的是万维网联盟标准，万维网联盟标准指的不是一个标准，而是一系列标准的集合。web 可以简单分为结构、表现、行为三部分，三部分独立开来使其模块化，w3c 是对 web 做出规范，使代码更加严谨，做出来的网页更加容易使用和维护。
结构标准主要包括 XHTML 和 XML ，比如像标签闭合、标签元素和属性名字小写、标签不乱嵌套、属性必须有属性值、属性值必须用引号括起来、特殊符号用编码表示、定义语言编码等。标签规范可以提高搜索引擎对页面的抓取效率，对 SEO (搜索引擎优化) 很有帮助，越规范的网站搜索排名越靠前。
表现标准主要包括 CSS，行为标准主要包括对象模型（像 W3C DOM，ECMAScript），比如说尽量使用外链的 css 和 js 脚本，提高页面的渲染效率，尽量少使用行内样式，类名要做到见名知意。遵循 w3c 标准可以让我们的页面，我们的程序能够支持所有浏览器，能够满足尽可能多的用户。
W3C 标准的体现，也就是说是开发者在开发过程中怎么去准守 W3C 标准，其实这里面很多规范是为了 XHTML 的，jQurry 不符合 W3C 标准。
5、常用的块级元素和行内元素有哪一些?
- 块级元素：div、p、h1~h6、ol、ul、li、table、form。
- 行内标签：a、span、img、input、lable、button。
- 行内块元素：img、input、button。
6、DOCTYPE(⽂档类型) 的作⽤
Doctype是HTML5的文档声明，通过它可以告诉浏览器，使用哪一个HTML版本标准解析文档。在浏览器发展的过程中，HTML出现过很多版本，不同的版本之间格式书写上略有差异。如果没有事先告诉浏览器，那么浏览器就不知道文档解析标准是什么？此时，大部分浏览器将开启最大兼容模式来解析网页，我们一般称为怪异模式，这不仅会降低解析效率，而且会在解析过程中产生一些难以预知的bug，所以文档声明是必须的。
浏览器渲染页面的两种模式（可通过document.compatMode获取）：
CSS1Compat：标准模式（Strick mode），默认模式，浏览器使用W3C的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈现页面。
BackCompat：怪异模式(混杂模式)(Quick mode)，浏览器使用自己的怪异模式解析渲染页面。在怪异模式中，页面以一种比较宽松的向后兼容的方式显示。
7、行内元素和块级元素的区别？
块级元素：默认换行，独占一行，可设置宽高 (宽度是父容器的100%)，块级元素可以嵌套任意元素，块级文字不能放入其他块级元素。
行内元素：默认不换行，设置宽高无效 (默认宽度是本身内容宽度)，不能包含块级元素，只能包含文本或者其它行内元素，设置 margin，padding 上下无效。
行内块元素：综合块级元素与行内元素的特性，可设宽高（默认是内容宽高），也可以设置内外边距。
8、css盒子模型有几种类型？它们区别是什么
根据盒子大小的计算方式不同，css 盒子模型分成了两种类型，分别是 W3C 标准盒子模型和怪异盒子模型也叫 IE 盒子模型。
标准盒子模型：设置的宽度 = 内容的宽度，盒子的宽度 = 内容的宽度 + padding*2 + margin*2 + border*2。
IE盒子模型：设置的宽度 = 盒子的宽度，内容的宽度 = 盒子的宽度 - padding*2 - margin*2 - border*2。
默认情况下都是标准盒子模型，设置 IE 盒子模型：box-sizing:border-box，设置标准模型：box-sizing:content-box
9、盒子居中的几种方式
1. 使用 margin: auto
适用于块级元素，前提是元素有明确的宽度。
.container {
width: 200px;
height: 200px;
margin: auto;
}
2. 使用 Flexbox
Flexbox 是一种非常强大的布局方式，可以轻松实现水平和垂直居中。
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh; /* 容器高度 */
}
3. 使用 Grid
CSS Grid 也是一种强大的布局方式，可以实现居中。
.container {
display: grid;
place-items: center; /* 水平和垂直居中 */
height: 100vh; /* 容器高度 */
}
4. 使用 position 和 transform
适用于不知道元素宽高的情况。
.container {
position: relative;
height: 100vh;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
10、css3的新特性有哪些？
选择器：层级选择器，属性选择器，状态伪类选择器，结构伪类选择器，伪元素选择器
文本效果：文本阴影 ，文本自动换行，文本溢出，（单词拆分，文本拆分）
边框：圆角边框 border-radius，边框阴影 box-shadow，边框图片 border-image
背景：渐变背景，多重背景 (设定背景图像的尺寸，指定背景图像的位置区域，背景的绘制)
透明度：opacity （ 取值0-1，通常用于做元素的遮罩效果）
高斯模糊：filter
渐变：background: linear-gradient (线性渐变，径向渐变 ，文字渐变)
过渡：transition
2D转换 / 3D转换： transform
动画：Animation （@keyframes 动画帧）
媒体查询：@media
多列布局 (兼容性不好，还不够成熟)
弹性布局 （flex）
网格布局
11、css选择器有哪些？
基本选择器：
标签选择器 （ div { } ）
id 选择器 （ id=”a”, #a { } ）
类选择器 class （class=”b”, .b { } ）
通配符选择器 （ * { } ）
CSS3新增选择器：
层级选择器：
后代选择器 ul li { } : 选择子类元素，包括间接子类
子代选择器 ul>li { } ：选择子类元素，只包括直接子类
相邻兄弟选择器 div+p { } : 选择紧跟在 div 元素后面的 p 元素
通用兄弟选择器 div~p { } : 选择 div 元素后面的所有 p 元素
共享选择器 div1，div2 { } ：选择所有元素
状态伪类选择器
结构伪类选择器
表单伪类选择器
伪元素选择器
属性选择器
12、什么是浮动？
设置浮动的图片，可以实现文字环绕图片。设置了浮动的块级元素可以排列在同一行。设置了浮动的行内元素可以设置宽高。浮动造成的影响：使盒子脱离文档流，如果父级盒子没有设置高度，需要被子盒子撑开，那么这时候父级盒子的高度就塌陷了，同时也会造成后面的盒子布局受到影响。
13、清除浮动有哪些方法?
清除浮动，主要是为了解决父级元素因为子级浮动引起的内部高度为 0 的问题
父级div定义height （只适合高度固定的布局）
结尾处加空div标签然后添加一个clear:both样式 （浮动多的话要加很多个div）
父级 div 定义 overflow：hidden 超出盒子部分会被隐藏 （不推荐）
父级div定义伪类:（推荐）
clearfix：after
{
content：""；
display：block；
visibility：hidden；
height：0；
line-height：0；
clear：both；
}
14、CSS 样式覆盖规则？
规则一：由于继承而发生样式冲突时，最近祖先获胜。
规则二：继承的样式和直接指定的样式冲突时，直接指定的样式获胜。
规则三：直接指定的样式发生冲突时，样式权值高者获胜。
规则四：样式权值相同时，后者获胜。
规则五：!important 的样式属性不被覆盖。
15、CSS 样式的优先级？
引入方式：内联样式的优先级高于嵌入和外链，嵌入和外链的选择器相同就看他们在页面的插入顺序，后面插入的会覆盖前面的。
选择器优先级：id 选择器高于 ( 类选择器/伪类选择器/属性选择器 ) 高于 ( 标签选择器/后代选择器/伪元素选择器 ) 高于 ( 子选择器/相邻选择器 ) 高于通配符 *。
继承样式：继承样式是所有样式中优先级比较低的，浏览器默认样式优先级最低。
!important：!important 最高权重，无论引入方式是什么，选择器是什么，它的优先级都是最高的。所以 !important 使用要谨慎，一定要优先考虑使用样式优先级的规则来解决问题而不是 !important 。只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important。永远不要在插件中使用 !important ，永远不要在全站范围的 CSS 代码中使用 !important.
!important >> 内联样式 >> id 选择器 >> 类选择器/伪类选择器/属性选择器 >> 标签选择器/后代选择器/伪元素选择器 >> 子选择器/相邻选择器 >> 通配符 * >> 继承样式 >> 浏览器默认样式
16、display: none 和 visibily: hidden 区别?
display:none：隐藏对应的元素，整个元素消失不占空间。
visibily:hidden：隐藏对应的元素，元素还会占用空间。
disapaly 还可以转换元素类型，可以转换成块级元素、行内元素，行内块元素、弹性布局、网格布局等。visibility 只能做隐藏。
17、相对定位，绝对定位，固定定位的区别？
position:relative：相对定位，相对于自己进行定位。
position:absolute：绝对定位，相对于有相对定位的父级元素进行定位，没有就找 body。
position:fixed：固定定位，相对于浏览器定位。
