HTML5新特性总结

HTML5的新特性包括语义化标签、增强型表单、Video和Audio、Canvas绘图、SVG绘图、地理定位、拖放API、Web Worker、Web Storage、WebSocket。

HTML5声明<!DOCTYPE html>必须放在第一行。

一、语义化标签

<header> 定义文档的头部
<footer> 定义文档的页脚
<nav> 定义文档的导航
<section> 定义文档中的节
<artical> 定义页面独立的内容区域
<aside> 定义页面的侧边栏内容
<dialog> 定义对话框
<detailes> 用于描述文档或文档某个部分的细节
<summary> 标签包含detailes元素的标题
<command> 定义命令按钮，如单选按钮、复选框
<bdi> 允许设置一段文本脱离其父元素的文本方向设置
<figure> 规定独立的流内容（图片、图表等）
<figcaption> 定义figure元素的标题
<mark> 定义带有记号的文本
<progress> 定义任何类型的任务的进度
<time> 定义日期和时间
<meter> 定义度量衡，仅用于已知最大和最小值的度量
<ruby> 定义ruby注释（中文注音或字符）
<rt> 定义字符（中文注音或字符）的解释或发音
<rp> 在ruby注释中使用，定义不支持ruby元素的浏览器所显示的内容
<wbr> 规定在文本的何处适合添加换行符

二、增强型表单

1、input新类型

<input type="email" /> 在提交表单时会自动验证email域的值是否合法

属性：disabled 规定输入域字段是禁用的，pattern 规定用于验证输入字段的模式

max 规定允许的最大值，maxlength 规定输入字段的最大字符长度

min 规定允许的最小值，readonly 规定输入字段的值无法修改

requried 规定输入字段中的值是必需的，value 规定输入字段的默认值

size 规定输入字段的可见字符数，step 规定输入字段的合法数字间隔

<input type="range" /> 属性：max，min，step，value

<input type="search" /> 搜索字段

<input type="tel" /> 电话号码字段

<input type="url" /> 在提交表单时会自动验证url域的值

2、表单元素

<datalist> 元素规定输入域的选项列表，使用<input>的列表元素与<datalist>元素绑定。

其属性规定form或input域应该拥有自动完成功能，当用户开始输入时，浏览器在该域中显示填写的项。

<keygen> 元素提供一种验证用户的可靠方法，标签规定用于表单的密钥对生成器字段，当提交表单时，会生成两个键，一个私钥存储于客户端，一个公钥被发送到服务器，可用于之后验证用户的客户端证书。

<output>元素用于不同类型的输出

3、表单属性

form属性

autocomplete 规定form或input域自动完成

novalidate boolean属性，在提交表单时不应该验证form和input域

input属性

autofocus boolean属性，规定在页面加载时，域自动获取焦点

form 规定输入域所属的一个或多个表单，如需引用一个以上的表单，空格分隔列表

formaction 用于描述表单提交的url地址，会覆盖form中的action属性，用于type="submit" type="image"

formenctype 描述表单提交到服务器的数据编码（只对form表单中method="post"表单），会覆盖form的enctype属性，与type="submit" type="image" 配合使用

formmethod 定义表单提交的方式，会覆盖form的method属性，与type="submit" type="image"配合使用

formnovalidate boolean属性，描述input元素在表单提交时无需被验证，会覆盖form的novalidate属性，与type="submit" 使用

formtarget 指定一个名称或一个关键字来指明表单提交数据接受后的展示，会覆盖form的target属性，与type="submit" type="image"使用

height/width 用于type="image"

list 规定输入域的datalist，datalist是输入域的选项列表

min/max 用于包含数字和日期类型的input

multiple boolean属性，规定input课选择多个值，使用email和file类型

pattern 描述一个正则表达式用于验证input元素的值，适用text、search、url、tel、email和password类型

placeholder 提供一种提示（hint），在用户输入前会显示在输入域，适用text、search、url、tel、email和password类型

requried boolean属性，规定必须在提交之前填写输入域，适用text、search、url、tel、email、password、date pickers、number、checkbox、radio和file类型

step 输入域规定合法的数字间隔

三、Video和Audio

1、video

video支持三种视频格式MP4、WebM、Ogg

属性：autoplay 视频在就绪后马上播放，controls 向用户显示控件如播放按钮

