HTML5新增标签

pro1822

已于 2022-03-29 01:28:40 修改

阅读量609

点赞数

分类专栏： HTML+CSS基础文章标签： html5

于 2022-03-29 01:28:23 首次发布

本文链接：https://blog.csdn.net/qq_41523175/article/details/123808686

版权

HTML+CSS基础专栏收录该内容

15 篇文章 6 订阅

订阅专栏

一、什么是HTML5？

HTML5，就是HTML的第五次重大修改，简称“H5”。

H5有哪些新特性呢？我们一起来看看。

二、布局元素

1、含义

布局元素相当于一个有意义的<div>。

意思就是，原本使用div的地方，可以使用布局元素，是同等效果（可以相互替换）。

并且，有其语义在，方便阅读。

2、常见的布局元素有：

header：网页头部

nav：导航栏

aside：侧边栏

article：显示文章

section：布局的一部分

footer：网页页脚

3、举个例子：

我们写个<header></header>：

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

<body>
    <header>头部：header</header>
</body>

效果如下：

我们将<header>标签，替换为：<div>标签，也是同样的效果。

三、媒体元素

1、音频（audio）

    <audio src="../audio/陈粒 - 光.mp3" controls></audio>

【controls】是调用浏览器自带的【播放控制面板】。

也可以写个按钮，通过javaScript调用音频播放的接口，实现自定义样式。

2、视频（video）

    <video src="../video/字母歌.mp4" controls muted autoplay></video>

muted：静音

autoplay：自动播放

必须设置静音（muted）属性，自动播放（autoplay）才有效。

四、画布（<canvas>）

五、SVG（定义矢量图）

六、表单新特性