李洪强和你一起学习前端之(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)
上一篇 2022年3月1日 下午10:00
下一篇 2022年3月1日 下午11:00


相关推荐

  • 【python表白神器】手把手教你用代码浪漫追求对象!(附完整源码+讲解)

    【python表白神器】手把手教你用代码浪漫追求对象!(附完整源码+讲解)文章目录前言演示网站制作部署网站二维码制作总结前言跟着我做,不要跳着看,否则你会失败。第一步是制作二维码;第二步是制作网站。演示具体成果地址:https://yanghanwen.xyz/ai/网站制作首先你需要下载我的这个完整项目:链接:https://pan.baidu.com/s/1EmRehx_gRnT5hLjJvKuAIg提取码:pz1y–来自百度网盘超级会员V2的分享下载好后文件目录如下:然后你需要注意的是我把img里面的图片删了,涉及隐私,大家自己替换自己追

    2022年10月15日
    4
  • 大数据分析应用领域有哪些[通俗易懂]

    大数据分析应用领域有哪些[通俗易懂]  软件和服务的大数据分析市场收入预计将从2018年的$42B增长到2027年的$103B,复合年增长率(CAGR)为10.48%。这就是为什么,大数据分析认证是业内最全神贯注的技能之一。在这个“大数据分析应用领域”文章中,我将带您进入各个行业领域,在这里我将解释大数据分析如何使它们发生革命性变化。  大数据分析应用  大数据分析应用程序的主要目标是通过分析大量数据来帮助公司做出更具信息量的业务决策。它可能包括Web服务器日志,Internet点击流数据,社交媒体内容和活动报告,来自客户电子邮

    2022年5月29日
    44
  • 阿里巴巴主流数据库连接池Druid入门

    阿里巴巴主流数据库连接池Druid入门一.数据库连接池的必要性(一).传统数据库连接模式的的步骤1.在主程序中创建连接2.进行sql操作3.关闭数据库连接(二).传统数据库连接模式存在的问题1.浪费时间:每次连接时都要验证登录和将conn加载到内存,2.不能大规模的访问数据库:当数据库访问人数过多时,占用大量系统资源,会导致服务器崩溃3.存在内存泄漏问题:每次连接都需要断开连接,如果不断开,程序运行结束,会有创建的连接对象存在内存中一直无法关闭,就会导致java内存…

    2022年7月23日
    14
  • 电脑九大常用的网络命令 ,很实用!

    电脑九大常用的网络命令 ,很实用!ping 是个使用频率极高的实用程序 主要用于确定网络的连通性 这对确定网络是否正确连接 以及网络连接的状况十分有用 简单的说 ping 就是一个测试程序 如果 ping 运行正确 大体上就可以排除网络访问层 网卡 Modem 的输入输出线路 电缆和路由器等存在的故障 从而缩小问题的范围 ping 能够以毫秒为单位显示发送请求到返回应答之间的时间量 如果应答时间短 表示数据报不必通过太多的路由器或网络 连接速度比较快 ping 还能显示 TTL TimeToLive 生存时间 值 通过 TTL 值可以推算数据包通过了多

    2026年3月17日
    2
  • QML QtQuick.Controls 2 MenuBar/Menu菜单样式自定义

    QML QtQuick.Controls 2 MenuBar/Menu菜单样式自定义版本 Qt5 12 5 参考 Qt 源码及文档示例代码链接 https github com gongjianbo QmlComponent git 在 Qt5 12 的文档中你可以搜索到三个 MenuBar 组件 这里我修改的是 Control2 中的菜单栏样式 对比如下 因为菜单栏及菜单项是多个组件组合而成的 都需要进行了自定义来统一风格 样式修改也没什么好讲的

    2026年3月18日
    2
  • Supervisor的使用

    Supervisor的使用1 Supervisor 简介 Supervisord 是用 Python 实现的一款的进程管理工具 supervisord 要求管理的程序是非 daemon 程序 supervisord 会帮你把它转成 daemon 程序 因此如果用 supervisord 来管理进程 进程需要以非 daemon 的方式启动 例如 管理 nginx 的话 必须在 nginx 的配置文件里添加一行设置 daemo

    2026年3月19日
    3

发表回复

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

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