如何用HTML5制作网页？

2010-06-19 11:24:42 作者：网友来源：互联网

根据你们询问的人，HTML 5不是迈向创造更语义化的网络的下一个重要步伐，就是用一系列不完整的标签和标记大杂烩让网络陷入困境的灾难。

争论双方的问题在于，很少的站点在自然环境下使用HTML 5，所以现在所认识到的问题的理论解决方案仍然在很大程度上未经考验。

即便如此，我们不难发现下一代网络标记工具的好处和潜在的问题。

内容章节

HTML 5有什么不同？
最终，一个任何人都可以记住的文档类型
最基本的语义结构
<header>
<nav>
<section>
<article>
<aside>
<footer>
把他们放在一起
为新元素编写样式
兼容老的浏览器
现在你可以使用HTML 5了，但你会用么？

HTML 5有什么不同？

首先，我们通过HTML 5表达什么？First off， what do we mean by HTML 5？理论上，我们表达所有的事——新的语义结构标签，例如canvas或者离线储存等API规范，以及新的内联语义标签。尽管如此，我们把实际的原因（PS：浏览器支持问题）仅仅局限于结构标签。canvas，离线储存，本地视频或者地理定位API都很绝妙，然而他们还不能被所有浏览器一致的支持。

“但是等等”你说，“大多数浏览器也都不支持新的结构元素！”这是真的，但他们中的绝大多数将会很乐意去接受你想要创建的任何标签。甚至连IE6也可以处理新标签，尽管如果你想要使用CSS设置样式，你需要一点JavaScript的帮助。

当你对新标签设置样式时，你需要记住一件事，那就是未知标签在大部分浏览器中没有默认样式。他们同时被认为是行级元素。尽管如此，由于大部分HTML 5的新标签可以构造，我们将让他们拥有块级元素的行为。解决方法是确认你在CSS样式中包含了display:block;。

为了帮助了解当今HTML 5的一些新玩意儿，我们现在就进入正题，开始使用一些新的结构元素。

最终，一个任何人都可以记住的文档类型

我们创建HTML 5文档第一件需要做的事情就是使用新的文档类型。现在，如果你还清楚的记得HTML 4或者XHTML 1.x的文档类型，你真是一个比我们更强的淘气鬼。每当我们新建一个页面，我们必须打开一个旧的文件，剪切并粘贴文档类型定义。

这真是痛苦，也是为什么我们喜欢新的HTML 5文档类型。你准备好了么？他出现了：

<!DOCTYPE html>

不会太难记。简单并且容易理解。不区分大小写。

这个构想是停止HTML版本化，使向后兼容变得更容易。从长远看是否成功是另外的事情，但至少他节省了你输入的平均时间。

最基本语义结构

我们已经将我们的页面定义为HTML 5文档。到现在为止，一切都还不错。现在，这些我们已经听说的新标签到底是什么？

在我们钻研新标签前，想想你一般网页的结构，大概像这样：

<html>     
     <head> 
     ...stuff...
    </head>
     <body> 
         <div id="header"> 
             <h1>My Site</h1> 
         </div> 
         <div id="nav"> 
             <ul> 
                 <li>Home</li> 
                 <li>About</li> 
                 <li>Contact</li> 
             </ul> 
         </div> 
         <div id=content> 
             <h1>My Article</h1> 
             <p>...</p> 
         </div> 
         <div id="footer"> 
             <p>...</p> 
         </div> 
     </body> 
 </html>

相关热词：HTML5

分享到：

更多...

收藏至我的帐号

教程排行榜: 神奇的HTML5动画效果演示网站; 十款基于HTML5开发的精彩WEB应用(HTML5网站演示); 25个超炫的HTML5+CSS3网页应用案例欣赏; 十三个网站案例让你提前体验HTML5和CSS3的魅力; 15个采用HTML5实现的网站界面设计欣赏; 体验HTML5 Canvas对象的强大五款在线绘图应用示例; 16个颇具创意的HTML5网站设计; 网页设计师必收藏的十五个HTML5资源; HTML的电子邮件链接标签mailto用法详解; 21款效果惊艳基于HTML5的应用程序欣赏; 采用HTML5搭建的多个网站尝鲜试用; HTML5的一些的趣味小应用; 如何用HTML5制作网页？; HTML标签的语义化概念、意义和实践; HTML中的文本框textarea标签; 让IE和Firefox浏览器FLASH透明背景的方法

下载排行榜: 基于jQuery的超炫酷的3D切换JS幻灯焦点图特效代码; 半透明立体质感的宽屏flash+xml焦点幻灯代码; 简洁效果多图切换flash幻灯焦点图代码; 带标题和数字导航的JS焦点幻灯特效代码; 适合摄影网站超漂亮的宽屏flash+xml幻灯轮换代码; 31款简单实用的CSS+JS下拉菜单脚本; 3D立体效果金字塔环形旋转的flash+xml相册代码; 基于jQuery实现的瀑布流布局列表特效代码; 透明质感上下滑动带小图预览5屏JS焦点图幻...; 超酷的3D摩天轮flash+xml相册幻灯图片代码; 能沿多个方向滑动切换的jquery幻灯代码; 自带多种幻灯效果支持缩略图导航的jquery画...; 可改图片尺寸和张数的flash幻灯轮换代码; 很好看的带缓冲效果CSS下拉菜单导航代码; 基于jquery很有趣的360度全景图片预览特效; 6屏幻灯上下滑动式带缩略图和文字介绍的fla...