《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属性.

　　布局　　　

使用Css+Div替换表格布局

　　建立现代网页须要使用与CSS相分离的XHTML不要再使用表格型布局与font标签等表现性元素（//老生常谈）

使用Css定位替代框架
正确标记列表
替换占位图片
添加id属性

　　Web应用程序　　

POST与GET的正确使用

　　如下操做都应该经过POST操做

　　　　1) 定购商品

　　　　2) 签署法律文档

　　　　3) 从CMS中删除页面

　　　　4) 签署申述

　　　　5) 发送电子邮件

　　　　6) 向数据库插入新内容

　　　　7) 打印地图

　　　　8) 操控机器

　　如下操做都应该经过GET操做，由于这是安全的。且没必要强制用户接受

　　　　1) 读取文档

　　　　2) 从CMS下载一份可编辑文档的副本

　　　　3) 读取电子邮件

　　　　4) 查看地图

　　　　5) 检查机器的当前状态

　　经过GET访问的URL能够连接、被爬虫抓取、收藏、预抓取，缓存。GET的形式的URL让用户可使用后退键。总的来讲，在这些状况下GET操做比POST操做对用户更友好。GET形式的URL对搜索引擎也更友好，能够提升搜索引擎排名。

启用 & 阻止缓存

　　启用缓存某些不常改变的资源（如网页icon）能够大大提升用户访问页面的速度，提高用户交互性能。

使用ETag

　　ETag：Etag是URL的Entity Tag，用于标示URL对象是否改变，区分不一样语言和Session等等。具体内部含义是使服务器控制的，就像Cookie那样。

使用HTML替换Flash

简单的总结，但愿各位能有所收获。