1、页面结构上的一些宽松改变

<!DOCTYPE html>默认为标准模式

<meta charset="UTF-8">

2、html5中新增的一些语义化标签

<section></section>用于对网站或应用程序中页面上的内容进行分块。通常由内容及其标题组成。

<article></article>代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。当我们描述一件具体的事物的时候，通常使用article来代替section。如一个帖子，一段用户评论等。

<aside></aside>表示当前页面或者文章的附属信息部分。如与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组等。

<nav></nav>用作页面导航的链接组，其中可以包括<ul><li><p>元素等。

<time></time>表示某个时间或者某个日期。其中pubdate属性代表了文档的发布日期，可以用到time标签里。

<header></header>整个页面或者页面内容区块的标题，可以包含其他内容。

<footer></footer>页脚，页面底部或者版块的内容。

<hgroup></hgroup>页面上标题的组合，通常对h1~h6进行分组。

<address></address>文档作者或者文档维护者的联系信息。

<figure></figure>通常用于图片，统计图或代码示例，带有可选标题。将其从网页上移除后不会对网页上其他内容产生影响。

<figcaption></figcaption>表示figure的标题，从属于figure元素。

<mark></mark>页面中需要凸显出或者高亮显示的，对于当前用户具有参考作用的一段文字。

<progress></progress>代表一个任务完成的进度。

<details></details>描述文档或者用户要求得到并且可以得到的细节信息。与summary元素配合使用。

<summary></summary>给details元素提供标题或者图例。标题是可见的，用户点击标题时，会显示细节信息。

<datelist></datelist>选项列表。与input元素配合使用，来定义input可能的值。

<keygen></keygen>给表单添加一个公钥.

<menu></menu>菜单列表。HTML4中不推荐使用。

3、html5中新标签在ie6到ie8下的兼容性解决方法

在html头部加入html5.js来解决。

4、selectors API

新增选择器

querySelector()根据制定的选择规则，返回在页面中找到的第一个匹配元素。

querySelectorAll()根据指定规则返回页面中所有相匹配的元素。

getElementsByClassName()

注意：selectors API不仅仅只是方便，在遍历DOM的时候，Selectors API通常会比以前的子节点搜索API更快。同时浏览器也做了高效的搜索匹配。

5、Form新变化

•新增属性

　　form给每个表单制定一个ID，然后给该元素制定一个form属性，值为该表单的ID，可以声明该元素属于指定表单。

　　formaction在所有的提交按钮里设置提交地址，可以相同，也可以不同。

　　formmethod指定提交方法，post或者get.

　　placeholder输入框提示信息。

　　autofocus指定表单获取输入焦点。　　

　　List和datelist：为输入框构造一个选择列表，list值为datelist标签的id。

　　autocomplete:是否保存用户输入值，默认为on，关闭提示选择off。

　　required:检查元素的内容是否为空白。默认不许为空白，一般是必须填的。

　　pattern:对input中输入内容的正则验证，不符合时不允许提交。

•新的输入型控件（input）

　　url：输入网页的地址。

　　email：电子邮箱文本框，但是要求必须输入正确的的email文字格式。

　　tel:专门用于电话，在各浏览器外观和text相同。

　　search:用于搜索，比如站点搜索或者google搜索。

　　date:用于输入日期。

　　week:用来数日周号，会对输入的周号进行检查。

　　month:用来输入月份，会对输入的月份进行检查。

　　numbe:输入数字，会对输入的数字进行检查。

　　time:输入时间，会对输入的时间进行有效性检查。

　　datetime:输入UTC日期和时间，进行有效性检查。

　　date-local:输入本地日期和时间，进行有效性检查。

　　range:特定范围内的文本选择框，具有min和max属性，step(步数)。

　　　　　　用JS来显示当前数值。

　　color:用来选取颜色，它提供了颜色选择器。

•表单验证

　　隐式验证：max,min,step,pattern,required属性等。

　　显示验证：

　　　　1、checkValidity方法。

　　　　　　调用该方法可以显示地对表单内所有元素或单个内容进行有效性验证。以boolean的形式返回验证结果。

　　　　2、validity属性。

　　　　　　该属性返回一个ValidityState对象。该对象具有很多属性，最重要的有valid属性，它表示表单内所有元素是否有效或单个input元素内容是否有效。

•取消验证

　　1、form元素的novalidate属性——可以关闭表单验证（设置true和false之分）。

　　2、input或submit元素的formnovalidate属性。

　　　　对input使用该属性可以对单个input元素失效。

　　　　对submit按钮使用该属性相当于对整个form是用来novalidate属性，整个表单验证都失效了。

6、获取class列表属性

•classList

　　—length：class的长度

　　—add()：添加class的方法

　　—remove()：删除class的方法

