最近读了《HTML重构》这本书，以下做出自己的总结归纳，大家可以一起学习交流。

　　什么是重构？重构是在不改变程序行为的基础上进行小的改动是代码基本逐渐完善的过程，通常需要一些自动化工具的帮助。好的网站是需要我们对代码进行日臻完美的改善。而搜索引擎优化（seo）是网站重构的主要驱动之一，跟图片相比搜索引擎更看重文本；跟后端文本相比更看重前端文本，他们更看重标题或元标签。作者希望通过更多的文本内容取代如图片、flash等可以做好SEO。我个人觉得看完了这本书对做 SEO是非常有帮助的

百度百科对重构的定义是：重构（Refactoring）就是通过调整程序代码改善软件的质量、性能，使其程序的设计模式和架构更趋合理，提高软件的扩展性和维护性。

　　下面这张思维导图，是我对全书大体内容的一个概括性总结：

　　工具

　　本书推荐的工具主要包含的是自动化测试，但是我觉得现行的开发环节当中实际用到的会比较少。这里就推荐一下其他方面的优秀工具：

　　1. YSlow

　　YSlow是雅虎推出的一款浏览器插件，可以帮助你对网站的页面进行分析，并为你提供一些优化建议，以提高网站的性能。戳我查看Yslow-23条规则

　　

　　2. PageSpeed

　　PageSpeed也是一个浏览器插件，由google推出，可以很好地对我们的Web网站进行优化实践——帮助你轻松对网站的性能瓶颈进行分析，并为你提供优化建议。

　　3.其他优秀工具　　

　　

　　良构

　　什么是良构？从技术角度来讲：它表示文档要遵循某种严格的结束比如每个起始标签都应该有一个结束标签、元素的开始与结构都在相同的父元素内以及每个实体引用都要事先定义好。虽然现在多数网站都已经采用：

<!DOCTYPE html> //dtd

　　采用html5<!DOCTYPE> 标签让我们在书写html标签语句的时候可以不需要那么规范，但是我觉得从文档的严谨性和规范性以及可读性上而言，遵循xml标准还是十分有必要的。所谓的良构符合标准：

　　1.所有的起始标签都应有一个匹配的结束标签。

　　2.空元素应该使用空元素的标签语法。

　　<br /> --> <br class=”empty” />

　　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

 

　　简单的总结，希望各位能有所收获。

《HTML重构》读书笔记&思维导图的更多相关文章

  1. SQL反模式读书笔记思维导图

    在写SQL过程以及设计数据表的过程中,我们经常会走一些弯路,会做一些错误的设计.<SQL反模式>这本书针对这些经常容易出错的设计模式进行分析,解释了错误的理由.允许错误的场景,并给出更好的 ...

  2. 原创：ASP.Net状态管理读书笔记--思维导图

    导图文件下载 课前提问几个问题 使用Session 配置 model aspnet_regsql.exe 常见问答 问:为什么Session在有些机器上偶尔会丢失?答:可能和机器的环境有关系,比如:防 ...

  3. ASP.Net状态管理读书笔记--思维导图

    课前提问几个问题 使用Session 配置 model aspnet_regsql.exe 常见问答 问:为什么Session在有些机器上偶尔会丢失?答:可能和机器的环境有关系,比如:防火墙或者杀毒软 ...

  4. JavaScript 中的内存和性能、模拟事件（读书笔记思维导图）

    由于事件处理程序可以为现代 Web 应用程序提供交互能力,因此许多开发人员会不分青红皂白地向页面中添加大量的处理程序.在 JavaScript 中,添加到页面上的事件处理程序数量将直接关系到页面的整体 ...

  5. JavaScript 中的事件类型5（读书笔记思维导图）

    Web 浏览器中可能发生的事件有很多类型.如前所述,不同的事件类型具有不同的信息,而“ DOM3级事件”规定了以下几类事件. UI(User Interface,用户界面)事件:当用户与页面上的元素交 ...

  6. JavaScript 中的事件类型4（读书笔记思维导图）

    Web 浏览器中可能发生的事件有很多类型.如前所述,不同的事件类型具有不同的信息,而“ DOM3级事件”规定了以下几类事件. UI(User Interface,用户界面)事件:当用户与页面上的元素交 ...

  7. JavaScript 中的事件类型3（读书笔记思维导图）

    Web 浏览器中可能发生的事件有很多类型.如前所述,不同的事件类型具有不同的信息,而“ DOM3级事件”规定了以下几类事件. UI(User Interface,用户界面)事件:当用户与页面上的元素交 ...

  8. JavaScript 中的事件类型2（读书笔记思维导图）

    Web 浏览器中可能发生的事件有很多类型.如前所述,不同的事件类型具有不同的信息,而“ DOM3级事件”规定了以下几类事件: UI(User Interface,用户界面)事件:当用户与页面上的元素交 ...

  9. JavaScript 中的事件类型1（读书笔记思维导图）

    Web 浏览器中可能发生的事件有很多类型.如前所述,不同的事件类型具有不同的信息,而“ DOM3级事件”规定了以下几类事件. UI(User Interface,用户界面)事件:当用户与页面上的元素交 ...

