重构html：改善web应用的设计

2018-08-08  本文已影响0人  玉面小猿

核心

  1. 升级网站以支持web标准
  2. xhtml | css | rest

（一）重构

为什么重构？

  1. 难以辨认的代码 && 易于维护和更新的代码
  2. 可用性，更关注于页面的访问者
  3. （本地）缓慢呈现速度
  4. 浏览器表现不一致 ||需要固定浏览器或者分辨率才能正常访问
  5. 需要cookie，flash，pdf，java，JavaScript等非标准技术的支持
  6. 黑客攻击，表单脚本实施注入代码攻击
  7. 搜索排名靠后，搜索引擎更看重文本
  8. 访问体验差，问题难辨别，技术问题or业务问题

何时重构？

做一些力所能及的事情来修复小问题。编写|测试|重构小部分

重构什么？

xml，css，rest

xhtml：

  1. 严格，细微错误就被浏览器拒绝访问；
  2. 减轻跨浏览器排错的难度；
  3. xhtml平台更大，易于利用即将到来的新技术

css:

  1. 表现内容分离，优雅降级，有利于开发分工；
  2. 提取通用规则，只载入一次样式，节省带宽

rest:

  1. 资源通过url定位，通过get进行诸如查询或浏览器等安全无副作用的操作；
  2. 通过post进行诸如购买或添加评论等非安全的操作

工具(fix)

重构代码有可能引入新的问题，所以必须经过测试后才能确定是否能够部署。

JUnit httpUnit HtmlUnit JWebUnit Selenium
关键字 java 开源jUnit扩展 模拟web浏览器；有检查html常用方法 高层API，易于编写和扩展 功能测试，验收测试，浏览器中运行
测试代码 java html html assertion&更少直接的java代码 html

Tidy:原创html修复器

-asxhtml 命令行选项：
将html转换成良构的xhtml并保存在原文件上（-m选项的作用）
-clean 选项
将废弃的表现性元素替换css标记

Tidy&TagSoup比较

Tidy：对问题有时会放弃或者征求帮助，对于不知如何去修复的问题，不尝试修复。
TagSoup：java编写的开源html解析器
最终一定会输出良构的代码，不会提示处理不了而需要手工修复的部分。

（二） 良构：良构比有效性更重要

基本原则(2b2s2&1dtd)

动机 风险 做法
消除重叠问题；不同重叠元素构建的DOM树不一样 文本本身存在重叠问题
1.交换结束标签2.父级元素关闭，另一元素重新打开
重新编码为 UTF-8；解决跨平台页面编码 需控制http响应
配置复杂		 Apache：配置 http.conf .htacess
转义小于号；未转义的>后的字符可能被隐藏 改善网页 正则搜索 手工修复
转义&；未转义的 &号会对读者隐藏内容 - 使用Tidy | TagSoup |正则匹配
转义引号 - 手工修复
加入xhtml doctype
处理实体引用；可以使用html实体引用的全集		 浏览器关闭怪异模式
可能影响布局		 搜索<html\w 并替换
使用tidy添加
xml要求实体以分号结尾；防止实体后面没有空格的情况 - 有目的搜索替换
手工修复
xml要求文档有独立的根元素；保证浏览器解析一致 - 搜索不包含<html <head <body 的文档
包含文本段落表格等，body是必需的
加入xml命名空间；很多浏览器扩展只有正确命名空间下会找到预期html文档 - 确认是否有人做过部分修改？
搜索 http://www.w3.org/1999/xhtml
搜索 <html \s 并替换为 <html xmlns='http://www.w3.org/1999/xhtml'>
搜索 <html smlns='http://www.w3.org/1999/xhtml'>

（三）有效性：改善网站的呈现、可访问和可用性

