Web品质(W3C笔记)

2017-04-21  本文已影响0人  大头鬼w

重要的HTML元素


对于提升Web品质,<DOCTYPE><title>以及<h1>都是重要的标签。

<!DOCTYPE>元素


所有的HTML和XHTML页面都应当使用<DOCTYPE>元素来定义遵照何种HTML版本
DOCTYPE定义了正在使用的HTML版本,并为浏览器提供重要的信息以便其更快速一致地呈现页面
文档类型声明同时也使验证软件可以对页面的语法进行检查

HTML5

<!DOCTYPE html>

HTML 4.01 Strict, Transitional, Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict, Transitional, Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<title>元素


<title>元素是最重要的HTML元素之一。它的主要功能是描述网页的内容
即使标题不是网页的一个可见部分,它对于网页的品质提升依然是重要的,这是因为它在以下位置都是可见的:

<h1> 元素


<h1>标签用来描述网页中最上层的标题
由于一些浏览器会默认地把<h1>元素显示为很大的字体,因此会有一些Web开发者使用<h2>元素代替 <h1>元素来显示最上层的标题的标题。这样做不会对读者产生影响,但会使那些试图理解“网页结构”的搜索引擎和其他人间感到迷惑。
请确保<h1>用于最顶层的标题<h2><h3>用于较低的层级。

样式表


不要使用<font>标签


应使用CSS来设置网页上的字体尺寸。不要使用font标签
使用font标签会增加文档的规模,而且每次改变标准文字的工作都会成为一场梦魇。
使用样式代替<font>标签可使我们更轻松地为网页制作高质量的界面。

请勿使用固定的字体尺寸


不要使用固定的尺寸值。请始终使用相对的尺寸值
这项建议最重要的理由是无法通过浏览器重新调整固定尺寸的大小。
访问者会使用不同的设备(显示器)、不同的浏览环境(光线)以及可能的残疾(弱视)。
通过调整网页的文本尺寸的功能,也可以改变打印页面的文字数目。

请勿使用很小的默认字体尺寸


一些网站会使用很小的文字尺寸,这样就可以向每张页面“塞入”更多内容,或者使页面看起来更加“时髦”。
请不要逼迫用户每次访问你的站点时都要放大文本的尺寸。

始终使用一致的背景颜色


大部分网页都会为不同的文本元素使用颜色。标题和链接的颜色通常与正文文本的颜色不同。
如果你为Web元素定义了颜色,那么同样也应该当定义背景颜色。
如果你不规定背景颜色,可能会使文本很难被识别。

可读性


正确使用字体和颜色可使网站更易阅读。

留意颜色的对比


对于视力不太好的人或者对于不太好的显示设备来说,黑底白字或白底黑字是最佳的。
在亮白色背景上的灰色文字,对比度是很差的,在暗色背景上的灰色文字,其对比度同样很差。
某些搭配,比如黑色和红色,黑色和蓝色,黄色和绿色,都会使人产生视觉疲劳。

留意字母的间距


对于视力比较弱的读者,比较近的字母间距会带有不小的阅读困难。
文字间距适中的文本就比较容易阅读了。
文字间距少的文字难以阅读。

当心你的行距


避免花哨的字体


尽量少用斜体


无障碍(WAI)


能够被残障人士使用的网站才能称得上一个易用的(易访问的)网站。
残障人士指的是那些带有残疾或者身体不健康的用户。

Web Accessibility Initiative - WAI

WAI是一系列计划供Web开发者、创作者以及设计者使用的指导方针——关于如何使内容对残障人士更易用。
这些指导方针的目标是易用性(accessibility),但是也有助于使Web内容可用于更多的浏览器(语音浏览器、移动电话、手持设备),以及更多工作与困难环境的用户(非手持式的、强光、黑暗、弱视、噪音等)。

WAI对你的网站来说很重要吗


每天都有百万计的残障人士在网上冲浪,并且甚至超过百万计的人们正在使用着不良的浏览器设备,或者因为工作在困难环境当中。
假如你的网站缺乏诸如调节字体尺寸、带有文本描述的图形以及便捷的导航,那些人们就无法访问你的信息。
事实上:你的网站剥夺了这些人的权利。
增强网站易用性的理由还有:

使用可调节的字体大小


请使用相对的字体尺寸,这样用户就能够使用浏览器菜单来改变默认的字体尺寸

使用“alt”属性


alt属性允许你为图像(也可以为其它的元素)提供一条相应的文字
有时候浏览器会无法显示图像。具体的原因有:

国际化


网络无国界。

国际字符集


所有的 W3C 标准(自从1996年),包括 HTML、XHTML 和 XML 都定义了一个名为 Unicode (ISO 10646) 内部的内部字符集。
所有现代 web 浏览器都在原生地使用此字符集。而大多数在 internet 上传输的文档并没有使用这个 Unicode 字符集。
正因如此,Internet 客户(浏览器)与 Internet 服务器 之间必须有一种在通信中一致使用字符集的方法。
对每个文档在用的字符集进行标记,对于提升网站的品质来说至关重要。
请始终在 <head> 元素内 使用下面的的元元素:

 <meta charset="x">

把 X 替换为你所使用的字符集,比如ISO-8859-1、UTF-8 或者 UTF-16。

国际日期

请不要使用类似 "04-03-02" 的日期格式。
上面的日期可以表示为2004年3月2日,或者2002年3月4日,亦或者2002年4月3日。
国际标准化 (ISO) 为日期定义的国际标准格式是 "yyyy-mm-dd",yyyy 是年,mm 是月,dd 是日。
如果您使用了 ISO 的格式,那么大多数访问者都能明白你的日期。

上一篇下一篇

猜你喜欢

热点阅读