HTML5新增标签

最新推荐文章于 2023-07-18 20:26:08 发布

小绵杨Yancy

最新推荐文章于 2023-07-18 20:26:08 发布

阅读量1.2k

点赞数 1

分类专栏：我好像不会HTML 文章标签： html5 html 前端

本文链接：https://blog.csdn.net/ZHANGYANG_1109/article/details/122747833

版权

我好像不会HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.新增语义化标签

HTML5中加入了一些语义化标签，来更清晰的表达文档结构。主要有header、nav、section、article、aside和footer。使用新增的语义元素，可以使网页结构更加清晰。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
    <header>这是头部</header>
    <nav>这是导航</nav>
    <aside>这是侧边</aside>
    <section>
        <article>
            文章1
        </article>
        <article>
            文章2
        </article>
    </section>
    <footer>2021.1.29</footer>
</body>
</html>

2.新增表单元素

2.1 datalist标签

<datalist> 标签规定了 <input> 元素可能的选项列表。
<datalist> 标签被用来在为 <input> 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。
请使用 <input> 元素的 list 属性来绑定 <datalist> 元素。

<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

在这里插入图片描述
当输入前几个字母还会自动筛选选项，可用于输入提示。

3.新增多媒体元素

3.1音频audio

<audio> 标签定义声音，比如音乐或其他音频流。
在这里插入图片描述

    <audio controls>
        <source src="https://www.runoob.com/try/demo_source/horse.ogg" >
        <source src="https://www.runoob.com/try/demo_source/horse.mp3" >
      您的浏览器不支持 audio 元素。
      </audio>

在这里插入图片描述

3.2视频video

定义视频，比如电影片段或其他视频流。
目前，元素支持三种视频格式：MP4、WebM、Ogg。
在这里插入图片描述

    <video width="320" height="240" controls>
        <source src="https://www.runoob.com/try/demo_source/movie.mp4" type="video/mp4">
        <source src="https://www.runoob.com/try/demo_source/movie.ogg" type="video/ogg">
        您的浏览器不支持 video 标签。
    </video>

在这里插入图片描述

3.3 source标签

<source> 标签为媒体元素（比如 <video> 和 <audio>）定义媒体资源。
<source> 标签允许您规定两个视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

 <picture>
        <source media="(min-width:650px)" srcset="https://static.runoob.com/images/runoob-logo.png">
        <source media="(min-width:465px)" srcset="https://static.runoob.com/images/code-icon-script.png">
        <img src="https://static.runoob.com/images/mix/hjkg_icon.png"  style="width:auto;">
      </picture>

下图分别时不同屏幕宽度显示的图片。
在这里插入图片描述

3.写在最后

自1999年以后HTML 4.01 已经改变了很多,今天，在HTML 4.01中的几个已经被废弃，这些元素在HTML5中已经被删除或重新定义。
为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，更好的形式处理，和几个api拖放元素，定位，包括网页应用程序缓存，存储，网络工作者，等。

小绵杨Yancy

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5新增标签

目录1.新增语义化标签2.新增表单元素2.1 datalist标签3.新增多媒体元素3.1音频audio3.2视频video3.3 source标签3.写在最后1.新增语义化标签HTML5中加入了一些语义化标签，来更清晰的表达文档结构。主要有header、nav、section、article、aside和footer。使用新增的语义元素，可以使网页结构更加清晰。<!DOCTYPE html><html lang="en"><head> <met
复制链接

扫一扫