从零开始学习前端开发 — 10、HTML5新标签及表单控件属性和属性值
一、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新标签及表单控件属性和属性值的更多相关文章
- 前端 HTML body标签相关内容 常用标签 表单标签 form 表单控件分类
表单控件分类 input标签: input标签 type属性的text,password,button按钮,submit按钮 input标签placeholder属性 标签上显示内容 input标签 ...
- 认识HTML中表格、列表标签以及表单控件
前端之HTML,CSS(二) HTML标签 列表标签 无序列表:闭标签,由<ul><li></li>...</ul>组合而成,效果成纵向列表.格式:&l ...
- 从零开始学习前端开发 — 1、HTML基础
一.web标准 web标准-网页制作的标准,它是由一系列标准组成的,主要包含三个方面:结构(html,xhtml),表现(css),行为(javascript) 注:结构和表现的标准由w3c(万维网联 ...
- 第九课 表单及表单控件 html5学习4
表单有由表单域.提示文本.表单3部分构成 一.表单控件 input 控件 1.<input />单标签2.input属性: 可以通过type属性变换形状 value默认值 name名称 c ...
- 基于CkEditor实现.net在线开发之路(3)常用From表单控件介绍与说明
上一章已经简单介绍了CKEditor控件可以编写C#代码,然后可以通过ajax去调用,但是要在网页上面编写所有C#后台逻辑,肯定痛苦死了,不说实现复杂的逻辑,就算实现一个简单增删改查,都会让人头痛欲裂 ...
- HTML5(常用的表单控件)
常用的HTML5的表单控件: Input 类型: color color 类型用在input字段主要用于选取颜色,如下所示: 从拾色器中选择一个颜色: 选择你喜欢的颜色: <input type ...
- Vue.js学习笔记——表单控件实践
最近项目中使用了vue替代繁琐的jquery处理dom的数据更新,个人非常喜欢,所以就上官网小小地实践了一把. 以下为表单控件的实践,代码敬上,直接新建html文件,粘贴复制即可看到效果~ <! ...
- Vue.js学习笔记 第七篇 表单控件绑定
本篇主要说明表单控件的数据绑定,这次没有新的知识点 文本框 1.普通文本框 <div id="app-1"> <p><input v-model=&q ...
- HTML5 FormData 模拟表单控件 支持异步上传二进制文件 移动端
FormData是XMLHttpRequest Level 2添加的一个新的接口,利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,还可以使用XMLHttpR ...
随机推荐
- C# 命名空间和程序集
一.命名空间 1.通过使用using关键字引入命名空间,减少代码量 命名空间对相关的类型进行逻辑分组,通过命名空间能快速的定位到相关的类型,例如:在System.IO命名空间下,定义了所有I/O操作的 ...
- input同步标签内容——函数
html部分: <h3 class="font18" id="tit1">微蜂传媒电子商务有限公司</h3> <span clas ...
- dubbo源码—service export
在应用编写好服务并进行之后,dubbo负责将服务export出去,dubbo export服务的时候主要做了以下几件事: 将服务export到本地(根据scope的配置) 创建Invoker(启动本地 ...
- Tempdb总结
Tempdb 系统数据库是一个全局资源,可供连接到 SQL Server 实例的所有用户使用,并可用于保存下列各项: 显式创建的临时用户对象,例如全局或局部临时表.临时存储过程.表变量或游标. SQL ...
- mysql commit 和 rollback
转自:http://blog.csdn.net/ying_593254979/article/details/12134629 SQL 语言类型 从功能上划分,SQL 语言可以分为DDL,DML和DC ...
- ping、traceroute原理
说明:忘记从哪里拉的博文了,感谢! ping 用类型码为0的ICMP发请 求,受到请求的主机则用类型码为8的ICMP回应. ping程序来计算间隔时间,并计算有多少个包被送达.用户就可以判断网络大致的 ...
- ssh整合开发
ssh整合思想 ssh整合 第一步:导入ssh相关jar包 第二步:搭建struts环境 (1)创建 action struts.xml配置文件, 配置action struts.xml约束 & ...
- mysql启动日志文件log_bin
今天正在无所事事的时候,突然收到需要我打开mysql的log_bin,当时我就懵逼了...不多说别的,我连这个log_bin在哪里,怎么知道是否启动了都不知道,怎么去做? 在万分纠结下,查询了很多资料 ...
- Python 学习笔记大纲
Python Basic 第一章:Python基础の快速认识基本语法 (点击进入博客)我的第一个HelloPython程序.如何实现用户输入.Python的自带电池(模块).变量.格式化.条件判断.循 ...
- C++\virtual 虚函数、纯虚函数
前提摘要: 虚函数联系到多态,多态联系到继承.所以本文中都是在继承层次上做文章.没了继承,什么都没得谈. 虚函数定义: 指向基类的指针或引用在操作它的多态类(子类/派生类)对象时,会根据不同的类对象, ...