这份 HTML 初级教程假设你没有任何 HTML 和 CSS 的知识背景. 学习基本的 HTML 十分容易,只要你能从头到尾按照每一步骤来实践.最后 我们会将每一步综合起来,以便我们继续学习 CSS 初级指南. 需要记住的是,HTML 和 CSS 是关于内容(HTML)和表现(CSS)的一切.HTML 不过是有精美结构的内容罢了, 是我们将要在下一步学习的 CSS 则是用来格式化 内容的. 或许你已经留神过其他的 HTML 的教程,你可能会发现它们提及一些 HTMLDog 没有的东西.这是因为许多方法已经过时,不符合标准或者只是平白 的坏实践.从一开始就在脑海中形成走对的路的思想最终可以帮助你掌握得 更好. 绝大部分的 HTML 要素并不比你电脑上的其他要素要难——只不过是一大 堆归类的文件放置在一大堆的文件夹里面而已. HTML 文件与简单的文本文件无异,所以开始编辑 HTML 你只需要一个简单 的文本编辑器.记事本就是一个例子(在 Windows 里可以从程序-〉附件的菜单 中找到,如果你使用的是 Linux,恭喜你,无论是控制台或者桌面环境,你都有 更多更好的选择,比如控制台的 vi 以及各种 vi 变种,GNOME 的 Gedit,KDE 的 kate 等等——译者注) . 在你的文本编辑器键入以下内容: 这是我的第一个网页 现在建立一个 HTML 的文件夹, 然后以 myfirstpage.html 文件后缀 ( .html 必须明确指定——一些文本编辑器,像记事本,否则会自动把文件保存为.txt 文件)的文件名保存起来. 展示 HTML 文件的最终效果,不需要连接到网络.打开 Internet Explorer,或 者其他网页浏览器(Firefox 现在已经是一个潮流,下载一个吧!对你制作网页十 分有用——译者注) ,在地址栏——你浏览网站时键入地址的地方,键入你刚才 保 存 文 件 路 径 ( 比 如 , C:\html\myfirstpage.html 或 者 在 Linux 中 , , /home/myname/html/myfirstpage.html. ) 哇噻,看见了吗?你的第一个网页.怎不令人兴奋呢!所有的过程只是键入 几个单词而已.

　　我们上述的只是使用最基本的文本编辑器,如记事本,vi,但你可能更愿意 使 用 专 门 的 网 页 制 作 软 件 如 Macromedia Dreamweaver 或 者 Microsoft Frontpage. 然而你使用这些软件时你得十分小心,尤其是,如果你是初学者,这些软件 会给你的网页带来不必要的或者不标准的代码(甚至是垃圾代码——译者注) . 你要是真想严肃认真地学习 HTML,你应该读完本站提供给你的整个教程, 以便你至少能对网页设计到底是怎么一回事儿有一个基本的了解. 上面提到的网页制作软件永远不会给你整个网页编写的控制权, 除非你手工 编写代码.

　　尽管 HTML 的基础是纯文本,但我们还是需要多一些东西才能使纯文本文件 变成合法的 HTML 文件.

