[TOC]
# 最小推薦
以下是構成任何 Web 頁面（網站/應用程序）的基本要素：
~~~
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--
以上 2 個 meta 標簽 *必須* 放在 head 之前，以確保正確的文檔呈現；
其他任何 head 元素 *必須* 在這些標簽之后。
-->
<title>Page Title</title>
~~~
<br>
# 元素
有效的 `<head>` 元素包括 `meta`, `link`, `title`, `style`, `script`, `noscript`, 和`base`。
這些元素提供了如何通過如瀏覽器，搜索引擎，網絡爬蟲等網絡技術來感知和呈現文檔的信息。
~~~
<!-- 設置此文檔的字符編碼，以便 UTF-8 范圍中的所有字符（如 emoji）都能正確顯示 -->
<meta charset="utf-8">
<!-- 設置文檔標題 -->
<title>頁面標題</title>
<!-- 設置文檔中所有相對鏈接的基礎鏈接 -->
<base href="https://example.com/page.html">
<!-- 鏈接一個外部 CSS 文件 -->
<link rel="stylesheet" href="styles.css">
<!-- 用于文檔內的 CSS -->
<style>
/* ... */
</style>
<!-- JavaScript & No-JavaScript 標簽 -->
<script>
// function(s) go here
</script>
<noscript>
<!--無 JS 時顯示-->
</noscript>
~~~
<br>
# Meta
~~~
<!--
以上 2 個 meta 標簽 *必須* 放在 head 之前，以確保正確的文檔呈現；
其他任何 head 元素 *必須* 在這些標簽之后。
? 如果你的項目需要支持 Internet Explorer 11 之前的版本，請使用 content="ie-edge" 標簽。
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 允許控制資源從何處加載。在 <head> 中盡可能地靠前放置，因為該標簽僅適用于在其之后聲明的資源。-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<!-- Web 應用的名稱（僅當網站被用作為一個應用時才使用）-->
<meta name="application-name" content="應用名稱">
<!-- Chrome、Firefox OS 和 Opera 的主題顏色 -->
<meta name="theme-color" content="#4285f4">
<!-- 針對頁面的簡短描述（限制 150 字符）-->
<!-- 此內容*可能*被用作搜索引擎結果的一部分。 -->
<meta name="description" content="一個頁面描述">
<!-- 控制搜索引擎的抓取和索引行為 -->
<meta name="robots" content="index,follow"><!-- 所有搜索引擎 -->
<meta name="googlebot" content="index,follow"><!-- 僅對 Google 有效 -->
<!-- 告訴 Google 不顯示網站鏈接的搜索框 -->
<meta name="google" content="nositelinkssearchbox">
<!-- 告訴 Google 不提供此頁面的翻譯 -->
<meta name="google" content="notranslate">
<!-- 驗證網址所有權 -->
<meta name="google-site-verification" content="verification_token"><!-- Google Search Console -->
<meta name="yandex-verification" content="verification_token"><!-- Yandex Webmasters -->
<meta name="msvalidate.01" content="verification_token"><!-- Bing Webmaster Center -->
<meta name="alexaVerifyID" content="verification_token"><!-- Alexa Console -->
<meta name="p:domain_verify" content="code from pinterest"><!-- Pinterest Console -->
<meta name="norton-safeweb-site-verification" content="norton code"><!-- Norton Safe Web -->
<!-- 確定用于構建頁面的軟件（如 - WordPress、Dreamweaver）-->
<meta name="generator" content="program">
<!-- 關于你的網站主題的簡短描述 -->
<meta name="subject" content="你的網站主題">
<!-- 基于網站內容給出一般的年齡分級 -->
<meta name="rating" content="General">
<!-- 允許控制 referrer 信息如何傳遞 -->
<meta name="referrer" content="no-referrer">
<!-- 禁用自動檢測和格式化可能的電話號碼 -->
<meta name="format-detection" content="telephone=no">
<!-- 通過設置為 "off" 完全退出 DNS 預取 -->
<meta http-equiv="x-dns-prefetch-control" content="off">
<!-- 在客戶端存儲 cookie，web 瀏覽器的客戶端識別 -->
<meta http-equiv="set-cookie" content="name=value; expires=date; path=url">
<!-- 指定要顯示在一個特定框架中的頁面 -->
<meta http-equiv="Window-Target" content="_value">
<!-- 地理標簽 -->
<meta name="ICBM" content="latitude, longitude">
<meta name="geo.position" content="latitude;longitude">
<meta name="geo.region" content="country[-state]"><!-- 國家代碼 (ISO 3166-1): 強制性, 州代碼 (ISO 3166-2): 可選; 如 content="US" / content="US-NY" -->
<meta name="geo.placename" content="city/town"><!-- 如 content="New York City" -->
~~~
<br>
* [Content-Security-Policy](http://www.ruanyifeng.com/blog/2016/09/csp.html)
* ?? [Google 可以識別的 Meta 標簽
](https://support.google.com/webmasters/answer/79812?hl=en)
* ?? [ WHATWG Wiki: Meta 拓展
](https://wiki.whatwg.org/wiki/MetaExtensions)
* ?? [ ICBM - 維基百科
](https://en.wikipedia.org/wiki/ICBM_address#Modern_use)
* ?? [地理標記 - 維基百科](https://en.wikipedia.org/wiki/Geotagging#HTML_pages)
<br>
# link
~~~
<!-- 指向一個外部 CSS 樣式表 -->
<link rel="stylesheet" href="https://example.com/styles.css">
<!-- 有助于防止出現內容重復的問題 -->
<link rel="canonical" href="http://example.com/article/?page=2">
<!-- 鏈接到當前文檔的一個 AMP HTML 版本 -->
<link rel="amphtml" href="https://example.com/path/to/amp-version.html">
<!-- 鏈接到一個指定 Web 應用程序“安裝”憑據的 JSON 文件 -->
<link rel="manifest" href="manifest.json">
<!-- 鏈接到關于頁面所有者的信息 -->
<link rel="author" href="humans.txt">
<!-- 指向一個適用于鏈接內容的版權申明 -->
<link rel="license" href="copyright.html">
<!-- 給出可能的你的另一種語言的文檔位置參考 -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">
<!-- 提供了關于作者或其他人的信息 -->
<link rel="me" href="https://google.com/profiles/thenextweb" type="text/html">
<link rel="me" href="mailto:name@example.com">
<link rel="me" href="sms:+15035550125">
<!-- 鏈接到一個描述歷史記錄、文檔或其他具有歷史意義的材料的集合的文檔 -->
<link rel="archives" href="https://example.com/archives/">
<!-- 鏈接到層次結構中的頂級資源 -->
<link rel="index" href="http://example.com/article/">
<!-- 提供了自我引用 - 當文檔有多個可能的引用時非常有用 -->
<link rel="self" type="application/atom+xml" href="http://example.com/atom.xml">
<!-- 分別是一系列頁面中的第一個，最后一個，上一個和下一個頁面 -->
<link rel="first" href="http://example.com/article/">
<link rel="last" href="http://example.com/article/?page=42">
<link rel="prev" href="http://example.com/article/?page=1">
<link rel="next" href="http://example.com/article/?page=3">
<!-- 當使用第三方服務來維護博客時使用 -->
<link rel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD">
<!-- 當另一個 WordPress 博客鏈接到你的 WordPress 博客或文章時形成一個自動化的評論 -->
<link rel="pingback" href="https://example.com/xmlrpc.php">
<!-- 當你在自己的頁面上鏈接到一個 url 時通知它 -->
<link rel="webmention" href="https://example.com/webmention">
<!-- 啟用通過 Micropub 客戶端發布你的域名 -->
<link rel="micropub" href="https://example.com/micropub">
<!-- 打開搜索 -->
<link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Search Title">
<!-- Feeds -->
<link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS">
<link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3">
<!-- 預取，預載，預瀏覽 -->
<!-- 更多信息：https://css-tricks.com/prefetching-preloading-prebrowsing/ -->
<link rel="dns-prefetch" href="//example.com/">
<link rel="preconnect" href="https://www.example.com/">
<link rel="prefetch" href="https://www.example.com/">
<link rel="prerender" href="https://example.com/">
<link rel="preload" href="image.png" as="image">
~~~
* ?? [鏈接關系](https://www.iana.org/assignments/link-relations/link-relations.xhtml)
<br>
# 網站圖標
~~~
<!-- 針對 IE 10 及以下版本 -->
<!-- 如果將 `favicon.ico` 放在根目錄下，則無需標簽 -->
<!-- 我們目前需要提供的最大的網站圖標尺寸 -->
<link rel="icon" sizes="192x192" href="/path/to/icon.png">
<!-- Apple 觸摸圖標 (尺寸同樣是 192x192) -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
<!-- Safari 固定選項卡圖標 -->
<link rel="mask-icon" href="/path/to/icon.svg" color="blue">
~~~
* ?? [所有關于網站圖標（和觸摸圖標）的信息
](https://bitsofco.de/all-about-favicons-and-touch-icons/)
* ?? [創建固定選項卡圖標
](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html)
* ?? [網站圖標對照表
](https://github.com/audreyr/favicon-cheat-sheet)
* ?? [網址圖標 & 瀏覽器顏色表](https://developers.google.com/web/fundamentals/design-and-ux/browser-customization/)
<br>
# 社交
## Facebook Open Graph
~~~
<meta property="fb:app_id" content="123456789">
<meta property="og:url" content="http://example.com/page.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="http://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="">
~~~
* ?? [Facebook 的 Open Graph 的標記
](https://developers.facebook.com/docs/sharing/webmasters#markup)
* ?? [Open Graph 協議](http://ogp.me/)
* ?? [頁面驗證 - Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/)
<br>
## Twitter Card
~~~
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="http://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="http://example.com/image.jpg">
~~~
* ?? [名片入門指南 - Twitter 開發者](https://dev.twitter.com/cards/getting-started)
* ?? [頁面驗證 - Twitter Card Validator](https://cards-dev.twitter.com/validator)
<br>
## Twitter Privacy
如如果你在自己的網站中嵌入了推文，Twitter 可以使用你網站上的信息為 Twitter 用戶定制內容和建議。[更多關于Twitter隱私選項](https://dev.twitter.com/web/overview/privacy#what-privacy-options-do-website-publishers-have)。
~~~
<!-- 禁止 Twitter 使用你網站上的信息用于提供個性化的目的 -->
<meta name="twitter:dnt" content="on">
~~~
<br>
## Google+ / Schema.org
~~~
<html lang="" itemscope itemtype="http://schema.org/Article">
<head>
<link rel="author" href="">
<link rel="publisher" href="">
<meta itemprop="name" content="內容標題">
<meta itemprop="description" content="內容描述少于 200 個字符">
<meta itemprop="image" content="http://example.com/image.jpg">
~~~
注意: 這個標記需要將屬性添加到你的頂級 html 標簽中
* ?? 請在 [結構化數據測試工具](https://developers.google.com/structured-data/testing-tool/) 上測試你的頁面
<br>
## Pinterest
根據他們的幫助中心可知，Pinterest 允許你禁止他人保存你網站里的內容。description 為可選。
~~~
<meta name="pinterest" content="nopin" description="Sorry, you can't save from my website!">
~~~
<br>
## Facebook Instant Articles
~~~
<meta charset="utf-8">
<meta property="op:markup_version" content="v1.0">
<!-- 你的文章的 Web 版網址 -->
<link rel="canonical" href="https://example.com/article.html">
<!-- 用于該文章的樣式 -->
<meta property="fb:article_style" content="myarticlestyle">
~~~
* ?? [創建文章
](https://developers.facebook.com/docs/instant-articles/guides/articlecreate)
* ?? [代碼示例](https://developers.facebook.com/docs/instant-articles/reference)
<br>
## OEmbed
~~~
<link rel="alternate" type="application/json+oembed"
href="http://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&format=json"
title="oEmbed Profile: JSON">
<link rel="alternate" type="text/xml+oembed"
href="http://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&format=xml"
title="oEmbed Profile: XML">
~~~
* ?? [oEmbed 格式](http://oembed.com/)
<br>
# 瀏覽器/平臺
## Apple iOS
~~~
<!-- 智能應用 Banner -->
<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">
<!-- 禁用自動檢測和格式化可能的電話號碼 -->
<meta name="format-detection" content="telephone=no">
<!-- 添加到主屏幕 -->
<!-- 啟動圖標 (大于等于 180x180px) -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
<!-- 啟動屏幕圖片 -->
<link rel="apple-touch-startup-image" href="/path/to/launch.png">
<!-- 啟動圖標的標題 -->
<meta name="apple-mobile-web-app-title" content="應用標題">
<!-- 啟用獨立（全屏）模式 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 狀態欄外觀（除非啟用獨立模式，否則無效） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- iOS 應用深層鏈接 -->
<meta name="apple-itunes-app" content="app-id=APP-ID, app-argument=http/url-sample.com">
<link rel="alternate" href="ios-app://APP-ID/http/url-sample.com">
~~~
* ?? [配置 Web 應用程序](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html)
<br>
## Google Android
~~~
<meta name="theme-color" content="#E64545">
<!-- 添加到主屏幕 -->
<meta name="mobile-web-app-capable" content="yes">
<!-- More info: https://developer.chrome.com/multidevice/android/installtohomescreen -->
<!-- Android app deep linking -->
<meta name="google-play-app" content="app-id=package-name">
<link rel="alternate" href="android-app://package-name/http/url-sample.com">
~~~
<br>
## Google Chrome
~~~
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID">
<!-- 禁用翻譯提示 -->
<meta name="google" content="notranslate">
~~~
<br>
## Microsoft Internet Explorer
~~~
<!-- 強制 IE 8/9/10 使用其最新的渲染引擎 -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- 通過 Skype Toolbar 瀏覽器擴展功能禁用自動檢測和格式化可能的電話號碼 -->
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible">
<!-- Windows 磁貼 -->
<meta name="msapplication-config" content="/browserconfig.xml">
~~~
browserconfig.xml所需的最低xml標記：
~~~
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="small.png"/>
<square150x150logo src="medium.png"/>
<wide310x150logo src="wide.png"/>
<square310x310logo src="large.png"/>
</tile>
</msapplication>
</browserconfig>
~~~
* ?? [瀏覽器配置模式參考](https://msdn.microsoft.com/en-us/library/dn320426.aspx)
<br>
# 瀏覽器（中國）
## 360瀏覽器
~~~
<!-- 選擇渲染引擎 -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">
~~~
<br>
## QQ手機瀏覽器
~~~
<!-- 在指定方向上鎖定屏幕（鎖定橫/豎屏） -->
<meta name="x5-orientation" content="landscape/portrait">
<!-- 全屏顯示此頁面 -->
<meta name="x5-fullscreen" content="true">
<!-- 頁面將以“應用模式”顯示（全屏等）-->
<meta name="x5-page-mode" content="app">
~~~
<br>
## UC Mobile Browser
~~~
<!-- 在指定方向上鎖定屏幕（鎖定橫/豎屏） -->
<meta name="screen-orientation" content="landscape/portrait">
<!-- 全屏顯示此頁面 -->
<meta name="full-screen" content="yes">
<!-- 即使在“文本模式”下，UC 瀏覽器也會顯示圖片 -->
<meta name="imagemode" content="force">
<!-- 頁面將以“應用模式”顯示（全屏、禁止手勢等） -->
<meta name="browsermode" content="application">
<!-- 在此頁面禁用 UC 瀏覽器的“夜間模式” -->
<meta name="nightmode" content="disable">
<!-- 簡化頁面，減少數據傳輸 -->
<meta name="layoutmode" content="fitscreen">
<!-- 禁用的 UC 瀏覽器的功能，“當此頁面中有較多文本時縮放字體” -->
<meta name="wap-font-scale" content="no">
~~~
* ?? [UC 瀏覽器文檔](http://www.uc.cn/download/UCBrowser_U3_API.doc)
<br>
# 應用鏈接
~~~
<!-- iOS -->
<meta property="al:ios:url" content="applinks://docs">
<meta property="al:ios:app_store_id" content="12345">
<meta property="al:ios:app_name" content="App Links">
<!-- Android -->
<meta property="al:android:url" content="applinks://docs">
<meta property="al:android:app_name" content="App Links">
<meta property="al:android:package" content="org.applinks">
<!-- Web fall back -->
<meta property="al:web:url" content="http://applinks.org/documentation">
~~~
* ?? [應用鏈接文檔](http://applinks.org/documentation/)
# 參考資料
* https://gethead.info/
* https://github.com/Amery2010/HEAD
- 第一部分 HTML
- meta
- meta標簽
- HTML5
- 2.1 語義
- 2.2 通信
- 2.3 離線&存儲
- 2.4 多媒體
- 2.5 3D，圖像&效果
- 2.6 性能&集成
- 2.7 設備訪問
- SEO
- Canvas
- 壓縮圖片
- 制作圓角矩形
- 全局屬性
- 第二部分 CSS
- CSS原理
- 層疊上下文（stacking context）
- 外邊距合并
- 塊狀格式化上下文（BFC）
- 盒模型
- important
- 樣式繼承
- 層疊
- 屬性值處理流程
- 分辨率
- 視口
- CSS API
- grid（未完成）
- flex
- 選擇器
- 3D
- Matrix
- AT規則
- line-height 和 vertical-align
- CSS技術
- 居中
- 響應式布局
- 兼容性
- 移動端適配方案
- CSS應用
- CSS Modules（未完成）
- 分層
- 面向對象CSS（未完成）
- 布局
- 三列布局
- 單列等寬，其他多列自適應均勻
- 多列等高
- 圣杯布局
- 雙飛翼布局
- 瀑布流
- 1px問題
- 適配iPhoneX
- 橫屏適配
- 圖片模糊問題
- stylelint
- 第三部分 JavaScript
- JavaScript原理
- 內存空間
- 作用域
- 執行上下文棧
- 變量對象
- 作用域鏈
- this
- 類型轉換
- 閉包（未完成）
- 原型、面向對象
- class和extend
- 繼承
- new
- DOM
- Event Loop
- 垃圾回收機制
- 內存泄漏
- 數值存儲
- 連等賦值
- 基本類型
- 堆棧溢出
- JavaScriptAPI
- document.referrer
- Promise（未完成）
- Object.create
- 遍歷對象屬性
- 寬度、高度
- performance
- 位運算
- tostring( ) 與 valueOf( )方法
- JavaScript技術
- 錯誤
- 異常處理
- 存儲
- Cookie與Session
- ES6（未完成）
- Babel轉碼
- let和const命令
- 變量的解構賦值
- 字符串的擴展
- 正則的擴展
- 數值的擴展
- 數組的擴展
- 函數的擴展
- 對象的擴展
- Symbol
- Set 和 Map 數據結構
- proxy
- Reflect
- module
- AJAX
- ES5
- 嚴格模式
- JSON
- 數組方法
- 對象方法
- 函數方法
- 服務端推送（未完成）
- JavaScript應用
- 復雜判斷
- 3D 全景圖
- 重載
- 上傳（未完成）
- 上傳方式
- 文件格式
- 渲染大量數據
- 圖片裁剪
- 斐波那契數列
- 編碼
- 數組去重
- 淺拷貝、深拷貝
- instanceof
- 模擬 new
- 防抖
- 節流
- 數組扁平化
- sleep函數
- 模擬bind
- 柯里化
- 零碎知識點
- 第四部分 進階
- 計算機原理
- 數據結構（未完成）
- 算法（未完成）
- 排序算法
- 冒泡排序
- 選擇排序
- 插入排序
- 快速排序
- 搜索算法
- 動態規劃
- 二叉樹
- 瀏覽器
- 瀏覽器結構
- 瀏覽器工作原理
- HTML解析
- CSS解析
- 渲染樹構建
- 布局（Layout）
- 渲染
- 瀏覽器輸入 URL 后發生了什么
- 跨域
- 緩存機制
- reflow(回流)和repaint(重繪)
- 渲染層合并
- 編譯（未完成）
- Babel
- 設計模式（未完成）
- 函數式編程（未完成）
- 正則表達式（未完成）
- 性能
- 性能分析
- 性能指標
- 首屏加載
- 優化
- 瀏覽器層面
- HTTP層面
- 代碼層面
- 構建層面
- 移動端首屏優化
- 服務器層面
- bigpipe
- 構建工具
- Gulp
- webpack
- Webpack概念
- Webpack工具
- Webpack優化
- Webpack原理
- 實現loader
- 實現plugin
- tapable
- Webpack打包后代碼
- rollup.js
- parcel
- 模塊化
- ESM
- 安全
- XSS
- CSRF
- 點擊劫持
- 中間人攻擊
- 密碼存儲
- 測試（未完成）
- 單元測試
- E2E測試
- 框架測試
- 樣式回歸測試
- 異步測試
- 自動化測試
- PWA
- PWA官網
- web app manifest
- service worker
- app install banners
- 調試PWA
- PWA教程
- 框架
- MVVM原理
- Vue
- Vue 餓了么整理
- 樣式
- 技巧
- Vue音樂播放器
- Vue源碼
- Virtual Dom
- computed原理
- 數組綁定原理
- 雙向綁定
- nextTick
- keep-alive
- 導航守衛
- 組件通信
- React
- Diff 算法
- Fiber 原理
- batchUpdate
- React 生命周期
- Redux
- 動畫（未完成）
- 異常監控、收集（未完成）
- 數據采集
- Sentry
- 貝塞爾曲線
- 視頻
- 服務端渲染
- 服務端渲染的利與弊
- Vue SSR
- React SSR
- 客戶端
- 離線包
- 第五部分 網絡
- 五層協議
- TCP
- UDP
- HTTP
- 方法
- 首部
- 狀態碼
- 持久連接
- TLS
- content-type
- Redirect
- CSP
- 請求流程
- HTTP/2 及 HTTP/3
- CDN
- DNS
- HTTPDNS
- 第六部分 服務端
- Linux
- Linux命令
- 權限
- XAMPP
- Node.js
- 安裝
- Node模塊化
- 設置環境變量
- Node的event loop
- 進程
- 全局對象
- 異步IO與事件驅動
- 文件系統
- Node錯誤處理
- koa
- koa-compose
- koa-router
- Nginx
- Nginx配置文件
- 代理服務
- 負載均衡
- 獲取用戶IP
- 解決跨域
- 適配PC與移動環境
- 簡單的訪問限制
- 頁面內容修改
- 圖片處理
- 合并請求
- PM2
- MongoDB
- MySQL
- 常用MySql命令
- 自動化（未完成）
- docker
- 創建CLI
- 持續集成
- 持續交付
- 持續部署
- Jenkins
- 部署與發布
- 遠程登錄服務器
- 增強服務器安全等級
- 搭建 Nodejs 生產環境
- 配置 Nginx 實現反向代理
- 管理域名解析
- 配置 PM2 一鍵部署
- 發布上線
- 部署HTTPS
- Node 應用
- 爬蟲（未完成）
- 例子
- 反爬蟲
- 中間件
- body-parser
- connect-redis
- cookie-parser
- cors
- csurf
- express-session
- helmet
- ioredis
- log4js（未完成）
- uuid
- errorhandler
- nodeclub源碼
- app.js
- config.js
- 消息隊列
- RPC
- 性能優化
- 第七部分 總結
- Web服務器
- 目錄結構
- 依賴
- 功能
- 代碼片段
- 整理
- 知識清單、博客
- 項目、組件、庫
- Node代碼
- 面試必考
- 91算法
- 第八部分 工作代碼總結
- 樣式代碼
- 框架代碼
- 組件代碼
- 功能代碼
- 通用代碼