html知识点汇总

1.DOCTYPE(文档类型)的作用

DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义来解析文档，不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。
值的注意的是，它必须声明在HTML⽂档的第⼀⾏。
浏览器渲染页面的两种模式（可通过document.compatMode获取）：

CSS1Compat：标准模式（Strick mode），默认模式(严格模式)，浏览器使用W3C的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈现页面。
BackCompat：怪异模式(混杂模式)(Quick mode)，浏览器使用自己的怪异模式解析渲染页面。在怪异模式中，页面以一种比较宽松的向后兼容的方式显示。

1补充一点严格模式和混杂模式解析语句的不同点

（1）可以设置行内元素的宽高，在严格模式下给内联元素设置宽高都不起作用，在混杂模式下生效
（2）可设置百分比高度在严格模式下，如果没有给父元素设置高度，而子元素的高度以百分比呈现，这时是不生效的
（3）盒模型的宽高包含padding和border在W3C的标准下，给一个元素设置宽高，则呈现的是内容的宽高。在IE5.5以下及其他浏览器的混杂模式下，盒子的宽度还包括padding和border。
（4）使用margin：0 auto在IE下会失效使用margin：0 auto在严格模式下会水平居中，而在混杂模式下会失效，但可以设置text-align：center来水平居中。
（5）混杂模式下的图片padding会失效，Table中的字体属性将无法继承父元素的设置，white-space：pre会失效。

2.meta标签含义

提供了HTML文档的元数据。不会显示在客户端，但会被浏览器解析。
meta 标签由 name 和 content 属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等，除了HTTP标准固定了一些name作为大家使用的共识，开发者还可以自定义name。
属性有:

charset：定义文档的字符编码
content：定义与http-equiv或name属性相关的元信息
http-equiv：把content属性关联到HTTP头部。值有content-type、default-style、refresh
name：把content属性关联到一个名称。值有application-name、author、description、generator、keywords
scheme：H5不支持，定义用于翻译content属性值的格式。值有format/URI 常用的meta标签：

charset，用来描述HTML文档的编码类型：

  <meta charset="UTF-8" >

keywords，页面关键词：

 <meta name="keywords" content="关键词" />

description,页面描述:

 <meta name="description" content="页面描述内容" />

refresh,页面重定向和刷新:

 <meta http-equiv="refresh" content="0;url=" />

viewport,适配移动端，可以控制视口的大小和比例：

 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

其中,content参数有以下几种:

width viewport:宽度(数值/device-width)
height viewport:高度(数值/device-height)
initial-scale:初始缩放比例
maximum-scale:最大缩放比例
minimum-scale:最小缩放比例
user-scalable:是否允许用户缩放(yes/no)

搜索引擎索引方式:

<meta name="robots" content="index,follow" />

其中，content参数有以下几种

all:文件将被检索，且页面上的链接可以被查询；
none:文件将不被检索，且页面上的链接不可以被查询；
index:文件将被检索；
follow:页面上的链接可以被查询；
noindex:文件将不被检索；
nofollow:页面上的链接不可以被查询。

附加内容:

<meta charset="UTF-8"> <!-- 声明文档使用的字符编码 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- 优先使用IE最新版本和Chrome -->
<meta http-equiv="refresh" content="0;url="> <!-- 页面重定向或刷新，数字代表秒，即多少时间后刷新；url则会重定向 -->
<meta http-equiv="Pragma" content="no-cache"> <!-- 禁止浏览器从本地计算机的缓存中访问页面内容 -->
<meta http-equiv="Cache-Control" content="no-siteapp"> <!-- 转码申明，用百度打开网页可能会对其进行转码（如贴广告），添加后可避免转码，另值no-transform（不进行转换） -->

<!-- SEO优化 -->
<meta name="description" content="页面描述"> <!-- 页面描述 -->
<meta name="keywords" content="关键词"> <!-- 页面关键词 -->
<meta name="author" content="作者"> <!-- 网页作者 -->
<meta name="robots" content="index,follow"> <!-- 搜索引擎抓取，值有none/noindex/nofollow/all/index/follow -->

<meta name="viewport" content="
width=device-width,initial-scale=1,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> <!-- 移动设备适配 -->

<!-- ios设备 -->
<meta name="apple-mobile-web-app-title" content="标题"> <!-- 添加到主屏后的标题，ios6新增 -->
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- 是否启用web-app全屏模式 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <!-- 设置状态栏的背景颜色，只有在全屏模式生效，值有default/black/black-translucent -->
<meta name="format-detection" content="telephone=no"> <!-- 禁止数字自动识别为电话号码 -->
<meta name="format-detection" content="email=no"> <!-- 忽略识别邮箱 -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID,affiliate-data=myAffiliateData,app-argument=myURL"> <!-- 添加智能app广告条 -->

<meta name="msapplication-TileColor" content="#000"> <!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileImage" content="icon.png"> <!-- Windows 8 磁贴图标 -->
<meta name="msapplication-tag-highlight" content="no"> <!-- Windows phone 点击无高光 -->

<meta name="HandheldFriendly" content="true"> <!-- 针对手持设备优化，主要是不识别viewport的浏览器 -->
<meta name="MobileOptimized" content="320"> <!-- 微软的老式浏览器 -->
<meta name="screen-orientation" content="portrait"> <!-- uc强制竖屏 -->
<meta name="x5-orientation" content="portrait"> <!-- QQ强制竖屏 -->
<meta name="full-screen" content="yes"> <!-- uc强制全屏 -->
<meta name="x5-fullscreen" content="true"> <!-- QQ强制全屏 -->
<meta name="browsermode" content="application"> <!-- uc应用模式 -->
<meta name="x5-page-mode" content="app"> <!-- QQ应用模式 -->

<meta name="renderer" content="webkit|ie-comp|ie-stand"> <!-- 浏览器内核控制，值取其一 -->
<meta name="mobile-agent" content="format=[wml|xhtml|html5];url=url"> <!-- 站点适配，用于pc-手机页的对应关系,format值取其一 -->
<meta name="generator" content="meta"> <!-- 包含生成页面软件的标识符 -->
<meta name="theme-color" content="#000"> <!-- 定义主题颜色 -->

