1.标签元素更加语义化
 
2.内容类型仍然为“text/html”
   扩展符仍然为html或者htm.
   <1>DOCTYPE 声明<!DOCTYPE html>就可以。不需要使用版本声明。
   <2>制定字符编码<meta charset="UTF-8">,不需要使用HTML4中的<meta http-equiv="Content-type" content="text/html;charset=UTF-8">。
 
3.省略引号
HTML5中,当属性值不包括空字符串,<,>,=,单引号,双引号等字符时,属性值两边的引号可以省略。
如:
<input type=text>
 
4.新增的全局属性
<1>contentEditable:主要功能是允许用户编辑元素中的内容。该属性是一个布尔值属性,可以被指定为TRUE或FALSE。
例子:
<ul contenteditable="true">
<li>asdasdas</li>
<li>asdasdas</li>
<li>asdasdas</li>
<li>asdasdas</li>
</ul>
 
<2>designMode:用来指定整个页面是否可编辑,当页面可编辑时,页面中任何支持上下文所述的contenteditable属性的元素都变成了可编辑状态。该属性有两个值;on与off.并且该属性只能在脚本中进行编辑修改。
如:
document.designMode="on";
 
<3>spellcheck:功能为对用户输入的文本内容进行拼写和语法检查。这个属性是一个布尔值。
 
<4>tabindex:当不断敲击Tab键让窗口或页面中的空间获得焦点。对窗口会哦页面中的所有控件进行便利的时候,每一个控件的tabindex表示该控件是第几个被访问到到的。
 
4.有变化的元素
a:新增的结构元素
  section,article,aside,header,hgroup,footer,nav,figure
b:其他元素
  video,audio,embed,mark,progress,time,ruby,rt,rp,wbr
c.新增的功能
  canvas,command,details,datakist,datagrid,keygen,output,source,menu
d:新增的input元素的类型
  email,url,number,range,Date Pickers
 
 
5.很多浏览器对HTML5的支持上不完全。
/*追加block声明*/
article,aside,dialog,figure,footer,header,legend,nav,section{
    display:block
}
 
6.新增属性
a:form
    在HTML5中,可以把它们书写在页面上任何地方,然后给该元素指定一个属性,属性值为该表单的id。
如:
<form id="do">
    <input type="text">
</form>
<textarea form="do"></textarea >
 
b:formaction
可以给所有的提交按钮增加该属性。使得点击不同的按钮,可以将表单提交到
不同的页面。
 
c:formmethod
可以对面哥表单元素分别指定不同的提交方法:post,get
 
d:placeholder
指的是当文本框处于未输入的状态时显示的输入提示
 
e:autofocus
当页面打开的时候,加上该属性的文本框等控件自动获得光标焦点。一个页面上只能有一个控件具有该属性。
 
f:list
 
g:autocomplete
辅助输入的自动完成功能
 
 
7.变化较大的input种类
  url,email,date,time,datetime,datetime-local,month,week,number,range,search,tel,color
 
 
8.元素内容输入校验
<1>required:如果元素内容为空白,则不允许提交,同时在浏览器中显示信息提示文字,提示用户这个元素中必须输入内容。
<2>pattern:将属性值设为某个格式的正则表达式,检查输入内容的格式。
<3>min与max:这两个属性是数值类型与日期类型的input元素的专用属性,限制了在input元素中输入的数值与日期范围。
<4>step:控制input元素中的值增加或减少时的步幅。
 
9.改良的ol列表
添加了start与reversed属性star属性可以自定义编号的初始值。reversed属性对列表进行反向排序。
 
10.改良的dl列表
如:
<dl>
    <dt>RSS</dt>
    <dd>RSS也叫聚合RSS是在线共享内容的一种简易方式...</dd>
    <dt>博客</dt>
    <dd>博客又名网络日志...</dd>
</dl>
 
