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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq814965130/article/details/78639825

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:导航链接

阅读更多
换一批

没有更多推荐了,返回首页