h5

2019-03-27 本文已影响0人聽說_0100

一、HTML5简介

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。
HTML5的设计目的是为了在移动设备上支持多媒体。
HTML5 是下一代 HTML 标准。
HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。
HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

二、HTML5包含哪些内容

新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
2D/3D 制图

三、HTML标签

1.article

作用：<article> 标签定义独立的内容。<article> 标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。
格式：<abbr title=”全称”>简写 </abbr><article></article>
案例：

<article style="color:red;">
  <h4>"article "标签规定独立的自包含内容。一篇文章应有其自身  的意义，应该有可能独立于站点的其余部分对其进行分发。html5  添加</h4>
  <p>"artile"元素的潜在来源</p>
  <ul>
    <li>论坛帖子</li>
    <li>报纸文章</li>
    <li>博客条目</li>
    <li style="color:green;">用户评论</li>
  </ul>
  <p>"article"lei类似于“div”拥有“div”的所有属性</p>
</article>
<!-- <article>与<div>相似而<article>的原因是为了更容易在代码中清除标签所表示的含义。
例：看到<header>便清除其内容在网页中展示的是顶部内容 -->

效果：

2. aside

作用：<aside> 标签定义 <article> 标签外的内容。
aside 的内容应该与附近的内容相关。
格式：<abbr title=”全称”>简写 </abbr>
案例：

<aside style="color:red;">
  <p>aside的内容应该与附近的内容相关</p>
  <h4 style="color:green;">asideaaaaaaaaa</h4>
  <p>aside不不不不不不不不不不不不不</p>
  <p>啦啦啦啦啦啦啦啦绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿  绿绿绿绿绿绿绿绿绿绿绿不不不不不不不不不不不不不aside</p>
  <span>突突突突突突拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖拖</span>
</aside>

效果：

3. audio

作用：<audio> 标签定义声音，比如音乐或其他音频流。
格式：<audio title=”全称”>简写 </audio>
属性：

Audio在HTML5 中的新属性。

案例：

<audio controls >
  音乐一
  <source   src="http://dx.sc.chinaz.com/Files/DownLoad/sound1/201608/7631.mp3" >
</audio>
<audio controls>
  音乐二
  <source src="http://dx.sc.chinaz.com/Files/DownLoad/sound1/201606/7463.mp3" >
</audio>

效果：

4.bdi

作用： <bdi> 元素 (双向隔离元素) 会隔离可能以不同方向进行格式化的外部文本。
当不知道是从什么方向嵌入文本，如来自于数据库的文本（有起数据库的文本方向）的时候，该元素是十分有用的。
格式：<bdi></bdi>
案例：

<body>
  <p>在下面的示例中,显示着每个用户比赛的分数。将用户名从周围的文本方向设置中隔离出来。</p>
  <ul>
     <li>用户 <bdi>hrefs</bdi>: 60 分</li>
     <li>用户 <bdi>jdoe</bdi>: 80 分</li>
     <li>用户 <bdi>إيان</bdi>: 90 分</li>
  </ul>
  <p>
    <b>注意：</b> 目前只有 Firefox 和 Chrome 浏览器支持 bdi 标签。
  </p>
</body>

效果：

5.Canvas

作用：<canvas> 标签定义图形，比如图表和其他图像，通过脚本 (通常是JavaScript)来完成。（canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：）
格式： <canvas></canvas>
属性：

<canvas>: HTML5 中的新属性。

案例：

<body>
  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">您的浏览器不支持 HTML5 canvas 标签。
  </canvas>
  <script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,150,75);
  </script>

效果：

6.datailst

作用：<datalist> 标签规定了 <input> 元素可能的选项列表。
<datalist> 标签被用来在为 <input> 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。

格式<datalist></datalist>
案例：

<body>  
  <form action="demo-form.php" method="get">
    <input list="browsers" name="browser">
    <datalist id="browsers">
      <option value="Internet Explorer">
      <option value="Firefox">
      <option value="Chrome">
      <option value="Opera">
      <option value="Safari">
    </datalist>
    <input type="submit">
  </form>
  <p>
    <strong>注意:</strong>    Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 标签。
  </p>
</body>

效果：

7.dialog

作用：<dialog>标签定义一个对话框、确认框或窗口。在窗口的附近定义窗口的内容。
格式：<dialog open>简写 </dialog>
属性：

Dialog在HTML5 中的新属性。

案例：

<body>
    <p>
      <b>注意：</b>目前只有 Chrome 和 Safari 6 支持 dialog 标签。  
    </p>
    <table border="1">
    <tr>
      <th>January <dialog open>This is an open dialog window</dialog></th>
      <th>February</th>
      <th>March</th>
    </tr>
    <tr>
      <td>31</td>
      <td>28</td>
      <td>31</td>
    </tr>
  </table>
</body>

效果：

8.abbr

作用：用于标记缩写
格式：<abbr title=”全称”>简写 </abbr>
属性：title ：用于鼠标悬浮的提示信息
案例：

The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.

效果：

h5