HTML1. <img>中title和alt的区别 alt是<img>特有属性，是图片内容的等价描述，用于图片无法加载时

1. `<img>`中title和alt的区别

title是鼠标移动到图片上面时的文本提示；
alt是<img>特有属性，是图片内容的等价描述，用于图片无法加载时显示，使读屏器能获取图片信息。帮助搜索引擎理解图片信息，增加关键词密度。都有利于SEO

2. 全局属性

accesskey: 设置用来选择页面上元素的快捷键
class
id
style
lang: 说明元素内容使用的语言(值：en英文 / zh中文 / zh-CN简体中文等)
dir: 设置元素的文本方向(ltr: 从左到右 / rtl: 从右到左)
title: 提供元素的额外信息，鼠标移动到上面时显示提示文本
tabindex: 规定元素的tab键次序。按tab键可以在各元素间进行切换
—————————— 以下是html5新增属性——————————————
contenteditable: 指定是否可以在浏览器中编辑内容(true / false)
data-*: 为元素增加自定义属性
draggable: 用户是否可以拖动元素(true / false / auto 链接和图像默认可拖动)
hidden: 显示或隐藏该元素(与display:none的作用一样) (hidden="" || hidden= "hidden")
spellcheck: 规定是否对元素进行拼写和语法检查,对拼写错误的单词会在其下方出现红线(true / false)

3. HTML5新特性和移除的标签

添加了语义化更好的标签元素
- 结构元素：article、header、footer
- 多媒体元素：video、audio
- 图像元素：canvas、svg
增加了离线存储功能，localStorage长期存储数据，浏览器关闭数据不丢失
input新增类型
- color,选择颜色
- date 选择日期
- search 用于搜索
- month 选择月份
废除了纯表现元素：basefont、s、u等
废除了部分浏览器支持的元素：applet、bgsound
废除了frameset、frame框架，只支持iframe

4. HTML5的离线存储

在用户没有与因特网连接时，可以正常访问站点或应用。用户与因特网连接时，更新用户机器上的缓存文件。
原理: 基于一个新建的 mainfest文件，后缀名为 .appcache 文件的缓存机制（不是存储技术），通过这个文件上的解析清单离线存储资源。这些资源就会像 cookie 一样被存储下来。之后当网络处于离线状态时，浏览器会通过被离线存储的数据进行页面展示
使用：
- 在文档的 html 标签中设置 mainfest 属性，引用 mainfest 文件。mainfest 可以指向相对路径或者绝对网址，绝对网址必须同源。扩展名可以任意，但推荐 .appcache
```
<!DOCTYPE html><html lang="en" manifest="demo.appcache">
   <head>
       <meta charset="UTF-8">
       <title>demo</title>
   </head>
   <body>
       <img src="img.jpg" height="500" width="900" alt="">
       其它内容...
   </body>
   </html>
```
- 配置 mainfest 文件，编写离线存储资源。是简单的文本文件，分为三部分。(1). CACHE: 在此标题下列出的文件将在首次下载后进行缓存。(2). NETWORK: 在此标题下列出的文件需要与服务器连接，且不会被缓存。可以使用 * 表示除了CACHE外所有的资源或文件都需要因特网连接。(3). FALLBACK: 此标题下列出的文件规定当页面无法访问时的替代页面
```
CACHE MANIFEST#version 1.0
CACHE：    img.jpg
NETWORK:    *
FALLBACK:    /demo/ /404.html
```
- 操作 window.applicationCache 进行需求实现。其 status 属性可用于查看缓存的当前状态。浏览器会对下载进度、应用缓存更新和错误状态等情况触发相应事件。
更新缓存
- 用户清空浏览器缓存
- mainfest 文件被修改
- 由程序来更新应用缓存
与浏览器缓存的区别
- 离线缓存是针对整个应用，浏览器缓存是整个文件
- 离线缓存断网了还是可以打开页面，但浏览器缓存不行
- 离线缓存可以主动通知浏览器更新资源
浏览器如何对 html5 的离线存储资源进行管理和存储？
- 在线时，浏览器发现 html 头部有 mainfest 属性，会请求 mainfest 文件。如果是第一次访问应用，那么浏览器会根据 mainfest 文件的内容下载相应的资源并进行离线存储。如果已经访问过应用并且资源已经离线存储了，那么浏览器会使用离线的资源加载页面，然后浏览器会比较新的 mainfest 文件与旧的文件，如果文件没有发生改变，不做任何操作。如果改变了，重新下载文件中的资源并进行离线存储。
优点
- 用户可以实现离线浏览
- 已缓存资源加载的更快
- 减少服务器的负载。浏览器只从服务器下载更新过或者更改过的资源

5. iframe

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）,用于设置文本或图形的浮动图文框或容器 (frameborder / height / width / name / scrolling / src etc.)

 <iframe src ="/index.html" id="ifr1" name="ifr1" scrolling="yes">
    <p>Your browser does not support iframes.</p>
 </iframe>

或者

<iframe src ="/index.html" id="ifr1" name="ifr1" scrolling="yes">
 <p>Your browser does not support iframes.</p>
</iframe>
<script type="text/javascript">
   console.log(window.frames['ifr1'].window);
console.dir(document.getElementById("ifr1").contentWindow);
</script>

同域情况下，父页面可以操作子页面的DOM元素，反之也可以

var iframe = document.getElementById("iframe1");
var iwindow = iframe.contentWindow;
var idoc = iwindow.document;

