Html5新特性赘述

Scorezdj
351 阅读4分钟

html5不再支持ie8及ie8以下版本的IE浏览器。
新增特性：
语义标签 增强型表单 食品和音频 Canvas绘图 SVG绘图 地理定位 拖放API WebWorker WebStorage WebSocket

一、语义标签

标签 （部分）描述
header定义文档头部区域
footer定义文档尾部区域
nav定义文档的导航
section定义文档中的节
article定义文章
aside定义页面以外的内容
dialog定义对话框
main定义文章主内容
article定义文章
article定义文章

二、增强型表单

输入类型描述
color主要用于选取颜色
date选取日期
datetime选取日期(UTC时间)
datetime-local选取日期（无时区）
month选择一个月份
week选择周和年
time选择一个时间
email包含e-mail地址的输入域
number数值的输入域
urlurl地址的输入域
tel定义输入电话号码和字段
search用于搜索域
range一个范围内数字值的输入域

新增表单元素

progress进度条，展示连接/下载进度
meter刻度值，用于某些计量，例如温度、重量等
keygen提供一种验证用户的可靠方法生成一个公钥和私钥
output用于不同类型的输出比如尖酸或脚本输出
datalist用户会在他们输入数据时看到域定义选项的下拉列表

新增表单属性

属性描述
placehoder输入框默认提示文字
required要求输入的内容是否可为空
pattern描述一个正则表达式验证输入的值
min/max设置元素最小/最大值
step为输入域规定合法的数字间隔
height/wdith用于image类型input标签图像高度/宽度
autofocus规定在页面加载时，域自动获得焦点
multiple规定input元素中可选择多个值

三、音频和视频
audio 和 video

<audio controls>    //controls属性提供添加播放、暂停和音量控件。
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。        //浏览器不支持时显示文字
</audio>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

四、Canvas绘图
学习Canvas

五、SVG绘图

六、地理定位
使用getCurrentPosition()方法来获取用户的位置 这种方法适用于手机端

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script>

七、拖放API

拖动生命周期属性名描述
拖动开始ondragstart在拖动操作开始时执行脚本
拖动过程中ondrag只要脚本在被拖动就运行脚本
拖动过程中ondragenter当元素被拖动到一个合法的防止目标时，执行脚本
拖动过程中ondragover只要元素正在合法的防止目标上拖动时，就执行脚本
拖动过程中ondragleave当元素离开合法的防止目标时
拖动结束ondrop将被拖动元素放在目标元素内时运行脚本
拖动结束ondragend在拖动操作结束时运行脚本

八、web worker
Web Worker可以通过加载一个脚本文件，进而创建一个独立工作的线程，在主线程之外运行。

九、web Storage
WebStorage是HTML新增的本地存储解决方案之一，但并不是取代cookie而指定的标准，cookie作为HTTP协议的一部分用来处理客户端和服务器的通信是不可或缺的，session正式依赖与实现的客户端状态保持。WebSorage的意图在于解决本来不应该cookie做，却不得不用cookie的本地存储。
客户端存储数据有两个对象，其用法基本是一致:
localStorage：没有时间限制的数据存储

sessionStorage:在浏览器关闭的时候就会清除

十、websocket
WebSocket协议为web应用程序客户端和服务端之间提供了一种全双工通信机制。

特点：

  （1）握手阶段采用HTTP协议，默认端口是80和443

  （2）建立在TCP协议基础之上，和http协议同属于应用层

  （3）可以发送文本，也可以发送二进制数据。

  （4）没有同源限制，客户端可以与任意服务器通信。

  （5）协议标识符是ws（如果加密，为wss），如ws://localhost:8023

你是如何理解html语义化的？
用正确的标签做正确的事情，让内容更加结构化，便于搜索引擎解析，搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO优化；使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

avatar
文章
阅读
粉丝