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

最近在自学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指的是当前进度值。