目录
html5日期控件https://www.jb51.net/html5/636656.html4.其他控件
一、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-CSDN博客
HTML中插入自动播放的背景音乐-亲测_html自动播放音乐_Qianmo_er的博客-CSDN博客
2.视频标签video
（1）基本格式
<video src="media/explore_promo.mp4" controls>你的浏览器不支持此标签</video>
（2）不同格式视频文件兼容（用来解决浏览器不支持该格式的情况）
<video controls>
<source src="mp4视频文件" type="video/mp4">
<source src="ogg视频文件" type="video/ogg">
</video>
3.属性值
（1）自动播放 autoplay（2）静音 muted
（3）单曲/单视频循环播放 loop
（4）封面 poster
（5）音频/视频控件 controls
tips：在Chrome中 静音状态下视频或音频才会自动播放
controls 音频/视频控件
autoplay 自动播放
poster 设置封面
muted 静音
单曲循环 loop 
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
