html5-语义化标签、表单控件、多媒体控件_日期的标签 html5-优快云博客

1. HTML5 是最新的 HTML 标准。
2. HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。
3. HTML5 拥有新的语义、图形以及多媒体元素。
4. HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。
5. HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。

二、新增语义化标签

html5中新增的语义化标签可以分为两大类：块元素标签和内联元素标签。

1.块元素标签

（1）<header></header>:定义文档的头部区域

<header>我是头部</header>

（2）<nav></nav>：定义导航链接的部分

<nav>我是导航</nav>

（3）<section></section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

<section>
    <header>section中的头部</header>
    <article>section中的内容区域</article>
    <footer>section中的脚注</footer>
</section>

（4）<footer></footer>：定义页面的页脚。

<footer>我是页脚</footer>

(5）<main></main>:定义文档的主体部分。

<main>文章主体部分放在这里</main>

（6）<aside></aside>：定义页面的侧边栏内容。

<aside>我是侧边栏</aside>

（7）<article></article>：定义一个文章区域。

<article>这里放文章哦</article>

（8）<figure></figure>：规定独立的流内容（图像、图表、照片、代码等等）。

<figure>
    <figcaption>独立流内容标题</figcaption>
    <!-- 独立流内容（图标、代码、图片、表格等） -->
</figure>

（9）<details></details>：用于描述文档或文档某个部分的细节。

<details>
    <summary>概要</summary>
  <!-- 文字/图片等 -->
</detail>

2.内联元素标签

（1）<progress></progress>：定义运行中的进度（进程）。

<progress value="进度值" min="最小值" max="最大值">
你的浏览器不支持此标签
</progress>
<!-- 若浏览器版本太低 则不显示进度条 显示浏览器不支持此标签  -->

（2）<meter></meter>：定义度量衡。仅用于已知最大和最小值的度量。

<meter value="" min="" max="" low="" high="">
your browser is not supported
</meter>
<!-- 若浏览器版本太低 则不显示进度条 显示your browser is not supported -->

（3）<time></time>：定义日期或时间，或者两者。

<time datetime="yyyy-mm-dd"></time>
<!--  表示xxxx年xx月xx日  -->

（4）<mark></mark>：定义带有记号的文本。

<mark>标记</mark>
<!-- 在谷歌浏览器中 默认为黄色背景色标记选中文字  -->

三、新增表单控件

1.数据列表（带搜索功能的下拉框）

（1）基本格式

<input list="id值">
          <datalist id="id值">
          <option value="值">文本</option> 
          <option value="值">文本</option>
            ... 
          </datalist>

（2）实例

<input type="text" list="kouhong">
        <!-- 此标签在IE浏览器中只支持IE10及以上版本 -->
        <!-- 若value值为空，则不支持显示，可以去掉value值，或写上value值 -->
        <datalist id="kouhong">
            <option value="channel">香奈儿</option>
            <option value="dior">雕</option>
            <option value="mac">魅可</option>
            <option value="3ce">3ce</option>
            <option value="lancome">兰蔻</option>
</datalist>

效果：

2.输入框控件

（1）电子邮箱email

<p>邮箱:<input type="email" name="" id=""></p>
        <!-- 只能填入正确的邮箱格式 -->

（2）网址url

<p>网址:<input type="url" name="" id=""></p>
        <!-- 只能填写网址 协议也需要补充完整 -->

（3）搜索域search

  <!-- 搜索域 -->
        <p>搜索域:<input type="search" name="search"></p>

（4）电话号码tel

<!-- 电话号码 -->
        <!-- pattern:格式 模式 -->
        <!-- [0-9]=\d -->
        <!-- \d{11} 代表输入的必须是十一位的数字-->
        <p>电话号码：<input type="tel" name="telephone" pattern="\d{11}" autofocus></p>

（5）数字number

 <p>数字:<input type="number" name="age" value="18" step="2" min="1" max="100"></p>

3.日期控件

效果：

（1）年月日date

<!-- 年月日 -->
        <p>年月日:<input type="date" name="date" value="2023-02-07"></p>

（2）年月month

<!-- 年月 -->
        <p>年月:<input type="month" name="month" value="2023-02"></p>

（3）年周week

<!-- 年周 -->
        <p>年周:<input type="week" name="week" value="2015-W02" ></p>

（4）UTC年月时分datetime

<!-- UTC年月时分秒 -->
        <p>本地时间:<input type="datetime" name="datetime"></p>

（5）本地年月时分datetime-local

 <!-- 本地时间 -->
        <p>本地时间:<input type="datetime-local" name="datetime-local"></p>

（6）时间控件time

<input type="time" value="13:59:59"/>
<input type="time" value="13:59" onchange="timeSelect(value)"/>
  <script>
    function timeSelect(e){
      console.log(e);
    }
  </script>

日期时间控件也支持min和max属性，表示可设置的最小和最大时间

<input type="date" value="2015-09-24" min="2015-09-16" max="2015-09-26"/>

html5日期控件https://www.jb51.net/html5/636656.html
4.其他控件

（1）滑块range

<!-- 滑动条 -->
        <p>滑动条:<input type="range" name="range" value="2" min="0" step="2" max="10"></p>

获取滑块数值

let rangeInput = document.getElementsByName('range')[0];
    rangeInput.onchange = function(){
        console.log(rangeInput.value);
    };

（2）拾色器color

 <!-- 拾色器 -->
        <p>拾色器:<input type="color" name="color" value="#cccccc"></p>
 <!-- value是颜色初始值 只能使用十六进制全写形式表示 -->

四、多媒体标签

1.音频标签audio

autoplay：添加该属性后，音频会自动播放
controls：设置后，显示控件，如播放按钮、音量
loop：添加该属性后，当音频播放结束后会重新开始播放
preload：音频显示页面加载，准备播放，如已添加autoplay,则忽略该属性
src：播放音频的URL（地址）
（1）基本格式

<audio src="yp/sybj.mp3" id="dd" autoplay="autoplay" controls="controls" loop="loop">
你的浏览器不支持</audio>

（2）不同格式音频文件兼容（用来解决浏览器不支持该格式的情况）

<audio controls autoplay muted>
        <source src="media/song.mp3" type="audio/mp3">
        <source src="media/song.ogg" type="audio/ogg">
    </audio>

单个音频播放

html

<button id="click">播放</button>
<audio id="audio" src="/mp3/给我一个理由忘记-黄丽玲.128.mp3" controls="controls" loop="loop"></audio>

js

let butClick = document.getElementById("click");
butClick.onclick = function () {
  let audio = document.getElementById("audio");
  audio.play();
}

音频列表播放

html

<div id="audioBox"></div>

js

  window.onload = function () {
            var arr = [
                    "/mp3/给我一个理由忘记-黄丽玲.128.mp3",
                    "/mp3/给我一个理由忘记-黄丽玲.128.mp3",
                    "/mp3/给我一个理由忘记-黄丽玲.128.mp3",
                    "/mp3/给我一个理由忘记-黄丽玲.128.mp3",
                    "/mp3/给我一个理由忘记-黄丽玲.128.mp3"
                    ]; //把需要播放的歌曲从后往前排
            var myAudio = new Audio();
            myAudio.preload = true;
            myAudio.controls = true;
            myAudio.src = arr.pop(); // 每次读数组最后一个元素
            myAudio.addEventListener('ended', playEndedHandler, false);
            myAudio.play();
            document.getElementById("audioBox").appendChild(myAudio);
            myAudio.loop = false; // 禁止循环，否则无法触发ended事件
            function playEndedHandler() {
                myAudio.src = arr.pop();
                myAudio.play();
                console.log(arr.length);
                !arr.length && myAudio.removeEventListener('ended', playEndedHandler, false);//只有一个元素时解除绑定
            }
        }

HTML5 如何实现播放多个MP3音频_html mp3-优快云博客

HTML中插入自动播放的背景音乐-亲测_html自动播放音乐_Qianmo_er的博客-优快云博客

2.视频标签video