网页设计中HTML常范的五个错误

黄金海岸旅游团

黄金海岸旅游团

2016-01-29 11:49

网页设计中HTML常范的五个错误,网页设计中HTML常范的五个错误
 

  1.网页背景色的设置

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)

  犯错机率:很大
  普遍性:较广
  犯错可能性:懒/不知道

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)

  约2年前我曾发现21cn上出现过一次没有设置背景色的情况,当时我用Email通知了他们,自此之后这个问题我从没犯过。

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)

  绝大部分人的窗口背景颜色都是白色,但如果象我这样个性的人,就会把windows窗口的背景颜色改成灰色或其他色,这样一来,如果你没有设置网页的背景颜色的话,你以为正常的网页在我的电脑上看起来会是一团糟。

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)

  2.Align center(自动居中)的滥用

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)

  犯错机率:非常大
  普遍性:非常广
  犯错可能性:以为方便/以为好用

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)

  工作中,修改、维护别人的网页是家常便饭,发现不少人有一个陋习:
  在表格中的文字或图片,你是这样来令它居中、靠左或靠右过?

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)

  <div align="center"大家好啊!!</div
  <div align="center"<img src="http://img.jcwcn.com/attachment/portal/jcwcj/2005-12/10/05121012424532487.gif"</div

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)

  当有些表格很多、文字很多、内容分得很细的时候,爱用这种方法(它在DW里的快捷键是Ctrl+Alt+C,FP不知道是什么)的人往往会狂用,惨了,我一碰到这样的网页就头痛,为什么要用那么多<div来居中呢?tell me why?难道表格没有居中属性吗?为什么要加入这些垃圾代码?特别修改的时候也不能把文字或图片删除了就能自动清除<div align="center"这个代码,还要手工去清除,在复杂点的网页中就会无故地浪费维护者一笔时间。

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)

  建议使用<td align="center"来居中,当需要多重定位的时候,才考虑<div align="center",因为这个代码并不好处理,所以能用表格代替就用表格替代。

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)

  3.重复使用实现相同功能的代码、或杂七杂八的乱套代码

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)

  犯错机率:非常普遍
  普遍性:非常普遍
  犯错可能性:复杂多样

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)

  大家先来看一看下面的代码:
  <center<p<font class="css_id"<font class="font11"<font color="#CCCCCC"<font color="#FFA76C" style="font-size:14px;font-family:隶书"标 题</font</font</font<br</center你觉得这样的代码看起来感觉怎么样呢?</font</p

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)

  我不知道读者有什么感觉,压根我一看到这样的代码就会先自我麻木十来秒,这十来秒目的是为了找一个能表达我的思想感情的词(我?你想反问我吗?sorry~~,我一般不犯,因为我做网页至少有一半以上的时间在浏览代码,代码中多了不该多的东西我一眼就能看出来。)。

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)

  看看上面的代码,使用了2个class,4个font来定义2个文本,其实这样的问题很多时候是在大家不断的修改中产生的,对代码不熟、或懒查看代码、又或不喜欢查看代码的人犯这些问题特别严重,当然,事实上别人浏览这个网页的时候,是没有任何问题的,但维护的人就…………。
这些多余的垃圾代码完全是可以省略掉的,其实上面的例子不够严重,更恐怖的我都见过。

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)

  另外还有一个问题也要提提的,就是<p...</p和<center...</center,为什么要用它们呢?tell me why~~,有甚者是这样的:

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)

<td<div align="center" class="css_id"
<center
<p align="center"</p
<p align="center"<font class="css_id"<font class="font11"<font color="#CCCCCC"<font color="#FFA76C" style="font-size:14px;font-family:隶书"标 题</font</font</font<br</center</td你觉得这样的代码看起来感觉怎么样呢?</font</p</center</div</td

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)

  看到这样的代码我是会很无奈的(更无奈的是我经常看到,而且必须看),我来简化一下:
<td align="center" class="css_id"<br<font color="#FFA76C" style="font-size:14px;font-family:隶书"标题</font<br你觉得这样的代码看起来感觉怎么样呢?</td

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)

  是不是看起来觉得这个世界安静了很多?"标题"后面的文字完成可以定义在<td的class里,就算不用css,再用多一个<.font也没问题,一样很清爽。

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)

  4.表格不正确嵌套

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)

  犯错机率:一般
  普遍性:普遍
  犯错可能性:对这个不了解

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)

  其实这是一个街知巷闻的问题了,但还是不断有人犯,不正确的嵌套表格,可能会令到你被老总叫到办公

展开更多 50%)
分享

猜你喜欢

网页设计中HTML常范的五个错误

Html CSS布局 Div+CSS XHTML
网页设计中HTML常范的五个错误

网页设计中HTML常犯的五个错误

Html CSS布局 Div+CSS XHTML
网页设计中HTML常犯的五个错误

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

网页设计中HTML常会出现的五个错误

Web开发
网页设计中HTML常会出现的五个错误

网站设计中HTML常出现的5个错误

Web开发
网站设计中HTML常出现的5个错误

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

HTML网页设计中关于字体设计的详细讲解

Web开发
HTML网页设计中关于字体设计的详细讲解

15个优秀的HTML网页表单设计

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
15个优秀的HTML网页表单设计

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

AutoCAD建模教程:打造农村古老土灶

AutoCAD建模教程:打造农村古老土灶

《天天炫斗》华丽觉醒实现连招攻略

《天天炫斗》华丽觉醒实现连招攻略
下拉加载更多内容 ↓