一、html5新增标签

1.结构性标签

header 定义网页的头部

nav 定义网页的导航

footer 定义网页的底部

section 定义网页的某个区域

article 定义网页中的一篇文章

aside 定义网页的侧边栏

hgroup 将网页某个区域的标题进行组合

figure 将网页中的元素进行组合

figcaption 定义figure的标题

dialog 定义一个对话框

2.定义带有记号的文本语法: <mark>带有记号的文本</mark>

3.定义一定范围内的标量或测量语法:<meter min="0" max="100" value="10"></meter>

4.定义一定范围内的进度或进程语法:<progress min="0" max="100" value="1"></progress>

5.音频语法:

<audio controls autoplay loop>
<source src="1.mp3" type="audio/mp3"/>
...
Your browser does not support the element
</audio>

注:

a)controls 添加一个音频控制条

b) autoplay 设置自动播放

c) loop 设置循环播放

d) src 引入音频文件

注:常见的音频格式:mp3,wav,ogg

6.视频语法:

<video controls width="500" height="300" autoplay loop poster="1.jpg">
<source src="1.mp4" type="video/mp4"/>
...
Your browser does not support the element
</video>

注:

a) width 定义视频区域的宽度

b) height 定义视频区域的高度

c) poster 在播放前或快进时显示的一张图片

d) controls,autoplay,loop,src同audio中的这些属性

注:常见的视频格式:mp4,webm,ogg


二、h5表单新增type属性值

1.type="email"  限制用户输入必须为邮箱(必须含有@,并且@前后内容不能为空)

2.type="url"    限制用户输入必须为网址(必须含有http:)

3.type="number" 限制用户输入必须为数字

eg: <input type="number" value="1" min="1" max="10" step="2"/>

注:step用来设置每次递增和递减的数量,默认为1

4.type="range"  产生一个滑动条的效果

5.type="color"  产生一个颜色选择面板

6.type="date"  产生一个选择日期的面板(年/月/日)

7.type="time"  选择时间(时:分)

8.type="month"  选择年月

9.type="week"  选择某一日期是这一年的第几周


三、h5新增表单新属性

1.required限制用户输入不能为空,必填

eg: <input type="text" required/>

2.placeholder给input控件添加一个默认提示信息

3.autofocus页面加载完成后自动聚焦到某一个input控件

4.pattern限制用户输入的内容要匹配相应的正则表达式

eg: <input type="text" pattern="[a-zA-Z0-9]{6,16}"/>

5.min/max 限制输入的最大,最小值

eg: <input type="number" min="1" max="10"/>

6.step设置number类型和range类型每次递增递减的值

7.产生一个具有搜索意义的表单

a) type="search" 具有搜索意义的input控件

b) list 关联一个datalist的下拉提示单

c) datalist 数据列表下拉菜单

eg: <input type="search" list="data"/>

<datalist id="data">
<option>aaa</option>
<option>bbb</option>
...
</datalist>

注:type为search的input框的list属性值必须和datalist标签的id名一致才能实现搜索的功能

8.novalidate取消表单验证

eg: <form novalidate="novalidate">...</form>

