基盤とスキル＃HTML5モバイル開発（）HTML5の新しいタグとアプリケーションのシナリオ

HTML5モバイル開発

HTML5開発

W3CとWHATWG HTML5は、協力の結果です。
HTML5は、新基準のHTML、XHTMLとHTML DOMになります。
HTMLのバージョンでは1999年に生まれました。それ以来、ウェブの世界では、海の変化を遂げています。
WHATWG専用Webフォームやアプリケーション、およびW3CはXHTML 2.0に焦点を当てました。2006年には、双方はHTMLの新しいバージョンを作成するために、協力することを決めました。
HTML5はまだで完成されます。しかし、最も近代的なブラウザでは、すでにいくつかのHTML5をサポートしています。
によって確立されたルールの一部についてWHATWG HTML5：

• 新機能は、HTML、CSS、DOMとJavaScriptに基づくべきです。
• （Flashなど）の外部プラグインの必要性を削減
• より良いエラー処理
• その他のスクリプトタグを置き換えます
• HTML5は、デバイス独立していなければなりません
• 公衆に対処するための透明な開発プロセス

新機能

HTML5、いくつかの興味深い新機能：

• 描画のためのcanvas要素
• ビデオとメディア再生のためのオーディオ要素
• ローカルのオフラインストレージのためのより良いサポート
• このような物品、フッタ、ヘッダ、NAV、セクションなどの新しい特殊なコンテンツ要素、
• カレンダー、日付、時刻、メール、URL、検索などの新フォームコントロール、

HTML5の新しいラベル

タグ	説明
<article>	定義の記事
<aside>	ページコンテンツ外のコンテンツを定義します。
<audio>	カスタムサウンドコンテンツ。
<bdi>	テキストは、周囲のテキストから逸脱することの方向が提供されるように、テキストの方向を定義します。
<canvas>	カスタムグラフィックス。
<command>	カスタムコマンドボタン。
<datalist>	定義されたドロップダウンリスト。
<details>	要素の詳細を定義します。
<embed>	外部のインタラクティブコンテンツやプラグインを定義します。
<figcaption>	カスタムタイトルの図形要素。
<figure>	メディアコンテンツグループの定義、並びにそれらのタイトル。
<footer>	定義されたセクションまたはページフッター。
<header>	定義セクションまたはページヘッダ。
<hgroup>	文書の定義セクションの詳細については。
<keygen>	カスタムビルドキー。
<main>	文書の主な内容を定義しました。
<mark>	マーク定義されたテキスト。
<meter>	メトリックは、所定の範囲内で定義されました。
<nav>	カスタムナビゲーションリンク。
<output>	いくつかの型定義を出力します。
<progress>	定義されたスケジュールタスクのいずれかのタイプ。
<rp>	ブラウザがサポートされていない場合はルビー要素の定義は、コンテンツを表示します。
<rt>	ルビの説明の定義。
<ruby>	ルビの定義。
<section>	定義セクション。
<source>	メディアソースの定義。
<summary>	カスタムタイトルは、要素の詳細を示します。
<time>	日付/時間を定義します。
<track>	メディアプレーヤーのカスタムテキストトラックを持ちます。
<video>	カスタムビデオ。

論文

1.定義と使用法：

<article> 記事の要素が完了し、ドキュメント、ページまたはアプリケーションから独立を表し、それだけでは外部コンテンツを参照することができます。

プロジェクトの記事の可能な例：

• フォーラムの投稿
• 新聞記事
• ブログエントリ
• ユーザーレビュー

2、例

<article>
      <header>
            <h1>article元素使用方法</h1>
            <p>发表日期：<time pubdate="pubdate">2019/05/20</time></p>
      </header>
      <p>article元素是什么？怎样使用article元素？……</p>
      <section>
            <h2>评论</h2>
            <article>
                  <header>
                        <h3>发表者：john</h3>
                        <p><time pubdate datetime="2019-05-20T:21-26:00">1小时前</time></p>
                  </header>
                  <p>这篇文章很不错啊，顶一下！</p>
            </article>
            <article>
                  <header>
                        <h3>发表者：神秘唯一</h3>
                        <p><time pubdate datetime="2019-05-20T:21-26:00">1小时前</time></p>
                  </header>
                  <p>这篇文章很不错啊，对article解释的很详细</p>
            </article>
      </section>
</article>

セクション

1.定義と使用法：

section要素は、サイトまたはアプリケーションページのコンテンツのために使用されているがブロックに分割されます。要素は、通常、セクションタイトルとその内容で構成されています。しかし、section要素は、通常のコンテナ要素ではありません。コンテンツのニーズが直接スタイルや行動は、むしろ部分よりも、スクリプトによって定義されて定義するときは、使用div要素に推奨されます。要約セクション要素がWord文書に別のデータベースにまたは出力を格納することができます。

