HTML5特性

百事可爱-后悔下凡

已于 2023-02-04 23:29:33 修改

阅读量227

点赞数

文章标签： html5

于 2023-02-04 23:18:06 首次发布

本文链接：https://blog.csdn.net/weixin_42617917/article/details/128874767

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTML5新增了很多新的元素及功能：图形绘制，多媒体，页面结构标签，拖放，定位，缓存，history，网络通讯等

语义化标签：

标签	描述
`<hader></header>`	文档的头部区域
`<footer></footer>`	文档的尾部区域
`<nav></nav>`	文档的导航
`<section></section>`	文档中的节
`<article></article>`	页面独立的内容区域
`<aside></aside>`	页面的侧边栏内容
`<detailes></detailes>`	文档或文档某个部分的细节
`<summary></summary>`	标签包含 details 元素的标题
`<dialog></dialog>`	对话框，比如提示框

增强型表单
HTML5提供了input输入类型，更好的输入控制和验证

类型	描述
color	用于选取颜色
date	日期选择器
datetime-local	类型允许你选择一个日期和时间 (无时区).
email	类型用于应该包含 e-mail 地址的输入域
month	选择月份
number	搭配max， min ，maxlength使用校验数值的输入域
range	max, min, value指定范围的滑动条
time	类型允许你选择一个时间。
url	URL 地址的输入域

新增的表单属性

类型	描述
autocomplete	自动填充
autofocus	页面加载自动聚焦
form	规定输入域所属的一个或多个表单
form action	描述表单提交的URL地址
formenctype	描述了表单提交到服务器的数据编码 (只针对method为post的表单)
formmethod	定义了表单提交的方式
formnovalidate	表单提交时无需被验证
formtarget
height 与 width	规定用于 image 类型的标签的图像高度和宽度
list	list 属性规定输入域的 datalist
min 与 max	数字或日期的 input 类型规定限定
multiple	email 和 file 类型元素中可选择多个值
pattern (regexp)	正则表达式用于验证
placeholder	输入提示
required	必填校验
step	数值增减幅度

视频和音频

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签（浏览器不支持时显示文本）
</video>

control 属性供添加播放、暂停和音量控件
也可以通过video DOM对象的 pause play 控制播放和暂停

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

图形标签 canvas
canvas是一个图形容器
指定一个id属性 (用于脚本中引用)
width 和 height 属性定义的画布的大小
通过 JavaScript 来绘制 2D 图形

// 1. 首先，找到 <canvas> 元素:
  var c=document.getElementById("myCanvas"); 
// 2. 创建 context 对象
  var ctx=c.getContext("2d");

// 3. fillStyle属性可以是CSS颜色，渐变，或图案
  ctx.fillStyle="#FF0000";

// 4. fillRect(x,y,width,height) 方法定义了矩形当前的填充方式
  ctx.fillRect(0,0,150,75);

// 5. 绘制路径
ctx.moveTo(0,0); // 开始坐标
ctx.lineTo(200,100); // 结束坐标
ctx.stroke(); // 绘制

// 6. arc(x,y,r,start,stop) 绘制圆形
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke(); // 绘制边
ctx.stroke(); // 填充颜色
// 7. 文本定义
ctx.font="30px Arial"; // 定义文本字体
ctx.fillText("Hello World",10,50); // 定义文本内容
ctx.strokeText("Hello World",10,50); // 内容描边

// 8.创建渐变
// createLinearGradient(x,y,x1,y1) - 创建线条渐变
// createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// 绘制容器， 填充为渐变对象
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

// 9. drawImage(image,x,y) 绘制图片
var img = new Image(); //创建图片对象
img.src = 'img/timg.jpg';
img.onload = function() {
  ctx.drawImage(this,20,80);
}

常用属性方法：https://www.runoob.com/tags/ref-canvas.html

SVG 定义可缩放矢量图形，使用 XML 描述 2D 图形的语言
拖放API
draggable: ture, 可拖动属性
ondragstart: 拖动对象绑定拖动事件，ev.dataTransfer.setData(“Text”,ev.target.id) 方法设置被拖数据的数据类型和值
ondragover: 事件规定在何处放置被拖动的数据,这要通过调用 ondragover 事件的 event.preventDefault() 方法
ondrop: 放置事件，ev.dataTransfer.getData(“Text”) 方法获得被拖的数据, ev.target.appendChild(document.getElementById(data))
Geolocation（地理定位）

function getLocation()
{
    if (navigator.geolocation)
    {
    // 返回用户位置的经度和纬度
        navigator.geolocation.getCurrentPosition(showPosition, showError);
        // 第一个参数showPosition中规定的函数返回一个包含经纬度的对象
        // 第二个参数用于处理错误
    }
    else
    {
        x.innerHTML="该浏览器不支持获取地理位置。";
    }
}
 
function showPosition(position)
{
    x.innerHTML="纬度: " + position.coords.latitude + 
    "<br>经度: " + position.coords.longitude;    
}
function showError(error)
{
	switch(error.code) 
	{
		case error.PERMISSION_DENIED:
			x.innerHTML="用户拒绝对获取地理位置的请求。"
			break;
		case error.POSITION_UNAVAILABLE:
			x.innerHTML="位置信息是不可用的。"
			break;
		case error.TIMEOUT:
			x.innerHTML="请求用户地理位置超时。"
			break;
		case error.UNKNOWN_ERROR:
			x.innerHTML="未知错误。"
			break;
	}
}

Web 存储localStorage（长久保存）和 sessionStorage （临时保存）
可以存储大量的数据，而不影响网站的性能，可使用的API都相同，常用的有如下几个
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
网络通讯：
持久连接：websoket,
向服务器推送事件： server sent events
即时通讯： webRTC,
异步请求；XMLHTTPRequest
Web Workers是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能
检测浏览器是否支持 Web Worker: if(typeof(Worker)!=="undefined")
创建web worker 对象：w=new Worker("demo_workers.js");, 脚本存储于 “demo_workers.js” 文件中
终止: w.terminate();
回收对象： w = undefined;
由于 web worker 位于外部文件中，它们无法访问下列 JavaScript 对象：
. window 对象
. document 对象
. parent 对象