HTML&HTML5相关_html5中【】属性用于隐藏页面元素-CSDN博客

本文链接：https://blog.csdn.net/weixin_45846863/article/details/120824846

HTML&HTML5相关

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

语义化就是我们通过标签本身就知道标签所在代码的内容具体有什么意义，，即使用特定的功能或属性的标签做特定的事情。比如说使用h1标签就知道这是一个标题，使用header就知道这是页眉

语义化标签的两个好处：

对机器友好，可以让搜索引擎爬虫更加有效的捕获页面结构，有利于SEO，利于页面结构分析，如识别文章标题等。
对开发者友好，让文档更加清晰，便于整理和优化页面结构

常见的语义化标签有：

<header>页眉</header>
<nav>导航标记</nav>
<section>文档中的区段、小节</section>
<main>标签规定文档的主要内容区域</main>
<article>定义外部的内容，其中的内容独立于文档的其余部分。文章、评论等</article>
<aside>侧边栏</aside>
<footer>页脚</footer>
<cite>参考文献的引用</cite>
<blockquote>标签定义块引用</blockquote>
<code>代码片段</code>

我们最常用的两个无语义标签 div 和 span ，如果你知道某处文档片段的意图，应该使用正确的语义化标签来代替或者包裹这些无语义标签，如果没有具体的语义标签，也可以通过增加类名来给标签分类，以到语义化标签的属性标记效果。

DIV布局是否符合HTML语义化（为什么要用DIV布局）

不符合。div+css有利于搜索引擎爬虫、重构页面修改方便。增加网页打开速度

HTML5本地存储（localStorage, sessionStorage）

html几种存储方式

本地存储(localStorage && sessionStorage)
离线缓存(application cache)
indexedDB和webSQL

localStorage && sessionStorage

过期时间：localStorage永久存储，永不失效除非手动删除

sessionStorage浏览器重新打开后就消失了

大小：每个域名是5M

注意：cookie是大小限制为4K左右，IE6浏览器下每个域名下好像还有个数限制

写入：

let arrDisplay = [0, 1, 1, 1];
// 存储，IE6～7 cookie其他浏览器HTML5本地存储
if (window.localStorage) {
  localStorage.setItem("menuTitle", arrDisplay);
} else {
  Cookie.write("menuTitle", arrDisplay)
}

读取：

let strStoreDate = window.localStorage ? localStorage.getItem("menuTitle") : Cookie.read("menuTitle")

localStorage在浏览器的API有两个：localStorage 和 sessionStorage，存在于 window对象中，localStorage 对应 window.localStorage，sessionStorage对应window.sessionStoragre

localStorage 和 sessonStorage 的区别主要是在于其生存期

存储的内容：数组、图片、json、样式、脚本…(只要是能序列化成字符串的内容都可以)

基本使用方法：
```
localStorage.setItem("b", "isaac"); // 设置b为"isaac"
let b = localStorage.getItem("b"); // 获取b的值，为"isaac"
let a = localStorage.key(0); // 获取第0个数据项的键名，此处为"b"
localStorage.removeItem("b");//清除b的值
localStorage.clear();//清除当前域名下的所有localstorage数据
```
作用域
- 这里的作用域指的是：如何隔离开不同页面之间的localStorage（总不能在百度的页面上能读到腾讯的localStorage吧，哈哈哈）。
- localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。
- sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下
生存期

localStorage理论上说是永久有效的，不主动清空就不会消失，即使保存的数据超出了浏览器所规定的大小，也不会把旧数据清空只会报错。

sessionStorage：只要关闭浏览器（包括浏览器标签），就会被清空
过期时间

localStorage原生不支持过期时间，想要设置需要自己封装

HTML5 WebSocket

为什么需要WebSocket?

http协议有个缺陷：通信只能由客户端发起，这种单向请求造成了服务端向客户端传递消息很麻烦，需要不停的连接，轮询效率低，浪费资源。
WebSocket的最大特点：服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息。

其他特点：
- 建立在TCP协议之上，服务器端端实现比较容易
- 与HTTP协议有着良好的兼容性。默认端口也是80和443，并且握手阶段时不容易屏蔽，能通过各种HTTP代理服务器
- 数据格式比较轻量，性能开销小，通信高效
- 可以发送文本，也可以发送二进制数据
- 没有同源限制，客户端可以与任意服务器通信
- 协议标识符是ws(如果加密为wss),服务器网址就是URL
```
ws://example.com:80/some/path
```