　　—toggle()：切换class的方法

　　—contains():列表中是否存在给定的值，如果存在就返回”true”，否则返回”false”。

7、date自定义数据　

• Dateset

　　—data-name :  dataset.name

　　—data-name-first  :  dataset.nameFirst

　　 读取的时候也是通过dataset对象，使用”.”来获取属性，同样需要去掉data-前缀，连字符需要转化为驼峰命名。

data-*的浏览器兼容性情况十分不乐观

8、拖放API

　•实现拖放操作的步骤：

　　①将要拖放的对象元素的draggable属性设为true(draggable="true")。img元素和a元素（必须制定href）默认允许拖放。

　　②编写与拖放有关的事件代码。

• 拖拽元素事件 :  事件对象为被拖拽元素

—dragstart ,  拖拽前触发

—drag ,拖放过程中，连续触发

—dragend  , 拖拽结束触发

• 目标元素事件 :  事件对象为目标元素

—dragenter ,  进入目标元素触发，相当于mouseover

—dragover  ,进入目标、离开目标之间，连续触发

—dragleave ,  离开目标元素触发，相当于mouseout

—drop  ,  在目标元素上释放鼠标触发

• 事件的执行顺序 ：drop不触发的时候

—dragstart  >  drag >  dragenter >  dragover >  dragleave > dragend

• 事件的执行顺序 ：drop触发的时候(dragover或dragend的时候阻止默认事件)

—dragstart  >  drag >  dragenter >  dragover >  drop > dragend

　　不能释放的光标和能释放的光标不一样。

• dataTransfer对象

　　开始拖动时，要把拖动的数据存入DataTransfer对象。专门用来存放拖放时要存放的数据，它可以被设置为拖动事件对象的dataTransfer属性。　　

　　—setData() : 设置存放的数据, key和value(必须是字符串)。其中key代表数据种类：text/plain,text/html,text/xml,text/uri-list。

—getData() : 获取存放的数据，根据key值，获取对应的value。

　　• effectAllowed属性　　

　　　　—effectAllowed : 设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)，一般设置在dragstart事件中。

　　• setDragImage：自定义拖放图标

　　三个参数：指定的图片元素，坐标X，坐标Y。

9、文件API

　　•FileList对象

　　　　FileList对象表示用户选择的文件列表。

　　•Blob对象

　　　　一个原始数据对象，它提供了slice方法可以访问到字节内部的原始数据块。另外有两个属性：size（数据的大小），type（数据的MIME类型）。

　　　　注意：对于图像类型的文件，Blob对象的type属性都是以“image/”开头的，后跟图像类型，利用这个特性我们可以在JS中判断用户选择的文件是否为图像文件。

　　•file对象

　　　　继承自Blob对象指向一个具体的文件，它还有两个属性：name（文件名), lastModifiedDate（最后修改时间)。

　　•FileReader接口

　　　　用来读取文件里面的数据，提供三个常用的读取文件数据的方法。并提供了一个异步API，使用该API可以在浏览器主线程中异步访问文件系统。

　　　　三个方法：

　　　　——readAsText:将文件以文本方式读取，结果存储在result属性中。

　　　　——readAsBinaryString:将文件读取位二进制字符串，，通常我们将它传送到后端，后端可以通过这段字符串存储文件。

　　　　——readAsDataURL:将文件读取为一串Data URL字符串，该方法事实上是将小文件以一种特殊格式的URL地址形式直接读入页面。这里的小文件通常是指图像与html              等格式的文件。

10、Canvas API

•canvas元素是专门用来绘制图形的。只是一块无色的透明区域，需要利用JS编写在其中进行绘画的脚本。

•canvas绘制矩形时的步骤：

　　⑴取得canvas元素。

　　⑵取得上下文。用canvas对象的getContext方法来获得，该方法中的参数只能设置为2d。

　　⑶填充和绘制边框。

　　⑷设定绘图样式（style）。

　　　　fillStyle——在该属性中填入填充的颜色值。

　　　　strockStyle——在该属性中填入边框的属性值。

　　⑸指定线宽（图形边框的宽lineWidth属性）

　　⑹指定颜色值。

　　⑺绘制矩形。　

　　　　fillRect(x,y,width,height):默认颜色是黑色。

strokeRect(x,y,width,height):带边框的方块，默认1像素黑色边框。

•canvas绘制其它除了长方形或正方形之外的图形时：需要使用路径。

　　步骤如下：

　　　　⑴开始创建路径。

　　　　　　context.beginPath(),该方法不使用参数，在几次循环创建路径的过程中，每次开始创建时都要调用beginPath()。

　　　　⑵绘制圆形路径

　　　　　　context.arc(x,y,圆形半径，开始角度，结束角度，是否顺时针)。

　　　　⑶关闭路径

