李洪强和你一起学习前端之(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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 京东云服务器使用教程视频_京东通信app下载

    京东云服务器使用教程视频_京东通信app下载形势分析对公司而言,服务器并不是大事。互联网公司都有服务器和机房。但对个人开发者而言,服务器长久以来确是一大难题。但近年,国外亚马逊牵头开始做AWS云服务,并迅速获得极大成功。国内阿里巴巴及时跟进,推出阿里云平台。服务器对个人开发者而言不再是遥不可及,反而变得触手可及。甚至很多企业不再自己搭建服务器,转而使用云服务平台以节省成本。目前国内云服务平台已是百家争鸣,比起早年互联网环境已好很多。除阿里云外

    2022年10月14日
    3
  • C语言实现PID算法:位置式PID和增量式PID[通俗易懂]

    原创者微信公众号PID算法可以说是在自动控制原理中比较经典的一套算法,在现实生活中应用的比较广泛。大学参加过电子竞赛的朋友都应该玩过电机(或者说循迹小车),我们要控制电机按照设定的速度运转,PID控制在其中起到了关键的作用。说来惭愧,大学这门课程学的不咋滴,老师讲的课基本没听进去过。直到后面接触竞赛,算是对PID有了很基础的一点点认识,直到现在工作实际应用的…

    2022年4月11日
    113
  • 安卓原生镜像(中国网站)「建议收藏」

    安卓原生镜像(中国网站)「建议收藏」安卓原生镜像(谷歌中国站)找了半天百度,好不容易看到,赶紧收藏起来:原生安卓包:https://developers.google.cn/android/images?h1=zh=cn#angler

    2022年6月19日
    35
  • forkjoin并发分页查数据_java fork join

    forkjoin并发分页查数据_java fork join分治,顾名思义,即分而治之,是一种解决复杂问题的思维方法和模式;具体来讲,指的是把一个复杂的问题分解成多个相似的子问题,然后再把子问题分解成更小的子问题,直到子问题简单到可以直接求解。Java并发包里提供了一种叫做Fork/Join的并行计算框架,就是用来支持分治这种任务模型的。如何用Fork/Join并行计算框架计算斐波那契数列f(n)=f(n-1)+f(n-…

    2025年12月8日
    4
  • Apache、Nginx、IIS防盗链方法「建议收藏」

    Apache、Nginx、IIS防盗链方法「建议收藏」防盗链?要实现防盗链,我们就必须先理解盗链的实现原理,提到防盗链的实现原理就不得不从HTTP协议说起,在HTTP协议中,有一个表头字段叫referer,采用URL的格式来表示从哪儿链接到当前的网页或文件。一来可以追溯上一个入站地址是什么,二来对于资源文件,可以跟踪到包含显示他

    2022年7月23日
    8
  • 回溯法求解N皇后问题及其时间复杂度分析

    回溯法求解N皇后问题及其时间复杂度分析回溯法求解N皇后问题及其时间复杂度分析一、回溯法简介1.什么是回溯法?2.回溯法的时间复杂度分析蒙特卡罗方法蒙特卡罗方法在回溯法求解时间复杂度中的应用二、回溯法求解N皇后问题1.回溯法求解N皇后问题的过程2.回溯法求解N皇后问题的时间复杂度2.1求解时的效率分析回溯法进行效率分析的代码2.2时间复杂度分析一、回溯法简介1.什么是回溯法?  相信”迷宫”是许多人儿时的回忆,大家小时候一定都玩过迷宫游戏。我们从不用别人教导,都知道走迷宫的策略是:当遇到一个岔路口,会有以下两种情况:存

    2022年9月30日
    4

发表回复

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

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