2、例

コンテンツは、一般的にセクション要素のタイトルを使用していない人のために推奨されません。
section要素は、ページ上のコンテンツの役割はブロックに分割された製品である、またはセグメントに、そして独立したコンテンツ混乱自分の完全な、記事の要素を持っていません。

<section>
      <h1>section元素使用方法</h1>
      <p>什么时候用section元素？怎样合理使用section元素?</p>
</section>

<article>
      <h1>article元素与section元素的使用方法</h1>
      <p>何时使用article元素？何时使用section元素…..</p>
      <section>
            <h2>article元素使用方法</h2>
            <p>article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。</p>
      </section>
      <section>
            <h2>section元素使用方法</h2>
            <p> section元素用于对网站或应用程序中页面上的内容进行分块。</p>
      </section>
</article>

3、セクションの禁忌

• スタイルを設定するために使用されていないセクションのページのコンテナ要素を行い、それがdiv要素の作品です。
• 記事の要素、脇のnav要素以上の使用条件に合わせた要素は、セクションの要素を使用しない場合。
• タイトルなしセクション要素のコンテンツブロックを使用しないでください。

差の4部及び物品

在HTML5中，article元素可以看成是一种特殊类型的section元素，它比 section元素更强调独立性。即section元素强调分段或分块，而article强调独立性。具体来说，如果一块内容相对来说比较独立的、完整的时候，应该使用article元素，但是如果你想将一块内容分成几段的时候，应该使用section元素。另外，在HTML5中，div元素变成了一种容器，当使用CSS样式的时候，可以对这个容器进行一个总体的CSS样式的套用。

aside

1、定义和用法

HTML<aside>元素表示一个页面的一部分， 它的内容跟这个页面的其它内容的关联性不强，或者是没有关联，单独存在。<aside>元素通常显示成侧边栏(sidebar)或一些插入补充内容。通常用来在侧边栏显示一些定义，比如目录、索引、术语表等；也可以用来显示相关的广告宣传，作者的介绍，Web应用，相关链接，当前页内容简介等。

不要使用<aside>元素标记括号中的文字，因为这种类型的文本被认为是主内容的一部分。

2、实例

<article>  
  <p>  
    The Disney movie <em>The Little Mermaid</em> was   
    first released to theatres in 1989.   
  </p>  
  <aside>  
    The movie earned $87 million during its initial release.   
  </aside>  
  <p>  
    More info about the movie...   
  </p>  
</article>

main

1、定义和用法

<main> 标签规定文档的主要内容。

<main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。

**注释：**在一个文档中，不能出现一个以上的 <main> 元素。 元素不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>。

2、实例

<main>
  <h1>Web Browsers</h1>
  <p>Google Chrome、Firefox 以及 Internet Explorer 是目前最流行的浏览器。</p>

  <article>
    <h1>Google Chrome</h1>
    <p>Google Chrome 是由 Google 开发的一款免费的开源 web 浏览器，于 2008 年发布。</p>
  </article>

  <article>
    <h1>Internet Explorer</h1>
    <p>Internet Explorer 由微软开发的一款免费的 web 浏览器，发布于 1995 年。</p>
  </article>

  <article>
    <h1>Mozilla Firefox</h1>
    <p>Firefox 是一款来自 Mozilla 的免费开源 web 浏览器，发布于 2004 年。</p>
  </article>
</main> 

header

1、定义和用法

标签 <header> 定义文档的页眉（介绍信息）。

2、实例

<header>
  <h1>Welcome to my homepage</h1>
  <p>My name is Donald Duck</p>
</header>
<p>The rest of my home page...</p>

footer

1、定义和用法

标签 <footer> 定义文档或节的页脚。

元素 <footer> 应当含有其包含元素的信息。

页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

您可以在一个文档中使用多个 <footer> 元素。

2、实例

<footer>
  <p>Posted by: GP-1011</p>
  <p>Contact information: <a href="mailto:[email protected]">[email protected]</a>.</p>
</footer>

nav

1、定义和用法

<nav>是与导航相关的，所以一般用于网站导航布局。同时完全就像使用div标签、span标签一样来使用<nav>标签，可添加id或class。而与div标签又有不同处是，此标签一般只用于导航相关地方使用，所以在一个html网页布局中可能就使用在导航条处，或与导航条相关的地方布局使用。

2、实例

<nav> 
  <ul> 
    <li>首页</li> 
    <li>栏目名称</li> 
    <li>联系我们</li> 
  </ul> 
</nav> 

datalist

1、定义和用法

<datalist> 标签定义选项列表。与 input 元素配合使用该元素，来定义 input 可能的值。

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

使用 input 元素的 list 属性来绑定 datalist。

2、实例

<input id="myCar" list="cars" />

<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

command