3.script标签中defer和async的区别

如果没有defer或async属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。

defer 和 async属性都是去异步加载外部的JS脚本文件，它们都不会阻塞页面的解析，其区别如下：

执行顺序
— 多个带async属性的标签，不能保证加载的顺序；
— 多个带defer属性的标签，按照加载顺序执行；
脚本是否并行执行：
— async属性，表示后续文档的加载和执行与js脚本的加载和执行是并行进行的，即异步执行；
— defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步)，js脚本需要等到文档所有元素解析完成之后才执行，DOMContentLoaded事件触发执行之前。

4.HTML、XML、XHTML 的区别

HTML:超文本标记语言，是语法较为松散的、不严格的Web语言；
XML:可扩展的标记语言，主要用于存储数据和结构，可扩展；
XHTML:可扩展的超文本标记语言，基于XML，作用与HTML类似，但语法更严格。

5.行内元素有哪些？块级元素有哪些？空(void)元素有那些？

行内元素:a,b,i,em,span,select,strong,label,font;
不能实现高度宽度,横向显示
块级元素:div,ul,ol,li,dl,dt,dd,h1-6,p,tabel,form,iframe,header,nav,footer,section,main,aside,article等
能设置宽度高度,纵向显示,并且默认站宽一整行
空元素(即没有内容的 HTML 元素。空元素是在开始标签中关闭的，也就是空元素没有闭合标签):br,hr,img,link,meta,input,base(指定的默认目标,表达路径和连接网址的标记),source(标签为媒体元素比如video和audio定义媒体资源)
置换元素: 因为默认自带宽度告诉浏览器能进行根据类型路径加载对应的内容
input,img,select,textarea

6.标签上title属性与alt属性的区别是什么

alt 是为了在图片未能正常显示时（屏幕阅读器）给予文字说明。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。
title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。

7.input与textarea的区别

input是单行文本框，不会换行。通过size属性指定显示字符的长度，注意：当使用css限定了宽高，那么size属性就不再起作用。value属性指定初始值，Maxlength属性指定文本框可以输入的最长长度。可以通过width和height设置宽高，但是也不会增加行数。
textarea 是多行文本输入框，文本区中可容纳无限数量的文本，无value属性，其中的文本的默认字体是等宽字体（通常是 Courier），可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。

8.用div模拟textarea

在div标签里面加入contenteditable=“true”

<style>
  .textarea{
    min-height: 100px;
    border: 1px solid #a0b3d6; 
    width: 300px;
    font-size: 14px;
    max-height: 300px;
    overflow-y: auto;
  }
</style>

<body>
  <!--用div模拟textarea-->
  <div class="textarea" mce-contenteditable="true">

  </div>
</body>

9.title与h1的区别、b与strong的区别、i与em的区别？

strong标签有语义，是起到加重语气的效果，而b标签是没有的，b标签只是一个简单加粗标签。b标签之间的字符都设为粗体，strong标签加强字符的语气都是通过粗体来实现的，而搜索引擎更侧重strong标签。
title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取有很大的影响
i内容展示为斜体，em表示强调的文本

10.head 标签有什么作用，其中什么标签必不可少？

标签用于定义文档的头部，它是所有头部元素的容器，中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分：base, link, meta, script, style, title。
其中title定义文档的标题,它是 head 部分中唯一必需的元素。

11.浏览器乱码的原因是什么？如何解决？

产生乱码的原因:

网页源代码是gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器打开即会出现html乱码，反之也会出现乱码；
html网页编码是gbk,而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码；
浏览器不能自动检测网页编码，造成网页乱码。

解决办法：

使用软件编辑HTML网页内容；
如果网页设置编码是gbk，而数据库储存数据编码格式是UTF-8，此时需要程序查询数据库数据显示数据前进程序转码；
如果浏览器浏览时候出现网页乱码，在浏览器中找到转换编码的菜单进行转换。

12. src与href有什么区别

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

13.什么是前端的结构，样式和行为相分离？以及分离的好处是什么？

结构，样式和行为分离：

HTML(结构):超文本标记语言,由HTML或xhtml之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。
CSS(表现):层叠样式表,由css负责创建。css对“如何显示有关内容”的问题做出了回答。
JS(行为):客户端脚本语言,内容应该如何对事件做出反应

若是将前端比作一个人来举例子，结构（HTML）就相当于是人体的“骨架”，样式就相当于人体的“装饰”，例如衣服，首饰等；行为就相当于人做出的一系列“动作”。

在结构，样式和行为分离，就是将三者分离开，各自负责各自的内容，各部分可以通过引用进行使用。

在分离的基础上，我们需要做到代码的：精简，重用，有序。
分离的好处：

代码分离，利于团队的开发和后期的维护；

减少维护成本，提高可读性和更好的兼容性；

14.如何对网站的文件和资源进行优化

文件合并（目的是减少http请求）；
文件压缩（目的是直接减少文件下载的体积）；
使用缓存；
使用cdn托管资源；
gzip压缩需要的js和css文件；
反向链接，网站外链接优化；
meta标签优化（title, description, keywords）,heading标签的优化,alt优化；

15.渐进增强和优雅降级之间的区别

渐进增强（progressive enhancement）：主要是针对低版本的浏览器进行页面重构，保证基本的功能情况下，再针对高级浏览器进行效果，交互等方面的改进和追加功能，以达到更好的用户体验。
优雅降级 graceful degradation: 一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。

区别:

优雅降级是从复杂的现状开始的，并试图减少用户体验的供给；而渐进增强是从一个非常基础的，能够起作用的版本开始的，并在此基础上不断扩充，以适应未来环境的需要；
降级（功能衰竭）意味着往回看，而渐进增强则意味着往前看，同时保证其根基处于安全地带。

16.HTML中几种图片格式的区别以及使用

页面中常用的几种图片格式有: png, jpg(jpeg),gif, bmp等；