11.文件API
HTML5中提供了一个关于文件操作的文件API。
<1>FileList对象和file对象
如:
 
<2>Blob对象
Blob表示二进制原始数据,上面的file对象也继承了这个Blob对象。
Blob对象有两个属性,size属性表示一个Blob对象的字节长度。
type属性表示Blob的MIME类型,如果是未知类型,则返回一个空字符串。
如:
function shw(){
 var file;
 var a=document.getElementById('file').files;
 console.log(a[0].name);
}
 
 
<3>FileReader接口
该接口主要用来把文件读入内存,并且读取文件中的数据。FileReader接口提供了一个异步API。
使用该API可以再浏览器主线程中异步访问文件系统,读取文件中的数据。
a:该接口的下面三个方法:
 
b:该接口的事件:
html:
<input type="file" id="file"/>
<input type="button"  value="读取图像" onclick="re()"/>
<input type="button"  value="读取二进制数据" onclick="er()"/>
<input type="button"  value="读取文件文件" onclick="dq()"/>

<div name="result" id="result">
</div>
 
js:
function re(){

 var file=document.getElementById("file").files[0];
 var reader=new FileReader();
 //将文件以文本Data URL形式读入页面
 reader.readAsDataURL(file);
 reader.onload=function(e){

  var result=document.getElementById("result");
  result.innerHTML='<img  src="'+this.result+'" alt=""/>';
  //alert(file.name);
 }
}

function er(){

 var file=document.getElementById("file").files[0];
 var reader=new FileReader();
 //将文件以二进制形式读入页面
 reader.readAsBinaryString(file);
 reader.onload=function(e){

  var result=document.getElementById("result");
  result.innerHTML=this.result;
  //alert(file.name);
 }
}

function dq(){
 var file=document.getElementById("file").files[0];
 var reader=new FileReader();
 //将文件以文本形式读入页面
 reader.readAsText(file);
 reader.onload=function(e){

  var result=document.getElementById("result");
  result.innerHTML=this.result;
  //alert(file.name);
 }
}
 
12.拖放API
<1>拖放事件:
如:
html:
<div id="dragme" draggable="true" style="width;200px;border:1px solid red">被拖放DIV</div>
<div id="text" draggable="true" style="width;200px;border:1px solid red">放入的DIV</div>
 
js:
function init(){
 var source=document.getElementById("dragme");
 var dest=document.getElementById("text");
 source.addEventListener("dragstart",function(ev){
  var dt=ev.dataTransfer;
  dt.effectAllowed='all';

  dt.setData("text/plain","你好");
 },false);

 dest.addEventListener("dragend",function(ev){
  ev.preventDefault();
 },false);

 dest.addEventListener("drop",function(ev){
  var dt=ev.dataTransfer;
  var text=dt.getData("text/plain");
  dest.textContent+=text;
  ev.preventDefault();
  ev.stopPropagation();
 },false);

}

document.ondragover=function(e){e.preventDefault();}
document.ondrop=function(e){e.preventDefault();}
 
具体分析:
 
<2>DataTransfer对象的属性与方法
<3>设定拖放时的视觉效果
 
 

