HTML5详解与发展历程-CSDN博客

本文链接：https://blog.csdn.net/qq_36213140/article/details/121068703

本文介绍了HTML5的基础知识，包括HTML的定义、网页构成、本质以及HTML5的定义和发展历史。HTML5作为HTML的第五个版本，提供了更丰富的用户体验和开发功能，如header、footer、video、audio、canvas等，支持拖拽、触摸事件、本地存储等。HTML5项目通常指移动端网页项目，其发展历经多年，已经成为构建Web内容的核心技术之一。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、HTML简介

HTML英文全称： Hyper Text Markup Language 中文全称：超文本标记语言 HTML 是制作网页最基本的语言用该语言编写的文件，以.html或者.htm为后缀由浏览器解释执行 HTML的基本规则就是用“标记语言” ---- 成对尖括号组成的标签元素来描述网页内容如何在浏览器中显示。

二、网页的构成

三、网页的本质

1.用户眼中的网页

2.程序员眼中的网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>泽哥</title>
</head>
<body>
    <h1>京东商城</h1>
    <img src="images/logo.jpg" alt="请检查logo图片路径">
    <a href="https://www.jd.com">京东首页</a>
</body>
</html>

四、什么是HTML5？

h5是html5的简称
html5是html的第5个版本，2014年W3C （万维网联盟[是Web技术领域最具权威和影响力的国际中立性技术标准机构] 宣布HTML5正式定稿。致力于web applications的开发与移动端设备的交互
html5是一个标准，也是一套解决方案，这套解决方案可以利用html+css+js实现更高级的用户体验和开发体验(h5)，如
- heade、footer、video、audio、canvas......
- header:first-child{ }、input[id='btn']
- 拖拽
- 手指触摸事件
- 本地存储
- 离线存储
- 网络状态
- 语音识别
- 音频图
- 陀螺仪
- 摄像头
- websocket通信
- ......
H5(遵守H5标准开发的项目)可以运行在Windows、Mac、iPhone、iPad、Andriod等平台设备上
通常H5项目，是指移动端网页项目

五、H5的发展史

HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。
HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。
HTML5 是 HyperText Markup Language 5 的缩写，HTML5 技术结合了 HTML4.01 的相关标准并革新，符合现代网络发展要求，在 2008 年正式发布。HTML5 由不同的技术构成，其在互联网中得到了非常广泛的应用，提供更多增强网络应用的标准机。与传统的技术相比，HTML5 的语法特征更加明显，并且结合了 SVG 的内容。这些内容在网页中使用可以更加便捷地处理多媒体内容，而且 HTML5中还结合了其他元素，对原有的功能进行调整和修改，进行标准化工作。HTML5 在 2012 年已形成了稳定的版本。 [3]
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。 [4]
在前五年（1990-1995），HTML经历了多次修订并经历了许多扩展，主要是在欧洲核子研究中心首先托管，然后是IETF。 [2]
随着W3C的创建，HTML的发展再次改变了场地。 1995年第一次尝试在HTML 3.0中扩展HTML，然后在1997年完成了一种称为HTML 3.2的更实用的方法。同一年晚些时候，HTML 4.01很快就出现了。
第二年，W3C成员决定停止发展HTML，而是开始研究基于XML的等价物，称为XHTML。这项工作始于XML中的HTML 4.01重新编写，称为XHTML 1.0，除了新的序列化之外没有添加任何新功能，并且在2000年完成。在XHTML 1.0之后，W3C的重点转向使其他工作组更容易在XHTML模块化的旗帜下扩展XHTML。与此同时，W3C还开发了一种与早期HTML和XHTML语言不兼容的新语言，称之为XHTML 2.0。
大约在1998年停止HTML演变的时候，浏览器供应商开发的HTML部分API被命名并以DOM Level 1（1998年）和DOM Level 2 Core和DOM Level 2 HTML（从2000年开始）发布。最终于2003年）。这些努力随后逐渐消失，2004年发布了一些DOM Level 3规范，但工作组在所有3级草案完成之前就已关闭。
2003年，作为下一代Web表单定位的技术XForms的出版引发了对HTML本身发展的新兴趣，而不是寻找它的替代品。这种兴趣来自于认识到XML作为Web技术的部署仅限于全新技术（如RSS和后来的Atom），而不是替代现有的已部署技术（如HTML）。
一个概念证明，可以扩展HTML 4.01的表单，提供XForms 1.0引入的许多功能，而不需要浏览器实现与现有HTML网页不兼容的渲染引擎，这是第一个结果。重新兴趣。在早期阶段，虽然草案已经公开发布，并且已经从所有来源征求意见，但该规范仅受Opera Software的版权保护。
在2004年的W3C研讨会上测试了HTML应该重新开放的想法，其中提出了HTML工作的一些原则（如下所述），以及上述早期草案提案，仅涉及与表单相关的功能，由Mozilla和Opera联合推出的W3C。该提案被驳回，理由是该提案与之前选择的网络发展方向相冲突； W3C的工作人员和成员投票决定继续开发基于XML的替代品。
此后不久，Apple，Mozilla和Opera联合宣布他们打算在一个名为WHATWG的新场地的保护下继续努力。创建了一个公共邮件列表，草案已移至WHATWG站点。随后将版权修改为由所有三个供应商共同拥有，并允许重复使用该规范。
WHATWG基于几个核心原则，特别是技术需要向后兼容，规范和实现需要匹配，即使这意味着更改规范而不是实现，并且规范需要足够详细，实现可以实现完整的互操作性，无需相互逆向工程。后一要求特别要求HTML规范的范围包括先前在三个单独的文档中指定的内容：HTML 4.01，XHTML 1.1和DOM Level 2 HTML。它还意味着包含比以前被认为是标准更多的细节。
2006年，W3C表示有兴趣参与HTML 5.0的开发，并于2007年组建了一个工作组，专门与WHATWG合作开发HTML规范。 Apple，Mozilla和Opera允许W3C在W3C版权下发布规范，同时保留WHATWG网站上限制较少的许可版本。多年来，两个小组在同一编辑下共同工作：Ian Hickson。在2011年，小组得出的结论是，他们有不同的目标：W3C希望为HTML 5.0推荐的功能划清界限，而WHATWG希望继续致力于HTML的生活标准，不断维护规范和添加新功能。 2012年中期，W3C推出了一个新的编辑团队，负责创建HTML 5.0推荐标准，并为下一个HTML版本准备工作草案。
HTML5将Web带入一个成熟的应用平台，在这个平台上，视频、音频、图像、动画以及与设备的交互都进行了规范。
表单是实现用户与页面后台交互主要组成部分，HTML5在表单的设计上功能更加强大。input类型和属性的多样性大大地增强了HTML可表达的表单形式，再加上新增加的一些表单标签，使得原本需要JavaScript来实现的控件，可以直接使用HTML5的表单来实现；一些如内容提示、焦点处理、数据验证等功能，也可以通过HTML5的智能表单属性标签来完成。
HTML5的canvas元素可以实现画布功能，该元素通过自带的API结合使用JavaScript脚本语言在网页上绘制图形和处理，拥有实现绘制线条、弧线以及矩形，用样式和颜色填充区域，书写样式化文本，以及添加图像的方法，且使用JavaScript可以控制其每一个像素。HTML5的canvas元素使得浏览器无需Flash或Silverlight等插件就能直接显示图形或动画图像。 [6]
多媒体
HTML5最大特色之一就是支持音频视频，在通过增加了<audio>、<video>两个标签来实现对多媒体中的音频、视频使用的支持，只要在Web网页中嵌入这两个标签，而无需第三方插件（如Flash）就可以实现音视频的播放功能。HTML5对音频、视频文件的支持使得浏览器摆脱了对插件的依赖，加快了页面的加载速度，扩展了互联网多媒体技术的发展空间。 [6]
地理定位
现今移动网络备受青睐，用户对实时定位的应用越来，要求也越来越高。HTML5通过引入Geolocation的API可以通过GPS或网络信息实现用户的定位功能，定位更加准确、灵活。通过HTML5进行定位，除了可以定位自己的位置，还可以在他人对你开放信息的情况下获得他人的定位信息。 [6]
数据存储
HTML5较之传统的数据存储有自已的存储方式，允许在客户端实现较大规模的数据存储。为了满足不同的需求，HTML5支持DOM Storage和Web SQL Database 两种存储机制。其中，DOM Storage 适用于具有key/value对的基本本地存储；而WebSQLDatabase是适用于关系型数据库的存储方式，开发者可以使用SQL语法对这些数据进行查询、插入等操作。 [6]
多线程
HTML5利用Web Worker将Web应用程序从原来的单线程业界中解放出来，通过创建一个Web Worker对象就可以实现多线程操作。JavaScript创建的Web程序处理事务都是在单线程中执行，响应时间较长，而当JavaScript过于复杂时，还有可能出现死锁的局面。HTML5新增加了一个WebWorkerAPI，用户可以创建多个在后台的线程，将耗费较长时间的处理交给后台面不影响用户界面和响应速度，这些处理不会因用户交互而运行中断。使用后台线程不能访问页面和窗口对象，但后台线程可以和页面之间进行数据交互。子线程与子线程之间的数据交互，大致步骤如下：①先创建发送数据的子线程；②执行子线程任务，把要传递的数据发送给主线程；③在主线程接受到子线程传递回的消息时创建接收数据的子线程，然后把发送数据的子线程中返回的消息传递给接收数据的子线程；④执行接收数据子线程中的代码。 [6]
新元素编辑语音
自1999年以后HTML 4.01 已经改变了很多，今天，在HTML 4.01中的几个已经被废弃，这些元素在HTML5中已经被删除或重新定义。 [2]
为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如：图形的绘制，多媒体内容，更好的页面结构，更好的形式处理，和几个api拖放元素，定位，包括网页应用程序缓存，存储，网络工作者，等。 [2]
canvas
优点
新一代网络标准能够让程序通过Web浏览器，消费者从而能够从包括个人电脑、笔记本电脑、智能手机或平板电脑在内的任意终端访问相同的程序和基于云端的信息。HTML5允许程序通过Web浏览器运行，并且将视频等目前需要插件和其它平台才能使用的多媒体内容也纳入其中，这将使浏览器成为一种通用的平台，用户通过浏览器就能完成任务。此外，消费者还可以访问以远程方式存储在“云”中的各种内容，不受位置和设备的限制。 [7] 由于HTML5技术中存在较为先进的本地存储技术，所以其能做到降低应用程序的响应时间为用户带来更便捷的体验。 [1]
缺点
（1）开放性带来的困扰
在从前网络平台上存在大量的专利产品，想要实现HTML5技术的大量应用首先就需要将这些专利性的产品变为开放式的产品，由于各种原因，当前面对这一问题还存在许多争议。以视频格式为例，两大阵营对于视频格式的设置存在争议，一大阵营以苹果为代表，另一大阵营则以Opera、火狐、谷歌为代表。WPEG阵营是苹果所属阵营，由于其自身全部使用的是这一种格式，所以坚持认为应当将此格式作为标准，而WebM阵营则认为由于WPEG格式的专利依然没有解除，对于HTML5技术要求的开放性没有达标，所以不同意将其作为标准格式。 [1]
（2）发展的速度有待提升
在HTML5中提出了一些从前HTML技术中不具有的新技术，但是有许多主流浏览器在长时间的发展过程中已经完成了此种技术的开发，在自身浏览器中实现了此种功能，就这一情况来说HTML5的发展速度方面存在一定的问题。同时由于HTML5的不成熟，当前关于HTML5的相关技术标准还没有完全确定，所以在短时间想要将其投入大规模应用还比较困难。 [1]
（3）技术手段的不完善
HTML 5标签拥有属性。在每个标签的参考页中可以找到相应的特殊属性。这里列出的属性是通用于每个标签的核心属性和语言属性（有个别例外）。
HTML 5标签中的新属性有：contenteditable， contextmenu， draggable， irrelevant， ref，registrationmark， template
HTML 5 中不再支持的属性：accesskey
事件属性
HTML 5 元素可拥有事件属性，这些属性在浏览器中触发行为，比如当用户单击一个HTML 5元素时启动一段 JavaScript。下面列出的事件属性，可以把它们插入 HTML 标签来定义事件行为。
HTML 5 中的新事件属性：onabort， onbeforeunload， oncontextmenu， ondrag， ondragend， ondragenter， ondragleave， ondragover， ondragstart， ondrop， onerror， onmessage， onmousewheel， onresize， onscroll， onunload。
HTML 5不再支持的 HTML 4.01 属性：onreset。
异常处理
HTML 5（text/html）浏览器将在错误语法的处理上更加灵活。HTML 5在设计时保证旧的浏览器能够安全的忽略掉新的HTML 5代码。与HTML 4.01相比，HTML 5给出了解析的详细规则，力图让不同的浏览器即使在发生语法错误时也能返回相同的结果。
发展趋势编辑语音
随着计算机技术不断发展，可以看到HTML5在未来的几年内的发展将会是一个井喷式的增长。HTML5技术在未来几年内发展将会以以下几个形式表现： [8]
1）HTML5技术的移动端方向。HTML5技术在未来主要发展的市场还是在移动端互联网领域，现阶段移动浏览器有应用体验不佳、网页标准不统一的劣势，这两个方面是移动端网页发展的障碍，而HTML5技术能够解决这两个问题，并且将劣势转化为优势，整体推动整个移动端网页方面的发展； [8]
2）Web内核标准提升。目前移动端网页内核大多采用Web内核，相信在未来几年内随着智能端逐渐普及，HTML5在Web内核方面应用将会得到极大的凸显； [8]
3）提升Web操作体验。随着硬件能力的提升、WebGL标准化的普及以及手机页游的逐渐成熟，手机页游向3D化发展是大势所趋； [8]
4）网络营销游戏化发展。通过一些游戏化、场景化以及跨屏互动等环节，不仅增加用户游戏体验，还能够满足广告主大部分的营销需求，在推销产品的过程中，让用户体验游戏的乐趣；
5）移动视频、在线直播。HTML5将会改变视频数据的传输方式，让视频播放更加流畅，与此同时，视频还能够与网页相结合，让用户看视频如看图片一样轻松。 [8]
CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块 [1] 。
CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时间支持不同特性，这也让跨浏览器开发变得复杂 [2] 。
早在2001年W3C就完成了CSS3的草案规范。CSS3规范的一个新特点是被分为若干个相互独立的模块。一方面分成若干较小的模块较利于规范及时更新和发布，及时调整模块的内容，这些模块独立实现和发布，也为日后CSS的扩展奠定了基础。另外一方面，由于受支持设备和浏览器厂商的限制，设备或者厂商可以有选择的支持一部分模块，支持CSS3的一个子集，这样有利于CSS3的推广。 [3]
以下为截至2021年1月，CSS3各模块的规范情况：
CSS3编程工具同CSS，任何一种文本编辑工具都可用来编写，如：Windows下的写字本、记事本；或其他专门用于编辑网页文本的工具 [37] ，如：IntelliJ IDEA、Eclipse、MyEclipse、webstorm、sublime text；此外还有专门针对前端开发的插件，如：Emmet。CSS3多列布局属性可以不使用多个div标签就能实现多列布局。CSS3中的多列布局模块描述了如何像报纸、杂志那样，把一个简单的区块拆成多列，并通过相应属性来实现列数、列宽、各列之间的空白间距。弹性盒模型布局方便了Web前端开发者根据复杂的前端分辨率进行弹性布局，轻松地实现页面中的某一区块在水平、垂直方向对齐，是进行响应式网站开发的一大利器 [40] 。在CSS2.1中，想让某个元素变形必须要借助JavaScript写大量的代码实现，在CSS3中加入了变形属性，该属性在2D或3D空间里操作盒子的位置和形状，来实现例如旋转、扭曲、缩放或者移位。变形属性的出现，使Web前端中的元素展示不仅仅局限在二维空间，Web前端开发者可以通过旋转、扭曲、缩放或者移位等操作实现元素在三维控件上的展示。通过变形元素，web前端中的内容展示更加形象、真实 [40] 。CSS3的“过渡”（transition）属性通过设定某种元素在某段时间内的变化实现一些简单的动画效果，让某些效果变得更加具有流线性与平滑性。CSS3的“动画”（animation）属性能够实现更复杂的样式变化以及一些交互效果，而不需要使用任何Flash或JavaScript脚本代码。过渡与动画的出现，使CSS在Web前端开发中不再仅仅局限于简单的静态内容展示，而是通过简单的方法使页面元素动了起来，实现了元素从静到动的变化 [40] 。
1、减少开发成本与维护成本
在CSS3出现之前，开发人员为了实现一个圆角效果，往往需要添加额外的HTML标签，使用一个或多个图片来完成，而使用CSS3只需要一个标签，利用CSS3中的border-radius属性就能完成。这样，CSS3技术能把人员从绘图、切图和优化图片的工作中解放出来。如果后续需要调整这个圆角的弧度或者圆角的颜色，使用CSS2.1，需要从头绘图、切图才能实现，使用CSS3只需修改border-radius属性值就可快速完成修改。
CSS3提供的动画特性，可让开发者在先实现一些动态按钮或者动态导航时远离JavaScript，让开发人员不需要花费大量的时间去写脚本或者寻找合适的脚本插件来适配一些动态网站效果。
2、提高页面性能
很多CSS3技术通过提供相同的视觉效果而成为图片的“替代品”，换句话说，在进行Web开发时，减少多余的标签嵌套以及图片的使用数量，意味着用户要下载的内容将会更少，页面加载也会更快。另外，更少的图片、脚本和Flash文件能够减少用户访问Web站点时的HTTP请求数，这是提升页面加载速度的最佳方法之一。而使用CSS3制作图形化网站无需任何图片，极大地减少了HTTP的请求数量，并且提升了页面的加载速度。例如CSS3的动画效果，能够减少对JavaScript和Flash文件的HTTP请求，但可能会要求浏览器执行很多的工作来完成这个动画效果的渲染，这有可能导致浏览器响应缓慢致使用户流失。因此，在使用一些复杂的特效时需要考虑清楚。其实很多CSS3技术能够在任何情况下都大幅提高页面的性能 [53] 。
CSS3将完全向后兼容，所以没有必要修改的设计来让它们继续运作。网络浏览器也还将继续支持CSS2 [54] 。从用户分布上看，68.23%的用户通过微信玩H5游戏，由于微信对H5游戏在朋友圈的传播进行了限制，依托于微信公众号所建立的小游戏平台将成为H5用户进行游戏的首选，其他富余流量入口也是不错的长尾选择。