Png格式的特征
特征：图片背景透明,支持透明、不透明、半透明，可以支持的颜色有很多。不支持动画,无损耗
使用范围: 比较广，在目前使用频率最高。
jpg格式特征
特征：图片不支持透明，静态图，支持的颜色也比较多(1600w)，可压缩,不支持动画,有损耗。
使用范围：使用范围较广，可使用作为电脑做面壁纸，手机屏保等，可根据需求来确实使用图片的分辨率
gif格式特征

1.有透明性，可以是全透，也可以全不透，没有半透明，
2.支持动画格式。
3.无损耗，做任何操作都不会使图像质量产生损耗。
4.最多能表达256种颜色，如果色彩丰富、细节丰富的图片不建议保存成gif，
5.使用场景：色彩简单的log、icon、线框图、动图

webp格式特征
特征:WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。
使用范围:并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。
Apng格式特征
特征:是PNG的位图动画扩展，可以实现png格式的动态图片效果，有望代替GIF成为下一代动态图标准。

17.iframe有哪些优缺点

内联框架元素，表示嵌套的browsing context，能够将另一个HTML页面嵌入到当前页面中

被包含在window.frames伪数组（类数组对象）中
通过contentWindow访问iframe的window对象
通过contentDocument访问iframe的document元素，等同于contentWindow.document
通过window.parent引用父窗口对象
这些脚本访问必须遵守同源策略
优点
iframe可以实现无刷新文件上传；
iframe可以跨域通信；
解决了加载缓慢的第三方内容如图标和广告等的加载问题。

缺点

iframe会阻塞主页面的Onload事件;如果当前页面当中用了iframe了，那还需要把所有的iframe当中的元素加载完毕才会执行
无法被一些搜索引擎索引到,不利于seo;
页面会增加服务器的http请求;
会产生很多页面，不容易管理。
主页面跟iframe嵌套的页面交互不是很方便
在一些小型设备比如手机上可能无法完全显示框架，兼容性不好

18.为什么利用多个域名来存储网站资源会更有效

CDN缓存更加方便；
突破浏览器并发限制；
节约cookie宽带；
节约主域名的连接数，优化页面下响应速度；
防止不必要的安全问题；

19.对比一下cookie和session

cookie和session都是用来跟踪浏览器用户身份的会话方式。（HTML4）
区别如下

保持状态：
cookie保存在浏览器端，session保存在服务器端用于储存关于用户的会话信息，形式有内存、数据库、文件等
使用方式：

cookie机制：
–如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。
–如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。
–Cookie是服务器发给客户端的特殊信息，cookie是以文本的方式保存在客户端，每次请求时都带上它。
session机制：
–当服务器收到请求需要创建session对象时，首先会检查客户端请求中是否包含sessionid。如果有sessionid，服务器将根据该id返回对应session对象。如果客户端请求中没有sessionid，服务器会创建新的session对象，并把sessionid在本次响应中返回给客户端。
–通常使用cookie方式存储sessionid到客户端，在交互中浏览器按照规则将sessionid发送给服务器。如果用户禁用cookie，则要使用URL重写，可以通过response.encodeURL(url) 进行实现；API对encodeURL的结束为，当浏览器支持Cookie时，url不做任何处理；当浏览器不支持Cookie的时候，将会重写URL将SessionID拼接到访问地址后。

存储内容：

cookie只能保存字符串类型，以文本的方式；
session通过类似与Hashtable的数据结构来保存，能支持任何类型的对象(session中可含有多个对象)。

存储的大小：

cookie：单个cookie保存的数据不能超过4kb；
session大小没有限制。

安全性：

cookie：针对cookie所存在的攻击：Cookie欺骗，Cookie截获；
session的安全性大于cookie。原因如下:

sessionID存储在cookie中，若要攻破session首先要攻破cookie；
sessionID是要有人登录，或者启动session_start才会有，所以攻破cookie也不一定能得到sessionID；
第二次启动session_start后，前一次的sessionID就是失效了，session过期后，sessionID也随之失效。
sessionID是加密的

6.缺点:

cookie：

大小受限
用户可以操作（禁用）cookie，使功能受限
安全性较低
有些状态不可能保存在客户端。
每次访问都要传送cookie给服务器，浪费带宽。
cookie数据有路径（path）的概念，可以限制cookie只属于某个路径下。

session：

Session保存的东西越多，就越占用服务器内存，对于用户在线人数较多的网站，服务器的内存压力会比较大。
依赖于cookie（sessionID保存在cookie），如果禁用cookie，则要使用URL重写，不安全。
创建Session变量有很大的随意性，可随时调用，不需要开发者做精确地处理，所以，过度使用session变量将会导致代码不可读而且不好维护。

20.HTML5语义化

1.你是如何理解前端的语义化的

语义化是指根据内容的结构化 (内容语义化) ，选择合适的标签 (代码语义化) 。通俗来讲就是用正确的标签做正确的事情。

为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；

用户体验：例如title、alt用于解释名词或解释图片信息的标签尽量填写有含义的词语、label标签的活用；

有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以有意义的方式来渲染网页；

便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化,开发者能清晰的看出网页的结构,便于团队的开发与维护。

常见的语义化标签

<header></header> 头部 
<nav></nav>导航栏
<section></section> 区块
<main></main> 主要区域 
<article></article> 主要内容 
<aside></aside> 相关内容或者引文
<footer></footer> 底部
<time></time> 时间标签
<audio></audio>
<video></video>
<canvas></canvas>

2.写HTML代码时，应该注意什么

尽可能少的使用无语义的标签div和span；
在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
不要使用纯样式标签，如：b、font、u等，改用css设置。
需要强调的文本，可以包含在strong或em标签中，strong默认样式是加粗（不要用b），em是斜体（不要用i）；
使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。
补充一点：不仅写html结构时，要用语义化标签，给元素写css类名时，也要遵循语义化原则，不要，随便起个名字就用，那样等以后，再重构时，非常难读。最忌讳的是不会英文，用汉语拼音代替。可以使用翻译软件，毕竟随时备着。

3.HTML5新增了哪些语义化标签

1.header元素

