任鸟飞网站设计博客 - 关注网站网页设计、网站博客推广优化及赚钱 » 标准

Html5 模板

任鸟飞 — Fri, 27 May 2011 01:19:02 +0000

相对于Html4，Html5在语法上做了较大变动，并且新增了大量新的标签，使得代码更加简洁但功能更加强大。虽然说Html5变动较大，但有Html基础的人依然很容易转到Html5，下面提供了一个基本的Html5模板，并附加了详细说明，希望能让你快速上手。

Html5源代码



  
  
   
   Basic HTML5 Template
   
   
  
  
  
  
   
   Logo
   Description
  
  
   Best Design Magazine
   Moblie Web Template
   iDesignWallpaper
   iPhone Faves
   Industry Idea
   Twitter
  
  
  
  
   
    Article Section


   Sidebar
  
  Footer

Html5和Html4两者的区别

1. 文档类型 doctype 申明语法

Html4：

Html5：

2. head 标签

Html4：

Html5：

3. html 标签

XHTML：
http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”zh”>

Html5：

4. 新增标签

Html5 新增

HTML 5 和标签

任鸟飞 — Fri, 12 Nov 2010 02:10:52 +0000

和标签" />

WordPress默认主题twentyten已经开始支持HTML5，其HTML源代码以开始，很明显这和我们常见HTML4代码有很大不同。

常见的HTML4开头部分代码

HTML 5 标签

定义和用法
声明是文档中的第一个成分，位于标签之前。该标签告知浏览器文档所使用的 HTML 规范。

HTML 4.01 与 HTML 5 之间的差异
在 HTML 4.01 中有 3 个不同的文档类型，在 HTML 5 中只有一个：。

提示和注释：
注释：标签没有结束标签！提示：对大小写不敏感。

HTML 5
在 HTML5 中，文档类型声明很简单：

在所有 HTML 文档中规定文档类型很重要，这样浏览器才能了解所预期的文档类型。
HTML 4.01 中的 doctype 需要引用一个 DTD，这是因为 HTML 4.01 基于 SGML。HTML 5 不基于 SGML，也不需要引用 DTD，但是需要声明文档类型让浏览器按照它们应该的方式来运行。

HTML 5 标签

定义和用法
元素告知浏览器这是一个 HTML 文档。

HTML 4.01 与 HTML 5 之间的差异
在 HTML 4.01 中的 xmlns 属性，在 XHTML 中是必须的。实际上它没有任何效果，但是出于验证的原因，在把 HTML 转换为 XHTML 的过程中，是很有帮助的。在 HTML 5 中，没有理由这么做，但是你仍然可以把 xmlns 属性定义为 “http://www.w3.org/1999/xhtml”。

在 HTML 5 中，有一个新属性：manifest。

提示和注释
注释：如果您出于某种原因，希望定义 xmlns 属性，唯一合法的值是 “http://www.w3.org/1999/xhtml”。

属性

属性manifest 值url。说明：为脱机使用定义缓存信息。
属性xmlns 值http://www.w3.org/1999/xhtml。说明：定义 XML namespace 属性。在 HTML 5 中，不要使用该属性。

标准属性

属性	值	描述
accesskey	character	规定访问元素的键盘快捷键
class	classname	规定元素的类名（用于规定样式表中的类）。
contenteditable	true false	规定是否允许用户编辑内容。
contextmenu	menu_id	规定元素的上下文菜单。
data-yourvalue	value	创作者定义的属性。 HTML 文档的创作者可以定义他们自己的属性。必须以 “data-” 开头。
dir	ltr rtl	规定元素中内容的文本方向。
draggable	true false auto	规定是否允许用户拖动元素。
hidden	hidden	规定该元素是无关的。被隐藏的元素不会显示。
id	id	规定元素的唯一 ID。
item	empty url	用于组合元素。
itemprop	url group value	用于组合项目。
lang	language_code	规定元素中内容的语言代码。
spellcheck	true false	规定是否必须对元素进行拼写或语法检查。
style	style_definition	规定元素的行内样式。
subject	id	规定元素对应的项目。
tabindex	number	规定元素的 tab 键控制次序。
title	text	规定有关元素的额外信息。

