首页 > 代码库 > HTML5 移动开发 (HTML5标签和属性)

HTML5 移动开发 (HTML5标签和属性)

    第一阶
    1.如何使用HTML5中的新标签及属性
    2.HTML5中的其它变化
    3.HTML5的移动支持
    4.使用HTML5开发移动WEB引用的理由

    第二阶
    HTML5为HTML规范加入了一些新的特性,其中最容易理解的就是新的标签。它们过去从未成为HTML的一部分,但现在却是HTML元素了。
    大部分新标签被称为“分节”元素,它们为HTML文档布局分段提供语义。
    部分如下:
    <article>       文档或站点的一个独立部分
    <aside>         页面或者主题之外的内容
    <figcaption>    figure元素的标题
    <figure>        独立于文本流之外的一段刘内容(如图形,图标等)
    <footer>        文档或章节的页脚
    <header>        文档或章节的页眉
    <hgroup>        标题组
    <nav>           导航部分
    <section>       无法被以上类型定义的普通章节

 <div id="main">
     <div id="header">头部</div>
     <div id="nav">导航</div>
     <div id="contents">文本区</div>
     <div id="footer">底部</div>
 </div>

 <!--以上是没有用H5标签的例子,现在我们看看用了H5新标签后的写法-->
 <section id="main">
     <header>头部</header>
     <nav>导航</nav>
     <section id="contents">文本区</section>
     <footer>底部</footer>
 </section>



 <!--其它语义标签
    <details>       新增信息
    <mark>          被突出或标记的内容         
    <meter>         计量器
    <output>        脚本或表单结果
    <progress>      进度指示
    <summary>       details元素的概要或说明
    <time>          日期或时间
    <wbr>           可选的换行符(软转换)
 -->

 <!--新的多媒体标签
     HTML5讨论的是多媒体标签。可以通过以下标签为HTML增添多媒体元素。
     <audio>   内嵌音频文件
     <canvas>  内嵌动态图形
     <embed>   增添其它不包含特定HTML5元素的技术
     <source>  内嵌音频及视频的源文件
     <track>   内嵌音频及视频的辅助多媒体轨道
     <video>   内嵌视频文件
 -->

 <!--****<canvas>标签用于在HTML页面中绘制矢量图像。可以通过它来为页面增添自定义字体、创建简单活复杂的游戏、让矢量图形动起来。并通过HTML来控制一切,而且并不需要插或额外的XML文件。如下:
 -->
 <canvas id="simple-square" width="800" height="800px"></canvas>
<script type="text/javascript">
    function drawSqurare () {
        var canvas = document.getElementById( ‘simple-square‘ );
        if ( canvas.getContext ) {
            var context = canvas.getContext( ‘2d‘ );
            context.fillStyle = "rgb(13, 118, 208)";
            context.fillRect (2, 2, 798, 798);
        } else {
            alert( "麻烦你去升级一下你的浏览器!别让我再看到你!" );
        }
    }
</script>


<!-- 那么HTML5 在表单上用了很大的篇幅,具体讲到的时候在详细分享 或先行去了解下 -->

<!--那么多打几个字,介绍下更好的国际化支持
以下5个HTML5新标签进一步为非英语文档提供支持
<bdi>            标签用来改变HTML中文本文字的方向。例如要在英文文档中插入一个希伯来文,就可以将它用bdi标签嵌套起来
<meat charset>   标签用来定义WEB页面使用的字符集编码

<rp>             若使用中文,日文等双字节语言书写HTML时,通常有附注文字字符,它们是字符旁边的小注释,通常用来标记读音
<rt>             <ruby>标签知名附注文字字符的范围,可包括代表附注文本的<rt>和代表附注文本两侧括号的<rp>.              
<ruby>           如:<ruby><rp><rt>ruby text</rt></rp></ruby>
-->

<!--HTMl4标签和属性的变化   一些HTML4中不包含语义部分的标签在H5中被赋予了语义含义
<b>       粗体文本
<i>       斜体文本
<hr>      文本中的主题性分段
<s>       不再准确或无关的内容(删除线)
<small>   法律文档等附属细则(小号字体)

有些标签含义有所改变
<address>   成为分节内容的一部分
<cite>      可以表示引用作品的标题,但不能用来标记人名
<menu>      标签用于创建工具栏及右键菜单
......太多了就不一一列出了,日后用到的时候在分享
-->