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

10条HTML代码编写技巧

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Tags:

很赞哦! ()

文章评论

当前时间

合作加盟

  • 快钱POSS机
  • 费率:0.038%(刷1万=38元手续费)
  • 单笔最高刷卡金额:5万
  • 单月最高刷卡金额:600万

快钱代理公告

  • 凡事扫码代理必须实名认证
  • 实名认证后才可拉进代理微信群
  • 代理微信群有相关活动政策等

站点信息

  • 建站时间:2018-10-24
  • 网站程序:帝国CMS7.5
  • 主题模板《今夕何夕》
  • 文章统计1638篇文章
  • 标签管理标签云
  • 统计数据百度统计
  • 微信公众号:扫描二维码,关注我们

X客服在线

关于

服务时间

周一至周日 9:00-22:00