文字图片超链接.pptx

第三章文字、图片和超链接

课程回顾上次课我们主要讲了：网页的基本结构网页的布局规范HTML相关术语2

010203掌握文字的排版技巧及常用标签的使用掌握图片标签及图片在网页中的应用掌握超链接的使用技巧本章节授课目标

实际上body本身就是一个标签,因此在其内部输出文字，理论上讲是不需要使用其他标签的。但是我们编写出的网页，并不仅仅是被“人”所浏览，同样还要被机器读取，比如搜索引擎。01比如标题标签(Heading)：通过h1-h6等标签进行定义，虽然从视觉角度来讲，heading标签仅仅有字号大小和粗体的区分，但是搜索引擎可通过标题为我们的网页的结构和内容编制索引。02文字标签的作用

常用的文字排版标签

常用的文字排版标签

常用的文字排版标签

有问题吗？小结

图片的控制

宽度：width可填写像素值或百分比值高度：height可填写像素值或百分比值注1：在标签属性里定义图片尺寸时，如填像素值，只需填写数值，不必填写单位；如填写百分比值，需要带%注2：width和height可只填写其中之一，图片将以设定属性值按等比例缩放图片的尺寸控制

图片映射

图片映射imgsrc=planets.jpgborder=0usemap=#planetmapalt=Planets/mapname=planetmapid=planetmapareashape=circlecoords=180,139,14href=venus.htmlalt=Venus/areashape=circlecoords=129,161,10href=mercur.htmlalt=Mercury/areashape=rectcoords=0,0,110,260href=sun.htmlalt=Sun//map

No.1在网页中使用图片，除了可以使用标签img/外，我们还可以通过为其他元素定义背景图的方式来使图片显示在网页中，并且在大多数时候，我们就是这么做的。No.2通过标签的style属性，我们可以通过css的方式为元素增加背景图background:url(../images/bg.jpg)在背景中使用图片

Gif:Gif图片在网页中可以呈透明效果，即图片如果无背景，那么在页面中这张图的透明部分会成镂空效果显示Jpg：图片通常较大，如非图片效果要求较高，尽量不要使用Png:Png图片在网页中也可以以透明形式显示，除了IE6，在IE6下，Png图片的透明部分成蓝灰色背景(Png格式比Jpg还要大)图片的格式：在网页中，可以使用很多种图片格式，通常我们选择GIF，JPG，PNG这三种格式。01图片在被载入的时候，会根据高度撑开它所在行的行高，这会造成一种现象，就是当文字与图片同时出现时，文字会与图片的底边对齐图片的对齐方式02注意事项

有问题吗？小结

神奇的超链接超链接标签：a/aa标签通常会被用于超链接，如：a标签有两个常用属性href和title如果href属性留空，跳转会默认为站点根目录如果不设定href属性，则a会被当做普通标签使用如果想使用a标签，却又不希望它跳转，可在href属性中写#我们还可以使用a标签，通过锚点的方式跳转到当前页面的某一屏ahref=“#abc”title=“去abc那里”ahref=“index.html”title=“跳转到index.html页”我是一个超链接/aahref=“#”title=“不执行跳转”

锚点ahref=“#abc”title=“去abc那里”aname=“abc”title=“我就是abc”aname=“index.html#abc”超链接/a

跳转方式

普通状态(link)01页面第一次加载或者被重新加载时，我们所看到的超链接的状态02鼠标悬浮(hover)03当鼠标悬浮到超链接上的状态04访问中(action)05超链接被访问，鼠标被按下还未抬起时（焦点还未离开时）的状态06访问后(visited)07超链接被访问，鼠标抬起时（鼠标离开时（不支持））的状态08超链接作为一种可以提供交互功能的元素，它具有4种不同的状态：访问状态

特别提示任何HTML元素，除了“属性”之外，还会有一个“事件”特性事件就是我们对元素所执行的操作，如：点击鼠标，按下键盘等。在超链接执行跳转的时候，同时执行了以下几个事件：

1.鼠标悬浮；2.获得焦点；3.鼠标点击；(4.失去焦点)技巧1：我们可以通过鼠标点击事件来完成a标签的绝对不跳转。技巧2：我们可以通过鼠标悬浮事件，来完成鼠标悬浮的图片切换注：超链接的4种状态，在css中可以为其分别设定不同的样式注：当我们将超链接的href属性设