在编辑网页的时候，我们要对图像进行左对齐或右对齐，现在我们就来做一个这样的实例。
实例代码 ：
<!doctype html >
<head>
<meta charset="utf-8">
<style>
img{
width:50px;
height:50px;
}
</style>
</head>
<html>
<body>
<p>这是一个左对齐的图像
<img src="cat.jpeg" align="left" >
</p>
<p>这是一个右对齐的图像
<img src="cat.jpeg" align="right">
</p>
</body>
</html>
运行效果：
从这个实例看出，left 是左对齐，right 是右对齐。
在网面我们怎么对图片进行对齐呢？下面我们就来做个实例。
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
<style>
img{
width:50px;
height:50px;
}
</style>
</head>
<html>
<body>
<h2>未设置对齐方式的图像</h2>
<img src="cat.jpeg">
<h2>已设置对齐方式的图像</h2>
<p>图像<img src="cat.jpeg" align="bottom">与文本底部对齐</p>
<p>图像<img src="cat.jpeg" align="middle">与文本中间对齐</p>
<p>图像<img src="cat.jpeg" align="top">与文本顶部对齐</p>
</body>
</html>
运行效果：
从这个实例中我们看出，html 图像有3种对齐方式，分别是：bottom 底部对齐，middle 中间对齐，top 顶部对齐。用align 对齐属性来定义 。
aling="bottom"
aling="middle"
aling="top"
在我们编辑网页中，需要更换背景，这一节我们就来学习如何设置主体背景。
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
<style>
h1{
font-size:30px;
color:red;
}
</style>
</head>
<html>
<body background="beijing.jpeg">
<h1>这是一个带背景的网页。</h1>
</body>
</html>
运行效果：
从这个实例中看出，我们定义了主体背景图像，还有h1标签的样式。
有时候网页加载图像不成功的时候，图像是显示不出来的。我们必须给一个替换文本给它显示。
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<p>下面的图像无法显示。</p>
<img src="123456.png" width="200" height="100" alt="图像无法显示">
</body>
</html>
运行效果：
从这个实例中看出，我们输入一个无效的图像地址，所以浏览器不会输出正确的图像，但会输出替换文本。
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
这一节我们讲一下图像从本地插入和外部插入的实例。
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<p>这是一个本地插入的图像</p>
<img src="timg.jpeg" width="200" height="150">
<p>这是一个外部插入的图像</p>
<img src="https://www.dwoke.com/sites/default/files/inline-images/coverimage_0.png" width="300" height="250
">
</body>
</html>
运行效果：
从这个实例中看到，我们第一个图像是从本地文件夹插入的，第二个图像是从互联网中插入的。
我们会在网页中经常插入图像，这一节我们就来学习一下html的图像的插入标签<img>。
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<p>这是一个图像插入实例</p>
<a href="https://www.dwoke.com">
<img src="dwoke.png" width="360" height="100">
</a>
</body>
</html>
运行效果：
从这个实例中看到我们插入了一你行网的图片，点击它会链接到你行网的主页。
<img > 定义html 网页的图像
src 属性：定义图像的路径名称。
width属性：定义图像的宽度。
height属性：定义图像的高度。
在网页编辑中，如果我们要对一个email用户发送一封电子邮件该怎么定义呢？这一节我们就来学习这个问题。
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<p>这是一个邮件实例</p>
<a href="mailto:445100058@qq.com?subject=你好">发送邮件</a>
<p>这是一个复杂的邮件实例</p>
<a href="mailto:445100058@qq.com?
cc=445115215@qq.com&
bcc=516165614@qq.com&
subject=hello%20word&
body=hello%20word%20php">发送邮件</a>
<p>注意：应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。</p>
</body>
</html>
运行效果：
mailto后跟的是收信人
可使用参数列表
| to | 收信人 |
| subject | 主题 |
| cc | 抄送 |
| bcc | 暗送 |
| body | 内容 |
在编辑html网页的时候，我们要对一个链接在新窗口打开，这里我们就可以用target属性等于_blank 进行定义。
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<p>这是一个链接到新窗口的网页</p>
<a href="https://www.dwoke.com" target="_blank">你行网</a>
<p>这是一个跳出框架的链接<br/>网页会当前页面打开</p>
<a href="https://www.dwoke.com/forum" target="_top">社区</a>
</body>
</html>
运行效果：
从这个实例看出，单击你行网在新窗口打开，单击社区在当前页面打开。
在我们进行网页设计的时候，有时要对一个链接进行锚设定，比如单击网页中的锚链接，跳到页尾，下面我们就来做个实例。
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<a href="#c2">单击跳到字段9</a>
<br />
<a href="#c1">单击跳到页尾</a>
<h1>首页</h1>
<h3>字段 1</h3>
<p>这是一个测试字段文本</p>
<h3>字段 2</h3>
<p>这是一个测试字段文本</p>
<h3>字段 3</h3>
<p>这是一个测试字段文本</p>
<h3>字段 4</h3>
<p>这是一个测试字段文本</p>
<h3>字段 5</h3>
<p>这是一个测试字段文本</p>
<h3>字段6</h3>
<p>这是一个测试字段文本</p>
<h3>字段 7</h3>
<p>这是一个测试字段文本</p>
<h3>字段 8</h3>
<p>这是一个测试字段文本</p>
<h3><a name="c2">字段 9</a></h3>
<p>这是一个测试字段文本</p>
<h3>字段 11</h3>
<p>这是一个测试字段文本</p>
<h3>字段 12</h3>
<p>这是一个测试字段文本</p>
<h3>字段 13</h3>
<p>这是一个测试字段文本</p>
<h3>字段 14</h3>
<p>这是一个测试字段文本</p>
<h3>字段 15</h3>
<p>这是一个测试字段文本</p>
<h3>字段 16</h3>
<p>这是一个测试字段文本</p>
<h3>字段 17</h3>
<p>这是一个测试字段文本</p>
<h1 > <a name="c1">页尾</a></h1>
</body>
</html>
运行效果：
从这个实例中看出，单击锚链接可以跳转到指定位置。
HTML 链接的 target 属性是定义链接在何处显示，下面我们做个实例。
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<p>这是一个target 属性链接，网页将在新的窗口打开。</p>
<a href="https://dwoke.com" target="_blank">你行网</a>
</body>
</html>
运行效果：
从这个实例中可以看出，当你点击你行网链接的时候，网页会在一个新的窗口打开。
评论