015-HTML5介绍

一、HTML5 介绍

（一）、背景信息

• 什么是 HTML5?

  • HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。
  • HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。
  • HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

• HTML5 是如何起步的?

  • HTML5 是 W3C 与 WHATWG 合作的结果
  • WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML（HTML5）
    

（二）、HTML5的主要新功能

• 音频视频播放

  视频已经在 Web 上广泛流行了，但是其格式几乎都是专有的。YouTube 使用 Flash，Microsoft 使用 Windows Media®，Apple 使用 QuickTime。
  在一种浏览器中用来嵌入这些内容的标记在另一种浏览器中是无效的。
  HTML5新增**和**标签使得浏览器不需要插件即可播放视频和音频

• 动画 Canvas

  HTML 5 引进了很多新特性，其中最令人期待的之一就是 canvas 元素。HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法，此方法使用简单但功能强大。每一个 canvas 元素都有一个"上下文( context )" (想象成绘图板上的一页)，在其中可以绘制任意图形。浏览器支持多个 canvas 上下文，并通过不同的 API 提供图形绘制功能
  下图为基于 HTML5 Canvas 对象的 Invaders 经典游戏

  

• 地理信息
  

  点击地图中，黄色小人上方的圆圈，可以告诉 Google 地图你的地理位置

  HTML5 的另一个功能是地理信息定位功能，一些浏览器提供了 **geolocation API ，这个 API 也由 W3C 管理，可以结合 HTML5 实现你当前地理位置定位。Google Maps 在使用该功能，在 Google 地图上，有一个小圆圈，点击一下，就能告诉 Google 地图你现在的地理位置。目前，Geolocation API 并没有被众多桌面浏览器广泛采用(只有 Chrome 和 Firefox 3.6+ 采用了)，但 Google Gears 插件可以帮助那些旧浏览器实现该功能。
  Twitter 借此实现地理信息感知的 tweets 消息，当浏览器支持geolocation API **的时候，会自动使用该 API，否则，则使用 Google Gears

• 硬件加速、WEB SOCKET

• 本地离线应用程序

• 本地存储

  相对于HTML4只能使用cookie在客户端存储数据，大小受限制，占用带宽，操作复杂的情况
  HTML5支持使用Web Storage在客户端进行存储数据，容量更大，减轻带宽压力，操作简便

• 语义化标记

  HTML5的最大的意义在于改变了 Web 文档的结构方式，借助 header, footer, section, article 这些标签，我们可以实现更具结构化，语义化的 Web 文档。这样，搜索引擎可以更容易索引 Web 站点，我们也可以搜索到更快，更准确的信息

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9RpUtxrG-1604113980409)(img/4.png)]

• HTML5与FlASH
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MSrwoh0m-1604113980410)(img/5.png)]

（三）、HTML5的优势&不足

HTML5的优势

• 提高可用性和改进用户的友好体验
• 新标签这将有助于开发人员定义重要的内容
• 可以给站点带来更多的多媒体元素(视频和音频)
• 可以很好的替代FLASH和Silverlight
• 当涉及到网站的抓取和索引的时候，对于SEO很友好
• 大量应用于移动应用程序和游戏

HTML5的劣势

• HTML5本身还在发展中，它不是用户应用的最迫切需求，更多是厂商试图改变软件生态格局的战略需求
• HTML5的兼容性受限于各大浏览器表现，例如微软的IE和fireforx之间存在很多差别
• HTML5需要一个成熟完整的开发环境，目前还缺少
• HTML5功能的暴增，浏览器必须有一个高效的图形引擎和脚本引擎
• HTML5需要杀手级应用来吸引和引导用户升级浏览器，最终完成HTML5终端的部署

二、HTML5 新网页标准结构

（一）、HTML5网页标准结构

• HTML 5的革新之一：语义化标签一节元素标签。

• 在HTML 5出来之前，我们用div来表示页面章节，但是这些div都没有实际意义。（即使我们用css样式的id和class形容这块内容的意义）。这些标签只是我们提供给浏览器的指令，只是定义一个网页的某些部分。但现在，那些之前没“意义”的标签因为因为html5的出现消失了，这就是我们平时说的“语义”。

• HTML5制订的网页标准结构
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HOKU8Gaj-1604113980414)(img/4.png)]

（二）、结构标签

header

header标签定义一个页面或一个区域的头部

header 元素代表“网页”或“section”的页眉。
通常包含h1-h6元素或hgroup，作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分，一个搜索框，一个nav，或者任何相关logo

<header>头部</header>

article

article标签定义一篇文章

article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具

<article>
  <h1>一篇文章</h1>
  <p>文章内容..</p>
</article>

nav

nav标签定义导航链接

nav元素代表页面的导航链接区域。用于定义页面的主要导航部分

<nav>
  <ul>
    <li>HTML 5</li>
    <li>CSS3</li>
     <li>jQuery</li>
  </ul>
