刚过完火星，从骨灰级哪里淘到的沙子。

以前很少写样式的体验，今天来了兴致，那就给大伙共享一下。

也不管是否还有火星鸡 查看文章

Web Developer插件

建立符合WEB标准的网站，应用XHTML与CSS来构建网站，我们往往处在开发与调试两个重要的环节，对于DIV+CSS的XHTML开发环境，页面的调试更加的重要。我们完全手写代码，需要不断的预览所形成的页面效果。而DIV+CSS这一形式是刚刚兴起的一种新技术，目前还不是非常的普及，我们需要不断的学习，浏览他人的成功作品从中汲取制作经验显得非常重要，也是我们学习的一种捷径。

现在我们介绍一种网页调试的辅助工具：Web Developer！ 它是运行在FF（指Firefox浏览器下同）环境中的插件，是目前公认为最为优秀的网页调试工具。

Web Developer作为FF的插件存在，主要功能表现在几个重要的方面：

对页面中的文本、图像、媒体文件进行控制，对网页所应用的CSS文件的id与class辅助查看，表格辅助查看，可以实现修改CSS文件实时显示出得到的页面效果等等。

Web Developer插件能够帮助我们对CSS网站进行分析，我们使用FF对网页进行浏览，运用Web Developer插件不仅仅只是能看到对方的源代码，还能方便的分析出页面的布局结构，CSS书写方式，鼠标所在位置的id或class是什么等等，使我们能迅速的理解、学习别人的成功经验，进而更加方便快捷的掌握CSS布局技术。

立即浏览Web Developer教程专题

原作者: AN Jay 原文 译者: 黑莲

每个网页设计者或开发者都希望他们的网站能够带给用户最好的体验，无论用户是什么浏览器/操作系统/屏幕分辨率，但是让我们面对现实，屏幕分辨率/操作系统/浏览器确实影响网站的用户体验。

屏幕分辨率

发现上面的图片中，最常用的分辨率是1280×1024，而1024×768排在第二，1280×800排第三。

浏览器统计数据

发现用户最常用的浏览器是Firefox，而微软的IE则排在第二，Safari排在第三。

操作系统

排第一的是微软，其次是苹果麦金塔，然后是linux。

浏览器和操作系统混合数据

发现最常见的搭配是微软的平台，Firefox浏览器，而微软和IE只是位居第二。

总结

通过分析上面的数据，网页开发和设计人员应该能找到目前的流行趋势了。这样就能保证你们的网站提供最佳的用户体验
。

我觉得上面的数据无论是对于新的网站或者已经在运营的网站都非常重要。我相信最佳的浏览体验能够带给用户一种享受。同时也能给用户一个好印象。

所以，现在看一看，你的网站是不是给用户提供了最佳体验或者需要优化改进一下。如果要获取用户的详细信息，比如来自哪里，如何查看你的网站的，目前的浏览体验是什么等等，可以使用免费的google analytics。

非常欢迎你们跟我们分享用户最佳浏览体验的相关经验。

概要

网络是不断的进化的. 新的和有创意的网站每天都在出现, 从各方面都在冲击着HTML的边界. HTML 4来到我们身边已经差不多有10年了, 发行者们不断的寻求提供更强大的功能新技术, 但是常会因为标记语言和浏览器的约束而路途坎坷.

为了给作者们提供更灵活, 更具互操作性, 能有更多交互性并令人振奋的网站和应用程序, HTML 5 引入并加强了一系列功能, 包括表单控制, 应用程序接口(APIs), 多媒体, 结构化和语义化.

HTML 5的工作, 开始于2004年, 在 W3C HTML WG 和 WHATWG 的共同努力下现在正在全面贯彻落实. 很多关键角色参与了W3C的努力, 最具代表性的是4大浏览器厂商: Apple, Mozilla, Opera, Microsoft; 还有一系列的有着不同利益和专业技术的其他机构以及个人.

编写详细规范的工作还在进行中, 离完成还有很长的路要走. 同样的, 在这篇文章中讨论的功能不排除在未来有所改动的可能. 这篇文章只是以大纲的形式介绍一些在当前的草案中的主要的特性.

结构

HTML 5 引入了一整套全新的元素来让构建页面变得更加简单. 大多数基于HTML 4的页面的包含多种常用结构, 比如说页首(header), 页脚(footer)和纵列(column). 现阶段我们通常会用div元素标记这些区块, 然后为它们定义一个描述性的id或是class.

图表说明一个典型的用div元素带上id和class属性标记的2栏布局. 其中包括页首(header)和页脚(footer), 在页首下面是一个水平导航条, 主体内容又包含了文章(article)和它右边的侧边栏(sidebar).

大量的使用div元素是因为目前的HTML 4版本缺少更明确的语义描述这些区块所致. HTML 5 为了表现这些不同的区块而引入了新的元素.

那些div元素可以被新的元素代替了: header, nav, section, article, aside以及footer.

用这些新元素会有一些优势(相对于HTML 4). 当和标题元素(h1 – h6)一同使用时, 可以标记出嵌套的章节标题层次, 超越之前版本的HTML仅有的六个层次. 规范中包含了一份生成大纲的详细算法. 把结构化这些内容纳入考虑范围, 并仍旧向后兼容先前的版本. 这样可以在编辑工具以及浏览器中生成目录来帮助用户来浏览这个文档.

举例说明, 下面的标记结构使用了嵌套的章节和h1元素构成:

这里要注意, 为了更好的兼容现在的浏览器, 它也能在适当的位置利用其它的标题元素(h2 – h6)来代替h1元素.

通过辨别页面中的章节使用特殊章节元素的确切目的, 辅助的技术能帮助用户更容易的浏览这个页面. 举例, 他们能不费力的略过导航区块或者能快速的从一篇文章直接跳到下一篇而不需要作者提供跳转链接. 对于创作者来说, 在文档中去掉多余的div, 而用一些更明显的元素代替它们, 会让源代码更清楚而且更容易书写.

来源于其他网址