大家好，欢迎来到IT知识分享网。
目录
html5日期控件https://www.jb51.net/html5/636656.html4.其他控件
一、html5是什么
二、新增语义化标签
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
<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
<video src="media/explore_promo.mp4" controls>你的浏览器不支持此标签</video><video controls> <source src="mp4视频文件" type="video/mp4"> <source src="ogg视频文件" type="video/ogg"> </video>3.属性值
（2）静音 muted
（3）单曲/单视频循环播放 loop
（4）封面 poster
（5）音频/视频控件 controls
tips：在Chrome中 静音状态下视频或音频才会自动播放
controls 音频/视频控件 autoplay 自动播放 poster 设置封面 muted 静音 单曲循环 loop 免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/134817.html
