type
status
date
slug
summary
tags
category
icon
password
本文出自《前端技术全方位深度进阶指南》系列教程-基础篇
超文本标记语言（英语：HyperTextMarkupLanguage，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。
一、HTML规范的前世今生
HTML标准 最初是由CERN（欧洲核子研究组织）的Tim Berners-Lee提出的。最初的HTML规范相对简单，只有少量标记可以用来定义文本的结构和格式。 随着Web的普及和互联网的发展，HTML规范逐渐得到了扩展和更新，新版本的规范不仅增加了更多的标记和属性，还引入了新的功能和特性，如表单控件、多媒体支持、动态效果等等。这些特性的引入和改进，推动了互联网的进一步发展和创新。
HTML5是HTML最新的修订版本：
- 2008年1月 HTML5 由W3C作为工作草案发布
- 2014年10月28日，HTML5作为稳定W3C推荐标准发布 ，这意味着HTML5的标准化已经完成
二、HTML5的新特性
HTML5是Web标准的最新版本，它引入了许多新的特性和改进，旨在为Web开发者提供更强大的工具和更好的用户体验。 下面是HTML5的一些新特性：
2.1 语义化标签与属性
新的语义化标签：HTML5引入了许多新的标签，如
<header>、<footer>、<nav>、<article>、<section>等，这些标签有助于开发者更好地描述页面内容，提高页面的可读性和可维护性。2.2 表单控件增强
表单控件增强：HTML5新增了一些表单控件，如
<input type="date">、<input type="color">、<input type="range"> 等，同时也提供了一些新的属性，如placeholder、required、pattern等，这些都有助于提升用户交互体验。2.3 媒体支持
媒体支持：HTML5支持多媒体的播放和操作，包括音频、视频等，同时还提供了一些新的API，如
<video>、<audio>等，这些API提供了丰富的操作接口，可以实现各种复杂的媒体应用。<video> 元素支持三种视频格式: MP4, WebM, 和 Ogg。 <audio> 元素支持三种音频格式: MP3, Wav, 和 Ogg。
2.4 Web Storage
Web Storage：HTML5引入了Web Storage API，包括 localStorage 和 sessionStorage 两种存储方式，这些存储方式可以用来存储客户端数据，避免了传统的cookie机制的一些缺陷。
- localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
- sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
2.5 Web Workers
Web Workers API 是 HTML5 的一个新特性，它可以在后台线程中运行 JavaScript 脚本，而不影响页面的主线程，从而提高了前端的性能和用户体验。在此基础上，我们可以实现一些比较复杂的功能，比如图像处理、音视频处理等。 以下是一个基于 Web Workers 的示例，用于计算斐波那契数列：
上面的代码中，我们首先创建了一个
worker 线程，并指定它的脚本文件为 worker.js。然后通过监听 worker.onmessage 事件，获取 worker 线程发送的计算结果。最后通过调用 worker.postMessage 方法向 worker 线程发送消息，以触发斐波那契数列的计算。worker.js 文件中，我们首先通过监听 onmessage 事件接收主线程发送的消息，然后进行斐波那契数列的计算，最后通过调用 postMessage 方法将计算结果发送回主线程。
2.6 Canvas和SVG
Canvas和SVG：HTML5引入了
<canvas>和<svg>两种绘图标记，使得Web开发者可以在网页上绘制图形和动画。 使用 arc() 方法 绘制一个圆:2.7 WebSocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。它使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。 在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。使得Web应用可以进行实时通信，如在线聊天等。
2.8 Geolocation（地理位置）
HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
2.9 Drag & Drop（拖放）
拖放（Drag 和 drop）是 HTML5 标准的组成部分。拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。 为了使元素可拖动，把 draggable 属性设置为 true
调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开） 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
三、总结
HTML5的新特性使得前端开发变得更加灵活和便捷，应用场景非常广泛。其中，语义化标签可以使得页面更加清晰易懂，提高可读性和可维护性；表单控件增强和媒体支持可以提升用户交互体验，让用户获得更好的使用体验；Web Storage可以用来存储客户端数据，解决传统cookie机制的一些缺陷；Web Workers可以提升JavaScript脚本的执行效率，提高网站性能等。
Loading...
