李洪强和你一起学习前端之(4)HTML5介绍

李洪强和你一起学习前端之(4)HTML5介绍

大家好,又见面了,我是全栈君。

1.1认识HTML5

html的版本:

html4

Xhtml1.0

目前: html5是最高的版本

再怎么变化,无非是多了一些标签而已,但是不单单是提供了一些标签

比如: 开发网页游戏

我们可以开发网页版的游戏,结合Css3 ,但是是依托于Html5的

看三个例子: 摇一摇,小球转动,地图

 

1.2语法规范

 

 

07 音频&视频

图片也属于多媒体

html提供了一个标签来播放音乐

<audio  scr = “”  controls autoplay   loop = “3”></audio>

controls可以控制音量等,他是没有属性值的属性

loop 循环次数

不同的浏览区对音频的支持是不一样的

解决多种浏览器的支持问题

<audio>

  <source  src = “./music/see you again.mp3”>

  <source  src = “./music/see you again.wav”>

  <source src = “./music/see you again.ogg”> 

  <!–浏览器不支持HTML5的音频播放–>

 

</audio>

 

视频

  <video  src = “./video/movie.mp4″ width = “900”  controls  autoplay  loop = “3”></video>

 

不同的浏览器对视频的支持也是不一样的

解决办法: 

<video>

  <source src = “./video/movie.mp4”>

  <source src = “./video/movie.ogg”>

  浏览器不支持HTML5视频播放

</video>

 

IE浏览器不支持h5视频和音频的播放

多媒体:

Flash插件

 

 

08 表单

H5在原来的基础上新增了东西

表单输入类型

<form>

  <input type  = “text”>

  <input type  = “password”>

  <input type  = “radio”>

  <input type  = “checkbox”>

  <input type  = “file”>

  <input type  = “button”>

  <input type  = “submit”>

  <input type  = “reset”>

  <fieldset>

    <legend>输入类型</legend>

      <label for = “demo”>

        email:<input  type = “text” id = “demo”>

      </label>

      <label  for = “”>

        tel:<input type = “tel”>

      </label>

      <label for = “”>

       <input type = “submit”  value = “提交”>

      </label>

    </fieldset>

</form>

总结: 

  类型          使用实例          含义

  email         <input type = “email”>  输入邮箱格式

  tel           <input type = “tel”>      输入手机号格式

      url          <input type = “url”>     输入url格式 

  number         <input  type = “number”>  输入数字格式 

 

 

09 表单(表单元素)

<label  for = “”>

  课程: <input type = “text” list = “course”>

</label>

<datalist  id = “course”>

  <option value = “php”>php</option>

  <option value = “python”>python</option>

  <option value = “photoshop”>photoshop</option>

  <option value = “java”>java</option>

  <option value = “javascript”>javascript</option>

  <option value = “frontend”>frontend</option>

</datalist>

 

<label for = “”>

  <input  type = “submit”  value = “保存”>

</label>

 

 

 

 

 

 

 

      

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/108617.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 通过反射获取实例化

    通过反射获取实例化IMyServlet接口packagecn.itheima.web.servlet;publicinterfaceIMyServlet{publicvoidinit();publicvoidservice();publicvoiddestory();}接口的实现packagecn.itheima.web.servlet;publicclassMy

  • Telerik RadControls for ASP.NET AJAX 2010 Q2最新版下载+源码下载

    Telerik RadControls for ASP.NET AJAX 2010 Q2最新版下载+源码下载TelerikRadControlsforASP.NETAJAX2010Q2RadControlsforASP.NET是一套强大的用户界面控件套装,它可以帮助您创建拥有桌面应用程序华丽外表和高速性能的Web应用程序。18种可靠的UI及数据控件全面提供AJAX性能,使用户可以得到高级的体验。但RadControlsforASP.NET不仅仅只支持AJAX,尽管其包含的控件以一流的性能帮助开发者执行AJAX。RadControlsforASP.NET同样还可以跨浏览器支持,兼容XHTM

  • Python读取excel文件数据并插入数据库[通俗易懂]

    Python读取excel文件数据并插入数据库[通俗易懂]目的:将excel文件StudentInfo.xls的学生信息插入到test库中的student表中一、连接mysql数据库安装第三方库pymysql:pipinstallpymysql调用pymysql.connect()方法连接数据库,代码如下importpymysql#打开数据库连接conn=pymysql.connect(host=’localhost’,#MySQL服务器地址user=’root’,#MySQL服务器端口号p

  • 上海主要地标经纬度「建议收藏」

    上海主要地标经纬度「建议收藏」金茂大厦经纬度:(121.50109,31.23691)国际会议中心经纬度:(121.49203,31.24149)上海体育馆经纬度:(121.43348,31.18334)龙华机场经纬度:(121.

  • 最新dedecms 0day漏洞_易优cms漏洞

    最新dedecms 0day漏洞_易优cms漏洞原文地址:http://hi.baidu.com/artcracker/blog/item/682a1c24640ee37735a80f49.html 首先,我百度“NetCms网站管理系统”,然后顺手找了个网站。然后进去,/user/login.aspx    ,点注册。点击发表文章。在发表文章页面,点击“选择图片”  我们在这里,记下这个目

  • org.apache.lucene.analysis.TokenStream.incrementToken()Z

    org.apache.lucene.analysis.TokenStream.incrementToken()Z在使用lucene3与paoding集成的时候可能会出现以下错误:Exceptioninthread"main"java.lang.AbstractMethodError:org.apache.lucene.analysis.TokenStream.incrementToken()Z atorg.apache.lucene.index.DocInverterPerField.pro…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号