h5筆記

時間 2019-11-10

標籤 h5 筆記简体版

原文原文鏈接

可以便於開發者閱讀和寫出更優雅的代碼，代碼如詩
同時讓瀏覽器或是網絡爬蟲能夠很好地解析，從而更好分析其中的內容
更好地搜索引擎優化

切記：HTML的職責是描述一塊內容是什麼（或其意義）而不是它長的什麼樣子，它的外觀應該由CSS來決定。

應用程序標籤

【datalist（數據列表）】

datalist數據列表的呈現須要載體javascript

<input type="text" list="input_list">
            <datalist id="datalist">
                <option value="選項框1"></option>
                <option value="選項框2"></option>
            </datalist>

            <input type="text" list="input_list">
            <datalist id="datalist">
                <option value="選項框1"></option>
                <option value="選項框2"></option>
            </datalist>

【progress（進度條）】

要改變他的樣式，須要先將-webkit-appearance設置爲nonephp

<style>
                .my_progress{
                    -webkit-appearance:none;
                }
                .my-progress::-webkit-progress-bar{
                    //樣式
                }
            </style>
            <progress class="my_progress" value="10" max="100"></progress>

【meter（數值顯示器）】

不多瀏覽器支持css

<meter min="0" max="100" low="40" hign="90" optimun="100" value="91"></meter>

顯示器的最大最小值：max，min
顯示器可以到達的最大最小值：hign，low
顯示器的測量範圍的最佳值：optimum
顯示器顯示的當前值：valuehtml

火狐兼容html5

【details（明細）】

點開一個內容能夠展開面板，在火狐和谷歌兼容java

屬性

連接關係描述：用來描述指定連接與當前文檔的關係，便於機器理解文檔結構

常見的連接關係表web

alternate       文檔的可選版本（例如打印頁、翻譯頁或鏡像）
    stylesheet      文檔的外部樣式表
    start           集合中的第一個文檔
    next            集合中的下一個文檔
    prev            集合中的前一個文檔
    contents        文檔目錄
    index           文檔索引
    glossary        文檔中所用字詞的術語表或解釋
    copyright       包含版權信息的文檔
    chapter         文檔的章
    section         文檔的節
    subsection      文檔的子段
    appendix        文檔附錄
    help            幫助文檔
    bookmark        相關文檔
    nofollow        用於指定 Google 搜索引擎不要跟蹤連接
    licence         通常用於文獻，表示許可證的含義
    tag             標籤集合
    friend          友情連接


    案例

    <link rel="prev" href="#">
    <link rel="next" href="#">
    <a rel="prev" href="#">上一頁</a>
    <a rel="next" href="#">下一頁</a>

    <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>

結構數據標記

高級東西，暫時只有谷歌支持
是爲了使得容易抓取網頁上的數據ajax

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

        好比抓取出：
        主人：汪磊
        狗名：旺財
        品種：金毛

ARIA

####Accessible Rich Internet Application (無障礙富互聯網應用程序)
    主要針對於屏幕閱讀設備(e.g. NVDA)，更快更好地理解網頁
    不只僅是爲了盲人用戶，更多語義化
1.數據註解，相似lable，只不過label是針對表格
2.能夠經過aria知道數據的強相關

aria由一套屬性組成，屬性分爲role以及對應的states和properties，
aria將html元素分爲六種role，每種有對應的states和properties，
但有一些是共用的，好比

        aria-atomic
        aria-busy(state)
        aria-describedby
        aria-disabled(state)
        aria-dropeffect
        aria-flowto
        aria-haspopup
        aria-hidden(state)
        aria-invalid(state)
        aria-label
        aria-labelledby
        aria-owns
        aria-relevant

        舉個僞元素例子，

        <div role="radio" aria-checked="true" aria-label="單選2" tabindex="0">單選tabindex="0"</div>

        這個div模擬了radio的功能，在平時讀屏軟件是分辨不出來的，
        可是加上role及aria-checked狀態，
        在讀屏軟件（NVDA）中讀出來就是：

單選2 單選按鈕 選中 第1頁 共1項

詳細屬性見：ARIA財付通設計中心.htmlapache

自定義屬性 data

經過DOM存儲與DOM對象強相關的數據

1.能夠給html裏的全部dom對象均可以添加一些data-xxx的屬性
2.用來記錄與當前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>

案例一：

編程

