简单说下我对H5的新增的标签和css3的新增属性
HTML 英文全称是:HyperText Markup language; 中文全称是超文本标记语言又称超链接文本标记语言;
H5呢就是HTML第五代版本;
首先智能表单
<form action="" method="post">
<input type="color" name="" id="" value="" />
<input type="tel" required="required" autofocus="" autocomplete="off" pattern="" name="" id="" value="" />
<input type="submit" onactivate="" name="" id="" value="" />
</form>
action 提交地址
method 是提交方式 默认是GET get是没有做任何保密。 然而POST是加密传输传输数据无限,
required是必填项
autocomoelete 是设置记忆输入
autofocus 自动聚焦
pattern 是判断正则
readonly不可编辑但是选择和复制。值可以递传到后台。disabled不能编辑不能复制,不能选择,值不能传到后台
下面是 canvas 画图板
getContext("2d");设置画笔
window.οnlοad=function(){
var m=document.getElementById("mycanvas");
var pen=m.getContext("2d");
// pen.beginPath();
// pen.moveTo(100,100);
// pen.lineTo(220,200);
// pen.lineTo(300,20);
setInterval(function(){
pen.clearRect(0,0,400,400);
var n=Math.random()*300;
pen.beginPath();
pen.moveTo(10,n);
for (i=1;i<7;i++) {
n=Math.random()*300;
pen.lineTo(10+i*50,n);
}
pen.stroke();
pen.closePath();
},1000)
}
这是一个随机画线的脚本
moveTo(100,100); 画笔起点
lineTo画线、
closePath() 结束画图
.beginPath() 开始绘图
下面是音视频
video
window.οnlοad=function(){
btn1=document.getElementById("btn1").getElementsByTagName("button");
v=document.getElementById("videol");
zong=document.getElementById("zong");
dang=document.getElementById("dang");
p1=document.getElementById("p");
li1=document.getElementById("ul1").getElementsByTagName("li");
btn1[0].οnclick=function(){
if(v.paused==false){
v.pause();
this.innerHTML="播放"
}else{
v.play();
this.innerHTML="暂停"
zong.innerHTML=Math.round(v.duration);
}
btn1[1].οnclick=function(){
v.volume-=0.1;
}
btn1[2].οnclick=function(){
v.volume+=0.1;
}
btn1[3].οnclick=function(){
if(v.muted==false){
v.muted=true;
this.innerHTML="恢复"
}else{
v.muted=false;
this.innerHTML="静音"
}
btn1[4].οnclick=function(){
v.currentTime-=10;
}
btn1[5].οnclick=function(){
v.currentTime+=10;
}
btn1[6].οnclick=function(){
v.mozRequestFullScreen();
}
btn1[7].οnclick=function(){
v.playbackRate=0.5;//满放
}
btn1[8].οnclick=function(){
v.playbackRate=5;
}
btn1[9].οnclick=function(){
v.playbackRate=1;
}
}
}
setInterval(function(){
dang.innerHTML=Math.round(v.currentTime);
m=v.currentTime/v.duration;
p1.value=m*100;
},100);
for(var i=0; i<li1.length;i++){
li1[i].οnclick=function(){
v.src=this.title;
}
}
}
上面是视频的简单控件 moz webkit o ms快进 快退webkit 不支持;
开始css3
css 英文全称是 Cascading style sheet; 中文全称是层叠样式表;
CSS3 就是在css基础上加了点东西而已
@keyframes | 规定动画。 | 3 |
animation | 所有动画属性的简写属性,除了 animation-play-state 属性。 | 3 |
animation-name | 规定 @keyframes 动画的名称。 | 3 |
animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 3 |
animation-timing-function | 规定动画的速度曲线。默认是 "ease"。 | 3 |
animation-delay | 规定动画何时开始。默认是 0。 | 3 |
animation-iteration-count | 规定动画被播放的次数。默认是 1。 | 3 |
animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 | 3 |
animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 | 3 |
上面是动画属性转载 W3School
转载于:https://www.cnblogs.com/cond/p/5840143.html
简单说下我对H5的新增的标签和css3的新增属性相关推荐
- 详解html5新增的标签与css3中伪类和伪元素
html5 / css3 基础篇(第一篇) 回顾 是的,你没看错!今天是一个全新的开始,今天这一讲我们就要开始h5和c3了,html 和 css的基础篇我们都告一段落了.html一共两篇,css走过了 ...
- html5新增的标签是什么,HTML5新增标签及含义解释
HTML 5提供的一些新的标签用法,让我们来看一下有哪些新增的标签,以及它们和HTML 4的区别. header元素表示一个区域或整个区域的头部区域. nav元素表示导航部分 article元素表示一 ...
- 前端H5新增标签和CSS3高级
文章目录 一.CSS3高级技巧 1.精灵图 2.字体图标 3.CSS中的三角 3.CSS用户界面样式 4.vertical-align属性应用 5.溢出的文字省略号显示 6.常见布局技巧 6.CSS初 ...
- “是男人就下一百层”h5游戏全网最详细教学、全代码,js操作
"是男人就下一百层"h5游戏全网最详细教学.全代码,js操作 博主的话 游戏展示 编程工具介绍 游戏代码 代码讲解 js 第一步 切换div的显示与隐藏 js 第二步 在菜单页面用 ...
- 工作篇 之 简单聊下有关环信的 “坑” ...
LZ-Says:相遇,相知,相恋,争执,平淡,压抑,愤懑,该画上句号了. 前言 环信,Enmmm,牛逼,懵 ing -! 最近这段时间一直围绕环信,在使用的过程中,遇到很多很多问题,自己都感觉蒙圈,烦 ...
- Example017简单的下拉框
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- springdatajpa命名规则_简单了解下spring data jpa
公司准备搭建一个通用框架,以后项目就用统一一套框架了 以前只是听过jpa,但是没有实际用过 今天就来学习下一些简单的知识 什么是JPA 全称Java Persistence API,可以通过注解或者X ...
- html下拉折叠菜单,原生Js_实现简单的下拉折叠菜单(添加弹出动画效果)
用javascript实现简单的下拉折叠菜单 Gary_js实现简单的下拉折叠菜单 *{margin:0px; padding:0px;} #div1 {width:200px; margin:0 a ...
- 简单介绍下我使用了一年多还不知道的Sql server 2005 组件知识
简介 Microsoft SQL Server 2005 是用于大规模联机事务处理 (OLTP).数据仓库和电子商务应用的数据库平台:也是用于数据集成.分析和报表解决方案的商业智能平台. SQL Se ...
最新文章
- 技能模块的防外挂机制和同步机制优化
- AQuery学习笔记(一)
- ES5 getter setter
- primefaces_PrimeFaces扩展中的全新JSF组件
- Dataguard学习笔记
- Wallpaper:基于Typecho的壁纸头像站主题
- jquery实现同时展示多个tab标签+左右箭头实现来回滚动
- 翠竹林 Opencv+C++之人脸识别
- DNS污染是什么意思?DNS污染解决方案
- mongoDB 高级查询(一)
- 深度学习平台的搭建(anaconda-pytorch-pycharm)
- 国产单机《我的武林江湖》v1.1.159
- 英语期末复习——大学英语词汇解析
- 计算机兼容,兼容条件
- linux无法粘贴文件
- 基于ESP8266的STM32物联网开发板
- PyQt5 图表 QtChart
- 35岁测试工程师,公司因疫情降本增效被辞退
- [渝粤教育] 西南科技大学 房屋建筑学 在线考试复习资料(1)
- java如何实现添加尖括号_(尖括号)在Java中意味着什么?
热门文章
- 使用JasperReport 引擎PDF报表,因为iText版本升级,由原来的包名com.lowagie.text.pdf.fonts转化为com.itextpdf.text.pdf.fonts
- linux下kafka安装与配置
- redhad安装git
- css怎样使鼠标移到div上显示手型
- Prometheus和Grafana的监控Linux服务器和MYSQL数据库
- FastDFS安装脚本
- Python之网络编程(Socket)
- Ubuntu如何定时清理内存
- mysql之 mysql 5.6不停机主从搭建(一主一从基于日志点复制)
- 2014广东高考分数线