到前端技术，我们通常都会说到"三大块"：HTML、CSS、JavaScript，前端最核心的三项技术。

从逻辑上讲，一个网页可以视为由这三项技术实现的三层架构有机结合体。

· 结构层：表述一个页面中有哪些信息，以及信息之间的关系，由HTML实现。

· 表现层：决定了页面中的信息会以怎样的外观呈现出来，由CSS实现。

· 行为层：控制了页面如何与用户进行交互，由JS实现。

除了基本的"三大块"之外，作为前端开发工程师，还需要掌握以下知识点：

· HTTP相关：由于前端资源都是浏览器通过网络下载的，所以有必要了解相关的网络协议。

· 前端性能优化：让网页更快，减少用户的等待，是前端工程师面临的重要课题，需要掌握前端性能优化相关的工具和方法。

· 前端框架：Web业务日趋复杂，对前端开发提出更高要求。学会使用框架开发，很好地解决了jQuery 称霸时代开发周期太长，复用性低等问题，大大提升了效率。

· Node相关：在Node.js之前，没有任何一种脚本语言能贯穿前后端平台——Node.js可以用JS写后台，这对于熟悉JS的前端人员而言会更容易掌握，并且用Node.js可以快速搭建本地服务器。这是很多前端开发者青睐这项技术的原因。

以下，人邮君就围绕前端开发所需技能列出一份荐书清单，并按照豆瓣评分和读者评价给出了推荐指数，请签收！

超文本标记语言（Hyper Text Markup Language，HTML），用于描述超文本中内容的显示方式，如文字以什么颜色、大小来显示等。HTML从1.0到5.0经历了巨大的变化，已经成为了一种非常成熟的标记语言。

入门

《HTML5权威指南》

推荐指数：☆☆☆☆

作者：[美]Adam Freeman 译者：谢廷晟 牛化成 刘美英

本书是系统学习网页设计的参考图书，全书分为五部分：

· 介绍学习需要的预备知识和HTML、CSS和JavaScript的进展；

· 讨论HTML元素，并详细说明了HTML5中新增和修改的元素；

· 阐述CSS，涵盖了所有控制内容样式的CSS选择器和属性，并辅以大量代码示例和图示；

· 介绍DOM，剖析如何用JavaScript操纵HTML内容；

· 讲解Ajax、多媒体和canvas元素等HTML5特性。

本书面向初学者和中等水平Web开发人员，是牢固掌握HTML5、CSS3和JavaScript的必读之作。

进阶

《HTML5程序设计（第2版）》

推荐指数：☆☆☆

作者：[荷]Peter Lubbers [美]Brian Albers [美]Frank Salim 译者：柳靖 李杰 刘淼

本书主要内容包括：

· HTML5历史背景、新的语义标签及与以往HTML版本相比的根本变化；

· HTML5设计原理；

· SVG和拖放API相关内容；

· 逐一讨论HTML5的Canvas、Geolocation、Communication、WebSocket、Forms、WebWorkers、Storage等API的使用；

· 探索了离线Web应用并展望了HTML5未来的发展前景。

本书面向有一定经验的Web应用开发人员，对HTML5及未来Web应用技术发展有浓厚兴趣的读者也可以学习参考。

级联样式表（Cascading Style Sheet）简称"CSS"，通常又称为"风格样式表（Style Sheet）"，是用来控制网页外观的一门技术。各种物联网设备，不论屏幕尺寸大小，只要有浏览器就要用到CSS。

入门

《HTML5与CSS3基础教程（第8版）》

推荐指数：☆☆☆☆

作者：[美]Elizabeth Castro [美]Bruce Hyslop 译者：望以文

本书是讲解HTML和CSS入门知识的经典畅销书，全面系统地阐述了HTML5和CSS3基础知识以及实际运用技术，通过大量实例深入浅出地分析了网页制作的方方面面。主要内容有：

· 介绍文本、图像、链接、列表、表格、表单等网页元素；

· 介绍如何为网页设计布局、添加动态效果等；

· 调试和发布；

· 书中的完整代码示例，以及更多实例及进阶参考资料（配套网站）。

通过学习本书，零起点读者即可创建网站，而中水平的开发人员也可以快速了解HTML5新元素、CSS3的奇幻效果、响应式Web设计以及各种最佳实践。

