<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的更多相关文章

  1. HTML5新标签与特性---新表单+新属性----综合案例1

    HTML5新标签与特性 兼容性问题 (ie9 以上的版本) 文档类型设定 document HTML: sublime 输入 html:4s XHTML: sublime 输入 html:xt HTM ...

  2. Html5新标签解释及用法

    Html5新标签解释及用法 HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要 ...

  3. Html5新标签及用法

    HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2  HTML 标准.它希望能够减少浏览器对于需要插件的丰富性网络应用服务( ...

  4. 让ie浏览器支持html5新标签的解决方法(使用html5shiv)

    没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览 ...

  5. html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

    * HTML5 现在已经不是 SGML(标准通用标记语言,是一种定义电子文档结构和描述其内容的国际标准语言) 的子集,主要是关于图像,位置,存储,多任务等功能的增加.   * 拖拽释放(Drag an ...

  6. 让IE6,7,8支持HTML5新标签的方法

    很多网站对网页进行重构的时候,提高标签的语义性,在网页中大量使用了section,article,header等HTML5新标签.考虑到目前win7自带的IE浏览器版本是IE8,而IE8不支持HTML ...

  7. html5\CSS3有哪些新特性、移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5?

    (1)HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,地理定位等功能的增加. 绘画canvas元素: 用于媒介回放的video和audio元素: 本地离线存储localStorage ...

  8. 【29】html5新标签有哪些?

    [29]html5新标签有哪些? canvas svg video audio [01]article(IE8不支持) [01]details [02]aside(IE8不支持) [03]header ...

  9. HTML5有哪些新特性,移除了哪些元素?如何处理HTML5新标签的浏览器兼容性问题?如何区分HTML和HTML5?

    HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,多任务等功能的增加. 绘画canvas: 用于媒介回放的video和audio元素: 本地离线存储localStorage长期存储数据 ...

随机推荐

  1. Python 如何debug

    一.常见错误: 1.漏了末尾的冒号,如 if语句,循环语句,定义函数 2.缩进错误,该缩进的时候没有缩进 3.把英文符号写成中文符号,如:  ' ' () , 4.字符串拼接,把字符串和数字拼接一起 ...

  2. ChainMap & python args parse

    python的内建模块ChainMap可以把一组dict串起来并组成一个逻辑上的dict.ChainMap本身也是一个dict,但是查找的时候,会按照顺序在内部的dict依次查找. 什么时候使用Cha ...

  3. 论文学习——《Learning to Compose with Professional Photographs on the Web》 (ACM MM 2017)

    总结 1.这篇论文的思路基于一个简单的假设:专业摄影师拍出来的图片一般具备比较好的构图,而如果从他们的图片中随机抠出一块,那抠出的图片大概率就毁了.也就是说,原图在构图方面的分数应该高于抠出来的图片. ...

  4. Eclipse如何设置jsp文件默认UTF-8格式编码

    我使用的是Eclipse Jee Neon, Window->Preferences 具体设置如图所示: 

  5. Android VideoView无法播放网络视频

    今天学习Android播放视频和音频,其中在练习播放视频的时候无法播放网络视频,网络视频是别人发布在网上的,但是把视频放在本地是可以的,最后推测是没有开放网络的访问权限的问题,果然开放了之后就能正常访 ...

  6. 重新创建redis集群的注意事项

    一.重新创建redis集群的注意事项 1.将每个节点下aof.rdb.nodes.conf本地备份文件删除: 2.127.0.0.1:7001> flushdb #清空当前数据库(这一步可以省略 ...

  7. 关于C#的随机数

    一直都知道random随机数可能出现相同的情况,但是一直没具体看为什么,网上一看又是一大堆例子给你出来,一点也不清晰,今天看msdn记录一下,msdn是讲的真的清楚. 实例化随机数生成器 通过向Ran ...

  8. USB之Main item, Local item和Global item 的作用范围与归类

    https://doc.micrium.com/display/OSUM50300/USB+Device+HID+Class+Overview report descriptor –> item ...

  9. 远程仓库 GitHub

    远程仓库 这里介绍的远程仓库指的是 GitHub, 在这个网站,所有非私有的的代码,都可以被其他人查看,所以,一些机密或者重要的文件千万不要上传到这里面,如果需要可以购买付费版本或自己公司搭建埃及的远 ...

  10. 【LeetCode 5】 最长回文子串

    题目链接 描述 [题解] 一个讲得比较好的博客地址; 感觉manacher算法的大概思路就是利用回文串左右对称的性质. 利用之前算出来的以某个点为中心的回文串.而当前要枚举的串被包括在其中. 则可以用 ...