header元素代表“网页“和”section”的页眉。通常包含H1~H6元素或者hgroup元素。
作为整个页面或者内容块的标题，也可以包裹一节的目录部分，一个搜索框，一个nav，或者任何相关logo。
整个页面没有限制header元素的个数，可以拥有多个，可以为每个内容块增加一个header元素。

header使用注意：

可以是“网页”或任意“section”的头部部分；

没有个数限制。

如果hgroup或h1-h6自己就能工作的很好，那就不要用header。

2.footer元素

footer元素代表“网页”或“section”的页脚，通常含有该页面的一些基本信息，例如：文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。

footer使用注意：

可以是“网页”或任意“section”的底部部分；

没有个数限制，除了包裹的内容不一样，其他跟header类似。

3.hgroup元素

hgroup元素代表“网页”或“section”的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合。

hgroup使用注意：

如果只需要一个h1-h6标签就不用hgroup

如果有连续多个h1-h6标签就用hgroup

如果有连续多个标题和其他文章数据，h1-h6标签就用hgroup包住，和其他文章元数据一起放入header标签

4.nav元素

nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。

nav使用注意：

用在整个页面主要导航部分上，不合适就不要用nav元素。

5.aside元素

aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名词解释等。（特殊的section）
在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以是日志串连，其他组的导航，甚至广告，这些内容相关的页面。

aside使用注意：

aside在article内表示主要内容的附属信息，

在article之外则可做侧边栏，没有article与之对应，最好不用。

如果是广告，其他日志链接或者其他分类导航也可以用

6.article元素

article元素最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。
譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具。（特殊的section）
除了它的内容，article会有一个标题（通常会在header里），会有一个footer页脚。

article使用注意：

自身独立的情况下：用article

是相关内容：用section

没有语义的：用div

21.HTML5带来的新特性

1.HTML5的十大新特性

语义标签 <header, <footer, <article, and <section。
增强型表单比如数字、日期、时间、日历和滑块。
视频和音频（借由 <video 和 <audio）
Canvas绘图
SVG绘图
地理定位 Geolocation
拖放API
Web Worker
Web Storage
WebSocket

2.说一下 web worker

在 HTML 页面中，如果在执行脚本时，页面的状态是不可相应的，直到脚本执行完成后，页面才变成可相应。web worker 是运行在后台的 js，独立于其他脚本，不会影响页面的性能。并且通过 postMessage 将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了。
如何创建 web worker：

检测浏览器对于 web worker 的支持性
创建 web worker 文件（js，回传函数等）
创建 web worker 对象

3.说一下 HTML5 drag API

ondragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
ondarg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
ondragend：事件主体是被拖放元素，在整个拖放操作结束时触发。
- ondragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
ondragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
ondragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
ondrop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。

注意:

可在ondragstart事件中使用event.dataTransfer.setData()设置被拖数据的数据类型和值

默认的，无法将数据/元素放置到其它元素中，需要调用ondragover事件的event.preventDefault()方法阻止对元素的默认处理方式。

ondrag事件中也需要使用event.preventDefault()来阻止默认事件。可用event.dataTransfer.getData()或的被拖数据

4.Canvas和SVG的区别

SVG： SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言XML描述的2D图形的语言，SVG基于XML就意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
其特点如下：

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

Canvas： Canvas是画布，通过Javascript来绘制2D图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。
其特点如下：

依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘

注：矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。

5.浏览器如何对HTML5的离线储存资源进行管理和加载

有线情况下:

浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。

<!DOCTYPE HTML>
<html manifest = "cache.manifest">
...
</html>

cache.manifest文件的书写方式

CACHE MANIFEST
#v0.11

CACHE:

js/app.js
css/style.css

NETWORK:
resourse/logo.png

FALLBACK:
/ /offline.html

CACHE：离线存储的资源列表
NETWORK：在线才能访问的资源
FALLBACK：如果访问的第一个资源失败，那么使用第二个资源来替换它

如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。

在离线情况下:
浏览器直接使用离线缓存的资源；

原理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制（不是存储技术），通过这个文件的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。当网络处于离线状态时，浏览器会通过被离线存储的数据进行页面展示

6.聊聊Web Storage

WebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。

WebStorage两个主要目标：

提供一种在cookie之外存储会话数据的路径。
提供一种存储大量可以跨会话存在的数据的机制。

HTML5的WebStorage提供了两种API：

localStorage（本地存储）和sessionStorage（会话存储）。

localStorage和sessionStorage的异同：

生命周期：

localStorage：
localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。
sessionStorage：
sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。
同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。

存储大小：
localStorage和sessionStorage的存储数据大小一般都是：5MB
存储位置：
localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。
存储内容类型：
localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理
获取方式：

localStorage：window.localStorage;；
sessionStorage：window.sessionStorage;

应用场景：

localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。
sessionStorage：敏感账号一次性登录；

WebStorage相比cookie的优点：

存储空间更大：cookie为4KB，而WebStorage是5MB；
节省网络流量：WebStorage不会传送到服务器，存储在本地的数据可以直接获取，也不会像cookie一样美词请求都会传送到服务器，所以减少了客户端和服务器端的交互，节省了网络流量；
对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage会非常方便；
快速显示：有的数据存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快；
安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获，但是仍然存在伪造问题；

22.页面导入样式时，使用link和@import有什么区别？

从属关系：link属于HTML标签，@import时CSS提供的语法规则。link除了加载css，还可以定义RSS、rel连接属性等，@import只能加载CSS
加载顺序：页面加载时，link会同时被加载；而@import引用的CSS会等页面被加载完后再加载
兼容性：@import只有IE5以上才能被识别；而link是HTML标签，无兼容性问题
DOM可控性：通过js操作DOM，可以插入link标签来改变样式；由于DOM方法是基于文档的，无法使用@import方式插入样式

23.简述超链接target属性的取值和作用

_blank：在新窗口中打开被链接文档
_self：默认，在相同的框架中打开被链接文档
_parent：在父框架中打开被链接文档，在frame或iframe中使用较多
_top：在整个窗口中打开被链接文档，在frame或iframe中使用较多
framename：在指定的框架中打开被链接文档
任意字符：若链接没有打开，则在新窗口中打开，与_blank一致；若链接已经打开，则跳转到该标签页并刷新页面

