标准建站之web设计与开发常见错误

Lee骏伟

Lee骏伟

2016-02-19 19:53

下面图老师小编跟大家分享标准建站之web设计与开发常见错误,一起来学习下过程究竟如何进行吧!喜欢就赶紧收藏起来哦~

混淆文档类型(DOCTYPE)

  完全不写、写的不正确、或放错地方。我曾见过HTML 4.0 Transitional被用在XHTML网页和框架页中,还看到过在开头的html标签后写DOCTYPE声明和一些不完整的声明。
为什么?有两个原因。首先,文档声明是必须的,在W3C HTML 4.01 spec和W3C XHTML 1.0 spec里都有说明。第二,浏览器会根据指定的文档类型去显示和渲染网页。也就是“DOCTYPE切换(DOCTYPE switching)”。为了保持各个浏览器显示网页的一致性,特别是你用了CSS,你一定会希望浏览器使用它们“Standards compliance mode”。关于DOCTYPE切换,可以看看使用正确的DOCTYPE!和正确的文档类型声明,正确的布局方式。

span癖

  样式化的一个常见方法就是把一段东西用span标签围起来,并且带一个class用来设置样式。我敢保证你经常可以看到诸如span class="heading"和span class="bodytext"的代码。
  为什么? 其实在很多情况下这完全没必要,这样做只会混乱标签并且没有什么语义。标题就用标题(h1~h6)标签,段落就用段落(P)标签,列表就用列表(UL, OL和DL)标签。然后再用CSS去样式化,如果需要的话,也可以加class和id属性。

太多可视化思考

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

  以为web就是WYSIWYG(所见即所得) – 一开始就想着这些东西该怎么表现的,而不是先去考虑逻辑结构上怎么样。
  为什么? 虽然大部分网民都是视力正常的,但是还是有残疾人上网的。网民可能使用不同浏览器、不同系统、不同尺寸显示器和分辨率、不同的窗口大小、不同颜色标准和文字大小,所以你不应该把你的网页做成WYSIWYG。网页不是印刷品或者电视节目。要让你的设计弹性化。

缺乏语义
 
  没有使用具有语义的标签。想当然的按照图形浏览器渲染的HTML样式去写代码,而不是参照这些标签的意义。
  为什么?和上文提到的"span癖”比较接近,没有好好的利用现有的HTML标签来表达它应该表达的语义。没有语义化的HTML,为那些非可视化用户代理(UA)造成了理解上的困难。而且语义化的HTML很容易进行CSS样式化。
 
编码不一致

  在服务器发送的默认编码是一种而文档里面又使用另外一种,这可能会造成浏览器乱码(不正常显示)。
  为什么?因为你必须得保证所有你的访问者都能阅读你的内容。

不正确的alt属性

  没写或者写了没意义。在网络上可以看到非常多没有alt属性的img标签。没意义的alt属性倒是不如前者常见,比如“spacer GIF used to make the layout look good”,“带有阴影的蓝色原点”, 以及“JPEG图片,123 KB”。要记住,alt属性在img和area里是必须的。
  为什么? 这是必须的,没有alt,任何图片中的信息就会被屏幕阅读器、文本浏览器、搜索引擎机器人忽略,或者用户关了图片显示就会显示为X。注意图片的alt的文字是要相关的,不要给装饰性的图片或者用来布局的图片加alt属性值,指定一个空值就可以了,如alt=""。

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

不合法的id和class属性

  在同一页面里使用了多次同一id,以及在id、class和CSS选择器中使用了非法字符。
  对于CSS来说 (CSS 2.1语法和基本数据类型):
  在CSS 2.1里,标示符(包括元素名、class和ID)只能由数字、字母、ISO 10646通用字符集U+00A1及更高、连接线("-")、下划线("_")组成,并且不能以数字开始。
  对于HTML (HTML基本数据类型):
  ID和NAME必须以大写或小写字母开始,随后可以接任意字母、数字、连接线("-")和下划线("_")、冒号(":")和分号(".")。
  为什么?遵循以上标准的浏览器可能不会按照你预期的现实。如果一个页面中有多个重用的id值,那么任何使用了该值的JS就可能会失效或者错误。

浏览器探测

  使用服务器端或客户端的脚本测试访问者的浏览器,然后发送或者执行特定浏览器的代码。这对于最新的浏览器、更新过的浏览器或者具备欺骗功能的UA(比如Opera默认伪装成IE)。
  为什么?增加了不必要的麻烦,并且最终会失效。

CSS缺少单位

  长度值(水平和垂直的)需要单位,除非当该值为零时。不像在HTML里面,可以输入width="10"。在CSS里, 必须写成width:10px;(或者其他单位)。
  为什么?在遵循规范的浏览器中会被忽略。

浏览器特定的CSS

  样式化滚动条、表达示和滤镜等,都只能在IE下工作。这也不合法。

  为什么? 只在特定的浏览器里面正常。如果你真的必须使用IE特定的CSS,可以单独写一个CSS文件并且使用条件注释,或者保证只有IE能看

展开更多 50%)
分享

猜你喜欢

标准建站之web设计与开发常见错误

Web开发
标准建站之web设计与开发常见错误

Web标准建站校验和常见错误

Web开发
Web标准建站校验和常见错误

s8lol主宰符文怎么配

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

使用Web标准建站第12天:校验及常见错误

Html CSS布局 Div+CSS XHTML
使用Web标准建站第12天:校验及常见错误

Web标准发展建议与好的实例之简介、历史、Web标准

Html CSS布局 Div+CSS XHTML
Web标准发展建议与好的实例之简介、历史、Web标准

lol偷钱流符文搭配推荐

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

Web开发与设计的 Cheet Sheet

Web开发
Web开发与设计的 Cheet Sheet

IE7与web标准设计(2)

Web开发
IE7与web标准设计(2)

lolAD刺客新符文搭配推荐

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

十万条Access数据表分页的两个解决方法

十万条Access数据表分页的两个解决方法

原创爱情伤感QQ分组名称_那些坚持永远磨不掉

原创爱情伤感QQ分组名称_那些坚持永远磨不掉
下拉加载更多内容 ↓