常用CSS缩写语法总结

任鸟飞小秘书 — Fri, 22 Oct 2010 06:32:46 +0000

使用缩写可以帮助减少你CSS文件的大小，速度按页面的加载时间，而且代码清晰，更加容易阅读。原文链接

Web3.0展望

任鸟飞小秘书 — Thu, 21 Oct 2010 03:49:51 +0000

Web 3.0一词包含多层含义，用来概括互联网发展过程中可能出现的各种不同的方向和特征，包括将互联网本身转化为一个泛型数据库；跨浏览器、超浏览器的内容投递和请求机制；人工智能技术的运用；语义网；地理映射网；运用3D技术搭建的网站甚至虚拟世界或网络公国等。原文链接

IE9试用体验

任鸟飞 — Sun, 19 Sep 2010 16:09:26 +0000

自从学习 HTML5 和 CSS3 之后，就很少使用IE浏览器，因为IE对新技术新标准支持太差，最近微软发布最新版浏览器 Internet Explorer 9 的 Beta 版，试用之后，感觉依然很差。

目前IE9 Beta版本只支持 Vsita和Windows7用户，使用XP系统的就没办法了。对IE9感兴趣的朋友，不妨下载下来试用一下。
IE9 下载地址：http://www.beautyoftheweb.com/。

微软号称IE9 是真正广泛支持标准的浏览器，比如最新的 HTML5 和 CSS3，以及 SVG 等最新标准，但在试用过程中，明显不是所宣称的那样，和Google Chrome 、Firefox、Opera等浏览器相比，IE9 对 HTML5 和 CSS3 的支持依然很乏力。

之前做过一个使用 HTML5 和 CSS3 的网页模板，具体请参考利用Html5 和 CSS3 制作网站模板，运行此模板后，发现很多CSS3属性显示的依然很粗糙，或根本就不支持。从测试的效果来看，目前IE9仅能支持一些常见的CSS3属性，而大部分CSS3属性，IE9依然不支持，比如 transition（过渡）、动画效果、颜色渐变、阴影效果等。

下面是利用纯CSS3制作出来的哆啦A梦，看看你的浏览器对CSS3支持的程度如何？[链接]

其中Google Chrome浏览器支持的最好，整个图像都有渐变效果，而且眼睛还能动。

IE9测试版，IE依然在标准化上杯具

网页设计的12种颜色

任鸟飞小秘书 — Sun, 19 Sep 2010 04:13:14 +0000

他们发现，美国前100大网站的Logo，主要使用12种颜色。其中，采用蓝色的网站最多，红色排在第二种，黄色排在第三种。原文链接

CSS3 Multiple Columns 属性使用详解

任鸟飞 — Fri, 17 Sep 2010 15:36:37 +0000

CSS3新增 Multiple Columns 属性，翻译成中文就是多列的意思，利用Multiple Columns属性可以自动将内容按指定的列数排列，报纸和杂志一般都采用这种布局方法。

Multiple Columns 有两种设置方法：

CSS 3 Multiple Columns (Width)：采用列宽来控制
CSS 3 Multiple columns (Count)：采用列数来控制

CSS 3 Multiple Columns (Width) 使用示例及方法：

示例：

任鸟飞网页设计博客，是一个专注于网页设计、网站建设、图形图像设计、搜索引擎、互联网趣味信息等的原创博客，作者任鸟飞。

为了能提供更多的高质量的原创技术类文章，任鸟飞网页设计博客于2010年7月份开通了任鸟飞网页设计博客联盟模块，此模块主要用于发表任鸟飞网页设计博客联盟成员的博客文章。

