打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
HTML代码编写技巧汇总

在我们编写代码的使用 一个良好的习惯是非常重要的一步 ,下面小编为大家介绍一下html代码编写有哪些技巧

1、尽量不使用嵌入式CSS样式 

你可能会经常顺手或偷懒的加上一点嵌入式css代码,就象这样:

茵茵绿草 liuye91.com

这样看起来即方便又没有问题,但是这样的编码方式就像打游击,内容和代码掺杂在一起容易出现问题提,也不利于后期维护,是一种很山寨的做法。在你开始写代码时,最好是在内容结构完成之后再开始加入样式代码。更好的做法是,把这个P的样式定义在CSS里:

p { color: red;}

2、不是特变重要的JavaScript文件在页面底部引入

要记住一个原则,就是让页面以最快的速度呈现在用户面前。当加载一个脚本时,页面会暂停加载,直到脚本完全载入。所以会浪费用户更多的时间。

如果你的JS文件只是要实现某些功能,(比如分享按钮),那就放心的在前面引入它,这绝对是最佳的方法。

举例:

3、使用H1 – H6标签

建议你在网页中使用其中全部六种标记,虽然大部分人只会用到前四个,但使用最多的H会有很多好处,比如设备友好、搜索引擎友好等,不妨把你的P标签都替换成H6。

4、如果是博客,那把H1留给文章标题

当然具体如何使用要看你的需求,但我建议你在建立博客的时候,将文章题目定为H1,这对搜索引擎优化(SEO)是非常有好处的。

5、学会怎样对付IE

IE一直以来都是前端开发人员的噩梦!如果你的CSS样式表基本定型了,那么可以为IE单独建立一个样式表,然后这样仅对IE生效:

这些代码的意思是:如果用户浏览器是IE9及以下,那这段代码才会生效。

6、缩减,缩减,缩减

回望我们大多数人写的第一个页面,一定会发现严重的 “DIV癖”( divitis ),通常初学者的本能就是把一个段落用DIV包起来,然后为了控制定位而套上更多的DIV。—— 其实这是一种低效而有害的做法。

网页写完后,一定要多次回头检查,尽量的减少元素的数量。能用UL布局的列表就不要用一个个的DIV去布局。

7、为所有的图片加上Alt属性

为图片加上alt属性的好处是不言而喻的 —— 这样可以让禁用图片或者使用特殊设备的用户无障碍得了解你的网页信息,并且对图像搜索引擎友好。Firefox不支持显示图像Alt属性,可以加入title属性

8、查看源代码

没有什么比模仿你的偶像能让你更快的学习HTML。起初,我们都要甘做复印机,然后慢慢得发展自己的风格。研究你喜欢的网站页面代码,看看他们是怎么实现的。这是高手的必经之路,你一定要试一下。注意:只是学习和模仿他们的编码风格,而不是抄袭和照搬!留意网络上各种炫酷的JavaScript效果,如果看上去是使用了插件,那根据它源码中head标签内的文件名,就可以找到这个插件名称,然后就可以学习它据为己用。

9、为所有的元素定义样式

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

 10、使用CSS Reset

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

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
30个网页新手的最佳实践 | 我想网
检查多余CSS代码的神器
CSS模块化思想 更加有效的管理CSS样式
WEB前端优化的体会(三)
web前端--性能优化总结
怎样用JS判断各浏览器调用各自的css文件
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服