目录
1.超链接
2.页面布局
3.一个网页的基础元素
4.多媒体的嵌入
（1）图片的插入
（2）视频的插入
（3）音频的插入
在HTML中，我们通过写入一个个不同的元素，添加文本和图像，把一个空白的页面变得丰富多彩，当我们每次在<html>这个大的元素中插入若干的元素时，我们可以把“元素”看作是一个“盒子”，我们会在“html”这个大的盒子里面放入一些小盒子，而我们可以在“头部”（即<head>中），通过CSS来对盒子的属性进行修改。本期我们会介绍一些可以丰富你的网页的元素和知识，让你可以自己做出一个简单的静态页面。
1.超链接
超链接可以让我们从一个文档跳到另外一个文档，这使得各个文档之间实现了“互联”，我们可以把我们页面上的大部分元素都变成一个链接，一小段文字、一张图片、甚至是一个视频！
我们先看一个简单的超链接示例：
<a href="http:baidu.com">
<p>点击我！</p>
</a>在这个示例中，我们用a元素把p元素包裹住了，这样一个当我们点击这个p元素，他就会实现页面的跳转
当我们点击这个文本之后，我们就会跳转到百度的页面上面：
那么他跳会跳转到哪个页面就取决于“href”，“href”用于指定链接的目标URL，这里面可以是一个网址，也可以是你本机的一个文件目录。
同理，我们可以把文本改成图片或者视频，下文会有具体的操作。
2.页面布局
上文提到，我们在HTML中放入一个个元素就像放入一个个盒子一样，并且可以改变盒子们的属性，那么当我们通过代码把一个个“盒子”按照自己的喜好摆放好，就可以实现下图中的效果：
我们在给每一个盒子添加上自己喜欢的颜色，再插入一些文本和图片后：
欸！我们就完成了一个标准而又美观的页面，是不是感觉很简单（得意龙图.jpg）
当然，如果要实现和上面一样的效果还需要更多其他的东西，我们现在只能做出一个“外壳”
3.一个网页的基础元素
当我们点进去一个网站，我们很容易发现一个网站被分为了几大块，页面的上端会有导航栏，侧面也会有侧边栏，来指引用户到他们想到的位置，而中心区域则是一些主要内容，下方的页脚则通常放一些备案号、网站负责人的信息。而贴心的HTML专门为这些区域设立了专门的元素
| 元素 | 含义 |
| <header> | 页眉 |
| <nav> | 导航栏 |
| <main> | 主内容 |
| <aside> | 侧边栏 |
| <footer> | 页脚 |
4.多媒体的嵌入
一个页面中如果只有文字，未免显得过于枯燥，所以下面我们会详细介绍HTML中可以嵌入图片、音频、视频的一些基础元素。
（1）图片的插入
前面的文章提到过，我们可以用<img>元素来进行图片的插入（注意它不是闭合元素，写代码的时候不要写</img>!!!）
下面是一个简单的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello！</title>
</head>
<body>
<img src="dwqs.jpg" >
</body>
</html>这里src就是指明图片的位置，这样当我们再次打开浏览器时我们就能看到一个图片被放在了页面上：
但是当我们插入完之后更多的问题就会出现，比如：如果我们想改变图片的大小，或者调整一下他的位置，该如何操作？
或这，如果图片到时候意外丢失，别人在浏览我们的网站时怎么知道其中的内容？
当我们想改变图片的大小时，可以使用这两个参数：
| 图片的高度 | height |
| 图片的宽度 | width |
比如我们想让上面的图片变小一些，我们可以把我们的代码改一改：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello！</title>
<style>
img {
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<img src="dwqs.jpg" >
</body>
</html>我们通过在头部添加一个<style>元素来对图片的大小进行改写（上面的示例就是内部CSS，一般自己写一个小的网站可以使用内部CSS）
这样，我们会发现网页的那个图片缩小了：
那么怎么控制他的位置呢？
我们可以通过指定元素的边距变大，间接性的改变图片的位置：
| 代码 | 含义 |
| margin-left | 向右 |
| margin-right | 向左 |
| margin-top | 向下 |
| margin-bottom | 向上 |
（因为我我们代码时通过改变边距来实现的的位置变化，所以当我们输入“margin-left”时，是改变了元素的左边距，进而使得图片向右移动）
现在，让我们对之前的代码进行更改：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello！</title>
<style>
img {
height: 100px;
width: 100px;
margin-left: 1500px;
margin-top: 700px;
}
</style>
</head>
<body>
<img src="dwqs.jpg" >
</body>
</html>这样我们的图片就从左上角到达了右下角：
是不是很有意思？
那么让我们解决第二个问题：如果图片丢失或损坏，我们怎么让别人知道图片的内容？
答案很简单，只需要稍微改动一小点：
<img src="dwqs.jpg" alt="一个戴维琼斯人仔" >如果我们的图片没有任何问题，那么alt中的内容就不会出现，页面还是正常的显示我们的图片，但当我们不小心把图片的名字写错了，像这样
<img src="dwqsssssssss.jpg" alt="一个戴维琼斯人仔" >这样页面就会显示alt内部的文字：
（2）视频的插入
对于视频的插入，它和图片插入有很多相似之处：
<video src="example.webm" controls>
<p>
若无法正常播放，可点击<a href="example.mp4">此链接</a>观看。
</p>
</video>
①src的作用和图片插入时的作用一样
②controls：这个会让视频拥有视频的进度条和音频控制条
③<video>内部的则是后备元素，若当前浏览器不支持<video>时我们依然可以让用户看到视频。
<video>包含很多特性可以对视频窗口进行调整：
| 特性 | 作用 |
| height/width | 调整高度/宽度 |
| autoplay | 自动播放 |
| loop | 自动循环播放 |
| muted | 默认关闭声音 |
| poster | 会在视频播放前出现的一个画面 |
（3）音频的插入
<audio>和<video>只有细微的差别，它不能调整大小，也不能支持poster等属性。
以上就是HTML静态页面的一些基础元素和性质:)
