合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可
语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
重要内容不要用js输出：爬虫不会执行js获取内容
少用iframe：搜索引擎不会抓取iframe中的内容
非装饰性图片必须加alt
提高网站速度：网站速度是搜索引擎排序的一个重要指标
<img>的title和alt有什么区别通常当鼠标滑动到元素上的时候显示
alt是<img>的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析
1、GET方法
2、POST方法
URL指定的资源提交数据或附加新的数据3、PUT方法
POST方法很像，也是想服务器提交数据。但是，它们之间有不同。PUT指定了资源在服务器上的位置，而POST没有4、HEAD方法
5、DELETE方法
6、OPTIONS方法
URL所支持的方法。如果请求成功，会有一个Allow的头包含类似“GET,POST”这样的信息7、TRACE方法
TRACE方法被用于激发一个远程的，应用层的请求消息回路8、CONNECT方法
TCP/IP通道浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；
服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；
载入解析到的资源文件，渲染页面，完成。
content方面HTTP请求：合并文件、CSS精灵、inline ImageDNS查询：DNS缓存、将资源分布到恰当数量的主机名DOM元素数量Server方面CDNETagGzip压缩Cookie方面cookie大小css方面CSS表达式<link>不使用@importJavascript方面javascript和css从外部引入javascript和cssDOM访问css精灵HTML中拉伸图片1XX：信息状态码
100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息2XX：成功状态码
200 OK 正常返回信息201 Created 请求成功并且服务器创建了新的资源202 Accepted 服务器已接受请求，但尚未处理3XX：重定向
301 Moved Permanently 请求的网页已永久移动到新位置。302 Found 临时性重定向。303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。304 Not Modified 自从上次请求后，请求的网页未修改过。4XX：客户端错误
400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。401 Unauthorized 请求未授权。403 Forbidden 禁止访问。404 Not Found 找不到如何与 URI 相匹配的资源。5XX: 服务器错误
500 Internal Server Error 最常见的服务器端错误。503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。用正确的标签做正确的事情！
html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。
搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解
主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核
JS引擎则：解析和执行javascript来实现网页的动态效果
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加
canvasvideo 和 audio 元素localStorage 长期存储数据，浏览器关闭后数据不丢失sessionStorage 的数据在浏览器关闭后自动删除article、footer、header、nav、sectioncalendar、date、time、email、url、searchwebworker, websocket, Geolocation移除的元素：
basefont，big，center，font, s，strike，tt，u`frame，frameset，noframes支持HTML5新标签：
IE8/IE7/IE6支持通过document.createElement方法产生的标签持HTML5新标签当然也可以直接使用成熟的框架、比如html5shim
HTML5的离线储存怎么使用，工作原理能不能解释一下？在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示
如何使用：
manifest的属性；cache.manifest文件的编写离线存储的资源window.applicationCache进行需求实现CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
HTML5的离线储存资源进行管理和加载的呢在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。
cookies，sessionStorage 和 localStorage 的区别？cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存cookie数据大小不能超过4ksessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据sessionStorage 数据在当前浏览器窗口关闭后自动删除cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭iframe会阻塞主页面的Onload事件
搜索引擎的检索程序无法解读这种页面，不利于SEO
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题
标签闭合、标签小写、不乱嵌套、使用外链css和js、结构行为表现的分离
XHTML可兼容各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页XHTML 元素必须被正确地嵌套，闭合，区分大小写，文档必须拥有根元素页面被加载的时，link会同时被加载，而@imort页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
import只在IE5以上才能识别，而link是XHTML标签，无兼容问题
link方式的样式的权重 高于@import的权重
<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器， 用什么文档类型 规范来解析这个文档
严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行
在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。 DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现
行内元素有：a b span img input select strong
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
空元素：<br> <hr> <img> <input> <link> <meta>
行内元素不可以设置宽高，不独占一行
块级元素可以设置宽高，独占一行
class:为元素设置类标识data-*: 为元素增加自定义属性draggable: 设置元素是否可拖拽id: 元素id，文档内唯一lang: 元素内容的的语言style: 行内css样式title: 元素相关的建议信息svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改。canvas输出的是一整幅画布
svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会是真和锯齿。而canvas输出标量画布，就像一张图片一样，放大会失真或者锯齿
HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为
而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型
svg
border-radius
纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等
区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水
有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试
原文：https://www.cnblogs.com/Strugglinggirl/p/11011473.html