当前位置: 电脑软硬件应用网 > 设计学院 > 网页设计 > 正文 |
|
|||
网页设计师要知道的30条HTML代码编写的技巧 | |||
2010-4-6 10:10:46 文/tuts+ 出处:电脑软硬件应用网 | |||
本文总结了30条HTML代码编写指南,只要在编写HTML代码的过程中牢记它们,灵活运用,你一定会写出一手漂亮的代码,早日迈入专业开发者的行列。 1. 一定要闭合HTML标签 <li>Some text here.<li>Some new text here.<li>You get the idea. 最好使用这样的形式: <ul><li>Some text here. </li><li>Some new text here. 1. 验证CSS文件,解决所有可见的错误 通常有四种文档类型可供选择: 1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 3. 不要使用嵌入式CSS样式 <p style="color: red;">网页教学网</p> 在你开始写代码时,最好是在内容结构完成之后再开始加入样式代码。 这样的编码方式就像打游击,是一种很山寨的做法。——Chris Coyier 更好的做法是,把这个P的样式定义在样式表文件里: someElement > p {color: red;} 在雅虎的开发过程中,我们发现,在head标签中引入样式表,会加快网页加载速度, <head><title>My Favorites Kinds of Corn</title><link rel="stylesheet" type="text/css" media="screen" href="path/to/file.css" /><link rel="stylesheet" type="text/css" media="screen" href="path/to/anotherFile.css" /></head> 如果你的JS文件只是要实现某些功能,(比如点击按钮事件),那就放心的在body底部引入它,这绝对是最佳的方法。 举例: <p>And now you know my favorite kinds of corn. </p><script type="text/javascript" src="path/to/file.js"></script><script type="text/javascript" src="path/to/anotherFile.js"></script></body></html> $('a#moreCornInfoLink').click(function() {alert('Want to learn more about corn?');}); 如果你刚开始从事网页制作,那强烈建议你下载这个网页开发工具条 ,并在编码过程中随时使用”HTML标准验证”和“CSS标准验证”。如果你认为CSS是一种非常好学的语言,那么它会把你整的死去活来。你的不严谨的代码会让你的页面漏洞百出,问题不断,一个好的方法就是—— 验证,验证,再验证。 8. 下载Firebug 9. 使用Firebug! Firebug教程: Overview of Firebug <DIV><P>Here's an interesting fact about corn. </P></DIV> <div><p>Here's an interesting fact about corn. </p></div> 12. 如果是博客,那把H1留给文章标题 当然具体如何使用要看你的需求,但我建议你在建立博客的时候,将文章题目定为H1,这对搜索引擎优化(SEO)是非常有好处的。 13. 下载ySlow 14. 使用UL列表布局导航菜单 <div id="nav"><a href="#">Home </a><a href="#">About </a><a href="#">Contact </a></div> 为什么要用UL布局导航菜单? ——因为UL生来就是为定义列表准备的 最好这样定义: <ul id="nav"><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li></ul> 如果你的CSS样式表基本定型了,那么可以为IE单独建立一个样式表,然后这样仅对IE生效: <!--[if lt IE 7]><link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" /><![endif]--> 16. 使用一个好的代码编辑器 Mac 用户 网页写完后,一定要多次回头检查,尽量的减少元素的数量。 能用UL布局的列表就不要用一个个的DIV去布局。 正如写文章的关键是“缩减,缩减,缩减”一样,写页面也要遵循这个标准。 19. 为所有的图片加上Alt属性 Firefox不支持显示图像Alt属性,可以加入title属性: <img src="cornImage.jpg" alt="网页教学网" title="网页教学网" /> 我的“啊~哈!”时间( “AH-HA” moments,指柳暗花明或豁然开朗的时刻)通常都发生在深夜,比如我彻底理解JavaScript的“闭包”概念,就是在这样一种情况下。如果你还没有感受过这种奇妙的时刻,那就马上试试吧! 21. 查看源代码 留意网络上各种炫酷的JavaScript效果,如果看上去是使用了插件,那根据它源码中head标签内的文件名,就可以找到这个插件名称,然后就可以学习它据为己用。 22. 为所有的元素定义样式 23. 使用第三方服务 现在互联网上流行着许多可以免费加在网页中的API,这些工具非常强大。它可以帮你实现许多巧妙的功能,更重要的是可以帮你宣传网站。 24. 学习Photoshop Psdtuts+上有许多英文的饰品教程:Videos section 26. 参与社区讨论 27. 使用CSS Reset 关于是否应该使用CSS Reset,网上也有激烈的争论,笔者是建议使用的。你可以先选用一些成熟的CSS Reset,然后慢慢演变成适合自己的。 28. 对齐元素 29. 关于PSD切片 Slice and Dice that PSD CSS框架是为熟练开发者设计的,这样会节省它们大量的时间。 |
|||
最新热点 | 最新推荐 | 相关文章 | ||
详解HTML页面播放视频元素param的属… HTML教程:几个不常用的HTML标记使用… HTML教程:marquee标签实现滚动效果 语义化的HTML结构到底有何好处 不常用的HTML标签Fieldset 一些HTML表格的使用高级语法 网页优化的最基础部分:HTML的优化 10大HTML标签常犯的错误 HTML、XHTML和XML的比较 网页制作掌握的最常用的HTML标记 |
关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 | |
Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号 |