web front-end notes - using pictures

According to notes Shiqianfeng educational video to learn the exercises | learn some time, I have to write a little something necessary ???

1. Use the img tag add an image on a Web page

1.1. I have so few pictures on the computer, I'm going to put it under the images folder for later use

 <div align=center><img src="images/img1.png"/></div>

We can see the effect on the page:

1.2. The same way the pictures are added to it

<body>
    <img src="images/img1.png"/>
    <img src="images/img2.png"/>
    <img src="images/img3.png"/>
    <img src="images/img4.png"/>
    </body>

Here you can see the first four pictures are not put into the first row, and can only be displayed wrap:

We can get a rule:
the display order of the images on the page are: emissions from left to right, and at the bottom of the default image alignment; I when the line is not sufficient enough to put the next FIG., That picture will be wrap to the next line.

2. Adjust the image size

2.1 Setting the width and height properties for the pictures, showing the effect of the following figure:

<img src="images/img1.png" width="100px" height="70px"/>
<img src="images/img2.png" width="100px" height="70px"/>
<img src="images/img3.png" width="100px" height="70px"/>
<img src="images/img4.png" width="100px" height="70px"/>
<!--注意：修改width（或者height）属性，会使图片等比例放大（或者缩小）。而同时修改两个属性，一定要注意保证图片的宽高比例-->

3. Small practice: the use of picture making a web page

3.1. The picture on the images folder, and add an image in the img tag

<img src="images/dr1.png" />
<img src="images/dr2.png" />
<img src="images/dr3.png" />
<img src="images/dr4.png" />
<img src="images/dr5.png" />
<img src="images/dr6.png" />

3.2 After we run, you will find inconsistencies Image Size:

3.3 modify chant:

<img src="images/dr1.png" width="100%"/><br/>
<img src="images/dr2.png" width="100%"/><br/>
<img src="images/dr3.png" width="100%"/><br/>
<img src="images/dr4.png" width="100%"/><br/>
<img src="images/dr5.png" width="100%"/><br/>
<img src="images/dr6.png" width="100%"/><br/>
<!--100%作用是避免图片过大，窗口放不下出现而浏览器的横向滚动条。100%表示图片撑满整个窗口 -- >