如果你不经意间走到这里，那是我们的荣幸，但我们更期待你能在这里驻足，希望你能在安营扎寨。我们真诚的希望你能成为任鸟飞网页设计博客联盟的成员。如果你也乐意加入任鸟飞网页设计博客联盟，请发邮件到 www.renniaofei.com@gmail.com 或直接在下面留言。

CSS代码：

#CSS3_Multiple_Columns_widht {
//Firefox 浏览器设置方法
-moz-column-width: 200px;
-moz-column-gap: 30px;
-moz-column-rule: 1px solid #222;
//Webkit 浏览器设置方法
-webkit-column-width: 200px;
-webkit-column-gap: 30px;
-webkit-column-rule: 1px solid #222;
//通用方法
column-width: 200px; //列宽设置
column-gap: 30px; //两列之间的间隙大小
column-rule: 1px solid #222; //分割样式
}

CSS 3 Multiple Columns (Count) 使用方法：

示例：

任鸟飞网页设计博客，是一个专注于网页设计、网站建设、图形图像设计、搜索引擎、互联网趣味信息等的原创博客，作者任鸟飞。

CSS代码：

#CSS3_Multiple_Columns_count {
//Firefox 浏览器设置方法
-moz-column-count: 2;
-moz-column-gap: 30px;
-moz-column-rule: 1px solid #222;
//Webkit 浏览器设置方法
-webkit-column-count: 2;
-webkit-column-gap: 30px;
-webkit-column-rule: 1px solid #222;
//通用方法
column-count: 2; // 分成的列数
column-gap: 30px; //两列之间的间隙大小
column-rule: 1px solid #222; //分割样式
}

怎么样？效果很酷吧，赶快试一下吧！

CSS3 transform 属性使用详解

任鸟飞 — Tue, 14 Sep 2010 15:48:54 +0000

transform 本意是变换、改变的意思，在CSS3中transform包括三种含义，分别是rotate（旋转）、skew（扭曲）、scale（缩放）。

1. CSS3 transform – rotate（旋转）

.transform–rotate {
  -moz-transform: rotate(7deg);
  -webkit-transform: rotate(7deg);}

2. CSS3 transform – skew（扭曲）

.transform–skew{
  -moz-transform: skew(-25deg);
  -webkit-transform: skew(-25deg);}

3. CSS3 transform – scale（缩放）

.transform–scale {
  -moz-transform: scale(0.5);
  -webkit-transform: scale(0.5);}

初始图片：

兼容性

兼容：Chrome、Firefox、Opera等。
不兼容：IE8以下版本

由于IE8以下版本不支持CSS3，要想实现上述的transform（转换）效果，须使用IE滤镜，代码如下：

rotation取值[0,1,2,3]，依次代表旋转 [0deg,90deg,180deg,270deg]，有关BasicImage滤镜的说明请参考 BasicImage filter。

HTML5新增元素标记

任鸟飞 — Sun, 08 Aug 2010 15:41:14 +0000

HTML5 为 HTML 语言的第5版本，相对 HTML4 来说，HTML5 定义了大量的新元素，整理汇总如下。

这些新增元素的用法和 HTML4 大相径庭，在 HTML4 中类似的功能可以用 ID 或类来标识，而在 HTML5 中可以直接使用特定的标签，例如：

HTML4 :
HTML5 :

HTML5 常用的新增元素含义及说明：

1. section [区域]

文档中的某一区域，可以使用section标签将某些区域一一标注出来。

2. article [文章内容]

文档中的某一具体的内容，可以使用article标签将某些具体内容一一标注出来。

3. aside [与主要内容相关的一些次要信息]

文档中的某些次要信息，主要用于补充说明。

4. hgroup [标题群组]

将 H1～H6群组。

5. header [页头]

包含页头的相关信息，比如 Logo、网站说明、导航等

6. footer [页脚]

包含页脚的相关信息，比如作者、版权等。

7. nav [导航]

做导航菜单用。

8. figure [流媒体]

