HTML5和CSS3的新增内容--提高

小小张进阶

已于 2023-04-02 07:03:47 修改

阅读量123

点赞数 1

分类专栏：前端文章标签：前端 html css css3 html5

于 2023-04-01 20:37:36 首次发布

本文链接：https://blog.csdn.net/m0_49169688/article/details/129900577

版权

本文介绍了HTML5和CSS3的新特性，包括HTML5的语义化标签、多媒体标签、input类型以及表单属性，详细讲解了CSS3的选择器、盒子模型、模糊效果、计算盒子宽度等功能，并探讨了它们的兼容性和应用场景。

摘要由CSDN通过智能技术生成

下面的这些东西，用到了可以去菜鸟教程查，不用刻意去记

这些新特性都有兼容性问题，IE9+版本到浏览器才支持

1.HTML5的新特性

1.语义化标签

2.多媒体标签

方便在页面中嵌入音频和视频，不用再使用flash及浏览器插件

1.视频标签：<video>

支持三种视频格式，尽量使用：mp4格式

注意：

谷歌禁止了音频和视频的自动播放，视频解决方案-muted

control属性，不同浏览器中样式不一样，所以一般在javascript中设置

通常设置：

        1.自动播放，(不使用controls控件)

        2.循环播放

        3.宽高大小

  video {
      width: 100%;
  }

<video src="info/mi.mp4" controls="controls" autoplay="autoplay" muted="muted" loop="loop" poster="images/produce.png"></video>
<!-- 等价于上方写法 -->
<video src="info/mi.mp4" controls autoplay muted loop></video>

<!--了解下方写法：mp4不行，下一行ogg格式，一行行扫描，直到找到可用格式即可-->
<video controls="controls">
  <source src="info/mi.mp4" type="video/mp4">
  <source src="info/mi.ogg" type="video/ogg">
  您的浏览器暂不支持<video>标签播放视频
</video>

2.音频标签：<audio>

支持三种音频格式，尽量使用：mp3格式

谷歌禁止了音频和视频的自动播放，音频-js解决

<audio src="info/music.mp3" controls="controls" autoplay="autoplay" loop="loop"></audio>
<!-- 等价于上方写法 -->
<audio src="info/music.mp3" controls autoplay loop ></audio>

<!--了解：mp3不行，下一行ogg格式，一行行扫描，直到找到可用格式即可-->
   <audio controls="controls">
  <source src="info/mi.mp3" type="audio/mpeg">
  <source src="info/mi.ogg" type="audio/ogg">
  您的浏览器暂不支持<audio>标签播放视频
  </audio>

3.input-类型type

验证的时候，必须添加到form表单域中

重点记忆：number，search，tel

<!-- 验证的时候，必须添加到form表单域中 -->
<form action="">
    <ul>
        <li>邮箱email：<input type="email" /></li>
        <li>网址url：<input type="url" /></li>
        <li>日期time：<input type="time" /></li>
        <li>日期date：<input type="date" /></li>
        <li>数量number：<input type="number" /></li>
        <li>手机号码tel：<input type="tel" /></li>
        <li>搜索search：<input type="search" /></li>
        <li>颜色color：<i