动机 风险 做法 备注
加入过渡型DOCTYPE声明 如果启用浏览器的怪异模式，添加这个doctype可能导致文档样式偏差
特别注意IE浏览器		 除非指定了其他DTD
Tidy默认添加过渡型DTD		 浏览器永远不会真正读取DTD
xml解析器/xml工具工具会读取
删除所有不该存在的标签；现代浏览器不再支持过时的，不推荐使用的标签；删除以节约空间简化文档 依赖于这些标签的旧浏览器样式可能缺失 <multicol\s[^>]>搜索 -
为图片添加alt属性；帮助视力受损的用户；搜索引擎优化 需要时间、精力投入，循序渐进 正则匹配除了alt以外的所有可能属性 1、注意正确的alt文本要能代表图片的意义；
2、逻辑内容的alt文本应该为空，提高用户体验
<object>替换为<embed> 使用整洁、标准的标记需要大量的手工编辑 除了 width，height，id和achieve之外，所有属性都可以转换为param元素 -
加入严格性doctype声明
删除不推荐的表现性元素		 手工投入 将声明指向严格型dtd <!DOCTYPE html PUBLIC "-//w3c//dtd xhtml 1.0 Strict //en" "dtd/xhtml1-strict.dtd" >
css代替<center>/<font> 非常旧的浏览器会忽略 text-align:center font是呈现不是语义
修复问题不用tidy
<em>|css代替<i> 非常旧的浏览器不支持css样式 替换为css，lang等来代表斜体 <i>用来表达某些东西的标题
严格型html使用cite以更好的表达这种含义
<strong>|css代替<b> 非常旧的浏览器不支持css样式 使用严格型dtd做简单验证
快速搜索		 <b>粗体不应该着重的情形：数学物理工程中的向量
书籍索引中的页码
<img>元素属性转换为css属性 非常旧的浏览器呈现问题 使用style属性和内联css 需要改写的属性：align，border，hspace，vspace
用<object>代替<applet>
<--只能处理小程序		 难看冗长的代码 严格验证找出需要修复的applet元素

（四） 布局

  1. 布局代替表格
  2. 使用css定位替代框架
  3. 将内容放在最前面
  4. 正确标记列表
  5. css替代缩进
  6. 为图片添加width height

（五）可访问性

  1. 用户测试
    选择不同类型的用户进行测试
    （年龄/视力）
动机 风险 做法 备注
图片转为文本
优化搜索结果		 不同浏览器有轻微变化 使用html&css制作 -
表单输入框添加标签 不影响布局反而能改善 input textarea select 至少保证有一个label元素 for属性指向相应字段的id
使用标准的字段名称
浏览器可以自动填写很多信息		 重写后台代码 搜索表单中的常见输入替换为标准字段 -
开启autocomplete
避免重复		 网管认为可能存在安全问题 图书馆管理员将浏览器设置为重启时不记录信息 不记录cookie，表单，书签，历史和其他私人 数据
为表单添加索引 经过认真考虑的tab顺序要比浏览器默认的好 添加tabindex字段到 input上 tab属性显示指定，防止跳到链接上
加入跳过机制
帮助屏幕阅读器用户		 无 设置位于开头的跳过链接 -
添加内部标题
帮助视觉障碍的用户		 重写样式表 搜索headline等关键类修改 -
链接&标题重要的放前面
帮助屏幕阅读器的用户		 偶尔不通顺 1.反转风格
2.避免开头的几个单词是重复的		 -
加大输入框，方便用户输入 布局修改 更多的空间总比更少的好 -
加入表格描述，summary/caption元素
帮助用户找出自己所在的位置		 描述是有益的补充 caption 完整描述表格的标记文本
summary描述表格的纯文本
添加scope
尽量简化表格		 -
根元素添加lang属性
语言识别对搜素引擎、屏幕阅读器拼读十分重要		 无 替换 xhtml1.1，lang被废弃 xm:lang是唯一选项

（六）web应用程序

  1. POST/GET使用
    get使用场景总结：
    1.)爬虫抓取；收藏；预抓取；缓存；重用；其他自动访问；
    2.)返回数据；简单浏览操作
    2.）url让用户可以使用后退键；

-get对搜索引擎更友好；可以提高搜索引擎排名
-url可以被缓存，通过get的流量会比post小

