您现在的位置是:首页 > 网站制作 > 网站建设网站建设

10条HTML代码编写技巧

胜于蓝2019-11-20【网站建设】人已围观

简介1、不要使用嵌入式CSS样式 当你在埋头写代码时,可能会经常顺手或偷懒的加上一点嵌入式css代码,就象这样:<p style="color: red;">杨青个人网站</p>这样看起来即方便又没有问题,

1、不要使用嵌入式CSS样式 0aN胜于蓝|优秀个人博客

当你在埋头写代码时,可能会经常顺手或偷懒的加上一点嵌入式css代码,就象这样:0aN胜于蓝|优秀个人博客

<p style="color: red;">杨青个人网站</p>0aN胜于蓝|优秀个人博客

这样看起来即方便又没有问题,但是它会在你得代码中产生问题。在你开始写代码时,最好是在内容结构完成之后再开始加入样式代码。这样的编码方式就像打游击,是一种很山寨的做法。更好的做法是,把这个P的样式定义在样式表文件里:0aN胜于蓝|优秀个人博客

p { color: red;}0aN胜于蓝|优秀个人博客

2、在页面底部引入JavaScript文件0aN胜于蓝|优秀个人博客

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

如果你的JS文件只是要实现某些功能,(比如点击按钮事件),那就放心的在body底部引入它,这绝对是最佳的方法。0aN胜于蓝|优秀个人博客

举例:0aN胜于蓝|优秀个人博客

<script type="text/javascript" id="bdshare_js" data="type=tools&amp;uid=6574585" ></script>0aN胜于蓝|优秀个人博客

<script type="text/javascript" id="bdshell_js"></script>0aN胜于蓝|优秀个人博客

</body>0aN胜于蓝|优秀个人博客

</html>0aN胜于蓝|优秀个人博客

3、使用H1 - H6标签0aN胜于蓝|优秀个人博客

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

4、如果是博客,那把H1留给文章标题0aN胜于蓝|优秀个人博客

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

5、学会怎样对付IE0aN胜于蓝|优秀个人博客

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

<!--[if lt IE 9]>0aN胜于蓝|优秀个人博客

<script src="/skin/blog/js/modernizr.js"></script>0aN胜于蓝|优秀个人博客

<![endif]-->0aN胜于蓝|优秀个人博客

这些代码的意思是:如果用户浏览器是IE9及以下,那这段代码才会生效。0aN胜于蓝|优秀个人博客

6、缩减,缩减,缩减0aN胜于蓝|优秀个人博客

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

网页写完后,一定要多次回头检查,尽量的减少元素的数量。能用UL布局的列表就不要用一个个的DIV去布局。 0aN胜于蓝|优秀个人博客

7、为所有的图片加上Alt属性0aN胜于蓝|优秀个人博客

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

8、查看源代码0aN胜于蓝|优秀个人博客

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

9、为所有的元素定义样式0aN胜于蓝|优秀个人博客

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

 10、使用CSS Reset0aN胜于蓝|优秀个人博客

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

Tags:

很赞哦! ()

文章评论

当前时间

快速排名

  • 网站建设|万词霸屏,企业软文推广,刷下拉框
  • 快速排名:不用再等SEO三个月,只需3-7天即可把行业关键词覆盖百度搜索引擎首页,点击不收费,排名报表,真实访问量报表一目了然。

合作加盟

  • 扫码请注明来意,否则不会通过
  • 填写商户姓名不要带有“超市”,“便利店” ,“百货”等
  • 扫码成为快钱代理
  • 扫码加站长微信,为您推荐快钱总部负责人
  • 快钱POSS机(电签版)
  • 1,免押版:签约费率快捷交易0.38%,常规交易0.65%
  • 贷记卡单笔≥3000元视为激活
  • 2,,有押版:签约快捷交易0.38%,常规交易0.65%
  • 激活首刷≥99元,扣除99元系统服务费,多出部分shishi到账
  • 电签版ipos参与每月扶持奖励
  • 电签版ipos与Mpos单独考核台均
  • 30台以上有效激活奖励3000元扶持金
  • 当月交易额≥3000元的为活跃用户

站点信息

  • 建站时间:2018-10-24
  • 网站程序:帝国CMS7.5
  • 主题模板《今夕何夕》
  • 文章统计7613篇文章
  • 标签管理标签云
  • 统计数据百度统计
  • 扫描二维码:请注明来意,否则不会通过
  • 微信号:扫描二维码,关注我们
歌名 - 歌手
0:00