响应式布局设计+网页播放音频、视频、日期、拖拽条和搜索条_响应式布局放视频用什么标签或组件-CSDN博客

本文链接：https://blog.csdn.net/yin_chenglong/article/details/79895438

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title></title>


	<!--
	响应式布局设计
	-->
	<!--
	让hmtl5适应电脑和手机的不同的分辨率
	-->
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<style type="text/css">
	/*宽度在370和700，用此样式
	*/
	@media only screen and (min-width: 370px) and (max-width:700px) {
	body{
	background-color: red;
	}
	}

	/*宽度小于370，用此样式
	*/
	@media only screen and (max-width: 370px) {
	body{
	background-color: blue;
	}
	}

	</style>
	</head>
	<body>
	<nav><a href="#">百度</a>\|<a href="#">京东</a></nav>
	<header>我是头部</header>
	<h1>我是一级标题</h1>
	<aside>我是侧边栏</aside>
	<article>我是文章</article>
	<section>我是一个独立的块</section>

	<h2>我是二级标签</h2>

	<footer>底部的联系我们</footer>
	<meter max="100" value="10">30</meter>
	<time>当前时间是 11:21</time><br />
	<progress max="100" value="50"></progress><br />
	<audio src="horse.ogg" controls="controls"></audio><br />
	<video src="movie.ogg" controls="controls"></video><br />

	<input type="number" max="10" min="5"/>
	//οnchange="alert('11111')"文本框提示括号内信息数字:<input type="number" max="80" min="18" οnchange="alert('11111')"/><br /> 邮箱:<input type="email" /><br /> 我的主页url:<input type="url" /><br /> 日期:<input type="date" /><br /> 拖拽条<input type="range" max="100" min="1" /> <br /> 搜索条:<input type="search" /><br /> <input type="submit" value="提交" />
	</body>
	</html>