web知识点整理（一）HTML部分
html网页基本结构：
<!DOCTYPE html>
<!-- 文档类型声明 -->
<html lang="en">
<!-- lang语言种类：en为英语；zh-CN为中文。两个都行一般不影响。 -->
<head>
<!-- 头标签 -->
<meta charset="UTF-8">
<!-- 字符集：编码格式UTF-8被称为万国码；统一标准写为UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 定义视图窗口 -->
<title>标题</title>
</head>
<body>
<!-- 内容标签 -->
</body>
</html>
接下来就分别研究各个标签：
1.1 DOCTYPE 的作用是什么？
IE5.5 引入了文档模式的概念，而这个概念是通过使用文档类型（DOCTYPE）切换实现的。
声明位于文档中的最前面的位置，处于 html 标签之前。 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。在 HTML 4.01 中，<!DOCTYPE> 声明需引用 DTD （文档类型声明），因为 HTML 4.01 是基于 SGML （Standard Generalized Markup Language 标准通用标记语言）。DTD 指定了标记语言的规则，确保了浏览器能够正确的渲染内容。
HTML5 不是基于 SGML，因此不要求引用 DTD。
DOCTYPE 不存在或格式不正确会导致文档以兼容模式呈现。（标准模式与兼容模式的区别：标准模式的渲染方式和 JS 引擎的解析方式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。）
一般指定了之后会以标准模式来进行文档解析，否则就以兼容模式进行解析。在标准模式下，浏览器的解析规则都是按照最新的标准进行解析的。而在兼容模式下，浏览器会以向后兼容的方式来模拟老式浏览器的行为，以保证一些老的网站的正确访问。
在 html5 之后不再需要指定 DTD 文档，因为 html5 以前的 html 文档都是基于SGML 的，所以需要通过指定 DTD 来定义文档中允许的属性以及一些规则。而 html5 不再基于 SGML 了，所以不再需要使用 DTD。
（在HTML4.01版本中HTML文档都基于SGML（标准通用标记语言），使用DTD的方式；h5不基于SGML，因此使用doctype的新的声明方式）
SGML 、 HTML 、XML 和 XHTML 的区别：
SGML 是标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言，是所有电子文档标记语言的起源。
HTML 是超文本标记语言，主要是用于规定怎么显示网页。
XML 是可扩展标记语言是未来网页语言的发展方向，XML 和 HTML 的最大区别就在于XML 的标签是可以自己创建的，数量无限多，而 HTML 的标签都是固定的而且数量有限。
XHTML 也是现在基本上所有网页都在用的标记语言，他其实和 HTML 没什么本质的区别，标签都一样，用法也都一样，就是比 HTML 更严格，比如标签必须都用小写，标签都必须有闭合标签等。
（SGML是电子文档标记语言的起源；HTML是超文本标记语言，是一种网页规定；XML标签可自建，可扩展标记语言；XHTML即HTML的严格模式，更规范）
DTD介绍：
DTD（ Document Type Definition 文档类型定义）是一组机器可读的规则，它们定义 XML 或 HTML 的特定版本中所有允许元素及它们的属性和层次关系的定义。在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施。
DTD 是对 HTML 文档的声明，还会影响浏览器的渲染模式（工作模式）。
1.2 meta标签：
meta 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta charset="UTF-8">
<!-- 字符集：编码格式UTF-8被称为万国码；统一标准写为UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 定义视窗（视口），针对移动端优化，viewport表示用户网页可视范围（指页面能够被浏览的范围）， -->
<!-- width：控制viewport的宽度，这个值可以被指定，例如：500px。亦或者是“device-width”，意思是设置视口宽度为设备宽度。
height：控制viewport的高度。
initial-scale：初始缩放比例，即每一次加载时页面缩放的比例。
maximum-scale：允许用户缩放到的最大缩放比例。
minimum-scale：允许用户缩放到的最小缩放比例。
user-scaleable：是否允许用户缩放，可以传“yes”或“no” -->
<!-- 移动端设备开发常用：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> -->
<!-- 再深入学习见文档 -->
<meta name="keywords" content="html,css,xml,javascript">
<!-- 定义文档关键词，用于搜索引擎 -->
<meta name="description" content="Free Web tutorials on HTML and CSS">
<!-- 定义web页面描述 -->
<meta name="author" content="Hege Refsnes">
<!-- 定义页面作者 -->
<meta http-equiv="refresh" content="30">
<!-- 每30秒刷新页面 -->
补充：
<meta name=”robots” content=”index,follow”/> 搜索引擎抓取
<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> 为移动设备添加 viewport
<meta name=”apple-mobile-web-app-title” content=”标题”> iOS 设备 begin
<meta name=”apple-mobile-web-app-capable” content=”yes”/> 添加到主屏后的标题（iOS 6 新增）
是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>
添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
<meta name=”format-detection” content=”telphone=no, email=no”/> 设置苹果工具栏颜色
<meta name=”renderer” content=”webkit”> 启用 360 浏览器的极速模式(webkit)
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”> 避免 IE 使用兼容模式
<meta http-equiv=”Cache-Control” content=”no-siteapp” /> 不让百度转码
<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=”msapplication-tap-highlight” content=”no”> windows phone 点击无高光
设置页面不缓存
<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>
1.3 link标签：
link 标签定义文档与外部资源的关系。
link 元素是空元素，它仅包含属性。此元素只能存在于 head 部分，不过它可出现任何次数。
link 标签中的 rel 属性定义了当前文档与被链接文档之间的关系。常见的 stylesheet 指的是定义一个外部加载的样式表。
页面导入样式时，使用 link 和 @import 有什么区别？
- link是一种引入资源的标签，import是引入css的方式。所以，import引入的只能是css，而link可以引入所有的资源，包括图片，RSS等。
- 加载顺序上也有一些差异。link引用的CSS会同时被加载。import引用的CSS会等到页面全部被下载完再加载。
- 兼容性的差别。link无任何兼容问题，import兼容IE5以上。（当然，IE5估计也找不到了）
- 动态引入样式 link可以后期引入样式，而import是不可以后期引入的，只能初始化页面之前引入。
- 复用率的问题 import可以复用之前的css文件，而link只能一次引用一个文件。当然，import复用文件时，在浏览器实际上是加载了多个文件，会有多个请求。而每一个link只是一个http请求。
<link rel="stylesheet" type="text/css" href="style.css">
<!-- 链接 关联 样式表 数据类型 超链接 -->
<style type="text/css">
@import url(style.css);//载入样式表，可多个
</style>
（基本都用link）
1.4 async与defer异常处理（**模糊）
首先这两个东西为什么而存在的问题。在日渐复杂的前端，异常已经是程序的一部分。如果出现一些小问题，或者服务器加载上出现延迟。而我们默认的引入的script脚本，会阻塞后续的DOM渲染。一旦没有部分异常无法及时加载完成，那么我们的页面因为阻塞问题，将整个白屏。
也许我们可以保证自己服务器的正常，但是你决定保证不了第三方服务器的正常，于是引入了async和defer来优化这个问题。
再来谈谈script的默认，async，defer的之前的差异。
默认情况下：浏览器会立即加载并执行指定的脚本。指定的脚本，指在script标签之上的脚本。所以，如果script放在header中，而对应的文件还未加载完成，会形成阻塞。所以这就是现在很多页面，都会使用默认且把scipt放在页面结尾的原因。
async情况下：async ，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。async是乱序的。
defer情况下：defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。defer是顺序执行。
此外，async跟defer，不支持或者不兼容IE9一下浏览器，总体来说，笔者还是觉得script放最下方靠谱一些。
1.5 文本元素的冒泡与委托（**模糊）
适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。
优点：
1.减少事件注册，节省内存。例如上面代码，只指定 父元素的处理程序，即可管理所有所有子元素的“click”事件；
2.简化了dom节点更新时，相应事件的更新
缺点：
1. 利用事件冒泡的原理，不支持不冒泡的事件；
2. 层级过多，冒泡过程中，可能会被某层阻止掉；
3. 理论上委托会导致浏览器频繁调用处理函数，虽然很可能不需要处理。所以建议就近委托，比如在ol上代理li，而不是在document上代理li。
4. 把所有事件都用代理就可能会出现事件误判。比如，在document中代理了所有button的click事件，另外的人在引用改js时，可能不知道，造成单击button触发了两个click事件。
HTML5部分
3.1 HTML5 有哪些新特性、移除了那些元素？
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
新增的有：
-
语意化更好的内容元素，比如 article、footer、header、nav、section;
常见使用如图：
-
表单控件，calendar、date、time、email、url、search;
input拾色器：选择你喜欢的颜色: <input type="color" name="favcolor">日期选择器：
生日: <input type="date" name="bday">日期时间选择器：
生日 (日期和时间): <input type="datetime-local" name="bdaytime">其他使用较少，使用时参考文档
-
用于媒介回放的 video 和 audio 元素;
- video基本使用：
移除的元素有：
、、、、
纯表现的元素：basefont，big，center，font, s，strike，tt，u;
对可用性产生负面影响的元素：frame，frameset，noframes；
3.2 HTML5浏览器支持
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
IE9 以下版本浏览器兼容HTML5的方法，使用本站的静态资源的html5shiv包：
<!--[if lt IE 9]>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
载入后，初始化新标签的CSS：
/*html5*/
article,aside,dialog,footer,header,section,nav,figure,menu{display:block}
3.3 简述一下你对 HTML 语义化的理解？
相关知识点：
（1） 用正确的标签做正确的事情。
（2） html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
（3） 即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的;
（4） 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于SEO ;
（5） 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
回答：
我认为 html 语义化主要指的是我们应该使用合适的标签来划分网页内容的结构。 html 的本质作用其实就是定义网页文档的结构，一个语义化的文档，能够使页面的结构更加清晰，易于理解。这样不仅有利于开发者的维护和理解，同时也能够使机器对文档内容进行正确的解读。比如说我们常用的 b 标签和 strong 标签，它们在样式上都是文字的加粗，但是 strong 标签拥有强调的语义。
对于一般显示来说，可能我们看上去没有差异，但是对于机器来说，就会有很大的不同。如果用户使用的是屏幕阅读器来访问网页的话，使用 strong 标签就会有明显的语调上的变化，而 b 标签则没有。如果是搜索引擎的爬虫对我们网页进行分析的话，那么它会依赖于 html 标签来确定上下文和各个关键字的权重，一个语义化的文档对爬虫来说是友好的，是有利于爬虫对文档内容解读的，从而有利于我们网站的 SEO 。从 html5 我们可以看出，标准是倾向于以语义化的方式来构建网页的，比如新增了 header 、footer 这些语义标签，删除了 big 、font 这些没有语义的标签。
3.4 前端需要注意哪些 SEO ？
（1） 合理的 title、description、keywords：搜索对着三项的权重逐个减小，title 值强调重点即可，重要关键词出现不要超过 2 次，而且要靠前，不同页面 title 要有所不同；description 把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面 description 有所不同； keywords 列举出重要关键词即可。
（2） 语义化的 HTML 代码，符合 W3C 规范：语义化代码让搜索引擎容易理解网页。
（3） 重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容肯定被抓取。
（4） 重要内容不要用 js 输出：爬虫不会执行 js 获取内容
（5） 少用 iframe：搜索引擎不会抓取 iframe 中的内容
（6） 非装饰性图片必须加 alt
（7） 提高网站速度：网站速度是搜索引擎排序的一个重要指标
3.5 HTML5 的离线储存怎么使用，工作原理能不能解释一下？
在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
原理：HTML5 的离线存储是基于一个新建的 .appcache 文件的缓存机制（不是存储技术），通过这个文件上的解析清单离线存储资源，这些资源就会像 cookie 一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
如何使用：
（1） 创建一个和 html 同名的 manifest 文件，然后在页面头部像下面一样加入一个 manifest 的属性。
CACHE: 表示需要离线存储的资源列表，由于包含 manifest 文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
NETWORK: 表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在 CACHE 和 NETWORK 中有一个相同的资源，那么这个资源还是会被离线存储，也就是说 CACHE 的优先级更高。
FALLBACK: 表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问
offline.html 。
（3）在离线状态时，操作 window.applicationCache 进行离线缓存的操作。
如何更新缓存：
（1） 更新 manifest 文件
（2） 通过 javascript 操作
（3） 清除浏览器缓存注意事项：
（1） 浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点
5MB）。
（2） 如果 manifest 文件，或者内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器继续全部使用老的缓存。
（3） 引用 manifest 的 html 必须与 manifest 文件同源，在同一个域下。
（4） FALLBACK 中的资源必须和 manifest 文件同源。
（5） 当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
（6） 站点中的其他页面即使没有设置 manifest 属性，请求的资源如果在缓存中也从缓存中访问。
（7） 当 manifest 文件发生改变时，资源请求本身也会触发更新。
3.6 浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的呢？
在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问 app ，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。
3.7 常见的浏览器端的存储技术有哪些？
浏览器常见的存储技术有 cookie、localStorage 和 sessionStorage。
还有两种存储技术用于大规模数据存储，webSQL（已被废除）和 indexDB。
IE 支持 userData 存储数据，但是基本很少使用到，除非有很强的浏览器兼容需求。
3.8 请描述一下 cookies，sessionStorage 和 localStorage 的区别？
相关资料：
SessionStorage， LocalStorage， Cookie 这三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对。区别在于前两者属于 HTML5 WebStorage，创建它们的目的便于客户端存储数据。而 cookie 是网站为了标示用户身份而储存在用户本地终端上的数据（通常经过加密）。cookie 数据始终在同源（协议、主机、端口相同）的 http 请求中携带（即使不需要），会在浏览器和服务器间来回传递。
存储大小：
cookie 数据大小不能超过 4 k 。
sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大。
有期时间： localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据。
sessionStorage 数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面时会在顶级浏览上下文中初始化一个新的会话。
cookie 设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭。
作用域：
sessionStorage 只在同源的同窗口（或标签页）中共享数据，也就是只在当前会话中
共享。
localStorage 在所有同源窗口中都是共享的。
cookie 在所有同源窗口中都是共享的。
回答：
浏览器端常用的存储技术是 cookie 、localStorage 和 sessionStorage。
cookie 其实最开始是服务器端用于记录用户状态的一种方式，由服务器设置，在客户端存储，然后每次发起同源请求时，发送给服务器端。cookie 最多能存储 4 k 数据，它的生存时间由 expires 属性指定，并且 cookie 只能被同源的页面访问共享。
sessionStorage 是 html5 提供的一种浏览器本地存储的方法，它借鉴了服务器端 session 的概念，代表的是一次会话中所保存的数据。它一般能够存储 5M 或者更大的数据，它在当前窗口关闭后就失效了，并且 sessionStorage 只能被同一个窗口的同源页面所访问共享。
localStorage 也是 html5 提供的一种浏览器本地存储的方法，它一般也能够存储 5M 或者更大的数据。它和 sessionStorage
不同的是，除非手动删除它，否则它不会失效，并且 localStorage 也只能被同源页面所访问共享。
上面几种方式都是存储少量数据的时候的存储方式，当我们需要在本地存储大量数据的时候，我们可以使用浏览器的 indexDB 这是浏览器提供的一种本地的数据库存储机制。它不
是关系型数据库，它内部采用对象仓库的形式存储数据，它更接近 NoSQL 数据库。
扫一扫
150
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