1、定义和用法

在HTML5中，<command>标签是用来表示用户能够调用的命令，可以定义命令按钮，比如单选按钮、复选框或按钮。<command>标签在<menu>元标签中才是可见的，它还可以规定键盘快捷键。<command> 标签是html 5中新增标签，目前只有在IE 9中支持。

2、实例

<menu>
  <command type="command" label="Save" onclick="save()">Save</command>
</menu>

details & summary

1、定义和用法

<details> 标签 用于描述文档或文档某个部分的细节，与 <summary> 标签 配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。
<details> 标签 拥有 open 属性，“details” 元素默认是隐藏的，设置 open 属性后，可以定义"details" 元素默认可见，与checkbox定义checked属性是一个道理。

2、实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>details & summary</title>
  <style>
    div {
        width: 7%;
        margin: 0 auto;
        text-align: center;
        float: left;
    }
    ::-webkit-details-marker {
        display:none;
    }
    ::-moz-list-bullet {
        font-size: 0;
        float: left;
    }
    details {
        position:relative;
        background:#f5f5f5;
    }
    summary {
        font-weight:bolder;
        cursor:pointer;
        user-select: none;
        outline: 0;
        
    }
    li {
        border:1px solid #eee;
        border-top : 0;
        list-style: none;
        background-color: #eee;
    }
    /* 实现动画的原理 */
    summary::after {
        content: '';
        width: 0;
        height: 0;
        line-height: 0;
        font-size: 0;
        border-left: 5px dashed transparent;
        border-right: 5px dashed transparent;
        border-top: 5px solid #000;
        position: absolute;
        top: 44%;
        right: 8%;
        transition:.3s ease-out;
    }
    [open] summary::after {
        transform:rotate(180deg)
    }
    ul {
        max-height: 0;
        padding:0;
        margin-top:0;
        transition: .3s ease-out;
        overflow: hidden;
        margin-right:5px;
    }
    [open] + ul {
        max-height: 60px;
    }
  </style>
</head>
<body>
    <div>
        <details open>
            <summary>商品管理</summary>
        </details>
        <ul>
            <li>商品列表</li>
            <li>添加商品</li>
        </ul>
    </div>
    <div>
        <details open>
            <summary>品牌管理</summary>
        </details>
        <ul>
            <li>品牌列表</li>
            <li>添加品牌</li>
        </ul>
    </div>
    <div>
        <details open>
            <summary>分类管理</summary>
        </details>
        <ul>
            <li>分类列表</li>
            <li>添加分类</li>
        </ul>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>details & summary</title>
  <style>
    div {
        width: 7%;
        margin: 0 auto;
        text-align: center;
    }
    ::-webkit-details-marker {
        display:none;
    }
    ::-moz-list-bullet {
        font-size: 0;
        float: left;
    }
    details {
        position:relative;
        background:#f5f5f5;
    }
    summary {
        font-weight:bolder;
        cursor:pointer;
        user-select: none;
        outline: 0;
    }
    li {
        border:1px solid #eee;
        border-top : 0;
        list-style: none;
    }
    /* 实现动画的原理 */
    summary::after {
        content: '';
        width: 0;
        height: 0;
        line-height: 0;
        font-size: 0;
        border-left: 5px dashed transparent;
        border-right: 5px dashed transparent;
        border-top: 5px solid #000;
        position: absolute;
        top: 44%;
        right: 8%;
        transition:.3s ease-out;
    }
    [open] summary::after {
        transform:rotate(180deg)
    }
    ul {
        max-height: 0;
        padding:0;
        margin-top:0;
        transition: .3s ease-out;
        overflow: hidden;
    }
    [open] + ul {
        max-height: 60px;
    }
  </style>
</head>
<body>
    <div>
        <details open>
            <summary>商品管理</summary>
        </details>
        <ul>
            <li>商品列表</li>
            <li>添加商品</li>
        </ul>
    </div>
    <div>
        <details open>
            <summary>品牌管理</summary>
        </details>
        <ul>
            <li>品牌列表</li>
            <li>添加品牌</li>
        </ul>
    </div>
    <div>
        <details open>
            <summary>分类管理</summary>
        </details>
        <ul>
            <li>分类列表</li>
            <li>添加分类</li>
        </ul>
    </div>
</body>
</html>

hgroup

1、定义和用法

hgroup元素是将标题和他的子标题进行分组的元素。hgroup元素一般会把h1-h6的元素进行分组，比如在一个内容区块的标题和他的子标题算是一组。通常情况下，文章只有一个主标题时，是不需要hgroup元素的。

2、实例

<article>
  <header>
    <hgroup>
      <h1>文章主标题</h1>
      <h2>文章子标题</h2>
    </hgroup>
    <p><time datetime=”2019-05-20”>2019年05月20日</time></p>
  </header>
  <p>文章正文</p>
