网页制作中注意应用HTML标签的问题


HTML已经尝试去除表现和朝向内容发展,导致这样一个基本原理:从表现(CSS)中分离出内容意义(HTML)。这将会给网页减肥,因为一个表现指令集合(以外部CSS文档的形式)可以应用到多个页面。这也会使网站更易于管理因为全局变动可以从修改一个单独的文件得到。

部分不良标签基本上是表现标签(比如small),它们可以用更有意义和更简单的CSS规则取代。其他的不仅用于表现,而且还是不必要的庞大(比如font标签)或者对可用性有害的可恶的(比如blink)。

标签

下面这些是你可能会经常碰到的可以有更好选择的标签:

  • b 可以用来产生粗体元素。使用strong(意味着强烈强调)代替更有意义,或者用CSS来完成这项工作,增加font-weight: bold的规则,用来表明粗体元素。
  • i可以用来产生斜体元素。使用em(表示强调),这也更有意义。或者可以用CSS来表现斜体:font-style: italic
  • big可以产生更大字体。使用标题(如h1h2等,当文本本来就是一个标题时)代替,增加了意义,或简单地在CSS中使用font-size属性,获取更多的控制权。
  • small 可以产生小字体。CSS(font-size)再一次取得更多的控制权。
  • hr 可用用来展现一条水平线。在CSS中用hr设计很少见,CSS的border-topborder-bottom属性或者朴素的图像做这个效果会更好。

上述的标签与最新的HTML标准尽管都兼容,但对内容却没有任何好标签应有的意义。They could be more useful but they aren't particularly harmful, and might easily be mistaken for innocent butter-wouldn't-melt-in-their-mouth nuggets of pure goodness when standing next to the following filthy tags.

  • u可以为元素产生下划线。它提醒着下划线文本还很多连接关联。这就是这个标签死了很久的原因——你不必给非连接文本下划线。
  • center可以用来居中在元素内部的元素。CSS属性text-align允许不仅仅是center,还有leftrightjustify
  • menu用来创建菜单列表。它并没有ul做的完美,在因为无序列表更通用,ul高高地站在menu的尸体上。
  • layerdiv元素相似,都由CSS绝顶位置。这仅仅能在老版本的Netscape中工作,所以再也没有什么用。
  • blink或者marquee。大声说不!它们应该像本身意义一样被期待,但有着十分有限的支持,和,只会产生非常,非常恶心的笑话。
  • font,可以用来定义元素的字体名称,尺寸和颜色,在标签世界中理所当然地获得了臭名昭著标签之王荣誉称号。旧的网站(甚至新的也有)像满世界的瘟疫之蚁一样布满整个页面。大部分的font标签激增是从网页制作软件带来的,把font标签包括颜色和尺寸用在每一个元素。font标签被滥用到出现在当前的每一个重复元素的(如,每次你使用p元素),而CSS,则可以用一条简短的代码来应用重复元素,甚至控制整个网站。使用CSS方法,不仅可以使页面比被大量font标签寄生的更苗条,而且更容易维护因为你所需要做得只是改变CSS文件中的一行,而不是逐一修改每一个font标签。这也增加了维护一个一直保持设计风格一致的网站的可能性。font标签和不恰当的表格使用是两个产生网页不必要臃肿的主要原因。

属性

可能你认为你正在使用良好的标签,但还是有一些麻烦的寄生虫属性潜伏,它们随时会冒出来。

  • name用来为一个元素指定一个名字,它在如input的表单元素中完全被接受,但在其它地方,name的工作已经被id属性取代。
  • textbgcolor可以在body起始标签中定义页面的基本文本颜色和背景颜色。CSS的colorbackground-color属性在应用到body选择符时也可以做到。
  • background可以在body标签中指定一个背景图画。CSS会做得更好,用如background-image的属性来处理背景图片。
  • linkalinkvlinkbody标签中用来指定连接(未访问,激活和已访问)。CSS宝贝── :link:active:visited会做这项工作。
  • align可以用来对齐某个元素的内容(比如 <div align="center">Stuff</div>),但是,像center标签,CSS的text-align属性是新的老板。
  • target可以用不同的方式打开一个连接,最常用的是打开新窗口(比如<a href="wherever.html" target="_blank">Help me</a>)。看起来不错,但你不要对你的网站这样做。用户并不预期不可思议的东西(比如新窗口)出现,而且最常用的浏览工具是浏览器的后退按钮,如果你打开新窗口,这将不可用。它是非法和不易用的。

注意

保留标签的表现属性如图像的widthheight,表格的cellpaddingcellspacing,是由于这些元素经常使用不同的值。这不是完美的解决方案,但如果你的网页有大量的图像和表格,你没有其他的明智选择,只好使用它们。

