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

　　工具

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

　　1. YSlow

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

　　

　　2. PageSpeed

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

　　3.其他优秀工具　　

　　

　　良构

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

1
<!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键进行跳转了

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

　　　　有7个元素支持tabindex分别为：a  area  button  input  object  select  textarea

  • 适当为较长的网页添加跳转
  • 加大输入框
  • 加入表格描述
  • 加入lang属性
1
2
3
4
5
6
7
8
9
10
// 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. Java程序员常用工具集

    我发现很多人没办法高效地解决问题的关键原因是不熟悉工具,不熟悉工具也还罢了,甚至还不知道怎么去找工具,这个问题就大条了.我想列下我能想到的一个Java程序员会用到的常用工具. 一.编码工具 1.IDE ...

  2. 2015第30周三Spring常用工具类

    文件资源操作 文件资源的操作是应用程序中常见的功能,如当上传一个文件后将其保存在特定目录下,从指定地址加载一个配置文件等等.我们一般使用 JDK 的 I/O 处理类完成这些操作,但对于一般的应用程序来 ...

  3. jQuery常用工具方法

    前面的话 jQuery提供一些与元素无关的工具方法,不必选中元素,就可以直接使用这些方法.如果理解原生javascript的继承原理,那么就能理解工具方法的实质.它是定义在jQuery构造函数上的方法 ...

  4. 分布式进阶(十) linux命令行下载文件以及常用工具：wget、Prozilla、MyGet、Linuxdown、Curl、Axel

    linux命令行下载文件以及常用工具:wget.Prozilla.MyGet.Linuxdown.Curl.Axel 本文介绍常用的几种命令行式的下载工具:wget.Prozilla.MyGet.Li ...

  5. java 微信开发 常用工具类（xml传输和解析 json转换对象）

    与微信通信常用工具(xml传输和解析) package com.lownsun.wechatOauth.utl; import java.io.IOException; import java.io. ...

  6. Windows 常用工具 & 开发工具 & Chrome插件 & Firefox 插件 & 办公软件

    常用工具 1.FastStone 8.0 2.印象笔记 3.Chrome 4.Beyond Compare 5.Everything 6.有道词典 7.文本编辑软件 EditPlus UltraEdi ...

  7. 盘点Linux运维常用工具(一)-web篇之httpd

    #前言:想把自己学的各种服务进行分类归档起来,于是就写了盘点Linux运维常用工具,Linux方面使用到的web应用服务有httpd(apache).nginx.tomcat.lighttpd,先了解 ...

  8. js常用工具类.

    一些js的工具类 复制代码 /** * Created by sevennight on 15-1-31. * js常用工具类 */ /** * 方法作用:[格式化时间] * 使用方法 * 示例: * ...

  9. Linux 常用工具小结：（5） lftp工具使用

    Linux 常用工具小结:(1) lftp工具使用. 这里会按照一些比较常用的功能列出,并举一个具体的例子逐一解释功能. 通常使用ftp过程是登陆ftp,浏览ftp内容,下载ftp文件,或者上传ftp ...

随机推荐

  1. Java实现 蓝桥杯 算法提高 01背包

    算法提高 01背包 时间限制:1.0s 内存限制:256.0MB 问题描述 给定N个物品,每个物品有一个重量W和一个价值V.你有一个能装M重量的背包.问怎么装使得所装价值最大.每个物品只有一个. 输入 ...

  2. java实现第六届蓝桥杯星系炸弹

    星系炸弹 题目描述 在X星系的广袤空间中漂浮着许多X星人造"炸弹",用来作为宇宙中的路标. 每个炸弹都可以设定多少天之后爆炸. 比如:阿尔法炸弹2015年1月1日放置,定时为15天 ...

  3. Java 8 新特性——检视阅读

    Java 8 新特性--检视阅读 参考 Java 8 新特性--菜鸟 Oracle 公司于 2014 年 3 月 18 日发布 Java 8 ,它支持函数式编程,新的 JavaScript 引擎,新的 ...

  4. https://www.cnblogs.com/mrchige/p/6409444.html

    https://www.cnblogs.com/mrchige/p/6409444.html http://c.biancheng.net/view/2172.html https://www.cnb ...

  5. Rust异步之Future

    对异步的学习,我们先从Future开始,学习异步的实现原理.等理解了异步是怎么实现的后,再学习Rust异步编程涉及的2个库(futures.tokio)的时候就容易理解多了. Future rust中 ...

  6. 7. redux

    1.所有的状态统一放在state中,由store来管理state 2.用户触发一个action行为,由dispatch分发action行为 3.通过store把原有的state的状态值和dispatc ...

  7. NativeXml实例训练时注意事项_1

    NativeXml实例训练: 1)使用NativeXml操作xml文件时,需要将几个单元文件在Library中引用,配置好这个后面的就可自由训练.或按照自己想要的组合折腾.       2)运行程序调 ...

  8. c常用函数-strchr和strrchr

    strchr和strrchr strrchr函数用于查找指定字符在一个字符串中最后一次出现的位置,然后返回指向该位置的指针 strchr函数用于查找指定字符在一个字符串中第一次出现的位置,然后返回指向 ...

  9. Loadrunner12将fiddler跟踪文件转为脚本的后续处理事项

    之前一篇文章说过,Loadrunner12是支持将fiddler的跟踪文件.SAZ直接转成LR的脚本的,好多小伙伴都用了这个方法,但是生成脚本后用LR11运行的时候就出问题了,会发现runtime-s ...

  10. ida 动态调试apk

    1,启动 android_x86_server 2 adb forward tcp:23946 tcp:23946 调试应用命令:adb shell am start -D -n com.droidh ...