html5新特性网页练习 html5有哪些新特性

转载

mob64ca13ff9303 2023-10-26 11:18:54

文章标签 html5新特性网页练习 html5 HTML5 hg 文章分类 HTML5 移动开发

1.用于绘画的canvas元素

2.视频播放元素：video，音频播放元素：audio

3.新的特殊内容元素：article、header、footer、nav、section

4.新表单控件：calendar、date、time、emal、url、search、number、range、color

5.html5提供了两种在客户端存储数据的新方法：（html5使用JavaScript来存储和访问数据）

localStorage--没有时间限制的数据存储

sessionStorage--针对一个session的数据存储（当用户关闭浏览器窗口后，数据会被删除）

在此之前这些都是由cookie来完成的。由于cookie有一个弊端就是不适合大量数据的存储，因为他们由每个服务器的请求来传递，这使得cookie速度较慢且效率不高。而在html5中，数据不是由灭个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

html4与html5的页面结构对比：

html4

HTML5通过引进<figure>元素，当结合 <figcaption> 元素使用时，我们就可以将图形标题与图形配对起来。代码如下：

    <figure>
    <img src=”path/to/image” alt=”About image” />
    <figcaption>
    <p>This is an image of something interesting. </p>
    </figcaption>
    </figure>

很可能你仍然像下面的代码一样给你的链接和脚本标签添加类型的属性。
    <link rel=”stylesheet” href=”path/to/stylesheet.css” type=”text/css” />
    <script type=”text/javascript” src=”path/to/script.js”></script>
在HTML5中,不再需要脚本、链接类型代码如下：
    <link rel=”stylesheet” href=”path/to/stylesheet.css” />
    <script src=”path/to/script.js”></script>

使用还是HTML5不必用引号将属性包裹起来不使用引号，不过，要是你觉得用引号会让你觉得更加舒服的话，当然也不会有任何问题。
    <p class=myClass id=someId> Start the reactor.

使你的内容可编辑

HTML5其中一个非常强大的功能就是"contenteditable"，顾名思义它将允许用户编辑元素（包括他的子元素）内包含的任何文本内容。它的用途非常广，如，简单的任务清单或是基于wiki的站点也非常实用，此外，它还有一个优势就是利用了本地的存储。

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <meta charset=”utf-8″>
    <title>untitled</title>
    </head>
    <body>
    <h2> To-Do List </h2>
    <ul contenteditable=”true”>
    <li> Break mechanical cab driver. </li>
    <li> Drive to abandoned factory
    <li> Watch video of self </li>
    </ul>
    </body>
    </html>

IE理解新的HTML5元素需要费一定的神，为了确保新的HTML5元素能够以块级元素正确显示，有必要将它们用下面的代码定义风格：

    header, footer, article, section, nav, menu, hgroup {

    display: block;

    }

就算如此，IE还是不知道这些元素究竟是什么，因而会无视这些格式，还需要用到下面的代码来解决这个问题：

    document.createElement(“article”);
    document.createElement(“footer”);
    document.createElement(“header”);
    document.createElement(“hgroup”);
    document.createElement(“nav”);
    document.createElement(“menu”);

群组标题（hgroup）

假设一个网站有名称、副标题分别用<h1>、<h2>标签来标记，在HTML4中还没有一种能够将两者之间的关系用很好的语义关系来描述的方法，此外，当使用h2在页面中显示其它标题时，在层级方面问题就更多。而使用群组标题hgroup元素，我们可以将这些标题聚集在一起，而不影响文档的整个纲要。

    <header>
    <hgroup>
    <h1> Recall Fan Page </h1>
    <h2> Only for people who want the memory of a lifetime. </h2>
    </hgroup>
    </header>

必要（Required）属性

表单允许新的必要属性，规定是否某个特定的输入是必要的。你可以依据自己写代码的偏好，用下面两种不同方式来声明这个属性：

    <input type=”text” name=”someInput” required>

或者，更严谨：

    <input type=”text” name=”someInput” required=”required”>

上面两行代码都行得通。用了这行代码之后，并且浏览器支持required属性的话，输入空白的表单就不会被提交。下面是一个简单的例子，同时我们也添加了占位符属性：

    <form method=”post” action=”">
    <label for=”someInput”> Your Name: </label>
    <input type=”text” id=”someInput” name=”someInput” placeholder=”Douglas Quaid” required>
    <button type=”submit”>Go</button>
    </form>

如果输入是空的，表单将无法提交，突出显示文本框。
自动对焦（Autofocus）属性

同样地，有了HTML5就不再需要用JavaScript方案来解决自动对焦的问题。如果某个输入应该被"选择"或被聚焦，我们现在可以使用HTML的自动对焦autofocus属性。

    <input type=”text” name=”someInput” placeholder=”Douglas Quaid” required autofocus>