随机推荐

  1. MarkDown笔记

    MarkDown是一种轻量级的标记语言,可以比较简洁地格式化文本,所以比较方便地产生可读性良好的文档. 可以使用Markdown: 整理知识,学习笔记 发布日记,杂文,所见所想 撰写发布技术文稿(代码 ...

  2. 模块化管理工具兼打包工具 webpack

    webpack 是一个[模块化管理工具]兼[打包工具] 是一个工具(和seajs,requirejs管理前端模块的方式是不一样) 在webpack一个文件就是一个模块! seajs,requirejs ...

  3. 【PostgreSQL】PostgreSQL添加新服务器连接时，报错“Server doesn't listen ”，已解决。

    PostgreSQL添加新的服务器连接时,报错:

  4. oracle触发器和存储过程的格式

    最近接到一个任务要根据一个表来转移另一个表的数据到第三个表.想了想,用决定用触发器+存储过程的方式来做.有些时间没有写存储过程和触发器了,查了一下资料,确定了oracle的触发器和存储过程的格式. 触 ...

  5. android studio/Intellij idea之proguard实践

    默认情况下,build->Gene Signed APK 反编译后发现,没有混淆... 多次爬stackoverflow才搞定这个问题: 首先 build variants这里由debug设置为 ...

  6. mysql不能插入中文

    mysql不能插入中文 解决办法: 1.打开终端,连接数据库  mysql -u root -p; 2.输入 satus; 查看状态 3.输入 set char set 'gbk'; 4.如果是已有的 ...

  7. C语言dll文件的说明以及生成、使用方法

    最近在搞一些小项目,由于要涉及到跟其它语言进行交互,动态链接库变成了不二的选择.为此也查阅了很多资料,将动态链接库的相关知识在此做一个整理. 一.动态链接库概述 动态链接库(Dynamic Link ...

  8. maven内部运行原理解析

    maven至今还是Java编程语言构建的事实标准,大部分项目还在使用maven来进行构建,因此了解maven内部运行的原理对定位和分析问题还是很有裨益的.本篇文章主要介绍一些maven内部运行过程中的 ...

  9. nginx-(/usr/local/nginx)配置编译

    ./configure \ --prefix=/usr/local/nginx \ --sbin-path=/usr/local/nginx/sbin/nginx \ --conf-path=/usr ...

  10. TCP/IP, WebSocket 和 MQTT

    按照OSI网络分层模型,IP是网络层协议,TCP是传输层协议,而HTTP和MQTT是应用层的协议.在这三者之间, TCP是HTTP和MQTT底层的协议.大家对HTTP很熟悉,这里简要介绍下MQTT.M ...