HTML5新增结构与多媒体元素-优快云博客

本文链接：https://blog.youkuaiyun.com/YourLie_in_April/article/details/123846007

HTML5新增结构元素：

header：定义网页的头部

nav：定义网页的导航

footer：定义网页的底部

aside：定义网页的侧边

section：定义网页的区块

article：定义网页的文章

canvas：定义图形（画布）

contentEditable：规定是否允许用户编辑内容

hidden：规定对元素进行隐藏

（main：用于包裹主题内容）

注意：html5标签有兼容性问题（老浏览器没效果）

多媒体标签：

audio: 音频标签（在网页中播放音频）video: 视频标签（在网页中播放视频）

（controls 是否显示播放控件、autoplay 自动播放、loop 循环播放）

注意：autoplay 自动播放和 loop 循环播放有兼容性问题。

小知识点：

100vh： 是视口的整个高度即整个屏幕的高度。

100vw：是整个屏幕的宽度。

line-height: calc( ); 用来计算（使用减法时“-”左右需要空格）

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>免费体验登录页面</title>
    <style>
    * {
  padding: 0;
  margin: 0;
}
body {
  background-image: url(./img/bg.jpg);
  background-repeat: no-repeat;
}
#box {
  height: 400px;
  padding-left: 30px;
  background-image: url(./img/btn.jpg);
  background-repeat: no-repeat;
  background-position: 80px 290px;
}
#box ul {
  list-style: none;
  padding-top: 90px;
}
#box ul li {
  color: white;
  height: 40px;
}
#box ul li span {
  color: red;
}
    </style>
</head>
<body>
    <div id="box">
        <form>
            <ul>
                <li><label for="xm"><span>*</span>姓名:</label><input type="text" name="xm" id="xm"></li>
                <li><label for="yx"><span>*</span>邮箱:</label><input type="email" name="yx" id="yx"></li>
                <li><label for="dh"><span>*</span>电话:</label><input type="number" name="dh" id="dh"></li>
                <li><label for="xb">性别：</label><select name="xb" id="xb"><option>请选择</option></select></li>
                <li><label for="nl">年龄：</label><select name="nl" id="nl"><option>请选择</option></select></li>
            </ul>
        </form>
    </div>
</body>
</html>

总结：望大佬指正。

HTML5新标签