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的新增属性相关推荐

  1. 详解html5新增的标签与css3中伪类和伪元素

    html5 / css3 基础篇(第一篇) 回顾 是的,你没看错!今天是一个全新的开始,今天这一讲我们就要开始h5和c3了,html 和 css的基础篇我们都告一段落了.html一共两篇,css走过了 ...

  2. html5新增的标签是什么,HTML5新增标签及含义解释

    HTML 5提供的一些新的标签用法,让我们来看一下有哪些新增的标签,以及它们和HTML 4的区别. header元素表示一个区域或整个区域的头部区域. nav元素表示导航部分 article元素表示一 ...

  3. 前端H5新增标签和CSS3高级

    文章目录 一.CSS3高级技巧 1.精灵图 2.字体图标 3.CSS中的三角 3.CSS用户界面样式 4.vertical-align属性应用 5.溢出的文字省略号显示 6.常见布局技巧 6.CSS初 ...

  4. “是男人就下一百层”h5游戏全网最详细教学、全代码,js操作

    "是男人就下一百层"h5游戏全网最详细教学.全代码,js操作 博主的话 游戏展示 编程工具介绍 游戏代码 代码讲解 js 第一步 切换div的显示与隐藏 js 第二步 在菜单页面用 ...

  5. 工作篇 之 简单聊下有关环信的 “坑” ...

    LZ-Says:相遇,相知,相恋,争执,平淡,压抑,愤懑,该画上句号了. 前言 环信,Enmmm,牛逼,懵 ing -! 最近这段时间一直围绕环信,在使用的过程中,遇到很多很多问题,自己都感觉蒙圈,烦 ...

  6. Example017简单的下拉框

    <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

  7. springdatajpa命名规则_简单了解下spring data jpa

    公司准备搭建一个通用框架,以后项目就用统一一套框架了 以前只是听过jpa,但是没有实际用过 今天就来学习下一些简单的知识 什么是JPA 全称Java Persistence API,可以通过注解或者X ...

  8. html下拉折叠菜单,原生Js_实现简单的下拉折叠菜单(添加弹出动画效果)

    用javascript实现简单的下拉折叠菜单 Gary_js实现简单的下拉折叠菜单 *{margin:0px; padding:0px;} #div1 {width:200px; margin:0 a ...

  9. 简单介绍下我使用了一年多还不知道的Sql server 2005 组件知识

    简介 Microsoft SQL Server 2005 是用于大规模联机事务处理 (OLTP).数据仓库和电子商务应用的数据库平台:也是用于数据集成.分析和报表解决方案的商业智能平台. SQL Se ...

最新文章

  1. 技能模块的防外挂机制和同步机制优化
  2. AQuery学习笔记(一)
  3. ES5 getter setter
  4. primefaces_PrimeFaces扩展中的全新JSF组件
  5. Dataguard学习笔记
  6. Wallpaper:基于Typecho的壁纸头像站主题
  7. jquery实现同时展示多个tab标签+左右箭头实现来回滚动
  8. 翠竹林 Opencv+C++之人脸识别
  9. DNS污染是什么意思?DNS污染解决方案
  10. mongoDB 高级查询(一)
  11. 深度学习平台的搭建(anaconda-pytorch-pycharm)
  12. 国产单机《我的武林江湖》v1.1.159
  13. 英语期末复习——大学英语词汇解析
  14. 计算机兼容,兼容条件
  15. linux无法粘贴文件
  16. 基于ESP8266的STM32物联网开发板
  17. PyQt5 图表 QtChart
  18. 35岁测试工程师,公司因疫情降本增效被辞退
  19. [渝粤教育] 西南科技大学 房屋建筑学 在线考试复习资料(1)
  20. java如何实现添加尖括号_(尖括号)在Java中意味着什么?

热门文章

  1. 使用JasperReport 引擎PDF报表,因为iText版本升级,由原来的包名com.lowagie.text.pdf.fonts转化为com.itextpdf.text.pdf.fonts
  2. linux下kafka安装与配置
  3. redhad安装git
  4. css怎样使鼠标移到div上显示手型
  5. Prometheus和Grafana的监控Linux服务器和MYSQL数据库
  6. FastDFS安装脚本
  7. Python之网络编程(Socket)
  8. Ubuntu如何定时清理内存
  9. mysql之 mysql 5.6不停机主从搭建(一主一从基于日志点复制)
  10. 2014广东高考分数线