李洪强和你一起学习前端之(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>

 

 

 

 

 

 

 

      

 

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

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • iOS 检查app版本更新操作

    iOS 检查app版本更新操作

    2021年8月27日
    153
  • EXCEL解密打开密码

    EXCEL解密打开密码excel文件设置了打开密码,但是设置的密码忘记了,导致现在没有办法打开文件了,这种情况需要解密excel文件。解密的方法就是找回密码,而且MSOfficeExcel文件中没有提供找回密码功能,所以我们需要自己找回密码,可以用奥凯丰EXCEL解密大师。【EXCEL解密大师】快速找回密码_轻松移除使用限制-奥凯丰okfone…

    2022年6月28日
    27
  • 放出一套完整的进销存软件源码[通俗易懂]

    放出一套完整的进销存软件源码[通俗易懂]商易进销存2.0vb+sqlserver下载地址:http://60.2.39.130/microerp/源码非常完整,从速下载,过期失效,不接受菜鸟们的技术帮助请求。

    2022年5月31日
    205
  • Coordinator Layout使用

    Coordinator Layout使用

    2021年6月17日
    118
  • go的channel_go channel原理

    go的channel_go channel原理Gochannel系列:"channel入门""为select设置超时时间""nilchannel用法示例""双层c

    2022年8月2日
    4
  • auto.js微信自动回复脚本_微信群助手机器人

    auto.js微信自动回复脚本_微信群助手机器人一、前言整体思路1)找到头像右上角有消息标志的聊天(注意直接跑下面代码的时候请确保聊天界面由此前提)2)点击进入聊天窗口,找到所有消息3)取最后一个消息(最新消息)4)和之前的新消息对比是否发生变化5)新消息推送至API6)收到API消息发送微信v8版本发送消息时,不再显示“发送”按钮了,也就没办法用找到“发送”控件的方法实现发送消息了。尝试用KeyCode(code)方式,发送回车键,发现也无效,原因查了一下好像是需要ROOT还是安卓9以上此方法失效。于是用坐标点击的方式点击键盘上的

    2022年9月30日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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