【前端】【html5/css3】前端学习之路（一）（html5新标签/多媒体标签）

最新推荐文章于 2025-06-18 13:16:26 发布

原创最新推荐文章于 2025-06-18 13:16:26 发布 · 1.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#html5/css3

前端同时被 2 个专栏收录

28 篇文章

订阅专栏

html5/css3

4 篇文章

订阅专栏

本文介绍了HTML5的新标签和多媒体特性，包括文档类型设定、字符设定、新标签如<header>、<nav>等的使用，新增的input type属性，以及<audio>和<video>标签的多媒体播放功能，详细讲解了不同浏览器的兼容性处理方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、HTML5新标签及特性

发展历程：

1.文档类型设定

获取结构方式：

Document：

HTML： webstorm 输入 html:4s 再点击tab即可
XHTML：webstorm 输入 html:xt 再点击tab即可
HTML5：webstorm输入 html:5或者 ! 再点击tab即可

2.字符设定

<meta http-equiv="charset" content="utf-8">

HTML与XHTML中建议这样去写

```
<meta charset="utf-8">
```
HTML5的标签中建议这样去写

3.常用新标签

header：定义文档的页眉头部
nav：定义导航链接的部分
footer：定义文档或节的页脚底部
article：定义文章。
section：定义文档中的节（section、区段）
aside：定义其所处内容之外的内容侧边

以上属性基本都只是起一种标识作用，其本身作用与div作用并无二致，是为了用户少用div+class标识CSS这种相对麻烦的方法，而直接采用这些属性来标识CSS，更加直接且简明易懂。但是，这些属性更多是应用在手机端，因为其新兴性，所以兼容性较差，网页端不建议使用。

<div class="newtype">
    <header>我是header标签</header>
    <nav>我是nav标签</nav>
    <footer>我是footer标签</footer>
    <article>我是article标签</article>
    <section>我是section标签</section>
    <aside>我是aside标签</aside>
</div>

datalist 标签定义选项列表。请与 input 元素配合使用该元素

    <input type="text" value="请输入明星" list="star"/>
    <datalist id="star">
        <option >刘德华</option>
        <option >刘若英</option>
        <option >刘晓庆</option>
        <option >戚薇</option>
        <option >戚继光</option>
    </datalist>

fieldset 元素可将表单内的相关元素分组，打包 legend 搭配使用

fieldset {
            width: 500px;
            height: 150px;
            background-color: pink;
            padding: 30px 30px;
        }

<div class="fields">
    <fieldset>
        <legend>用户登录</legend>
        <h3>标题</h3>
        用户名: <input type="text"><br /><br />
        密　码: <input type="password">
    </fieldset>
</div>

4.新增input type属性

在这里提一下，之前做表格，比如用户名、密码等选项时，都用的是table或者ul，这里我们使用新的方法，用dl+dt+dd来做，因为这样做可以让我们单独设置dt，也就是项目名的css，而无需再为其添加类名，更加简便可控。

示例：


.box {
    width: 600px;
    border: 1px solid #ccc;
    margin: 0 auto;
}
.box dl {
    overflow: hidden;
    margin: 15px 30px;
}
.box dl dt, .box dl dd {
    float: left;
}
.box dl dt {
    width: 100px;
}
.box dl dd  {
    width: 200px;
}

<div class="input">
    <form action="" class="box">
        <dl>
            <dt>用户名</dt>
            <dd><input type="text"></dd>
            <dd>*此选项不能为空</dd>
        </dl>
        <dl>
            <dt>邮箱</dt>
            <dd><input type="email"></dd>
            <dd>*此选项不能为空</dd>
        </dl>
        <dl>
            <dt>联系方式</dt>
            <dd><input type="tel"></dd>
            <dd>*此选项不能为空</dd>
        </dl>
        <dl>
            <dt>链接</dt>
            <dd><input type="url"></dd>
            <dd>*此选项不能为空</dd>

        </dl>
        <dl>
            <dt>数字</dt>
            <dd><input type="number"></dd>
            <dd>*此选项不能为空</dd>
        </dl>
        <dl>
            <dt>搜索</dt>
            <dd><input type="search"></dd>
            <dd>*此选项不能为空</dd>
        </dl>
        <dl>
            <dt>自由拖动</dt>
            <dd><input type="range"></dd>
            <dd>*此选项不能为空</dd>
        </dl>
        <dl>
            <dt>小时时分</dt>
            <dd><input type="time"></dd>
            <dd>*此选项不能为空</dd>
        </dl>
        <dl>
            <dt>年月日</dt>
            <dd><input type="date"></dd>
            <dd>*此选项不能为空</dd>
        </dl>
        <dl>
            <dt>时间</dt>
            <dd><input type="datetime"></dd>
            <dd>*此选项不能为空</dd>
        </dl>
        <dl>
            <dt>月份</dt>
            <dd><input type="month"></dd>
            <dd>*此选项不能为空</dd>
        </dl>
        <dl>
            <dt>星期/年</dt>
            <dd><input type="week"></dd>
            <dd>*此选项不能为空</dd>
        </dl>
        <dl>
            <dt></dt>
            <dd><input type="submit" value="提交">  <input type="reset" value="重置"></dd>

        </dl>
    </form>
</div>

效果：

email/url/number，再提交时，如果格式出错，都会有系统提示，如：

其他属性可以根据代码自行试验。

5.常用新属性

示例：

<div class="new">
    <form action="">
        用户名： <input type="text" placeholder="请输入用户名" autofocus> <br />
        上传头像： <input type="file" name="" id="" multiple > <br />
        昵称：  <input type="text" required accesskey="s"> <br />
        <input type="submit" value="提交按钮">

    </form>
</div>

效果：

二、多媒体标签

1.播放音频

H5通过音频标签<audio>来解决音频播放的问题。

标签中的属性：

autoplay：代表自动播放

controls：代表显示控制元件

loop：代表循环播放

audio标签的使用有两个方法：

方法一：

<audio src="bgsound.mp3" autoplay controls loop></audio>

这个方法兼容性比较差，因为不同浏览器可支持播放的格式是不一样的，如下：

此时为了满足不同浏览的兼容。

方法二：

<audio autoplay controls loop>
    <!--下方三者是顺序选择的，也就是说MP3如果不兼容则顺延到下一个格式-->
    <!--两者都不兼容则显示下方文字-->
    <source src="bgsound.mp3"/>
    <source src="music.ogg" />
    您的浏览器暂时不支持HTML音频播放功能
</audio>

2.播放视频

播放视频使用的video标签。

同样，video在不同浏览器也有不同的兼容性。

方法一（直接从网页下方的分享复制链接）：

<iframe src="//player.bilibili.com/player.html?aid=27644771&cid=47707660&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

效果：

方法二：

<video src="movie04.ogg" autoplay controls loop></video>

效果：

但是为了兼容性考虑，最佳的方法是：

方法三：

<video autoplay controls loop>
    <!--下方三者是顺序选择的，也就是说MP4如果不兼容则顺延到下一个格式-->
    <!--两者都不兼容则显示下方文字-->
    <source src="mp4.mp4"/>
    <source src="movie04.ogg" />
    您的浏览器暂时不支持HTML视频播放功能
</video>

效果：