24.label都有哪些作用？并举相应的例子说明

label标签：表示用户界面中某个元素的说明
与input元素相关联的优点：

标签文本不仅与相应的文本输入元素在视觉上相关联，程序中也是如此。意味着当用户聚焦到这个表单输入元素时，屏幕阅读器可以读出标签
点击关联的标签来聚焦或者激活这个输入元素，就像直接点击输入元素一样。扩大了元素的可点击区域

将label与input匹配在一起，需要给input一个id属性，而label需要一个for属性，其值与input的id一致
将input直接放在label里，则不需要for和id属性，因为关联已隐含存在
注意：

不要在label元素的内部放置可交互的元素，如a或button，会更难触发相关联的输入元素
在label中放置标题元素会干扰许多辅助技术
若input元素声明了type=“button”和有效的value属性，则不需要为其添加标签

实例

input的focus事件会触发锚点定位，可以利用label当触发器实现选项卡切换效果。下面代码选自《css世界》

<div class="box">
  <div class="list"><input id="one" readonly>1</div>
  <div class="list"><input id="two" readonly>2</div>
  <div class="list"><input id="three" readonly>3</div>
  <div class="list"><input id="four" readonly>4</div>
</div>
<div class="link">
  <label class="click" for="one">1</label>
  <label class="click" for="two">2</label>
  <label class="click" for="three">3</label>
  <label class="click" for="four">4</label>
</div>

<style>
  .box {
    width: 20em;
    height: 10em;
    border: 1px solid #ddd;
    overflow: hidden;
  }
  .list {
    height: 100%;
    background: #ddd;
    text-align: center;
    position: relative;
  }
  .list > input {
    position: absolute;
    top: 0;
    height: 100%;
    width: 1px;
    border: 0;
    padding: 0;
    margin: 0;
    clip: rect(0 0 0 0);
  }
</style>

25.浏览器内多个标签页之间的通信方式有哪些？

websocket（可跨域）：是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议
postMessage（可跨域）：window.postMessage()
sharedWorker：

webworker：作为浏览器的新特性，可以提供一个额外的线程来执行一些js代码（多线程），并且不会影响到浏览器用户界面，但是不能DOM操作
SharedWorker：可以被多个window共同使用，用来跨页面传输数据，但必须保证这些标签页都是同源的

Server-Sent Events：HTML5服务器发送事件，允许网页获得来自服务器的更新
localStorage：是浏览器多个标签共用的储存空间，可以用来多标签之前的通信（sessionStorage是会话级的存储空间，每个标签页都是单独的）
cookies：须在同一域名内，并且目录也得相同
BroadcastChannel（Chrome商店的api）：只要在同一原始域和用户代理下，所有窗口、iframe之间都可以交互

26.常见的浏览器内核都有哪些？并介绍下你对内核的理解

内核主要分为渲染引擎和js引擎，前者负责页面的渲染，后者负责执行解析javascript。之后由于js引擎越来越独立，现在所说的浏览器内核大多指渲染引擎

Trident：IE 360兼容模式国内浏览器兼容模式
Gecko：FireFox 火狐
Webkit：Safair、Chrome<28旧版
Blink：Chrome>28、Opera>12.18、Edge新版
Presto：Opera<=12.18 欧朋七以上
EdgeHtml：edge12-18

27.html5中的form怎么关闭自动填充？

默认情况下，浏览器会记录用户网页上提交的输入框信息。这使得浏览器能够提供自动补全（在用户开始输入的时候给用户提供可能的内容）和自动填充（在加载的时候预先填充某些字段）功能
禁用自动填充：autocomplete: “off”
可为整个表单设置或表单中某个输入元素单独设置

28.为什么HTML5只需要写就可以？

因为HTML5与HTML4基于的基准不同。HTML4基于SGML，因此除了DOCTYPE之外，还需要引入DTD来告诉浏览器用什么标准进行渲染。DTD还分为标准模式和严格模式，如果不指定会变成怪异模式。
HTML5不基于SGML，故不用指定DTD，但需要DOCTYPE来规范浏览器的渲染行为
SGML是通用标记语言的集合，包括XML，HTML，故需要DTD来指定使用哪种规范

29.你认为table的作用和优缺点是什么呢？

table标签定义HTML表格。用来展示表格数据，在之前一段时间内也用来做页面布局

用作布局优点：

对左右栏自适应等高布局来说很便捷
很容易让内容自适应垂直居中
兼容性好

用作布局缺点:

比其它html标记占用更多的字节
会阻碍浏览器渲染引擎的渲染顺序
一旦布局完成，很难改变其布局结构
table中内容全部加载完，table才在页面显示，如果内容较多或加载较慢，页面会出现空白，用户体验不好

30.说说你对html中的置换元素和非置换元素的理解

置换元素：一个内容不受css视觉格式化模型控制，css渲染模型并不考虑对此内容渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素。

主要是指img，input，textarea，select，object等这类默认就有css格式化外表范围的元素
浏览器根据元素的标签和属性，来决定元素的具体显示内容，如根据img标签的src属性来显示图片、根据input标签的type属性来决定显示输入框还是按钮

非置换元素：除了置换元素外的元素，内容直接展示给浏览器

31.请描述HTML元素的显示优先级

帧元素（frameset）优先级最高（H5已经不支持）
表单元素>非表单元素
有窗口元素>无窗口元素，有窗口元素如select、object（这种说法主要是微软自己定义的，来自于博客“一步步教你实现跨游览器的日期选择器”）
css的z-index属性可以用来控制html元素显示时的覆盖次序。但只在同一类元素间其决定作用，如有窗口元素总是显示在无窗口元素前面

32.谈谈你对input元素中readonly和disabled属性的理解

readonly：规定表单字段只读。不可编辑、样式与正常无异、可以复制、可以获得焦点、可以提交，对hidden、radio、checkbox、range、color无效
disabled：规定表单字段禁用。不可编辑、样式置灰、不可复制、不可获得焦点、不可提交，对所有表单都适用

