HTML（3）基本标签

4.图像标签及其属性

作用：用于显示图片

格式：<img src=" " width=" " height=" " alt=" " title=" ">

注意，img标签是单标签。

看效果：

img是image（图像、图片）的缩写.

src是source的（源，来源）缩写.

默认情况下，图片以本身的大小来显示。

所以在实际开发的时候，经常需要根据实际的需求来设置图片的大小，有两个属性：

width：宽度

height：高度

对于width和height，如果能确定大小，就设置，解析速度快一点

如果不能，设置的时候，一定要注意缩放比例，只需要设置其中一个就可以，另一个会等比例进行计算。

还需要注意：width和height的单位默认就是px。

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------

如果这个图片由于某种原因不能显示，那么会以错误图标的方式来显示，同时会显示一段文字信息。

这个功能是通过alt属性来进行设置的。

alt是alternate（替代）的缩写。

当图片不能正确的解析时候，就会显示alt中设置的内容。

这个内容有两个作用：

图片不显示时，能提供信息给浏览者。

alt是给搜索引擎看的。

title属性，用于提示的。注意和alt之间的区别。

-------------------------------------------------------------------------------------------------------------------------------------------------

图片是可以作为超链接来使用的，又分成两种情况：

• 单个的图片链接，如淘宝商品

• 图像映射

单个的图片链接，比较简单。只需要在a标签中嵌套一个img标签。

5.图像映射

作用：在一个图像上建立多个链接，在图像上面定义多个区域，每个区域链接到不同的地址

格式：

在area中，使用coords属性来设置具体的位置：

步骤总结如下：

提示：图像映射在实际开发中，使用的并不是很多。

6.div和span

作用：用来组织划分结构

格式：<div>内容</div>  <span>内容</span>

div是division（分隔）的缩写。

span是跨度的意思。

基本使用：

注意：div它是一个占据一整行的分隔块，而span则是占据一行中的一部分的分隔块。

作为对比，看如下代码：

在页面中典型的应用：

这两个标签是专门用来布局的。

div的使用，用于分隔整个页面中的模块。

Span，则是负责分隔一个模块中的非常小的一个内容（区域）。

Div和span，好比是男主外、女主内的角色划分。

通过一个实际的使用来说明一下。

效果如下：

注释：

<!-- 网站的头部  -->

后面在写页面的时候，尽量的做一些注释。

-------------------------------------------------------------------------------------------------------------------------------------------

7.语义化

语义化是什么东西？

为什么需要语义化？

在实现页面的是，需要使用适当的内容来描述。

为了更加准确的表示我们要描述的信息，我们需要使用合适的标签来描述它。这就是语义化。

目的，为了搜索引擎更好的搜索到它。

8.基本标签应用--创建新闻页面

使用常用标签，完成qq新闻页面

显示如下：

页面长什么样子，不是我们关心的问题。现在关心的核心问题是标签怎么写，怎么用。