英文原文：
　　说到开发一个运行在现代网络中的网站：Web 开发人员需要选择虚拟主机平台和底层数据存储，准备编写 HTML、CSS 和 JavaScript 用的工具，要有设计执行方式，以及一些可用的 JavaScript 库/框架。在将任务分解为这几步之后，接下来要做的就简单多了，可以去网上找文章，浏览论坛，看看那些能提供更好的 Web 体验提示的示例。
　　然而不管是走哪条路，犯错却是每一个开发人员都不可避免的。虽然有些错误与某一个具体的行为相关，但有些错误却是所有 Web 开发人员都需要面对的挑战。因此，通过研究，体验和观察，我总结了 Web 开发人员常犯的 10 个错误&&以及如何避免这些错误。
　　以下要点没有特定的顺序。
　　1）写一些过时的 HTML
　　错误：早期的互联网比起我们现在，标记的选择要少得多。然而，旧习难改，现在很多开发人员写的 HTML 就好像还身处 20 世纪一样。举例来说，我们使用&table&元素用于布局，当其他特定语义标签更适合的时候使用&span&或&div&元素，在当前 HTML 标准不受支持的时候使用&center&或&font&标签，在页面上间隔项目，如果有大量&字符实体的话。
　　影响：遵从这种过时的 HTML 规则可能会导致标记过于复杂，结果是在不同的浏览器中发生不同的行为。而且没有了改进浏览器的动力，因为没有必要更新到最新的浏览器，如 Microsoft Edge，哪怕是 Internet Explorer 版本（11、10、9）也变得没有必要。
　　如何避免：停止使用&table&元素用于内容布局，限制使用&table&元素来显示表格数据。例如可以去 whatwg.org 了解当前可用的标记选项。使用 HTML 去描述内容是什么，而不是说明内容如何展现。对于如何显示内容，请使用 CSS（）。
　　2）&明明在我的浏览器中是可行的&&&
　　错误：开发人员往往会偏爱某一个特定的浏览器，或者特别讨厌某一个，可能主要是因为对测试网页视图有所偏见。也有可能是因为从网上找到的代码示例不能保证会如何呈现在其他浏览器中。此外，一些浏览器对风格有不同的默认值。
　　影响：以某一个浏览器为中心写的网站，在其他浏览器中显示时，其质量将会很差。
　　如何避免：在开发过程中，在所有浏览器和版本中测试网页是不切实际的。不过，每隔一段时间，在多个浏览器中检查网站的样子不失为一个好方法。现在，不管你偏好的是什么平台，总有免费的工具可用：免费的虚拟机、网站扫描仪。如 和
网站可以给出页面如何呈现在多个浏览器/版本/平台中的快照。Visual Studio 等工具还可以调用多个浏览器，来显示你正在工作的单一页面。当涉及到 CSS 设计时，可以参考在
中所示的那样&重置&所有的默认值。
　　如果你的网站正在使用的 CSS 特性是专为某一浏览器特制的，那么注意它的引擎前缀，如-webkit-，-moz-和-ms-。对于行业在这方面的发展趋势指导，那么可以阅读以下参考：
?Microsoft Edge 开发博客：
?QuirksMode.org：
Bruce Lawson：&
　　上面这些参考资料解说了引擎前缀的革新，以及你还可以点击这里&&这个网站提供了一些如何摒弃引擎前缀的实用建议。
　　3）不好的格式
　　错误：提示用户提供信息（特别是在输入文本字段的时候），并假设数据会如预期接收。
　　影响：很多事情会（或者很有可能将会）出错，当我们信任用户输入的时候。如果无法提供所需的数据，或接收到的数据不能与下面的数据模式兼容，页面可能会失败。更为严重的是，有的用户可能会故意违背网站的数据库，例如可以通过注入式攻击（见 OWASP：Top 10 2013-A1-Injections）。
　　如何避免：你首先要做的事是确保用户清楚你需要什么类型的数据。比如说，如果你只说要地址，那用户不知道指的是单位，家庭还是电子邮件的地址！除了要具体，还要充分利用现在的 HTML 提供的数据验证技术。不管数据在浏览器端是如何验证的，确保它始终也在服务器端验证。不要让一个串接的T-SQL 语句使用来自于用户输入的，各个字段的类型没有经过确认的数据。
　　4）臃肿的响应结果
　　错误：页面充满了许多高品质的图形和/或图片，这些图形和/或图片借助img元素的高度和宽度属性按比例缩小。来自于页面链接的文件，如 CSS 和 JavaScript，很大。源 HTML 标记也可能是不必要的复杂和全面。
　　影响：完全渲染页面的时间是如此之久，以致于一些用户放弃了，或者甚至于直接不耐烦地重新请求整个页面。在某些情况下，如果页面处理等待太久，会出现错误。
　　如何避免：不要抱有现在互联网接入越来越快的侥幸心态&&从而允许臃肿的场景。相反，要将从浏览器到你的网站的来回当为一种成本。图像是网页臃肿的主要罪犯。为了最大限度地减少图像成本，减轻页面加载的压力，可以试试以下三个技巧：
问问你自己：&这些图形真的有必要吗？&删除不需要的图片。
使用例如 Shrink O&Matic 或 RIOT 的工具来减少图像文件大小。
预加载图像。这不会提高初始下载的成本，但可以让网站其他页面图像加载速度更快。
　　另一种减少成本的方式是压缩 CSS 和 JavaScript 链接文件。有很多的工具，如
都能帮你做到。
　　5）创建所谓&应该能行&的代码
　　错误：无论是 JavaScript，还是在服务器上运行的代码，开发人员都需要测试并确认它是否可以正常工作，而不是在部署了之后，就认为它应该就能从一而终地运行。
　　影响：不经过适当错误检查的网站就是对最终用户耍流氓。不仅会极大地影响用户体验，而且其错误消息内容的类型可能会给黑客线索来渗透这个站点。
　　如何避免：是人都会犯错，这个哲理同样适用于编码。使用 JavaScript，一定要实施好的技术来防止并抓住错误。虽然这篇文章描绘了用 JavaScript 编码 Windows 应用程序，但是大部分的内容也适用于 web 开发，许多提示都很不错！另一种能让代码变得可靠又能在未来变化中存活下来的方法是单元测试。
　　如果我们够仔细，那么就能捕捉到服务器端的代码失败，而不被用户发现。只显示必要的信息，并且一定要确保设置友好的错误页面，如 HTTP 404s。
　　6）写分叉代码
　　错误：本着支持所有浏览器和版本的崇高理念，开发人员立志创建可对任意可能情况作出回应的代码。代码中 if 语句成堆，所有方向都有分叉。
　　影响：随着浏览器新版本的更新，代码文件会变得越来越笨拙和难以管理。
　　如何避免：实现代码的功能检测和浏览器/版本检测。功能检测技术不仅可以显著减少代码量，还更易于阅读和管理。不妨考虑使用如 Modernizr 这样的库，不仅有助于功能检测，还能自动帮助提供不能跟上 HTML5 和 CSS3 速度的旧版浏览器的反馈支持。
　　7）非响应式设计
　　错误：假设开发/设计人员在相同尺寸的显示器上开发网站。
　　影响：当在移动设备或在非常大的屏幕查看网站时，用户体验要么很难看到页面的重要方面，要么甚至要时刻注意着不导航至其他网页。
　　如何避免：响应式的思维方式。在网站中使用响应式设计。这里有一些关于这方面的实用教程，包括响应式图片，还有一个非常受欢迎的库，那就是 。
　　8）制作无意义的页面
　　错误：制作面向公众内容的网页才是有用的，绝不能不提供关于搜索引擎的任何线索。没有实现可访问性功能。
　　影响：如果不能让搜索引擎发现网页，那么，可能会只有少量或根本没有访问。
　　如何避免：使用 SEO（搜索引擎优化）和 HTML 的支持可访问性。关于 SEO，一定要添加标签以提供有意义的网页关键字和描述。&About Tech 就写得很好，可以借鉴。为了能有更好的可访问性功能体验，请对每一个 img 和 area 标签提供一个alt="your image description"&属性。更多建议请见 。你也可以在
测试公共网页，看它是否兼容 Section 508。
　　9）网站过多刷新
　　错误：创建的网站需要为每一个互动而全面刷新页面。
　　影响：类似于页面臃肿（参见＃4），页面加载时间的性能会受到影响。用户体验缺乏流畅性，并且每次互动都可能导致网页短暂（或长时间）的复位。
　　如何避免：快速避免这种情况的一个方法就是，通过测定回发到服务器的内容是否是真正需要的。例如，当不依赖服务器端资源的时候，客户端脚本可用于提供直接结果。你也可以应用 AJAX 技术或进一步使用单页的应用程序&SPA&方法。流行的 JavaScript 库/框架，如 JQuery、KnockoutJS 和 AngularJS，能让这些方法的采用变得容易得多。
　　10）做了太多的无用功
　　错误：开发人员花了很长的时间来创建 web 内容。大量的时间花在了重复的任务上，或者自己敲代码写了很多。
　　影响：初始网站的发布和后续的更新时间过于冗长。如果其他开发人员也在在做同样的工作，却用了更少的时间和精力，那么你的开发价值显然就低了。手动劳动很容易出现错误，而排除故障错误需要更多的时间。
　　如何避免：探索你的选择。在开发的每一个阶段考虑使用新的工具和新的流程技术。例如，你目前使用的代码编辑器相比
和 ，如何？不管你使用的是什么样的代码编辑器，你最近有好好钻研它的功能吗？也许只投入稍稍一点时间去仔细阅读文档，就可以发现做事的新方法，为今后节省一个又一个小时的时间。例如，在这篇文章中，扩展 Visual Studio 可以为 web 开发人员提高生产效率。
　　不要错过网上可用的帮助工具！例如，检查在 dev.modern.ie 上的工具以简化测试（跨多个平台和设备）以及排除故障。
　　你也可以通过实现流程自动化以减少时间和错误。这方面的例子是使用
工具，例如它的自动化功能可以减小文件（见第 4 点）。另一个例子是 ，可以协助管理库/框架（参见第 9 点）。
　　至于 web 服务器本身？在例如
的帮助下，你可以快速创建一个网站，几乎所有的开发场景都可以很轻轻松松地规模化到你的业务中！
　　通过识别这些常见的错误，web 开发人员可以避免很多让其他人饱受煎熬的挫折。我们不仅需要承认错误，还应该清楚错误的影响，并采取措施避免错误，这样才能有更好的开发表现&&并有信心完成任务！
　　译文链接：
　　翻译作者：码农网&& 小峰HTML &span& 标签CSS必须要知道的10个技巧
　　1.css font的简写规则　　当我们写字体样式的时候，我们也许会这样子写　　font-size: 1　　line-height: 1.5　　font-weight:　　font-style:　　font-varient: small-　　...
   
