html（1）— html与html5的区别，及html5的新特性

小白程序员哈哈哈
326 阅读5分钟

什么是HTML？

  • 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

什么是HTML5？

  • HTML 的最新稳定版本, HTML5 将 HTML 从用于构造一个文档的一个简单标记，到一个完整的应用程序开发平台。除其他功能外, HTML5 还包括新元素和用于增强存储、多媒体和硬件访问的JavaScript APIs 。（MDN定义）
  • HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。HTML5的设计目的是为了在移动设备上支持多媒体。HTML5 简单易学。（菜鸟教程定义）
  • HTML5是HTML的第五个版本（不考虑小版本的修改），是对HTML标准的第五次修订。（个人理解）

HTML与HTML5的区别，及HTML5的新特性

1. 文档声明的区别

  • HTML文档的类型声明结构：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • HTML5文档的类型声明结构：
<!DOCTYPE html>
  • HTML5文档的类型声明更简洁

2. 结构化语义的标签

  • html5添加了许多具有语义化的标签：
<footer>、<header>、<article>、<aside>、<audio>、<nav>等
  • HTML5相对于HTML，增加/修改、删除了一些元素

3. 绘图标签canvas，以及矢量图svg

  • html5新增的<canvas>标签，可以使用JavaScript的绘图API，在网页上绘制图像，可以控制画布每一个像素。
  • html5支持内联svg（可伸缩矢量图形）,可以直接将svg元素嵌入到html页面中（使用<svg>标签）

4. 音视频的支持

  • html如果不适用flash播放器，就不支持音视频。
  • html5使用新增的<audio>和<video>标签，支持音视频控制。

5. 语法的处理

  • HTML无法处理不准确的语法
  • HTML5能够处理不准确的语法

6. 增强型表单

  • HTML5拥有多个新的表单Input输入类型，这些新特性提供了更好的输入控制和验证。 | 输入类型（type) | 描述（自带校验） | | -------------- | ------------------------------ | | color | 主要用于选取颜色 | | date | 从一个日期选择器选择一个日期 | | datetime-local | 选择一个日期和时间（无时区） | | email | 用于应该包含e-mail地址的输入域 | | month | 用于选择某一年的月份 | | week | 用于选择某一年的第几周 | | number | 输入的类型为数字 | | range | 范围控件，值为数字（类似于滑杆） | | search | 用于搜索字符串的单行文字区域（换行被自动去除）| | tel | 用于输入电话号码 | | time | 用于输入时间的控件，不包括时区 | | url | 用于输入url |
注：MDN上显示，datetime类型已废除（之前也是HTML5新加的input类型）

  • HTML5新增的表单属性 | 表单属性 | 描述 | | ------------- | ----------------------------------- | | placehoder | 输入框默认显示（提示）的文字 | | required | 规定输入框的内容是否为必填 | | pattern | 定义一个正则表达式，元素的值将据此进行验证 | | min/max | 设置元素最小/最大值 | | step | 设置输入的步长 | | height/width | 当input标签type为image时，设置图片宽高 | | autofocus | 自动获取焦点 | | multiple | 规定是否可以选择多个值 | | autocomplete | 规定输入字段石是否启用自动完成功能 | | novalidate | 规定提交表单时不需要进行验证 | | form | 在form表单之外，也可以使该输入绑定到form上 | | formaction
    formmethod
    formenctype
    formnovalidate
    formtarget | 分别用来重写表单的action、enctype、method、novalidate、target属性 | | list | 与指定<dalalist>标签进行绑定 |

  • 新增的表单元素 | 表单元素 | 描述 | | ------------- | --------------------------------- | | <datalist> | 规定了<input>元素可能的选项列表
    其中包含了一组<option>元素，这些元素表示其他表单控件可选值 | | <progress> | 进度条，用来展示下载或人物的完成进度 | | <meter> | 用来显示已知范围的标量值或分数值
    展示形式类似于进度条 | | <output> | 用来表示计算或用户操作的结果 |

注：MDN上显示，\已废除（之前也是HTML5新加的表单元素）

7. 地理位置API

  • HTML5 Geolocation API 用于获得用户的地理位置
  • 通过 geolocation 对象上的 getCurrentPostion 来获取当前地理位置，可返回用户位置的经度和纬度。
navigator.geolocation.getCurrentPosition(showPositon);

function showPositon(position) {
    console.log("经度：", position.coords.longitude);
    console.log("纬度：", position.coords.latitude);
    // 打印当前经纬度
}

8. 拖放API

9. web Workers

  • web worker 是运行在后台的JavaScript，不会影响页面的性能
  • web worker 独立于其他脚本（类似于开辟了一个新的线程）。用户可以继续进行其他操作。
  • 这样做的优点是可以在独立线程中执行费时的处理任务，从而允许主线程不会因此被阻塞/放慢。
var w;

// 启动web worker
function startWorker() {
    w = new Worker("demo_workers.js") // 运行外部脚本文件
    w.onmessage = function(event) {
        console.log(event.data) // 打印运行结果
    }
}

// 停止web worker
function stopWorker() {
    w.terminate()
    w = undefined;
}
  • Web Workers 和 DOM的区别
    • 由于web worker 位于外部文件中，它无法访问下列js对象
      • window 对象
      • document 对象
      • parent 对象

10. web storage

  • web storage 使浏览器能以一种使用Cookie更直观的方式存储键值对
  • web storage 包含如下两种机制：
    • sessionStorage 用于临时保存某一浏览器窗口中的数据，浏览器窗口关闭之后会删除这些数据
    • localStorage 用于长时间保存某个网站的数据，保存的数据没有时间限制
  • web storage 与 cookie的区别
    • cookie 在每次请求时，都会存放在请求头中，会在浏览器和服务器之间来回传递
    • 请求被拦截时，cookie数据会存在安全感隐患
    • cookie的大小被限制为4K，而web storage 的大小可达5M

11. WebSocket

  • WebSocket 是 HTML5 提供的一种单个TCP连接上进行全双工通讯的协议
avatar
文章
阅读
粉丝