合乎WEB规范的网页页面图象的编码精简

2021-01-20 17:48 jianzhan
遵照Web规范的观念,网页页面要主要表现出1种亲和力。那末,对于残障客户来讲,其“阅读文章”器可不可以载入图象提交递的信息内容的。
因此大家会选用1种Using Background-Image to Replace Text的方式,也便是将图象以情况图象的方法“插进”网页页面显示信息,另外以便让残障人员能掌握该一部分信息内容,显示信息该图象的地区用文字加以表明;但又以便让一切正常人不为既看到情况图象又看到图象上的文字而搞混,因此大家又将这些文字掩藏。
也许大家也会说大家能够给图象加alt、加title,这样一切正常客户能看得见,残障客户也“阅读文章”到。但是,大家再想一想,Web规范还强烈推荐应用有效的XHTML文本文档构造,针对插进图象这样1个“实体线”,插进到网页页面是甚么图象便是甚么图象了,当大家必须更换图象时,大家改动HTML文档,若有许多网页页面呢(我大批量改_-!)。因此这一部分图象的插进就“亲和力”和“拓展性”而言,都提议应用“情况图象” “掩藏文字”的方式。自然针对图象热区连接大家另做探讨。
说的都不大了解,還是举事例。
有这样的1张图象,大家要插进到网页页面显示信息,那末一切正常状况下我是应用“<img />”标识的

[Ctrl A 所有挑选开展复制 提醒:可先改动一部分编码,再点一下运作]
在其中,由于访问器将会显示信息不上图象汉语本的字体样式款式,因此大家做成图象显示信息在网页页面中。在当大家必须为这类图象中的文字新做此外1种字体样式的图象,那末如今来处理新图象的显示信息,大家就务必要改动HTML文本文档。而1旦我选用了CSS界定情况图象以后,这些难题都得到解决。

[Ctrl A 所有挑选开展复制 提醒:可先改动一部分编码,再点一下运作]
因此,大家刚开始体会到这类方法的“好”,并以此运用到新的网页页面设计方案中去。自然,以便尽可能精简大家的HTML编码,我还能够这样:

[Ctrl A 所有挑选开展复制 提醒:可先改动一部分编码,再点一下运作]
立即界定 text-indent: ⑴0000px; 将文字显示信息在显示屏辨别率之外的地区。
=======================================
今日向老朋友问了个难题,“有关1个实际效果……图象是用<div>包括1下呢還是立即<img /> ”。
随即否定:不必以便主要表现加上标识,也不必为主要表现用IMG插进照片,主要表现的內容,不放到CSS里去,如何谈分离出来。
网页页面所有进行后,把CSS去掉,看看网页页面,应当是很纯的,都是內容,沒有1点儿主要表现的成分在里边。
因而如醍醐灌顶,如梦初醒,遂检索梳理并了解得此文。