html5 上海,【上海校区】HTML5新特性
(1)新的语义标签和属性
新的语义化标签:header、footer、nav、section、article、aside、details、time、rudy、mark等
新的属性:表单新属性、链接新属性、其他(ol新增reversed、meta新增charset、menu新增type和label、style新增scoped、script新增async、html新增manifest、iframe新增sandbox、seamless、srcdoc)
(2)表单的新特性
新的input type:email、 url、 number、 tel、 search、 range、 color、 date、 month、 week
新的表单元素:datalist、progress、meter、output
表单元素的新属性:autocomplete、autofocus、placeholder、multiple、form
required、maxlength、minlength、min、max、step、pattern
(3)视频和音频
HTML5提供一个新的标签标签,用于播放视频,该标签默认是一个300*150的inline-block,使用方法
HTML5提供一个新的标签标签,用于播放音频,该标签若没有controls属性,则默认display:none;反之则是一个300*30的inline-block,使用方法
(4)Canvas绘图
https://mp.csdn.net/mdeditor/84587619#
(5)SVG
使用SVG绘制矩形:
注意:SVG图形的样式可以用HTML属性赋值,也可以使用CSS形式,但不接受普通的CSS属性!只能用SVG元素专有的属性
SVG图形的属性不属于HTML DOM标准,只能使用核心DOM方法操作其属性:rect.setAttribute(‘’,’’)
使用JS动态创建SVG元素
用svg.innerHTML=’’
用document.createElementNS(‘’,’’),不能使用document.createElement
使用SVG绘制圆形:
使用SVG绘制椭圆:
使用SVG绘制直线:
可以使用来表示公共属性
注意:所有的SVG图形默认只有填充色,没有描边色
使用SVG绘制折线:
使用SVG绘制多边形:
使用SVG绘制文本
提示:传统的标签不能置于SVG内部!同理,SVG的标签也不能放在其他元素内部
哈哈哈哈哈
使用SVG绘制图像 :
提示:在SVG中绘制图像使用image元素,引入位图后,此SVG图片放大后会失真
(6)地图定位
HTML5新增了获得浏览器所在地的对象
window.navigator.geolocation{
getCurrentPosition:fn,//用于获取当前定位信息
watchPosition:fn,//不停的监视定位信息的改变
clearWatch:fn//清除监视
}
navigator.geolocation.getCurrentPosition(
function(pos){
console.log('定位成功');
},function(err){
console.log('定位失败');
}
)
(7)拖放API
拖放API——七个事件
源对象可以触发的事件:dragstart:拖动开始 drag:拖动中 dragend:拖动结束
目标对象可以触发的事件:dragenter:拖动着进入 dragover 拖动着在目标对象上方 dragleave:拖动着离开 drop:释放
(8)WebWoker
(9)WebStorage
(10)WebSocket
---------------------
作者:qq_41805715
来源:CSDN
原文:https://blog.csdn.net/qq_41805715/article/details/84726626
版权声明:本文为博主原创文章,转载请附上博文链接!
html5 上海,【上海校区】HTML5新特性相关推荐
- html标签语义化的好处,(2019)[前端]面试题[9]:HTML5语义化标签和新特性
问题 知道语义化吗?说说你理解的语义化,如果是你,平时会怎么做来保证语义化? 说说你了解的HTML5语义化标签,HTML5新增了那些新特性? Hello,欢迎来到我的博客,每天一道面试题,我们共同进步 ...
- HTML5有哪些表单新特性
21. 检测属性支持 除了Modernizr之外我们还可以通过javascript简单地检测一些属性是否支持,如: 22. Mark元素 把元素看做是高亮的作用,当我选择一段文字的时候,javascr ...
- web前端基础 html5+css3(十.html5css3新特性)
1.html5新增的语义化标签(针对搜索引擎,提高优化) <header>:头部标签 <nav>:导航标签 <active>:内容标签 <section> ...
- 页面显示 amp html6,浅谈HTML5 amp;amp; CSS3的新交互特性
本文标题的这副图片,是用Phosotshop制作的.但是,在搜索引擎中你却无法搜索到它,搜索引擎还没有强大到能够识别图片里面的文字.并且由于图片的体积不算太小,可能网速慢的网友在浏览的时候不得不耐心的 ...
- 使用Modernizr探测HTML5/CSS3新特性
HTML5, CSS3以及相关技术(例如canvas和web sockets)带来了非常有用的特性,可以让我们的web程序提升一个新的level.这些新技术允许我们只用HTML,CSS和JavaScr ...
- html5 跳转参数不显示_HTML5、CSS3、ES6新特性总结
前言:HTML5.CSS3.ES6新特性,可以说是基础前端的面试的必考题了,以下是关于新特性的基本总结. HTML5: 语义化的区块和段落元素:<section>,<article& ...
- HTML5和CSS3新特性有哪些
HTML5 (1)问题分析 对于目前市场上来说HTML5中需要掌握的新特性有: 1.拖拽释放(Drag and drop) API 2.语义化更好的内容标签(header,nav,footer,asi ...
- HTML5超酷新特性WebSockets初体验
人人网Web前端开发工程师暴风彬彬(网名),在个人网站彬Go上发表了一篇博文<HTML5 WebSockets 基础使用教程>,和大家一起分享了如何利用HTML5超酷新特性WebSocke ...
- 【翻译】使用Modernizr探测HTML5/CSS3新特性
HTML5, CSS3以及相关技术(例如canvas和web sockets)带来了非常有用的特性,可以让我们的web程序提升一个新的level.这些新技术允许我们只用HTML,CSS和JavaScr ...
- 这一次,彻底搞懂HTML5新特性
前言 HTML5已经被提出多年,关于HTML5到底带来了哪些新特性?和之前的HTML版本有什么区别?这经常是面试官考到的题目,下面让我们来深刻的总结这个问题吧~ HTML新特性 1:语义化标签 通过语 ...
最新文章
- java中abstract关键字
- 我们为什么要尝试前后端分离
- mysql 安装完成后需要做的配置
- Win7有多条隧道适配器(isatap、teredo、6to4)的原因及关闭方法
- catia怎么将特征参数化_VSLAM中特征点的参数化表示
- poj 3630 Phone List trie树—字典树 静态数组版!!!
- 五种不同的微博评论数据获取方法
- 在电脑上怎么做报表新手_初学者在电脑上如何制作电子表格
- arcgis影像怎么去黑边_arcgis遥感图像去黑边林林种种(至少7种方法)
- 34套Java项目教程+源码包含Java swing项目 Java web项目 Java控制台项目(视频教程+源码)
- C语言怎样提取一个数的十位个位百位千位
- element-ui el-table 表格渲染错位以及高度计算错误问题
- Html是网页制作的核心语言吗,html网页设计报告总结.doc
- 如何解决IAR不能设置断点的问题
- MATLAB绘制平面填充图入门详解
- 人工智能革命:一个在ANI上运行的世界
- 电子货架标签——wifi版本电子墨水屏
- MOS与三极管的控制使用简介
- MATLAB数字信号仿真平台课题描述[完美运行,详细解释,GUI界面,万字文稿]
- LabVIEW控制Arduino采集多路DS18B20温度数值(进阶篇—3)
热门文章
- jnativecpp.dll一定要放到系统目录下吗_「实用」室内甲醛到底该如何去除?关键要做到这两点...
- Tree树结构java实现
- collator java_Java Collator getInstance(Locale)用法及代码示例
- 计算机二级vb操作题如何给分,计算机二级vb操作题.docx
- php多添件分页查询,ThinkPHP的多表查询+分页范例
- springboot响应结果超长(7.8M)浏览器无法接收
- 细谈getRequestDispatcher()与sendRedirect()的区别
- 关于协程和 ES6 中的 Generator
- 【CodeForces】700 D. Huffman Coding on Segment 哈夫曼树+莫队+分块
- [CENTOS7] [IPTABLES] 卸载Firewall Id安装 IPTABLES及防火墙设置