33.js放在html的和有什么区别？

浏览器解析HTML是时候是从上到下执行的，在不考虑script标签中的async（异步加载）和defer（延迟加载）情况下，html渲染时遇到script标签时，会解析执行js代码，完成后再渲染html。这样会阻碍DOM解析，如果script是引用外部资源或对DOM有操作，在head标签中引用会导致页面空白或报错。在body闭合标签前中引用则避免了这样的问题。

script async：使用async会在html解析期间下载文件，并在下载完成后暂定html解析，执行下载的外部js文件，然后继续解析html
script defer：在html解析时下载文件，等到html解析完成后才执行它

34.关于form标签的enctype属性你有哪些了解？

enctype属性规定在将表单数据发送到服务器之前如何对其进行编码。只有method=”post”时才使用enctype属性

application/x-www-form-urlencoded：默认，在发送前对所有字符进行编码（将空格转换为”+”符号，特殊字符转换为ASCII HEX值）
multipart/form-data：不对字符编码。当使用有文件上传控件的表单时，该值是必需的
text/plain：将空格转换为”+”，但不编码特殊字符

35.说说你对属性data-*的理解

data-*是H5新增的属性，用于储存私有页面后应用的私有数据，可以用在所有HTML元素上。

属性名不要包含大小写，在data-后必须至少有一个字符
该属性可以是任何字符串
获取方式

js访问：通过getAttribute()配合他们完整的属性名称读取、通过dataset对象获取或修改（需用驼峰命名）
css访问：使用attr()函数来显示data-*的内容、通过属性选择器来设置样式

36.DOM和BOM有什么区别？

DOM：Document Object Model（文档对象模型），用来呈现以及与任意HTML或XML文档交互的API。DOM是载入到浏览器中的文档模型，以节点树的形式来变现文档，每个节点代表文档的构成部分
BOM：Browser Object Model（浏览器对象模型），实现JavaScript与浏览器之间的交互

37.Standards模式和Quirks模式有什么区别？

目前浏览器的排版引擎使用三种模式：怪异模式（Quirks mode）、接近标准模式（Almost standards mode）、以及标准模式（Standards mode）。在怪异模式下，排版会模拟Navigator4与IE5的非标准行为。在标准模式下，行为即HTML与CSS的规范描述行为。在接近标准模式下，值有少数的怪异行为被实现。

对HTML来说，可以使用文件开头的DOCTYPE来决定用怪异模式还是标准模式

主要区别有:

盒模型：在W3C标准中，设置一个元素的高度和宽度，是指元素内容的宽度和高度，而在Quirks mode下，还包含了padding和border。可以用box-sizing属性值content-box和border-box(怪异盒模型)来规定
设置行内元素的宽度和高度：在Standards mode下，不会生效，而在Quirks mode下是生效的
设置百分比高度：在Standards mode下，一个元素的高度是由其包含的内容决定的，如果父元素没有设置高度，子元素设置的百分比高度是无效的
设置margin: 0 auto;使元素水平居中：Quirks mode下是无效的

38.HTML与XHTML二者有不同

含义不同 HTML是一种基本的WEB网页设计语言，XHTML是一个基于XMl的置标语言
主要区别有：
1.文档结构：XHTML中DOCTYPE是强制性的、html中XML namespace属性是强制性的、html/head/title/body也是强制性的
2.元素语法：XHTML元素必须正确嵌套、元素必须始终关闭、元素必须小写、文档必须有一个根元素.
3.属性语法：XHTML属性必须使用小写、属性值必须用引号包围、属性不允许简写

39.说说你对WEB标准和W3C的理解与认识？

web标准可以分为结构、表现和行为。
结构主要是有HTML标签组成。或许通俗点说，在页面body里面我们写入的标签都是为了页面的结构。
表现即指css样式表，通过css可以是页面的结构标签更具美感。
行为是指页面和用户具有一定的交互，同时页面结构或者表现发生变化，主要是有js组成。
web标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者的界限并不那么清晰。W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范：包含如下几点
1.对于结构要求：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助
- 1）标签字母要小写
- 2）标签要闭合
- 3）标签不允许随意嵌套
2.对于css和js来说
- 1）尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
- 2）样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版
- 3）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。

40.Form表单是怎么上传文件的？你了解它的原理吗？

Form表单中文件上传控件是：input type=”file”，此时表单的enctype必须指定为multipart/form-data（表明表单需要上传二进制数据），method必须是post。设置multiple=”multiple”可以同时上传多个文件。也可以上传图片，需要把图片转换成base64格式再进行传输。

原理是把文件转换成字节流，然后使用http传输，后端把接收到的数据转化为原本格式

41.From表单提交时为什么会刷新页面？怎么预防刷新？

早期网页交互模型只能是浏览器提交数据给服务器，服务器做出响应重新返回一个页面，浏览器加载这个页面进行显示。早期前端没有编程式发送网络请求的API，更没有前端路由管理的概念，所以表单提交跳转页面是广泛接受的方案。

预防刷新：使用js拦截form的onsubmit事件，阻止浏览器的默认行为，然后用ajax/fetch和后台交互。

42.渐进式渲染是什么？

渐进式加载，也叫惰性加载。解决首次页面加载时间过长的问题，为了尽快将有效信息输送给用户，采取延迟加载尽可能多的资源（HTML、CSS和JavaScript），只有在用户第一次使用到它的时候，它才会被立刻加载
常见的方法有:

代码拆分加载
异步加载不会影响页面的js
对于图片有：

使用图片占位符，通过js加载
按需加载，当图片出现在可视区域时才加载

43.什么是html的字符实体？版权符号代码怎么写？

HTML中预留字符必需替换为字符实体，以便能够正确的显示预留字符。
版权符号：

©

44.怎么在IE8及以下实现HTML5的兼容？

使用document.createElement()来创建H5新增元素，然后格式化创建的元素（默认为内联元素）
使用html5shiv.min.js

45.video和audio分别支持哪些格式？