post使用场景总结：
1.）下订单；签署协议，添加新评论等需要确认的页面
2.）安全性要求高，表单提交页面；

  1. 缓存
    · ·····合理使用缓存
    使用缓存好处：提高网络本地性能
    使用缓存弊端：无法精确报告网站流量
  2. 使用纯html文本代替flash
    （1）flash使用场景
    跨平台播放最可靠的格式；（是否过时？）
    目前html5推出了 <video> <audio>
    （2）不应该使用flash的地方
    动画广告
    用户追踪
  3. 增加Web Form2.0的类型
    （1）动机：为浏览器输入界面提供更合适的界面控件
    （2）输入验证对传统html | xhtml dtd来说无效
    （3）浏览器验证： Safari11 无控件样式 chrome，firefox，qq浏览器均显示控件样式
  4. 用mailto链接取代联系表单
<a href="mailto:support@ticorp.com?"  Subject=support%20request">
send me email
</a>
  1. 封禁机器人，蜜罐程序
    使用 robots.txt 来封禁访问，节约带宽
  2. 转义用户输入
    表单提交过滤，防止SQL注入
    php： 方法 mysql_real_escape_string

（七） 内容

动机 风险 做法 备注
修正拼写
提高搜索结果位置		 - 使用编辑器内置的拼写检查器
生成自定义字典		 工具 Aspell
修复坏链接
坏链接或降低搜索引擎排名		 - 自动化检查链接 online link checher
移动页面
保留旧url的重定向		 大部分情况不会更新链接 每移动一次页面，就重定向到新页面 -
隐藏电子邮件地址
 - 转义为实体字符（十进制，十六进制，百分号）

疑问？

* html  {left:17%;}

一些概念

-xslt 扩展样式表转换语言

一些知识点补充

runoo*b，可以匹配 runob、runoob、runoooooob 等，* 号代表字符可以不出现，也可以出现一次或者多次（0次、或1次、或多次）。

colou?r 可以匹配 color 或者 colour，? 问号代表前面的字符最多只可以出现一次（0次、或1次）。

一点点实践

      <object width="640" height="450" 
             classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
              codebase="http://apple.com/qtactivex/qtplugin.cab"> 
              <param name="src" value="quicktime.mov"/>
              <param name="controller" value="false"/>
              <param name="autoplay" name="true" />
      </object>        

/*转义大于号*/
let reg1 =/>\s/g
let s2 = "x &gt y ====> y < x ----> 可以匹配嘛 > " ;
s2.replace(reg1,'&gt ')
大于号转义 
/*正则匹配p标签*/
let reg =/\<\/?p\>/g

let s='
&copy 2007 TIC Corp
if( i &lt 7) {
Ben &amp Jerry's Ice Cream
}'
let reg = /&[^;]*\s/
s.match(reg)
实体以分号结尾 查找

一些名词解释

标签汤：

DIV一锅粥，不管什么地方都用一大堆的DIV标签去写，增加了页面的标签污染，带来的问题：页面加载慢、需要写更多的CSS、代码不容易维护等等。
这种DIV综合症基本上来源于对样式表基本工作机制的误解。比如一个人写了一个3层的DIV嵌套，给每个DIV添加对应的样式，如第一个DIV设置背景色，第二个设置外边距，给第三个设置字体大小，其实他没有意识到的是，除非绝对必要，这些属性都可以合并到一个div里去实现。
另一个原因似乎是想用DIV标签去替代诸如H1/H2/LI等更恰当的标签，这是应该避免的做法，因为可能会给使用订阅器、旧的浏览器或者手机浏览器的用户带来问题。

黑帽搜索引擎优化？
使用所有作弊或可疑手段来提高网站排名；
【百度百科】
典型的黑帽搜索引擎优化，用程序从其他分类目录或搜索引擎抓取大量搜索结果做成网页，然后在这些网页上放上Google Adsense。所以即使大部分网页排名都不高，但是因为网页数目巨大，还是会有用户进入网站，并点击Google Adsense广告。
【手段】

隐藏链接
假链接

通过在自己客户网站上使用隐藏链接的方式连接自己的网站或者是其他客户的网站

网站劫持

将别人的网站内容或者整个网站全面复制下来，偷梁换柱放在自己的网站上。

地址重定向

将别人的网站内容或者整个网站全面复制下来，偷梁换柱放在自己的网站上。

关键词堆积

很多站长在优化关键字的时候，堆积了大量关键字，让搜索引擎以为网页具有相关性，关键词堆积技术利用一长串重复性的关键词来蒙混搜索引擎；

上一篇下一篇

猜你喜欢

热点阅读