《HTML重構》讀書筆記&思惟導圖

時間 2019-11-20

原文原文鏈接

　　最近讀了《HTML重構》這本書，如下作出本身的總結概括，你們能夠一塊兒學習交流。javascript

　　什麼是重構？重構是在不改變程序行爲的基礎上進行小的改動是代碼基本逐漸完善的過程，一般須要一些自動化工具的幫助。好的網站是須要咱們對代碼進行日臻完美的改善。而搜索引擎優化（seo）是網站重構的主要驅動之一，跟圖片相比搜索引擎更看重文本；跟後端文本相比更看重前端文本，他們更看重標題或元標籤。做者但願經過更多的文本內容取代如圖片、flash等能夠作好SEO。我我的以爲看完了這本書對作 SEO是很是有幫助的css

百度百科對重構的定義是：重構（Refactoring）就是經過調整程序代碼改善軟件的質量、性能，使其程序的設計模式和架構更趨合理，提升軟件的擴展性和維護性。html

　　下面這張思惟導圖，是我對全書大致內容的一個歸納性總結：前端

　　工具html5

　　本書推薦的工具主要包含的是自動化測試，可是我以爲現行的開發環節當中實際用到的會比較少。這裏就推薦一下其餘方面的優秀工具：java

　　1. YSlowgit

　　YSlow是雅虎推出的一款瀏覽器插件，能夠幫助你對網站的頁面進行分析，併爲你提供一些優化建議，以提升網站的性能。戳我查看Yslow-23條規則github

　　2. PageSpeedweb

　　PageSpeed也是一個瀏覽器插件，由google推出，能夠很好地對咱們的Web網站進行優化實踐——幫助你輕鬆對網站的性能瓶頸進行分析，併爲你提供優化建議。chrome

在線分析你的網站
安裝瀏覽器插件（ Chrome、 Firefox）
經過 Insights API在應用中嵌入PageSpeed功能

　　3.其餘優秀工具　　

蜘蛛模擬器：這個工具能夠分析你的頁面，並提供一些優化建議。
圖像SEO工具：這個工具能夠檢查圖片的alt標籤，並提供一些優化建議。
請求檢查器：找出頁面中須要加載哪些資源和服務。
連接檢查器：檢查頁面中內部、外部和無效連接。
HTTP頭檢查：顯示網頁或資源的HTTP響應頭。
社交檢查器：檢查頁面中的社交組件，好比Google+、Facebook、Twitter、Linkedin和Pinterest。
If modified檢查器：檢查頁面是否接受 If-Modified-Since HTTP頭。
Gzip檢查器：檢查頁面是否通過了Gzip壓縮。
CSS delivery工具：檢查頁面中所使用的CSS文件。
麪包屑工具：可根據你輸入的信息提供麪包屑導航的代碼。
CSS壓縮工具：用於壓縮CSS代碼。

　　良構

　　什麼是良構？從技術角度來說：它表示文檔要遵循某種嚴格的結束好比每一個起始標籤都應該有一個結束標籤、元素的開始與結構都在相同的父元素內以及每一個實體引用都要事先定義好。雖然如今多數網站都已經採用：

<!DOCTYPE html> //dtd

　　採用html5<!DOCTYPE> 標籤讓咱們在書寫html標籤語句的時候能夠不須要那麼規範，可是我以爲從文檔的嚴謹性和規範性以及可讀性上而言，遵循xml標準仍是十分有必要的。所謂的良構符合標準：

　　1.全部的起始標籤都應有一個匹配的結束標籤。

　　2.空元素應該使用空元素的標籤語法。

　　3.全部的屬性都必須有一個值

　　4.全部的屬性值都須要用引號括起來

　　5.全部的&號都必須轉義爲&

　　內嵌的JavaScript在這裏會出現問題。Javascript中&是不可轉義的。能夠把腳本移出到一個不必轉義的外部文件中或者把腳本放進註釋中。

　　6.全部小於號<都要轉義爲<

　　內嵌的JavaScript在這裏會出現問題。Javascript不會把<當作小於號。能夠把腳本移出到一個不必轉義的外部文件中或者把腳本放進註釋中。

　　7.只有惟一的根元素

　　8.轉義屬性值中的引號

　　在屬性值中把」轉義爲" ，把 ’ 轉義爲' 。

　　9.全部未預約義的實體引用必須在DTD中聲明

　　10.結束每個實體引用，替換虛構的實體引用

　　XML要求實體引用以分號結尾。

　　11.將名稱改成小寫，全部元素的

　　12.把文本轉化爲UTF-8

　　Utf-8是一個標準的編碼，可運做在全部瀏覽器上，被主流的文本編輯器個工具支持，支持全部Unicode字符。

　　內容　　

修正拼寫錯誤，錯別字
保證全部鏈接的可用性
移動頁面（自動化檢查鏈接）
從新組織URL的結構，對開發者、訪問者和搜索引擎更透明，但要保證舊的URL可以繼續工做
刪除入口頁面（用戶體驗優先）
隱藏電子郵件

　　可訪問性 　　

把圖片轉化爲文本

　　　　做者說了三點

　　　　a、對於視力很差的用戶能夠經過感知來感知文本

　　　　b、能夠加大搜索引擎的結果

　　　　c、能夠提高網站性能，並且能夠節省帶寬成本及訪問者的時間

　　　　做者仍是那句話：HTML文檔只有內容不該該有裝飾

爲表單輸入框添加標籤

　　　　對非隱藏的input,textarea,select等表單元素確保它們都有相應的標籤

使用標準的字段名稱
開啓自動完成
爲表單添加Tab索引

　　　　爲每一個表單添加Tab索引這樣用戶就能夠經過tab鍵進行跳轉了

<input tabindex="1" type="checkbox" />

　　　　有7個元素支持tabindex分別爲：a area button input object select textarea

適當爲較長的網頁添加跳轉
加大輸入框
加入表格描述
加入lang屬性

// en定義語言爲英語
// zh-CN定義語言爲中文

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">

// 若是網頁定義爲XHTML1.1或者XML格式,那麼可使用xml:lang屬性(由於xml:lang屬性是在XML中肯定語言信息的標準用法).

// 若是網頁使用HTML格式,那麼應該同時使用xml:lang和lang屬性.

　　佈局　　　