HTML与HTML5相关知识点(持续更新)

分手后的思念是犯贱 2023-05-31 06:49 22阅读 0赞

###### 1、对HTML语义化的理解（语义化标签有哪些） ######

> 使页面内容更加的结构化，便于对浏览器，搜索引擎解析

###### 2、h5新增的特性，移除了哪些元素 ######

（1）新特性

*  语义化标签，比如`<article><footer><header><nav><section>`
 *  表单控件，比如date，time，url，search，calender
 *  一些功能标签：绘画canvas，用于音频audio，视频video

> 和SVG不同，画在Canvas上的元素无法进行缩放，同时也不是DOM的一部分。 WHATWG的HTML5选择Canvas作为标准原因有二：1、由于不用存储画出的每一个元素，所以性能更好。2、和其他语言的二维绘图API类似，更 容易实现。`<canvas>` 标签只是图形容器，您必须使用脚本来绘制图形。

*  本地离线缓存localStorage（长久存储数据，关闭浏览器不会消失），sessionStorage（数据在浏览器关闭后自动删除）
 *  新的技术：webworker,websocket,Geolocation

（2）移除的

*  纯表现的元素：basefont,big,center,font,strike,tt,u
 *  对可用性产生负面影响的元素：frame，frameset,noframes

###### 3、详细解释一些localStorage、sessionStorage，cookie、session区别 ######

> 首先我们需要了解的是，cookies、localStorage、sessionStorage实在客户端，session是在服务器端，session对象保存在服务器上，实现的话，服务器根据客户端发来的session id找到对应的session对象，会话数据仅在一段时间内有效，这是server设置的session有效期，服务器session存储数据更加安全一些，一般存放用户信息。

cookies、localStorage、sessionStorage的区别

1.  cookie始终在同源的http请求中携带，cookie在浏览器和服务器之间来回传递，其他两个数据保存在本地不会传到服务器。
2.  存储大小：cookie数据不可以超过4k，因为每次http请求都会携带cookie，如果问到cookie在http报文什么位置时，是在http请求头上，其他两个大小可以达到5M
3.  数据有效期不同cookie在服务器端设置的有效期内有效，无论窗口或浏览器是否关闭，sessionStorage仅在窗口关闭前有效
4.  webstorage 支持事件通知机制，可以将数据更新的通知发送给监听者，例如：

