• 日就月将之HTML5入门教程2

    首先，我们比较一下下面的两段代码：

    第一段：

    <html>
    <head></head>
    <body>
    <div id="header"></div>
    <div id="nav">
    <ul>
    <li></li>
    <li></li>
    <li></li>
    </ul>
    </div>
    <div id="content"></div>
    <div id="footer"></div>
    </body>
    </html>

    第二段：

    <!DOCTYPE html>
    <html>
    <head></head>
    <body>
    <header></header>
    <nav>
    <ul>
    <li></li>
    <li></li>
    <li></li>
    </ul>
    </nav>
    <section>
    <article></article>
    </section>
    <footer></footer>
    </body>
    </html>

    是不是发现第二段更加简洁干净、易于理解呢？

    可是<header></header> ，<article></article>等等这些都是什么呀，浏览器又怎么会支持这些写法呢？

    HTML元素列表

    image

    HTML 5 包含了很多新的元素，比如：<nav>, <header>, <footer> 以及 <figure> 等等。下面是HTML 4.01和HTML5相比较的元素标签列表：

    （按照字母排序 4: 指示在 HTML 4.01 中定义了该元素 5: 指示在 HTML 5 中定义了该元素 ）

    标签 描述 4 5
    <!–…–> 定义注释。 4 5
    <!DOCTYPE> 定义文档类型。 4 5
    <a> 定义超链接。 4 5
    <abbr> 定义缩写。 4 5
    <acronym> HTML 5 中不支持。定义首字母缩写。 4  
    <address> 定义地址元素。 4 5
    <applet> HTML 5 中不支持。定义 applet。 4  
    <area> 定义图像映射中的区域。 4 5
    <article> 定义 article。   5
    <aside> 定义页面内容之外的内容。   5
    <audio> 定义声音内容。   5
    <b> 定义粗体文本。 4 5
    <base> 定义页面中所有链接的基准 URL。 4 5
    <basefont> HTML 5 中不支持。请使用 CSS 代替。 4  
    <bdo> 定义文本显示的方向。 4 5
    <big> HTML 5 中不支持。定义大号文本。 4  
    <blockquote> 定义长的引用。 4 5
    <body> 定义 body 元素。 4 5
    <br> 插入换行符。 4 5
    <button> 定义按钮。 4 5
    <canvas> 定义图形。   5
    <caption> 定义表格标题。 4 5
    <center> HTML 5 中不支持。定义居中的文本。 4  
    <cite> 定义引用。 4 5
    <code> 定义计算机代码文本。 4 5
    <col> 定义表格列的属性。 4 5
    <colgroup> 定义表格列的分组。 4 5
    <command> 定义命令按钮。   5
    <datalist> 定义下拉列表。   5
    <dd> 定义定义的描述。 4 5
    <del> 定义删除文本。 4 5
    <details> 定义元素的细节。   5
    <dfn> 定义定义项目。 4 5
    <dir> HTML 5 中不支持。定义目录列表。 4  
    <div> 定义文档中的一个部分。 4 5
    <dl> 定义定义列表。 4 5
    <dt> 定义定义的项目。 4 5
    <em> 定义强调文本。 4 5
    <embed> 定义外部交互内容或插件。   5
    <fieldset> 定义 fieldset。 4 5
    <figcaption> 定义 figure 元素的标题。   5
    <figure> 定义媒介内容的分组，以及它们的标题。   5
    <font> HTML 5 中不支持。 4  
    <footer> 定义 section 或 page 的页脚。   5
    <form> 定义表单。 4 5
    <frame> HTML 5 中不支持。定义子窗口（框架）。 4  
    <frameset> HTML 5 中不支持。定义框架的集。 4  
    <h1> to <h6> 定义标题 1 到标题 6。 4 5
    <head> 定义关于文档的信息。 4 5
    <header> 定义 section 或 page 的页眉。   5
    <hgroup> 定义有关文档中的 section 的信息。   5
    <hr> 定义水平线。 4 5
    <html> 定义 html 文档。 4 5
    <i> 定义斜体文本。 4 5
    <iframe> 定义行内的子窗口（框架）。 4 5
    <img> 定义图像。 4 5
    <input> 定义输入域。 4 5
    <ins> 定义插入文本。 4 5
    <keygen> 定义生成密钥。   5
    <isindex> HTML 5 中不支持。定义单行的输入域。 4  
    <kbd> 定义键盘文本。 4 5
    <label> 定义表单控件的标注。 4 5
    <legend> 定义 fieldset 中的标题。 4 5
    <li> 定义列表的项目。 4 5
    <link> 定义资源引用。 4 5
    <map> 定义图像映射。 4 5
    <mark> 定义有记号的文本。   5
    <menu> 定义菜单列表。 4 5
    <meta> 定义元信息。 4 5
    <meter> 定义预定义范围内的度量。   5
    <nav> 定义导航链接。   5
    <noframes> HTML 5 中不支持。定义 noframe 部分。 4  
    <noscript> 定义 noscript 部分。 4 5
    <object> 定义嵌入对象。 4 5
    <ol> 定义有序列表。 4 5
    <optgroup> 定义选项组。 4 5
    <option> 定义下拉列表中的选项。 4 5
    <output> 定义输出的一些类型。   5
    <p> 定义段落。 4 5
    <param> 为对象定义参数。 4 5
    <pre> 定义预格式化文本。 4 5
    <progress> 定义任何类型的任务的进度。   5
    <q> 定义短的引用。 4 5
    <rp> 定义若浏览器不支持 ruby 元素显示的内容。   5
    <rt> 定义 ruby 注释的解释。   5
    <ruby> 定义 ruby 注释。   5
    <s> HTML 5 中不支持。定义加删除线的文本。 4  
    <samp> 定义样本计算机代码。 4 5
    <script> 定义脚本。 4 5
    <section> 定义 section。   5
    <select> 定义可选列表。 4 5
    <small> 定义小号文本。 4 5
    <source> 定义媒介源。   5
    <span> 定义文档中的 section。 4 5
    <strike> HTML 5 中不支持。定义加删除线的文本。 4  
    <strong> 定义强调文本。 4 5
    <style> 定义样式定义。 4 5
    <sub> 定义下标文本。 4 5
    <summary> 定义 details 元素的标题。   5
    <sup> 定义上标文本。 4 5
    <table> 定义表格。 4 5
    <tbody> 定义表格的主体。 4 5
    <td> 定义表格单元。 4 5
    <textarea> 定义 textarea。 4 5
    <tfoot> 定义表格的脚注。 4 5
    <th> 定义表头。 4 5
    <thead> 定义表头。 4 5
    <time> 定义日期/时间。   5
    <title> 定义文档的标题。 4 5
    <tr> 定义表格行。 4 5
    <tt> HTML 5 中不支持。定义打字机文本。 4  
    <u> HTML 5 中不支持。定义下划线文本。 4  
    <ul> 定义无序列表。 4 5
    <var> 定义变量。 4 5
    <video> 定义视频。   5
    <xmp> HTML 5 中不支持。定义预格式文本。 4  

    HTML5新增元素详解：

    structure-html5

    <article>

    定义外部的内容，外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。

    <aside>

    定义外部的内容，括号备注，脚注，引用，注释等类似于侧边栏的东西。

    <audio>

    定义声音，比如音乐或其他音频流。可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。audio主要是来取代object标签的复杂表现。

    <audio src="someaudio.wav">
    您的浏览器不支持 audio 标签。
    </audio>

    <canvas>

    定义图形，比如图表和其他图像。canvas标签以后的文章会详细说到。

    <command>

    定义命令按钮，比如单选按钮、复选框或按钮。

    <datalist>

    定义选项列表。需要使用 input 元素的 list 属性来绑定 datalist，来定义 input 可能的值。

    datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。

    <input id="food" list="foods"/>
    <datalist id="foods">
    <option value="huiguorou">
    <option value="yuxiangrousi">
    <option value="gongbaojiding">
    </datalist>

    <details>

    用于描述文档或文档某个部分的细节。

    <summary>

    包含 details 元素的标题。

    <details>
    <summary>HTML 5</summary>
    This document teaches you everything you have to learn about HTML 5.
    </details>

    <embed>

    定义嵌入的内容，比如flash。但是不能在开始标签和结束标签之间写文本，来说明旧式的浏览器不支持该标签。

    <embed src="demo.swf"/>

    <figure>

    对元素进行组合

    <figcaption>

    定义 figure 元素的标题，一般置于 “figure” 元素的第一个或最后一个子元素的位置。

    <figure>
    <figcaption>HTML5</figcaption>
    <p>HTML5草案的前身名为Web Applications 1.0。於2004年被WHATWG提出，於2007年被W3C接纳，
    并成立了新的HTML工作团队。在2008年1月22日，第一份正式草案已公布,预计将在2010年9月正式向公众推荐。    </p>
    </figure>

    <footer>

    用来描述一节或一个完整Web页面的底部。

    <header>

    用来描述一节或一个完整Web页面的头部介绍性信息。

    <hgroup>

    用于对网页或区段（section）的标题进行组合。下面代码中的h1和h2通过<hgroup>组合起来，作为主标题和副标题，语义更加明确。

    <hgroup>
    <h1>...</h1>
    <h2>...</h2>
    </hgroup>

    <keygen>

    定义生成密钥。

    <mark>

    定义带有记号的文本。

    <p>I love <mark>html5</mark></p>

    <meter>

    定义度量衡。仅用于已知最大和最小值的度量。

    <p>您的分数是：<meter value="80" min="0" max="100" low="65" high="96" optimum="100">B+</meter>.</p>

    <output>

    定义不同类型的输出，比如脚本的输出。

    <nav>

    放置页面的导航元素。

    <progress>

    定义运行中的进度（进程）。可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进度。

    <rp>

    在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。

    <rt>

    定义字符（中文注音或字符）的解释或发音。

    <ruby>

    定义 ruby 注释（中文注音或字符）。

    上面这三个标签可能不太好理解，通过下面的例子就会比较清楚了：

    <ruby>日本<rp>(</rp><rt>にほん</rt><rp>)</rp></ruby>

    image

    <source>

    为媒介元素（比如 <video> 和 <audio>）定义媒介资源。

    <section>

    定义文档中的节

    <time>

    定义日期或时间，或者两者。

    <p>我们在每天早上 <time>9:00</time> 开始营业。</p>

    <video>

    定义视频，比如电影片段或其他视频流。

    <video src="movie.ogg" controls="controls">
    您的浏览器不支持 video 标签。
    </video>

    HTML5的兼容性

    HTML5与旧浏览器的兼容

    IE6等浏览器要想支持上述新增的标签元素，可以使用如下的Javascript代码：

    <script>
    document.createElement(    'header');
    document.createElement(    'nav');
    document.createElement(    'section');
    document.createElement(    'article');
    document.createElement(    'aside');
    document.createElement(    'footer');
    </script>

    HTML5目前的兼容性

    W3C测试

    出乎意料的是，主流浏览器HTML5兼容性测试，IE9竟然排第一，不过针对主流IE浏览器（6、7、8）来说，测试结果却并不理想：

    ie9html5

    3201.image_5F00_6EB794AA

    HTML5 Web应用

    Safari 对 HTML5 Web 应用的支持最好，除了地理定位功能，其它都支持

    0895388

    HTML5网页内嵌对象

    内置的画布，视频，音频等对象。全部支持的有 Chrome，Safari，Firefox 3.6，Opera 10.5。IE家族则全军覆没。

    0895564

    HTML5 音频编码

    Opera 10.5 支持的最全面，IE 家族又是颗粒无收。

    0895735

    HTML5 视频编码

    H.264 任重道远。

    0895891

    HTML5 各种表单对象

    Mac 平台下的 Chrome 成绩最佳。这些表单对象让人想起了桌面程序。

    0896059

    HTML5 表单对象属性与行为

    0895388

    小结

    本文主要介绍了HTML5新增的元素以及HTML5的兼容性。

    原文链接：http://www.feeldesignstudio.com/2011/01/html5-tutorial-2
  • 相关阅读:
    加解密相关
    Office常见问题及解决方法
    文件校验和（checksum或Hash）计算工具
    linux install mpi4py
    [zz] Install VSFTP
    Bring up a website by wordpress
    How to Get Rid of /wordpress/ From your WordPress Site URL
    Change http port in bitnami stack
    mongodb gdal 矢量数据格式驱动
    配置PostgreSQL Streaming Replication集群
  • 原文地址：https://www.cnblogs.com/feeldesignstudio/p/1956188.html
Copyright © 2020-2023  润新知