到前端技術，我們通常都會說到"三大塊"：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技術?！?/strong>

推薦指數：☆☆☆☆

作者：陳屹

本書從幾個維度去介紹 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制作一個簡單頁面(詳解)——零基礎自學網頁制作（完結篇）