查缺补漏系列之HTML-一一网

由于公司的动荡，又燃起了学习的心（心里的小九九：其实就是为了更好的找下一份工作），开始进行查缺补漏，让自己的心重新强大起来，废话不多说，整起来。

1、!Doctype html

<!Doctype html>
复制代码

以标准模式渲染
知道元素的合法性

在html5之前，需要申明什么很多东西，如html的版本，依赖标准的位置等，最重要的是，这个是为了告诉浏览器，这个文档是HTML，以便浏览器更正确地显示 HTML。

2、HTML、XHTML、HTML5、XML区别

HTML属于 SGML，需要对DTD进行引用，才能告知浏览器文档所使用的文档类型
XHTML属于XML，是HTML进行XML的严格化结果，XML是可拓展标记语言，用于存储数据和结构。
H5自己独立的规范

3、H5有什么变化

新的语义化元素
表单增强
新的API（音视频、本地存储等）
分类、嵌套变更

4、em和i有什么区别

em是语义化的标签，表示强调
i只是纯样式的标签，表斜体
H5中不推荐使用i，一般作为图标

5、语义化的好处

正确的标签做正确的事情，没有样式的情况下依旧有清晰的结构
开发者容易理解，便于维护，可读性强
机器容易理解结构（搜索、读频）
利于SEO
semantic microdata

6、那些元素可以自闭合

input
img
Br hr
Link meta

7、HTML与DOM的关系

html是死的
DOM是从HTML解析来的，活的
JS维护的是DOM

8、property和attribute的区别

在调试的时候 $0 可以表示你选中的元素

attribute是死的，可以通过设置改变

property是活的例子：input的value属性

9、form的作用

直接可以提交
利用submit/reset
便于浏览器保存表单数据
第三方库可以提取表单数据
可以进行表单验证

10、导入样式，link、@import区别

link是标签，在页面加载的时候，会被同时加载（href），@import是css语法，在使用css的时候才会被加载
link的权重高于@import
@import要IE5以上才可以识别

11、title与alt的区别

title是建议性的信息，hover出现
alt是图片加载失败等情况下的文字说明

12、浏览器内多个标签通信

localStorage、cookie

13、iframe有哪些优缺点

优点：

可以实现无刷新文件上传
可以跨域通信
解决了加载慢的方内容

缺点：

会阻塞主页面的unload事件
无法被一些搜索引擎搜引到
页面会增加http请求
会产生多多页面，不容易管理

15、src与href

src用于替换当前元素；href用于在当前文档和引用资源之间确立联系；

src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接。

16、webSocket

一种协议，在前端，一般使用http，然而http只能从客户端发送请求到服务端，而webSocket可以做到主动从服务端推送消息到客户端，当然也可以从客户端发送请求到服务端。

17、H5的本地存储

sessionStorage、localStorage

18、常见的浏览器内核

Trident：IE、360

Webkit：Google Chrome、safari

Gecho：火狐

Presto：Opera

19、label

与表单连用，点击label可以关联form（label的for属性）

20、meta标签

指的是我们要告诉浏览器关于我们页面的一些信息

最常用的属性如下：

<meta name="" http-equip="" content="" charset="">
复制代码

charset

规定html的字符编码

<meta charset="UTF-8">
复制代码

name

keywords:页面关键字

description：页面描述

author：页面作者

generator：开发页面的工具

robots：告知搜索引擎抓取页面的方式，默认为可以搜索此页面

viewport：为了适配移动端的页面

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
复制代码

width=device-width：宽度是设备宽度
initial-scale：初始缩放比例
maximum-scale：允许用户放大的比例
minimum-scale：允许用户缩小的比例
user-scalable：是否允许用户缩放可视区

http-equip

<meta http-equiv="cache-control" content="max-age=180" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
复制代码

可以用来设置缓存，然而在现在项目中，设置确没起什么作用，最后也是在nginx配置了相应的缓存才生效。