135-1821-9792

10个好用的 HTML5 特性

       [[345137]]

成都创新互联专注于东昌网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供东昌营销型网站建设，东昌网站制作、东昌网页设计、东昌网站官网定制、微信小程序定制开发服务，打造东昌网络公司原创品牌,更为您提供东昌网站排名全网营销落地服务。

detais 标签

标签向用户提供按需查看详细信息的效果。如果需要按需向用户显示内容，简单的做法就是使用此
标签。默认情况下，它是收起来的，打开后，它将展开并显示被隐藏的内容。

事例：

 
 
 
 
      
  
  
  
  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.
 

运行结果：

技巧
在 GitHub Readme 中使用它来显示按需的详细信息。这是一个示例https://github.com/atapas/notifyme#properties

内容可编辑
contenteditable是可以在元素上设置以使内容可编辑的属性。它适用于DIV，P，UL等元素。

注意，当在元素上没有设置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.

运行结果：

技巧
可以让span或div标签可编辑，并且可以使用css样式向其添加任何丰富的内容。这将比使用输入字段处理它更好。试试看！

Map
HTML 属性 与 属性一起使用来定义一个图像映射(一个可点击的链接区域)。可点击的区域可以是这些形状中的任何一个，矩形，圆形或多边形区域。如果不指定任何形状，则会考虑整个图像。

事例：

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

运行结果：

技巧
map有其自身的缺点，但是你可以将其用于视觉演示。

mark 标签

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

运行结果：

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

data-* 属性
data-*属性用于存储页面或应用程序专用的自定义数据。可以在 JavaScript 代码中使用存储的数据来创建更多的用户体验。

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来获取。

    技巧
    你可以使用它在页面中存储一些数据，然后使用REST调用将其传递给服务器。

    output 标签
    标签表示计算或用户操作的结果。

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

    技巧
    如果要在客户端 JS 中执行任何计算，并且希望结果反映在页面上，可以使用,这样就无需使用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的表现很像是一个select下拉列表，但它只是提示作用，并不限制用户在input输入框里输入什么

    select标签创建了一个菜单。菜单里的选项通option标签指定。一个select元素内部，必须包含一个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
    元素用来显示已知范围的标量值或者分数值。

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

    技巧
    不要将用作进度条来使用，进度条对应的 标签。

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

    Inputs
    对于input标签类型，最常见的有 text，password 等等，下面列举一些比较少见的语法。

    required
    要求输入字段必填。

     
 
 
 
        
  
  
  
    1.  
      2.

    autofocus
    文本输入字段被设置为当页面加载时获得焦点：

     
 
 
 
        
  
  
  
    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.

    分享题目：10个好用的 HTML5 特性
    本文URL：http://www.wtcwzsj.com/article/ccdioog.html

    其他资讯

    
    关于我们
    我们的服务
    网站建设案例
    新闻动态
    联系我们

    135-1821-9792

    公司服务热线
    友情链接： 成都重型叉车维修   成都高压配电柜安装   平昌保洁   服务器托管机房   成都电商网站建设方案   宝兴维修发电机   四川绵阳主机托管   成都汽车配件公司   成都企业网站制作   四川发电机租赁   

    Copyright © 2009-2022 www.wtcwzsj.com 青羊区广皓图文设计工作室（个体工商户） 版权所有　蜀ICP备19037934号