HTML5 之 简单汇总

参考:

HTML5的十大新特性

前端面试必备之html5的新特性

HTML5

主要内容:语义化、增强型表单、多媒体标签、Canvas、SVG、地理定位、拖放API、Web Worker、Web Storage、WebSocket、HTML 5 应用程序缓存

1.语义化元素

1.1结构元素

标签描述
article表示与上下文不相关的独立内容区域
aside定义页面的侧边栏区域
header定义页面头部区域
hgroup用于对页面中一个区域或整个页面的标题进行组合
footer定义页面的底部区域
section定义文档中的节段
nav定义页面导航
dialog定义对话框,比如提示框

1.2增强型表单及属性

<!--表单-->
<form action=""><!--表单元素--><input type="text"><input type="password"><input type="button"><input type="submit"><input type="file"><input type="checkbox"><input type="radio"><input type="reset"><!--新增--><input type="search"><input type="number"><input type="email"><input type="url"><input type="tel"><!--在移动端使用的时候才会看到区别--><!--体现:调用的虚拟键盘不一样--><input type="date"><input type="week"><input type="time"><input type="color"><input type="range">
</form>form 属性:action: 用来指定当前表单控件中的数据要交给哪个后台文件去处理method: 用来指定一种数据提交方式: get | post1. 输入框:<input type="text">属性:name: 设置当前控件的名称value:设置当前控件的默认值placeholder: 占位符【当前控件的一个提示信息】readonly: 设置当前控件为只读模式disabled: 设置当前控件不能输入 maxlength: 设置当前控件最多能输入多少个字符autofocus: 自动获取焦点2. 密码输入框:<input type="password">属性: 与文本输入框的属性一致。3.  单选控件:<input type="radio">注意:☞ 默认单选控件不能实现单选效果☞ 只要给单选空件设置相同的name值即可。<input type="radio" name="gender" checked><input type="radio" name="gender">女4. 多选控件:<input type="checkbox" checked> 5. 下拉列表框:<select multiple><option>河南</option><option selected>山西</option><option>北京</option></select>属性:selected: 设置下拉列表框中的默认选中项multiple:可以实现多选效果或者如下写法:<select><optgroup label="河北省"><option>张家口</option><option>石家庄</option><option>保定</option></optgroup></select>6. 多行文本框(域):<textarea></textarea>  < resize: none> 禁止文本域拖拽7. 上传控件:<input type="file">8. 按钮系列:☞ <input type="submit">                 就是用来提交表单数据的☞ <input type="image"  src="按钮.jpg">  用来提交表单数据☞ <input type="button" value="按钮">    不能提交表单数据,和js配合使用☞ <input type="reset">                  将控件中的值恢复到默认值<fieldset><legend>个人信息采集</legend>    </fieldset>H5新属性:
☞ <input type="number" step="5" pattern="">: 该控件只能用来输入数字属性: step="值";            设置当前控件累加的值或减少的值。pattern="正则表达式"   通过正则表达式可以实现灵活的控制输入框中能输入哪些数据类型☞ <input type="url">: 只能输入合法的网址☞ <input type="email">: 设置用户只能输入合法的邮箱地址☞ <input type="date">: 在网页中显示日期控件☞ <input type="week" name="">  显示一年中的第几周☞ <input type="time">          显示24小时内的时间☞ <input type="month" name="">  显示第几个月☞ <input type="range">  : 通过用户拖动控件实现选中值的大小属性:min:  规定允许的最小值max:     规定允许的最大值value:  规定默认值step: 每多拽一次滑块,里面值要累加多少或者减少多少☞ <datalist></datalist>使用:-----搜索下拉列表<input type="text" name="" list="myList"><datalist id="myList"><option value="IT程序入门" label="大约有20个空位"></option><option value="挖掘机入门" label="大约有2台机器"></option><option value="美容美发入门" label="大约每有假头"></option></datalist>

 

☞ required:      实现让表单空键的值不能为空【必须填】例如:<input type="text" name="" placeholder="请输入用户名" required>☞ autocomplete: 将用户提交过的数据进行缓存注意:1. 该属性可以给form标签设置2. 浏览器中该属性的默认值: on | off<form action="1.php" autocomplete="on"></form>☞ novalidate: 取消验证注意:1. 该属性要给form标签设置
<form action="1.php" autocomplete="on" novalidate><input type="email" name="">  ---加上novalidate属性后,该邮箱地址不会进行是否合法验证</form>☞ placeholder: 占位符 【输入框的提示信息】☞ autofocus: 自动获取焦点

 

