HTML重构与网页常用工具

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

  工具

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

  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
时间: 2024-11-09 06:29:27

HTML重构与网页常用工具的相关文章

2015第30周三Spring常用工具类

文件资源操作 文件资源的操作是应用程序中常见的功能,如当上传一个文件后将其保存在特定目录下,从指定地址加载一个配置文件等等.我们一般使用 JDK 的 I/O 处理类完成这些操作,但对于一般的应用程序来说,JDK 的这些操作类所提供的方法过于底层,直接使用它们进行文件操作不但程序编写复杂而且容易产生错误.相比于 JDK 的 File,Spring 的 Resource 接口(资源概念的描述接口)抽象层面更高且涵盖面更广,Spring 提供了许多方便易用的资源操作工具类,它们大大降低资源操作的复杂度

jQuery常用工具方法

前面的话 jQuery提供一些与元素无关的工具方法,不必选中元素,就可以直接使用这些方法.如果理解原生javascript的继承原理,那么就能理解工具方法的实质.它是定义在jQuery构造函数上的方法,即jQuery.method(),所以可以直接使用.而那些操作元素的方法,是定义在构造函数的prototype对象上的方法,即jQuery.prototype.method(),所以必须生成实例(即选中元素)后使用.把工具方法理解成像javascript原生函数那样可以直接使用的方法就行了.下面将

转 常用工具和技术

技术站点 Hacker News:非常棒的针对编程的链接聚合网站 Programming reddit:同上 MSDN:微软相关的官方技术集中地,主要是文档类 infoq:企业级应用,关注软件开发领域 OSChina:开源技术社区,开源方面做的不错哦 cnblogs,51cto,csdn:常见的技术社区,各有专长 stackoverflow:IT技术问答网站 GitHub:全球最大的源代码管理平台,很多知名开源项目都在上面,如Linux内核, OpenStack等免费的it电子书:http://

网页制作工具哪款软件最好?

我是专门制作网页的,刚开始我主要是写后台代码的,后来在这个行业里混,前台也渐渐学会了,刚开始我用的网页编辑器是记事本.最后来的用的是EmEditor,当然中间还用过很多其它的,就我自己的看法谈谈网页制作工具哪款软件最好用吧! 如果您是一位前台网页设计及制作人员,首选网页设计制图软件是PS(Photoshop)cs4 图像处理软件:可以为提供最专业的图像编辑与处理.软件通过更直观的用户体验更大的编辑自由度以及大幅提高的工作效率. 其次是网页制作软件:Dreamweaver软件,该软件已成为专业级网

【iOS开发-116】内存测试管理和优化:Analyze和Profile,以及iOS开发常用工具simPholders、fabric

(1)关于Analyze和Profile的使用和介绍 --使用,长按左上角的Run,会出现Analyze和Profile两个选项.Analyze是静态内存分析,如果有潜在的内容泄露问题会出现蓝色的标记.Profile是动态内存分析,这个比较详细一点,可以看到程序的每个模块占用多少内存等等. 推荐的博客: IPhone开发工具篇-利用xcode profile和analyze进行性能优化 备注:自从有了ARC,内存泄露问题大大减少了,但不代表没有.对内存有疑问或者对于老项目从非ARC转ARC有困难

java 微信开发 常用工具类(xml传输和解析 json转换对象)

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

分布式进阶 十 linux命令行下载文件以及常用工具 wget Prozilla MyGet Linuxdown Cu

linux命令行下载文件以及常用工具:wget.Prozilla.MyGet.Linuxdown.Curl.Axel 本文介绍常用的几种命令行式的下载工具:wget.Prozilla.MyGet.Linuxdown.Curl.Axel 下面就为大家详细介绍一下这些工具. 1. Wget Wget是一个十分常用命令行下载工具,多数Linux发行版本都默认包含这个工具.如果没有安装可在http://www.gnu.org/software/wget/wget.html 下载最新版本. 1.1 编译安

常用工具命令

常用工具命令 常用工具命令 全局命令 项目命令 全局命令 Scrapy 可执行文件命令说明: Fetch 命令 主要用来显示爬虫爬取的工程.如图: 如果在项目目录之外执行命令,则会调用 Scrapy 默认的爬虫来进行网页的爬取. 可以通过 Fetch 附带的参数进行爬取相关的数据,如: --headers 参数来控制显示对应的爬虫爬取网页的头信息. --nolog 参数可以控制不显示日志信息. --spider=SPIDER 参数来控制那个爬虫. --logfile=FILE 参数控制日志存储信

网页浮动工具条

1.自动判断浏览器宽度. 当浏览器窗口小于1024时,工具条会自动隐藏 支持浏览器窗口拖拽 2.当拖动浏览器窗口大小时,工具条位置也会相应调整,始终保持贴在网页主体内容右侧. 用到的javascript代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">