2HTML5+CSS3
HTML5新增
新元素
-
canves
-
audio(音频)，video(视频)，source（多媒体资源），embed(定义嵌入内容，例如插件)，track（为诸如 和 元素之类的媒介规定外部文本轨道。）
-
datalist(定义选项列表，与input配合使用，定义input可能的的值)，keygen(规定用于表单的密钥对生成器字段)，output(定义不同类型的输出)
。。。。。
canvas
HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.标签只是图形容器，您必须使用脚本来绘制图形。
你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。
getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
HTML5 内联 SVG
SVG表示可缩放矢量图形，是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式，
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用于定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
- SVG 是万维网联盟的标准
- SVG 与 DOM 和 XSL 之类的 W3C 标准是一个整体
SVG优势
与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
- SVG 图像可通过文本编辑器来创建和修改
- SVG 图像可被搜索、索引、脚本化或压缩
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
SVG 与 Canvas两者间的区别
SVG 是一种使用 XML 描述 2D 图形的语言。
Canvas 通过 JavaScript 来绘制 2D 图形。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
Canvas 与 SVG 的比较
下表列出了 canvas 与 SVG 之间的一些不同之处。
| Canvas | SVG |
|---|---|
| 1.依赖分辨率 2.不支持事件 3.处理器弱的文本渲染 4.能力能够以 .png 或 .jpg 格式保存结果 5.图像最适合图像密集型的游戏，其中的许多对象会被频繁重绘 | 1.不依赖分辨率 2.支持事件 3,处理器最适合带有大型渲染区域的应用程序（比如谷歌地图） 4.复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快） 5.不适合游戏应用 |
HTML5 MathML
MathML 与 HTML相似度很高，但是比较繁琐。它继承了角括号和双标签（<标签>内容）的用法。
HTML5 可以在文档中使用 MathML 元素，对应的标签是 … 。
MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。
拖放
draggable=“true”
拖放元素事件：
- dragstart 在元素开始被拖动时触发
- dragend 在拖动操作完成时触发
- drag 在元素被拖动时触发
释放区事件
- dragenter 被拖动元素进入到释放区所占据的屏幕空间时触发
- dragover 被拖动元素处于释放区所占据的屏幕空间时触发（ e.preventDefault();要取消其默认事件，否则drop事件无效）
- dragleave被拖动元素离开释放区所占据的屏幕空间时触发
- drop 被拖动元素被放置在释放区所占据的屏幕空间时触发（ e.preventDefault();要取消其默认事件，否则drop事件无效）
HTML5 Geolocation（地理定位）
HTML5 Geolocation（地理定位）用于定位用户的位置。
Geolocation 通过请求一个位置信息，用户同意后，浏览器会返回一个包含经度和维度的位置信息！
- getCurrentPosition(function1,function2) 方法来获得用户的位置。function1:得到位置信息的回调函数,function2:错误情况下的回调函数
- watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。
- clearWatch() - 停止 watchPosition() 方法
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="该浏览器不支持获取地理位置。";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"
Longitude: " + position.coords.longitude;
}
</script>
input
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
语义元素
无语义 元素实例:
语义元素实例: ,
, and - 清楚的定义了它的内容.HTML5提供了新的语义元素来明确一个Web页面的不同部分
-
header
-
nav
-
section
-
article
-
aside
-
figcaption
-
figure
-
footer
HTML5 Web 存储
在HTML5之前，主要是使用cookies存储，cookies的缺点有：需要在请求头上带着数据，存储大小不过，在4k之内。
localStorage 和 sessionStorage
客户端存储数据的两个对象为：
- localStorage - 没有时间限制的数据存储
- sessionStorage - 针对一个 session 的数据存储，当用户关闭浏览器窗口后，数据会被删除
不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：
- 保存数据：localStorage.setItem(key,value);
- 读取数据：localStorage.getItem(key);
- 删除单个数据：localStorage.removeItem(key);
- 删除所有数据：localStorage.clear();
- 得到某个索引的key：localStorage.key(index);
HTML5 Web SQL 数据库
Web SQL 是在浏览器上模拟数据库，可以使用JS来操作SQL完成对数据的读写。
Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。
HTML5 应用程序缓存
使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。这意味着，你可以在没有网络连接的情况下进行访问。
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
- 离线浏览 - 用户可在应用离线时使用它们
- 速度 - 已缓存资源加载得更快
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
<html manifest="demo.appcache">
<body>
The content of the document......
body>
html>
-
如需启用应用程序缓存，请在文档的html 标签中包含 manifest 属性：
<html manifest="demo.appcache"> ... html>每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。
manifest 文件的建议的文件扩展名是：".appcache"。
请注意，manifest 文件需要配置正确的 MIME-type，即 “text/cache-manifest”。必须在 web 服务器上进行配置。
实例 - 完整的 Manifest 文件
CACHE MANIFEST (被缓存文件)
\# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK: （不被缓存文件）
login.php
FALLBACK: （规定如果无法建立因特网连接，则用 "offline.html" 替代 /html5/ 目录中的所有文件：）
/html/ /offline.html
一旦应用被缓存，它就会保持缓存直到发生下列情况：
- 用户清空浏览器缓存
- manifest 文件被修改（参阅下面的提示）
- 由程序来更新应用缓存
HTML5 Web Workers
web worker 是运行在后台的 JavaScript，不会影响页面的性能，更好的解释是，你可以使用web worker提供的一种简单的方法来为web内容在后台线程中运行脚本，这些线程在执行任务的过程中并不会干扰用户界面！
HTML5 WebSocket
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。
当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。
以下 API 用于创建 WebSocket 对象。
var Socket = new WebSocket(url, [protocal] );
以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。
css新增
边框
-
border-radius
-
box-shadow
-
border-image(ie不支持)
-
CSS3
box-sizing属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。如果在元素上设置了
box-sizing: border-box;则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中:
背景
- background-size
- background-origin（content-box，padding-box，border-box）
- background-clip（content-box，padding-box，border-box）
渐变
-
background: linear-gradient(direction, color-stop1, color-stop2, …);
direction可以是位置，也可以是角度
-
background: radial-gradient(center, shape size, start-color, …, last-color);
center/ellipse ，也可以是百分比（几个）
shape size：（定义渐变的大小）
- closest-side
- farthest-side
- closest-corner
- farthest-corner
-
repeating-radial-gradient()
文本
- hanging-punctuation：规定标点符号是否位于线框之外（不支持）
- punctuation-trim：规定是否对标点符号进行修剪（不支持）
- text-align-last:设置如何对齐最后一行或者紧挨着强制换行符之前的行
- text-justify:规定当 text-align 设置为 “justify” 时所使用的对齐方法。
- text-outline:规定文本的轮廓。
- text-overflow:规定当文本溢出包含元素时发生的事情。
- text-shadow：向文本添加阴影。
- text-wrap:规定文本的换行规则。
- word-break:规定非中日韩文本的换行规则。
- word-wrap:允许对长的不可分割的单词进行分割并换行到下一行。
字体
<style>
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family:myFirstFont;
}
style>
2D，3D转换
transform：适用于2D或3D转换的元素
过渡属性
下表列出了所有的过渡属性:
| 属性 | 描述 | CSS |
|---|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | 3 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 “ease”。 | 3 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |
动画
animation与@keyframes
| 属性 | 描述 | CSS |
|---|---|---|
| @keyframes | 规定动画。 | 3 |
| animation | 所有动画属性的简写属性，除了 animation-play-state 属性。 | 3 |
| animation-name | 规定 @keyframes 动画的名称。 | 3 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 3 |
| animation-timing-function | 规定动画的速度曲线。默认是 “ease”。 | 3 |
| animation-delay | 规定动画何时开始。默认是 0。 | 3 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1。 | 3 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 “normal”。 | 3 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 “running”。 | 3 |
animation-fill-mode：forwards
/*动画停在最后一帧*/
CSS3 新多列属性
下表列出了所有 CSS3 的新多列属性，点击属性可以查看更多内容以及用法：
| 属性 | 说明 | CSS |
|---|---|---|
| column-count | 指定元素应分为的列数 | 3 |
| column-fill | 指定如何填充列 | 3 |
| column-gap | 指定列之间差距 | 3 |
| column-rule | 一个用于设置所有列规则的简写属性 | 3 |
| column-rule-color | 指定的列之间颜色规则 | 3 |
| column-rule-style | 指定的列之间的样式规则 | 3 |
| column-rule-width | 指定的列之间的宽度规则 | 3 |
| column-span | 指定一个元素应该横跨多少列 | 3 |
| column-width | 指定列的宽度 | 3 |
| columns | 缩写属性设置列宽和列数 | 3 |
新的用户界面特性
下表中为CSS3的新用户界面属性，您可以点击对应的属性，了解到更多的内容以及对应属性的用法等等：
| 属性 | 说明 | CSS |
|---|---|---|
| appearance | 允许您使一个元素的外观像一个标准的用户界面元素 | 3 |
| box-sizing | 允许你以适应区域而用某种方式定义某些元素 | 3 |
| icon | Provides the author the ability to style an element with an iconic equivalent | 3 |
| nav-down | 指定在何处使用箭头向下导航键时进行导航 | 3 |
| nav-index | 指定一个元素的Tab的顺序 | 3 |
| nav-left | 指定在何处使用左侧的箭头导航键进行导航 | 3 |
| nav-right | 指定在何处使用右侧的箭头导航键进行导航 | 3 |
| nav-up | 指定在何处使用箭头向上导航键时进行导航 | 3 |
| outline-offset | 外轮廓修饰并绘制超出边框的边缘 | 3 |
| resize | 指定一个元素是否是由用户调整大小 | 3 |
弹性盒子flex
| 属性 | 描述 |
|---|---|
| display | 指定 HTML 元素盒子类型。 |
| flex-direction | 指定了弹性容器中子元素的排列方式 |
| justify-content | 设置弹性盒子元素在主轴（横轴）方向上的对齐方式。 |
| align-items | 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。 |
| flex-wrap | 设置弹性盒子的子元素超出父容器时是否换行。 |
| align-content | 修改 flex-wrap 属性的行为，类似align-items, 但不是设置子元素对齐，而是设置行对齐 |
| flex-flow | flex-direction 和 flex-wrap 的简写 |
| order | 设置弹性盒子的子元素排列顺序。 |
| align-self | 在弹性子元素上使用。覆盖容器的 align-items 属性。 |
| flex | 设置弹性盒子的子元素如何分配空间。 |
CSS3 多媒体查询
CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想： 取代了查找设备的类型，CSS3 根据设置自适应显示。
媒体查询可用于检测很多事情，例如：
- viewport(视窗) 的宽度与高度
- 设备的宽度与高度
- 朝向 (智能手机横屏，竖屏) 。
- 分辨率
目前很多针对苹果手机，Android 手机，平板等设备都会使用到多媒体查询。
多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。
@media not|only mediatype and (expressions) {
CSS-Code;
}
你也可以在不同的媒体上使用不同的样式文件：
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">
CSS3 多媒体类型
| 值 | 描述 |
|---|---|
| all | 用于所有多媒体类型设备 |
| 用于打印机 | |
| screen | 用于电脑屏幕，平板，智能手机等。 |
| speech | 用于屏幕阅读器 |
实例
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
1.盒模型水平垂直居中的五大方案
2.关于css盒模型的几道面试题
3.掌握几大经典布局方案
4.移动端响应式布局的三大方案
5.几道开放式的css3面试题
-
让一个元素在视线中消失的方式
-
display：none
-
visibility：hidden
-
z-index：
-
opicity
-
rotate
-
filter
-
height或者宽设为0,overflow:hidden
-
…
opacity display visibility 是否支持过渡 是 否 是 是否产生重绘 否 是 是 是否产生回流 否 是 否 元素隐藏，是否可以触发绑定事件 是 否 否 元素隐藏，是否占据页面空间 是 否 是
- visibility支持过渡，但是不是平滑的过渡，进行了延迟
从 visible 过渡 到 hidden 有延迟，从 hidden 过渡到 visible 不延迟
- 实际上透明度改变后，GPU在绘画时只是简单的降低之前已经画好的纹理的alpha值来达到效果，并不需要整体的重绘。
-
-
display其他值
-
none 不显示，并且不会创建dom节点，不会出现在dom tree 与render tree上
-
list-item ：此元素会作为列表显示
-
run-in:此元素会根据上下文作为块级元素或内联元素显示。
-
）。）。）。）。）。）table 此元素会作为块级表格来显示（类似 ），表格前后带有换行符。 inline-table 此元素会作为内联表格来显示（类似 ），表格前后没有换行符。 table-row-group 此元素会作为一个或多个行的分组来显示（类似 table-header-group 此元素会作为一个或多个行的分组来显示（类似 table-footer-group 此元素会作为一个或多个行的分组来显示（类似 table-row 此元素会作为一个表格行显示（类似 table-column-group 此元素会作为一个或多个列的分组来显示（类似 table-column 此元素会作为一个单元格列显示（类似 table-cell 此元素会作为一个表格单元格显示（类似 和 ） table-caption 此元素会作为一个表格标题显示（类似 ） inherit 规定应该从父元素继承 display 属性的值。
-
-
项目中什么时候用到flex
- 布局
-
元素垂直居中的方式
- flex布局下align-items：center(设置在父元素上) align-self:center(设置在子元素上)
- line-height:只针对行内元素；
- transform：translateY（-50%）；top：50%； position: relative;
- 子元素：display: table-cell; vertical-align: middle;（经常用在表格中使表格元素垂直居中）父元素：display：table/或者要求父元素高度固定
-
元素水平居中的方式
- text-align:center(针对非块状元素居中)
- margin :0 auto
- transform:translateX(-50%) left:50%;
- flex justify-content:center
-
响应式布局的核心是媒体查询
还有rem,flex,vh/vm
-
盒模型有哪些
-
标椎盒模型：包含了 内容（content） 内边距（padding） 边框（border） 外边框（margin）
width = content +margin+padding+border
-
IE盒模型：width = content+margin
-
flex弹性盒布局
-
columns 多列布局（文字排版）
-
box-sizing : content-box|border-box|inherit;
-
content-box:即总宽度=margin+border+padding+width
-
border-box , 设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容
即总宽度=margin+width
-
-
几大经典布局方案
-
圣杯布局/双飞翼布局（左/右/左右固定，中间自适应）
实现方案：
-
有时候会用flex
-
用 position: absolute; left,top
-
用浮动
这个时候会牵扯到一个清除浮动（浮动引起高度塌陷的问题）
解决方式：
-
父元素overflow：hidden（通过触发BFC方式，实现清除浮动）
缺点：
内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素，
元素内容比较多的时候，内容会环绕着浮动的元素（解决方式，为多出的内容再创建一个BFC）
-
额外标签法：添加一个clear：both的子元素，语义化差（不推荐）
-
使用伪类 .parent::after {content: “”； clear: both; display: block; /* visibility: hidden;/ }推荐使用display的值只要不具有inline行内元素的特性就可以
.clearfix{**zoom: 1;/*ie6清除浮动的方式 号只有IE6-IE7执行，其他浏览器不执行/
优点：符合闭合浮动思想，结构语义化正确
缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.
-
-
FC
Formatting Context，格式化上下文，指页面中一个渲染区域，拥有一套渲染规则，它决定了其子元素如何定位，以及与其他元素的相互关系和作用。
BFC
BFC (Block formatting context) “块级格式化上下文”
Block Formatting Context，块级格式化上下文，一个独立的块级渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
-
触发
- 根元素HTML
- float值不是none
- overflow值不为visible
- display的值为
inline-block、table-cell、table-caption position的值为absolute或fixed
-
特性
-
属于同一个BFC的两个相邻块级子元素（元素都要在文档流中）的上下margin会发生重叠—— 分为两个BFC就可以消除这种margin 重叠。**
解决：**触发其中一个div的BFC，使得两个div不在同一个 BFC内，这样就可以阻止这两个div的margin重叠。 -
包含浮动元素（元素内容比较多的时候，内容会环绕着浮动的元素）
-
IFC
- 定义：内联格式化上下文
- 特征
- 框会从包含块的顶部开始，一个接着一个的水平摆放
- 摆放这些框时，它们在水平方向的内外边距加边框所占用的空间都会被考虑，在垂直方向上，这些框可能会以不同方式来对其，
- 同一个IFC下的元素高度会不同
- 其内部不能包含块状元素
- 应用
- 水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。
- 垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。
GFC
GFC(GridLayout Formatting Contexts)直译为"网格布局格式化上下文"，当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。
GFC将改变传统的布局模式，他将让布局从一维布局变成了二维布局。简单的说，有了GFC之后，布局不再局限于单个维度了。这个时候你要实现类似九宫格，拼图之类的布局效果显得格外的容易。
FFC
FFC(Flex Formatting Contexts)直译为"自适应格式化上下文"，display值为flex或者inline-flex的元素将会生成自适应容器（flex container）。
Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素，而设置为 inline-flex 的容器则渲染为一个行内元素。
伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说，Flexbox 定义了伸缩容器内伸缩项目该如何布局。
FFC与BFC的区别
FFC与BFC有点儿类似，但仍有以下几点区别：
- Flexbox 不支持 ::first-line 和 ::first-letter 这两种伪元素
- vertical-align 对 Flexbox 中的子元素 是没有效果的
- float 和 clear 属性对 Flexbox 中的子元素是没有效果的，也不会使子元素脱离文档流(但是对Flexbox 是有效果的！)
- 多栏布局（column-*） 在 Flexbox 中也是失效的，就是说我们不能使用多栏布局在Flexbox 排列其下的子元素
- Flexbox 下的子元素不会继承父级容器的宽
z-index（关于文档流和定位）
-
定义：z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
-
demo1z-index有三种值，分别是auto自动，整数（正整数、0、负整数），inherit（继承）；z-index只能在定位元素上有效（如position:relative）；
-
如何工作（层叠次序）
- 背景和边框-》
- 层叠上下文中有着z-index为负值的子元素=》
- 文档流中非行内非定位子元素-》
- 非定位浮动元素-》
- 文档流中行内级别非定位子元素-》
- 定位元素，z-index:0,这些元素形成新的层叠上下文
- 定位元素，z-index 层叠上下文中的最高等级
-
创建层叠上下文的方式
- html
- opcity!=1
- transform!=none
文档流
定位
html5面试题
-
拖拽
-
什么是标签语义化
合理的标签干合适的事情，每一种标签都有它固定的意思，例如p这个标签，我们就知道他是一个段落，h1…h6他是一个标题，a标签是一个链接，heaer，footer我们他是网页的头和尾
-
都有哪些标签，都是啥意思
-
行内标签：
特点：
1.和其他元素都在一行；
2.元素的高度，宽度，以及底部和顶部的边距不可设置；
3.元素的宽度就是它包含的文字或者图片的宽度不可改变
-
块状标签：
…
特点：
1.每个块状元素都是从新一行开始；
2.元素的高宽，行高以及底部和底部的边距都可以设置
3.元素宽度在不设置的情况下，等于父元素content 的宽度
-
-
行内块状标签：
特点：
1.和其他元素在一行上；
2.元素的高宽，行高，以及顶部和底部的边距都可以设置；
-
-
三种标签如何转化
display:block/inline/inline-block
谈谈自己对HTML5的理解
css的渲染规则（从右向左）
HTML页面生命周期
-
DOMContentLoaded浏览器已经加载了HTML，dom 树已经构建完成，但是像样式表等外部资源可能没有下载完成dom加载完成，所以js可以访问所有dom节点，初始化界面
当浏览器在解析
HTML页面时遇到了...标签，将无法继续构建DOM树（译注：UI渲染线程与JS引擎是互斥的，当JS引擎执行时UI线程会被挂起），必须立即执行脚本。外部脚本（带src的）的加载和解析也会暂停DOM树构建，所以DOMContentLoaded也会等待外部脚本。所以DOMContentLoaded有可能在所有脚本执行完毕后触发。，这就是为什么不要再body元素中加入脚本的原因带有
async和defer的脚本的下载是和HTML的下载与解析是异步的，但是js的执行一定是和UI线程是互斥的，像下面这张图所示，async在下载完毕后的执行会阻塞HTML的解析）[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eEV6mEeW-1600598414147)(E:\typora.md文件\前端面试题\async_defer.png)]
-
load浏览器已经加载了所有资源（图像，样式表等）
附加资源加载完毕，可以在此事件触发时获取图像的大小（如果没有被在html/css中指定）
-
beforeUnload/unload当用户离开页面的时候触发
可以询问用户是否保存了更改以及是否确定要离开页面
async defer 顺序 带有async的脚本是优先执行先加载完的脚本，他们在页面中的顺序并不影响他们执行的顺序。所以 async用在那些完全不依赖其他脚本的脚本上。带有defer的脚本按照他们在页面中出现的顺序依次执行。 DOMContentLoaded 带有async的脚本也许会在页面没有完全下载完之前就加载，这种情况会在脚本很小或本缓存，并且页面很大的情况下发生。 带有defer的脚本会在页面加载和解析完毕后执行，刚好在DOMContentLoaded之前执行。
DOMContentLoaded与样式表
不过仍然有一个陷阱：如果在样式后面有一个内联脚本，那么脚本必须等待样式先加载完。
（译注：简单来说，JS 因为有可能会去获取 DOM 的样式，所以 JS 会等待样式表加载完毕，而 JS 是阻塞 DOM 的解析的，所以在有外部样式表的时候，JS 会一直阻塞到外部样式表下载完毕）
<link type="text/css" rel="stylesheet" href="style.css">
<script>
// the script doesn't not execute until the stylesheet is loaded
// 脚本直到样式表加载完毕后才会执行。
alert(getComputedStyle(document.body).marginTop);
</script>
123456
发生这种事的原因是脚本也许会像上面的例子中所示，去得到一些元素的坐标或者基于样式的属性。所以他们自然要等到样式加载完毕才可以执行。
DOMContentLoaded需要等待脚本的执行，脚本又需要等待样式的加载。
浏览器自动补全
dom事件模式
dom0与DOM2级事件模式的区别
| dom事件模型 | dom0 | dom2 |
|---|---|---|
| 语法 | document.body.onclick = function() {} | document.body.addEventListener(‘click’, function() {}) |
| 运行机制 | 给元素的某个操作属性绑定方法，有效事件只有一个 | 基于事件池机制，每增加一个方法，都会有效的绑定事件 |
| 可以给一些特殊的事件类型绑定事件，例如DOMContentLoaded(dom结构加载结束）（load,dom,图片，文件加载完才会触发）transitionend(transitionend 事件在 CSS 完成过渡后触发。) |
dom2事件池机制
基于addEventListener/attachEvent(IE6-8)向事件池追加方法、新版本浏览器会根据元素和事件类型对新增方法做重复校验，但是IE6-8不可以
removeEventListener/dttachEvent删除事件 不能移除匿名函数
当事件行为触发，会把事件池中的方法按照增加的顺序执行，但IE6-8中执行的顺序是不固定的（乱序执行） 捕获 目标 冒泡
| dom2 |
| ----------- | ---------------------------------------------- | ------------------------------------------------------------ |
| 语法 | document.body.onclick = function() {} | document.body.addEventListener(‘click’, function() {}) |
| 运行机制 | 给元素的某个操作属性绑定方法，有效事件只有一个 | 基于事件池机制，每增加一个方法，都会有效的绑定事件 |
| | | 可以给一些特殊的事件类型绑定事件，例如DOMContentLoaded(dom结构加载结束）（load,dom,图片，文件加载完才会触发）transitionend(transitionend 事件在 CSS 完成过渡后触发。) |
dom2事件池机制
基于addEventListener/attachEvent(IE6-8)向事件池追加方法、新版本浏览器会根据元素和事件类型对新增方法做重复校验，但是IE6-8不可以
removeEventListener/dttachEvent删除事件 不能移除匿名函数
当事件行为触发，会把事件池中的方法按照增加的顺序执行，但IE6-8中执行的顺序是不固定的（乱序执行） 捕获 目标 冒泡