案例-html5新标签-input和video
<form action="">
<fieldset>
<!--fieldset标签:可将表单内的元素分组 ,常与legend搭配使用-->
<legend>喜欢的明星</legend><!--标题-->
<input type="text" name="user" id='' list="star" autofocus placeholder='输入你喜欢的明星'>
<!--datalist标签:定义选项的列表,常与input元素配合使用-->
<datalist id="star"><!--列表-->
<option value="张学友">张学友</option>
<option value="周杰伦">周杰伦</option>
<option value="华晨宇">华晨宇</option>
<option value="刘若英">刘若英</option>
</datalist>
<input type="file" id="" multiple>
<input type="text" name='username' autocomplete>
<input type="submit">
</fieldset> <!--
input新增属性:
placeholder:占位符,文本框提示信息
autofocus:加载页面自动获取焦点
multiple:多文件上传
autocomplete:自动完成功能
required:必填项,内容不能为空
accesskey:使元素获得焦点,元素的快捷键,例如:采用 alt+ s 的形式
<input type="text" accesskey="s">
-->
</form>
<!-- 多媒体:
embed:引入网络视频
audio:加载音频文件
为了浏览器兼容,需要做三种声音文件 ogg,mp3,wav,一般前两种全部都包括了
video:播放视频
视频支持 ogg、mp4、WebM 三种视频格式
-->
<audio controls autoplay loop='-1'>
<!--
controls:是否显示播放器
autoplay:自动播放
loop:循环次数 -1 无限循环
-->
<source src="bgsound.mp3" />
<source src="music.ogg" />
您的浏览器不支持音频播放
</audio>
<!--视频播放-->
<video controls autoplay>
<source src="mp4.mp4" />
<source src="movie04.ogg" />
您的浏览器不支持视频播放
</video>
案例-html5新标签-input和video的更多相关文章
- HTML5新标签与特性---新表单+新属性----综合案例1
HTML5新标签与特性 兼容性问题 (ie9 以上的版本) 文档类型设定 document HTML: sublime 输入 html:4s XHTML: sublime 输入 html:xt HTM ...
- Html5新标签解释及用法
Html5新标签解释及用法 HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要 ...
- Html5新标签及用法
HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要插件的丰富性网络应用服务( ...
- 让ie浏览器支持html5新标签的解决方法(使用html5shiv)
没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览 ...
- html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
* HTML5 现在已经不是 SGML(标准通用标记语言,是一种定义电子文档结构和描述其内容的国际标准语言) 的子集,主要是关于图像,位置,存储,多任务等功能的增加. * 拖拽释放(Drag an ...
- 让IE6,7,8支持HTML5新标签的方法
很多网站对网页进行重构的时候,提高标签的语义性,在网页中大量使用了section,article,header等HTML5新标签.考虑到目前win7自带的IE浏览器版本是IE8,而IE8不支持HTML ...
- html5\CSS3有哪些新特性、移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5?
(1)HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,地理定位等功能的增加. 绘画canvas元素: 用于媒介回放的video和audio元素: 本地离线存储localStorage ...
- 【29】html5新标签有哪些?
[29]html5新标签有哪些? canvas svg video audio [01]article(IE8不支持) [01]details [02]aside(IE8不支持) [03]header ...
- HTML5有哪些新特性,移除了哪些元素?如何处理HTML5新标签的浏览器兼容性问题?如何区分HTML和HTML5?
HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,多任务等功能的增加. 绘画canvas: 用于媒介回放的video和audio元素: 本地离线存储localStorage长期存储数据 ...
随机推荐
- 逻辑回归原理,推导,sklearn应用
目录 逻辑回归原理,推导,及sklearn中的使用 1 从线性回归过渡到逻辑回归 2 逻辑回归的损失函数 2.1 逻辑回归损失函数的推导 2.2 梯度下降法 2.3 正则化 3 用逻辑回归进行多分类 ...
- Redis Sentinel 高可用方案
redis 主从复制的问题 Redis主从复制可将主节点数据同步给从节点,从节点此时有两个作用: 1,一旦主节点宕机,从节点作为主节点的备份可以随时顶上来. 2,扩展主节点的读能力,分担主节点读压 ...
- 【Movie】绿皮书
今天和室友一起去看了<绿皮书>,一部获得奥斯卡的电影. 起初我是没什么太大期望的,纯粹是因为特价票10块钱,加上身边一个小姐姐的力荐. 看完我觉得,啊不愧是奥斯卡电影啊.推荐. 以下可能会 ...
- springboot 配置文件的加载顺序
springboot 配置文件的加载顺序1.在命令行中传入的参数.2. SPRING APPLICATION JSON中的属性. SPRING_APPLICATION—JSON是以JSON格式配置在系 ...
- SpringBoot 应用程序启动过程探秘
概述 说到接触 SpringBoot 伊始,给我第一映像最深的是有两个关键元素: 对照上面的典型代码,这个两个元素分别是: @SpringBootApplication SpringApplicati ...
- ASP.NET MVC 学习笔记之 MVC + EF中的EO DTO ViewModel
EO: Entity Object 就是EF中的实体类, 对EO的操作会对数据库产生影响. DTO: Data Transfer Object 数据传输对象.用于在各层之间传递数据的普通类,DTO有哪 ...
- jquery.cookie.js实现cookie记住用户名和密码
记得导入 <script src="jquery.js" type="text/javascript"></script> <sc ...
- 【记录】linux 常用命令梳理
命令梳理 下载文件 [wget 是一个十分常用命令行下载工具,多数Linux发行版本都默认包含这个工具] wget -c [zip路径等] #断点续传,如果下载中断,那么连接恢复时会从上次断点开始下载 ...
- Spyder中的一些快捷键
熟练spyder中的一些快捷键后,能极大提升code效率. 这里列出常用的快捷键.(注:在spyder导航栏Tools-Preferences-Keyboard shortcut中有所有的快捷键) T ...
- HDU-4044 树形背包dp好题
不会做,题解是参考网上的.感觉这道题是到好题,使得我对树形背包dp更了解了. 有几个注意的点,直接给出代码,题解以及注意点都在注释里了. #include<bits/stdc++.h> u ...