利用HTML5做网页

利用HTML5做网页

首先,我们要声明并创建文档类型,我们不再HTML 4或XHTML 1.0 那样 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional.....声明,我们可以这样写:

<!DOCTYPE html>

看看吧,简单而明显,不区分大小写。它可以更容易向后兼容。至少可以节省你一些打字的时间。

我们现在已经为HTML 5文档定义了类型。到目前为止一切顺利。现在,这们看看HTML5的新标签。在我们浏览新标签之前,先看看我们平常是怎么写的:

<html>
  <head>
  ...其他...
  </head>
  <body>
    <div id="header">
      <h1>CSS3-HTML5之家</h1>
    </div>
    <div id="nav">
      <ul>
        <li>首页</li>
        <li>关于</li>
        <li>联系</li>
      </ul>
    </div>
    <div id=content>
      <h1>标题</h1>
      <p>...</p>
    </div>
    <div id="footer">
      <p>版权信息</p>
    </div>
  </body>
</html>

在上面的例子中使用<div>.这是现在很普遍的做法。其目的是双重的,第一,提供了唯一的身份ID,可以具体的应用于网页章节。第二,标识作为一种原始的,伪语义结构。每个网站上的ID名字可能都不相同,这时我们就很难明白那些ID是什么意思了。

<header>标签:

<header>标签就相当于我们平常用<div id="header">定义的一样。如果你的网站上还是<div id="header">这样定义,那我们现在可以用<header>替换它了。

<nav>标签:

<nav>是导航标签,就像我们平常用:

<div id="menu">
    <ul>
    <li>index</li>
    <li>news</li>
 ...
    </ul>
</div>

现在用<nav>:

<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/blog/">Blog</a></li>
</ul>
</nav>

<section>标签:

<section>标签里面可以是一组内容或者专题分组,通常有一个起始标记和结束标记。当然了,该标签也可以嵌套。

<article>标签:

<article>标签里面可以是一节内容。

<aside>

时间: 2024-09-17 03:42:33

利用HTML5做网页的相关文章

利用html5制作网页视频播放的方法

 今天,大多数视频是通过插件(比如 Flash)来显示的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 video 元素来包含视频的标准方法. 在HTML5中,video元素目前支持三种格式的视频文件, 1.Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 2.MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 3.WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件 那么在HT

利用GEPHI做网页排名计算

老帅 20150801 http://blog.csdn.net/shuaihj 1.下载httpGraph插件 2.新建一个httpGraph监控    3.配置浏览器,使用httpGraph做代理,使其可监控浏览器 4.观察监控结果 此时我们访问浏览器,Gephi会自动记录我们的访问痕迹 5.计算pagerank 6.查看结果 Gephi将我们的访问痕迹以及pagerank计算结果自动存储为数据资料  

利用HTML5的画布Canvas实现刮刮卡效果_javascript技巧

先给大家展示效果: 查看演示   源码下载 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. 我们利用HTML5的画布Canvas,结合其提供的API,在Canvas元素上绘制一个灰色蒙层,然后通过检测用户鼠标移到和手势来绘制一个透明的图形,这样就能看到Canvas背景下的真实图片,就达到刮刮卡效果. HTML 我们只需要在页面中加入canvas标签元素,其他的就看

Facebook利用未成年人做广告遭到集体诉讼

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 北京时间5月4日消息,据国外媒体报道,著名社交网站Facebook因利用未成年人做广告而遭到集体诉讼,家长们表示Facebook在未征求他们同意的情况下擅自发布了包括未成年人的广告并声称那些孩子"喜欢"广告中的产品. 该案属集体诉讼,原告方为纽约州年龄在18周岁以下的所有Facebook用户,Facebook在未征求他们的

如何利用HTML5构建一个基本的Web操作系统

然而目前的 Web 操作系统前端大多基于 Flex.Silverlight.ActiveX 插件等技术开发,存在着对移动设备的支持性差,终端安全性差,开发难度大等缺点. HTML5 是下一代 web 语言的标准,具有兼容性好,安全性高,功能丰富,开发便捷等优点,特别适合如 Web 操作系统一类的富客户端互联网应用的前端开发.本文将展示如何利用 HTML5 提供的多种新技术如:本地数据库.多线程开发.视频支持.离线编程等构建一个基本的 Web 操作系统. 传统的操作系统有着一些难以克服的缺点,如仅

excel中如何利用公式做求和算法?

  excel中如何利用公式做求和算法?          步骤 1.隔列求和 H3=SUMIF($A$2:$G$2,H$2,A3:G3); 2.单条件求和 F2=SUMIF(A:A,E2,C:C) 3.单条件模糊求和 公式: SUMIF(A2:A4,"*A*",C2:C4) 4.多条件模糊求和 公式:C11=SUMIFS(C2:C7,A2:A7,A11&"*",B2:B7,B11); 5.多表相同位置求和 公式:b2=SUM(Sheet1:Sheet19!

做网页,用DIV布局好还是table布局好?

网页布局 做网页,用DIV布局好?还是table布局好??请问他们的优缺点各是什么呢?div相对table布局来说,调试起来要麻烦多了.因为要考虑各种浏览器下的css支持标准兼容性. 实际上,布局时根据需要来决定,倾向于table表示数据,div用来布局. div,table都是HTML标签,怎么用,只要表达给网站浏览者信息就足够了,如何组织信息是设计者的问题. 表格代码冗长,维护麻烦,如今推行WEB标准,用丰富的标签设置更灵活,维护也更方便,当然包括TABLE和DIV. 如今DIV的滥用程度似

做网页的一些技巧(续)

技巧|网页|技巧   Q: 实现双击自动滚屏. A: 将以下代码添加到需要自动滚屏的页面上 <s cript Language="Javas cript"> var currentpos, timer; function initialize(){ timer = setInterval("scrollwindow()", 1); } function sc(){ clearInterval(timer); } function scrollwindow

日IP突破1万,谈谈我做网页吧的几点经验

现在在机房给学生上课,累了,我要学生自己练习,机房里有点吵,没办法,借这点时间总结这一年多来做网页吧wangyeba.com的经验. 做网页吧有一年多了,前不久终于日IP突破了1W,难免有几许激动,几许感慨. 很多人都知道,我四年以前是做源码吧的,一个源代码下载站,当时在站长界还算有一点点名气.05年的时候,我突然发现做源代码下载站的太多了,中国的个人站跟风很严重. 这个时候,我开始考虑,我该做点别的了,05年下半年我发现,个人站做源代码的有了,做模板下载的有了,做技术教程的有了,做网站运做的有