window.addEventListener("storage",function(){ 
    	 alert("ddddd"
     })

> Web Storage带来的好处：  
> 减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。  
> 快速显示数据：性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示。  
> 临时存储：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便。

###### 4、websocket用法[详细介绍点这里][Link 1] ######

WebSocket是包装成了一个应用层协议作为socket,从而能够让客户端和远程服务端通过web建立全双工通信。websocket提供ws和wss两种URL方案。

###### 5、h5 拖放dragEvent（[详解][Link 2]） ######

*  拖放的流程对应的事件  
    (1)选中-------------draggable属性：设置元素是否可拖动。语法：`<element draggable="true | false | auto" >`true: 可以拖动/false: 禁止拖动/auto: 跟随浏览器定义是否可以拖动  
    (2)拖放-------------每一个可拖动的元素，在拖动过程中，都会经历三个过程，拖动开始–>拖动过程中–> 拖动结束。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70]  
    （3）释放  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 1]  
    这里有一个自己实现的小例子[https://github.com/autumn1245/web/blob/master/%E5%AE%9E%E6%97%B6%E6%9B%B4%E6%96%B0%E5%B0%8F%E4%BE%8B%E5%AD%90/dragEvent][https_github.com_autumn1245_web_blob_master_E5_AE_9E_E6_97_B6_E6_9B_B4_E6_96_B0_E5_B0_8F_E4_BE_8B_E5_AD_90_dragEvent]

###### 6、h5 webworker(Web Worker 是 HTML5 标准的一部分，这一规范定义了一套 API，它允许一段 JavaScript 程序运行在主线程之外的另外一个线程中。)[详情查看][Link 3] ######

（1）应用场景  
（2）主线程  
（3）worker线程

###### 7、h5 应用缓存(manifest) ######

Manifest 是 H5提供的一种应用缓存机制, 基于它web应用可以实现离线访问, 为此, 浏览器还提供了应用缓存的api–applicationCache.鉴于mainfest缓存机制我们可以做到：

*  离线访问
 *  访问更快-----数据存在于本地, 省去了浏览器发起http请求的时间, 因此访问更快, 移动端效果更为明显.
 *  降低负载-----浏览器只在manifest文件改动时才去服务器下载需要缓存的资源, 大大降低了服务器负载.  
    （2）过程  
    ![mainfest过程][mainfest]  
    （3）、如何开启应用缓存

<html manifest="test.appcache">
      ...
    </html>
    //在html标签中指定manifest文件, 便表示该网页使用manifest进行离线缓存. 该网页内需要缓存的文件列表需要在 test.appcache 文本文件中指定.

(4)mainfest缓存清单

CACHE MANIFEST
    # v1.0.0
    content.css
    
    NETWORK:
    app.js
    
    FALLBACK:
    /other 404.html

> 其中第一行必须以 CACHE MANIFEST 开头, 后可跟若干字符注释, 注释从\#号开始. 跟在 CACHE MANIFEST 行后的文件, 每行列出一个, 这些文件是需要缓存的文件. 因此 content.css 会被缓存, 不需要访问网络.  
> 第二段内容以 NETWORK: 开始, 跟在该行后的文件表示需要访问网络. 如: app.js 将直接从网络上下载, 并不走manifest cache, 如果除了第一段中缓存的文件以外, 其他文件都从网络上获取, 那么此时可将 app.js 改为 \* (通配符).  
> 第三段内容以 FALLBACK: 开始, 跟在该行后的文件表示会有一个替代方案. 如: 当访问 /other 路径时, 如果访问失败, 那么将自动加载 404.html 作为替代.

（5）缓存状态

*  UNCACHED(未缓存): 表明应用缓存对象还没有初始化完成.（0）
 *  IDLE(空闲): 应用缓存并未处于更新状态.（1）
 *  CHECKING(检查): 正在检查是否存在更新.（2）
 *  DOWNLOADING(下载): 清单更新后, 重新下载全部资源到临时缓存中.（3）
 *  UPDATEREADY(更新就绪): 新版本的缓存下载完成, 全部就绪, 随即触发事件 updateready.（4）
 *  OBSOLETE(废弃): 应用缓存已被废弃.（5）

（6）、applicationCache（applicationCache是操作应用缓存的瑞士军刀, 也是唯一的一把刀.）

> 首先获取对象  
> `//webview下 var cache = window.applicationCache;`  
> `//shared worker中 var cache = self.applicationCache;`  
> 以下是其属性和方法介绍(大神请绕过):

status: 返回当前页面的应用缓存的状态, 通常开启应用缓存的页面可能返回1, 其他页面则返回0.

update(): 手动触发应用缓存的更新.  
(1) 若有更新, 则依次触发①检查事件(Checking event), ②下载事件(Downloading event), ③下载进度事件(Progress event), ④更新完成事件(UpdateReady event);  
(2) 若无更新, 则依次触发①检查事件(Checking event), ②无更新事件(NoUpdate event);  
(3) 在未开启应用缓存的页面调用将抛出Uncaught DOMException 错误.  
update() 方法通常在长时间不关闭的页面使用, 比如说邮箱应用, 用于定期检测可能的更新.

abort(): 取消应用缓存的更新. 可用于节省有限的网络带宽.

swapCache(): 如果存在一个更新版本的应用缓存, 那么它将切换过去, 否则将抛出 Uncaught DOMException 错误. 通常, 我们会在updateready事件触发之后手动调用swapCache()方法, swapCache的切换只对后续加载的缓存文件有效, 已经加载成功的资源并不会重新加载.

// Check if a new cache is available on page load.
    window.addEventListener('load', function(e) { 
      window.applicationCache.addEventListener('updateready', function(e) { 
        if (window.applicationCache.status == window.applicationCache.UPDATEREADY) { 
          // Browser downloaded a new app cache.
          // Swap it in and reload the page to get the new hotness.
          window.applicationCache.swapCache();
          if (confirm('A new version of this site is available. Load it?')) { 
            window.location.reload();
          }
        } else { 
          // Manifest didn't changed. Nothing new to server.
        }
      }, false);
    }, false);

（7）缓存独立性

*  mainfest和浏览器缓存默认的缓存是两套机制，相互独立，并且不受浏览器缓存大小的限制
 *  各个mainfest缓存文件相互独立，即使是缓存同一个文件, 也可能由于缓存的版本不一致, 而造成各个页面资源不一致.

（8）缓存规则  
      a、遵循全量缓存的规律. 即: manifest文件改动后, 将重新缓存一遍所有的文件(包括html本身和动态添加的需要缓存的文件,即使缓存列表中没有该html). 第一次缓存过程中如果出现缓存失败的文件, 那么, 第二访问, 又将重新缓存一遍所有的文件. 以此类推.  
      b、manifest文件本身不能写进缓存清单, 否则连同html和资源在其缓存失效之前, 将永远不能获得更新.  
      c、即使manifest文件丢失, 缓存依然有效. 不过从此以后, 引入该manifest的html, 将永远不能获得更新

（9）webview的缓存现象  
      a、普通网页(无manifest文件), 不受manifest缓存影响, 缓存只走 http cache.  
      b、包含manifest文件的网页, 缓存文件只受manifest缓存影响(只有manifest文件改变时才会更新缓存资源), 缓存资源完全与 http cache 无关, 但是 NETWORK 段落后需要访问网络的文件, 将继续走 http cache.  
      c、webview直接加载manifest缓存过的文件时, 优先加载第一个manifest缓存的该文件, 如果没有找到manifest缓存, 那么它将自动寻找 http cache 或者 在线加载.

###### 8、h5 SSE ######

后期补上

###### 9、h5的优缺点 ######

1.  优点

> 1、网络标准统一、HTML5本身是由W3C推荐出来的。  
> 2、多设备、跨平台  
> 3、即时更新。  
> 4、提高可用性和改进用户的友好体验；  
> 5、有几个新的标签，这将有助于开发人员定义重要的内容；  
> 6、可以给站点带来更多的多媒体元素(视频和音频)；  
> 7、可以很好的替代Flash和Silverlight；  
> 8、涉及到网站的抓取和索引的时候，对于SEO很友好；  
> 9、被大量应用于移动应用程序和游戏。

2、缺点

> 1)、安全：像之前Firefox4的web socket和透明代理的实现存在严重的安全问题，同时web storage、web socket 这样的功能很容易被黑客利用，来盗取用户的信息和资料。  
> 2)、完善性：许多特性各浏览器的支持程度也不一样。  
> 3)、性能：某些平台上的引擎问题导致HTML5性能低下。  
> 4)、浏览器兼容性：最大缺点，IE9以下浏览器几乎全军覆没。

[Link 1]: https://juejin.im/post/5a1bdf676fb9a045055dd99d#heading-7
[Link 2]: https://juejin.im/post/5a169d08518825592c07c666
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70]: /images/20230531/2bf0d773c5e84fc18e9b4be9c4865420.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 1]: /images/20230531/dce273c3a7554b548cd46de90a0d1fc8.png
[https_github.com_autumn1245_web_blob_master_E5_AE_9E_E6_97_B6_E6_9B_B4_E6_96_B0_E5_B0_8F_E4_BE_8B_E5_AD_90_dragEvent]: https://github.com/autumn1245/web/blob/master/%E5%AE%9E%E6%97%B6%E6%9B%B4%E6%96%B0%E5%B0%8F%E4%BE%8B%E5%AD%90/dragEvent
[Link 3]: https://juejin.im/post/5bf8fa045188252f170e0dcb
[mainfest]: /images/20230531/348a196d1b9d461aaecc0611279a556f.png