WEB前端 -- input类型、fieldset、HTML5新标签

1.fieldset：将表单中的相关元素进行分组，生成一组相关表单的字段

<form action="">   <fieldset>    <legend>学生信息</legend>        姓名：<input type="text" name="xm" placeholder="请输入用户名"/><br/><!-- name：需要提交到后台时需要设置 -->        性别：        <label for="boy">男</label>        <input type="radio" id="boy" name="gender"/>        <label for="girl">女</label>        <input type="radio" id="girl" name="gender"/>        <br />        <input  type="submit" value="提交"/><!-- value：设置按钮的名称，这样可以不用担心因浏览器的不同按钮显示值不一样 -->        <input  type="reset" value="重置"/>    </fieldset></form>

2.input类型

请选择数字：<input type="number" min="6" max="10" value="7"/><br />

改变值：<input type="range" min="0" max="200" value="100"/><!--value：默认到的值--><br />
颜色：<input type="color"/><br />
日期：<input type="date"/><br />

搜索：<input type="search"/>

3.HTML5部分新标签

1）progress：进度标签 value：当前值，max：最大值，min：默认为0

2）section：文档中的节或章（一般与div作用一样，用于布局）

3）video：支持视频

4）audio：支持音频

5）source：资源

6）datalist：提示可能的值，与select写法不一样，datalist需要显示的内容写在option的value属性中

     和input一起使用，list="datalist的id"

<input list="tools" /><datalist id="tools">          <option value="tools1"></option>          <option value="tools2"></option>          <option value="tools3"></option></datalist>

7）embed：引入Flash或插件

8）canvas：画布标签，默认300px*150px

9）header

10）footer

11）aside：定义页面的侧边栏内容，不会对页面的样式有修改，只有更有语义

12）article：定义页面的独立的内容区域，一般为文章

13）details：文档某个地方的细节

14）summary：details中的标题

15）time：定义日期或时间，datetime="2017-12-24"

16）ruby：2个子元素。rt：音标和rp：不支持时显示

17）mark：标记

18）nav：导航链接