　　　　　　context.closePath(),此时就是路径创建完毕啦，但是还没真正开始绘制任何图。

　　　　⑷设置绘制样式，进行图形绘制。

　　　　　　context.fillStyle....

　　　　　　context.fill()。

html5相关知识点的总结（有一些错误或者不足的地方）的更多相关文章

  1. HTML5易漏知识点锦集

    本文通过对w3schoolHTML5基础教程,整理出比较常见的却又容易遗忘或者忽略的HTML5相关知识点.本文的标题顺序与w3school中的HTML5基础教程标题顺序保持一致.适合翻阅和复习. 1. ...

  2. HTML5实用知识点

    本文讲解HTML5实用知识点 新增的表单type Canvas使用 SVG使用 Audio使用 Video使用 网页缓存 文件缓存 后台worker Server-Sent Events 定位 拖放功 ...

  3. TCP/IP 相关知识点与面试题集

    第一部分:TCP/IP相关知识点 对TCP/IP的整体认 链路层知识点 IP层知识点 运输层知识点 应用层知识点 (这些知识点都可以参考:http://www.cnblogs.com/newwy/p/ ...

  4. 【Java基础】String 相关知识点总结

    String 相关知识点总结 字符串的不可变性 概述 String 被声明为 final,因此它不可继承 在 Java8 中,String 内部使用 char 数组存储数据 public final ...

  5. http及浏览器相关知识点归纳

    http是应用层协议,采用请求/响应模型 1.浏览器地址栏输入URL地址后发生了什么? 浏览器判断地址是否是合理的URL地址,是否是http协议请求,如果是则进入下一步 浏览器对此URL进行缓存检查: ...

  6. sql注入原理+mysql相关知识点

    什么是SQL注入 sql就是经常说的数据库,而sql注入就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令.SQL注入是比较常见的网络攻击 ...

  7. React其它相关知识点

    React其它相关知识点 一,解释一下React Fiber? 简单来说,核心就是在虚拟dom和浏览器的调用栈之间多了一个虚拟调用栈,和虚拟dom一样,这个虚拟调用栈也是在内存中的,这个虚拟调用栈就类 ...

  8. django学习-2.urls.py和view.py的相关知识点

    1.URL函数简单解析 1.1.url() 函数可以接收四个参数,分别是两个必选参数:regex.view,和两个可选参数:kwargs.name. def url(regex, view, kwar ...

  9. UITableView相关知识点

    //*****UITableView相关知识点*****// 1 #import "ViewController.h" // step1 要实现UITableViewDataSou ...

随机推荐

  1. C# Mvc中文件下载

    public ActionResult DownloadFile(string id) { var fileinfo = CommonAnnexService.Get(id); if (fileinf ...

  2. RAD Studio 2009-10Seattle IDE Fix Pack 5.94

    IDE Fix Pack 5.94 IDE Fix Pack is a collection of unofficial bug fixes and performance optimizations ...

  3. linq 的switch实现

    List<RemindSend> lrs = (from a in db.Remind join b in db.Certified on a.certifiedId equals b.C ...

  4. Note3 :《集体智慧编程》用户相似度计算

    欧几里德距离评价: 以经过人们一致评价的物品为坐标轴,然后将参与评价的人绘制到图上,并考察他们彼此之间的距离远近.计算出每一轴向上的差值,求平方之后再相加,最后对总和取平方根. # -*- codin ...

  5. 《C#本质论》读书笔记（16）构建自定义集合

    16.1 更多集合接口 集合类(这里指IEnumerable层次结构)实现的接口层次结构 16.1.1 IList<T>与IDictionary<TKey,TValue> 字典 ...

  6. Pyqt 国际化多语言支持

    国际化是指在代码设计上加入能方便的移植到其他国家和地区的特性, 给Pyqt 添加国际化支持需要五步 一.编写GUI.py 在要被翻译的text上用tr方法括起来 # -*- coding: utf-8 ...

  7. ajax传递array参数

    var ticketId = new Array(); for(var i = 0; i < checkboxes.length; i++) { ticketId.push(checkboxes ...

  8. NPOIExcel

    public class NPOIExcel { private string _title; private string _sheetName; private string _filePath; ...

  9. IC解密DS2431芯片解密DS2432、DS2433解密多少钱？

    IC解密DS2431芯片解密DS2432.DS2433解密多少钱? DS24系列可成功芯片解密的型号: DS2430A | DS2431 | DS2432 | DS2433 | DS2434 | DS ...

  10. WinServer 2008 远程桌面连接设置

    WinServer 2008 远程桌面连接设置   1.在服务器端启用远程桌面>>计算机--右键--管理 看远程桌面是否已经启用,若未启用则启用它.配置远程桌面,勾选允许任意版本远程桌面的 ...