HTML5

HTML5 新特性

  • HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。

  • 这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。

  • 声明：

    • 新特性增加了很多，但是我们专注于开发常用的新特性。
    • 基础班我们讲解部分新特性，到了就业班还会继续讲解其他新特性。

H5 新增语义化标签

  • 以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的。
1
2
3
4
<div class="“header”"></div>
<div class="“nav”"></div>
<div class="“content”"></div>
<div class="“footer”"></div>
  • header：头部标签
  • nav：导航标签
  • article：内容标签
  • section：定义文档某个区域
  • aside：侧边栏标签
  • footer：尾部标签

  • 注意：

    • 这种语义化标准主要是针对搜索引擎的

    • 这些新标签,在页面中可以使用多次

    • 在 IE9 中，需要把这些元素转换为块级元素

    • 其实，我们移动端更喜欢使用这些标签

    • HTML5 还增加了很多其他标签，我们后面再慢慢学

H5 新增多媒体标签

视频标签 video

支持的视频格式

  • 当前 video 元素支持三种视频格式： 尽量使用 .mp4 格式

image-20220126211655457

video标签的写法

1
<video src="文件地址" controls="controls"></video>
1
2
3
4
5
<video controls="controls" width="300">
  <source src="move.ogg" type="video/ogg" />
  <source src="move.mp4" type="video/mp4" />
  您的浏览器暂不支持 <video>标签播放视频</video>
</video>

  • 第二种格式存在的意义

    • 由于视频数据非常非常的重要, 所以五大浏览器厂商都不愿意支持别人的视频格式, 所以导致了没有一种视频格式是所有浏览器都支持的, 这个时候 W3C 为了解决这个问题, 所以推出了第二个 video 标签的格式
    • video 标签的第二种格式存在的意义就是为了解决浏览器适配问题. video 元素支持三种视频格式, 我们可以把这三种格式都通过 source 标签指定给 video 标签, 那么以后当浏览器播放视频时它就会从这三种中选择一种自己支持的格式来播放

  • 注意点:

    • 当前通过 video 标签的第二种格式虽然能够指定所有浏览器都支持的视频格式, 但是想让所有浏览器都通过 video 标签播放视频还有一个前提条件, 就是浏览器必须支持 HTML5标签, 否则同样无法播放
    • 在过去的一些浏览器是不支持 HTML5 标签的, 所以为了让过去的一些浏览器也能够通过 video 标签来播放视频, 那么我们以后可以通过一个 JS 的框架叫做 html5media 来实现

video标签的属性

  • src: 告诉 video 标签需要播放的视频地址 src="./1.mp4"
  • autoplay: 告诉 video 标签是否需要自动播放视频,默认不自动播放 autoplay="autoplay"
  • controls: 告诉 video 标签是否需要显示控制条 controls="controls"
  • poster: 告诉 video 标签视频没有播放之前显示的占位图片 poster="./1.jpg"
  • loop: 告诉 video 标签循环播放视频. 一般用于做广告视频 loop="loop"
  • preload: 告诉 video 标签预加载视频, 但是如果设置了 autoplay 属性, 那么 preload 属性就会失效
  • muted:告诉 video 标签视频静音 muted="muted"
  • width/height: 和 img 标签中的一模一样

1
2
3
<video controls autoplay poster="./img/002.jpg" loop muted width="800px">
  <source src="./media/001.mp4" type="video/mp4">
</video>

音频标签 audio

支持的音频格式

  • 当前 audio 元素支持三种音频格式：

image-20220126212438882

audio标签的写法

1
<audio src="文件地址" controls="controls"></audio>
1
2
3
4
5
< audio controls="controls" >
  <source src="happy.mp3" type="audio/mpeg" />
  <source src="happy.ogg" type="audio/ogg" />
  您的浏览器暂不支持 <audio>标签。
</audio>

audio标签常见属性

  • audio 标签常见属性:

image-20220126212557296

  • 谷歌浏览器把音频和视频自动播放禁止了
  • 注意点:
    • audio 标签的使用和 video 标签的使用基本一样, video 中能够使用的属性在 audio 标签中大部分都能够使用, 并且功能都一样.
    • 不过有3个属性不能用, height / width / poster

多媒体标签总结

  • 音频标签和视频标签使用方式基本一致

  • 浏览器支持情况不同

  • 谷歌浏览器把音频和视频自动播放禁止了

  • 我们可以给视频标签添加 muted 属性来静音播放视频，音频不可以（可以通过 JavaScript 解决）

  • 视频标签是重点，我们经常设置自动播放，不使用 controls 控件，循环和设置大小属性

H5 新增的 input 类型

image-20220126212900102

邮箱验证

  • 可以自动校验输入的内容是否符合邮箱的格式
1
<input type="email"/>

URL地址校验

  • 可以自动校验输入的内容是否是 URL 地址
1
域名:<input type="url"/>

输入框中只能输入数字

  • 限制输入框只能输入数字
1
<input type="number"/>

日期选择器

1
<input type="date"/>
  • HTML5 中 input 类型增加了很多 type 类型, 例如 color、date 但是都不兼容, 后面讲到浏览器兼容时会重点讲解

取色器

1
<input type="color"/>
  • HTML5 中 inpu t类型增加了很多 type 类型, 例如 color、date 但是都不兼容, 后面讲到浏览器兼容时会重点讲解

H5 新增的表单属性

image-20220126213015011

  • 可以通过以下设置方式修改 placeholder 里面的字体颜色：
1
2
3
input::placeholder {
  color: pink;
}