实例：


 
 Example

HTML5其他新增的元素含义及说明：

9. video [视频] audio [音频]

10. embed [嵌入]

11.mark [标记]

用于高亮显示或标记一些出处。

12. progress [进度]

用于下载或加载某些程序时显示进度信息。

13. meter [信息检测]

14. time [日期时间]

15. ruby rt rp [用于标记拼音，音调等]

16. wbr [a line break opportunity]

17. canvas [渲染动态图片]

18. command [命令]

19. details [额外的信息]

20. datalist [input 新增 list 属性 ]

21. keygen [key 生成器]

22. output [输出信息]

23. input type 新增如下属性

tel
search
url
email
datetime
date
month
week
time
datetime-local
number
range
color

搜索引擎优化指南

任鸟飞 — Sun, 11 Jul 2010 06:09:49 +0000

通过分析博客的流量统计，可以看出，来自搜索引擎的流量占相当大一部分，所以做好搜索引擎优化，对推广博客以及提高流量至关重要。

虽然说像Google这样的搜索引擎巨头其搜索技术已经相当智能，但毕竟它还只是一台机器，在对网页进行收录索引时候有一套特定的规则，所谓的搜索引擎优化本质就是让博客或网站符合这套规则。

做好搜索引擎优化主要包括下面5个方面：

关键字选取
满足搜索引擎制订的规则
页面代码优化
反向链接
追踪反馈

一. 关键字选取

这跟你的网站或博客的主题密切相关，基本上你的主题确定下来之后，关键字的范围也就定下来了。就拿任鸟飞网页设计博客来说吧，任鸟飞网页设计博客的讨论的主题是网页设计，所以说关键字肯定是围绕着网页设计，考虑到关键字”网页设计“在搜索引擎中的竞争相当激烈，所以说任鸟飞网页设计博客关键字最终确定为”任鸟飞网页设计博客“。

关键字的选取准则：站在用户（使用搜索引擎的人）的角度来选取关键字。
推荐：Google Adword 关键字选取工具

二. 满足搜索引擎制订的规则

也就是说你的网站或博客必须对搜索引擎友好，满足他的要求。

1. 站点地址唯一性
例如下面的4个网址都指向同一个站点，但在搜索引擎的眼里，这代表4个不同的页面，一般情况下选择 www.domain.com 这种形式的地址，将其他形式的地址转向到 www.domain.com 即可。
domain.com
www.domain.com
domain.com/index.html
www.domain.com/index.html
2. 友好的链接地址 URL
在用ASP或PHP编程时，经常需要提供一些参数，例如 domain.com?id=32&cat=12，虽然搜索引擎也能识别这种类型的URL，但显然不够友好，我们可以利用 Apache 的 rewrite 功能将上述URL转化成如下样式 domain.com/sports/baseball/statistics.php。
3. 减少使用 Flash 和 Javascript
4. 提供一个 sitemap 页面
5. 页面代码正确
6.页面加载速度

三. 页面代码优化

1. Title 标签
Title 标签对搜索引擎来说非常重要，因尽量使 title 独特一点。
2. 内容标题尽量使用

或

3. meta标签
主要包括 keywords，description，robots 三者。由于现在的搜索引擎已经不会去读取keywords，description，所以这两个可省略，但不推荐省略。robots一般情况不会用到，搜索引擎有默认的索引方式，所以一般也省略掉。

四. 反向链接

由于Google PR值在民间依然盛行，而反向链接对PR影响很大，因此反向链接在这里也比不可少。
增加反向链接的方法
1. 交换友情链接
2. 到PR值比较高的网站买链接
3. 通过在其他网站或博客留言等

五. 追踪反馈

分析站点的流量统计，因势利导，查漏补缺。

任鸟飞网站设计博客 - 关注网站网页设计、网站博客推广优化及赚钱 » 标准

Html5 模板

Html5 模板下载

Html5源代码

Html5和Html4两者的区别