最让人难以理解的表现属性是textarea标签,它仅有colsrows两个合法属性,在最新的HTML版本中也是必须的。

良好标签,不良使用

要进入你的卧室你可以弯腰通过一个狗洞,但等等,还有一扇有把手的为人类准备的门!哇,看——刚好适合一个进入。

使用HTML标签(好标签),无论相信与否(相信它!),有一个很好的的理由:你使用它们有一个好前提,你就会有一个更好的结果。

网页本身对用户来说,比起HTML标签语法语义更易用,屏幕阅读器常会在遇到一个ul标签或者有着h1h2的标题标签时强调突出它们。

在HTML标签世界中最被滥用的就是表格了。表格常常用来布局,但表格应该仅仅只用来展示表格式数据,就如它们本身的设计意图。不用表格的布局方法不是追求开悟的某种禅,它不仅可以显著地为网页减肥,而且更易于维护和重新设计。

注意

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

框架

Goldilocks认为喝上一杯麦片粥是一个不错的注意,但三个硕大的肉食哺乳动物突然出现,把她丢出窗户。框架就是装麦片粥的杯子。它们看起来似乎不错,但已经到了濒危阶段而且很快就会消失。

大部分的网站并不是用框架,而一般用户也会把一个文档当作一页。

有些情况,如你要防止用户不能把特定的网页添加到书签,又如你希望用户用Email或即时聊天软件推荐特定的网页,又或你想把整个网站变得十分复杂,让使用屏幕阅读器的用户在框架之间频繁操作,还或者你想迷惑搜索引擎,够了够了,你使用框架吧!

总之,框架只会增加复杂性丧失可用性

注意

只要你遵循下列规则,你不会在犯错上有前途:

1)一个标签或者属性就算只有一点点的跟表现搭上,都不要使用。那是CSS的事。并且CSS做得更好。

2)把标签使用在如它的名字所暗示的用途上。表格标签是用在表格式数据上的。标题标签是用在标题上的。等等等等。

3)特定的内容用恰当的标签。列表用list,标题用hx(x = 1 - 7)等等等等。

延伸阅读

  • HTML高级指南的标准要点:戒掉坏习惯和转向标准──兼容XHMTL



相关阅读:
PHP新手上路(六)
新手学堂:在Linux系统下建立Samba用户
Hibernate的JNDI绑定分析
忘记FREEBSD密码解决办法
巧用linux cd命令和Pushd切换目录
创建事务性脚本
索引的优点和缺点
详细讲解CSS Overflow属性
session 的生命周期是多长
管理会话
Windows XP系统变量方式
ASP函数库3
javascript 获取GET方法的参数
CSS 制作有弹性的日历表
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 初中初一作文750字:有趣的太阳燃纸 加强领导班子管理能力实施方案 优秀店长培训体会 寻找阳光的所在【幸福彼端】 刘禹锡《昼居池上亭独吟》诗歌鉴赏 封槿 个人贷款申请书格式 四川省义务教育示范县评估验收细则 自律委员会志愿者工作总结 2010年县财政局年度行政执法工作总结 小学三年级作文300字:辛苦的驴子 埋在心底的自豪作文400字 我是一朵向日葵 小学四年级作文400字:扫雪的老人 2015年春季小学部教师德育工作计划 小榕树作文450字 我以微薄文字,予你一纸情书 公司周年庆典贺词 书画艺术协会工作总结报告 有车,有房,有存折真的就幸福吗 千年树 观《卖火柴的小女孩》后感 我怀念的是 青春的流失作文1200字 小学教师代表教师节庆祝大会发言稿 2016年度工程部个人工作总结 初中初一作文750字:妈妈的白发 十种扼杀你才华的生活态度 线务局工作总结 最新大学生外贸跟单员实习报告 2016安全生产工作情况通报 学会为您的创业梦融资 我读经典,我荐书 张贤亮 介绍简介|张贤亮 简历|张贤亮 作品,图片 读《小兵张嘎》后感作文700字 灰作文100字 游五莲山作文450字 无私无畏 廉洁奉公 好久 不见 自己打开一扇窗 对增强国有企业党组织凝聚力和战斗力的思考 2014年7月思想汇报范文:坚持党的改革之路不动摇 预定客房协议书 情书12 狼牙山五壮士!!! 节。日。 同学聚会,你参加吗 2015局长述职述廉报告 小学二年级作文350字:《我想当作家》 回忆的枷锁,紧紧的将我牵绊。

Copyright © 2016 phpStudy |