进阶

《CSS揭秘》

推荐指数：☆☆☆☆☆

作者：[希]LEA VEROU 译者：CSS魔法

· 本书是一本注重实践的教程，作者为我们揭示了47个鲜为人知的CSS技巧；

· 主要内容包括背景与边框、形状、视觉效果、字体排印、用户体验、结构与布局、过渡与动画等；

· 本书将带领读者循序渐进地探寻更优雅的解决方案，攻克每天都会遇到的各种网页样式难题。

《CSS揭秘》是前端工程师、网页开发人员的进阶必备书籍。

《CSS世界》

推荐指数：☆☆☆☆

作者：张鑫旭

本书主要内容包括：

· 结构、内容、美化装饰等方面大量的CSS知识点；

· 通过大量的实战案例，详尽解析CSS的相关知识与常见问题；

· 专门的配套网站进行实例展示、问题答疑。

作为一本CSS深入学习的书，书中介绍大量许多前端开发人员都不知道的CSS知识点。通过阅读本书，读者会对CSS世界的深度和广度有一个全新的认识。

《CSS权威指南（第四版）（上下册）》

推荐指数：☆☆☆☆

作者：[美]Eric A. Meyer [美]Estelle Weyl 译者：安道

· 本书全面阐述了 CSS 的实现方式，深入分析了最新的 CSS 规范；

· 展示了如何通过布局、过渡和动画、边框、背景、文本属性，以及许多其他工具和技术来改善用户体验、加快开发速度、避免潜在的错误；

· 如果你是网页设计师或应用开发者，对复杂的页面样式、改进可访问性以及节省时间和精力感兴趣，那你决不能错过这本书。

JavaScript是一种解释型的、基于对象的脚本语言，它能够将网页中的文本、图形、声音和动画等各种媒体形式捆绑在一起，形成一个紧密结合的信息源。无论是桌面开发，还是移动应用，JavaScript都是必须掌握的技术。

入门

《JavaScript高级程序设计(第3版)》

推荐指数：☆☆☆☆☆

作者：[美]Nicholas C.Zakas 译者：李松峰 曹力

本书承继了之前版本全面深入、贴近实战的特点，讲解了JavaScript语言的核心，展示了现有规范及实现为开发Web应用提供的各种支持和特性。本书主要内容包括：

· 解读JavaScript实现各个组成部分；

· 阐述JavaScript面向对象编程；

· 剖析DOM、BOM及浏览器事件模型；

· Web应用基本数据格式JSON、XML及其存取；

· Ajax、Comet服务器端通信和基于File API的拖放式文件上传；

· ECMAScript 5定义的新核心语言特性；

· HTML5涵盖的表单、媒体、Canvas（包括WebGL）；

· Selectors、Web、Workers、地理定位及跨文档传递消息等新API；

· 离线应用及客户端存储（包括IndexedDB）；

· 维护、性能、部署相关的开发实践；

· 新兴API及ECMAScript Harmony展望。

作为JavaScript技术经典名著，《JavaScript高级程序设计(第3版)》可以说是JavaScript最权威的入门书籍了。

《JavaScript DOM编程艺术(第2版)》

推荐指数：☆☆☆☆

作者：[英]Jeremy Keith [加]Jeffrey Sambells 译者：杨涛 王建桥 杨晓云等

本书是超级畅销书的升级版，由倡导Web标准的领军人物执笔，揭示了前端开发的真谛，是学习JavaScript和DOM开发的必读之作。本书主要内容包括：

· JavaScript和DOM的基本知识；

· 通过几个实例演示了专业水准的网页开发技术；

· 透彻阐述了平稳退化等一批至关重要的JavaScript编程原则和实践；

· 全面探讨了HTML5以及jQuery等JavaScript库。

通过阅读本书，读者将看到JavaScript、HTML5和CSS如何协作来创建易用的、与标准兼容的Web设计，以及掌握使用JavaScript和DOM通过客户端动态效果和用户控制的动画来加强Web页面的必备技术；同时，还将对如何利用库提高开发效率有全面深入的理解。

《你不知道的JavaScript》

推荐指数：☆☆☆☆☆

作者：[美]Kyle Simpson 译者：赵望野 梁杰

