日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
10個好用的 HTML5 特性

       [[345137]]

成都創(chuàng)新互聯(lián)專注于東昌網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供東昌營銷型網(wǎng)站建設(shè)，東昌網(wǎng)站制作、東昌網(wǎng)頁設(shè)計、東昌網(wǎng)站官網(wǎng)定制、微信小程序定制開發(fā)服務(wù)，打造東昌網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供東昌網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

detais 標簽

標簽向用戶提供按需查看詳細信息的效果。如果需要按需向用戶顯示內(nèi)容，簡單的做法就是使用此
標簽。默認情況下，它是收起來的，打開后，它將展開并顯示被隱藏的內(nèi)容。

事例：

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.   Click Here to get the user details 
    3.   
  
  
  
  3.    
  4.     
    5.  
  5.       
    6.  
  6.       
    7.  
  7.       
    8.  
  8.       
    9.  
  9.     
    10.  
  10.     
    11.  
  11.       
    12.  
  12.       
    13.  
  13.       
    14.  
  14.       
    15.  
  15.     
    16.  
  16.   
    17.   
  
  
  
      
  
  
  #  
  
  
  Name  
  
  
  Location  
  
  
  Job  
  
  
  
      
  
  
  
      
  
  
  1  
  
  
  Adam  
  
  
  Huston  
  
  
  UI/UX  
  
  
  
      
  
  
  
     
    17.
 

運行結(jié)果：

技巧
在 GitHub Readme 中使用它來顯示按需的詳細信息。這是一個示例https://github.com/atapas/notifyme#properties

內(nèi)容可編輯
contenteditable是可以在元素上設(shè)置以使內(nèi)容可編輯的屬性。它適用于DIV，P，UL等元素。

注意，當(dāng)在元素上沒有設(shè)置contenteditable屬性時，它將從其父元素繼承該屬性。

 
 
 
 
      
  
  
  
  1.  Shoppping List(Content Editable) 
     
    2.   
  
  
  
  2.   
    3.   
  
  
  
  3.      
  4.  1. Milk 
    5.    
  
  
  
  5.      
  6.  2. Bread 
    7.    
  
  
  
  7.      
  8.  3. Honey 
    9.    
  
  
  
  9.  
    10.

運行結(jié)果：

技巧
可以讓span或div標簽可編輯，并且可以使用css樣式向其添加任何豐富的內(nèi)容。這將比使用輸入字段處理它更好。試試看！

Map
HTML 屬性 與 屬性一起使用來定義一個圖像映射(一個可點擊的鏈接區(qū)域)。可點擊的區(qū)域可以是這些形狀中的任何一個，矩形，圓形或多邊形區(qū)域。如果不指定任何形狀，則會考慮整個圖像。

事例：

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.      
    3.   
  
  
  
  3.      
    4.   
  
  
  
  4.          
    5.   
  
  
  
  5.          
    6.   
  
  
  
  6.          
    7.   
  
  
  
  7.          
    8.   
  
  
  
  8.          
    9.   
  
  
  
  9.      
    10.   
  
  
  
  10.  
 

運行結(jié)果：

技巧
map有其自身的缺點，但是你可以將其用于視覺演示。

mark 標簽

 
 
 
 
      
  
  
  
  1.  Did you know, you can "Highlight something interesting" just with an HTML tag? 
     
    2.

運行結(jié)果：

 
 
 
 
      
  
  
  
  1. mark { 
    2.   
  
  
  
  2.   background-color: green; 
    3.   
  
  
  
  3.   color: #FFFFFF; 
    4.   
  
  
  
  4. } 
    5.

data-* 屬性
data-*屬性用于存儲頁面或應(yīng)用程序?qū)Ｓ玫淖远x數(shù)據(jù)。可以在 JavaScript 代碼中使用存儲的數(shù)據(jù)來創(chuàng)建更多的用戶體驗。

data-*屬性由兩部分組成

  • 屬性名不能包含任何大寫字母，并且必須在前綴“data-”之后至少有一個字符
  • 屬性值可以是任何字符串

