HTML5和CSS3新特性

HTML5和CSS3新特性

​ HRML5增加了一些新的标签、新的表单和新的表单属性。

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

HTML5新增语义化标签

​ 以前布局，基本使用div来做。div对于搜索引擎来说，没有语义。HTML5新增了下列标签。

注意

• 语义标准化主要是针对搜索引擎
• 新标签可以始终多次
• 在IE9中，需要把这些元素转换为块级元素
• 其实，我们更喜欢在移动端使用这些标签（移动端不涉及兼容性问题）
• 还有其他新增标签

HTML5新增的多媒体标签

新增多媒体标签包含两个：

1. 音频：\
2. 视频：\

使用他们可以在页面中嵌入音频和视频，而不再使用flash和其他浏览器插件。

视频video

​ 支持的视频的格式有限。尽量使用mp4格式文件，因为各个网页都支持。

语法

< video src="" controls="controls"> </video>

补充了解写法，该写法支持浏览器的兼容性

上述代码执行顺序

• 首先执行第一个source,如果成功，则结束，失败，转2
• 执行第二个source，成功则结束，失败转3
• 显示文字内容。

视频video元素常见属性

• 注意

  • 谷歌浏览器设置了autoplay也不自动播放，需要再添加muted属性。

  • controls包括下方的播放、进度条等

    各个浏览器的播放控件不同，所以很多都不加控件。

    如果想修改为一致的控件，学完js修改

  • loop播放后循环

  • preload预先加载视频,如果有了autoplay就忽略该属性

  • poster加载等待的画面图片

音频文件audio

​ 音频支持的格式，浏览器都支持MP3,建议使用MP3。

audio语法

<audio src="" contrlos="controls"></audio>

补充了解，考虑兼容性的写法：

audio可供选择的属性

注意：

• 谷歌浏览器默认禁用视频和音频的自动播放，解决方法：学习js后解决

  • 视频可以通过muted参数解决

  • 音频要等js后

音频视频总结

• 标签使用方式基本一致，注意属性的使用方式

• 不同浏览器的使用情况不同

• 谷歌浏览器把视频和音频的自动播放关闭了

  视频：设置muted属性，就可以实现自动播放

  音频：学习js后才可以解决

• 视频标签设置自动播放，循环和设置大小属性，不使用controls空间

HTML5新增的input类型

HTML5新增表单属性

重点：

• required

• placeholder：提示文本，比如搜索框里面默认的文字内容。

  随便在该区域输入内容，默认文字就消失了。

  伪元素修改该文字的颜色：

  input::placeholder{
     color:pink;
  }
  

• autfocus：鼠标的光标自动放在那里

• autocomplete：效果类似于浏览器的搜索历史。此功能在为标签设置name后，才会显示历史

  有安全问题，默认是on。一般修改为off

• multiple：