在 head 标签中引入所有 CSS 样式文件
理论上讲,你可以在任何位置引入CSS样式表,但HTML规范建议在网页的head标记中引入,这样可以加快页面的渲染速度。
在雅虎的开发过程中,我们发现,在head标签中引入样式表,会加快网页加载速度,因为这样可以使页面逐步渲染。—— ySlow团队
<head>
<title>窗外赏雪</title>
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/admin.css" />
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/begin.css" />
</head>
在页面底部引入 JavaScript 文件
要记住一个原则,就是让页面以最快的速度呈现在用户面前。
当加载一个脚本时,页面会暂停加载,直到脚本完全载入。因此看到页面会花更多的时间,用户体验不好。
如果你的JS文件只是实现某些功能,(比如点击按钮事件),那就放心的在body底部引入它,这绝对是最佳的方法。
把 JavaScript 文件放在 </body> 标签前:
<script type="text/javascript" src="assets/js/file.js"></script>
<script type="text/javascript" src="assets/js/config.js"></script>
</body>
</html>
使用 h1 – h6 标签
建议你在网页中使用其中全部六种标记,虽然大部分人只会用到前四个,但使用最多的H会有很多好处,比如设备友好、搜索引擎友好等,不妨把你的P标签都替换成H6。
<h1>在整个页面中 h1 标签最重要</h1>
<h6>在 h1 - h6 中权重最小,但仍然重要。</h6>
如果是博客,那把H1留给文章标题
今天作者在Twitter上发起一次讨论:是该把H1定义到LOGO 上还是定义到文章标题上,有80%的人选择了后者。
当然具体如何使用要看你的需求,但我建议你在建立博客的时候,将文章题目定为H1,这对搜索引擎优化(SEO)是非常有好处的。
学会如何对付IE
IE一直以来都是前端开发人员的噩梦!如果你的 CSS 样式表基本定型了,那么可以为IE单独建立一个样式表,然后这样仅对IE生效:
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/ie.css" />
<![endif]-->
这些代码的意思是:如果用户浏览器是IE6及以下,那这段代码才会生效。如果你想把IE7也包含进来,那么就把“[if lt IE 7]”改为“[if lte IE 7]”。
缩减,缩减,缩减
大多数人写的第一个页面,一定会发现严重的 “ DIV 癖”,通常初学者的本能就是把一个段落用 DIV 包起来,然后为了控制定位而套上更多的 DIV 。—— 其实这是一种低效而有害的做法。
网页写完后,一定要多次回头检查,尽量的减少元素的数量。能用UL布局的列表就不要用一个个的DIV去布局。
压缩前端代码
通过压缩 CSS 和 JavaScript 代码,通常可以减小 25% 以上的文件体积,在某种情况下,这会大大减轻你的带宽压力,提高加载速度。
使用 CSS Reset 重设
Css Reset也就Reset Css ,就是重置一些标签样式,或者说默认的样式。
对齐元素
尽可能的对齐你的网页元素。比较优美的网站,它们的LOGO、标题、图表、段落肯定是对得非常整齐的。否则就会显得混乱和不专业。
尽量使用HTML标签
有些效果能用css实现,但是优先考虑用html标签实现。
了解每个HTML标签,虽然有些HTML标签很少用到,但你依然应该了解他们。比如“abbr”、“cite”等
img图片标签alt和title区别
alt是给搜索引擎识别,在图像无法显示时的替代文本,
alt属性是一个必需的属性,主要用于img标签,它规定在图像无法显示时的替代文本,如网速太慢、浏览器禁用图像等情况下。
title是关于元素的注释信息,主要是给用户解读。当鼠标放到文字或是图片上时有title文字显示。(因为IE不标准)在IE浏览器中alt起到了title的作用,变成文字提示。
在定义img对象时,将alt和title属性写全,可以保证在各种浏览器中都能正常使用。
title属性并不作为搜索引擎抓取图片的参考,更多倾向于用户体验的考虑。如果图片旁边已经有文字说明,就没必要多此一举的添加title。
title属性常与form以及a元素一同使用,以提供关于输入格式和链接目标的信息。
如:<a href="#" title="这是注释">窗外赏雪</a>,在鼠标悬停在超链接上的时候,显示该超链接的文字注释。
<img src="assets/images/apple.fig" width="32" height="32" alt="image" />
如果你在HTML中提供了宽度和高度,浏览器会在显示网页之前先安排好布局。
如果没有提供,浏览器通常会在它知道图像大小后重新调整网页布局。
注意:浏览器是在下载完HTML文件并显示页面后才下载图像。
除非你告诉它,否则浏览器在下载之前,是不知道图像大小的。
你可以提供宽度和高度,浏览器会按比例缩放图像来适应这些尺寸,这种做法是不提倡的。
不要使用width和height属性,因为浏览器在缩小图像来配合网页之前,先要下载大图像,浪费带宽和性能。
应该通过调整图像本身大小,以符合浏览器规格(通过图像软件修改图像本身尺寸)。
同一个div中,即设置高宽,又设置padding,会把DIV撑大。
.mid{width:100px; height:100px; background:yellow; padding:10px}
<div class="mid"></div>
解决方法:再添加一个div,分开设置,外面的设置高宽,里面的设置padding。
相关推荐
这个项目实战将帮助学习者从实际操作中积累经验,提升HTML、CSS和JavaScript的综合运用能力,为成为一名合格的Web开发者打下坚实基础。通过这个项目,不仅可以提升编程技能,还能锻炼解决问题和项目管理的能力,这...
通过深入学习《VB编程经验手册 V1.0》,开发者不仅能掌握VB编程的基本技能,还能积累实际项目中的经验和技巧,从而提升编程能力。同时,结合在线资源,如"ibook8.com",可以更全面地学习和交流VB编程的相关知识。
数据广播制作需要考虑机顶盒和浏览器的支持情况,笔者在制作数据广播期间,积累了一些经验,供参考。 一、机顶盒和浏览器的支持情况 ------------------------- 机顶盒和浏览器对W3C规范的支持情况不同,有的机顶...
6. **知识库模块**:积累和共享运维经验,提供故障解决方案,提升运维团队的整体能力。 HTML页面是用户与系统交互的界面,包含了系统的功能菜单、操作按钮、提示信息等。通过查看这些HTML页面,我们可以了解系统的...
PowerBuilder是一种强大的数据库...通过学习和积累PowerBuilder编程经验,可以提升开发效率,创建出满足业务需求的高质量应用。同时,利用提供的电子书和资源链接,可以进一步深入学习和掌握PowerBuilder的各个方面。
NB文章系统是由原NB联盟一部分成员经过几年的开发经验积累而成的一个高效、简洁、安全的文章系统,无任何多余累赘的功能;高效的页面执行效率,特别优化系统安全性能,可令你在茫茫网海中一支独秀。 请先访问...
【标题】:“转载的jsp信息发布系统” ...通过分析和重构这个系统,可以深入理解Web应用的架构和工作原理,为实际项目开发积累经验。同时,这也为初学者提供了动手实践的机会,让他们在实践中学习和巩固理论知识。
在Java编程领域,成为一个高手并非一日之功,它需要深入理解语言基础,熟悉设计模式,掌握框架应用,以及不断实践和积累经验。这篇名为“如何迅速成为Java高手[原创]”的文章,很可能是作者根据自身经验总结出的一套...
在实践中,学习者应该通过编写小程序来加深理解,解决实际问题,不断积累经验。同时,理解并熟练运用C++的内存管理,如智能指针,是避免内存泄漏和提高代码质量的关键。随着技术的深入,还可以探索更高级的主题,如...
- **实践经验积累**:实际操作.NET Framework 3.5进行项目开发,积累实践经验。 - **模拟测试**:定期进行模拟测试,评估自己的准备情况,及时调整学习计划。 - **反馈与改进**:积极向Testinside反馈发现的问题或...
这些技巧的掌握需要实践和经验积累。通过阅读提供的文件,尤其是TQueryIndex.htm和TQueryTotal.htm,你可以深入理解并应用这些概念,提升数据库查询的效率和质量。同时,持续关注数据库技术的发展,保持学习,才能在...
这些技巧可能是作者在长期实践中积累的,对初学者和有经验的开发者都可能有启发作用。 从标签来看,“jsp,技巧,java web,java”,我们可以推断出资料涉及的范围。JSP是Java Web开发的一部分,因此,除了JSP本身,还...
1) 成熟稳定:创新天地短信猫开发包是经过多年短信开发经验积累的结晶,至少数百家软件开发商的应用。 2) 支持全面:创新天地短信猫开发包以通用的WINDOWS动态链接库形式提供,从而支持各种WINDOWS开发工具,包括...
YES风淘宝客网赚系统(以下简称 YesFeng )是由YES风经过多年经验积累,经过完善设计、精心打造的一个适用于各种服务器环境的安全、稳定、快速、强大、高效、易用、优秀的淘宝客网赚解决方案。YesFeng 自发布以来,以...
而“发帖子练级”插件则将这种等级提升与用户发帖行为更紧密地关联起来,用户每发表一个符合规则的帖子,都会获得一定的经验值,当经验值积累到一定值时,用户等级自动提升。这样的设计使得用户在享受分享知识、交流...
描述中的博文链接暗示了这可能是一篇个人博客文章,作者分享了他们在使用DOS命令时积累的经验和技巧。虽然没有具体的描述内容,但我们可以推测博主可能讨论了一些常见的DOS操作,如文件管理、进程控制以及系统设置等...
接着,"NS2 仿真之路——半年来的心得体会 - NS - 网络仿真软件 - 百思论坛.htm"这篇文章可能是作者在使用ns2进行网络仿真过程中积累的经验分享。这类心得通常涵盖了常见问题、解决策略、优化技巧以及个人的学习经验...
标题“hs7setup-v7.07.00”指的是一个特定版本的...通过安装HS7软件并参照下载说明,用户可以掌握如何有效地控制和编程ABB机器人,提升工作效率,同时也可以通过共享的资料学习到他人在调试过程中积累的经验和技巧。