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

时间:2022-05-16 20:04:40

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>