height 视频播放器的高度，width 视频播放器的宽度，loop 视频播放完后再次开始播放

muted 视频静音，poster=(url) 规定视频正在下载时显示的图像，知道用户点击播放按钮

preload=(auto,metadata,none) （指一旦页面加载就开始加载视频，指当前页面加载后仅加载视频的元数据，指页面加载后不加载视频），如果使用autoplay则忽略该属性

<track> 标签为媒体元素规定外部文件轨道，媒体播放时，这些文件是可见的。

属性：default 默认轨道，label 文本轨道的标签和标题

kind=（captions，chapters，descriptions，metadata，subtitles）（定义在播放器中显示的简短说明；定义章节，用于导航媒介资源；定义描述，用于通过音频描述媒介的内容，假如内容不可播放或不可见；定义脚本使用的内容；定义字幕）

srclang 轨道文本数据的语言，如果kind属性是subtitles，该属性是必需

2、audio

audio支持三种音频格式文件：MP3、Wav、Ogg。

属性：autoplay、controls、loop、muted、preload

四、Canvas绘图

绘制画布<canvas id="myCanvas" width="300" height="300"></canvas>

<body><canvas id="myCanvas" width="900" height="900"></canvas>
</body>
<script type="text/javascript">var mc = document.getElementById("myCanvas");var mct = mc.getContext("2d");//矩形mct.fillStyle="red";mct.fillRect(0,0,50,50); //(x,y,width,height)//路径mct.moveTo(60,50); //起点mct.lineTo(85,0); //终点mct.moveTo(85,0);mct.lineTo(110,50);mct.moveTo(60,50);mct.lineTo(110,50);mct.stroke();//圆mct.beginPath();mct.arc(145,25,25,0,2*Math.PI); //(x,y,r,start,stop) 圆心坐标mct.stroke();//文本mct.font="50px Arial";mct.fillText("Hello",180,50); //实心文本，左下角坐标mct.strokeText("World",300,50); //空心文本，左下角坐标//渐变var grd1 = mct.createLinearGradient(0,60,100,40); //创建线性渐变(x,y,x1,y1);grd1.addColorStop(0,"blue");grd1.addColorStop(1,"white");mct.fillStyle = grd1; mct.fillRect(0,60,100,40); //(x,y,width,height)//圆渐变(x,y,r,x1,y1,r1)var grd2 = mct.createRadialGradient(135,85,25,135,85,10); grd2.addColorStop(0,"pink");grd2.addColorStop(1,"white");mct.fillStyle = grd2;mct.fillRect(110,60,50,50); //(x,y,width,height)//放置图片到画布上var img = new Image();img.src = "s1.jpg";img.onload = function(){mct.drawImage(img,0,120);}	
</script>

五、SVG绘图

SVG是可伸缩矢量图形，在放大或改变尺寸的情况下其图形质量不会有所损失，使用XML格式定义图形，是万维网联盟的标准。

SVG文件可以通过<embed><object><iframe>标签嵌入HTML文档，在火狐、IE9、谷歌和Safari中可以直接在HTML嵌入SVG代码，还可以直接用a标签链接到一个SVG文件。

stroke属性：stroke-linecap 定义不同类型的开放路径的终结，有butt、round、square

stroke-dasharray 创建虚线，可以设置间隔，stroke-dasharray="5,5"，stroke-dasharray="10,10"，stroke-dasharray="20,10,5,5,5,10"

SVG路径<path> 命令：M 移动画笔，常用语路径开始；L 在当前位置和新位置之间画一条线；

H 画平行线，V 画垂直线，C 三次贝尔赛曲线，Q 二次贝尔赛曲线，A 弧形，Z 闭合路径

