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. JavaScript高级程序设计学习笔记--表单脚本

    提交表单 用户单击提交按钮或图像按钮时,就会提交表单.使用<input>和<button>都可以定义提交按钮,只要将其type特性的值设置为"submit" ...

  2. SQL查询第m条到第n条的方法

    SQL查询第m条到第n条的方法 如表名为GOOD Sselect top (n-m) * from GOODS where (某一列名) not in (select top m (某一列名) fro ...

  3. ios升级<注:来着微信平台>

    <来着微信平台>  http://mp.weixin.qq.com/s?__biz=MjM5NTIyNTUyMQ==&mid=2709545194&idx=1&sn ...

  4. C# 显示问题

  5. 牛B的调试工具：OzCode

      官网:http://www.oz-code.com/ 视频:https://channel9.msdn.com/Shows/Visual-Studio-Toolbox/OzCode https:/ ...

  6. JavaOO面向对象中的注意点（二）

    1.封装: 封装主要体现在:组装类 和 信息隐藏. a.信息隐藏:①访问修饰符:private ②方法的实现:get/set方法.run()方法-控制流程 b.组装类: ①类的定义:属性.构造.行为( ...

  7. Kindle支持哪些格式

    官方产品介绍页面有相关技术参数: Kindle Format 8 (AZW3), Kindle (AZW), TXT,PDF, MOBI, PRC原格式,HTML,DOC,DOCX,JPEG,GIF, ...

  8. iOS 单例模式范例

    The singleton pattern is useful for creating objects that are shared across the entire application, ...

  9. POJ 1637 Sightseeing tour(混合图的欧拉回路）

    题目链接 建个图,套个模板. #include <cstdio> #include <cstring> #include <iostream> #include & ...

  10. 【BFS】POJ 3278

    POJ 3278 Catch That Cow 题目:你要去抓一头牛,给出你所在的坐标和牛所在的坐标,移动方式有两种:要么前一步或者后一步,要么移动到现在所在坐标的两倍,两种方式都要花费一分钟,问你最 ...