HTML 5 基础

欢迎光临我的博客[http://poetize.cn],前端使用Vue2,聊天室使用Vue3,后台使用Spring Boot

HTML 参考手册

HTML 5 视频

controls 属性供添加播放、暂停和音量控件。
<video src="movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>

video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式:
<video id="video" width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>


属性	                值	            描述
autoplay       autoplay	    如果出现该属性,则视频在就绪后马上播放。
controls        controls	    如果出现该属性,则向用户显示控件,比如播放按钮。
height	     pixels	            设置视频播放器的高度。
loop              loop	            如果出现该属性,则当媒介文件完成播放后再次开始播放。
preload	    preload	    如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
src	            url	            要播放的视频的 URL。
width	    pixels	            设置视频播放器的宽度。

Video + DOM
var myVideo=document.getElementById("video");
myVideo.play(); 
myVideo.pause(); 
myVideo.width=320; 

HTML 5 音频

<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>

source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式:
<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

属性            	值	               描述
autoplay	    autoplay	    如果出现该属性,则音频在就绪后马上播放。
controls	    controls	    如果出现该属性,则向用户显示控件,比如播放按钮。
loop	            loop	            如果出现该属性,则每当音频结束时重新开始播放。
preload	    preload	    如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
src	            url	            要播放的音频的 URL。

HTML5 Input 类型

E-mail: <input type="email" name="user_email" />    //在提交表单时,会自动验证 email 域的值。
Homepage: <input type="url" name="user_url" />    //在提交表单时,会自动验证 url 域的值。
Points: <input type="number" name="points" min="1" max="10" />
Points: <input type="number" name="points" min="1" max="10" />    //range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。
Date: <input type="date" name="user_date" />    //日期选择器
HTML5 拥有多个可供选取日期和时间的新输入类型:
    date - 选取日、月、年
    month - 选取月、年
    week - 选取周和年
    time - 选取时间(小时和分钟)
    datetime - 选取时间、日、月、年(UTC 时间)
    datetime-local - 选取时间、日、月、年(本地时间)
posted @ 2019-08-13 13:45  LittleDonkey  阅读(141)  评论(0编辑  收藏  举报