前端HTML小结

1. web标准和w3c标准
2. 行内元素、块级元素和空元素
3. < !DOCTYPE>
4. 语义化
5. SEO
6. iframe
7. cookie、sessionStorage和localStorage的区别
8. 离线缓存
9. 渐进增强和优降级

1.1web标准和w3c标准：
标签闭合、标签小写、不乱嵌套、从外部引入css和js、结构行为表现分离

2.行内元素、块级元素和空元素
2.1.1 行内元素
行内元素不可以设置宽高，不独占一行

2.1.2 常用实例
a、b、span、img、input、select、strong

2.2.1 块级元素
块级元素可以设置宽高，独占一行

2.2.2 常用实例
div、ul、ol、li、dl、dt、dd、h1、h2、p

2.3.1 空元素

3.< !DOCTYPE>
3.1 特点：
1）声明必须是 HTML 文档的第一行，位于 标签之前
2）声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令

3.2.1 严格模式
定义：浏览器按照w3c标准解析代码
出现原因：文档包含DOCTYPE

3.2.2 混杂模式
定义：浏览器用自己的方式解析代码
出现原因：DOCTYPE不存在或形式不正确

4.语义化
4.1 目的
主要目的就是让大家直观的认识标和属性的用途和作用（⽤正确的标签做正确的事情）

4.2 优点
1）让页面的内容结构化，便于对浏览器、搜索引擎解析
2）在没有css的情况下也以文档格式显示，并且是容易阅读的
3）搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO
4）使阅读源代码的人对网站更容易将网站分块，便于阅读维护

4.3 常用

5.SEO（搜索引擎优化）
5.1 方案
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）提⾼⽹站速度：⽹站速度是搜索引擎排序的⼀个重要指标

6.iframe
6.1 定义
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）

6.2优点
1）iframe能够把嵌入的网页原样展现出来
2）模块分离，便于更改
3）.重载页面时不需要重载整个页面，只需要重载页面中的一个框架页

6.3缺点
1）iframe 会阻塞主⻚⾯的 Onload 事件
2）搜索引擎的检索程序⽆法解读这种⻚⾯，不利于 SEO
3）iframe 和主⻚⾯共享连接池，⽽浏览器对相同域的连接有限制，所以会影响⻚⾯的并⾏ 加载

7 . cookie、sessionStorage和localStorage的区别
7.1 数据传输
1）cookie是网站为了标识用户身份而存储在用户本地终端上的数据（经过加密）
2）sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
3）cookie数据始终在同源的http请求中携带（即使不需要），也会在浏览器和服务器之间来回传递

7.2存储大小
1）cookie的数据大小不能超过4K
2）sessionStorage 和 localStorage 虽然也有存储⼤⼩的限制，但⽐ cookie ⼤得 多，可以达到5M或更⼤

7.3 有效时间
1）localStorage 存储持久数据，浏览器关闭后数据不丢失除⾮主动删除数据
2）sessionStorage 数据在当前浏览器窗⼝关闭后⾃动删除
3）cookie 设置的 cookie 过期时间之前⼀直有效，即使窗⼝或浏览器关闭

8.离线缓存
8.1 定义
在⽤户没有与因特⽹连接时，可以正常访问站点或应⽤，在⽤户与因特⽹连接时，更新⽤ 户机器上的缓存⽂件

8.2 原理
HTML5 的离线存储是基于⼀个新建的 .appcache ⽂件的缓存机制(不是存储技 术)，通过这个⽂件上的解析清单离线存储资源，这些资源就会像 cookie ⼀样被存储了下 来。之后当⽹络在处于离线状态下时，浏览器会通过被离线存储的数据进⾏⻚⾯展示

8.3 使用
1）⻚⾯头部像下⾯⼀样加⼊⼀个 manifest 的属性
2）在 cache.manifest ⽂件的编写离线存储的资源
3）在离线状态时，操作 window.applicationCache 进⾏需求实现

8.4 过程
1）在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest ⽂件，如果是第⼀次访问 app ，那么浏览器就会根据manifest⽂件的内容下载相应的资源并且进⾏ 离线存储。如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使⽤离线的资 源加载⻚⾯，然后浏览器会对⽐新的 manifest ⽂件与旧的 manifest ⽂件，如果⽂件没 有发⽣改变，就不做任何操作，如果⽂件改变了，那么就会重新下载⽂件中的资源并进⾏ 离线存储。
2）离线的情况下，浏览器就直接使⽤离线存储的资源

9.渐进增强和优雅降级
9.1 渐进增强
针对低版本浏览器进⾏构建⻚⾯，保证最基本的功能，然后再针对⾼级浏览器 进⾏效果、交互等改进和追加功能达到更好的⽤户体验

9.2优雅降级
⼀开始就构建完整的功能，然后再针对低版本浏览器进⾏兼容

区别：
1）优雅降级是从复杂的现状开始，并试图减少⽤户体验的供给；
2）⽽渐进增 强则是从⼀个⾮常基础的，能够起作⽤的版本开始，并不断扩充，以适应未来环境的需要。