<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. fdisk分区实例

    查看磁盘分区详情 直接使用fdisk -l 或者使用fdisk /dev/sda,再使用p命令来查看 Command (m for help): p Disk /dev/sda: 32.2 GB, 3 ...

  2. vim的基本快捷操作(二)——可视模式

    va{ 选中{}中间内容,包括{} va[ 选中[]中间内容,包括{} va( 选中()中间内容 ,包括{} vi< 选中<>中间内容,包括<> 将上面的a换成i,就不包 ...

  3. Activity 通知

    //通知图标 int icon = android.R.drawable.stat_notify_chat; //创建通知对象,icon通知图标,tickerText摘要,System.current ...

  4. js canvas 粒子动画 电子表

     前言 从我接触canvas的第一天就觉得canvas很有趣,想搞点事情,这几天终于忍不住了,于是他来了. 先看效果                       这里我做了四个大家有兴趣可以看完文章, ...

  5. adb 提示adb server version(31) doesn't match this client(40) 解决办法

    有时候我们用adb工具去连接安卓设备,或者模拟器的时候,会提示adb server version(31) doesn't match this client(40)这样的提示.如图 提示的字面意思就 ...

  6. RPC协议的介绍

    根据网上搜索的一些资料摘抄汇总的,如果有误,欢迎斧正. 早期单机时代,一台电脑上运行多个进程,大家各干各的,老死不相往来.假如A进程需要一个画图的功能,B进程也需要一个画图的功能,程序员就必须为两个进 ...

  7. openstack一些介绍

    最近刚考完redhat 的 openstack,就想来这里简单介绍一下. openstack涉及到overcloud和undercloud两个层面的操作,undercloud需要一些技术操作,然后来创 ...

  8. phpass类加密算法

    客户说用md5加密容易被破解,要求使用bcrypt加密,经搜索发现password_hash函数可以轻松对密码实现加盐加密,比md5更安全,缺点是运行慢. phpass是一个开源类库,它可以让我们更方 ...

  9. security安全框架 配置

    <?xml version="1.0" encoding="UTF-8"?><beans:beans xmlns="http://w ...

  10. 使用Vue和djangoframwork完成登录页面构建 001

    使用Vue和djangoframwork完成登录页面构建 001 环境的搭建 首先,我在我的电脑的F盘创建了一个文件夹 forNote,进入到这个文件夹中 F:\forNote> vue环境的搭 ...