1.iframe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后台</title>
<style>
@import url('./static/css/admin.css');
</style>
</head>
<body>
<!-- <figure>
<figcaption>导航</figcaption>
<div class="first">
<a href="https://j.map.baidu.com/d0/Bhdu" target="city">合肥市</a>
<a href="https://j.map.baidu.com/45/g" target="city">上海市</a>
<a href="https://j.map.baidu.com/fe/J" target="city">杭州市</a>
</div>
<div class="seconde">
<iframe src="./static/images/girl.jpg" frameborder="0" name="city" width="1000px" height="1000px"></iframe>
</div>
</figure> -->
<header>
<h1>网站后台管理系统</h1>
<section>
<em>admin</em>
<button onclick="location.href='logout.php'">退出</button>
</section>
</header>
<nav>
<a href="../1017/demo1.html" target="content">元素属性</a>
<a href="../1017/demo2.html" target="content">布局元素</a>
<a href="../1017/demo3.html" target="content">图文列表</a>
<a href="../1017/demo4.html" target="content">图片链接与列表</a>
<a href="../1017/demo5.html" target="content">细说表格</a>
<a href="../1018/demo1.html" target="content">表单元素与控件</a>
<a href="demo1.html" target="content">音频与视频元素</a>
</nav>
<iframe src="" name="content"></iframe>
</body>
</html>
a的target和iframe的name一一对应
2.选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>音频</title>
<style>
p{
background-color: red;
}
</style>
</head>
<body>
<video src="./static/images/test.mp4" controls autoplay muted loop poster="static/images/girl.jpg"></video>
<audio src="" controls autoplay muted></audio>
<p>aaa</p>
<p>bbb</p>
<p>ccc</p>
</body>
</html>