HTML5 第一天

-What is HTML5

定义

HTML5 ≈ HTML↑ + CSS↑ + JavaScript API↑

广义上：新一代开发Web富客户端应用程序整体解决方案

Structure → Style → Interactive

全包了！！！

HTML5 的应用场景

极具表现力的网页
案例非常多
网页应用程序
PC端：iCloud、百度脑图、Office 365···
APP端：淘宝、京东、美团···
WeChat端：淘宝、京东、美团···
混合式本地应用
PC端：网易云音乐、有道词典···
APP端：淘宝、京东、美团···
简单的游戏

-HTML5 到底多了点啥？

https://www.w3.org/TR/2014/WD-html5-diff-20140918/

HTML

JavaScript API

CSS

HTML标签：更具有语义化的标签

就让HTML代码符合内容的结构化，标签语义化

以前我们可能是这样的：

以前

以后我们一定是这样的：

以后

-语义化标签

为什么要有语义化标签？

能够便于开发者阅读和写出更优雅的代码，代码如诗
同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
更好地搜索引擎优化

切记
HTML的职责是描述一块内容是什么（或其意义）
而不是它长的什么样子，它的外观应该由CSS来决定。

应用程序标签

DataList(数据列表)
Progress(进度条)
~~Meter(数值显示器)~~
~~Menu(右键菜单)~~
View Demo

View Demo


<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>应用程序功能标签</title>
  <meta name="author" content="汪磊">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h2>DataList</h2>
  <input list="teachers" />
  <datalist id="teachers">
    <option value="段誉" />
    <option value="乔峰" />
    <option value="方世玉" />
  </datalist>
  <hr>
  <h2>NoAutoComplate</h2>
  <input list="students" autocomplete="false" />
  <datalist id="students">
    <option value="BMW" />
    <option value="Ford" />
    <option value="Volvo" />
  </datalist>
  <hr>
  <h2>Right Menu（Firefox Only）</h2>
  <menu>
    <command type="command" disabled label="Publish" />
  </menu>
  <hr>
  <h2>Details（Opera, Chrome, and in Safari 6）</h2>
  <details>
    <summary>HTML 5</summary>
    This slide deck teaches you everything you need to know about HTML 5.
  </details>
  <hr>
  <h2>Meter</h2>
  <meter min="0" max="100" low="40" high="90" optimum="100" value="91">A+</meter>
  <hr>
  <h2>Progress</h2>
  <p>在不同操作系统上展示的样式不同</p>
  <progress>working...</progress>
  <progress value="75" max="100">3/4 complete</progress>
  <h3>修改进度条样式，<a href="http://www.hongkiat.com/blog/html5-progress-bar/">参考链接</a><a href="https://css-tricks.com/html5-progress-element/"></a></h3>
  <progress class="my-progress" value="30" max="100">30/100 complete</progress>
</body>

</html>

☆语义化标签学习目标

掌握语义化标签的重要性
可以正确使用语义化标签

-属性

链接关系

rel

<link rel="stylesheet" href="style.css">
<link rel="alternate" type="application/rss+xml" href="http://myblog.com/feed">
<link rel="shortcut icon" href="favicon.ico">
<link rel="pingback" href="http://myblog.com/xmlrpc.php">
<link rel="prefetch" href="http://myblog.com/main.php">
...

<a rel="archives" href="http://myblog.com/archives">old posts</a>
<a rel="external" href="http://notmysite.com">tutorial</a>
<a rel="license" href="http://www.apache.org/licenses/LICENSE-2.0">license</a>
<a rel="nofollow" href="http://notmysite.com/sample">wannabe</a>
<a rel="tag" href="http://myblog.com/category/games">games posts</a>
...

用来描述指定链接与当前文档的关系，便于机器理解文档结构

常见的链接关系表

结构数据标记 *

https://developers.google.com/structured-data/testing-tool/

<div itemscope itemtype="http://example.com/hello">
  <p>我叫<span itemprop="主人">汪磊</span>。</p>
  <p>
    我养了一条叫
    <span itemprop="狗名">旺财</span>的
    <span itemprop="品种">金毛</span>犬。
  </p>
</div>

很高级的东西，只有Google支持

