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


相关推荐

  • python语言变量命名规则[通俗易懂]

    python语言变量命名规则[通俗易懂]Python语言变量命名规则变量名只能包含字母、数字和下划线。(推荐学习:0基础入门python)变量名可以字母或下划线开头,但不能以数字开头。例如,可将变量命名为message_1,但不能将其命名为1_message。变量名不能包含空格,但可使用下划线来分隔其中的单词。例如,变量名greeting_message可行,但变量名greetingmessage会引发错误。不要将Pytho…

    2022年6月14日
    36
  • Windows 定时执行脚本[通俗易懂]

    Windows 定时执行脚本[通俗易懂]Windows定时执行脚本1、参考资料windows设置定时执行脚本2、解决办法由于Windows系统,无法使用Linux下强大的crontab命令,所以该定时任务也是针对Windo系统的具体操作步骤右击【我的电脑】,选择【管理】在【任务计划程序】面板中点击【创建基本任务】输入任务的【名称】和【描述】当然是希望每天自动执行防疫打卡啦~设置每天执行任务的时间,以及每隔几天执行一次该任务选择【启动程序】选择启动程序的startup.bat

    2022年7月17日
    60
  • SICP 1.20经验

    SICP 1.20经验

    2021年12月17日
    42
  • NSGA2_python

    NSGA2_pythonimportrandomimportnumpyasnpfrommatplotlib.tickerimport MultipleLocatorimportmatplotlib.pyplotaspltclassNSGA2():   def__init__(self,dim,pop,max_iter):    #维度,群体数量,迭代次数       self.pc=…

    2022年5月19日
    43
  • TCP/IP三次握手与四次挥手学习笔记(二)

    TCP/IP三次握手与四次挥手学习笔记(二)

    2022年2月14日
    145
  • 什么软件可以激活成功教程网址_bya意思

    什么软件可以激活成功教程网址_bya意思国内激活成功教程站点大全![http://blog.csdn.net/netxiaoyue/archive/2005/01/29/273559.aspx]国内激活成功教程站点大全!(强烈推荐)【8DD资源中心】-http://www.18dd.com/精品软件秀-http://www.ohsoft.com/163软件园-http://www.soft163.com/中华激活成功教程联盟

    2025年12月7日
    6

发表回复

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

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