HTML5权威指南--标签新变化,文件API,拖放API(简要学习笔记一)的更多相关文章

  1. HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)

    1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息.   但是c ...

  2. JavaScript权威设计--JavaScript变量,作用域,声明提前(简要学习笔记四)

    1.宿主对象与宿主环境 宿主对象:由ECMAScript实现的宿主环境提供的对象,可以理解为:浏览器提供的对象.所有的BOM和DOM都是宿主对象.   宿主环境:一般宿主环境由外壳程序创建与维护,只要 ...

  3. 《HTML5权威指南》

    <HTML5权威指南> HTML元素: html字符实体 html全局属性 html base标签 用元数据元素说明文档 标记文字(第八章) 标记文字.组织内容.文档分节 表格元素 表单元 ...

  4. html5权威指南:标记文字

    html5权威指南-第八章-用基本的文字元素标记内容 :http://www.cnblogs.com/yc-755909659/archive/2016/10/02/5928122.html html ...

  5. JavaScript权威设计--JavaScript函数(简要学习笔记十一)

    1.函数调用的四种方式 第三种:构造函数调用 如果构造函数调用在圆括号内包含一组实参列表,先计算这些实参表达式,然后传入函数内.这和函数调用和方法调用是一致的.但如果构造函数没有形参,JavaScri ...

  6. JavaScript权威设计--JavaScript函数(简要学习笔记十)

    1.函数命名规范 函数命名通常以动词为前缀的词组.通常第一个字符小写.当包含多个单词时,一种约定是将单词以下划线分割,就像"like_Zqz()". 还有一种就是"lik ...

  7. html5权威指南:表单元素

    一.表单标签: 表单标签:http://blog.csdn.net/mylovestart/article/details/8589002 html5新增表单元素: 1.datalist:http:/ ...

  8. html5权威指南:html base标签

    html base标签:http://www.cnblogs.com/yuepeng/archive/2010/08/30/1812498.html

  9. html5权威指南:用元数据元素说明文档

    用元数据元素说明文档: html meta标签使用总结:http://www.cnblogs.com/lovesong/p/5745893.html html中meta标签使用介绍:http://ww ...

随机推荐

  1. 浅谈Java的匿名类

    在实际的项目中看到一个很奇怪的现象,Java可以直接new一个接口,然后在new里面粗暴的加入实现代码.就像下面这样.那么问题来了,new出来的对象没有实际的类作为载体,这不是很奇怪吗? 思考以下代码 ...

  2. iOS - PackIpa App 打包

    前言 打包 ipa 的前提 证书的申请和设置和 "App 上架" 文章的一样 从第一步到第四步都是一样的.还有第六步的 1-3 都是一样的,从第四步开始变化. 1.Archive ...

  3. C#基础总结

    1.执行.NET应用程序时经历的几个步骤 用C#编写应用程序代码 把应用程序代码编译为中间语言代码(MSIL),存储在程序集中 使用JIT编译器将MSIL编译为本机代码 在托管的公共语言运行库(CLR ...

  4. Python2.6下基于rsa的加密解密

    生成公钥的私钥: # -*- coding: UTF-8 -*- import rsa import base64 (public_key, private_key) = rsa.newkeys(10 ...

  5. WPF控件

    1:内容控件(Content Controls)2:条目控件(Items Controls)3:文本控件(Text Controls)4:范围控件(Range Controls) 一:内容控件 内容控 ...

  6. SQL Server 2016将内置R语言?

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:随着大数据成为一个BuzzWord,和大数据相关的技术也变得越来越火热,其中就包括R语 ...

  7. pc, 手机全屏

    全屏 1  div{ position:absolute/relative/fixed; top:0; bottom:0; left:0; right:0;} 2 <!doctype html& ...

  8. 《精通移动app测试实战:技术、工具和案例》新书上市

    本书是测试专家.性能测试专家.专业畅销书作者--于涌,多年实战经验的总结,涵盖主流的测试工具,包括众多的测试实例,涵盖单元测试.功能测试.性能测试.UI测试.手游测试.自动化测试.测试用例管理.持续集 ...

  9. spring boot实战(第十二篇)整合RabbitMQ

    前言 最近几篇文章将围绕消息中间件RabbitMQ展开,对于RabbitMQ基本概念这里不阐述,主要讲解RabbitMQ的基本用法.Java客户端API介绍.spring Boot与RabbitMQ整 ...

  10. window.open被浏览器拦截的解决方案

    现象 最近在做项目的时候碰到了使用window.open被浏览器拦截的情况,搞得人无比郁闷啊,虽然在自己的环境可以对页面进行放行,但是对用户来说,不能要求用户都来通过拦截.何况当出现拦截时,很多小白根 ...