向页面插入图片有两种。一种是直接通过DW的插入功能，插入图片。
另一种是有较高逼格的方法，就是直接写代码插入图片。
其实，插入图片的时候有很多注意事项，但是这里又不能一下子讲太多。所以在之后的课程中向大家细细讲解。

大家会发现，直接插入的图片，是以原大小插入的。如果图片太大，会超过页面边界。
有些人会直接把图片裁小，再插入。如果页面哪天改版想要放大此处图片，那岂不是要重新做一遍大图？
是的，如今是响应式网站的时代，很多东西不能做死。图不是不能裁，我们要裁到一个有可能需要的最大尺寸，再通过代码来设置宽度。这样图片运用的灵活度会大大增强。
所以，先把标签里的宽度和高度的声明删掉。

然后再往样式表里添加样式。以此来控制图片的尺寸。
由于网页里的图片很多，我们在写样式表的时候绝对不能直接用img来当选择器名称进行样式的设置。
一定要先指定好是哪个容器里的哪张图片。
除非页面所有图片或者绝大部分图片有很多相同的声明，这时可以直接以img作为选择器名称进行样式的设置。如 img{display:block}。

这里以.content里的img为例：
（由于img是图片标签，是一个html固定标签，所以不用加.号）

.content img{
	width:100%;
	max-width:600px;
	margin:15px auto 0;
	display:block;
	}

设置图片宽度为100%。这样图片不管什么时候它相对于父级容器是100%的宽度。这里img的父级容器是p。p变窄，img也会跟着被压缩。由于浏览器默认是等比缩放的，所以不用设置高度值。只要设定了宽度，高度会跟着等比缩小。

但是设置了100%之后，如果页面宽度变大，图片也会变得超级大。过大的图片，也许并不是我们想要的。这时，可以设定图片的最大宽度。这里设置最大宽度为600px。这样图片会在0~600px的范围之内可以随意缩放。

接下来适当调整边距。通过margin属性来控制图片的外边距。使它跟文本的位置处于一个比较合理的位置。
那么问题来了。设置过程中发现，图片有的时候会跟在文字的后面，就像跟文字在一行。
原因是，默认情况下图片是个行内元素（内联元素），一张图片相当于一个文字。
这里可以通过display:block的方法将图片设定成块状元素，块状元素前后有换行符（看不见的）。这样它会脱离文本行列。单独占一行。

display 属性

display 属性规定元素应该生成的框的类型。下面先简单的举几个常用的例子。
display:none 隐藏元素
display:inline 此元素会被显示为内联元素（行内），元素前后没有换行符。
display:block 此元素将显示为块级元素，此元素前后会带有换行符。
display:inline-block 行内块元素。是不是蒙圈了？简单的说，行内元素不能设置高度宽度的，而块状元素可以设置宽高。但又想跟文本一样排成一行，又想有宽高的属性怎么办？那就用inline-block。
以上为常用的display的用法。
更多内容：
http://www.w3school.com.cn/cssref/pr_class_display.asp

下面是这节课的主角：

img标签：

用来向页面中插入图片。
用法：

img标签有两个必需的属性：src 属性 和 alt 属性。

src属性规定图像的路径、地址。（这部分内容有点复杂，以后细讲。）
alt属性规定图像的替代文本。

Alt属性：

它的作用是当HTML元素本身的物件无法被渲染时，就显示alt属性中设置的文字作为一种补救措施。网速太慢、src 属性中的错误、浏览器禁用图像、用户使用的是屏幕阅读器等等不能正常显示图片的时候就会显示alt属性中设置的文本。
最重要的一点是，搜索引擎在搜集网页的时候是无法识别图片内容的。为了让图片有具体含义，建议设置alt。图片alt属性是搜索引擎唯一能识别的图片信息。因此，在优化网站时，尽可能利用alt属性阐述图片的主题内容。

相关英语：

display = 显示、陈列
inline = 内联、行内
img = image = 影像、肖像
src = source = 源、根源、本源