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指的是当前进度值。