您的位置: 首页  >  文章  >  重构html：改善web应用的设计

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

分类: 文章 • 2024-10-14 19:43:58

核心

  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) - 标签闭合 - 标签不跨级嵌套 - 属性必须有属性值 - 属性值必须用引号引起来 - &必须转义为 ```&``` - <必须转义为 ```⁢``` - 实体引用必须事先在dtd中进行声明
动机 风险 做法
消除重叠问题；不同重叠元素构建的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 并替换为
搜索
## （三）有效性：改善网站的呈现、可访问和可用性 |动机|风险|做法|备注| |:-------------------:|:-------------------:|:-----------|:-----------| |加入过渡型DOCTYPE声明|如果启用浏览器的怪异模式，添加这个doctype可能导致文档样式偏差
特别注意IE浏览器|除非指定了其他DTD
Tidy默认添加过渡型DTD|浏览器永远不会真正读取DTD
xml解析器/xml工具工具会读取 |删除所有不该存在的标签；现代浏览器不再支持过时的，不推荐使用的标签；删除以节约空间简化文档|依赖于这些标签的旧浏览器样式可能缺失|

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

  1. 缓存
    · ·····合理使用缓存
    使用缓存好处：提高网络本地性能
    使用缓存弊端：无法精确报告网站流量
  2. 使用纯html文本代替flash
    （1）flash使用场景
    跨平台播放最可靠的格式；（是否过时？）
    目前html5推出了
    （2）不应该使用flash的地方
    动画广告
    用户追踪
  3. 增加Web Form2.0的类型
    （1）动机：为浏览器输入界面提供更合适的界面控件
    （2）输入验证对传统html | xhtml dtd来说无效
    （3）浏览器验证： Safari11 无控件样式 chrome，firefox，qq浏览器均显示控件样式
  4. 用mailto链接取代联系表单
<a href="mailto:[email protected]?"  Subject=support%20request">
send me email
</a>
  1. 封禁机器人，蜜罐程序
    使用 robots.txt 来封禁访问，节约带宽
  2. 转义用户输入
    表单提交过滤，防止SQL注入
    php： 方法 mysql_real_escape_string
## （七） 内容 |动机|风险|做法|备注| |:-------------------|:-------------------:|:-----------|:--------| |修正拼写
提高搜索结果位置|-|使用编辑器内置的拼写检查器
生成自定义字典|工具 Aspell| |修复坏链接
坏链接或降低搜索引擎排名|-|自动化检查链接|online link checher| |移动页面
保留旧url的重定向|大部分情况不会更新链接|每移动一次页面，就重定向到新页面|-| |隐藏电子邮件地址
|-|转义为实体字符（十进制，十六进制，百分号）|| #### 疑问？ - 实体的引用是事先定义好的？怎么理解？ - 有些基于固有表达式的固有脚本是不能处理小写形式的？ - 降级使用，理解一下！ 所有指定级别的元素 *.booktitle - ie6问题 ``` * html {left:17%;} ``` - 度量单位：ex |pt ex：css1中定义，相对单位，字体尺寸的一半（x-height） pt：css3中定义，绝对单位，px = pt * DPI / 72 参考文章： https://yq.aliyun.com/wenji/13217 #### 一些概念 -xslt 扩展样式表转换语言 #### 一些知识点补充 - 正则匹配 runoo+b，可以匹配 runoob、runooob、runoooooob 等，+ 号代表前面的字符必须至少出现一次（1次或多次）。

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 ')

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

/*正则匹配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)

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

一些名词解释

标签汤：

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

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

隐藏链接
假链接

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

网站劫持

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

地址重定向

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

关键词堆积

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

相关推荐