</nav>

section

section标签定义一个区域

section元素代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组

<section>section标签</section>

aside

aside标签定义侧边栏

aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等

<article>
  <p>内容</p>
  <aside>
    <h1>作者简介</h1>
    <p>这里是一段作者的简介内容。</p>
  </aside>
</article>

footer

footer标签页脚

footer元素代表“网页”或“section”的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息

<footer>
  <p>页脚</p>
</footer>

（三）、语义化标签

mark

mark定义高亮元素

<p>大家好，<mark>学习前端</mark>感觉真简单！</p>

details与summary

details(描述)与summary(摘要)

<details>
  <summary>HTml</summary>
  <div>
    <h4>美景</h4>
  </div>
</details>

meter

meter定义度量衡

meter: 显示一个计数仪表.

• 属性
  • value：当前值
  • min {number}：最小值
  • max {number}：最大值
  • low {number}： 指定范围的最小值。
  • high {number}：指定范围的最大值

<meter value="100" min="30" max= "200">100</meter>公里/小时

progress

progress定义进度条

progress: 显示一个进度条.

• 属性
  • value：进度条完成时的最大值
  • max {number}：进度的完成值

任务已经完成了：<progress max="100" value="65">65%</progress>

dialog

dialog定义对话框或窗口

<dialog open>这是打开的对话窗口</dialog>

figure

figure标签用于对元素进行组合

<figure>
  <h5> 富士山下的桃林 </h5>
  <p>桃花朵朵开，溪水潺潺流</p>
  <img  src='images/flower.jpg' />
</figure>

三、HTML5 多媒体

（一）、audio支持播放音频

在HTML5推出之前，浏览器打开音频视频主要通过Flash插件，Activex插件等等。
随着移动互联网时代到来，Flash的势头逐渐被HTML5替代。
目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg

• 音频格式的MiME类型

  • MP3: audio/mpeg
  • Ogg: audio/ogg
  • WAV: audio/wav

• 格式文件

  • Ogg：一种新的音频压缩格式，是完全免费、开放和没有专利限制的
  • MP3：是一种音频压缩技术。它被设计用来大幅度地降低音频数据量
  • WAV：为微软公司开发的一种声音文件格式，声音文件质量和CD相差无几

• 属性

  • src {string}：音频的url地址
  • autoplay {boolean} ：音频在就绪后马上播放
  • controls {boolean}：显示控件
  • loop {boolean}音频循环播放
  • muted {boolean}：静音

（二）、video支持播放视频

<video>元素提供了 播放、暂停和音量控件来控制视频。
同时<video> 元素元素也提供了 width 和 height 属性控制视频的尺寸
如果设置的高度和宽度，所需的视频空间会在页面加载时保留。。
如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变

• 注意
  <video> 元素支持多个 <source> 元素. <source>元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式

• 视频格式

  • MP4： 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
  • WebM：带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
  • Ogg：带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

• 属性

  • src {string}：视频的url地址
  • autoplay {boolean} ：视频在就绪后马上播放
  • controls {boolean}：显示控件
  • loop {boolean}视频循环播放
  • muted {boolean}：静音
  • width {string | number}: 视频宽度
  • height {string | number}: 视频高度
  • poster {string}：指定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像

四、HTML5 新增常用属性

（一）、contentEditable

contentEditable：属性只能是true或false,几乎可以为任何元素指定。用于将元素设为可编辑模式

<p contentEditable='tr'> 可编辑内容 </p>

（二）、hidden

hidden：属性规定对元素进行隐藏

<p hidden="hidden">这是一段隐藏的段落。</p>
<p>这是一段可见的段落。</p>

（三）、data-*

data-*：属性用于存储页面或应用程序的私有自定义数据

<p data-index=0> 文本内容 </p>

（四）、multiple

multiple：属性规定输入域中可选择多个内容

<input type='flie' multiple='multiple'  />

（五）、required

required：属性约束表单元在提交前必须输入值

<input type='text' required='required'/>

（六）、pattern

pattern：属性规定用于验证输入字段的模式

<input type="text" name="country_code" pattern="[A-z]{3}" />

五、HTML5 新表单操作

（一）、新表单

color

type="color":颜色选择框

<form>
  <input type='color' />
</form>

email

type="email":邮件输入框

<form>
  <input type='email' />
</form>

tel

type="tel":电话号码输入框

<form>
  <input type='tel' />
</form>

url

type="url":网址输入框

<form>
  <input type='url' />
</form>

number

type="number":数字输入框

• 属性
  • value {string}：设置文本框默认的内容
  • max {numebr}：设置最高的数字
  • min {numebr}：设置最低的数字
  • step {number}：设置数字间隔

<form>
  <input type='number' min='1' max='100' step='2'  />
</form>

range

type="range":拖动条,让用户输入数值

