第86天：HTML5應用程式標籤和智慧表單

半指溫柔樂發表於2017-11-16
HTML

一、HTML5應用程式標籤

1、datalist需要資料載體 input list屬性指向資料來源

2、progress進度條

-webkit-appearance: none;   /*如果要改預設樣式 要先取消預設樣式 */
 .my-progress::-moz-progress-bar {   /*選中背景元素*/ /*相容火狐瀏覽器*/
    yellow;
}
 .my-progress::-webkit-progress-bar {  /*拿到progress的-webkit-progress-bar位置*/
    yellow;
}
.my-progress::-webkit-progress-value {
    blue;
}
<progress class=”my-progress” value=”40″ max=”100″></progress> 
<meter max=”100″ low=”40″ high=”90″ optimum=”100″ value=”90″></meter> <!–optimum 這是最大值 value是當前值–>

3、解決CSS3各個瀏覽器相容問題需要新增私有字首

<1> Firefox: -moz-
<2> Safari: -webkit-
<3> Opera: -o-
<4> IE: -ms-

4、網頁 css、 js 儲存在網路伺服器上 http伺服器

www.baidu.com 先去dns伺服器查百度的IP地址， 找到ip之後直接去 訪問這個ip ，這時候這些檔案傳到你電腦上， 就能顯示網頁。
sublimeserver 就是在本機中開啟了一個http伺服器， 區域網都能訪問sublime開啟的專案。
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>應用程式標籤</title>
 6     <style>
 7         .my-progress{
 8             -webkit-appearance: none;
 9         }
10         .content::after{/*偽類 在div 後面繼續新增內容*/
11             content:`bbbbb`;
12             color:#f40;
13         }
14         .my-progress::-webkit-progress-bar{
15             background-color: #fff;
16         }
17     </style>
18 </head>
19 <!--Sublime Server  不要stop直接退出-->
20 <body>
21     <div class="content">aaaaaa</div>
22     <!--資料列表-->
23     <input type="text" list="input_list">
24     <datalist id="input_list"><!--資料列表呈現需要載體-->
25         <opion value="laoma"></opion>
26         <option value="list"></option>
27     </datalist>
28 
29     <!--狀態指示器-->
30     <progress></progress>
31     <!--進度條預設最大值是1-->
32     <progress value="10" max="100" class="my-progress"></progress>
33 </body>
34 </html>

執行效果：

二、自定義屬性

1、關鍵字：（‘data-id’，key）；

this是當前點選物件 ，他有一個dataset屬性， dataset是去掉data-之後的值
當網頁超連結多了之後 ，將分組標籤寫data屬性 ，指向分組列表每一項的超連結資料來源。
   var data = {
      小米note2：小米note2的超連結，
      小米note：小米note的超連結，
      小米5：小米5的超連結，
     小米5s：小米5s的超連結，
   }
    data-links 
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>data屬性</title>
 6 </head>
 7 <body>
 8     <ul id="list">
 9         <!--<li data-age="18">zhangsan</li>-->
10         <!--通過DOM儲存與DOM物件強相關的資料-->
11         <li data-id="1" data-age="18" data-gender="true">zhangsan</li>
12         <li data-id="2" data-age="18" data-gender="false">zhangsan</li>
13         <li data-id="3" data-age="18" data-gender="true">zhangsan</li>
14     </ul>
15     <div id="info"></div>
16 </body>
17 </html>
18 <script>
19     var data={01:{name:"張安",age:18},
20         02:{name:"張安",age:18},
21         03:{name:"張安",age:19},
22         04:{name:"張安",age:20},
23         05:{name:"張安",age:21},
24         06:{name:"張安",age:22},
25         07:{name:"張安",age:23},
26         08:{name:"張安",age:24},
27         09:{name:"張安",age:25},
28         10:{name:"張安",age:26}};
29     //jQuery操作一定要做變數本地化
30     var list=document.getElementById(`li`);
31     for(var id in data){
32         var item=data[id];
33         var liElement=document.createElement("li");
34         //liElement.innerHTML=item.name;
35         liElement.appendChild(document.createTextNode(item.name));
36         liElement.setAttribute(`data-age`,item.age);
37         liElement.setAttribute(`data-id`,item.id);
38         list.appendChild(liElement);//變數本地化
39 
40         liElement.addEventListener(`click`,function(){
41             //alert(this.name);
42             //alert(this.innerHTML);
43             alert(this.getAttribute(`data-age`));
44             console.log(this.dataset[`age`]);
45         });
46     }
47 </script>

 三、連線關係

<!–控制翻頁 比如看小說的網站有上一頁下一頁翻頁的按鈕 如果是左箭頭← 右箭頭→ 網頁閱讀裝置就可能識別不出來 在rel裡面加上prev屬性說明 這個連結連結到的是上一頁–>
（1）<a href=”” rel=”prev“>上一頁</a> <a href=””>下一頁</a>
<a href=”” rel=”next“>→</a>
 
（2）<link rel=”stylesheet” href=”style.css”><!–stylesheet 文件的外部樣式表–>
<link rel=”alternate”  type=”application/rss+xml” href=”http://myblog.com/feed”>   <!–alternate  文件的可選版本（例如列印頁、翻譯頁或映象）–>
<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>  <!–licence    一般用於文獻，表示許可證的含義–>
<a rel=”nofollow” href=”http://notmysite.com/sample”>wannabe</a>   <!--nofollow   用於指定 Google 搜尋引擎不要跟蹤連結–>
<a rel=”tag“ href=”http://myblog.com/category/games”>games posts</a>    <!–tag    標籤集合–>
《———————–其他——————————–》
<!–start  集合中的第一個文件–>
 <!–next   集合中的下一個文件–> 
