一、什么是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上传，字段名是imagevar 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!");// 打开一个 WebSocketvar 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(){ // 关闭 websocketconsole.log("连接已关闭..."); };}else{// 浏览器不支持 WebSocketconsole.log("你的浏览器不支持 WebSocket");}}</script>7.更好的连接性和离线支持(拓展)：
通过应用程序缓存（Application Cache）支持离线应用，使得 Web 应用能够更灵活地在没有网络的环境下使用。