video：MP4、WebM、Ogg
audio：MP3、Wav、Ogg

46.favicon.ico有什么作用？怎么在页面中引用？常用尺寸有哪些？可以修改后缀名吗？

作用：用来创建站点图标。
引用：

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

尺寸：16×16、32×32、48×48、64×64或128×128
可以，支持的文件类型有（同时修改type属性值）：png（image/png）、gif（image/gif）、jpeg（image/gif）、ico（image/x-icon）、svg（image/svg+xml）

47.在a标签上的四个伪类执行顺序是什么？

执行顺序：link（未访问）、hover（鼠标悬停）、active（激活时）、visited（访问过）
为达到预期效果，css定义中，书写顺序为：link、visited、hover、active

48.a标签下的href=”javascript:void(0)”起到了什么作用？说说你对javascript:void(0)的理解

作用：使点击链接后不发生任何行为，常用于阻止页面刷新或跳转
理解:

当用户点击一个以javascript: URI时，它会执行URI中的代码，然后用返回值替换页面内容，除非返回值时undefined。void运算符可用于返回undefined。

void关键字在js的含义为执行一个表达式，但不会返回任何值（即undefined）；因此void(0)语句相当于执行表达式0，然后不返回任何值

49.说一下对 GET 以及 POST 的区别？

get请求是从服务器上获取数据, post请求时向服务器发送数据.
get安全性非常低, post安全性较高.get请求的参数包含在url中, post请求通过Request body 传递参数.
get请求的数据量较小, 不能大于2KB,post请求的数据量大, 一般来说不受限制.
GET请求会被浏览器主动cache，而POST不会，除非手动设置。
get请求只能进行url编码. 而POST支持多种编码方式
GET请求参数会被完整的保留在浏览器的历史记录中, 而POST请求不会.

50.从浏览器地址栏输入url到显示页面的步骤

浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；

浏览器向服务器发送http请求，如果服务器段返回以301之类的重定向，浏览器根据相应头中的location再次发送请求
服务器端接受请求，处理请求生成html代码，返回给浏览器，这时的html页面代码可能是经过压缩的,浏览器接收服务器响应结果，如果有压缩则首先进行解压处理，紧接着就是页面解析渲染

解析渲染该过程主要分为以下步骤：

解析HTML—-构建DOM树—-DOM树与CSS样式进行附着构造呈现树——布局、绘制
详细过程如下：
1)用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件。
2)浏览器开始载入html代码，发现标签内有一个标签引用外部CSS文件。
3)浏览器又发出CSS文件的请求，服务器返回这个CSS文件。
4)浏览器继续载入html中部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了。
5)浏览器在代码中发现一个标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码。
6)服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码。
7)浏览器发现了一个包含一行Javascript代码的<script标签，赶快运行它。
8)Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个<style（style.display=”none”）。突然少了这么一个元素，浏览器不得不重新渲染这部分代码。
9)终于等到了的到来，浏览器长舒一口气
10)等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下＜link＞标签的CSS路径。
11)浏览器召集了在座的各位们，重新来过…，浏览器向服务器请求了新的CSS文件，重新渲染页面。

51.HTML全局属性(global attribute)有哪些

class:为元素设置类标识
data-*: 为元素增加自定义属性
draggable: 设置元素是否可拖拽
id: 元素id，文档内唯一
lang: 元素内容的的语言
style: 行内css样式
title: 元素相关的建议信息

52.video标签的几个属性方法

谷歌浏览器把音频和视频标签的自动播放都禁止了，如果想自动播放，需要添加muted属性，

src：视频的URL
poster：视频封面，没有播放时显示的图片
preload：预加载
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制条
width：视频宽度
height：视频高度
muted:静音

53.app怎么做适配的

基于手机系统开发的app(原生Android/IOS)
另外一种是webapp
设置以下标签：

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

具体的含义为：app完成的页面的宽度等于设备的宽度，页面的缩放比例为1.0，不允许最大缩放；

使用媒体查询和响应式做适配
使用媒体查询检测设备屏幕的大小改变布局样式，但是成本耗费比较大，不易操作
使用单位自己单位中经常使用的封装好的flexble.js文件做适配
封装好的flexble.js文件文件可以做到适配，并且原理是已经封装好的视口和设备像素比基于webapp开发

Html5中datalist是什么

<!--
含义和概念：
<datalist>标签规定了<input>元素可能的选项列表。是HTML5新增的一个标签
<datalist>标签被用来在为<input>元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。
请使用<input>元素的list属性来绑定<datalist>元素。
案例如下：
-->
<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

HTTP全名叫什么