1.3多媒体标签

git上关于video的使用

<video></video>: 在网页中用来展示视频例如:<video src="ds.mp4" controls autoplay loop></video>controls: 显示控制栏autoplay: 多媒体自动播放loop      : 设置循环播放1. 关于浏览器支持多种视频格式文件播放的兼容写法:<video controls><source src="ds.mp4"><source src="ds.ogg"><source src="ds.webm">浏览器不支持video标签</video><audio></audio>: 在网页中展示音频总结:    audio标签的属性与video标签的属性一样。  兼容写法:<audio><source src="a.mp3" type=""><source src="a.ogg" type=""><source src="a.wav" type="">浏览器不支持audio标签</audio>

2.Canvas绘图

HTML5 Canvas——基础入门

HTML5 Canvas——折线图

 

3.SVG

HTML5 可缩放矢量图形(1)—SVG基础

HTML5 可缩放矢量图形(2)—SVG基础

HTML5 SVG应用(1)——loading效果

 

SVG 与 Canvas两者间的区别

  SVG 是一种使用 XML 描述 2D 图形的语言。

  Canvas 通过 JavaScript 来绘制 2D 图形。

  SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

  在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。

  Canvas 是逐像素进行渲染的。在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。

4.地理定位

HTML5 Geolocation API地理定位整理(一)

HTML5 Geolocation API地理定位整理(二)

[HTML5 Geolocation API工作原理转载]

 

  <script>console.log(navigator.geolocation);if (navigator.geolocation) {//获取地理位置需要等比较长的一段时间//尤其是在PC段,根据IP获取的
      navigator.geolocation.getCurrentPosition(successCB, errorCB);} else {console.log('你的浏览器不支持地理定位');}//获取地理位置成功function successCB(position) {console.info(position);console.log('位置精度:' + position.coords.accuracy);console.log('维度:' + position.coords.latitude);console.log('经度:' + position.coords.longitude);}//获取地理位置失败function errorCB(error) {console.error(error);var msg = '';switch (error.code) {case error.PERMISSION_DENIED:msg = "用户拒绝对获取地理位置的请求。"break;case error.POSITION_UNAVAILABLE:msg = "位置信息是不可用的。"break;case error.TIMEOUT:msg = "请求用户地理位置超时。"break;case error.UNKNOWN_ERROR:msg = "未知错误。"break;}console.error(msg);}</script>

 

 

demo2

