htm经验积累

lovefeixian

浏览: 73963 次

最近访客更多访客>>

Geng恋红尘优柔岁月

无量

HMinly

magexi

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

html&css&js

htm经验积累

在 head 标签中引入所有 CSS 样式文件

理论上讲，你可以在任何位置引入CSS样式表，但HTML规范建议在网页的head标记中引入，这样可以加快页面的渲染速度。

在雅虎的开发过程中，我们发现，在head标签中引入样式表，会加快网页加载速度，因为这样可以使页面逐步渲染。—— ySlow团队

<head>

</head>

在页面底部引入 JavaScript 文件

要记住一个原则，就是让页面以最快的速度呈现在用户面前。

当加载一个脚本时，页面会暂停加载，直到脚本完全载入。因此看到页面会花更多的时间，用户体验不好。

如果你的JS文件只是实现某些功能，（比如点击按钮事件），那就放心的在body底部引入它，这绝对是最佳的方法。

把 JavaScript 文件放在 </body> 标签前：

</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]>

<![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>，在鼠标悬停在超链接上的时候，显示该超链接的文字注释。

如果你在HTML中提供了宽度和高度，浏览器会在显示网页之前先安排好布局。

如果没有提供，浏览器通常会在它知道图像大小后重新调整网页布局。

注意：浏览器是在下载完HTML文件并显示页面后才下载图像。

除非你告诉它，否则浏览器在下载之前，是不知道图像大小的。

你可以提供宽度和高度，浏览器会按比例缩放图像来适应这些尺寸，这种做法是不提倡的。

不要使用width和height属性，因为浏览器在缩小图像来配合网页之前，先要下载大图像，浪费带宽和性能。

应该通过调整图像本身大小，以符合浏览器规格（通过图像软件修改图像本身尺寸）。

同一个div中，即设置高宽，又设置padding，会把DIV撑大。

.mid{width:100px; height:100px; background:yellow; padding:10px}

解决方法：再添加一个div，分开设置，外面的设置高宽，里面的设置padding。

分享到：

htm表格使用心得 | 正确声明htm文档类型

2014-09-26 18:08
浏览 444
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论