编程知识 购物 网址 新闻 笑话 | 软件 日历 阅读 图书馆 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教程 经验交流
站长资讯 .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
   -> .NET新手区 -> 如鹏网学习笔记(十二)HTML5 -> 正文阅读

[.NET新手区]如鹏网学习笔记(十二)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的数据,有些浏览器可以设置存储上限
  .NET新手区 最新文章
将ZIP文件添加到程序集资源文件然后在运行时
Web服务的调用
.NET创建WebService服务简单的例子
多线程编程学习笔记——任务并行库(三)
序列化和反序列化
Spring学习之路
多线程(2)Thread
五小步让VS Code支持AngularJS智能提示
Log4net入门(SQL篇)
C#十五子游戏
上一篇文章      下一篇文章      查看所有文章
加:2017-08-20 23:21:36  更:2017-08-20 23:21:41 
 
360图书馆 软件开发资料 购物精选 新闻资讯 Chinese Culture 三丰软件 开发 中国文化 阅读网 日历 万年历 2019年12日历
2019-12-8 18:12:14
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  编程知识