重构HTML改善Web应用设计

2021-05-17    分类: 网站建设

重构是在不改变程序行为的基础上进行小的改动,是代码逐渐改善的过程。移除长期累积下来的烂码,以得到更清晰和更容易维护,除错以及添加新功能的代码,这做法不能单纯只出现在编码的后期,甚至是你意识到你的代码已经无从再下手非重写不可的时候,而是从开始开发起,逐渐积累,逐渐修改。以前因为日常编码的随意性,导致问题日益积累,逐步扩散,最后只能推倒重来。如果时间经受不起推倒重来,你别无选择,唯一实现的选择就是重构。

要达到良构,大部分的网站要至少或全部做到以下几点:


所有的其实标签都应有一个匹配的结束标签

空元素应该使用空元素的标签语法

所有的属性都必须有一个值

所有的属性都需要用引号括起来

所有的&好必须转义为&;

所有的小于号都要转义为<;

只有唯一的根元素

所有未预定义的实体应用必须在DTD中声明

针对往日因为个人编程习惯和随意性容易犯的错误,从良构角度思考,整理一下日后构建HTML时,有几点需要特别注意。


更好实现良构的几个要点:



将名称改成小写。

改写为

等,因为XHTML只使用小写名称,所有元素和属性都要小写,和
都不被接收

给属性值加引号。改写成等。一些空格的属性有时候出现有做括号而没有右括号,浏览器不宜定按照你的意愿解析,不同的浏览器有不同的解析效果,这就有可能造成跨浏览器问题。

补足遗漏的属性。改成等。XHTML不支持只有属性名称而没有值的语法。

将空标签替换为空元素标签。XML解析器要求所有的起始标签都有匹配的结束标签

要有对应的


改写为

消除重叠。xxxx改写成xxxx等。不同的浏览器对包含重叠元素的文档所构建的DOM树不一样。在重叠元素面前,javascript,css以及其他需要读取DOM的程序都变得难以创建,排错和维护。

有效性


有效性比良构稍微严格,即不仅要确保文档的语法正确,还要保证语义正确。保证元素和属性只能按自身语义出现在恰当的地方。


有效性是面向未来开发的基石。有效的网站与设备无关,有效的页面为不同的读者传达相同的信息,就算读者使用的是界面不相同的浏览器。


良构和有效性检查是基本的语法约束保证,接下来要保证语义是恰当的。


具体实现方法:


1,加入过渡型DOCTYPE声明


过渡式DTD让你不必要完全语义标记就能让文档通过验证,并且他允许包含i,b和center等这些不推荐使用的表现性元书,因此,在进一步改善文档的语义之前,你可以找出比修复更严重的结构问题。


2,删除所有不存在的标签


3,用CSS替代center,i,font等不被推荐或弃用的标签。


4,把行内(inline)元素,放在块(block)元素中


要做到有效,文档中所有元素是有效的严格性XHTML元素还不够,还必须保证它们之间的正确关系,浏览器和其他程序处理XHTML需要依赖元素间的正确位置。


布局


1,熟悉元素语义


每一个元素都应各司其职:ul是无序列表,ol是有序列表,table是表格式数据,blockquote是应用,h1~h6是标题等。恰当的语义元素有助于屏幕阅读器呈现更容易理解的结构,也能保证不同平台间正确显示。对于初学者,很多本来语义良好的元书,如ul,blockquote,table等,被滥用与实现某种特定布局效果。这些滥用的目的是给网页生成特定的外观,然而这些外观难以跨浏览器,几乎除了设计者自己的电脑,通常很多地方都不通用的。


2,替换表格布局


基于CSS的页面比基于表格的页面更小更简单。


a)编写和编辑更容易,下载更快,


b)通过转向CSS,可以节省带宽。同时外联的css文件可以缓存和重用,不必随每次页面的下载又重下一次。



取代滥用本用于呈现表格数据的table元素而使用表格布局,可以考虑频繁使用的分栏式布局:


1)两栏,左侧固定宽度的侧栏,右边是弹性宽度的内容栏


2)三栏,左右各固定宽度的侧栏,中间是内容。



当然我们的页面也需要漂亮的外观,以帮助我们在竞争中脱颖而出。这可以通过在独立的CSS样式中放置有关表现的信息来实现。CSS用来描述网页的外观,而浏览器可以自由选择不同的样式表或是修改过的样式表。实际上,你可以为不同的浏览器随意发送不同的样式表,也可以为它们独特的能力量身定制。这是响应式设计的基本实现方法。


“响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求。响应式的初衷是为了让信息更好的传递交流,让所有人无障碍的获取信息,同时这也是 Web 的初衷。”


出于方便或者是自身的编码习惯,在修改某种被更改的需求的样式代码时候,我们很容易在html代码中直接镶嵌样式代码。这样的做法除了更快的完成你暂时的任务之外没有任何好处。



4,使用CSS定位替代框架



网站使用框架的理由实际上就两种:


(1)为所有页面引入相同的静态内容,而不用单独编辑每个页面。例如导航,网页头部尾部。也就是说,单独的非框架页面可能比相应的框架页面更耗带宽,因为框架内容每次都要给客户端重新发送内容。


(2)显示多栏外观。例如Java API,包含包和类的列表,主体内容


然而,过多使用框架将降低可用性:


(1)难以标记数千或返回指定页面


(2)难以保存和打印页面


(3)过多的滚动条占据屏幕的宝贵空间


在每一个页面上都有导航和其他相同或几乎相同的内容,对网站来说是非常普遍的,使用CSS取代框架,关键在于设立对应每个框架的div,每个div内容是对应框架里的文档内容。然而,这样做的问题在于,它违反了DRY原则(Don't Repeat Youself,别重复你自己),对于相同的内同,虽然有时候只是很小的变化,但还是需要不断在这一页那一页重复出现。重复内容通常也是代码的坏味道。框架在静态页面上避免恶劣不必要的重复,我提倡清晰,可维护的代码,在不损害用户界面的前提下,我更愿意选择难看的代码而不是难看的用户界面。日常中原始的HTML是重复的,但不是我们必须编辑的,很多时候我们可以通过后台自动生成重复内容。



5,正确标记列表


正确标记列表能够提升可访问性,通常我们在列表中实现跳转和导航。



6,为图片添加width和height属性


width和height属性能让浏览器更快地样式化页面并展现给用户。但注意,这样做,对页面的显示速度有提升,但对下载速度并没有帮助。


出于一般项目开发触觉,改变图片的尺寸意味着要修改HTML,否则图片会奇怪地变大变小。如果需要经常改变图片,比如设计页面是,最好是在最后的阶段插入确定的宽度和高度。

网站标题:重构HTML改善Web应用设计
网页地址:https://www.cdcxhl.com/news/113999.html

成都网站建设公司_创新互联,为您提供建站公司定制开发GoogleChatGPT网站设计关键词优化

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联