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. （6）《Head First HTML与CSS》学习笔记---结尾、《HTML5权威指南》读书笔记

    1.内联元素的外边距.内边距与块元素稍有不同. 如果一个内联元素四周都增加外边距,只能看到左边和右边会增加空间:你也可以对内联元素的上下增加内边距,不过这个内边距不会影响包围它的其他内联元素的间距—— ...

  4. HTML5权威指南 中文版 高清PDF扫描版​

    HTML5权威指南是一本系统学习网页设计的权威参考图书.<HTML5权威指南>分为五部分:第一部分介绍学习本书的预备知识和HTML.CSS和JavaScript的最新进展:第二部分讨论HT ...

  5. 《HTML5权威指南》

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

  6. html5权威指南：标记文字

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

  7. 【01】《html5权威指南》（扫描版）（全）

    [01]<html5权威指南>(扫描版)(全) []魔芋:无高清电子书.   只看第五部分,高级功能. 作者:(美)弗里曼 著,谢延晟,牛化成,刘美英 译 [美]adam freeman ...

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

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

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

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

随机推荐

  1. 《Web 前端面试指南》1、JavaScript 闭包深入浅出

    闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...

  2. MVVM框架从WPF移植到UWP遇到的问题和解决方法

    MVVM框架从WPF移植到UWP遇到的问题和解决方法 0x00 起因 这几天开始学习UWP了,之前有WPF经验,所以总体感觉还可以,看了一些基础概念和主题,写了几个测试程序,突然想起来了前一段时间在W ...

  3. 2.WindowsServer2012R2装完的一些友好化设置

    网站部署之~Windows Server | 本地部署 http://www.cnblogs.com/dunitian/p/4822808.html#iis 1.桌面图标(控制面板里面屏蔽了,得自己输 ...

  4. X86和X86_64和X64有什么区别？

    x86是指intel的开发的一种32位指令集,从386开始时代开始的,一直沿用至今,是一种cisc指令集,所有intel早期的cpu,amd早期的cpu都支持这种指令集,ntel官方文档里面称为&qu ...

  5. 一起学微软Power BI系列-使用技巧(1)连接Oracle与Mysql数据库

    说起Oracle数据库,以前没用过Oracle不知道,但是这1年用Oracle后,发现真的是想狂吐槽,特别是那个.NET驱动和链接字符串,特别奇葩.总归是和其他数据库不一样,标新立异,不知道为何.另外 ...

  6. .NET平台开源项目速览(18)C#平台JSON实体类生成器JSON C# Class Generator

    去年,我在一篇文章用原始方法解析复杂字符串,json一定要用JsonMapper么?中介绍了简单的JSON解析的问题,那种方法在当时的环境是非常方便的,因为不需要生成实体类,结构很容易解析.但随着业务 ...

  7. Android数据加密之SHA安全散列算法

    前言: 对于SHA安全散列算法,以前没怎么使用过,仅仅是停留在听说过的阶段,今天在看图片缓存框架Glide源码时发现其缓存的Key采用的不是MD5加密算法,而是SHA-256加密算法,这才勾起了我的好 ...

  8. jquery插件的用法之cookie 插件

    一．使用cookie 插件 插件官方网站下载地址:http://plugins.jquery.com/cookie/ cookie 插件的用法比较简单,直接粘贴下面代码示例: //生成一个cookie ...

  9. 【NLP】揭秘马尔可夫模型神秘面纱系列文章（一）

    初识马尔可夫和马尔可夫链 作者:白宁超 2016年7月10日20:34:20 摘要:最早接触马尔可夫模型的定义源于吴军先生<数学之美>一书,起初觉得深奥难懂且无什么用场.直到学习自然语言处 ...

  10. VS项目中使用Nuget还原包后编译生产还一直报错？

    Nuget官网下载Nuget项目包的命令地址:https://www.nuget.org/packages 今天就遇到一个比较奇葩的问题,折腾了很久终于搞定了: 问题是这样的:我的解决方案原本是好好的 ...