</article>

figure & figcaption

1、定义和用法

<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。

figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

2、实例

hover 例子：https://tympanus.net/Development/HoverEffectIdeas/index2.html

<div class="hover-area area-Julia">
  <img src="imgs/21.jpg" height="360" width="480">
  <h3>PASSIONATE<strong>JULIA</strong></h3>
  <ul>
    <li>Julia dances in the deep dark.</li>
    <li>She loves the smell of the ocean</li>
    <li>And dives into the morning light</li>
  </ul>
</div>

VS

<figure class="effect-julia">
  <img src="img/21.jpg" alt="img21"/>
  <figcaption>
    <h2>Passionate <span>Julia</span></h2>
    <div>
      <p>Julia dances in the deep dark</p>
      <p>She loves the smell of the ocean</p>
      <p>And dives into the morning light</p>
    </div>
    <a href="#">View more</a>
  </figcaption>			
</figure>

mark

1、定义和用法

<mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。

2、实例

<p>Do not forget to buy <mark>milk</mark> today.</p>

time

1、定义和用法

<time> 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。

该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。

2、实例

<p>我们在每天早上 <time>9:00</time> 开始营业。</p>
<p>我在 <time datetime="2019-02-14">情人节</time> 有个约会。</p>

output

1、定义和用法

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

2、实例

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
   <input type="range" id="a" value="50">100
   +<input type="number" id="b" value="50">
   =<output name="x" for="a b"></output>
</form> 

progress

1、定义和用法

标签标示任务的进度（进程）。

2、实例

<progress value="22" max="100"></progress>

样式：
progress {
   color:orange; /*兼容IE10的已完成进度背景*/
   border:none;
   background: #d7d7d7;/*这个属性也可当作Chrome的已完成进度背景，只不过被下面的::progress-bar覆盖了*/      
}

progress::-webkit-progress-bar {
   background: #d7d7d7;
}

progress::-webkit-progress-value,
progress::-moz-progress-bar
{
  background: orange;
}

meter

1、定义和用法

<meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。

例子：磁盘用量、查询结果的相关性，等等。

注释：<meter> 标签不应用于指示进度（在进度条中）。如果标记进度条，请使用 <progress> 标签。

2、实例

<meter value="3" min="0" max="10">十分之三</meter>
<meter value="0.6">60%</meter> 

keygen

1、定义和用法

<keygen> 标签规定用于表单的密钥对生成器字段。

当提交表单时，私钥存储在本地，公钥发送到服务器。

2、实例

<form action="demo_keygen.do" method="get">
  Username: <input type="text" name="usr_name" />
  Encryption: <keygen name="security" />
  <input type="submit" />
</form>

embed

1、定义和用法

embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等，Netscape及新版的IE都支持。url为音频或视频文件及其路径，可以是相对路径或绝对路径。

2、实例

<embed src="your.mid">

source

1、定义和用法

<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

2、实例

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
 </audio> 

track

1、定义和用法

<track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。

用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。

目前所有主流浏览器都不支持 <track> 标签。

2、实例

<video width="320" height="240" controls="controls">
  <source src="forrest_gump.mp4" type="video/mp4" />
  <source src="forrest_gump.ogg" type="video/ogg" />
  <track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
  <track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">
</video>

bdi

1、定义和用法

bdi 指的是 bidi 隔离。

<bdi> 标签允许您设置一段文本，使其脱离其父元素的文本方向设置。

在发布用户评论或其他您无法完全控制的内容时，该标签很有用。

浏览器支持差。

2、实例

<ul>
  <li>Username <bdi>Bill</bdi>:80 points</li>
  <li>Username <bdi>Steve</bdi>: 78 points</li>
</ul>

ruby & rp & rb & rt

1、定义和用法

<ruby> 标签定义 ruby 注释（中文注音或字符）。

在东亚使用，显示的是东亚字符的发音。

与 <ruby> 以及 <rt> 标签一同使用：

ruby 元素由一个或多个字符（需要一个解释/发音）和一个提供该信息的 rt 元素组成，还包括可选的 rp 元素，定义当浏览器不支持 “ruby” 元素时显示的内容。

<rb> 要注音的对象。

2、实例

<ruby>
  <rb>我爱我的祖国</rb>
  <rp>(</rp>
  <rt>I love my motherland</rt>
  <rp>)</rp>
</ruby>

video

1、定义和用法

<video> 标签定义视频，比如电影片段或其他视频流。

2、实例

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

audio

1、定义和用法

<audio> 标签定义声音，比如音乐或其他音频流。

2、实例

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

canvas

1、定义和用法

<canvas> 标签定义图形，比如图表和其他图像。
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

2、实例

<canvas id="myCanvas"></canvas>

<script type="text/javascript">

var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);

</script>