<script>
        //鍵是ID 值是信息
            var data = {
                01:{
                    name:"偉哥哥"，
                    age:"18"
                },
                02:{
                    name:"偉哥哥"，
                    age:"19"
                },
                03:{
                    name:"偉哥哥"，
                    age:"20"
                }

                //jQuery操做必定要作變量本地化
                var list = document.getElementById("list");
                for(var id in data){
                    var item = data[id];
                    var liElement = document.createElement("li");
                    //liElement.innerHTML = item.name;
                    liElement.appendChild(document.createTextNode(item.name));
                    liElement.setAttribute("data-age",item.age);
                    liElement.setAttribute("data-id",item.id);
                    list.appendChild(liElement);//變量本地化

                    //此處纔將元素加到界面上
                    liElement.addEventListener("click",function(){
                        //alert(this.name);
                        //this 是當前點擊的元素
                        //alert(this.getAttribute("data-age"));
                        console.log(this.dataset["age"]);
                    })
                }

            };
        </script>

案例二：

<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>
        </body>

        <script>
            var ul = document.getElementById('users');

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

案例三：

<body>
                <div class="tabs">
                    <ul>
                        <li data-target=".panel-new">新聞</li>
                        <li data-target=".panel-bagua">八卦</li>
                        <li data-target=".panel-sport">體育</li>
                    </ul>
                    <div class="panel-new"></div>
                    <div class="panel-bagua"></div>
                    <div class="panel-sport"></div>
                </div>
                <script>
                $(function(){
                    //寫這個是爲了有一個單獨做用於，避免污染
                    //api是應用程序編程接口
                    var $lis = $('.tabs>ul>li');
                    $lis.on("click",function(){
                    //獲取目標對象的選擇器
                    var targetSelector = $(this).data('target');
                    var $target = $(targetSelector);
                    });
                });
                </script>
            </body>

智能表單

新的表單類型

<form action="#">
        //repuired表示必須的，表示填寫框不能爲空，會有提示可是提示不能更改
        <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>

虛擬鍵盤適配

手機鍵盤會根據不一樣的type類型彈出不一樣鍵盤類型
        如打開數字鍵盤，密碼鍵盤，郵件鍵盤
        <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">

網頁多媒體

音頻

多媒體的dom對象有一些新的方法能夠去作播放暫停

單個數據源的方式

默認界面：

        <audio src="music.mp3" controls="controls"></audio>

自定義一個：
        <audio id="audio" src="music.mp3"></audio>
        <button id="btn">播放</button>
        <button id="btn_pause">暫停</button>
        <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>

多個數據源的方式

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

視頻

單個數據源的方式

<video src="fun.mp4" controls="controls"></video>

多個數據源的方式

<video controls="controls" poster="top.png" autoplay="autoplay">
             不一樣瀏覽器支持格式不同,由於版權問題
            <source src="fun.ogg" type="video/ogg"></source>
            <source src="fun.mp4" type="video/mp4"></source>
             當瀏覽器不兼容video標籤，就會將他以div方式解析
             用第三方組件代替
             <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==&amp;ShowId=0&amp;category=85&amp;Cp=0&amp;ev=1&amp;Light=on&amp;THX=off&amp;unCookie=0&amp;frame=0&amp;pvid=1439005764768c9QpaT&amp;uepflag=1&amp;Tid=0&amp;isAutoPlay=true&amp;Version=/v1.0.1080&amp;show_ce=0&amp;winType=interior&amp;Type=Folder&amp;Fid=25977506&amp;Pt=0&amp;Ob=1&amp;plchid=z&amp;openScanCode=1&amp;scanCodeText=&quot;限時&quot; 掃碼免廣告&amp;embedid=AjMyNjAwOTM0NgJ3d3cueW91a3UuY29tAi8=&amp;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&amp;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>

視頻播放器相關屬性

屬性      值           描述
        autoplay    autoplay    若是出現該屬性，則視頻在就緒後立刻播放
        controls    controls    若是出現該屬性，則向用戶顯示控件，好比播放按鈕
        height      pixels      設置視頻播放器的高度
        loop        loop        若是出現該屬性，則當媒介文件完成播放後再次開始播放
        muted       muted       規定視頻的音頻輸出應該被靜音。【即：靜音】
        poster      URL         規定視頻下載時顯示的圖像，或者在用戶點擊播放按鈕前顯示的圖像
        preload     preload     若是出現該屬性，則視頻在頁面加載時進行加載，並預備播放
                                若是使用"autoplay"，則忽略該屬性
        src         url         要播放的視頻的URL
        width       pixels      設置視頻播放器的寬度