事例：

 
 
 
 
      
  
  
  
  1.  Know data attribute 
     
    2.   
  
  
  
  2.    
  
  
  
  3.        class="data-attribute"  
    4.   
  
  
  
  4.        id="data-attr"  
    5.   
  
  
  
  5.        data-custom-attr="You are just Awesome!">  
    6.   
  
  
  
  6.    I have a hidden secret!  
 
  •  Reveal 

    • 在 JS 中：

     
 
 
 
        
  
  
  
    1. function reveal() { 
      2.   
  
  
  
    2.    let dataDiv = document.getElementById('data-attr'); 
      3.   
  
  
  
    3.     let value = dataDiv.dataset['customAttr']; 
      4.   
  
  
  
    4.    document.getElementById('msg').innerHTML = `${value}`; 
      5.   
  
  
  
    5. } 
      6.

    **注意：**要在 JS 中讀取這些屬性的值，可以通過getAttribute('data-custom-attr')g來獲取，但是標準方式是用dataset來獲取。

    技巧
    你可以使用它在頁面中存儲一些數(shù)據(jù)，然后使用REST調(diào)用將其傳遞給服務(wù)器。

    output 標簽
    標簽表示計算或用戶操作的結(jié)果。

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.     
      3.   
  
  
  
    3.           *  
      4.   
  
  
  
    4.                 =  
      5.   
  
  
  
    5.  
      6.

    技巧
    如果要在客戶端 JS 中執(zhí)行任何計算，并且希望結(jié)果反映在頁面上，可以使用,這樣就無需使用getElementById()獲取元素的額外步驟。

    datalist
    元素包含了一組

    事例：

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.     Choose your fruit from the list: 
      3.   
  
  
  
    3.      
      4.   
  
  
  
    4.          
      5.   
  
  
  
    5.             
      6.   
  
  
  
    6.             
      7.   
  
  
  
    7.             
      8.   
  
  
  
    8.             
      9.   
  
  
  
    9.             
      10.   
  
  
  
    10.          
      11.   
  
  
  
    11.       
      12.   
  
  
  
    12.     
      13.

    技巧
    dataList的表現(xiàn)很像是一個select下拉列表，但它只是提示作用，并不限制用戶在input輸入框里輸入什么

    select標簽創(chuàng)建了一個菜單。菜單里的選項通option標簽指定。一個select元素內(nèi)部，必須包含一個option元素，

    總的來說就是，它們都可以顯示出一個下拉表單框，但是select標簽只能在它提供的選項中選擇，而datalist不僅可以讓你選擇，還可以讓你自己輸入其它的選項。

    Range(Slider)
    range是一種 input 類型，給定一個滑塊類型的范圍選擇器。

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.       
  
  
  
    3.          type="range"  
      4.   
  
  
  
    4.          name="range"  
      5.   
  
  
  
    5.          min="0"  
      6.   
  
  
  
    6.          max="100"  
      7.   
  
  
  
    7.          step="1"  
      8.   
  
  
  
    8.          value="" 
      9.   
  
  
  
    9.          onchange="changeValue(event)"/> 
      10.   
  
  
  
    10.   
      11.   
  
  
  
    11.   
      12.   
  
  
  
    12.          
      13.   
  
  
  
    13.  
     

    meter
    元素用來顯示已知范圍的標量值或者分數(shù)值。

     
 
 
 
        
  
  
  
    1. /home/atapas 
      2.   
  
  
  
    2. 2 out of 10
       
      3.   
  
  
  
    3. /root 
      4.   
  
  
  
    4. 60%
       
      5.

    技巧
    不要將用作進度條來使用，進度條對應(yīng)的 標簽。

     
 
 
 
        
  
  
  
    1. Downloading progress: 
      2.   
  
  
  
    2.  32%  
      3.

    Inputs
    對于input標簽類型，最常見的有 text，password 等等，下面列舉一些比較少見的語法。

    required
    要求輸入字段必填。

     
 
 
 
        
  
  
  
    1.  
      2.

    autofocus
    文本輸入字段被設(shè)置為當(dāng)頁面加載時獲得焦點：

     
 
 
 
        
  
  
  
    1.  
      2.

    用正則表達式驗證
    可以使用regex指定一個模式來驗證輸入。

     
 
 
 
        
  
  
  
    1.   
  
  
  
    2.             name="password"  
      3.   
  
  
  
    3.             id="password"  
      4.   
  
  
  
    4.             placeholder="6-20 chars, at least 1 digit, 1 uppercase and one lowercase letter"  
      5.   
  
  
  
    5.             pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$" autofocus required> 
      6.

    Color picker
    一個簡單的顏色選擇器。

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2. Color Me!
       
      3.

    網(wǎng)站題目：10個好用的 HTML5 特性
    文章網(wǎng)址：http://www.dlmjj.cn/article/ccdioog.html