HTML5技术

HTML代码编写的技巧_HTML教程(2)

字号+ 作者:H5之家 来源:H5之家 2015-09-19 18:30 我要评论( )

13. 下载ySlow 在过去几年里,雅虎的团队在前端开发领域做了许多伟大的工作。前不久,它们发布了一个叫ySlow的Firebug扩展,它会分析你的网页,并返回 一个成绩单,上面细致分析了这个网页的方方面面,提出需要改进

13. 下载ySlow
在过去几年里,雅虎的团队在前端开发领域做了许多伟大的工作。前不久,它们发布了一个叫ySlow的Firebug扩展,它会分析你的<网页,并返回 一个“成绩单”,上面细致分析了这个网页的方方面面,提出需要改进的地方,虽然它有点苛刻,但它绝对会对你有所帮助,强烈推荐—— 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>

15. 学会怎样对付IE
IE一直以来都是前端开发人员的噩梦!如果你的CSS样式表基本定型了,那么可以为IE单独建立一个样式表,然后这样仅对IE生效:
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" />
<![endif]-->
这些代码的意思是:如果用户浏览器是IE6及以下,那这段代码才会生效。如果你想把IE7也包含进来,那么就把“[if lt IE 7]”改为“[if lte IE 7]”。

16. 使用一个好的代码编辑器
不论你是Windows还是Mac用户,这里都有很多优秀的编辑器供你选择:Mac 用户
Coda
Espresso
TextMate
Aptana
DreamWeaver CS4
PC 用户
InType
E-Text Editor
Notepad++
Aptana
Dreamweaver CS4

17. 压缩前端代码!
Javascript 压缩服务
Javascript Compressor
JS Compressor
CSS Compression Services
CSS Optimiser
CSS Compressor
Clean CSS

18. 缩减,缩减,缩减
回望我们大多数人写的第一个页面,一定会发现严重的 “DIV癖”( divitis ),通常初学者的本能就是把一个段落用DIV包起来,然后为了控制定位而套上更多的DIV。—— 其实这是一种低效而有害的做法。网页写完后,一定要多次回头检查,尽量的减少元素的数量。能用UL布局的列表就不要用一个个的DIV去布局。正如写文章的关键是“缩减,缩减,缩减”一样,写页面也要遵循这个标准。

19. 为所有的图片加上Alt属性
为图片加上alt属性的好处是不言而喻的 —— 这样可以让禁用图片或者使用特殊设备的用户无障碍得了解你的王爷信息,并且对图像搜索引擎友好。
irefox不支持显示图像Alt属性,可以加入title属性:
<img src="cornImage.jpg" alt="教程" title="教程" />

20. 查看源代码
没有什么比模仿你的偶像能让你更快的学习HTML。起初,我们都要甘做复印机,然后慢慢得发展自己的风格。研究你喜欢的网站页面代码,看看他们是怎么实现的。这是高手的必经之路,你一定要试一下。注意:只是学习和模仿他们的编码风格,而不是抄袭和照搬!

留意网络上各种炫酷的JavaScript效果,如果看上去是使用了插件,那根据它源码中head标签内的文件名,就可以找到这个插件名称,然后就可以学习它据为己用。

21. 为所有的元素定义样式
这一条在你制作其他公司企业网站时尤为必要。你自己不使用blockquote标记?那用户可能会用,你自己不使用OL?用户也可能会。花时间做一个页面,显示出ul, ol, p, h1-h6, blockquotes, 等等元素的样式,检查一下是否有遗漏。

22. 使用第三方服务
译者注:英文原文标题为“使用Twitter”
现在互联网上流行着许多可以免费加在网页中的API,这些工具非常强大。它可以帮你实现许多巧妙的功能,更重要的是可以帮你宣传网站。

23. 学习Photoshop
Photoshop是前端工程师的一个重要工具,如果你已经熟练掌握HTML和CSS,那不妨多学习一下Photshop。
Psdtuts+上有许多英文的饰品教程:Videos section
Lynda.com 也有大量教程,不过要支付$25美元
“You Suck at Photoshop” 系列教程
花费几个小时的时间学习Photoshop的快捷键操作

24. 学习每一个HTML标签
虽然有些HTML标签很少用到,但你依然应该了解他们。比如“abbr”、“cite”等,你必须学习它们以备不时之需。

25. 参与社区讨论
网络上有许许多多优秀的资源,而社区中也隐藏着许多高手,这里你既可以自学,也能请教经验丰富的开发者。

26. 使用CSS Reset
Css Reset也就Reset Css ,就是重置一些HTML标签样式,或者说默认的样式。
关于是否应该使用CSS Reset,网上也有激烈的争论,笔者是建议使用的。你可以先选用一些成熟的CSS Reset,然后慢慢演变成适合自己的。

27. 对齐元素
简单来说,你应该尽可能的对齐你的网页元素。可以观察一下你喜欢的网站,它们的LOGO、标题、图表、段落肯定是对得非常整齐的。否则就会显得混乱和不专业。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 学习HTML5一周的收获2 - 张晋铭

    学习HTML5一周的收获2 - 张晋铭

    2017-03-13 08:03

  • HTML5学习笔记一 简单学习HTML5 - 鸿鹄当高远

    HTML5学习笔记一 简单学习HTML5 - 鸿鹄当高远

    2016-04-11 10:00

  • HTML入门教程(一)_HTML基础入门教程

    HTML入门教程(一)_HTML基础入门教程

    2015-09-24 15:06

  • HTML中网页的优化_HTML教程

    HTML中网页的优化_HTML教程

    2015-09-23 12:00

网友点评
}