跨域时，只能实现页面的跳转
缺点：
- 会阻塞主页面的 onload 事件。onload事件在所有 iframe及iframe的onload事件加载完毕后才会被触发
- iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
解决：如果需要使用 iframe ，最好通过js动态添加 src 属性值

6. html、xml、xhtml的区别

html：超文本标记语言。用来描述网页内容，超文本是因为不仅能标记文本，还能标记图片，链接，音频等。它可以告诉浏览器一个规范以便浏览器进行解析。html的标签都是预定义的，不可自定义。
xml：可扩展标记语言。用来给给文档加一些标签，说明每段文字的作用和意义。用于数据存储和传输。可扩展是因为可以自定义标签
xhtml：可扩展超文本标记语言。就是以xml的语法写html。由于html的语法要求不严格，大小写可以混用，于是w3c把xml的语法用在了html上用来规范语法
xhtml语法要求
- 必须包含一个文件头声明 <!DOCTYPE>
- 元素名必须小写
- 空标签必须关闭
- 属性名必须小写
- 属性值必须加引号

7. Doctype作用 | 严格模式和兼容模式

<!DOCTYPE>位于HTML文档中的第一行，处于<html>标签之前。告知浏览器的解析器用什么文档标准(DTD)解析这个文档。可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
不同浏览器，同一浏览器的不同版本对页面的渲染不同。W3C前，没有统一规范，即混杂模式。W3C后，有了统一标准，即严格模式
严格（标准）模式：浏览器按照 W3C 标准解析代码。
混杂（兼容/怪异）模式：浏览器用自己的方式解析代码。不同浏览器可能显示的不一样。以一种比较宽松的向后兼容的方式显示，保证旧标准的页面也可以正常显示。
如果文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。（严格 DTD ——严格模式）
包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现。（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式）
DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。
HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。
当一个块元素div中包含的内容只有图片时，在标准模式下，不管IE还是标准，在图片底部都有3像素的空白。但在混杂模式下，标准浏览器（Chrome）中div距图片底部默认没有空白。
混杂模式下盒子模型的高宽包括padding和border，而W3C标准中设置一个元素的高宽指的是content的高宽；
混杂模式下可以设置行内元素的高度，而标准模式下不生效；
混杂模式下设置图片padding会失效；Table中的字体属性不能继承上层的设置；
标准模式下使用margin:0 auto;可以使元素水平居中，但是在混杂模式下会失效；

8. svg和canvas区别

svg: 用xml描绘2D图形。绘制出来的每一个图形的元素都是独立的DOM节点，能方便的绑定事件和修改。输出的图形是矢量图形，后期可以修改参数自由缩放，并且不会失真和出现锯齿。
canvas通过js绘制2D图像。本身没有绘制能力，是一个矩形区域。输出的是一整副画布，放大会失真或出现锯齿

9. src 和 href 的区别

src：用于代替这个元素，将资源嵌入到当前文档中元素在的位置<script src="script.js"></script>
href: 超文本引用，用来建立当前文档或元素与目标锚点或资源之间的联系<a href="www.xxx.com">\<\img src="1.jpg">\</a>,<link href="style.css" rel="stylesheet" />

10. 行内元素、块级元素、空元素、区别

行内：a / b / strong / span / img / input / select
块级：div / ul / ol / li / dl / dt / dd / h1-h6 / p
空： br / hr / img / input / link / meta
区别：行内元素不能设置宽高、行高、内外边距；不独占一行；只能容纳行内元素和文本。块级元素可以设置并且独占一行；可以容纳块级元素和行内元素

11. `<p>` `<a>`

<p>是块元素，但是其不能包含除了它本身之外的任何块元素
<a>是内联元素，但是它可以包含除了它本身外的任意块元素

12. 元素

帧元素（frameset）的优先级最高，表单元素比非表单元素的优先级要高。
表单元素包括：文本输入框，密码输入框，单选框，复选框，文本输入域，列表框等等；
非表单元素包括：链接（a），div,table,span等。
所有的html元素又可以根据其显示分成两类：有窗口元素以及无窗口元素。有窗口元素总是显示在无窗口元素的前面。
有窗口元素包括：select元素，object元素，以及frames元素等等。
无窗口元素：大部分html元素都是无窗口元素。

13. head && body

bgcolor 是 body 标签的一个属性，用于设置body的背景色
作为media queries的条件：设备像素比、设备类型、设备高度。使用and关键字用于合并多个媒体属性或合并媒体属性与媒体类型。

14.标签包裹 `<a>`可以包裹任何标签

15.`<command>`

定义用户可能调用的命令（比如单选按钮、复选框或按钮）
主流浏览器都不支持

16`<canvas>`

创建一个画布，通过js绘制图形。放大会失真

17.h5结构标签

header, footer, article, section, nav

HTML

1. <img>中title和alt的区别

2. 全局属性

3. HTML5新特性和移除的标签

4. HTML5的离线存储

5. iframe

6. html、xml、xhtml的区别

7. Doctype作用 | 严格模式和兼容模式

8. svg和canvas区别

9. src 和 href 的区别

10. 行内元素、块级元素、空元素、区别

11. <p> <a>

12. 元素

13. head && body

14.标签包裹 <a>可以包裹任何标签

15.<command>

16**<canvas>**

17.h5结构标签

1. `<img>`中title和alt的区别

11. `<p>` `<a>`

14.标签包裹 `<a>`可以包裹任何标签

15.`<command>`

16`<canvas>`