字幕

字幕案例：
        <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>

    字幕文件內容示例：
        WEBVIT  FILE

        1
        00:00:00.000 --> 00:00:12.000 D:vertical A:start

        2
        00:00:12.000 --> 00:00:15.300
        你們好，我是偉哥哥

Canvas

2D

3D (WebGL)

SVG

Scalable Vector Graphics 可縮放矢量圖形

svg圖片來源：經過AI，文件-->腳本-->將文檔存儲爲SVG

svg能夠像標籤那樣子直接黏貼到頁面上，可是咱們更但願像圖片那樣載入進來

能夠藉助三個標籤載入：

        <iframe src="demo.svg" frameborder="0"></iframe>    //推薦
        <object data="demo.svg" type=""></object>
        <embed src="demo.svg" type="">


學完ajax以後推薦方式：

        學習完異步請求以後，咱們能夠遍歷全部SVG節點，把src引入進來，自己他是一個document對象，能夠把它直接append到文檔中。

        window.addEventListener('load',function(){
            var svgs = document.getElementByTagName('svg');
            for (var i = 0;i < svgs.length; i++){
                //console.log(svg[i].dataset);
                var src = $(svgs[i].data('src'));
                //向服務器發送請求 獲得svg
                $.get(src,function(data){
                    var el = data.documentElement;
                    $(document.body).append($(el));
                    });
            }
            });
        同時將svg文件裏面的style刪除，以便咱們進行更改樣式

補充：

一、sublime server插件安裝
安裝完不要stop serber，不用的時候直接要退出sublime，否則sublime會崩潰

二、谷歌瀏覽器開發者工具右上角展開欄的settings，給show useragent shadow DOM選上鉤後能夠看到虛擬出來的DOM

3.僞類對象
至關於在weigege後面插入一個 zuishuai ，而且能夠改變他的樣式

<style>
.content::after{
    content: 'zuishuai';
    color: #465;
}
</style>
<div class="content">weigege</div>

4.h5新標籤
h5新標籤由於太新，可能在低級瀏覽器不能識別，不能識別的標籤瀏覽器會自動識別爲div進行加載，能夠經過如下方式生成標籤
方式一：本身定義

方式二：引入第三方組件html5shiv.js
裏面是將全部h5新標籤經過方式一的方式進行建立

5.在谷歌控制檯輸入一次輸入下面代碼
1.
document.body (回車)
document.body.contentEditable = true; (回車)
而後能夠在頁面上直接編輯文字
2.
直接在鏈接處輸入
data:text/html, (回車)
能夠直接在頁面上編輯文字

6.第三方多媒體播放器庫：jwplayer

7.專門爲移動端使用的組件 zepto？
實現的api與jQuery基本相同
冗餘處理兼容的代碼都砍掉了
彷佛能夠代替jQuery

8.！important在老版本是頂不掉行內樣式的

9.Markdown
開源項目說明文件都是用這種寫的
語法連接：http://wowubuntu.com/markdown/
用普通文本描述富文本的語法
擴展名md，markdown
案例
h標籤

HEADER1

HEADER2

HEADER3

段落直接寫前面不用加東西

無序列表
前面有空格

有序列表
前面有數字都是有序列表，記得加空格

特定的編輯器能夠加javascript表明特定的語法，用於編寫代碼

10.iframe 至關於挖了一個坑把其餘頁面載入進來

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

h5筆記

標籤

更語義化標籤

爲何要有語義化標籤

應用程序標籤

【datalist（數據列表）】

【progress（進度條）】

【meter（數值顯示器）】

【menu（右鍵菜單）】

【details（明細）】

屬性

連接關係描述：用來描述指定連接與當前文檔的關係，便於機器理解文檔結構

結構數據標記

ARIA

自定義屬性 data

智能表單

新的表單類型

虛擬鍵盤適配

網頁多媒體

音頻

單個數據源的方式

多個數據源的方式

視頻

單個數據源的方式

多個數據源的方式

視頻播放器相關屬性

字幕

Canvas

2D

3D (WebGL)

SVG

Scalable Vector Graphics 可縮放矢量圖形

svg圖片來源：經過AI，文件-->腳本-->將文檔存儲爲SVG

svg能夠像標籤那樣子直接黏貼到頁面上，可是咱們更但願像圖片那樣載入進來

補充：

HEADER1

HEADER2

HEADER3