HTML学习笔记---HTML5新特性

欧泡果奶O

已于 2022-01-19 17:43:59 修改

阅读量155

点赞数

文章标签： html html5 前端

于 2022-01-19 12:46:31 首次发布

本文链接：https://blog.youkuaiyun.com/wykkk1/article/details/122577365

版权

本文介绍了HTML5的主要新增特性，包括语义化标签、多媒体标签、新的input类型及表单属性等内容，帮助读者理解如何利用这些特性提升网页的可读性和功能性。

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

一、HTML新特性

HTML5的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单、新的表单属性等。

这些新特性都有兼容性问题，基本都是IE9+以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。

1.1 HTML5新增的语义化标签

以前布局，我们基本用div来做，div对于搜索引擎来说，是没有语义。

    <div class="header"></div>
    <div class="nav"></div>
    <div class="content"></div>
    <div class="footer"></div>

HTML5新增的语义标签

< header > :头部标签
< nav >: 导航标签
< article >：内容标签
< section >:定义文档某个区域
< aside >:侧边栏标签
< footer >: 尾部标签

注意：

这种语义化标准主要是针对搜索引擎的
这些新标签页面中可以使用多次
在IE9中，需要把这些元素转换为块级元素
其实，移动端更喜欢使用这些标签

<style>
        header {
            height: 120px;
            width: 800px;
            background-color: pink;
            border-radius: 15px;
            margin: 15px auto;
        }
        section {
            width: 500px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
   <header></header>
   <nav></nav>
   <section></section>
</body>

1.2 HTML5新增的多媒体标签

新增的多媒体标签主要包含两个：

1.音频：<audio>

2.视频：<video>

使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用flash和其他浏览器插件。

1.2.1 视频<video>

当前<video>元素支持三种视频格式：尽量使用MP4格式。

   <video src="" controls="controls"></video>

视频<video>-----常见属性

1.2.2 音频<audio>

<audio src="文件地址" controls="controls"></audio>

多媒体标签总结：

音频标签和视频标签使用方式基本一致
浏览器支持情况不同
谷歌浏览器把音频和视频自动播放禁止了
我们可以给视频标签添加muted属性来静音播放视频，音频不可以(可以通过JavaScript解决)
视频标签是重点，我们经常设置自动播放，不适用controls控件，循环和设置大小属性

1.3 HTML5新增的input类型

 <form action="">
            <ul>
                <li>邮箱: <input type="email" /></li>
                <li>网址: <input type="url" /></li>
                <li>日期: <input type="date" /></li>
                <li>时间: <input type="time" /></li>
                <li>数量: <input type="number" /></li>
                <li>手机号码: <input type="tel" /></li>
                <li>搜索: <input type="search" /></li>
                <li>颜色: <input type="color" /></li>
                <!-- 当我们点击提交按钮就可以验证表单了 -->
                <li> <input type="submit" value="提交"></li>
            </ul>
        </form>

1.4 HTML5新增表单属性

<form action="">
            <input type="search" name="sear" id="" required="required" placeholder="pink老师" autofocus="autofocus" autocomplete="off">
            <input type="file" name="" id="" multiple="multiple">
            <input type="submit" value="提交">
    </form>

可以通过以下设置方式修改placeholder里面的字体颜色：

input::placeholder {
            color: pink;
        }