<!–prev   集合中的前一個文件–> 
<!–contents   文件目錄–> 
<!–index  文件索引–> 
<!–glossary   文件中所用字詞的術語表或解釋–>
 <!–copyright  包含版權資訊的文件–>
 <!–chapter    文件的章–> 
<!–section    文件的節–> 
<!–subsection 文件的子段–>
 <!–appendix   文件附錄–> 
<!–help   幫助文件–>
<!–bookmark   相關文件–>
<!–friend 友情連結–>

四、結構資料標記（方便網路爬蟲解析）

<div itemscope itemtype=”http://example.com/hello”>
    <p>我叫<span itemprop=”主人”>老王</span>。</p>
    <p>
        我養了一條叫
        <span itemprop=”狗名”>旺財</span>的
        <span itemprop=”品種”>金毛</span>犬。
    </p> </div>
<label for=”text”>請輸入：<input id=”text” type=”text” ></label>
<label>請輸入： <input type=”text” >
</label>

五、新增監聽

關鍵字：addEventListener(防止方法之間的覆蓋)
書寫格式：
xiao.addEventListener(`click`,function () {
    da.style.backgroundColor = `yellow`;
});

六、before  after（偽元素）

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         .hezi::before {
 6             content: `我是p標籤之前的內容`;
 7         }
 8         .hezi::after {
 9             content: `我是p標籤之後的內容`;
10         }
11     </style>
12 </head>
13 <body>
14 <div class="hezi">
15  
16     <p>我是p1標籤</p>
17     <p>我是p2標籤</p>
18  
19 </div>

七、陣列字典

 1 //    陣列
 2     var array = ["張三","李四","王五"];
 3 //    陣列通過下標取元素
 4     var first = array[0];
 5 //    取陣列中所有元素用for迴圈
 6     for (var i = 0;i < array.length;i++){
 7 //        i是從 0 到 array.length
 8         console.log(array[i]);
 9     }
10     for (var id in array){
11 //        在陣列中id是陣列的下標
12         console.log(array[id]);
13     }
14   for (var id in array){
15 //        在陣列中id是陣列的下標
16         console.log(array[id]);
17     }
18 //    字典 key:value
19 //    var dict = {101:"張1",102:"張2",103:"張3"};
20     var dict = {101:array,102:"張2",103:"張3"};
21 //取值用字典[key值]
22 //    console.log(dict[101]);
23 //這個key就是dict的每一個key值
24     for (var key in dict){
25         console.log(key);
26 //        item就是key對應的值
27         var item = dict[key];
28         console.log(item);
29     }

八、智慧表單

 1 <!--text password radio checkbox select -->
 2 <form action="">
 3     <!--required 必填項 不填的話提示需要填寫-->
 4 <input type="text" required>
 5     <!--郵箱-->
 6 <input type="email" value="some@email.com">
 7     <!--日期選擇器 -->
 8 <input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14">
 9 <!--範圍選擇 step是移動一下value變化的數值-->
10 <input type="range" min="0" max="50" value="10" step="10">
11 <input type="search" results="10" placeholder="Search...">
12     <!--正規表示式-->
13 <input type="tel" placeholder="(555) 555-5555"
14       pattern="^(?d{3})?[-s]d{3}[-s]d{4}.*?$">
15 <input type="color" placeholder="e.g. #bbbbbb">
16 <input type="number" step="1" min="-5" max="10" value="0">
17     <input type="submit">
18 </form>

九、音樂

（1）<!–controls顯示因音樂播放器的控制檯 autoplay自動播放–>
1 <audio id="player" src="olddriver.mp3" controls autoplay></audio>
2 <button id="play">播放</button>
3 <button id="pause">暫停</button>
4 <script>

十、視訊

（1）
<!–<video src=”movie.mp4″ autoplay controls></video>–-> 
<!–source  標籤播放資料來源 當瀏覽器不識別格式的時候自動找下一個source–> 
<!–poster  視訊播放器海報–> 
<!– 屬性介紹：autoplay:自動播放； controls:顯示播放控制元件；  loop:迴圈播放； preload:預載入；–>
 1 <!--以下僅作了解！！！！-->
 2 <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">
 3     <param name="allowFullScreen" value="true">
 4     <param name="allowscriptaccess" value="always">
 5     <param name="allowFullScreenInteractive" value="true">
 6     <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">
 7     <param name="movie" value="http://static.youku.com/v1.0.0557/v/swf/loader.swf">
 8     <div class="player_html5">
 9         <div class="picture" style="height:100%">
10             <div style="line-height:460px;"><span style="font-size:18px">您還沒有安裝flash播放器,請點選<a href="http://www.adobe.com/go/getflash" target="_blank">這裡</a>安裝</span></div>
11         </div>
12     </div>
13 </object>

十一、字幕

<!–track標籤是字幕–>
1 <video src="movie.mp4" controls>
2     <track src="zimu.vtt" srclang="cn" kind="subtitles" label="Chinese">
3 </video>

十二、svg

1 <!--這三種顯示方式缺點:不可控-->
2     <!--第一種方式-->
3     <embed src="famoustiger.svg" type="">
4     <!--第二種方式-->
5         <object data="famoustiger.svg" type=""></object>
6     <!--第三種方式-->
7         <iframe src="famoustiger.svg" frameborder="0"></iframe>

 


相關文章