HTML5

合集 - HTML&CSS(3)

1.Flex 弹性盒2024-10-25

2.HTML52024-10-23

3.CSS多行文本溢出显示省略号2023-11-24

收起

一、什么是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）内容，无需依赖外部插件，提高了多媒体内容的访问速度和兼容性。

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

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

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

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

3. 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

用于在网页上绘制图形。

01-转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);    
});

02-绘制形状

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

03-绘制文本

- CanvasRenderingContext2D.fillText()，文字填充，可以填充纯色，渐变或者图案。

- CanvasRenderingContext2D.strokeText()，文字描边。

- CanvasRenderingContext2D.measureText()，文字测量。返回TextMetrics对象，该对象的`width`属性值就是字符占据的宽度

04-线条样式

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

05-文本样式

- 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`。

06-填充和描边

- CanvasRenderingContext2D.fillStyle，填充样式。默认值是`#000000`纯黑色。

- CanvasRenderingContext2D.fill()， 填充。

- CanvasRenderingContext2D.strokeStyle， 描边样式。默认值是`#000000`纯黑色。

- CanvasRenderingContext2D.stroke()， 描边。

06-绘制路径

- 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）

1) Storage

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

方法

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

2) 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.WebSocket

• WebSocket 是 HTML5 提供的一种在单个 TCP 连接上进行全双工通讯的协议。
• 实现客户端与服务器之间的双向通信，允许服务端主动向客户端推送数据。
• 浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

1)WebSocket 事件

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

2)WebSocket 方法

1. Socket.onopen ：建立连接时触发
2. Socket.onmessage：客户端接收服务端数据时触发
3. Socket.onerror：通信发生错误时触发
4. 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 应用能够更灵活地在没有网络的环境下使用。