• 属性
  • value {string}：设置文本框默认的内容
  • max {numebr}：设置最高的数字
  • min {numebr}：设置最低的数字

<form>
  <input type='range' />
</form>

search

type="search":搜索框

<form>
  <input type='search' />
</form>

date

type="date":选取日、月、年

<form>
  <input type='date' />
</form>

time

type="time":选取时间（小时和分钟）

<form>
  <input type='time' />
</form>

week

type="week":选取周和年

<form>
  <input type='week' />
</form>

month

type="month":选取月、年

<form>
  <input type='month' />
</form>

datetime

type="datetime":选取时间、日、月、年（UTC 时间）

<form>
  <input type='datetime' />
</form>

datetime-local

type="datetime-local":选取时间、日、月、年（本地时间）

<form>
  <input type='datetime-local' />
</form>

（二）、表单重写属性

formaction

formaction：属性，表单请求地址，更改表单的action属性值

<form action='http://www.baidu.com'>
  <!-- 请求到http://www.sohu.com -->
  <input type='sumbit' value='提交' formaction='http://www.sohu.com' />
</form>

fromenctype

fromenctype：属性，表单请求类型，更改表单的enctype属性值

<form enctype='application/x-www-form-urlencoded'>
  <!-- application/x-www-form-urlencoded普通表单类型 -->
  <!-- multipart/form-data文件上传表单类型 -->
  <input type='sumbit' value='提交' fromenctype='multipart/form-data' />
</form>

formmethod

formmethod：属性，表单请求方式，更改表单的method属性值

<form method='get'>
  <!-- 请求方式设置为post -->
  <input type='sumbit' value='提交' formmethod='post' />
</form>

form

form：属性，用来指定该input元素属于哪个表单

<form id='myform'>
 <input type='submit' value='提交' />
</form>
<input type="text" name="lname" form="myform" />

六、HTML5 代码规范

在2000年至2010年，许多Web开发人员从 HTML 转换到 XHTML。
使用 XHTML 开发人员逐渐养成了比较好的 HTML 编写规范。
而针对于 HTML5 ，我们应该形成比较好的代码规范。
HTML5 在代码验证时会更宽松一点。
通过 HTML5，您必须创建属于自己的最佳实践、样式指南和代码约定。

• 请使用正确的文档类型

  请始终在文档的首行声明文档类型：
  如果您一贯坚持小写标签，那么可以使用：<!doctype html>

• 使用小写元素名

  HTML5 元素名可以使用大写和小写字母，推荐使用**小写字母 **

  • 混合了大小写的风格是非常糟糕的
  • 开发人员通常使用小写
  • 小写风格看起来更加清爽
  • 小写字母容易编写

• 使用小写属性名

  HTML5 属性名可以使用大写和小写字母，推荐使用**小写字母 **

  • 混合了大小写的风格是非常糟糕的
  • 开发人员通常使用小写
  • 小写风格看起来更加清爽
  • 小写字母容易编写

• 关闭所有 HTML 元素

  在 HTML5 中, 你不一定要关闭所有元素 (例如 <p> 元素)，但我们建议每个元素都要添加关闭标签

• 关闭空的 HTML 元素

  在 HTML5 中, 空的 HTML 元素也不一定要关闭 : <meta charset="utf-8" />

• 属性值引号

  HTML5 属性值可以不用引号。属性值我们推荐使用引号

  • 如果属性值含有空格需要使用引号。
  • 混合风格不推荐的，建议统一风格。
  • 属性值使用引号易于阅读。

• 空格和等号

  等号前后可以使用空格，但我们推荐少用空格：<link rel="stylesheet" href="styles.css">

• 图片属性

  图片通常使用 alt 属性。 在图片不能显示时，它能替代图片显示
  定义好图片的尺寸，在加载时可以预留指定空间，减少闪烁

• 避免长代码行

  当使用 HTML 编辑器时，通过左右滚动来阅读 HTML 代码很不方便。请尽量避免代码行超过 80 个字符

• HTML 注释

  短注释应该在单行中书写，并在 <!-- 之后增加一个空格，在 <!-- 之前增加一个空格
  长注释，跨越多行，应该通过 在独立的行中书写
  长注释更易观察，如果它们被缩进两个空格的话

• 样式表

  开括号与选择器位于同一行
  在开括号之前用一个空格
  使用两个字符的缩进
  在每个属性与其值之间使用冒号加一个空格
  在每个逗号或分号之后使用空格
  在每个属性值对（包括最后一个）之后使用分号
  只在值包含空格时使用引号来包围值
  把闭括号放在新的一行，之前不用空格
  避免每行超过 80 个字符

七、课后作业

• 了解下HTML5，并熟悉html网页标准结构，结构标签，语义化标签
• 熟悉html5多媒体，并嵌套在你的网站上
• 使用html5的新增常用属性，完成规范
• 尝试使用html5新增表单
• 了解下HTML5代码规范