第二天0605下午——超链接<a>与图片<img>

今天下午学习了超链接<a>标签和图片<img>标签，以下面代码为例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
　　<head>
　　　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
　　　　<title>无标题文档</title>
　　</head>
<body>
	　　<a href="#end">跳转底部</a><br />
    　　<a href="https://www.baidu.com/">这是一个跳转到百度的超链接</a><br>
    　　<a href="../../动态壁纸/壁纸2/preview.jpg">这是指向一个图片</a><br>
    　　<a href="../../清华 html教程.rar">这是一个压缩包</a><br>
    　　<br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
    　　<a href="https://www.taobao.com/">
    	　　　　这是跟在 a 标签中，img 图片前的一段文字。
        　　　　<img src="../../动态壁纸/壁纸1/最终幻想13雷霆归来 隐藏CG/preview.jpg" width="1080" height="1880" alt="图片加载不粗来显示" title="图片名称" align=middle vspace=10 　　　　hspace=10 border=10>
        　　　　这是跟在 a 标签中，img 图片后的一段文字。
    　　</a>   
    　　<a name="end"></a>
</body>
</html>

<a>标签——超链接和下载

<a>标签作为超链接必须有两个要素，内容和指向。

<a href="https://www.baidu.com/">这是一个跳转到百度的超链接</a>

其中href属性后面是超链接的指向地址，中间是内容。

<a>标签主要有三种用法：

　　1.跳转网页

　　<a href="https://www.baidu.com/">这是一个跳转到百度的超链接</a>

　　这是<a>标签最常用的用法，href后面双括号中写网页地址。

　　2.指向文件

　　href后面双括号中写一个文件的地址，如果这个文件是图片，txt文档，html等浏览器可以打开的文件，浏览器会默认打开；

　　注意：如果打开的文本文档是乱码，是编码问题，换一下编码方式，换浏览器的编码方式就可以。

　　如果是浏览器无法识别的文件，比如压缩包，点击链接浏览器会下载。

　　3.做锚点

　　锚点有两个<a>标签构成

　　一个<a>标签里用来定位，用name定义一个名字，另一个<a>标签用来跳转，标签里href=“#定义的名称”，在href里，#代表当前页面，点击就可以跳转到那个<a>标签所在的位置。

<img>图片标签

<img>标签标签中有图片的地址，而不是通过在代码中直接添加图片，所以代码占空间不会很大。

<img>标签是一个单标签，主要属性有：

　　src：图片的地址

　　width：图片宽度

　　height：图片高度

　　alt:图片加载不出来显示的名称

　　title:图片标题，鼠标移到图片上显示的名称

　　其中，高度和宽度是都是以像素为单位的，如果只是设置了宽度或者高度，会根据原本的长宽比例来自动缩放大小，如果同时设置了长度和宽度，会根据设置的长度和宽度来拉伸。

　　另外，如果网速较慢，会加载不出图片，但是后面的文字不影响。这是因为浏览器在解析执行代码时，一行一行代码解析执行，解析到图片时，他会分开，相当于再找一个人一边来根据地址照图片，另一边继续执行下面的代码。

拓展：

如果<a>标签中同时放了图片和文字，那点击他们都是相同的效果，指向相同的页面或者文件。

<img align=#> #=top, middle, bottom

图象和文字的对齐，用来控制文字在图像的什么位置显示。

<img vspace=# hspace=#> #=value

vspace和hspace用来增加图片周围的空白。

border=#

用来控制图片的边框宽度。

图片超链接

　　<a href="https://www.taobao.com/">
　　　　<img src="../../动态壁纸/壁纸1/最终幻想13雷霆归来 隐藏CG/preview.jpg" width="1080" height="1880" alt="图片加载不粗来显示" title="图片名称">
　　</a>

　　在<a>标签中嵌套一个<img>图片。