HTML5

标签：00 WebSocket 键名 CanvasRenderingContext2D cookie HTML5 绘制

一、什么是HTML语义化

根据内容的结构和含义,选择合适的 HTML 标签(标签语义化)

1.优点

1）对机器友好

SEO友好：利于搜索引擎优化
提高可访问性
有助于搜索引擎爬虫更好抓取网页内容

2）对于开发者友好

提升代码可阅读性：更清晰地理解网页结构
利于团队维护：快速定位代码

常见语义化标签

<header>：定义文档或部分的头部，通常包含导航、logo 等。
<nav>：定义导航链接部分，包含一组导航链接。
<section>：定义文档中的一个区块，用于分隔内容。
<main>：定义文档的主要内容，文档中主体部分的容器。
<article>：定义独立的内容单元，例如文章、博客帖子、新闻等。
<aside>：定义与主内容相关的辅助内容，通常为侧边栏。
<footer>：定义文档的底部。

二、HTML5 有哪些更新

1.语义化更强的 HTML 元素：

引入如 article、section、nav、header 和 footer 等元素，帮助创建结构更清晰、语义明确的网页，有利于 SEO 和内容的可访问性。

语义化标签

header、nav、section、main、article、aside、footer

2.表单控件增强：

新增多种表单输入类型（如 email、date），直接支持数据验证，极大地提高了表单的易用性和功能性。

-   type="email"、type="url"：自动验证用户输入格式。
-   type="number"、type="range"：输入数字或范围。
-   type="search"：优化的搜索框。
-   type="color"：颜色选择器。
-   placeholder：输入框为空时显示的提示文字。
-   required、pattern：简化了数据验证过程。
-   time：时分秒
-   data：日期选择年月日
-   datatime：时间和日期(目前只有Safari支持)
-   datatime-local：日期时间控件
-   week：周控件
-   month：月控件

3.音视频支持：

原生支持音频（audio）和视频（video）内容，无需依赖外部插件，提高了多媒体内容的访问速度和兼容性。

Audio 标签：用于嵌入音频内容。

<audio src="audio.mp3" controls autoplay loop></audio>

Video 标签：用于嵌入视频内容。

<video src="video.mp4" poster="poster.jpg" controls></video>

Source 标签：在音视频标签内使用，为不同的浏览器提供多种格式的媒体文件。

<video controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
</video>

4.新的 API 支持：

引入了多个强大的 API，如 Canvas、Geolocation、Drag and Drop，增强了网页的功能性，使其能支持更复杂的用户交互。

1）拖放API：允许用户拖放文件直接到网页中。

<img draggable="true" />

2）Web Storage：提供 localStorage 和 sessionStorage，用于在客户端存储数据。

3）Canvas API：用于在网页上绘制图形。

转Blob

canvas.toBlob(function (blob) {
    var data = new FormData();
    // 装载图片数据
    data.append('image', blob);
    // 图片ajax上传，字段名是image
    var xhr = new XMLHttpRequest();
    // 文件上传成功
    xhr.onload = function() {
        // xhr.responseText就是返回的数据
    };
    // 开始上传
    xhr.open('POST', 'upload.php', true);
    xhr.send(data);    
});

绘制形状

CanvasRenderingContext2D.clearRect(),清除指定矩形区域内部所有的像素信息为初始色（通常为透明）。
CanvasRenderingContext2D.fillRect(),矩形填充，可以填充颜色，渐变，图案等。
CanvasRenderingContext2D.strokeRect(), 矩形描边。

绘制文本

CanvasRenderingContext2D.fillText()，文字填充，可以填充纯色，渐变或者图案。
CanvasRenderingContext2D.strokeText()，文字描边。
CanvasRenderingContext2D.measureText()，文字测量。返回TextMetrics对象，该对象的width属性值就是字符占据的宽度

线条样式

CanvasRenderingContext2D.lineWidth，线条宽度，主使用场景是描边，默认宽度是1.0，支持小数。
CanvasRenderingContext2D.lineCap，线条端点的样式。支持如下属性值：butt（默认值，断头，无端帽），round（圆形端帽），square（方形端帽）。
CanvasRenderingContext2D.lineJoin，线条转角的样式。支持如下属性值：miter（默认值，尖角），round（圆角），bevel（平角）。
CanvasRenderingContext2D.miterLimit，尖角限制比率。线条的尖角如果没有限制，在线条粗角度小的情况下会很长很长，因此，需要一个限制比率。默认是10。
CanvasRenderingContext2D.getLineDash()，返回当前虚线数值。返回值是一个偶数个数的数组
CanvasRenderingContext2D.setLineDash()，设置线条为虚线。
CanvasRenderingContext2D.lineDashOffset，设置虚线的起始偏移。

文本样式

CanvasRenderingContext2D.font，设置字体相关样式，包括字号，字体信息。默认值是10px sans-serif。
CanvasRenderingContext2D.textAlign，设置文本水平对齐方式。支持属性值有：start（默认值），end，left，right以及center。
CanvasRenderingContext2D.textBaseline，设置文本基线对齐方式。支持属性值有：top，hanging，middle，alphabetic（默认值），ideographic，bottom。
CanvasRenderingContext2D.direction，设置文本显示方向。支持属性值有：inherit（默认值），ltr和rtl。

填充和描边

