第一阶
    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>      标签用于创建工具栏及右键菜单
......太多了就不一一列出了,日后用到的时候在分享
-->

HTML5 移动开发 (HTML5标签和属性)的更多相关文章

  1. html5 中常用的标签和属性

    标签: <blockquote> 标签定义摘自另一个源的块引用. <blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来, ...

  2. HTML5 添加新的标签 input属性

    <!-- 新增 有语意标签 --> <nav></nav> <!-- 导航标签 --> <seclion></seclion> ...

  3. 小强的HTML5移动开发之路(14)——Video标签详解

    来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...

  4. 小强的HTML5移动开发之路(13)——HTML5中的全局属性

    来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey  快捷键 <!DOCTYPE HTML> ...

  5. 小强的HTML5移动开发之路(12)——从一个多媒体标签说起

    来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...

  6. HTML5新增的标签和属性归纳

    收集总结的HTML5的新特性,基本除了IE9以下都可以使用. HTML5语法 大部分延续了html的语法 不同之处:开头的 <!DOCTYPE html> <html lang=&q ...

  7. HTML5基础-新增标签+新增属性+布局案例

    html5中常用的结构标签 article 文章 header 头部 nav 导航 section 区域 aside 侧边栏 hgroup 区块的相关信息 figure 定义一组内容及标题 figca ...

  8. HTML5探索一(那些新增的标签和属性)

    tml5相比html4,添加了部分语义化的标签和属性,现在我们就从这些标签和属性开始,学习html5吧. 首先,认识下HTML5新的文档类型: <!DOCTYPE html> 那些新标签 ...

  9. 认识HTML5中的新标签与新属性

    前端之HTML5,CSS3(一) HTML5中常用内容标签 header标签 header标签定义文档的页眉,基本语法:<header>content</header>. na ...

随机推荐

  1. OpenGL学习(3)——Shader

    之前已经接触过Vertex Shader和Fragment Shader,这次学习如何编写Shader并封装成类. Shader源码主要有四部分: 版本声明 #version xxx core: 使用 ...

  2. FUNMVP:几张图看懂区块链技术到底是什么?(转载)

    几张图看懂区块链技术到底是什么? 本文转载自:http://www.cnblogs.com/behindman/p/8873191.html “区块链”的概念可以说是异常火爆,好像互联网金融峰会上没人 ...

  3. PHP学习笔记2

    PHP Switch语句 用于根据多个不同条件执行不同动作.如果不在每个条件后加break,将会输出所有结果. <?php $language="java"; switch( ...

  4. 对常用软件的评价(TGP腾讯游戏平台)

    1,首先说下界面,这款软件的界面有些类似于QQ的界面,登录方式和QQ的方式是一样的,可以简单的说是一款给游戏用的QQ,就是里面的用户变成了游戏 2,功能,简单的说就是将你常玩的游戏放于这游戏平台的表面 ...

  5. JAVA面对对象(二)——继承、方法的覆写

    1.继承就是基于已存在的类构造一个新类,继承已存在的类就能复用类的方法和属性,并且能够添加新的方法和属性.也就是子类和父类 2.一个父类可以拥有多个子类,一个子类只允许有一个父类 3.用extends ...

  6. 【iMooc】全面解析java注解

    在慕课上学习了一个关于java注解的课程,下面是笔记以及一些源码. Annotation——注解 1.JDK中的注解 JDK中包括下面三种注解: @Override:标记注解(marker annot ...

  7. CentOS 简单学习 firewalld的使用

    1. centos7 开始 使用firewalld 代替了 iptables 命令工具为 firewall-cmd 帮助信息非常长,简单放到文末 2. 简单使用 首先开启 httpd 一般都自带安装了 ...

  8. ESLint的使用

    ESLint是在ECMAScript/JavaScript代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误.在许多方面,它和JSLint.JSHint相似,除了少数的例外: ESL ...

  9. 小菜菜mysql练习解读分析1——查询" 01 "课程比" 02 "课程成绩高的学生的信息及课程分数

    查询" 01 "课程比" 02 "课程成绩高的学生的信息及课程分数 好的,第一道题,刚开始做,就栽了个跟头,爽歪歪,至于怎么栽跟头的 ——需要分析题目,查询的是 ...

  10. codeforces 889A

    A. Petya and Catacombs time limit per test 1 second memory limit per test 256 megabytes input standa ...