第四章 html 常用标签[3]【图文】

承接着上节课的内容，我们开始继续讲一些html的基本标签。
希望大家多多关注我，谢谢合作。
1. 指定图片某块区域加超链接（这个标签其实用到的，并不太多，但是作为了解，还是要知道其中的使用方法），这个标签比较使用起来复杂，故首先要看下面的使用方法
使用 map 标签可以给图片某块区域加超链接
使用方法：
1）为 map 标签首先加上 id 属性用来为 map 标签定义一个唯一的名称
2）为了保证兼容性再加上 name 属性，属性值与 id 的值相同
3）为 map 标签所作用的图片加上 usemap 属性，属性值为 #id 名称
4）在 map 标签内嵌套 area 标签来实现给指定区域加链接
<area shape="" coords="" href ="" alt="" />shape 属性：定义链接区域的形状，常用值 rect、circle
coords 属性：确定区域的精确位置。填写坐标即可
href 属性：填写链接地址即可
alt 属性：给链接加一些说明信息

我先一步步示范一次
首先还是在我上次的文件夹中，有这么一张图片，和这么一个html文件的图片（如何插入图片我上节课已经教学过了）
文件的位置是在这个文件夹
文件的代码和显示效果是这样的，这个图片我没有改变它的大小，上节课改变了，这节课我就没有改变，但这并不影响今天我对map，area这标签的定义，个人习惯，如果你喜欢定义它的大小，你自我定义就好，我在这就不定义了（图个方便）。
............................................分割符(接下来正式开始)..........................
首先我们先看下插入的这张图片的大小。

显然这个图片是宽1024px，高682px的。


当然，刚才我说了，还可以将矩形改成圆形。
就讲刚才第一幅图片中的shape里面，还有coords里面换掉即可，如下

网页效果是

2. div 标签
可以把 div 标签看成一个可以存放标签的容器！
我们讲的常用标签几乎都可以嵌套在 div 标签的里面
比方说
直接看代码图片，就可以知道

总之div里几乎任何都可以插入进入，嵌套使用，这个代码我们以后实战时候会具体讲解。
**！！！！！！要注意，它是个块级元素，具体块级元素和内联元素的区别，我以后会专门开一节手记讲清楚

6. span 标签
使用 <span> 来组合内联元素，以便通过 css 来美化它们。
所以我这里先举例以下，它如何使用，具体怎么变换，我们到css后再举例。

网页效果
本次主讲:darker【groge】（感谢慕课网这个平台）