WebSocket的用法示例

let ws = new WebSocket("wss://echo.webSocket.org");
ws.onopen = function (evt) {
  console.log("Connection open ...");
  ws.send("Hello WebSocket!");
};

ws.onmessage = function (evt) {
  console.log("Received Message:" + evt.data);
  ws.close();
};

ws.onclose = function (evt) {s
  console.log("Connection closed.")
}

客户端的API

WebSocket 构造函数

用于新建websocket实例，客户端就会与服务器进行连接
```
var ws = new WebSocket('ws://localhost:8080');
```
webSocket.readyState

返回实例对象的当前状态，共有四种
- CONNECTING：值为0，表示正在连接。
- OPEN：值为1，表示连接成功，可以通信了
- CLOSING：值为2，表示连接正在关闭
- CLOSED：值为3，表示连接已经关闭，或者打开连接失败

webSocket.onopen: 用于指定连接成功后的回调函数。

ws.open = function () {
	ws.send('hello Server!')
}
// 如果要指定多个回调函数，可以使用addEventListener方法。
ws.addEventListener('open', function (event) {
  ws.send('Hello Server!');
});

webSocket.onclose:用于指定连接关闭后的回调函数

ws.onclose = functuion(event) {	var code = event.code;  var reason = event.reason;  var wasClean = event.wasClean;};ws.addEventListener("close", function(event) {  var code = event.code;  var reason = event.reason;  var wasClean = event.wasClean;});

webSocket.onmessage:用于指定收到服务器数据后的回调函数