<div id="container"></div>
<!-- 引入百度javascript版 API -->
<script src="http://api.map.baidu.com/api?v=2.0&ak=    0A5bc3c4fb543c8f9bc54b77bc155724"></script>
<script>var geolocation = new BMap.Geolocation;geolocation.getCurrentPosition(function(position){console.log(position);// 这些都是写死var map = new BMap.Map("container"); // container表示显示的容器// 把经度纬度传给百度/*40.1691162668,116.6348530780*/var point = new BMap.Point(position.point.lng,position.point.lat);//默认的比例
        map.centerAndZoom(point, 20);//添加鼠标滚动缩放
        map.enableScrollWheelZoom();// 只写上面三行就可出现地图了,并且会定位// 定义好了一个图片标记var myIcon = new BMap.Icon("1.png", new BMap.Size(128, 128));// 创建标注var marker = new BMap.Marker(point, {icon: myIcon});map.addOverlay(marker);});</script>

  

5.拖放API

拖放(Drag 和 drop)是 HTML5 标准的组成部分。

注意:drop事件的默认行为是以链接形式打开的,这时要阻止默认行为。

拖放是一种常见的特性,即抓取对象以后拖到另一个位置。

  • 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。

  • 拖放的过程分为源对象和目标对象,源对象指的是即将拖动的对象,而目标对象则是指拖动之后要放置的目标对象

拖动过程会触发很多事件,主要有下面这些:

  1. dragstart:网页元素开始拖动时触发。

  2. drag:被拖动的元素在拖动过程中持续触发。

  3. dragenter:被拖动的元素进入目标元素时触发,应在目标元素监听该事件。

  4. dragleave:被拖动的元素离开目标元素时触发,应在目标元素监听该事件。

  5. dragover:被拖动元素停留在目标元素之中时持续触发,应在目标元素监听该事件。

  6. drap:被拖动元素或从文件系统选中的文件,拖放落下时触发。

  7. dragend:网页元素拖动结束时触发。

拖放的源对象(可能移动)可以出发三个事件

  • dragstart

  • drag

  • dragend

整个拖动过程的组成: dragstart*1 + drag*n + dragend*1

拖放的目标对象(不会发生移动)可以触发的事件——4个

dragenter:拖动着进入

dragover:拖动着悬停

dragleave:拖动着离开

drop:释放

整个拖动过程的组成1: dragenter*1 + dragover*n + dragleave*1

整个拖动过程的组成2: dragenter*1 + dragover*n + drop*1

dataTransfer:用于数据传递的“拖拉机”对象;

在拖动源对象事件中使用e.dataTransfer属性保存数据:

e.dataTransfer.setData( k, v )

在拖动目标对象事件中使用e.dataTransfer属性读取数据:

var value = e.dataTransfer.getData( k )

demo1:

<!DOCTYPE HTML>
<html>
<head><style type="text/css">#div1 {width: 1000px;height: 250px;padding: 10px;border: 1px solid #aaaaaa;}</style><script type="text/javascript">function allowDrop(ev) {console.log(ev);ev.preventDefault();}function drag(ev) {console.log(ev);ev.dataTransfer.setData("Text", ev.target.id);}function drop(ev) {console.log(ev);ev.preventDefault();var data = ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));}</script>
</head><body><p>请把图片拖放到矩形中:</p><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br /><img id="drag1" src="./01.jpg" draggable="true" ondragstart="drag(event)" /></body>
</html>

说明:

<!-- 1. 首先,为了使元素可拖动,把 draggable 属性设置为 true : -->
<img draggable="true" />
<!-- 2. 拖动什么 - ondragstart 和 setData() 
然后,规定当元素被拖动时,会发生什么。
在上面的例子中,ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值:
-->
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
<!-- 在这个例子中,数据类型是 "Text",值是可拖动元素的 id ("drag1")。 --><!-- 3.放到何处 - ondragover -->
<!-- ondragover 事件规定在何处放置被拖动的数据。
默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法: -->
event.preventDefault()<!-- 4.进行放置 - ondrop 
当放置被拖数据时,会发生 drop 事件。
在上面的例子中,ondrop 属性调用了一个函数,drop(event):
-->
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}/*
代码解释:
调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素(目标元素)中
*/

 

[demo2](http://www.w3school.com.cn/tiy/t.asp?f=html5_draganddrop2)

<!DOCTYPE HTML>
<html>
<head><style type="text/css">#div1,#div2 {float: left;width: 1000px;height: 250px;margin: 10px;padding: 10px;border: 1px solid #aaaaaa;}</style><script type="text/javascript">function allowDrop(ev) {ev.preventDefault();}function drag(ev) {ev.dataTransfer.setData("Text", ev.target.id);}function drop(ev) {ev.preventDefault();var data = ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));}</script>
</head><body><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="./01.jpg" draggable="true" ondragstart="drag(event)" id="drag1" /></div><div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div></body></html>

 

6.Web Worker

web worker 是运行在后台的 JavaScript,不会影响页面的性能。

  • 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。

  • web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。

  • Javascript是单线程的。因此,持续时间较长的计算,回阻塞UI线程,进而导致无法在文本框中填入文本,单击按钮等,并且在大多数浏览器中,除非控制权返回,否则无法打开新的标签页。该问题的解决方案是Web Workers,可以让Web应用程序具备后台处理能力,对多线程的支持性非常好。

  • 但是在Web Workers中执行的脚本不能访问该页面的window对象,也就是Web Workers不能直接访问Web页面和DOM API。虽然Web Workers不会导致浏览器UI停止响应,但是仍然会消耗CPU周期,导致系统反应速度变慢。

  • 所有主流浏览器均支持 web worker,除了 Internet Explorer。

demo

Web Workers 和 DOM

由于 web worker 位于外部文件中,它们无法访问下例 JavaScript 对象:

  • window 对象

  • document 对象

  • parent 对象

7.Web Storage

认识本地存储

会话控制

8.WebSocket-----HTML 5 服务器发送事件

WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。

两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。

当你获取 Web Socket 连接后,你可以通过 send() 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。

9.HTML 5 应用程序缓存

使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本。

什么是应用程序缓存(Application Cache)?

HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势:

  • 离线浏览 - 用户可在应用离线时使用它们

  • 速度 - 已缓存资源加载得更快

  • 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

 

转载于:https://www.cnblogs.com/houfee/p/10382148.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/365626.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

个人信息管理系统代码_Thymeleaf+SpringBoot+Mybatis实现的易游网旅游信息管理系统...

项目简介项目源码&#xff1a;麻烦转发后关注JAVA梦想口服液私信回复【源码】即可获取&#xff01;本系统是基于ThymeleafSpringBootMybatis。是非常标准的SSM三大框架(SpringBoot就是一个大框架&#xff0c;里面包含了许多的东西&#xff0c;其中Spring就是最核心的内容&#…

HTML速查列表

HTML速查列表 HTML基本文档 <!DOCTYPE html> <html> <head> <title>文档标题</title> </head> <body> 可见文本... </body> </html> 基本标签&#xff08;Basic Tags&#xff09; <h1>最大的标题</h1> &l…

被问到有没有内核开发经验_一个人就是一个开发团队!成电硬核毕业生自制迷你电脑走红!...

△小视频近日&#xff0c;一段长3分多钟的小视频在B站突然爆红&#xff0c;不仅登上首页&#xff0c;获得超过200万的播放量&#xff0c;还被众多观众“膜拜”。有网友在评论区说&#xff1a;“其实这些东西吧&#xff0c;外行看起来很牛&#xff0c;但我这种内行看起来&#x…

使用英特尔性能计数器调整垃圾收集

介绍 我不得不承认我很震惊。 确实&#xff0c;当我意识到这个出现的日历帖子将涉及垃圾收集时&#xff0c;我感到非常震惊。 GC的主题引起了Java倡导者和那些认为内存管理应该是手动的人的热情。 撰写了许多文章&#xff0c;内容涉及看起来奇怪的命令行参数中的细微变化&#…

matlab2010a连接mysql_MATLAB2010a+OpenCV2.3.1+VS2010运行TLD

出现matlab不显示C编译器的原因主要还是当前Matlab版本相对于VS来说不够新&#xff0c;比如14版的肯定支持10的VS。 本文引用地址&#xff1a; http://blog.csdn.net/shanpohe/article/details/7596401 http://blog.sina.com.cn/s/blog_adfd55190101ejvr.html TLD(Tracking Lea…

理解总结篇—List、Set、Map

List是存储对象的容器&#xff0c;可以存储任意类型的对象且长度可变&#xff0c;List的存储对象是有顺序的&#xff0c;可重复的。 <1> List的接口框架 ArrayList实现类通过数组实现&#xff0c;在向集合中增加或删除时&#xff0c;需要对集合进行增容和拷贝&#xff0c…

SpringBoot+Redis使用jedis实现了对Redis基本类型操作超全工具类

这编文章主要介绍了springboot整合redis&#xff0c;使用jedis实现了对Redis基本类型操作&#xff0c;一些redis的常用命令总结到了一个公共的工具类中,其中使用了fastjson作为了序列化工具。 注&#xff1a;使用了 jdk 1.8 新特性 &#xff0c;jdk版本需要>1.8 一.添加mave…

更改span标签样式_CSS 内嵌样式

前面一节我们讲了行内样式&#xff0c;但是行内样式的缺点就是样式不能重用。例如当有好多个 标签&#xff0c;我们希望所有的 标签的样式都一致&#xff0c;那么需要在每个标签中都写一遍&#xff0c;这么会很麻烦&#xff0c;也会增加很多代码。那么为了解决这个问题&#…

js 函数节流

//es6语法export function debounce(func, delay) {let timer//返回一个函数&#xff0c;并拿到参数return function (...args) {if (timer) {clearTimeout(timer)}timer setTimeout(() > {func.apply(this, args)}, delay)} } //简单实现var debounce function(idle, act…

mysql 6安装当前密码_MySQL8.0 安装踩坑指南

就在昨天上午&#xff0c;刚为云服务器安装好Apache2.4.33和PHP7.2.4环境&#xff0c;准备再来一个最新的MySQL5.7.22。寻找5.7版本的rpm包时下到mysql80xxx.rpm&#xff0c;看人家的教程是mysql57&#xff0c;难道80是MySQL出出…出了8版&#xff0c;一搜新闻2个小时前MySQL发…

如何用Java编写最快的表达式评估器之一

当然&#xff0c;标题有点吸引人&#xff0c;但确实如此&#xff08;您当然不相信自己没有伪造自己的基准&#xff0c;但这是另一回事了&#xff09;。 因此&#xff0c;上周我正在寻找一个小型且可用的库来评估数学表达式。 我几乎直接偶然发现了这个stackoverflow帖子 。 推…

Elasticsearch环境搭建和介绍(Windows)

一、Elasticsearch介绍和安装 1.1 介绍 Elastic Elastic官网&#xff1a;https://www.elastic.co/cn/ Elastic有一条完整的产品线&#xff1a;Elasticsearch、Kibana、Logstash等&#xff0c;前面说的三个就是大家常说的ELK技术栈。 Elasticsearch Elasticsearch官网&#xff1…

python 银行业务系统程序编程写_python多线程实现代码(模拟银行服务操作流程)

1.模拟银行服务完成程序代码目前&#xff0c;在以银行营业大厅为代表的窗口行业中大量使用排队(叫号)系统&#xff0c;该系统完全模拟了人群排队全过程&#xff0c;通过取票进队、排队等待、叫号服务等功能&#xff0c;代替了人们站队的辛苦。排队叫号软件的具体操作流程为&…

vue 新版本 webpack 代理 跨域设置

旧版本中&#xff1a;dev-server.js 这段去掉 var apiRoutes express.Router() //getList apiRoutes.get(/getDiscList, function (req, res) {var url https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcgaxios.get(url, {headers: {referer: https://c.y.qq.com…

人月神话(2)

我不知道为什么作者要拿外科医生举例子&#xff0c;在我眼里足球队更合适&#xff0c;或者说更贴近生活&#xff0c;让人们更容易理解。人的专业水平&#xff0c;在刚开始其实没什么可比性&#xff0c;试问&#xff1a;一个有小学学历的人和一个有初中学历的人在大公司招聘时有…

mysql查询出过去一个月_Mysql查询今天、昨天、7天、近30天、本月、上一月 数据...

今天select * from 表名 where to_days(时间字段名) to_days(now());昨天SELECT * FROM 表名 WHERE TO_DAYS( NOW( ) ) - TO_DAYS( 时间字段名) < 17天SELECT * FROM 表名 where DATE_SUB(CURDATE(), INTERVAL 7 DAY) < date(时间字段名)近30天SELECT * FROM 表名 where…

Jar Hell变得轻松–用jHades揭秘classpath

Java开发人员将不得不面对的最困难的问题是类路径错误&#xff1a; ClassNotFoundException &#xff0c; NoClassDefFoundError &#xff0c;Jar Hell&#xff0c; Xerces Hell和company。 在本文中&#xff0c;我们将探究这些问题的根本原因&#xff0c;并了解最小的工具&am…

图像处理中常见的时域与频域区别与关系

本文纯为转载只做个人学习记录用&#xff0c;请自动点击链接到作者原文&#xff1a;https://blog.csdn.net/samkieth/article/details/49561539 一、什么是时域 时域是描述数学函数或物理信号对时间的关系。例如一个信号的时域波形可以表达信号随着时间的变化。 二、什么是频域…

程序控制发送文件到邮箱_Kindle电子邮箱推送

Kindle 推送支持的格式目前 Kindle 推送仅支持以下几种格式。需要注意的是&#xff0c;AZW 和 AZW3 是两种不同的格式&#xff0c;虽然这两种格式 Kindle 设备都支持阅读&#xff0c;但是亚马逊的个人文档服务支持推送 AZW 但是不支持 AZW3。Kindle 格式 (.mobi 或 .azw) * 推荐…

[USACO06JAN] 牛的舞会 The Cow Prom

题目描述 The N (2 < N < 10,000) cows are so excited: its prom night! They are dressed in their finest gowns, complete with corsages and new shoes. They know that tonight they will each try to perform the Round Dance. Only cows can perform the Round D…