http的英文全称是:HyperText Transfer Protocol。中文译为超文本传输协议。
http是一个简单的请求-响应协议，它通常运行在TCP之上。
HTTP是基于客户/服务器模式，且面向连接的。典型的HTTP事务处理有如下的过程：
（1）客户与服务器建立连接；
（2）客户向服务器提出请求；
（3）服务器接受请求，并根据请求返回相应的文件作为应答；
（4）客户与服务器关闭连接。
HTTPS （全称：Hyper Text Transfer Protocol over SecureSocket Layer），HTTPS主要由两部分组成：HTTP+SSL/TLS，也就是在HTTP上又加了一层处理加密信息的模块。服务端和客户端的信息传输都会通过TLS进行加密，所以传输的数据都是加密后的数据。
ssl：SSL = Secure Sockets Layer 安全套接字协议
tls：TLS = Transport Layer Security，TLS传输层安全
HTTPS与HTTP原理区别
HTTP原理
① 客户端的浏览器首先要通过网络与服务器建立连接，该连接是通过TCP 来完成的，一般TCP连接的端口号是80。建立连接后，客户机发送一个请求给服务器，请求方式的格式为：统一资源标识符（URL）、协议版本号，后边是MIME信息包括请求修饰符、客户机信息和许可内容。
②服务器接到请求后，给予相应的响应信息，其格式为一个状态行，包括信息的协议版本号、一个成功或错误的代码，后边是MIME信息包括服务器信息、实体信息和可能的内容。
HTTPS原理
① 客户端将它所支持的算法列表和一个用作产生密钥的随机数发送给服务器；
② 服务器从算法列表中选择一种加密算法，并将它和一份包含服务器公用密钥的证书发送给客户端；该证书还包含了用于认证目的的服务器标识，服务器同时还提供了一个用作产生密钥的随机数； ③ 客户端对服务器的证书进行验证（有关验证证书，可以参考数字签名），并抽取服务器的公用密钥;然后，再产生一个称作pre_master_secret的随机密码串，并使用服务器的公用密钥对其进行加密（参考非对称加/解密），并将加密后的信息发送给服务器；
④ 客户端与服务器端根据 pre_master_secret 以及客户端与服务器的随机数值独立计算出加密和MAC密钥（参考DH密钥交换算法）；
⑤ 客户端将所有握手消息的 MAC 值发送给服务器；
⑥ 服务器将所有握手消息的 MAC 值发送给客户端。
HTTPS的优缺点
优点
1. 使用HTTPS协议可认证用户和服务器，确保数据发送到正确的客户机和服务器；
2. HTTPS协议是由SSL+HTTP构建的可进行加密传输、身份认证的网络协议，要比 HTTP安全，可防止数据在传输过程中被窃取、改变，确保数据的完整性。
3. HTTPS是现行架构下最安全的解决方案，虽然不是绝对安全，但它大幅增加了中间人攻击的成本
缺点
1. 相同网络环境下，HTTPS协议会使页面的加载时间延长近50%，增加10%到20%的耗电。此外，HTTPS协议还会影响缓存，增加数据开销和功耗。
2. HTTPS协议的安全是有范围的，在黑客攻击、拒绝服务攻击和服务器劫持等方面几乎起不到什么作用。
3. 最关键的是，SSL证书的信用链体系并不安全。特别是在某些国家可以控制CA根证书的情况下，中间人攻击一样可行。
4. 成本增加。部署 HTTPS 后，因为HTTPS协议的工作要增加额外的计算资源消耗，例如SSL协议加密算法和SSL交互次数将占用一定的计算资源和服务器成本。在大规模用户访问应用的场景下，服务器需要频繁地做加密和解密操作，几乎每一个字节都需要做加解密，这就产生了服务器成本。随着云计算技术的发展，数据中心部署的服务器使用成本在规模增加后逐步下降，相对于用户访问的安全提升，其投入成本已经下降到可接受程度。

假设div里面设置overflow:hidden，里面有select框，被遮住怎么办？

如果select框用的是原生的一般不会被遮住的。
如果用的是插件或者自己写的，那么可能会被遮住，他被遮住的原因就是因为父级元素div里面写了overflow:hidden，导致一旦超出这个盒子就会被隐藏掉，要想解决这个问题，那么我们可以改变这个下拉框的参照物，利用定位给他调整到指定的位置，利用z-index将层级提高，这样就不会受到父元素的限制了。

简述css中的不同盒模型的特性，以及应用，介绍box-sizing属性

1.在css中盒模型分为2种：
1）w3c标准盒子盒模型：
默认情况下我们使用的都是标准盒子模型，他的计算规则：
元素的实际宽度=width+左右padding+左右border
元素的实际高度=height+上下padding+上下border
width和height指的是内容区的宽度和高度，所以设置了内间距padding和边框线border之后盒子是会被撑大的。
2）ie怪异盒子模型
在ie盒模型中width和height就是元素的实际宽度和高度
计算规则：
元素内容区的宽度=width-左右padding-左右border
元素内容区的高度=height-上下padding-上下border
设置padding和border会使内容区变小。
2.我们可以通过box-sizing属性来更改盒子模型
如果box-sizing:content-box;这种模式是w3c标准盒模型
如果box-sizing:border-box;这种模式是ie怪异盒模型

怎么实现网页优化

页面优化的作用：让网站被搜索引擎搜索到,提高搜索排名
页面头部优化

页面头部指的是代码部分，具体一点就是的“Description（描述）”和“Keywords（关键字）”两部分：
1、“描述”部分应该用近乎描述的语言写下一段介绍你网站的文字，在这其中，你应该适当的对你网站的特色内容加以重复以求突出；
2、“关键字”部分应该列出你认为合适的，能突出网站内容的关键字就可以了，关键字不要设置太多，可设置10---8个，搜索引擎只会浏览靠前的几个关键字。
<meta name="keywords"content="" />向搜索引擎说明你的网页的关键词；
<meta name="description"content=""/>告诉搜索引擎你的站点的主要内容；

超链接优化

搜索引擎为何可以能够索引全世界的网站，是因为各个搜索引擎程序中都有一个会自动“爬行”于互联网上的智能机器人程序，这个机器人就是顺着网站之间的链接游览世界的，那么我们就应该为它创造一个良好的爬行通道——合理的设置链接。怎样的链接才是合理的呢？
1、采用纯文本链接，少用，最好是别用Flash动画设置链接，因为搜索引擎无法识别Flash上的文字.
2、按规范书写超链接，这个title属性，它既可以起到提示访客的作用，也可以让搜索引擎知道它要去哪里.
3、最好别使用图片热点链接，理由和第一点差不多。

图片优化

图片优化并不是修改图片的大小、颜色，而是你应该为每个标签加上alt属性。
alt属性的作用是当图片无法显示时以文字作为替代显示出来，而对于SEO来说，它可以令搜索引擎有机会索引你网站上的图片，对于一些确实没什么意义的图片，最好也不要省略alt，而应该留空，即。

结构优化

1、压缩页面所在的内存大小，尽量控制在100kb左右，因为搜索引擎搜索的时候容易爬取
2、充分做到结构样式行为的分离，尽量不要结构样式行为混用。

css的优化

A：合理的整合css文件
B: 后代选择符的层级不易过多，一般保持到4层以内
C：正确的使用精灵图，减少图片的请求加载次数
D：注意样式的冗余，比如设置了display:inline,但还给元素设置width height等属性，这样的设置造成属性无效但是不影响显示效果，造成样式的冗余，文件繁琐过大的问题

文章版权归作者所有，未经允许请勿转载。

THE END