HTML重构与网页常用工具
下面这张思维导图，是我对全书大体内容的一个概括性总结：
工具
本书推荐的工具主要包含的是自动化测试，但是我觉得现行的开发环节当中实际用到的会比较少。这里就推荐一下其他方面的优秀工具：
1. YSlow
YSlow是雅虎推出的一款浏览器插件，可以帮助你对网站的页面进行分析，并为你提供一些优化建议，以提高网站的性能。戳我查看Yslow-23条规则
2. PageSpeed
PageSpeed也是一个浏览器插件，由google推出，可以很好地对我们的Web网站进行优化实践——帮助你轻松对网站的性能瓶颈进行分析，并为你提供优化建议。
- 在线分析你的网站
- 安装浏览器插件（ 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代码。
良构
什么是良构？从技术角度来讲：它表示文档要遵循某种严格的结束比如每个起始标签都应该有一个结束标签、元素的开始与结构都在相同的父元素内以及每个实体引用都要事先定义好。虽然现在多数网站都已经采用：
|
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定义语言为中文// 如果网页定义为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重构与网页常用工具的更多相关文章
- Java程序员常用工具集
我发现很多人没办法高效地解决问题的关键原因是不熟悉工具,不熟悉工具也还罢了,甚至还不知道怎么去找工具,这个问题就大条了.我想列下我能想到的一个Java程序员会用到的常用工具. 一.编码工具 1.IDE ...
- 2015第30周三Spring常用工具类
文件资源操作 文件资源的操作是应用程序中常见的功能,如当上传一个文件后将其保存在特定目录下,从指定地址加载一个配置文件等等.我们一般使用 JDK 的 I/O 处理类完成这些操作,但对于一般的应用程序来 ...
- jQuery常用工具方法
前面的话 jQuery提供一些与元素无关的工具方法,不必选中元素,就可以直接使用这些方法.如果理解原生javascript的继承原理,那么就能理解工具方法的实质.它是定义在jQuery构造函数上的方法 ...
- 分布式进阶(十) linux命令行下载文件以及常用工具：wget、Prozilla、MyGet、Linuxdown、Curl、Axel
linux命令行下载文件以及常用工具:wget.Prozilla.MyGet.Linuxdown.Curl.Axel 本文介绍常用的几种命令行式的下载工具:wget.Prozilla.MyGet.Li ...
- java 微信开发 常用工具类（xml传输和解析 json转换对象）
与微信通信常用工具(xml传输和解析) package com.lownsun.wechatOauth.utl; import java.io.IOException; import java.io. ...
- Windows 常用工具 & 开发工具 & Chrome插件 & Firefox 插件 & 办公软件
常用工具 1.FastStone 8.0 2.印象笔记 3.Chrome 4.Beyond Compare 5.Everything 6.有道词典 7.文本编辑软件 EditPlus UltraEdi ...
- 盘点Linux运维常用工具(一)-web篇之httpd
#前言:想把自己学的各种服务进行分类归档起来,于是就写了盘点Linux运维常用工具,Linux方面使用到的web应用服务有httpd(apache).nginx.tomcat.lighttpd,先了解 ...
- js常用工具类.
一些js的工具类 复制代码 /** * Created by sevennight on 15-1-31. * js常用工具类 */ /** * 方法作用:[格式化时间] * 使用方法 * 示例: * ...
- Linux 常用工具小结：（5） lftp工具使用
Linux 常用工具小结:(1) lftp工具使用. 这里会按照一些比较常用的功能列出,并举一个具体的例子逐一解释功能. 通常使用ftp过程是登陆ftp,浏览ftp内容,下载ftp文件,或者上传ftp ...
随机推荐
- （Java实现） 洛谷 P1387 最大正方形
题目描述 在一个n*m的只包含0和1的矩阵里找出一个不包含0的最大正方形,输出边长. 输入输出格式 输入格式: 输入文件第一行为两个整数n,m(1<=n,m<=100),接下来n行,每行m ...
- Java实现蓝桥杯 算法提高 身份证号码升级
算法提高 身份证号码升级 时间限制:1.0s 内存限制:256.0MB 问题描述 从1999年10月1日开始,公民身份证号码由15位数字增至18位.(18位身份证号码简介).升级方法为: 1.把15位 ...
- CSDN账号被冻结了怎么办
CSDN可能因为你的博客里有一些网站链接给你判断为恶意推广广告,冻结, 或者和我一样,在评论区刷屏被冻结, 联系客服即可,向客服提供你的绑定邮箱或绑定手机号,或博客id,客服会给你解冻 PS: 找不到 ...
- Java实现拓扑排序
1 问题描述 给定一个有向图,求取此图的拓扑排序序列. 那么,何为拓扑排序? 定义:将有向图中的顶点以线性方式进行排序.即对于任何连接自顶点u到顶点v的有向边uv,在最后的排序结果中,顶点u总是在顶点 ...
- java实现第七届蓝桥杯凑平方数
凑平方数 把0~9这10个数字,分成多个组,每个组恰好是一个平方数,这是能够办到的. 比如:0, 36, 5948721 再比如: 1098524736 1, 25, 6390784 0, 4, 28 ...
- python自学Day03（自学书籍python编程从入门到实践）
第4章 操作列表 只需要几行代码无论列表有多长,循环都能够让我对列表的每个元素都采取一个或一系列相同的措施,从而高效的处理任何长度的列表. 4.1 遍历整个列表 对列表中每个元素都拿出来,进行一个或者 ...
- eclipse中testNG的两种安装方式
今天给大家带来两种关于testNG中的安装方式:1.在线安装(本人亲测有效!!!)2.离线安装 一.在线安装testNG插件的步骤: 1.给大家提供一个testNG在线的安装的地址:http://dl ...
- 自动网络搜索（NAS）在语义分割上的应用（一）
[摘要]本文简单介绍了NAS的发展现况和在语义分割中的应用,并且详细解读了两篇流行的work:DARTS和Auto-DeepLab. 自动网络搜索 多数神经网络结构都是基于一些成熟的backbone, ...
- Python--字典（三级菜单）
# -*- coding:utf-8 -*- data = { "腾讯":{ "LOL":{ "上单":["诺手",&q ...
- javascript 面向对象学习（二）——原型与继承
什么是原型? 首先我们创建一个简单的空对象,再把它打印出来 var example = {} console.log(example) 结果如下: { __proto__: { constructor ...