IT知识库 购物 网址 游戏 小说 歌词 快照 开发 股票 美女 新闻 笑话 | 汉字 软件 日历 阅读 下载 图书馆 编程 China
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程 CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
站长资讯 .NET新手 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA VisualStudio ASP.NET-MVC .NET控件开发 EntityFramework WinRT-Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动 Html-Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP OracleERP DynamicsCRM K2 BPM 信息安全 企业信息 Android开发 iOS开发 WindowsPhone WindowsMobile 其他手机 敏捷开发 项目管理 软件工程 SQLServer Oracle MySQL NoSQL 其它数据库 Windows7 WindowsServer Linux
  IT知识库 -> .NET新手区 -> 如鹏网学习笔记(十二)HTML5 -> 正文阅读

[.NET新手区]如鹏网学习笔记(十二)HTML5

如鹏网学习笔记(十二)HTML5 一、HTML5简介
  HTML5是HTML语言第五次修改产生的新的HTML语言版本
  改进主要包括:
    增加新的HTML标签或者属性、新的CSS样式属性、新的JavaScript API等。同时删除了一些过时的和样式相关的HTML标签和属性
  给网页带来了新的特性:
    多媒体支持、本地存储、图形绘制和样式特效等
二、新的多媒体标签
  1,<video> 用来在页面播放视频
    部分属性:
      src    要播放的视频的地址
      width    设置播放器的宽度,单位px
      height    设置播放器的高度,单位px
      controls    如果出现该属性,则向用户显示控件,比如播放按钮
      autoplay    视频在就绪后马上播放
      loop   播放完成后重新开始
    示例代码:
      <video controls="control" width="960px" height="450px">
        <source src="resource/世界5500年版图演变史.webm"/>
        <source src="resource/世界5500年版图演变史.mp4"/>
      </video>
  2,<audio> 在页面播放音频
    支持OFF\MP3\WAV三种音频格式
    用法与<video>相似
    示例代码:
    <audio controls="controls">
      <source src="resource/风吹麦浪-叶一茜.mp3" />
      <source src="resource/风吹麦浪-叶一茜.wav" />
      <source src="resource/风吹麦浪-叶一茜.ogg" />
    </audio>
  3,<source> 指定多媒体资源的位置,配合上面两个标签使用,是个单标签
三、新的表单控件
  新增的表单控件就是在input标签的type属性增加了新的可选项
  date   日期控件 value格式为:2016-03-20
  time    时间控件 value格式为10:20
  number   数字控件
  range   范围控件 使用max和min属性来控制拖动的范围
  search   搜索框控件
  color   颜色选择器 value格式为:16进制颜色值
  email、url、datetime    这些不是所有浏览器都支持
  HTML5其实是把第三方插件的效果集成了
