HTML5 第一天

-What is HTML5

定義

HTML5 ≈ HTML↑ + CSS↑ + JavaScript API↑

廣義上：新一代開發(fā)Web富客戶端應(yīng)用程序整體解決方案

Structure → Style → Interactive

全包了！！！

HTML5 的應(yīng)用場景

極具表現(xiàn)力的網(wǎng)頁
案例非常多
網(wǎng)頁應(yīng)用程序
PC端：iCloud、百度腦圖、Office 365···
APP端：淘寶、京東、美團(tuán)···
WeChat端：淘寶、京東、美團(tuán)···
混合式本地應(yīng)用
PC端：網(wǎng)易云音樂、有道詞典···
APP端：淘寶、京東、美團(tuán)···
簡單的游戲

-HTML5 到底多了點(diǎn)啥？

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

HTML

HTML

JavaScript API

JavaScript API

CSS

CSS

HTML標(biāo)簽：更具有語義化的標(biāo)簽

就讓HTML代碼符合內(nèi)容的結(jié)構(gòu)化，標(biāo)簽語義化

以前我們可能是這樣的：

以前

以后我們一定是這樣的：

以后

-語義化標(biāo)簽

為什么要有語義化標(biāo)簽？

能夠便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼，代碼如詩
同時(shí)讓瀏覽器或是網(wǎng)絡(luò)爬蟲可以很好地解析，從而更好分析其中的內(nèi)容
更好地搜索引擎優(yōu)化

切記
HTML的職責(zé)是描述一塊內(nèi)容是什么（或其意義）
而不是它長的什么樣子，它的外觀應(yīng)該由CSS來決定。

應(yīng)用程序標(biāo)簽

DataList(數(shù)據(jù)列表)
Progress(進(jìn)度條)
Meter(數(shù)值顯示器)
Menu(右鍵菜單)
View Demo

View Demo


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

<head>
  <meta charset="UTF-8">
  <title>應(yīng)用程序功能標(biāo)簽</title>
  <meta name="author" content="汪磊">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h2>DataList</h2>
  <input list="teachers" />
  <datalist id="teachers">
    <option value="段譽(yù)" />
    <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>在不同操作系統(tǒng)上展示的樣式不同</p>
  <progress>working...</progress>
  <progress value="75" max="100">3/4 complete</progress>
  <h3>修改進(jìn)度條樣式，<a >參考鏈接</a><a ></a></h3>
  <progress class="my-progress" value="30" max="100">30/100 complete</progress>
</body>

</html>

☆語義化標(biāo)簽 學(xué)習(xí)目標(biāo)

掌握語義化標(biāo)簽的重要性
可以正確使用語義化標(biāo)簽

-屬性

鏈接關(guān)系

rel

<link rel="stylesheet" href="style.css">
<link rel="alternate" type="application/rss+xml" >
<link rel="shortcut icon" href="favicon.ico">
<link rel="pingback" >
<link rel="prefetch" >
...

<a rel="archives" >old posts</a>
<a rel="external" >tutorial</a>
<a rel="license" >license</a>
<a rel="nofollow" >wannabe</a>
<a rel="tag" >games posts</a>
...

用來描述指定鏈接與當(dāng)前文檔的關(guān)系，便于機(jī)器理解文檔結(jié)構(gòu)

常見的鏈接關(guān)系表

結(jié)構(gòu)數(shù)據(jù)標(biāo)記 *

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

<div itemscope itemtype="http://example.com/hello">
  <p>我叫<span itemprop="主人">汪磊</span>。</p>
  <p>
    我養(yǎng)了一條叫
    <span itemprop="狗名">旺財(cái)</span>的
    <span itemprop="品種">金毛</span>犬。
  </p>
</div>

很高級的東西，只有Google支持

ARIA 屬性 (了解）

Accessible Rich Internet Application (無障礙富互聯(lián)網(wǎng)應(yīng)用程序)

主要針對于屏幕閱讀設(shè)備(e.g. NVDA)，更快更好地理解網(wǎng)頁

不僅僅是為了盲人用戶，更多語義化

WAI-ARIA無障礙網(wǎng)頁應(yīng)用屬性完全展示
ARIA讓視障人士更了解你的頁面

自定義屬性 data-*

通過DOM存儲與DOM對象強(qiáng)相關(guān)的數(shù)據(jù)

<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>更語義化的標(biāo)簽</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>

☆新屬性 學(xué)習(xí)目標(biāo)

了解而已，以后在國內(nèi)普及開過后，迅速上手

-智能表單

新的表單類型

<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="搜點(diǎn)啥？">
    </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">

☆智能表單 學(xué)習(xí)目標(biāo)

網(wǎng)頁開發(fā)過程中可以針對需求使用特定的智能表單類型

-網(wǎng)頁多媒體

在此之前需要依賴于第三方插件（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" />
  <!-- 當(dāng)瀏覽器不兼容video標(biāo)簽，就會將他以div方式解析 -->
  SHIT 你的瀏覽器不支持！
</video>

視頻相關(guān)屬性

兼容方案：

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="限時(shí)" 掃碼免廣告&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播放器,請點(diǎn)擊<a  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>

☆多媒體 學(xué)習(xí)目標(biāo)

掌握網(wǎng)頁多媒體的意義
對Video標(biāo)簽和Audio標(biāo)簽熟練使用
了解字幕標(biāo)簽

-SVG

可縮放矢量圖形是基于可擴(kuò)展標(biāo)記語言（標(biāo)準(zhǔn)通用標(biāo)記語言的子集），用于描述二維矢量圖形的一種圖形格式。它由萬維網(wǎng)聯(lián)盟制定，是一個(gè)開放標(biāo)準(zhǔn)。

Scalable Vector Graphics 可縮放矢量圖形
基于可擴(kuò)展標(biāo)記語言
優(yōu)勢：體積小，質(zhì)量高，效果好，可控程度高
擴(kuò)展連接： HTML5中的SVG ** SVG **

使用 SVG File 的方式

使用 <embed> 標(biāo)簽
使用 <object> 標(biāo)簽
使用 <iframe> 標(biāo)簽
Ajax方式加載

☆SVG 學(xué)習(xí)目標(biāo)

了解SVG是什么東西
可以在網(wǎng)頁中使用別人做好的SVG
并可以對SVG文件作出基本調(diào)整
會用樣式修飾SVG

-Canvas

提供網(wǎng)頁級畫布（GDI+）的實(shí)現(xiàn)

-Moderizer

一個(gè)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技術(shù)，用于構(gòu)建現(xiàn)代Web應(yīng)用程序！

-HTML5 的能力已經(jīng)覆蓋

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

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,563評論 19贊 139
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,040評論 25贊 709
  • HTML5 第一章 HTML5概述 H5是下一代的web開發(fā)的基礎(chǔ). 1.1 web技術(shù)發(fā)展時(shí)間線 1991 HT...
    whitsats閱讀 1,228評論 0贊 0
  • 越到夜深，越是難受。生命中自我選擇的輕松終究會在某一刻變成沉重陣陣襲來
    dlsss閱讀 176評論 1贊 0
  • 臨睡前 , 突然想到白洱的 “ 夢想成真 ” 。 記得刷評論的時(shí)候 , 有個(gè)人說 : “ 我終于知道什...
    于是我被你當(dāng)作是吃掉愛的怪獸閱讀 696評論 0贊 2

友情鏈接更多精彩內(nèi)容