　　HTML 基本的构成包含标签,标签围绕着内容,赋予内容某些意义. 按照下面改进你的文件: Example Source Code [这是我的第一个网页 /body /html 保存文件,回到浏览器界面和选择刷新 (这会重新装载网页) . 网页的外观没有任何改变,HTML 的目的是表达内容,而不是表达表现,这 个例子现在已经定义了网页一定的基本元素. 第一行以!DOCTYPE..开始是为了让浏览器知道你到底要做什么.你可能还 不知道自己在做什么, 但接受它很重要. 如果你不这样做, 浏览器将用 quirks

　　(奇怪的)模式来表现你的网页.现在还不必担心,当然你需要了解或者学习的 话可以看看 HTML 高级教成的 进一步学习文档类型 .当前,只需要记住把这 一行放在文件的顶端就可以了. 言归正传,html是隔开其他内容的起始标签,它告诉浏览器,位于自己与 闭合标签/html之间的就是是 HTML 文档.在body和/body之间的是这个文 档展示在浏览器上的主要内容.

　　/body和/html关闭他们各自的标签.所有的 HTML 标签都要关闭.尽管 老版本的 HTML 允许某些标签不关闭,但最新的标准要求所有的标签都要关闭. 无论如何,闭合标签是一个好习惯. 并不是所有的标签都像html/html一样关闭,有的标签不用绕在内容外 面,它们是自关闭的.比如断行的的标签是这样的:br /.呆会我们还有这方 面的例子.你所需要记住的是,所有的标签都必须关闭,以及,大部分的内容都 在标签之间,他们的格式是这样的:起始标签 - 内容 - 闭合标签.

　　html head title我的第一个网页/title /head body 我的第一个网页 /body /html 你可以看到,我们已经增加从head标签和title标签开始的两个新元素 (看看他们是怎么关闭的) . 头元素(从起始标签head到闭合标签/head之间的内容)出现在主体元 素(从起始标签body到闭合标签/body之间的内容)之前,包含将在主体元 素信息之前装载的信息.这些信息不会出现在浏览器窗口中. 随着我们进一步学习,你会看到更多能够插入头元素的其它元素,但最重要 的还是标题元素. 如果你从浏览器查看这个网页(像前面一样已经保存和刷新) ,你可以看到 这是我的第一个网页 出现在浏览器窗口的标题栏. 你键入的位于标题 (title) 标签的文本已经变成了这个文档的标题, 惊奇吧?假设把这个网页增添到你的收 藏夹或者书签,你会看到标题也会出现在这里.

　　你可能期望你的页面展示出像所你键入得一样格式,分为两行,但是你会看 到: Example Source Code [这是我的第一个网页多令人激动 这是因为浏览器不会关注你的代码是怎么写的,也丝毫不关心空格(就算你 键入这是我的第一个网页 多令人激动 ,结果还是是一样的) . 要文本以不同的行来显示,你必须明确地指出. 按照下面改进你的代码: Example Source Code [这是我的第一个网页/p p多令人激动/p p 标签代表 paragraph,即段落. 查看结果,这两行终究以两行来显示. HTML 文档的内容应该跟书籍或者文章一样,在适当的地方应该划分段落.

　　换行标签可以用来打断成两行,像下面: 这是我的第一个网页br / 多令人激动 但是,这个方法已经严重被滥用来划分段落,它不应该使用在预计分段的两 段文本中. (是什么结构,该用什么标签就用什么标签,不是为断行而分段或 者为分段而断行——译者注) (因为没有任何东西在换行标签之间,所以没有闭合标签,它是用/在 br 后自闭合的. )

　　现在你已经创建了一个独立的网页,所有的都显得不错.使因特网显得特别 的,是因为它把所有东西都连接起来了. HTML 中的 H 和 T 代表 HyperText,即超文本,表示着一个由连接文本所构成 的系统. 锚标签 a 用来定义一个连接, 但是还是需要为锚标签增添其他的东西——连

　　a 标签允许你为连接打开新窗口,而不是取代当前窗口,初听起来似乎是 一个不错的主意,因为它不会让用户离开你的页面. 但是,有很多理由证明,你不应该这样做. 从易用性的观点来看,这种方法破坏导航.最常用的导航工具是浏览器上的 后退 ,打开新窗口使这个功能失去了作用.

　　更广泛地,还是从易用的观点来看,用户不需要到处都是弹出的新窗口.如 果用户需要打开新窗口,他们有权利(是的,有权利.不要强行干涉别人意志, 不是很好吗?在一般情况下,建议你尽量不要使用新窗口——译者注)让自己来 控制.

　　都是文本的话看起来让人感到乏味和无聊,自然,网页不应该仅仅是文本而 已(呵呵,对于一些技术性的文档,我想,文本就已经严重足够了——译者注) , 它是多媒体的,最常见的形式就是图像. 图像标签 img 用来为 HTML 添加图像,像下面这样改进你的代码: img src=属性告诉浏览器图像的地址.就像 a 标签一样,它可以是绝对的,如示 范所示,但更多时候它是相对的.比如,你拥有自己的图像且已经另存为 alienpie.jpg 放 置 在 images 文 件 夹 下 , 代 码 可 以 这 样 写 img src=images/alienpie.jpg... 长度属性 width 和高度属性 height 是必需的(Zeldman 的恶名昭著的 《Designing with Web Standards》 (中文版《网站重构——应用 Web 标准进行 设计》已经出版,推荐翻译者之一的著名设计师 ajie 的网站网页设计师,你要 是没有访问过,赶紧去,保准你收获不小! )中说,width 和 height 不是必须的, 这可以节省带宽.平时做网页我也不喜欢用这两个属性.——译者注) ,因为浏 览器在下载过程中能够计算出图像占据的空间, 否则浏览器可能会产生一个页面 的跳跃,因为事先并不知道图像要占用多少空间,以致于破坏页面布局. alt 属性表示可替代的描述.这是为不能或者不选择图像显示的客户端着想 (比如终端浏览器 lynx,不能显示图片,但可显示 alt 中的文本.最坏的情况 是,你写错了图片的文件名或者路径,即使在图形浏览器中图片显示不出,但仍 可显示出 alt 中的文本,不会让访问者造成不必要的误解.什么情况下我们都推 荐你,一定记得使用 alt.——译者注) .在最新版本的 HTML 版本中,这是不可 缺少的属性. 注意 给网页创做图像虽然不是本站的主题, 但我们还是有一些对你有用的东西要 说. 经常被用到的图像格式是 GIF 和 JPEG.他们都是压缩过的格式,有各自十 分不同的用途. GIF 图像不超过 256 色,但可以保持原有图像的色彩.色数越低,图像文件 就越小.

　　GIF 应该用在有纯质颜色的图像上. JPEG 使用十分精确的算法来压缩图像,对原图像有些微的改变.压缩程度 越低,图像文件越大,从而图像更清晰. JPEG 应该使用在要逼真描绘的诸如摄影的图像上. 网页设计初学者需要处理的文件可能就是图像文件了, 忽视图像过大是初学 者常犯的错误. 网页下载应该尽可能快, 想想看, 一个使用少于 7kb 每秒的 Modem 联网的人要用多少时间来下载你的整个页面. 你必须在图像质量和图像文件大小之间作出选择. 许多现代的图像处理软件 允许用最佳方式压缩图像,但同样是一个冒险,或者产生错误. 译者有话说:显然,现在还没有谁推荐 PNG 格式的图像,可能只因为 IE 对 其糟糕的支持.GIF 到目前为止还没有解决专利问题,使用它还是得冒侵权之危 险. PNG 很有潜力, 同样也具有透明能力, 色数也不止 GIF 的可怜的 256 色而已, 却具有 JPEG 的高清晰,高保真度,这也是我,以个人的立场向你推荐的原因. 请参考 GIF 还是 PNG.

　　曾经,很久以前,当因特网还是用线串起少量薄纸片的时候,元标签就是因 特网的街头公告员…… 元标签对浏览器窗口中的内容不做任何事情, 它们用在关于页面的像搜索引 擎的归类目录信息中.

　　在 HTML 初级教程中我们教授了无序列表和有序列表,很不幸,很像 Peter Cushing 的博士 Who,自定义列表很容易被忽略.可能是因为自定义列表需要比 无序列表和有序列表更多的设置和似乎更少用. 当遭遇一系列术语与解释的列表 (比如术语表)时,自定义列表就会很有用了. dl 元素像 ul 元素和 ol 元素一样确立列表.不同的是,自定义列表用 dt (definition term,定义术语)元素来代替 li 元素,其后跟随 dd(definition description,定义描述)元素. 不局限于一个 dt 跟着一个 dd,而是任意的.比如有很多同义词,就可能一 个 dt 跟着许多 dd.如果有一个有许多不同意义的词,就可能许多 dd 后只有一 个 dt. Example Source Code [

　　呼,说完了…… 注意 别对 Javascript 失去自制力.最好是少用.一个使用 Javascript 的网页存 在严重降低易用性的风险,而很多东西可以代替它,比如服务器端脚本语言 PHP 或 ASP 等.

　　这次着眼于一些童话世界和史前时代的 HTML 标签. 它们是被 HTML 标准抛弃 的不良,肮脏,十足丑陋的,胡乱荒谬的属性,只能部分地工作在一个次版本的 浏览器上或者可以被新标签取代的标签. 有人建议我们不要歌颂标准尽管我们教授基于标准的 HTML 和 CSS,但如果 这样的话,用户(特别是初学者)会遭遇不良的入门方法和不良练习,同时他们 并不知道哪里出错了.所以我们的答案是:一份拒绝不良标签的指南. HTML 已经尝试去除表现和朝向内容发展,导致这样一个基本原理:从表现 (CSS)中分离出内容意义(HTML) .这将会给网页减肥,因为一个表现指令集合 (以外部 CSS 文档的形式)可以应用到多个页面.这也会使网站更易于管理因为 全局变动可以从修改一个单独的文件得到. 部分不良标签基本上是表现标签(比如 small) ,它们可以用更有意义和更 简单的 CSS 规则取代. 其他的不仅用于表现, 而且还是不必要的庞大 (比如 font 标签)或者对可用性有害的可恶的(比如 blink) .

　　下面这些是你可能会经常碰到的可以有更好选择的标签: Example Source Code [◆ b 可以用来产生粗体元素.使用 strong(意味着强烈强调)代替更有意 义,或者用 CSS 来完成这项工作,增加 font-weight: bold 的规则,用来表明粗 体元素. ◆ i 可以用来产生斜体元素.使用 em(表示强调) ,这也更有意义.或者可 以用 CSS 来表现斜体:font-style: italic ◆ big 可以产生更大字体.使用标题(如 h1,h2 等,当文本本来就是一个 标题时)代替,增加了意义,或简单地在 CSS 中使用 font-size 属性,获取更多 的控制权. ◆ small 可以产生小字体.CSS(font-size)再一次取得更多的控制权. ◆ hr 可用用来展现一条水平线.在 CSS 中用 hr 设计很少见,CSS 的

　　border-top,border-bottom 属性或者朴素的图像做这个效果会更好. 上述的标签与最新的 HTML 标准尽管都兼容,但对内容却没有任何好标签应 有的意义.They could be more useful but they arent particularly harmful, and might easily be mistaken for innocent butter-wouldnt-melt-in-their-mouth nuggets of pure goodness when standing next to the following filthy tags. ◆ u 可以为元素产生下划线.它提醒着下划线文本还很多连接关联.这就 是这个标签死了很久的原因——你不必给非连接文本下划线. ◆ center 可以用来居中在元素内部的元素. 属性 text-align 允许不仅 CSS 仅是 center,还有 left,right 和 justify. ◆ menu 用来创建菜单列表.它并没有 ul 做的完美,在因为无序列表更通 用,ul 高高地站在 menu 的尸体上. ◆ layer 和 div 元素相似,都由 CSS 绝顶位置.这仅仅能在老版本的 Netscape 中工作,所以再也没有什么用. ◆ blink 或者 marquee.大声说不!它们应该像本身意义一样被期待,但有 着十分有限的支持,和,只会产生非常,非常恶心的笑话. ◆ font,可以用来定义元素的字体名称,尺寸和颜色,在标签世界中理所 当然地获得了臭名昭著标签之王荣誉称号.旧的网站(甚至新的也有)像满世界 的瘟疫之蚁一样布满整个页面.大部分的 font 标签激增是从网页制作软件带来 的,把 font 标签包括颜色和尺寸用在每一个元素.font 标签被滥用到出现在当 前的每一个重复元素的(如,每次你使用 p 元素) ,而 CSS,则可以用一条简短 的代码来应用重复元素,甚至控制整个网站.使用 CSS 方法,不仅可以使页面比 被大量 font 标签寄生的更苗条, 而且更容易维护因为你所需要做得只是改变 CSS 文件中的一行,而不是逐一修改每一个 font 标签.这也增加了维护一个一直保 持设计风格一致的网站的可能性.font 标签和不恰当的表格使用是两个产生网 页不必要臃肿的主要原因.

　　保留标签的表现属性如图像的 width 和 height,表格的 cellpadding 和 cellspacing,是由于这些元素经常使用不同的值.这不是完美的解决方案,但 如果你的网页有大量的图像和表格,你没有其他的明智选择,只好使用它们. 最让人难以理解的表现属性是 textarea 标签,它仅有 cols 和 rows 两个合 法属性,在最新的 HTML 版本中也是必须的. 良好标签,不良使用 要进入你的卧室你可以弯腰通过一个狗洞,但等等,还有一扇有把手的为人 类准备的门!哇,看——刚好适合一个进入. 使用 HTML 标签 (好标签) 无论相信与否 , (相信它!, ) 有一个很好的的理由: 你使用它们有一个好前提,你就会有一个更好的结果. 网页本身对用户来说,比起 HTML 标签语法语义更易用,屏幕阅读器常会在 遇到一个 ul 标签或者有着 h1 或 h2 的标题标签时强调突出它们. 在 HTML 标签世界中最被滥用的就是表格了.表格常常用来布局,但表格应 该仅仅只用来展示表格式数据,就如它们本身的设计意图.不用表格的布局方法 不是追求开悟的某种禅,它不仅可以显著地为网页减肥,而且更易于维护和重新 设计.

　　有时侯设计者还会用在这里提到的这些标签和属性(特别是用表格来布局) 来做过渡型的设计——既可以工作在老版本的浏览器上(尤其是 Netscape4) , 也可以工作在现代浏览器上. 表格确实可以在 CSS 不称职的 Netscape4 上有更强 的表现控制.很不幸,这些用户很少而且越来越少了,而展现表格布局的缺点一 览无遗的移动设备用户越来越多.上述的无表格设计可以预防这些缺点,尽管对 一小部分的用户有些许的表现改变,但还能在所有的浏览其中保持着完全的功 能.

　　Goldilocks 认为喝上一杯麦片粥是一个不错的注意,但三个硕大的肉食哺 乳动物突然出现,把她丢出窗户.框架就是装麦片粥的杯子.它们看起来似乎不 错,但已经到了濒危阶段而且很快就会消失. 大部分的网站并不是用框架,而一般用户也会把一个文档当作一页. 有些情况,如你要防止用户不能把特定的网页添加到书签,又如你希望用户 用 Email 或即时聊天软件推荐特定的网页,又或你想把整个网站变得十分复杂, 让使用屏幕阅读器的用户在框架之间频繁操作,还或者你想迷惑搜索引擎,够了 够了,你使用框架吧! 总之,框架只会增加复杂性和丧失可用性.

　　只要你遵循下列规则,你不会在犯错上有前途: 1) 一个标签或者属性就算只有一点点的跟表现搭上, 都不要使用. 那是 CSS 的事.并且 CSS 做得更好. 2)把标签使用在如它的名字所暗示的用途上.表格标签是用在表格式数据 上的.标题标签是用在标题上的.等等等等. 3)特定的内容用恰当的标签.列表用 list,标题用 hx(x = 1 - 7)等等等 等.

　　因为 HTML 初级教程和 HTML 中级教程持使用最新 HTML 标准(XHTML 1.0 以 上版本)的立场,可能某些没有读过初级和中级教程的人对这个教程的某些方面 感到难以理解,这也是标准要点存在的原因.总体上,这个教程的各部分都假设 你对 HTML 已经里外理解,并要进一步开发它的潜能.

　　这个教程给那些虽然已经了解 HTML,但对经不起未来 XHTML 标准的考验, 隐含在分离内容和表现后面含义还未觉醒的人们.

　　HTML 从来就不是表现的手段,但从用户端结合元素来格式化文本,开发者 从中找到操作布局的方法.CSS 的强大,使得现在不再需要用 HTML 做任何表现 了,而内容也可以完全从表现(CSS)中分离出来.

　　这样做有很多好处——通常可以压缩文件容量, 有着用一个主要样式表就可 控制整个网站而不是单个页面的灵活性,也可能使页面更易用,更具亲和力.

　　遵循这些基本原则基本上意味着你不应该在 HTML 内使用样式化的任何事物 了. 比如 font 的标签, 比如 bgcolor 的属性不应该再使用. 甚至在图像标签 img 内的边框属性 border 在 XHTML 1.1 中也是非法的了.别担心,过时的 HTML 可以 样式化,CSS 更可以样式化,而且可以做得更好.

　　不仅仅是从 HTML 内剥离表现,内容的结构意味着在适合的地方使用明确的 HTML 标签.比如,h1,h2 等应用在标题上——而不仅仅是使用 CSS 使字体变大 而已.

　　最佳指引就是一个可视化的浏览器上使用其默认的样式来呈现一个没有样 式表(或者有样式表,但不支援样式表的文本浏览器,比如 lynx——译者注) 的页面.

　　表格不应该用在布局上——表格用来表示表格式的数据 (我们已经不厌其烦 地说了很多次——译者注).也许对于已经习惯传统结构的 HTMLer 来说,完全 改变有很大的技术难度.这个方法很大程度上压缩了文件,而且,基于这些显性 代码,它变得更易用,更具亲和力.

　　在 XHTML 中所有的标签都必须小写和关闭.没有闭合标签的(如 br 和 img) 必须用英文半角正斜杠/在后面自关闭(如br /).注意在斜杠前应该有 一个英文半角空格.

　　为残障人士制做具有亲和力网页的理由是不证而明的.不仅是人道的,而且 也对老年用户和五官功能减退的用户有利 (想一想, 有一天我们老了, 视力消退, 五官不灵, 怎么浏览互联网?为年老积点德, 现在就考虑亲和力吧! ——译者注) . 亲和力不仅与有严重残障人士方便,也使大部分少量消退功能(特别是视觉)的 用户更为易用.

　　这个问题越来越牵涉法律问题了,比如美国的508 条款的采用,试图积 极推动强制使用亲和力; 在英国, 所有的政府网站必须有一个指定的亲和力程度. 什么时候才可以有像在建筑物上的亲和措施的立法, 以便普遍用在商业网站上?

　　(中国还不知道什么时候有这种立法呢! 但不等于我们就不要关注我们设计的网 页的合法性.——译者注)

　　如果能遵循上述的建议,你的 HTML 应该已经具备了为残障用户服务的高度 亲和力.还有更多的创作使你的亲和力更上一层楼,而且不难.见亲和连接和亲 和表单指南.

　　不或不能使用指点设备的用户可以用快捷键 tab 键来打开连接, 并且本身也 要有逻辑 tab 顺序.尽管 HTML 是线性的,tabindex 属性允许你定义它快捷键们 的顺序,而且这些逻辑 tab 应该可以自动落入自己位置. 快捷键 快捷键可以通过键盘的特定按键进行更方便的导航 (当按住 Alt 键或者 Ctrl 键时获得焦点) .对于那些没有指点设备的用户,比起使用 tab 键操作连接更快 捷,更方便. 没有必要为每一个连接都设置快捷键, 但为主要导航连接都设置是一个不错 的主意. Example Source Code [

　　快捷键的麻烦是,用户常常没有办法知道它们在哪里和到底是什么键(除非 查看源代码) .虽然 JAWS——一个可以大声读出快捷键的屏幕阅读器,但要掘尽 其能,你还是得让快捷键更直白. 你可以使用像跳过导航的连接技术(下详) ,或者选择一个独立的页面 来说明你网站的这些易用性相关功能,包括快捷键.一个越来越流行的办法是在 一个与快捷键相一致的字母上加下划线,类似于 Windows 程序菜单中的方法. 连接的标题 为连接添加标题属性 title 是一个好主意,这会给用户所指向连接的予说 明,所以能改进导航.

　　说到 Javascript 弹出窗口,你要坚持使用的话,或者很多人(你的用户) 告诉你要使用,你可以用 onkeypress 和 onclick 来使得页面更易用.并且,在 功能上定义了返回 false 的弹出窗口,包含一个带有 href 属性指向普通页面的 连接,对于一个没有使用 Javascript 功能的用户来说,可以以普通方式载入这 个页面. 比如: Example Source Code [

　　相邻的连接应该至少用空格隔开,以便为屏幕阅读器清晰辩明. 这也可以用字符来完成,连接之间的(比如竖线 —— 连接 连接) ,或 者包围连接的(如中括号 [] —— [连接] [连接]) .把连接放在列表里面也是 一个好主意. 然后可以用 CSS 来样式化显示, 甚至可以是并行的列表 (用 display: in-line) .

　　你应该让使用屏幕阅读器的用户一个跳过导航直接到内容的机会.这是因 为,假设你的连接是固定的(应该是) ,用户不必经受每一页同样的信息,尤其 是大量的.你可以设置一个连接,跳过导航直接跳到内容的连接. 看起来像是这样的: Example Source Code [显然,你没有必要在可视化浏览器中显示它,所有你可以用 CSS 开隐藏它.

　　这是虽然只是一个 CSS 的小技巧,但是跳过导航的特效药.这涉及到 隐藏连接的方法. 最常见的办法可能是使用 display: none,但有些浏览器看到但不理解这个 连接, 跳过导航的连接必须显示. 然而没有必要显示——没有理由显示给醒目的用户.所以坚持使用包含 display: none 的样式,还不如把元素宽和高设置为零(width: 0; height: 0; overflow: hidden;) ,这有相同的视觉效果,但可以使屏幕阅读器理解.

　　当段落标签 p 应该使用在段落的时候还有许多滥用换行标签 br 的情况,p 用于表现段落是公认的.基于同样的逻辑,很多标签应该被用来定义确定的文本 元素,比如引用,缩写和计算机代码等. 应该记住的是,尽管大部分浏览器用不同的方式处理这些标签,最重要的是 记住,不是为了让元素看起来像什么,而是它赋予的含义是什么.

　　blockquote,q 和 cite 用在引用上.blockquote 是块状的,用于大面积的 引用语上,而 q 则是内联的,用于更小的词组.cite 也是内联的,比起 q 来其 本身的语义更可取,很可能在将来取代 q. 又,标题属性 title 用于表明引用从何而来.

　　b,i,tt,sub,sup,big 和 small 都是表现元素,因此,由于它们的精确 性,不应该再使用当我们一再强调分离内容和表现.比如 b 定义粗体元素,没有 任何意义——这些标签定义纯粹的可视化特征,应该是 CSS 的事.尽管他们是合 法的标签,还有其他的(比如 strong 和 em,是词组元素)可以实际地添加含义. 如果你仅仅需要复制这些标签的样式,不需要任何相关的含义,你可以在 span 标签上应用 CSS.

　　你认为已经知道怎么制做表格了吧.当然,你已经了解 table,tr,td 和 t h 标签了,甚至还在你的口袋里装入了 rowspan 和 colspan.你确实可以制做一 个精美小巧的咖啡色三合板桌子(表格),但难道你不想做一个优雅稳固,上面 有玻璃的,足以承受一头大笨象的宴会桌(表格)?

　　哦,但是可能有一个陷井,不是吗?那就是:你仅能样式化列的是边框,背 景,宽度和可见性. Internet Explorer 在这方面看起来比其他浏览器表现更好因为它装载有 漂亮的 CSS 属性比如 color,但是,正如结果一样,这是因为它疯狂古怪的行为 而已.这种奇特的异常可以让 Ian Hixie 来解释.

　　一个简要和容易的提高易用性的思考是,总是为表格应用摘要和说明. 摘要可以在表格起始标签 table 中用 summary 属性应用到表格中. 这不会显 示,但可以辅助非可视化的表格表现. caption 标签在起始标签 table 后直接定义说明.它默认直接在表格顶端出 现,但可以在 CSS 属性 caption-side 中设置 top,right,bottom 或者 left 值, 尽管 IE 不会在意.

　　thead,tfoot 和 tbody 允许你把表格分为表头,表注和表格主体.对于大 表格尤其有用,在打印的时候,表头和表注应该会在每一页都出现.

　　尽管还是当作表格来处理,但打印的时候不会在哦每一页都出现表头和表注,只 孤零零地传递滚动的表格.

　　谨慎对待滚动表格.尽管它们提供十分有用的目的,大部分用户不习惯它们 并且认为线性数据是唯一的.

　　表单对于残障人士来说是最不容易使用的东西. 导航和成文的内容是一种情 况,而表单域和信息输入的跳跃又是另一回事儿.因此,为表单增加更多元素, 使得表单更易用和更具亲和力未尝不是一个是好注意.

　　你可以为表单域分组,比如名字(姓,名,头衔等)或者地址(第一行,第 二行,县,地区,邮编,国家等) .使用 fieldset 标签. 在表单域的分组内,你可以使用 legend 标签产生图例说明. 注意:可视化浏览器倾向于用围绕在表单组周围的边框来显示,而图例说明打破 左上方的边框而显示.

　　接受,就发送这个 MIME 类型并把 XHTML 1.1 文类类型写到 HTML 中.如果这个 MIME 类型不被接受,就发送 text/html 的 MIME 类型并把 XHTML 1.0 Strict(严 格)的文档类型写入 HTML. 除了你知道你正在做着正确的事情和为自己准备将来的路的平和想法外, 最 直接的益处就是,使用这个方法,Mozilla 浏览器把你的文件当作 XML 程序对待 并且如果你的 XHTML 还没有抓痒,就是说不合式的,Mozilla 就不会工作.然后 你就可以排错了,而不需要用校验器来运行你的文档了.php能编写什么程序php开发代码网