CanvasRenderingContext2D.fillStyle，填充样式。默认值是#000000纯黑色。
CanvasRenderingContext2D.fill()，填充。
CanvasRenderingContext2D.strokeStyle，描边样式。默认值是#000000纯黑色。
CanvasRenderingContext2D.stroke()，描边。

绘制路径

CanvasRenderingContext2D.beginPath()，开始一个新路径。
CanvasRenderingContext2D.closePath()，闭合一个路径。
CanvasRenderingContext2D.moveTo()，路径绘制起始点。
CanvasRenderingContext2D.lineTo()，绘制直线到指定坐标点。
CanvasRenderingContext2D.bezierCurveTo()，绘制贝赛尔曲线到指定坐标点。
CanvasRenderingContext2D.quadraticCurveTo()，绘制二次贝赛尔曲线到指定坐标点。
CanvasRenderingContext2D.arc()，绘制圆弧（包括圆）。
CanvasRenderingContext2D.arcTo()，绘制圆弧，和之前的点以直线相连。
CanvasRenderingContext2D.rect()，绘制矩形路径。
CanvasRenderingContext2D.ellipse()，绘制椭圆路径。
CanvasRenderingContext2D.clip()，创建剪裁路径，之后绘制的路径只有在里面的才会显示。

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
// 渲染上下文
var canvas = document.getElementById('myCanvas');
//获得 2d 上下文对象
var ctx = canvas.getContext('2d');

</script>

4）Geolocation API：允许网站访问用户的地理位置。

Geolocation.getCurrentPosition()：检索设备的当前位置。

5.Web 存储：

提供了更先进的数据存储方案（localStorage 和 sessionStorage）

localStorage 和 sessionStorage

localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

方法

Storage.key(2) : 接受一个数值 n 作为参数，并返回存储中的第 n 个键名。
Storage.getItem(key) : 接受一个键名作为参数，返回键名对应的值。
Storage.setItem(key,newValue) : 接受一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值。
Storage.removeItem(key) :接受一个键名作为参数，并把该键名从存储中删除。
Storage.clear() ：清空存储中的所有键名。

cookies

创建（设置）新的 Cookie 信息，需要以name=value形式的字符串来定义新的 Cookie 信息

// 1.创建 cookie
document.cookie="username=John Doe"; 

// 2.为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

// 3.使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

// 4.使用 JavaScript 读取 Cookie
var x = document.cookie; // 将以字符串的方式返回所有的 cookie

// 5.使用 JavaScript 修改 Cookie
document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

// 6.JavaScript 删除 Cookie,只需要设置 expires 参数为以前的时间即可
// 注意：删除时不必指定 cookie 的值。
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

6.WebSockets

WebSocket 是 HTML5 提供的一种在单个 TCP 连接上进行全双工通讯的协议。

实现客户端与服务器之间的双向通信，允许服务端主动向客户端推送数据。

浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

1)WebSocket 事件

Socket.send() : 使用连接发送数据
Socket.close() : 关闭连接

2)WebSocket 方法

Socket.onopen ：建立连接时触发
Socket.onmessage：客户端接收服务端数据时触发
Socket.onerror：通信发生错误时触发
Socket.onclose：连接关闭时触发

使用示例

      <div id="sse">
         <a href="javascript:WebSocketTest()">运行 WebSocket</a>
      </div>
      
      <script>
         function WebSocketTest()
         {
            if ("WebSocket" in window)
            {
               console.log("支持 WebSocket!");
               
               // 打开一个 WebSocket
               var ws = new WebSocket("ws://localhost:8888/index");
                
               ws.onopen = function()
               {
                  // Web Socket 已连接，使用 send() 方法发送数据
                  ws.send("发送数据");
                  console.log("数据发送中...");
               };
                
               ws.onmessage = function (evt) 
               { 
                  var received_msg = evt.data;
                  console.log("数据已接收...");
               };
                
               ws.onclose = function()
               { 
                  // 关闭 websocket
                  console.log("连接已关闭..."); 
               };
            }
            
            else
            {
               // 浏览器不支持 WebSocket
                console.log("你的浏览器不支持 WebSocket");
            }
         }
      </script>

7.更好的连接性和离线支持(拓展)：

通过应用程序缓存（Application Cache）支持离线应用，使得 Web 应用能够更灵活地在没有网络的环境下使用。

标签：00,WebSocket,键名,CanvasRenderingContext2D,cookie,HTML5,绘制
From： https://www.cnblogs.com/xianling-blog/p/18498096

一、什么是HTML语义化

1.优点

1）对机器友好

2）对于开发者友好

常见语义化标签

二、HTML5 有哪些更新

1.语义化更强的 HTML 元素：

语义化标签

2.表单控件增强：

3.音视频支持：

4.新的 API 支持：

1）拖放API：允许用户拖放文件直接到网页中。

2）Web Storage：提供 localStorage 和 sessionStorage，用于在客户端存储数据。

3）Canvas API：用于在网页上绘制图形。

转Blob

绘制形状

绘制文本

线条样式

文本样式

填充和描边

绘制路径

4）Geolocation API：允许网站访问用户的地理位置。

5.Web 存储：

localStorage 和 sessionStorage

方法

cookies

6.WebSockets

1)WebSocket 事件

2)WebSocket 方法

使用示例

7.更好的连接性和离线支持(拓展)：

相关文章

赞助商

阅读排行