　　1.css font的简写规则
　　当我们写字体样式的时候，我们也许会这样子写
　　font-size: 1
　　line-height: 1.5
　　font-weight:
　　font-style:
　　font-varient: small-
　　font-family: verdana,serif
　　其实，这样写是完全多余的，我可以只用font 来写就OK了。
　　比如：
　　font: 1em/1.5em bold italic small-caps verdana,serif
　　2.把几个class属性写在一起。
　　通常情况写，属性里面的class只有一个值，但这并不是意外着你只能给它
　　赋一个class名，我们可以赋2个以上。比如
　　&p class=&text side&&...&/p&
　　不过，需要注意的是，class里面是用空格把他们分开来的，而不是&，&，这点需要注意一下。这样运用了，那么text和side的class 就会运用到p元素中。
　　3.CSS的 border的默认值
　　border也就是边框的值，我在做项目开发的时候，很习惯的做法是：
　　border:1第一个指的是框的大小，第二个是指样式，第三个是指颜色。不过，这里3个并非都是必须要的，必须要用的是border的样式。其余2个有默认值。
　　比如，你这样写：
　　border: solid
　　如果你这样写了，那么默认值第一个大小的默认值是：medium(相对于3px或4px左右)以及颜色指的是文本里面的颜色。
　　4.!important 在IE中会被忽视
　　因为浏览器之间的不兼容性，我们在写css的时候，为了保证网站能在各个
　　浏览器之间保持兼容性，所以 我们需要使用!important这个属性。
　　如果你在css使用了这个，那么它的优先级会比和它同名属性的优先级高。
　　这个是给除了给IE以外的浏览器用的。
　　margin-top: 3.5em ! margin-top: 2em
　　上面指的是，除IE之外的浏览器是3.5em，而IE是2em。这个很有用。
　　5.Image的alt属性
　　我们在网站开发的时候，我们常常被建议使用HTML标签来显示文本，而不是图像。这样可以使得网站具有更快的加载速度以及可访问性。举个例子说，你开发了一个网站，你想在你网站的每一个页面的页面顶端放一个&购买物品&。现在加入你是一个卖家，那么你很期望你的物品能被搜索引擎找到，也许你会这么做：
　　&h1&&img src=&widget-image.gif& alt=&购买物品& /&&/h1&
　　实现了，但是这里需要注意的是，搜索引擎并不会关注alt里的关键字因为现在很多的卖家都是这样子)，所以白搭。所以，我们可以用css来代替
　　如下：
　　&h1&&span&购买物品&/span&&/h1&
　　然后定义css：
　　background: url(widget-image.gif) no-
　　h1 span
　　position:
　　left:-2000px
　　这样子就OK了，迎合了搜索引擎的口味。所以呀，搜索引擎真的伤不起呀。
　　6.盒模型hack问题
　　这个问题比较难，不过说实在话的现在用的机会也比较少。因为它涉及到IE5问题，现在谁敢说还在用IE5?拉出去毙了。
　　不管如何，我们还了解一下 总没有坏处。
　　IE5和其他浏览器(IE 6+ 以及chrome等等)对边框的计算是不一样的呢，怎么说呢?请看下图
　　图1是我们现在正确的理解，就是说整个box的width的值是：内容的width+padding+boder 3个值的相加。
　　然而，在IE5中不是这样子的哦，请看上图，它的内容只有170px。所以这就出现了问题了。
　　比如 代码说明：
　　#sidebar {
　　width: 200
　　padding: 10
　　border: 5
　　把宽度设定为200像素,但是侧边栏实际需要230像素的空间,除了IE5 for Windows以外. IE5 for Windows 里侧边栏总共会占用200像素,把内补丁和边框都算在里面.图2 显示的是当width属性指定为200像素时,边框和内补丁会占用内容空间,而不是内容空间之外.
　　对IE5 for Windows来说,则需要把宽度指定为230像素(加上两侧内补丁和边框的宽度),接着再以200像素覆盖回来,让符合标准的浏览器得到正确的宽度.
　　#sidebar {
　　padding: 10
　　border: 5
　　width: 230 /* for IE5/Win */
　　voice-family: &\&}\&&;
　　voice-family:
　　width: 200 /* actual value */
　　留意IE5 for Windows的值先出现,接着几条让IE5 for Windows认为声明已经结束的规则,在此我们使用voice-family属性,原因单纯只是浏览器认得它的话也不会改变视觉效果,最后指定实际的宽度,覆盖最初的width规则,第二个width规则会被IE5 for Windows忽略.
　　结果在IE5 for Windows以及其他所有兼容CSS2的浏览器上看起来应该完全相同.没有使用这个hack的话,IE5 for Windows的使用者就会看到比设计还瘦的栏宽。
　　7.块级元素的居中效果
　　块级元素?你不会这个都不懂了。不懂，我就罗嗦一下，就是指div、h1、table这类元素。相对应的就是inline元素了，比如label等等。
　　通俗点就是，一个会占一行(当然在没有其他属性的支持下)，另一个不会。OK。
　　一般来说，对div居中，我都会写下面的写法：
　　#content
　　width: 700
　　margin: 0
　　然后，我们很高兴的 就能在正常的浏览器到效果，请注意，我说了正常2个子，那这也说明，有不正常的情况下?什么情况呢?和上面的第六点一样，也是IE5的问题，在IE5下面，它根本就不懂这个，你说它能解决问题嘛?。
　　所以，我们只好按照下面的来实现：
　　text-align:
　　#content
　　text-align:
　　width: 700
　　margin: 0
　　OK，就样就能很好的兼容了。
　　8.垂直调整(vertical aligning)
　　当我们在使用table的时候，如果我们需要把一列的内容居中排列怎么做?不用问，我们理所当然的是，用下面的这行句话：
　　vertical-align: middle
　　很多时候，这样可以工作，可总有例外。比方说，你现在有一个导航菜单，它的高度是2em，如果你插入这个命令的话，sorry，它不会进行执行，并且会把文字放到顶端。
　　那怎么解决呢?很简单。
　　你只需要把box模型的的高度的line height指定成一样就可以了。如下：
　　line-height: 2em
　　9.绝对定位和相对定位
　　这个应该是在css教程里比较难的部分吧，一下子也真的很难说清楚，有兴趣的可以找找资料看。给个例子：
　　#container { position: relative } &div id=&container&&&div id=&navigation&&...&/div&&/div&
　　接着我设定里面navigation的样式
　　#navigation
　　position:
　　left: 30
　　top: 5px
　　这个说明了里面的navigationo相对于外面的来说 进行定位。
　　10.不需要给背景图片路径加引号
　　比如：
　　background:url(&images/***.gif&) #333;
　　你应该把引号去掉
　　background:url(images/***.gif) #333;
　　如果你加了引号，反而会引起一些浏览器的错误。
（责任编辑：phpcms）
本文关键字：
广告赞助商
最新视频推荐
Copyright (C) 2007-, All Rights Reserved 版权所有 . 沪ICP备号
地址:上海徐汇区零陵路585号 爱邦大厦26H座
传真(FAX):021-
电话(Tel):021-
PHP100 Website Powered by PHPCMS. For PHP100. 服务器维护：阿里巴巴-阿里云在一个JSP页面中使用javascript获得&span&标签里的内容？_百度知道
在一个JSP页面中使用javascript获得&span&标签里的内容？
报错text&quot.getElementById('span&&#47：var data=document。难道（变量：&/ id=&span id=&&gt.value);alert(就可以用上述代码获得了;msg'标签.value） 这个方法只能得到input标签里的内容;input type=&quot，为什么.value为空;验证码错误&lt？但是如果把标签改成&msg&quot？该怎么获得;);alert得不到标签里的内容;&gt代码;msg&quot
提问者采纳
值是输入框里的内容alert(data，span内部的内容;input 标签有value属性；span 标签没有value属性.innerHTML)
提问者评价
我才疏学浅了。
其他类似问题
为您推荐：
其他3条回答
msg')var d=document.innerText.getElementById('alert(d)
兄弟 这样试试~！var data=document.getElementById('msg').alert(data);
alert(data.innerHTML);
您可能关注的推广
span的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