<body><svg xmlns="http://www.w3.org/2000/svg" version="1.1" ><!-- 矩形   填充颜色默认是黑色,fill-opacity是填充颜色透明度，stroke-opacity是轮廓颜色透明度,rx、ry设置圆角--><rect width="100" height="50" stroke="blue" fill-opacity="0.5" stroke-opacity="0.5" rx="30" ry="10"/><!-- 圆   cx cy圆点坐标--><circle cx="200" cy="50" r="40" stroke="black" stroke-width="1" fill="red"/></svg><svg  xmlns="http://www.w3.org/2000/svg" version="1.1" ><!--  椭圆    cx cy是椭圆中心，rx ry是水平半径和垂直半径--><ellipse cx="80" cy="50" rx="80" ry="40" stroke="yellow"/><!--  线 起点坐标和终点坐标  --><line x1="10" y1="5" x2="150" y2="5" stroke="red"/></svg><svg width="200" height="200"><!--	多边形  按坐标顺序连线，fill-rule属性指定用哪一种算法判断某区域是否属于图形内部，外部区域不填充颜色，默认nonzero，当内部区域路线方向和外部区域方向一样，则为内部区域，填充颜色；若方向相反，则为外部区域，不填充颜色evenodd，当内部区域路线方向和外部区域方向一样，则为外部区域不填充颜色；若方向相反填充颜色--><polygon points="100,10 40,198 190,78 10,78 160,198" fill="red" fill-rule="evenodd"/></svg><br /><svg><!--  曲线    --><polyline points="0,40 40,40 40,80 80,80 80,120" stroke="black"/></svg>
</body>

六、地理定位

