HTML5新特性

关注

原创 2025-06-03 15:20:06 840 阅读 AI 写同款· GEO 优化 ›

关于Html5新特性及Html语义化文章目录一、如何区分Html5和Html1.文档类型声明2.结构语义二、Html5新特性1.拖拽释放(Drag and drop)API2.音频、视频API(audio、video)3.画布(Canvas)API4.地理位置(Geolocation)5.语义化更好的内容标签6.本地离线存储loaclStorage长期存储数据,浏览器关闭后数据不丢失7.sessionStorage数据在浏览器关闭后自动删除8.表单控件9.新的技术三、HTML语义化1.语义化优点2.Html5新增语义元素3.如何语义化一、如阅读详情

语义标签

语义化标签使得页面的内容结构化，使开发者更方便清晰地构建页面的布局

标签	描述
nav	定义文档的导航
section	定义文档中的书
acticle	定义页面独立的内容区域
aside	定义页面侧边栏内容
details	定义用户可以看到或隐藏的额外细节
summary	标签包含details元素的标题

增强型表单

HTML5 新增 input 输入特性，更好地输入控制和验证

输入类型	描述
date	选取日期
datetime	选取日期（UTC时间）
datetime-local	选取日期（无时区）
tel	定义输入电话号码的字段
search	用于搜索域
range	一个范围内数字值的输入域

HTML5 新增五个表单元素

标签	描述
details	用户会在他们输入数据时看到域定义选项的下拉列表
progress	进度条，展示连接/下载进度
meter	刻度值，用于某些计量，例如温度、重量等
keygen	提供一种验证用户的可靠方法，生成一个公钥和私钥
output	用于不同类型的输出，比如计算或脚本输出

HTML5 新增表单属性

属性	描述
placehoder	输入框默认提示文字
required	要求输入的内容是否可为空
pattern	描述一个正则表达式验证输入的值
step	为输入域规定合法的数字间隔
autofocus	规定在页面加载时，域自动获得焦点
multiple	规定元素中可选择多个值

视频和音频

1）音频文件标准

control：供添加播放、暂停和音量控件

在<audio>与</audio>之间你需要插入浏览器不支持的<audio>元素的提示文本

<audio>元素允许使用多个<source>元素，<source>元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件

目前，元素支持三种音频格式文件: MP3、Wav 和 Ogg

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

2）视频文件标准

control提供了播放、暂停和音量控件来控制视频，也可以使用 dom 操作来控制视频的播放暂停，如 K 方法

video元素也提供了width和height属性来控制视频的尺寸，如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道视频的大小，浏览器就不能在加载时保留特定的空间，页面就会根据原始视频的大小而改变。

video元素支持多个source元素，元素可以链接不同的视频文件，浏览器将使用第一个可识别的格式（ MP4、WebM 和 Ogg）

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

Canvas绘图

<canvas>是可以使用脚本在其中绘制图像的HTML元素，它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染

canvas绘图

SVG绘图

SVG 的定义：

可伸缩矢量图形
用于定义用于网络的基于矢量的图形
使用 XML 格式定义图形
在放大或改变尺寸的情况下其图形质量不会有损失

SVG 的优势：

可通过文本编译器来创建和修改
可被搜索、索引、脚本化或压缩
可伸缩的

SVG 与 Canvas 的区别：

SVG 适用于描述 XML 中的 2D 图形的语言，Canvas 随时随地绘制 2D 图形（使用javaScript）
SVG 是基于 XML 的，意味这可以操作 DOM，渲染速度较慢
在 SVG 中每个形状都被当做是一个对象，如果 SVG 发生改变，页面就会发生重绘。Canvas 是一像素一像素地渲染，如果改变某一个位置，整个画布会重绘

Canvas	SVG
依赖分辨率	不依赖分辨率
不支持事件处理器	支持事件处理器
能够以.png或.jpg格式保存结果图像	复杂度会减慢搞渲染速度
文字呈现功能比较简单	适合大型渲染区域的应用程序
最合适图像密集的游戏	不适合游戏应用

地理定位 Geolocation

Geolocation 用于定位用户的位置

window.navigator.geolocation {
    getCurrentPosition:  fn   用于获取当前的位置数据
    watchPosition: fn  监视用户位置的改变
    clearWatch: fn   清除定位监视
}

获取用户定位信息

navigator.geolocation.getCurrentPosition(
    function(pos){
　　　　console.log('用户定位数据获取成功')
　　　　//console.log(arguments);
　　　　console.log('定位时间：',pos.timestamp)
　　　　console.log('经度：',pos.coords.longitude)
　　　　console.log('纬度：',pos.coords.latitude)
　　　　console.log('海拔：',pos.coords.altitude)
　　　　console.log('速度：',pos.coords.speed)

    },    //定位成功的回调
    function(err){ 
　　　　console.log('用户定位数据获取失败')
　　　　//console.log(arguments);
    }        //定位失败的回调
）

拖放API

拖放是一种常见的特性，即捉取对象后拖到另一个位置

<div draggable="true"></div>

当元素拖动时，我们可以检查其拖动的数据

<div draggable="true" ondragstart="drag(event)"></div>
<script>
function drag(ev){
    console.log(ev)
}
</script>

WebWorker

WebWorker 可以通过加载一个脚本文件，进而创建一个独立工作的线程，在主线程之外运行

WebWorker 的基本原理：在当前 javascript 的主线程中，使用 Worker 类加载一个 javascript 文件来开辟一个新的线程，起到互不阻塞执行的效果，并且提供主线程和新线程之间数据交换的接口：postMessage、onmessage

JS：

//worker.js
onmessage =function (evt){
  var d = evt.data;//通过evt.data获得发送来的数据
  postMessage( d );//将获取到的数据发送会主线程
}

HTML：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
//WEB页主线程
var worker =new Worker("worker.js"); //创建一个Worker对象并向它传递将在新线程中执行的脚本的URL
worker.postMessage("hello world");     //向worker发送数据
worker.onmessage =function(evt){     //接收worker传过来的数据函数
   console.log(evt.data);              //输出worker发送来的数据
}
</script>
</head>
<body></body>
</html>

WebStorage

早些时候，本地存储使用的是 cookies。使用 HTML5 可以在本地存储用户的浏览数据，这些数据不会被保存在服务器上，只用于用户请求网站数据上。WebSorage 拥有 5M 的存储容量，而 cookie 却只有 4K，它可以存储大量的数据，而不影响网站的性能。数据以键/值对存在, web 网页的数据只允许该网页访问使用

客户端存储数据的两个对象为：