码迷,mamicode.com
首页 > Web开发 > 详细

html5 input标签、details标签、mark标签以及进度条标签的使用

时间:2016-04-23 11:50:03      阅读:1215      评论:0      收藏:0      [点我收藏+]

标签:

最近在自学html5的相关知识,平生第一次写博客,这次主要记录input标签与datalist标签的结合、details标签、mark标签以及进度条标签的使用。

一、input标签和detail标签的配合使用


    1、基本语法

   

<input type="text" list="vallist"/>
   <datalist id="vallist">
      <option value="c++">c++</option>
      <option value="c#">c#</option>
      <option value="java">java</option>
   </datalist>

 

   

2.效果

技术分享技术分享技术分享

值得注意的是input中的list属性值必须与datalist的id保持一致

二、details标签

      1.基本语法

<details>
   <summary>英语</summary>
   <p>全球通用语言</p>
 </details>

 

     2.效果:

       技术分享技术分享

 

     值得注意的是details标签的open属性可以使内容直接显示

<details open="open">
   <summary >英语</summary>
   <p>全球通用语言</p>
 </details>

 

    效果

             技术分享

三、mark标签

      1.基本语法:

<mark>标记</mark>

 

      2.效果

         技术分享

      mark标签使用简单,使文字达到高亮的效果。

四、进度条标签progress

      1.基本语法:

 <progress max="100" value="30"/>

 

       2.效果:

            技术分享

      值得注意的是:max指的是进度条的最大值,value指的是当前进度值。

 

html5 input标签、details标签、mark标签以及进度条标签的使用

标签:

原文地址:http://www.cnblogs.com/Dingzy/p/5424206.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!