ARIA 属性 (了解）

Accessible Rich Internet Application (无障碍富互联网应用程序)

主要针对于屏幕阅读设备(e.g. NVDA)，更快更好地理解网页

不仅仅是为了盲人用户，更多语义化

WAI-ARIA无障碍网页应用属性完全展示
ARIA让视障人士更了解你的页面

自定义属性 data-*

通过DOM存储与DOM对象强相关的数据

<ul id="users">
  <li data-id="1" data-age="18" data-gender="true">张三</li>
  <li data-id="2" data-age="18" data-gender="false">李四</li>
  <li data-id="3" data-age="18" data-gender="true">王二</li>
</ul>

demo


<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>更语义化的标签</title>
  <meta name="author" content="汪磊">
</head>

<body>
  <ul id="users">
    <li class="item" data-id="1" data-age="18" data-gender="true">
      张三
      <pre></pre>
    </li>
    <li class="item" data-id="2" data-age="18" data-gender="false">
      李四
      <pre></pre>
    </li>
    <li class="item" data-id="3" data-age="18" data-gender="true">
      王二
      <pre></pre>
    </li>
  </ul>
  <script>
    var ul = document.getElementById('users');

    for (var i = 0; i < ul.children.length; i++) {
      var li = ul.children[i];
      // JS 添加data属性
      li.setAttribute('data-name', li.innerText);
      li.children[0].innerText = '';
      for (var key in li.dataset) {
        li.children[0].innerText += key + ':' + li.dataset[key] + '\n';
      }
    }
  </script>
</body>

</html>

☆新属性学习目标

了解而已，以后在国内普及开过后，迅速上手

-智能表单

新的表单类型

<input type="text" required>
<input type="email" value="some@email.com">
<input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14">
<input type="range" min="0" max="50" value="10">
<input type="search" results="10" placeholder="Search...">
<input type="tel" placeholder="(555) 555-5555"
pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$">
<input type="color" placeholder="e.g. #bbbbbb">
<input type="number" step="1" min="-5" max="10" value="0">

demo

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>新的表单类型</title>
  <meta name="author" content="汪磊">
</head>

<body>
  <form action="#">
    <label>text:
      <input type="text" required>
    </label>
    <br>
    <label>email:
      <input type="email" value="ice@wedn.net">
    </label>
    <br>
    <label>date:
      <input type="date" min="2014-10-14" max="2020-10-14" value="2016-08-14">
    </label>
    <br>
    <label>range:
      <input type="range" min="0" max="50" value="10">
    </label>
    <br>
    <label>search:
      <input type="search" results="10" placeholder="搜点啥？">
    </label>
    <br>
    <label>tel:
      <input type="tel" placeholder="(010) 888-888" pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$">
    </label>
    <br>
    <label>color:
      <input type="color" placeholder="e.g. #bbbbbb">
    </label>
    <br>
    <label>number:
      <input type="number" step="1" min="-5" max="10" value="0">
    </label>
    <br>
    <input type="submit" value="提交">
  </form>
</body>

</html>

虚拟键盘适配

<input type="text" name="txt_text" id="txt_text">
<input type="number" name="txt_number" id="txt_number">
<input type="email" name="txt_email" id="txt_email">
<input type="tel" name="txt_tel" id="txt_tel">
<input type="url" name="txt_url" id="txt_url">

☆智能表单学习目标

网页开发过程中可以针对需求使用特定的智能表单类型

-网页多媒体

在此之前需要依赖于第三方插件（e.g. flash）

音频

<audio controls="controls">
  <source src="img/music.mp3" type="audio/mpeg"/>
</audio>

视频

<video controls="controls">
  <!-- 不同浏览器支持格式不一样 -->
  <source src="fun.ogg" type="video/ogg" />
  <source src="fun.mp4" type="video/mp4" />
  <!-- 当浏览器不兼容video标签，就会将他以div方式解析 -->
  SHIT 你的浏览器不支持！
</video>

视频相关属性

兼容方案：

https://html5media.info/

字幕：

http://www.w3schools.com/tags/tag_track.asp

<video id="clip" controls>
  <source src="fun.mp4" type="video/mp4" />
  <track label="English subtitles" kind="subtitles"
  srclang="en" src="video-subtitles-en.vtt" default />
</video>

多媒体案例完整源码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>多媒体</title>
</head>

<body>
  <!-- jwplayer zepto -->
  <!-- <audio id="audio" src="music.mp3"></audio>
  <button id="btn">播放</button>
  <button id="btn_pause">暂停</button> -->
  <video controls="controls" poster="toy.png" autoplay="autoplay">
    <source src="fun.ogg" type="video/ogg">
    <source src="fun.mp4" type="video/mp4">
    <object type="application/x-shockwave-flash" data="http://static.youku.com/v1.0.0557/v/swf/loader.swf" width="100%" height="100%" id="movie_player">
      <param name="allowFullScreen" value="true">
      <param name="allowscriptaccess" value="always">
      <param name="allowFullScreenInteractive" value="true">
      <param name="flashvars" value="VideoIDS=XMTMwNDAzNzM4NA==&ShowId=0&category=85&Cp=0&ev=1&Light=on&THX=off&unCookie=0&frame=0&pvid=1439005764768c9QpaT&uepflag=1&Tid=0&isAutoPlay=true&Version=/v1.0.1080&show_ce=0&winType=interior&Type=Folder&Fid=25977506&Pt=0&Ob=1&plchid=z&openScanCode=1&scanCodeText="限时" 扫码免广告&embedid=AjMyNjAwOTM0NgJ3d3cueW91a3UuY29tAi8=&vext=bc%3D%26pid%3D1439005764768c9QpaT%26unCookie%3D0%26frame%3D0%26type%3D1%26fob%3D1%26fpo%3D0%26svt%3D0%26emb%3DAjMyNjAwOTM0NgJ3d3cueW91a3UuY29tAi8%3D%26dn%3D%E7%BD%91%E9%A1%B5%26hwc%3D1%26mtype%3Doth&pageStartTime=1439005764766">
      <param name="movie" value="http://static.youku.com/v1.0.0557/v/swf/loader.swf">
      <div class="player_html5">
        <div class="picture" style="height:100%">
          <div style="line-height:460px;"><span style="font-size:18px">您还没有安装flash播放器,请点击<a href="http://www.adobe.com/go/getflash" target="_blank">这里</a>安装</span></div>
        </div>
      </div>
    </object>
  </video>
  <script>
    // var btn = document.getElementById('btn');
    // var btn_pause = document.getElementById('btn_pause');
    // var audio = document.getElementById('audio');
    // btn.addEventListener('click', function() {
    //   // 播放音频
    //   audio.play();
    // });
    // btn_pause.addEventListener('click', function() {
    //   // 播放音频
    //   audio.pause();
    // });
  </script>
</body>

</html>

☆多媒体学习目标

掌握网页多媒体的意义
对Video标签和Audio标签熟练使用
了解字幕标签

-SVG

可缩放矢量图形是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。

Scalable Vector Graphics 可缩放矢量图形
基于可扩展标记语言
优势：体积小，质量高，效果好，可控程度高
扩展连接： HTML5中的SVG ** SVG **

使用 SVG File 的方式

使用 <embed> 标签
使用 <object> 标签
使用 <iframe> 标签
Ajax方式加载

☆SVG 学习目标

了解SVG是什么东西
可以在网页中使用别人做好的SVG
并可以对SVG文件作出基本调整
会用样式修饰SVG

-Canvas

提供网页级画布（GDI+）的实现

-Moderizer

一个JavaScript针对H5特性兼容的探针

-About IE

为了尽可能让IE更好地支持HTML5，你可以使用以下两种方式：

Client side:

<meta http-equiv="X-UA-Compatible"
                            content="chrome=1">

Server side:

X-UA-Compatible: chrome=1

-What is HTML5

最新一代的WEB技术，用于构建现代Web应用程序！

-HTML5 的能力已经覆盖

Offline / Storage
Realtime / Communication
File / Hardware Access
Semantics & Markup
Graphics / Multimedia
CSS3
Nuts & Bolts

最后编辑于：2017.12.05 03:24:27

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 221,695评论 6赞 515
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 94,569评论 3赞 399
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 168,130评论 0赞 360
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 59,648评论 1赞 297
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 68,655评论 6赞 397
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 52,268评论 1赞 309
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,835评论 3赞 421
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,740评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 46,286评论 1赞 318
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 38,375评论 3赞 340
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 40,505评论 1赞 352
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 36,185评论 5赞 350
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,873评论 3赞 333
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 32,357评论 0赞 24
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 33,466评论 1赞 272
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 48,921评论 3赞 376
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 45,515评论 2赞 359

HTML5 第一天

-What is HTML5

定义

HTML5 的应用场景

-HTML5 到底多了点啥？

HTML

JavaScript API

CSS

HTML标签：更具有语义化的标签

-语义化标签

为什么要有语义化标签？

应用程序标签

☆语义化标签 学习目标

-属性

链接关系

常见的链接关系表

结构数据标记 *

ARIA 属性 (了解）

自定义属性 data-*

☆新属性 学习目标

-智能表单

新的表单类型

虚拟键盘适配

☆智能表单 学习目标

-网页多媒体

音频

视频

视频相关属性

兼容方案：

字幕：

多媒体案例完整源码

☆多媒体 学习目标

-SVG

使用 SVG File 的方式

☆SVG 学习目标

-Canvas

-Moderizer

-About IE

-What is HTML5

-HTML5 的能力已经覆盖

推荐阅读更多精彩内容

☆语义化标签学习目标

☆新属性学习目标

☆智能表单学习目标

☆多媒体学习目标