html5下拉智能,HTML5新增标签 + 智能表单
一.HTML5的新增语义标签
1. 全新语义化标签
:用来定义文档或应用程序中的区域或章节.
:用来定义文档的主导航区域,其中的链接指向其他页面或当前页面的某些区域.
用来包裹独立的内容片段,通常用来包裹文档中文章.
:用来表示与页面主内容松散相关的内容,常被用来用作侧边栏的部分.
:如果页面中有一组使用
,
,
等标签的标题,标语和副标题, 则可以使用该标签进行包裹.HTML5的大纲结构算法会自动组织好大纲.
:被用作网页的页眉部分
:被用作网页的页脚部分
2.语义化标签的兼容性问题
在IE低版本浏览器中,无法识别HTML5的新增标签,所以使用HTML5进行的页面布局会全部无效.这里推荐使用Modernizr来解决兼容性问题
Modernizr是一个用于检测浏览器功能的开源JavaScript库.包括Twitter,微软和谷歌都在使用Modernizr作为兼容性的解决方案.
2.2 引用Modernizr
Modernizr作为一个JavaScript的库,引用方式和jQuery一样,都是在
2.3针对IE低版本浏览器增加垫片脚本
因为我们在高版本浏览器中并不需要使用Modernizr进行兼容性方案的解决,所以,我们只需要针对IE8以下浏览器引用上述的js文件,代码如下:
二.HTML5中的多媒体
1. 多媒体标签
1.1
HTML 标签用于在HTML文档中嵌入视频文件.
1.2
HTML 标签用于在HTML文档中嵌入音频文件.
1.3 文件格式的兼容性问题
由于专利的问题,不同的浏览器对HTML5的video和audio有不同的规范和实现;所以,多媒体的文件格式的不同会在不同浏览器中出现兼容性问题.通常使用元素来解决.
1.3.1 的兼容性解决方案
1.3.2 的兼容性解决方案
2. 多媒体常用属性
1.autoplay
布尔属性;指定后,视频会马上自动开始播放,不会停下来等着数据载入结束.
2.control
加上这个属性,Gecko 会提供用户控制,允许用户控制视频的播放,包括音量,跨帧,暂停/恢复播放.
3.loop
布尔属性;指定后,会在视频结尾的地方,自动返回视频开始的地方.
4.muted
布尔属性,指明了视频里的音频的默认设置。设置后,音频会初始化为静音。默认值是false,意味着视频播放的时候音频也会播放.
5.src
要嵌到页面的视频的URL。可选;你也可以使用 元素来指定需要嵌到页面的文件。
三.HTML5中的智能表单
1. 表单新增输入类型
type="email":指定用户输入符合电子邮箱格式的值,如果提交一个不符合电子邮箱格式的值是,浏览器会生成警告信息.
type="number":指定用户输入数字类型的值.
type="tel": 对格式没有要求,只是在针对移动端上,对点击后跳出数字键盘.
type="color":在支持该特性的浏览器中生成一个颜色选择器,让用户可以选择十六进制的颜色值
type="date:在支持该特性的浏览器中生成一个日期选择器.
type="month:在支持该特性的浏览器中生成一个月份选择器.
type="week:在支持该特性的浏览器中生成一个选择器,选择器允许用户选择一年中的某一周.
type="time:允许用户输入一个24小时制的时间值,在支持该特性的浏览器中会生成一个加减控制按钮.
type="range和:生成一个滑动条,默认的输入范围是0到100.
2. 表单新增属性
placeholder: 在表单域中显示占位符
required:表明该表单必填,如果表单提交时,必填项没有任何信息,浏览器则会显示警告信息.
autofocus:让表单在加载完成时就有一个表单被默认选中,方便用户输入
autocomplete:帮助用户根据历史输入信息自动完成输入
list 和 :list属性中的值同时也是中的id,这样就可以让与输入项关联起来,在用户开始输入的时候,输入框下面就会显示一个数据选择框,其中包含从中检索到的匹配数据.
multiple:规定元素可以选择多个值.
pattern:描述了一个正则表达式用于验证中的值.
3. 表单事件
oninput : 当用户输入内容的时候触发该事件
oninvalid: 当信息无法验证通过的时候触发该事件
html5下拉智能,HTML5新增标签 + 智能表单相关推荐
- h5新增标签和表单元素
h5新增表单元素 1. video 2. audio标签 3.datalist标签 4. progress标签 5. 表单新增元素 1. video 作用:播放视频 video常用标签属性: src: ...
- h5新增标签和表单属性
一.h5新增结构性标签(有意义的div) 1.header 定义网页的头部 2.nav 定义网页的导航部分 3.section 定义网页的某个区域 4.footer 定义网页的底部 5.article ...
- elementui中多选下拉框 multiple属性时 编辑表单如何显示默认值问题解决 以及校验验证问题
首先 这是点击编辑以后 期待的样子 但是使用过程中出现了不现实的问题 之后找到了问题所在 这个下拉框的value是这种样子的[1,2,3,4] 给到数据库的时候我给他去掉了中括号变成了字符串就是这样子 ...
- html下拉框失去焦点事件,iview 表单验证 input 用失去焦点事件 blur, select下拉选框 要用change事件 验证...
Linux MySQL源码安装缺少ncurses-devel包 在Red Hat Enterprise Linux Server release 5.7 上用源码安装MySQL-5.6.23时,遇到了 ...
- (九)HTML5+CSS3新特性:语义标签、多媒体标签、表单、新增选择器、盒子模型、模糊、calc函数、过渡
本文仅用作学习记录,学习视频为B站的pink老师 文章目录 HTML5的新特性 HTML5新增的语义化标签 HTML5新增的多媒体标签 HTML5新增的input表单 HTML5新增的表单属性 CSS ...
- 左侧栏下拉框HTML代码,html5下拉菜单代码
html5如何实现文本框下拉选项功能 使用html5或者jQuery如何实现文本框下拉效果,如下图 CSS布局HTML小编今天和大家分享大神详解最好有可以使用HTML5 list 属性.list 属性 ...
- HTML的表格标签,列表标签,表单标签,HTML5有哪些新特性
HTML的表格标签,列表标签,表单标签,HTML5有哪些新特性 欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页: ...
- html5新增了哪些表单元素,HTML5新增表单元素
8种机械键盘轴体对比 本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? HTML5新增表单元素主要有 input标签 其type类型主要有有以下几种:type="tel"用 ...
- 关于MUI框架中,“侧滑导航“之“div模式下拉菜单“的a标签(超链接)的失效问题?
关于MUI框架中,"侧滑导航"之"div模式下拉菜单"的a标签(超链接)的失效问题? 截图和讲解图片的顺序如下所示: 图1 图2 · 官方的截图 图3 · 官方 ...
- Struts2中UI标签之表单标签介绍
1.在Struts2中UI标签的表单标签分为两种:form标签本身和单个表单标签. 2.Struts2表单标签包括:form.textfield.password.radio.checkbox.che ...
最新文章
- TensorRT重磅更新!10亿参数大模型实时运行,GPT推理加速21倍
- Java记录 -61- 比较器Comparator
- HttpServletRequest应用(转)
- opencl track资料整理
- LA 6892 The Safe Secret(矩阵连乘)
- access根据所属院系修改学号_五个access管理系统实用范例整合
- 恶心的Oracle的if else if...
- 使用SQL PLUS生成报表
- Attention机制的小理解
- 机器学习之数据预处理——降噪
- java messagedigest_JAVA MessageDigest(MD5加密等)
- sql家庭成员、收入支出数据库
- 如何删除Word 2010中的“向下箭头”
- 飞车手游显示服务器连接失败怎么办,qq飞车手游服务器拉取失败
- 中国物流网很难进入运输颓势
- 在Markdown文件中快速插入本地图片
- c语言用while实现输出加法口诀表,「加法口诀」C语言编写一个加法口诀表 - 金橙教程网...
- python爬虫导入自己事先定义好的配置文件,在服务器运行出现ImportError: No module named 'a005_BanGuMi_spider_subject' 错误
- 指数分布c语言,C语言下泊松分布以及指数分布随机数生成器实现
- 2019中科院力学所研究生学术论坛随笔
热门文章
- python究竟要不要使用多线程
- MIT Graph实践概述
- Linux操作系统下文件作用
- 服务器创建和附加虚拟磁盘,Windows 7 虚拟硬盘中的新增功能
- python 使用 struct 把数据变成字节流
- python -如何查看已经安装xlrd 的版本号
- 配置SSH是出现: sign_and_send_pubkey: signing failed: agent refused operation Permission denied
- Android 隐式跳转(Activity的隐式跳转)
- databinding 入门 知识 给TextView 赋值
- java 递归思想的理解