<!--
布局标签:布局使用div+css
布局标签div,span
div独占一行,用的最多。
span是行内元素。
基本不需要属性,用css就行
主要学习div的布局思路。
主打一个从外向内。
H5新增语义化布局标签:
<header>头部</header>
<nav>导航</nav>
<footer>页脚</footer>
<aside>侧边栏</aside>
<article>文字、博客、帖子</article>
<section>article中的一个章节</section>
H5新增视频音频标签:
video:定义视频
<video src=".\video.mp4" width="200" autoplay muted loop>您的浏览器不支持视频,请升坤</video>
属性:
src:要播放的视频的URL。
width:设置宽度。
height:设置高度。
autoplay:自动播放。
controls:向用户显示控制按钮。
loop:循环播放。
muted:静音。
preload:提前加载。
poster:视频下载时的封面。
src与href的区别:
src用于替换当前元素。
href用于在当前文档和引用资源之间确立联系。
扩展:src指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在的位置href指向网络资源所在的位置,建立和当前元素之间的链接。
-->
<!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>Document</title>
</head>
<body>
<!-- 上来第一步先来一个和网页一样大的div -->
<!-- 第二步括住全体元素的边缘 -->
<!-- 接下来一层层套圈 -->
<!-- 最外层容器 -->
<div>
<div>头部</div>
<div>导航</div>
<!-- 主体 -->
<div>
<div>文章</div>
<div>侧边栏</div>
</div>
<div>页脚</div>
</div>
<!-- H5布局 -->
<div>
<header>脑袋</header>
<nav>导航</nav>
<!-- 主体 -->
<div>
<article>
<section>文章1</section>
<section>文章2</section>
</article>
<aside>侧边栏</aside>
</div>
<footer>页脚</footer>
</div>
<!-- H5新增视频音频 -->
<div>
<video src=".\video.mp4" width="200" autoplay muted loop>您的浏览器不支持视频,请升坤
</video>
</div>
<!-- H5新增音频 -->
<div>
<audio src="./music.mp3" autoplay controls loop muted>
您的浏览器不支持音频,请升坤
</audio>
</div>
</body>
</html>