<body><p id="result"></p><button onclick="getLocation()">点击获取位置</button>
</body>
<script type="text/javascript">function getLocation(){if(navigator.geolocation){//获取用户当前位置，第一个参数返回经纬度，第二个参数返回错误navigator.geolocation.getCurrentPosition(showPosition,showError);}else{document.getElementById("result").innerHTML = "浏览器不支持定位";}}function showPosition(position){document.getElementById("result").innerHTML = "纬度："+position.coords.latitude + "<br>经度："+position.coords.longitude;}function showError(error){switch(error.code){case error.PERMISSON_DENIED: /* permission_denied */document.getElementById("result").innerHTML = "用户拒绝获取地理位置请求";break;case error.POSITION_UNAVAILABLE: /* position_unavailible */document.getElementById("result").innerHTML = "位置信息不可用";break;case error.TIMEOUT: /*  timeout */document.getElementById("result").innerHTML = "请求超时";break;case error.UNKNOWN_ERROR: /*  unknown_error */document.getElementById("result").innerHTML = "未知错误";break;}}
</script>

七、拖放API

见博客：https://blog.csdn.net/ysgz9749/article/details/106833969

八、Web Worker

web worker是运行在后台的JavaScript，独立于其他脚本，不会影响页面的性能，通常用于更耗费CPU资源的任务。由于web worker位于外部文件，无法访问JavaScript中的window对象、document对象、parent对象。

<body><p>计数：<output id="result"></output></p><button onclick="startWorker()">开始</button><button onclick="stopWorker()">停止</button>
</body>
<script>var w;function startWorker() {if(typeof(Worker) !== "undefined") {if(typeof(w) == "undefined") {w = new Worker("js/webworker.js");}w.onmessage = function(event) {document.getElementById("result").innerHTML = event.data;};} else {document.getElementById("result").innerHTML = "浏览器不支持 Web Workers";}}function stopWorker() {w.terminate();w = undefined;}
</script>

//webworker.js
var i=0;
function count(){i+=1;postMessage(i); //跨域文档消息传输setTimeout("count()",1000);
}
count();

九、Web Storage

1、localStorage

用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

保存数据 localStorage.setItem(key,value)

读取数据 localastorage.getItem(key)

删除单个数据 localStorage.removeItem(key)

删除所有数据 localStorage.clear()

得到某个索引的key localStorage.key(index)

<body><p id="result"></p><button onclick="count()">点我</button>
</body>
<script type="text/javascript">function count() {if(typeof(Storage) !== "undefined") {if(localStorage.clickcount){localStorage.clickcount = Number(localStorage.clickcount)+1;}else{localStorage.clickcount = 1;}document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " 次 ";}else{document.getElementById("result").innerHTML="浏览器不支持 web存储";}}
</script>

2、sessionStorage

用于临时保存同一窗口（或标签页）的数据，在关闭窗口或标签页之后就会删除这些数据。如果只是刷新页面不会删除数据。

<body><p id="result"></p><button onclick="count()">点我</button>
</body>
<script type="text/javascript">function count(){if(typeof(Storage) !== "undefined"){if(sessionStorage.clickcount){sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;}else{sessionStorage.clickcount = 1;}document.getElementById("result").innerHTML = "这次你点击了" + sessionStorage.clickcount + "次";}else{document.getElementById("result").innerHTML = "不支持web存储";}}
</script>

十、WebSocket

WebSocket是HTML5开始提供的一种在单个TCP连接上的进行全双工通讯的协议，使客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。

创建WebSocket对象：var Socket = new WebSocket( url , [protocol] ）url指定连接的URL，procotol是可选的，指定可接受的子协议。

属性：Socket.readyState 只读属性readyState表示连接状态，0表示连接未建立，1表示连接已建立可以进行通信，2表示连接正在进行关闭，3表示连接已关闭或者连接不能打开。

Socket.bufferedAmount 只读属性bufferedAmount已被send()放入正在队列中等待传输，但是还没有发出的UTF-8文本字节数。

事件：open Socket.onopen，连接建立时触发

message Socket.onmessage，客户端接受服务端数据时触发

error Socket.onerror，通信发生错误是触发

close Socket.onclose，连接关闭时触发

方法：Socket.send()，使用连接发送数据；Socket.close()，关闭连接

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

面向对象高级（继承，抽象类与接口）
面向对象高级（继承，抽象类与接口） 继承 class 子类名 extends 父类名 {//子类属性和方法 }继承的限制： java中只有单继承和多重继承，没有多继承。 super： 通过super可以访问父类的构造方法（…...
2024/5/6 11:54:04
Django连接本地mysql数据库(pycharm)
第一步:更改setting.py中的DATABASES # 配置数据库 DATABASES {default: {# python自带的一个数据库，基本不会被使用# ENGINE: django.db.backends.sqlite3,# NAME: os.path.join(BASE_DIR, db.sqlite3),# 注册我们自己使用的数据库连接ENGINE: django.db.backend…...
2024/5/6 6:40:49
python：网页生成二维码
导读使用python MyQR模块myqr函数给网址生成二维码。 1 安装依赖 pip install MyQR2 普通二维码 words：二维码内容，链接或者句子简书主页链接 python from MyQR import myqr myqr.run(wordshttps://www.jianshu.com/u/72e6ac222ad6)3 添加背景 versi…...
2024/4/24 5:33:10
疫情下，程序猿和攻城狮实现了副业收入
最近跟一位做软件开发朋友聊天，过程中他说到了今年疫情下，身边不少的朋友同行都已经转行了，这种情况同样我跟一些做运维和开发的朋友聊到的时候也了解到不少人都已经离开了原来的公司，在找工作，或者是离职的状态。这样…...
2024/4/22 18:35:26
善用php-fpm日志定位性能问题
本文主要介绍linux环境下的nginx/tenginephp环境部署下的php-fpm日志开启及协助进行性能问题定位了解nginx、fastcgi、php-fpm、php之间的关系一、fastCGI？ fastCGI是由CGI（common gateway interface，通用网关接口）发展而来&am…...
2024/4/7 11:12:52
spring cloud+vue实现在线视频学习网站
项目介绍界面上分为管理员后台和学员学习的前台最终前台效果类似慕课网，后台可以上传课程、修改课程等。技术介绍 Spring Cloud 微服务框架 Spring Boot 单应用框架 Mybatis 持久层框架 PageHelper分页插件 Vue前端框架 BootStrap前端响应式框架 Freemarker模板…...
2024/4/22 3:24:47
关于Android WebView开发的前世今生，你都知道吗？
安卓原生APP中经常会内嵌个H5页面,这就需要用到WebView。很多人对WebView的使用不以为然， 觉得也就那么回事,但实际上关于WebView我们能聊得有很多… 首先我们聊聊他的出生,众所周知,因为爸爸都是谷歌公司,WebView和Chrome浏览器有着紧密的关系。他们实际上都是…...
2024/5/1 20:02:18
AM335x评估板快速测试(1)
前言本指导文档适用开发环境： Windows开发环境：Windows 7 64bit、Windows 10 64bit Linux开发环境：Ubuntu 14.04.3 64bit 虚拟机：VMware14.1.1 U-Boot：U-Boot-2017.01 Kernel：Linux-4.9.65、Linux…...
2024/4/7 11:12:49
容错机制 Hystrix熔断器
Hystrix（豪猪----->刺） 宣⾔“defend your app”是由Netflix开源的⼀个延迟和容错库，⽤于隔离访问远程系统、服务或者第三⽅库，防⽌级联失败，从⽽提升系统的可⽤性与容错性。Hystrix主要通过以下⼏点实现延迟和容错…...
2024/4/24 23:16:30
思维方式 | 深入浅出解释“第一性原理”
中国的互联网知识媒体们从2017年3月份开始讨论这个“第一性原理”。互联网从业者们如果还不知道“第一性原理”，那说明落伍了。（断句很重要，请把前三个字一起读，如果因为分开读而导致你产生别的想法，说明你的关注重点在…...
2024/4/17 8:30:25
ActiveMQ基础入门
ActiveMQ基础入门 1 信息中间件的概述消息中间件关注于数据的发送和接受，利用高效可靠的异步消息传递机制进行平台无关的数据交流，并基于数据通信集成分布式系统。消息中间件是分布式系统中重要的组件，主要解决应用耦合、异步消息、流量削…...
2024/4/17 13:50:27
C#选择文件、选择文件夹，打开文件
选择文件用OpenDialog OpenFileDialog dialog new OpenFileDialog(); dialog.Multiselect true;//该值确定是否可以选择多个文件 dialog.Title “请选择文件夹”; dialog.Filter “所有文件(.)|.”; if (dialog.ShowDialog() System.Windows.Forms.DialogResult.OK) …...
2024/4/24 16:32:01
超级记录仪ETHOS，助力ADAS测试
随着ADAS驾驶辅助系统技术的快速发展以及在技术上的日臻成熟，ADAS在全球汽车市场近年来已开始快速普及和商业化，如何确保ADAS系统的可靠和安全已成为汽车领域的重要问题。因此，ADAS驾驶辅助系统的测试也成为了各大整车厂及零部件厂商关注的热…...
2024/4/24 11:59:42
非网页版微信机器人-Wechaty
微信机器人有很多，比如之前的 itchat 是基于网页版实现的，然而现在微信网页版被封的厉害，许多账号都用不了了。找来找去发现 Wechaty 有基于 ipad 协议的实现，下面对其进行简单介绍。本项目使用wechaty-puppet-padplus&#xff…...
2024/4/7 11:12:43
r74800u和i510210u哪个好
AMD Ryzen 7 4800U仅在15W TDP中具有8个内核和16个线程。这就是7nm工艺流程的魔力-多亏了更先进和高效的体系结构，许多内核和逻辑线程与非常低的TDP值相结合。选锐龙r7 4800U还是i510210u 这些点很重要!看完你就知道了 https://list.jd.com/list.html? 此外&#…...
2024/4/25 8:23:47
C语言程序设计——实验教学大纲
课程信息课程名称：C语言实验学时：24学时实验室名称：现代教育技术实验中心实验课性质：非独立设课适用专业：教育技术学一、实验教学目的掌握C语言的基本知识和程序设计方法；培养计算机程序设计的能…...
2024/4/7 11:12:41
Redis持久化(RDB和AOF)
为什么Redis的持久化很重要？ 因为Redis的数据是存储在缓存中的，因此Redis的瓶颈不是cpu的运行速度，而往往是网络带宽和机器的内存大小。又因为数据存在缓存中是断电即失的，因此有效的持久化对于Redis来说也就变得十分重要了。而…...
2024/4/19 13:27:44
Spring基本了解与导包
Spring基本了解与导包开发工具与关键技术： 作者：熊琪撰写时间：2020年9月8日首先简单介绍Spring是什么和其的作用、Spring是轻量级的开源的JavaEE框架，Spring可以解决企业应用开发的复杂性，Spring 有两个核心部分&am…...
2024/4/25 14:12:46
【论文笔记】《Interact and decide: Medley of sub-attention networks for effective group recommendation》
SIGIR 2019 A会模型结构： u、v分别是用户和项目的隐向量 c是用户的上下文向量为群组gi中每个用户分配一个注意力子网络以用户1为例其注意力子网络的输入是c1和[u2,u3,…,un] 来刻画用户1和群组中其他用户相互交互的行为输出是用户2到用户n的权重对这些权重…...
2024/4/22 3:16:47
Java开发Android入门学习——AndroidStudio在Activity实现简单登录功能，跳转页面显示登录用户名
Java开发Android入门学习——AndroidStudio在Activity实现简单登录功能，跳转页面显示登录用户名安装AS： AndroidStudio安装，在安装好AS之后，配置好相对应的SDK，AVD，成功后进行下一步。创建项目&#xff…...
2024/4/7 10:42:02