HTML5新标签

最新推荐文章于 2023-05-18 14:02:01 发布

ps笔记

最新推荐文章于 2023-05-18 14:02:01 发布

阅读量391

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/lv_suri/article/details/125724843

版权

本文介绍了HTML5的新特性，包括布局元素如Header、Nav、Aside、Section和Footer，以及媒体元素如Audio和Video的使用。通过示例展示了如何使用这些元素来构建网页，并详细说明了它们的属性，如controls、autoplay和muted等。通过对这些新特性的理解，开发者可以更好地创建适应移动端的网页效果。

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

HTML5是超文本标记语言（html）的第五次重大修改，可以简单的理解是html的第五个大版本。HTML5简称H5，移动端页面网页效果。

新特性：一布局元素；二是媒体元素；三画布（<canvas>）,例如刮刮乐；四SVG（定义矢量图）；五表单新特性。

一布局元素；

布局元素相当于一个有语义的div.

Header：网页头部

Nav:导航栏

Aside:侧边栏

Section:布局中的一部分

Footer：网页页脚

<style>
    header{
      width: 800px;
      border: 1px solid red ;
      margin:0 auto ;
    }
</style>
</head>
<body>
  <header>logo</header>
</body>

二是媒体元素；

Audio音频

Video视频

媒体元素属性：

1，controls 显示控制面板

2，autoplay 视频自动播放

3，muted 视频静音

代码：


<style>
    header{
      width: 800px;
      border: 1px solid red ;
      margin:0 auto ;
    }
    video{
      width: 50%;
    }
</style>
</head>
<body>
  <!-- 布局元素 -->
  <header>logo</header>
  <!-- 媒体元素 -->
  <!-- 音频播放 -->
  <audio src="media/again.mp3"  controls></audio>
  <!--视频播放 autoplay是自动的意思  muted 是静音的意思 设置自动播放必须设置静音 -->
  <video src="media/video.mp4" controls autoplay muted></video>
</body>
</html>