从零开始学习前端开发 — 10、HTML5新标签及表单控件属性和属性值的更多相关文章

  1. 前端 HTML body标签相关内容 常用标签 表单标签 form 表单控件分类

    表单控件分类 input标签: input标签 type属性的text,password,button按钮,submit按钮 input标签placeholder属性 标签上显示内容 input标签 ...

  2. 认识HTML中表格、列表标签以及表单控件

    前端之HTML,CSS(二) HTML标签 列表标签 无序列表:闭标签,由<ul><li></li>...</ul>组合而成,效果成纵向列表.格式:&l ...

  3. 从零开始学习前端开发 — 1、HTML基础

    一.web标准 web标准-网页制作的标准,它是由一系列标准组成的,主要包含三个方面:结构(html,xhtml),表现(css),行为(javascript) 注:结构和表现的标准由w3c(万维网联 ...

  4. 第九课 表单及表单控件 html5学习4

    表单有由表单域.提示文本.表单3部分构成 一.表单控件 input 控件 1.<input />单标签2.input属性: 可以通过type属性变换形状 value默认值 name名称 c ...

  5. 基于CkEditor实现.net在线开发之路(3)常用From表单控件介绍与说明

    上一章已经简单介绍了CKEditor控件可以编写C#代码,然后可以通过ajax去调用,但是要在网页上面编写所有C#后台逻辑,肯定痛苦死了,不说实现复杂的逻辑,就算实现一个简单增删改查,都会让人头痛欲裂 ...

  6. HTML5(常用的表单控件)

    常用的HTML5的表单控件: Input 类型: color color 类型用在input字段主要用于选取颜色,如下所示: 从拾色器中选择一个颜色: 选择你喜欢的颜色: <input type ...

  7. Vue.js学习笔记——表单控件实践

    最近项目中使用了vue替代繁琐的jquery处理dom的数据更新,个人非常喜欢,所以就上官网小小地实践了一把. 以下为表单控件的实践,代码敬上,直接新建html文件,粘贴复制即可看到效果~ <! ...

  8. Vue.js学习笔记 第七篇 表单控件绑定

    本篇主要说明表单控件的数据绑定,这次没有新的知识点 文本框 1.普通文本框 <div id="app-1"> <p><input v-model=&q ...

  9. HTML5 FormData 模拟表单控件 支持异步上传二进制文件 移动端

    FormData是XMLHttpRequest Level 2添加的一个新的接口,利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,还可以使用XMLHttpR ...

随机推荐

  1. TDD学习笔记【三】---是否需针对非public方法进行测试?

    前言 在Visual Studio 2012 中,针对Unit Test 的部分,有一个重要的变动: 原本针对「测试对象非public 的部分」,开发人员可通过Visual Studio 2010 自 ...

  2. 模块:js实现一个倒计时功能

    1.给显示内容加样式 <style> #p1{font-size: large; color: red;} </style> 2.客户端页面 <div id=" ...

  3. nginx日志轮巡切割

    通过编辑脚本的方式来实现日志每日以及每天的切割纪录.可以通过计划任务的方式实现每天执行脚本,具体情况需要更加实际情况 vim /root/cut_nginx_log.sh #!bin/sh Datef ...

  4. CloseHandle(IntPtr handle)抛异常

    [DllImport("Kernel32.dll", CharSet = CharSet.Auto, SetLastError = true)] public static ext ...

  5. [题解+总结]NOI2015

    // 此博文为迁移而来,写于2015年7月20日,不代表本人现在的观点与看法.原始地址:http://blog.sina.com.cn/s/blog_6022c4720102w6u7.html 1.总 ...

  6. asp.net分割字符串的几种方法

    在编写程序中,经常要用到分割的方法来处理一些字符串.这里总结了几种常用的分割方法:  1.最简单最常用的方法,以一个指定的字符进行的分割 string s="abcdeabcdeabcde& ...

  7. EXTJS 4.2 资料 控件之 Store 用法

    最近工作,发现在Extjs中自定义Store的功能挺多,特意在此做笔记,几下来,具体代码如下: 1.定义Store //定义Store var ItemSelectorStore = new Ext. ...

  8. iOS CAShapeLayer精讲

    前言 CAShapeLayer继承自CALayer,因此,可使用CALayer的所有属性.但是,CAShapeLayer需要和贝塞尔曲线配合使用才有意义. 关于UIBezierPath,请阅读文章:i ...

  9. Richard Stallman与洪峰谈黑客道培训实录_业界_科技时代_新浪网

    Richard Stallman与洪峰谈黑客道培训实录_业界_科技时代_新浪网 Richard Stallman与洪峰谈黑客道培训实录

  10. DNN个性化推荐模型

      0 推荐技术      1)协同过滤:                (1)基于user的协同过滤:根据历史日志中用户年龄,性别,行为,偏好等特征计算user之间的相似度,根据相似user对ite ...