ws.onmessage = function(event) {  var data = event.data;  // 处理数据};ws.addEventListener("message", function(event) {  var data = event.data;  // 处理数据});// 服务器数据可能是文本，也可能是二进制数据（blob对象或Arraybuffer对象）ws.onmessage = function(event){  if(typeof event.data === String) {    console.log("Received data string");  }  if(event.data instanceof ArrayBuffer){    var buffer = event.data;    console.log("Received arraybuffer");  }}

webSocket.send(): 用于向服务器发送数据
webSocket.bufferedAmount:表示还有多少字节的二进制数据没有发送出去。它可以用来判断发送是否结束

var data = new ArrayBuffer(10000000);socket.send(data);if (socket.bufferedAmount === 0) {  // 发送完毕} else {  // 发送还没结束}

webSocket.onerror:用于指定报错时候的回调函数

常用的 Node 实现有以下三种。

HTML5新增属性

contextmenu: 指定右键菜单
contentEditable:规定是否可编辑的内容，属性值：true：可以编辑，false：不可以编辑元素内容，inherit：继承父元素的contentEditable属性，当为空字符时相当于true
hidden：用于隐藏该元素，一旦使用了此属性，则该元素就不会在浏览器中被显示，2个布尔值，true：规定元素可见，false：规定元素不可见
draggable：规定元素是否可以拖拽，3个枚举值，true：元素可拖动，false：元素不可拖动，auto：使用浏览器的默认特性
data-*：能让用户自定义属性的方式来存储数据
placeholder：占位属性
required必填属性：约束表单元在提交前必须输入值
pattern正则属性：约束用户输入的值必须与正则表达式匹配
autofocus自动聚焦属性
autocomplete自动完成属性：当表单元素设置了自动完成功能后，会记录用户输入过的内容，双击表单元素会显示历史输入
novalidate不验证属性：规定在提交表单时不应该验证form 和 input域
multiple多选属性

HTML5 拖放（dragEvent）

拖放的流程对应的事件

选中 ——> 拖动 ——> 释放

选中：

draggable属性：设置元素是否可拖动。
语法：<element draggable="true | false | auto"

true: 可以拖动
false: 禁止拖动
auto: 跟随浏览器定义是否可以拖动

拖动：

每一个可拖动的元素，在拖动过程中，都会经历三个过程，拖动开始–>拖动过程中–> 拖动结束

针对对象	事件名称	说明
被拖动的元素	dragstart	在元素开始被拖动时候触发
	drag	在元素被拖动时反复触发
	dragend	在拖动操作完成时触发

目的地对象	dragenter	当被拖动元素进入目的地元素所占据的屏幕空间时触发
	dragover	当被拖动元素在目的地元素内时触发
	dragleave	当被拖动元素没有放下就离开目的地元素时触发

dragenter和dragover事件的默认行为是拒绝接受任何被拖放的元素。因此，我们必须阻止浏览器这种默认行为。e.preventDefault();

释放：

目的地对象—drop—当被拖动元素在目的地元素里放下时触发，一般需要取消浏览器的默认行为。

drag-drop事件触发：内部也会触发

DataTransfer对象

HTML5 Web Workers(worker, shared worker, service worker)

Web worker就是一个后台执行js文件的方法，能够给前端传递信息，前端也可以传递信息给web workers
- web workers 是一个全新的上下文，与创建他的线程无关
- 不可以执行dom操作
- 没有window这个对象
- 通过posyMessage传递消息
对于使用worker的线程而言，首先注册一个workersnew Worker('path')，然后发送数据，如果需要接受worker返回的数据，注册一个监听事件onmessage

对于work.js而言，首先写好一个监听数据请求的事件，设置了监听事件，第一个参数会包含发送过来的数据，worker也可以使用postMessage主动发信息给主线程

杀死workers：terminate()、myWorker.terminate()，或者直接执行函数close()
共享的shared worker

共享workers，页面之间需要符合同源策略，和worker的区别在于多一个端口调用，必须设置一个onMessage或者port.start()，当我们需要addEventListener()时候使用start，父页面直接执行myWorker.port.start(),worker执行port.start()完成打开端口即可
service worker

是一个注册在指定源和路径下的事件驱动worker，它采用JavaScript控制关联的页面或者网站，拦截并修改访问和资源请求，细粒度的缓存资源。service worker同样是workers的另一个类型
- 同步API（如XHR和localStorage）不能在service worker中使用。
- 出于安全考量，Service workers只能由HTTPS承载
其实service worker更新一个中间代理服务器。它特别的地方是离线状态也可以访问，如果存在你需要的资源就可以返回给你，这样达到离线访问web app的目的。这种API自然对资源管理要求更加严格，如果滥用很可能会导致缓存过大，打开一个网页会让计算机占的内存变大等问题·

HTML5 应用缓存(mainfest)

意味着web应用可进行缓存，并可在没网时进行访问

离线浏览—用户可在应用离线时使用他们
速度—已缓存资源加载得更快
减少服务器负载—浏览器将只从服务器下载更新或更改过的资源

浏览器支持

用法：如需启动应用程序缓存，在标签中包含manifest属性
```
<!DOCTYPE HTML><html manifest="demo.appcache">...</html>
```
每个指定了manifest的页面在用户对其访问时都会被缓存，如果未指定则页面不会被缓存(除非在manifest文件中直接指定了该页面)，manifest文件的建议文件扩展名为.appcache,manifest 文件需要配置正确的 MIME-type，即 “text/cache-manifest”。必须在 web 服务器上进行配置。
Manifest文件

文本文件，告知浏览器被缓存的内容以及不缓存的内容

分为3部分：
- CACHEMANIFEST：在此标题下列出的文件将在首次下载后进行缓存
- NETWORK：在此标题下列出的文件需要与服务器连接，且不会被缓存
- FALLBACK：在此标题下列出的文件规定当页无法访问时的回退页面
具体用法
- 在网站html中添加其中myweb.appcache是任意命名的后缀.appcache文件
- 新建记事本输入内容后命名为myweb.appcache并上传到网站manifest对应目录中
- 脱机浏览，重新加载页面，页面中的脚本和图像看看是否依然可用

HTML5 SSE

服务端推送事件，可以用来从服务端实时推送数据到浏览器端。相对于与之类似的COMET和WebSocket技术来说，服务器推送事件的使用更加简单，对服务器端的改动也比较小。

与WebSocket的区别：

SSE适用于更新频繁，低延迟并且数据都是从服务端到客户端。
- 便利，不需要添加任何新组件，用任何习惯的后端语言和框架就能继续使用，不用为新建虚拟机弄一个新的IP或端口。
- 服务端到简洁，SSE能在现有的HTTP/HTTPS协议上运作，能够直接运行与现有的代理服务器和认证技术
WebSocket相较于SSE最大的优势在于它是双向交流，意味着服务器发送数据就像从服务器接受数据一样简单，而SSE一般通过一个独立的Ajax请求从客户端向服务端传送数据，所以相对于WebSocket使用Ajax会增加开销，如果需要以每秒一次或者更快的频率向服务端传输数据，应该使用WebSocket
SSE在HTML5中的技术规范和定义

Server-sent Events 规范是 HTML 5 规范的一个组成部分，主要由两部分组成，第一个部分是服务器端与浏览器端之间的通讯协议，第二部分在浏览器端可供JavaScript使用的EventS ource对象，