四、input标签的新属性
  placeholder    输入框的输入提示信息
  required    必填的意思,required="required"
  pattern    用户验证用户输入
  form    指定控件所属的表单,这样控件就不必一定要在<form>标签内了
  autofocus    自动获得焦点
  multiple    指定文件上传时是否可选多个文件
  accept   指定上传文件时允许的MIME类型(文件类型),如image/*代表所有图片格式
五、增加JavaScript对要上传的文件的处理功能
  为JavaScript提供新的API,使其能够处理要上传的文件
  1,File   表示被选中的一个文件,包含和此文件相关的信息
    size属性   文件大小
    type属性   文件类型
    name属性   文件名
  2,FileList   被选中上传的文件列表
  3,FileReader   对文件数据进行处理
    readAsText(file,encoding)   以文本的形式读取文件数据
    readAsDataURL( file)   以base64编码的形式读取文件数据
    result属性    读取到的被处理过的文件数据
    onload  事件属性,文件读取成功时触发
六、新的文档语义标签
  在HTML5之前,文档中无论是布局还是内容结构方面,使用的都是div标签
  Html5为文档内容语言结构方面定义了一些新的标签:
  header   一般放置logo或者菜单栏
  nav    一般放置网站内的目录、导航栏链接,或者网站外的友情链接
  article    页面中相对独立的结构,如一篇文章,或者此文章的每一个评论
  section    定义页面或者article的章节
  aside    一般放置广告或者解释性信息
  footer    一般放置版权信息的
  其中article和section的用法比较灵活,可以相互嵌套
  这些标签除了可以让文档的语义结构更加清晰外,还可以方便搜索引擎的抓取,也为程序对页面的准确分析提供了可能
  只是现今阶段这些标签还没有成为主流
七、新的事件类型
  beforeunload   页面关闭前或刷新前触发
  scroll   页面滚动时触发
  resize   页面尺寸被调整时触发
  mousewheel    鼠标滚轮滚动时触发
  dragstart、dragover、drop   拖放事件
八、元素拖放(drag/drop)
  在HTML5中,元素时可以被拖放的(拖拽,放下)
  1,draggable 是否可被拖拽(元素的公共属性)
  2,dragstart 拖拽开始事件,元素a被拖拽时触发
  3,dragover 拖拽到另一个元素上,当一个被拖拽元素a进入到另一个元素b的范围时触发
  4,drop 拖拽停止事件,鼠标按键松开时触发,事件源是元素b
  图片、超链接默认是可以拖拽,想要拖拽其他元素,需要设置元素的draggable属性为true
  元素默认拒绝接受另一个被拖拽的元素,表现为鼠标指针变为,drop事件也不会触发
  注意:
    被选中的文本也可以被拖拽,先忽略这一点。拖放动作只会触发一些事件,并不会做任何实际性的事情,
    就像点击了一个普通按钮不会触发任何效果一样,想做一些事情就需要在事件处理函数里面写处理代码
九、元素拖放实现
  若要实现把元素a拖放到元素b中,需要进行一下步骤:
  1.确保元素a可拖拽(设置元素的draggable属性为true)
  2,给元素a注册dragstart事件处理函数(主要用来存储一些相关数据)
  3,给元素b注册dragover事件处理函数(主要用来取消事件默认行为)
  4,给元素b注册drop事件处理函数(主要用来把元素a插入到元素b中)
  由于整个拖放过程涉及到多个事件,所以就需要event.dataTransfer对象在整个拖放过程中存储和传递需要的数据
  event.dataTransfer.setData(key,value) 存放数据
  event.dataTransfer.getData(key) 取得数据
十、绘图功能
  HTML5新增了<canvas>标签(画布的意思),同时提供了一组新的JavaScript api,相配合完成绘图功能
  绘制过程是由js代码控制,一般步骤为:
    1,获得canvas画布元素对象
    2,设置画笔颜色或者填充颜色
    3,绘制基本图形或者图片
    4,重复2和3步,最终回执成复杂的图形
    5,配合定时器使用,则可以绘制动画
十一、JavaScript绘图API
  var context = canvas.getContext("2d"); //获得绘图上下文(绘图功能的核心对象)
  context.strokeStyle = "颜色值"; //设置画笔颜色
  context.fillStyle = "颜色值"; //设置填充颜色
  context.fillRect(x, y , width , height); //绘制并填充矩形
  context.strokeRect(x, y , width , height); //绘制矩形
  context.clearRect(x, y , width , height); // 清除矩形区域内的图形
  //绘制图片
  var img = new Image(); //创建图片对象
  img.src="resource/1.png"; //设置图片的src,设置后即开始加载图片数据
  img.onload=function(){ //图片数据加载完成后才可以绘制此图片
    context.drawImage(img,230,10);
  }
  注意:对咱们后端开发人员来说,只需要了解一下绘图功能即可
十二、本地存储
  在HTML5之前,服务器可以通过cookie把少量数据存储到用户本地电脑上,存储上限每个网站大约是4KB
  HTML5为window对象新增了localStorage属性对象,存储字符串类型的键值对数据,
  如:localStorage.username="蛋蛋";localStorage.age="20";
  这些键值对数据会存储到用户本地电脑上,并且这些数据是网站独享的,各个网站之间的数据并不会相互影响,而且浏览器之间也是不共享的
  HTML5的本地存储大约可以存储5MB的数据,有些浏览器可以设置存储上限
上一篇文章      下一篇文章      查看所有文章
加:2017-08-20 23:21:36  更:2017-08-20 23:21:41 
 
  .NET新手区 最新文章
将ZIP文件添加到程序集资源文件然后在运行时
Web服务的调用
.NET创建WebService服务简单的例子
多线程编程学习笔记——任务并行库(三)
序列化和反序列化
Spring学习之路
多线程(2)Thread
五小步让VS Code支持AngularJS智能提示
Log4net入门(SQL篇)
C#十五子游戏
技术频道: 站长资讯 .NET新手区 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA Visual Studio ASP.NET MVC .NET控件开发 Entity Framework WinRT/Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动设计 Html/Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP Oracle ERP Dynamics CRM K2 BPM 信息安全 企业信息化其他 Android开发 iOS开发 Windows Phone Windows Mobile 其他手机开发 敏捷开发 项目与团队管理 软件工程其他 SQL Server Oracle MySQL NoSQL 其它数据库 Windows 7 Windows Server Linux
脚本语言: vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程
网站开发: CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 新闻资讯 小游戏 Chinese Culture 股票 三丰软件 开发 中国文化 网文精选 阅读网 看图 日历 万年历 2018年11日历
2018-11-20 2:21:38
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT知识库