本书深入理解语言内部的机制，全面介绍了JavaScript中常被人误解和忽视的重要知识点。

· 《你不知道的JavaScript（上卷）》介绍了该系列的两个主题——"作用域和闭包"以及"this和对象原型"。掌握了这些知识之后，无论什么技术、框架和流行词语，你都能轻松理解。本书讲解通透深入，是入门必备书籍。

· 《你不知道的JavaScript（中卷）》主要介绍了类型、语法、异步和性能。

· 《你不知道的JavaScript（下卷）》主要介绍了入门知识和对ES6及未来发展趋势的展望。

本书既适合JavaScript语言初学者阅读，又适合经验丰富的JavaScript开发人员深入学习。

《Head First JavaScript程序设计》

推荐指数：☆☆☆☆

作者：[美]Eric T. Freeman [美]Elisabeth Robson 译者：袁国忠

· 本书语言和版式活泼，内容讲解深入浅出，是难得的JavaScript入门书；

· 本书内容涵盖JavaScript的基本知识以及对象、函数和浏览器文档对象模型等高阶主题；

· 书中配备了大量有趣的实例、图示和练习，让读者轻轻松松掌握JavaScript。

本书的读者对象为JavaScript入门读者以及网页设计入门者。

`````````

进阶

《JavaScript忍者秘籍 第2版》

推荐指数：☆☆☆☆☆

作者：[美]John Resig [美]Bear Bibeault [美]Josip Maras 译者：一心一译前端小组

本书共分4个部分，从不同层次讲述了逐步成为JavaScript高手所需的知识：

· 本书从JavaScript语言及重要的特性谈起，由浅入深地探讨了函数、作用域、闭包、生成器函数、对象、数组、模块化、JavaScript与Web页面的交互以及事件等主题；

· 引导读者更加深入地了解JavaScript的方方面面，充分展示了JavaScript语言的各种特性；

· 本书结合ECMAScript 6和7的相关概念，涵盖了流行的JavaScript框架所使用的技术。

本书适合具备一定JavaScript基础知识的读者阅读，也适合从事程序设计工作并想要深入探索JavaScript语言的读者阅读。

《JavaScript设计模式》

推荐指数：☆☆☆☆

作者：张容铭

本书共分六篇四十章：

· 讨论了几种函数的编写方式，体会JavaScript在编程中的灵活性；

· 讲解了面向对象编程的知识，其中讨论了类的创建、数据的封装以及类之间的继承；

· 探讨了各种模式的技术，如简单工厂模式，包括工厂方法模式、抽象工厂模式、建造者模式、原型模式、单例模式，以及外观模式，包括适配器模式。

· 讲解了几种适配器、代理模式、装饰者模式和MVC模式，讨论了如何实现对数据、视图、控制器的分离。

· 在讲解MVP模式时，讨论了如何解决数据与视图之间的耦合，并实现了一个模板生成器；

· 讲解MVVM模式时，讨论了双向绑定对MVC的模式演化。

本书几乎包含了关于JavaScript设计模式的全部知识，是进行JavaScript高效编程必备的学习手册。

《JavaScript面向对象精要》

推荐指数：☆☆☆☆☆

作者：[美]Nicholas C.Zakas 译者：胡世杰

全书共6章，内容简洁而精妙，关注面向对象的原理和ES5对象新特性，帮助那些已经熟知面向对象编程的读者掌握这些概念是如何在JavaScript中工作的。

· 本书深入探讨了原始类型和引用类型、函数、对象、构造函数和原型对象、继承和对象模式等主题和特性；

· 你将学到JavaScript独特的面向对象的编程方式；

· 你将学到抛弃类的概念和基于类的继承，学习基于原型的继承和构造函数；

· 你将学会如何创建对象、定义自己的类型、使用继承以及其他各种操作来充分使用对象。

总而言之，你将学到JavaScript语言并进行专业编程所需熟知的一切。本书适合熟悉面向对象编程的概念并希望将其应用于JavaScript的开发者阅读，也适合JavaScript新手学习参考。

《锋利的jQuery（第2版）》

推荐指数：☆☆☆☆

作者：单东林 张晓菲 魏然

· 本书介绍了jQuery的各种函数和方法调用；

· 读者可以系统地掌握jQuery的选择器、DOM操作、事件和动画、AJAX应用、插件、jQuery Mobile、jQuery各个版本变化、jQuery性能优化和技巧等知识点，并结合每个章节后面的案例演示进行练习；

· 本书的第8章将前7章讲解的知识点和效果进行了整合，打造出一个非常有个性的网站，并从案例研究、网站材料、网站结构、网站样式和网站脚本等方面指导读者参与到项目建设中来。

《锋利的jQuery（第2版）》适合所有对jQuery技术感兴趣的Web设计者和前端开发人员阅读和参考。

Node.js是建立在Chrome浏览器的JavaScript运行时基础上，用于快速构建可扩展的网络应用的平台。Node旨在帮助开发者编写异步的、事件驱动的应用。在Node中，每一个请求都是异步的，并且几乎所有的I/O都是非阻塞的。因此，Node应用非常高效率，能够处理的"并发"连接的数量也很庞大。

入门

《Node.js实战（第2版）》

推荐指数：☆☆☆

作者：[英]Alex Young [美] Bradley Meck [美] Mike Cantelon [美] Tim Oxley [美] Marc Harter [美] T.J.Holowaychuk [美] Nathan Rajlich 译者：吴海星

· Node.js核心框架贡献者力作 ；

· 展示Node核心技巧 ；

· 涵盖前端构建系统、Web框架选择、数据库交互和Web程序测试与部署等全栈开发所需技术。

本书是Node.js的实战教程，涵盖了为开发产品级Node应用程序所需要的一切特性、技巧以及相关理念。从搭建Node开发环境，到一些简单的演示程序，到开发复杂应用程序所必不可少的异步编程，第2版介绍了全栈开发者所需的全部技术，可作为入门书籍。

进阶

《深入浅出 Node.js》

推荐指数：☆☆☆☆☆

作者：朴灵

《深入浅出Node.js》从不同的视角介绍了 Node 内在的特点和结构。由首章Node介绍为索引，涉及Node的各个方面，主要内容包括：

· 模块机制的揭示；

· 异步I/O实现原理的展现；

· 异步编程的探讨；

· 内存控制的介绍；

· 二进制数据Buffer的细节；

· Node中的网络编程基础；

· Node中的Web开发；

· 进程间的消息传递；

· Node测试以及通过Node构建产品需要的注意事项。

附录介绍了Node的安装、调试、编码规范和NPM仓库等事宜。本书适合想深入了解 Node的人员阅读，是进阶必备书籍。

HTTP & TCP/IP

《HTTP权威指南》

推荐指数：☆☆☆☆☆

作者：[美]David Gourley [美]Brian Totty [美]Marjorie Sayer [美]Sailu Reddy [美]Aushu Aggarwal 译者：陈涓 赵振平

本书由具有多年实践经验的专家编写，通过简洁语言和大量翔实的细节图解帮助读者形象地理解Web幕后所发生的事情，详细说明了Web上每条请求的实际运行情况，主要内容包括：

· HTTP方法、首部以及状态码；

· 优化代理和缓存的方法；

· 设计Web机器人和爬虫的策略；

· Cookies、认证以及安全HTTP；

· 国际化及内容协商；

· 重定向及负载平衡策略。

本书深入说明了Web的工作原理，内容全面，讲解细致，是HTTP协议及相关Web技术方面的著作。

《图解HTTP》

推荐指数：☆☆☆☆

作者：[日]上野 宣 译者：于均良

《图解HTTP》对HTTP协议进行了全面系统的介绍，可以说是一本讲解HTTP协议的神书，简单有趣，图文并茂，生动形象，适合入门，主要内容包括：

· HTTP协议的发展历史；

· HTTP协议的结构剖析；

· 常见通信场景及实战案例；

· Web安全、新技术动向等。

读者可通过本书快速了解并掌握HTTP协议的基础知识。

《图解TCP/IP（第5版）》

推荐指数：☆☆☆

作者：[日]竹下隆史 [日]村山公保 [日]荒井透 [日]苅田幸雄 译者：乌尼日其其格

· 本书是一本图文并茂的网络管理技术书籍，旨在让广大读者理解TCP/IP的基本知识、掌握TCP/IP的基本技能；

· 书中讲解了网络基础知识、TCP/IP基础知识、数据链路、IP协议、IP协议相关技术、TCP与UDP、路由协议、应用协议、网络安全等内容；

· 引导读者了解和掌握TCP/IP，营造一个安全的、使用放心的网络环境。

性能优化

《Web性能权威指南》

推荐指数：☆☆☆☆

作者：[加]Ilya Grigorik 译者：李松峰

本书由谷歌公司高性能团队核心成员创作，堪称实战经验与规范解读结合的产物，获得IETF下一代HTTP协议工作组主席力荐。本书目标是涵盖Web技术体系中应该掌握的所有网络及性能优化知识。本书主要内容有：

· 以性能优化为主线，从TCP、UDP和TLS协议讲起；

· 解释了如何针对这几种协议和基础设施来优化应用；

· 深入探讨了无线和移动网络的工作机制；

· 揭示了HTTP协议的底层细节；

· 同时详细介绍了HTTP 2.0、 XHR、SSE、WebSocket、WebRTC和DataChannel等现代浏览器新增的具有革命性的新能力。

本书适合所有Web应用及站点开发人员阅读，包括但不限于前端、后端、运维、大数据分析、UI/UX、存储、视频、实时消息，以及性能工程师。

前端框架

当前，三大主流前端框架分别是React、Vue、Angular。

React 是一个采用声明式，高效而且灵活的用来构建用户界面的框架，另辟蹊径提出了以组件化的形式重新构建页面内容，将页面的内容按特征分块，然后将特定块中的HTML、CSS、JS封装在一起，最后用组件来构建页面内容。

《深入React技术栈》

推荐指数：☆☆☆☆

作者：陈屹

本书从几个维度去介绍 React：

· 一是作为 View 库，它怎么实现组件化，以及它背后的实现原理；

· 二是扩展到 Flux 应用架构及重要的衍生品 Redux，它们怎么与 React 结合做应用开发；

· 三是对 React 与 server 的碰撞产生的一些思考；

· 四是讲述它在可视化方面的优势与劣势。

此外，本书非常重视实战，每一节都有实际的例子，细节丰富，内容翔实，由浅入深，无论你是 React 初学者，还是进阶人士，本书都值得一读！本书适合有一定经验的前端开发人员阅读。

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue.js 自身不是一个全能框架——它只聚焦于视图层，因此它非常容易学习，并很容易与其它库或已有项目整合。

《深入浅出Vue.js》

推荐指数：☆☆☆☆

作者：刘博文

本书从源码层面分析了Vue.js，主要内容有 ：

· 简要介绍Vue.js；

· 讲解内部核心技术"变化侦测"，带领大家从0到1实现一个简单的"变化侦测"系统；

· 介绍虚拟DOM技术，包括虚拟DOM的原理及其patching算法；

· 讨论模板编译技术，包括模板解析器的实现原理、优化器的原理以及代码生成器的原理；

· 介绍其整体架构以及提供给我们使用的各种API的内部原理，同时还介绍了生命周期、错误处理、指令系统与模板过滤器等功能的原理。

360奇舞团团长月影和《JavaScript高级程序设计》译者李松峰作序推荐，适合前端开发人员阅读。

Angular是一个用来构建大型应用，高性能的Web应用程序的框架；是一个完整的、从 UI、路由、Http、Socket到依赖注入、编译、优化、测试的框架。Angular上手起来有一定难度，但其工程属性极强，非常适合多团队的大型项目，一旦学会，优势很大。

《Angular权威教程》

推荐指数：☆☆☆☆

作者：[美]Ari Lerner [巴西]Felipe Coury [美]Nate Murray [巴西]Carlos Taborda 译者：Nice Angular社区

· 本书堪称Angular领域的里程碑式著作，几乎涵盖了关于Angular的所有内容；

· 对于没有经验的人，本书平实、通俗的讲解，递进、严密的组织，可以让人毫无压力地登堂入室，迅速领悟新一代Web应用开发的精髓；

· 如果你有相关经验，那本书对Angular概念和技术细节的全面剖析，以及引人入胜、切中肯綮的讲解，将帮助你彻底掌握这个框架，在自己职业技术修炼之路上更进一步。

HTML（HyperText Markup Language，中文：超文本标记语言）是一种用于创建网页结构和内容的标记语言。它由一系列标签组成，这些标签描述了网页中的各个元素和其它相关信息。通过使用HTML标签和属性，开发人员可以定义文本、图像、链接、表格、表单等元素，并控制它们的外观和行为。本文主要介绍HTML的基本概念、历史背景和用途。

参考文档：https://www.cjavapy.com/article/3297/

HTML实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CJAVAPY编程之路(cjavapy.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

HTML文档的后缀名可以是.html或.htm，都可以使用，没有区别。

注意：对于中文网页需要使用<meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为<meta charset="gbk"> 。

1、HTML的基本概念

1）标签（Tag）

HTML使用标签来定义网页中的各个元素。标签通常以尖括号< >的形式出现，如<p>表示段落，<img>表示图像等。标签可以包含属性，用于提供额外的信息或控制元素的行为。

2）元素（Element）

一个完整的HTML元素由开始标签、内容和结束标签组成。例如，<p>这是一个段落</p>就是一个完整的段落元素。

3）属性（Attribute）

HTML标签可以具有属性，用于提供元素的额外信息或控制元素的行为。属性以键值对的形式出现，例如<img src="image.jpg">中的src属性指定了图像的源文件。

4）文档结构

一个HTML文档由<html>、<head>和<body>等标签组成。其中，<html>标签用于定义整个HTML文档的根元素，<head>标签用于定义文档的头部信息，如标题和样式表链接，<body>标签用于定义文档的主体内容。

5）块级元素和内联元素

HTML元素可以被分类为块级元素和内联元素。块级元素以块的形式显示，独占一行或一块空间，如<p>、<div>等。内联元素以行内的方式显示，不会独占一行，如<span>、<a>等。

6）嵌套

HTML元素可以嵌套在其他元素内部，形成一个层次结构。例如，<div>元素可以包含<p>元素，<p>元素可以包含<span>元素。

7）<!DOCTYPE> 声明

HTML文档的开头通常会包含一个DOCTYPE声明，用于指定文档的HTML版本。

例如：

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

2、HTML与Web 浏览器

HTML（HyperText Markup Language）是一种用于创建网页结构和内容的标记语言，而Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于显示和解释HTML文档的应用程序。Web浏览器通过解析HTML文档，将其转换为可视化的网页。浏览器会读取HTML文档中的标签和内容，并根据这些标签和内容的定义，渲染出网页的结构和样式。HTML提供了各种标签和属性，用于定义文本、图像、链接、表格、表单等在网页中的展示和交互方式。浏览器在解析HTML时，会根据标签和属性的定义，将文本显示为段落、标题或其他格式，显示图像、链接，并响应用户的交互操作。

通过HTML和Web浏览器的结合，用户可以在浏览器中访问和浏览各种网页内容，包括网页文本、图像、视频、音频等多媒体元素，并与网页进行交互，如点击链接、填写表单、提交数据等。

大部分浏览器中，直接输出中文会出现中文乱码的情况，需要在头部将字符声明为 UTF-8 或 GBK。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
页面标题</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

3、HTML版本及历史背景

HTML有多个版本，每个版本都有不同的特性和改进。

1）HTML 1.0

HTML 1.0是最早的HTML版本，于1993年发布。它只包含一些基本的标签和属性，用于创建简单的文本和链接。HTML 1.0的目标是定义一种通用的超文本标记语言。

2）HTML 2.0

HTML 2.0于1995年发布，是对HTML 1.0的改进和扩展。它引入了一些新的标签和属性，如图像标签和表格标签，以支持更丰富的内容展示。

3）HTML 3.2

HTML 3.2于1997年发布，是对HTML 2.0的进一步改进。它引入了一些新的标签和属性，如表单标签和框架标签，以支持交互性和页面布局。

4）HTML 4.01

HTML 4.01于1999年发布，是对HTML 3.2的修订和扩展。它引入了更多的标签和属性，如层标签和样式表，以支持更灵活的页面设计和样式控制。

5）XHTML 1.0

XHTML（eXtensible HyperText Markup Language）是基于XML的HTML版本。XHTML 1.0于2000年发布，它严格遵循XML的语法规则，要求所有标签和属性都要正确嵌套和闭合。

6）HTML5

HTML5是HTML的最新版本，于2014年正式发布。HTML5引入了许多新的特性和API，如语义化标签、多媒体支持、Canvas绘图、本地存储等。HTML5还支持响应式设计，以适应不同设备和屏幕尺寸。

4、HTML用途

HTML是构建网页结构和内容的基础语言，它提供了丰富的标签和属性，使得开发者可以创建各种类型的网页，并实现不同的功能和效果。HTML用于定义网页的整体结构，包括标题、段落、列表、标题、导航菜单等元素。通过使用不同的HTML标签和属性，可以将文本、图像、音频、视频等内容组织起来，并构建页面的层次结构。HTML可以用于展示文本内容和多媒体元素，如图像、音频和视频。通过使用适当的HTML标签和属性，可以插入和显示各种类型的媒体内容，从而使网页更加丰富和吸引人。HTML提供了创建表单的标签和元素，可以用于收集用户的输入数据。通过使用表单元素如文本框、复选框、单选按钮和下拉列表等，用户可以输入数据并提交给服务器进行处理。

参考文档：https://www.cjavapy.com/article/3297/

面效果展示

<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

页面完整代码

<!DOCTYPE HTML>
<html>
<head> 
<title>文内链接</title>
<style>
a:hover
{
background-color:yellow;
}
</style>
</head> 
<body >
<div style="width:50%;margin:auto;"><!--使页面居中显示，并展视窗50%宽度-->
<div style="position:fixed; top:0px;"><!--使导航菜单悬停在顶端-->
<a style="margin: 0px 30px 0px 10px;" href="#chapter1">试飞进程</a>
<a style="margin: 0px 30px 0px 0px;" href="#chapter2">研制情况</a>
<a style="margin: 0px 30px 0px 0px;" href="#chapter3">服役动态</a>
<a style="margin: 0px 30px 0px 0px;"href="#chapter4">总体评价</a>
</div><!--使导航菜单悬停在顶端（结尾）-->
<div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;"><!--小div套大div隐藏滚动条-->
<div style="margin:0px 0px 0px 8px;width:610px; height:530px; overflow-y:scroll;overflow-x:hidden;" >
<p><!--小div-->
<h2><a id="chapter1" >试飞进程</a></h2>
歼-20隐形战斗机首架技术验证机于2011年1月11日中午12时50分左右进行首次升空飞行测试，13时08分成功着陆，历时18分钟。<br>
整个首飞过程在歼-10S战斗教练机陪伴下完成 。
2016年10月28日，首次发布“空军试飞员将驾歼-20飞机亮相中国航展”后，还陆续发布了“歼-20战机列装空军作战部队”“空军歼-20战机首次开展海上方向实战化训练”等。
<h2><a id="chapter2">研制情况</a></h2>
在2016年11月1日，第十一届珠海航展，歼-20首次进行空中飞行展示。两架歼-20做了公开飞行，不仅在现场引起轰动，也立刻被西方媒体大量报道。歼-20是中国现代空中力量的代表作，也进入了世界最先进的第五代战斗机行列，它是中国国防能力高速发展的一个象征。<br>
2018年11月11日，第十二届中国航展在珠海迎来“高光时刻”：歼-20战机在公开飞行展示中挂弹开仓，震撼献礼人民空军成立69周年纪念日。 <br>
2019年10月13日，庆祝人民空军成立70周年航空开放活动新闻发布上，空军新闻发言人申进科大校介绍歼-20战机列阵人民空军“王牌部队”
<h2><a id="chapter3" >服役动态</a></h2>
2017年3月9日，中央电视台报道歼-20战斗机正式进入空军序列。<br>
2017年3月13日，《中国日报》发布消息称，中国自主研制的歼-20近期将装配国产发动机。<br>
2017年7月30日，歼-20三机编队参加在朱日和举行的庆祝中国人民解放军成立90周年阅兵。歼击机梯队飞来，3架歼-20隐形战斗机以楔形编队的形式在天空中飞过。<br>
2017年9月28日，在中国国防部行记者会上，国防部新闻发言人吴谦大校介绍歼-20飞机已经列装部队。<br>
2017年11月10日上午，中国空军发言人申进科大校表示，歼-20 列装部队后，已经开展编队训练。<br>
2018年2月9日，中国空军新闻发言人申进科大校发布消息，歼-20开始列装空军作战部队。<br>
2018年10月30日，中国空军4架歼-20隐形战斗机现身珠海金湾机场上空。<br>
2019年10月1日，歼-20现身庆祝中华人民共和国成立70周年阅兵式；阅兵中，歼-20与歼-16、歼-10C三型飞机分别以5机楔队组成战斗队形接受检阅；该三款歼击机被誉为中国空军歼击机家族的“三剑客”，是未来联合作战的骨干力量
<h2><a id="chapter4" >总体评价</a></h2>
歼-20是眼下亚洲区域最先进的战机，这让中国空军在面对日本、韩国与印度等国家的空军时占有显著优势。外媒将歼-20与其他国家战机进行了对比。俄罗斯苏霍伊苏-57战斗机由于研制进度几度推迟，尚未正式交付入役；美国F-35战斗机也多次出现飞机供氧不足的问题，大面积停飞，出口受阻；韩国KF-X隐形战机先是被爆出因掌握不了关键技术而被迫降成四代半战机的情况，后又传出了合作方印尼打算撤资并已告知韩国的消息。因此，中国歼-20战机成为亚太区域领跑的优势战机。<br>
中国空军正向全疆域作战的现代化战略性军种迈进，成为有效塑造态势、管控危机、遏制战争、打赢战争的重要力量。歼-20战机列装空军作战部队，将进一步提升空军综合作战能力，有助于空军更好的肩负起维护国家主权、安全和领土完整的神圣使命。<br>
歼20是我国自主研制的第五代战斗机，它的研制实现了既定的四大目标——打造跨代新机、引领技术发展、创新研发体系、建设卓越团队。打造跨代新机，是按照性能、技术和进度要求，研制开发我国自己的新一代隐身战斗机。引领技术发展，指通过自主创新实现强军兴军的目标。歼20在态势感知、信息对抗、协同作战等多方面取得了突破，这是中国航空工业从跟跑到并跑，再到领跑的必由之路。创新研发体系，是指建设最先进的飞机研制条件和研制流程。通过一大批大国重器的研制，我们建立了具有我国特色的数字化研发体系。建设卓越团队，是指通过型号研制，锤炼一支爱党爱国的研制队伍，这些拥有报国情怀、创新精神的优秀青年是航空事业未来发展的生力军。未来，我们将在战斗机的机械化、信息化、智能化发展征程上不断前行。
</p>
<img border="0" src="img/image1.jpg" usemap="#map" / >
<map name="map" id="map">
<area shape="poly"  coords="142,62,186,175,246,236,243,298,263,323,396,338,478,313,516,246,496,224,320,158,348,142,336,129,232,108" href="https://www.zhihu.com/question/284642168" / title="歼20气动外形分析"><!--必须保证画面尺寸与页面显示尺寸一致！-->
</map>
</div><!--小div(结尾)-->
</div><!--小div套大div隐藏滚动条（结尾）-->
</div><!--使页面居中显示，并展视窗50%宽度（结尾）-->
</body> 
</html>

页面制作技术解析

1.页面内容居中显示方法

2.导航栏悬停顶端方法

3.鼠标滑过导航标题或链接时改变背景色提示

3.隐藏滚动条方法

4.图片区域链接

大家结合代码和技术解析，先自行分析一下每段代码的作用，以及它们之间的前后关系。这一步练习对培养代码阅读能力很有好处，希望大家可以先自行阅读分析。

下一次，我会逐步演示“页面制作技术解析”中的五个步骤以及一些注意事项。

使用碎片时间，学习完整知识！关注大鱼师兄，一起精研技艺。

目录

HTML序章（学习目的、对象、基本概念）——零基础自学网页制作

HTML是什么？——零基础自学网页制作

第一个HTML页面如何写？——零基础自学网页制作

HTML页面中head标签有啥用？——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2（路径详解）——零基础自学网页制作

使用HTML添加表格1（基本元素）——零基础自学网页制作

使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作

使用HTML添加表格3（间距与颜色）——零基础自学网页制作

使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作

HTML表单4（form的action、method属性）——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

HTML中的图片区域链接方法详解——零基础自学网页制作

HTML图片区域链接注意事项与Gimp基本用法——零基础自学网页制作

用HTML制作一个简单页面(详解)——零基础自学网页制作（完结篇）