HTML - 链接和图片

广阔无边的互联网世界！

a标签

使用a标签就可以生成一个链接元素：

一起帮

a标签本身并不难，难的是它使用的属性：

title

当鼠标悬停在a标签上时，浏览器会显示title指定的内容，给用户提示_（对SEO也有帮助）_

title还可以应用在其他很多标签中，比如接下来要学习的img……

target

指示如何打开a标签指示的网页：

_self：默认，在当前网页打开
_blank：在新的tab中打开

href

href指定点击a标签应打开的网页地址。网址可以可以通过以下方式表示：

1）网址，即URL，如：http://17bang.ren/Article/624。_（复习：网址的秘密）_

这通常只用于指向（本）站（以）外的网页。

因为它包含了协议（http）和域名（17bang.ren），不够灵活。比如，我们还在开发阶段，域名根本没有确定（用localhost代替），这时候该使用什么域名呢？难道我们开发时使用localhost，部署时再把localhost全部替换成17bang.ren吗？假设某一天我们网站的域名又更换了呢？^_^

2）路径（Path），URL中不包含协议和域名部分，比如：/Article/624。路径又可以分成两种：

绝对（Absolute）路径：它总是以斜杠（/）开头，用斜杠代表根目录_（即当前项目的wwwroot文件夹）_，从根目录开始定位。飞哥强烈建议总是使用这种方式！
相对（Relative）路径：相对于当前页面所在目录进行定位（仅供面试使用，不推荐这种方式），
./
当前文件所在文件夹
可省略
../
当前文件所在文件夹的上一级
../../
当前文件所在文件夹的上一级的再上一级
假设当前页面路径为：/Article/yezi/A624
1. href="A236"：定位到当前文件夹下的236页面，即：/Article/yezi/A236
2. Category-1/Index：定位到当前文件夹下的Category-1文件夹下的Index页面，即：/Article/yezi/Category-1/Index
3. href="../Index"：定位到当前文件夹的上一级文件夹下的Index页面，即：/Article/Index
4. href="../../Problem"：定位到当前文件夹的上一级的再上一级文件夹下的Problem页面，即：/Problem

此外，网上还有另外一种基于URL的分类方法（称谓），对照表如下：

本文使用

其他分类

网址

绝对url

路径

相对URL

绝对路径

相对根URL

相对路径

相对当前URL

其他文件和download

href后面还可以指定非html的文件。

如果指定的文件能够在浏览器中打开，默认自动打开，比如.txt；
readme
否则提示下载，比如.dll文件
system

如果要浏览器可打开文件被下载，需要添加一个download属性：

readme

注意：基于安全考虑，一些可执行文件（如.exe、.dll）会被禁止访问/下载。

锚标记

在href指定的URL中可以添加井号“#”，比如：

email email

当点击这种链接时，浏览器会自动定位到#后指定的“锚”位置。锚位置也是a标签，用id或name匹配：

email email

一起帮的FAQ中大量使用了锚标记。_（演示）_

HTML5新用法

根据新的HTML5标准，href中还可以放email地址、电话号码等

给飞哥一封Email:[email protected] 给飞哥来个电话：18623051469

因为这种写法需要浏览器支持，所以最好将Email地址和电话号码都表现出来，以免浏览器不支持时，用户无法看到他们。

img标签

可用于显示图片：

源栈广告

图片的格式选择：（复习：图片格式）

jpg/jpge：位图，可有损压缩
png：位图，无损压缩，可透明背景
gif：像素较低，可制作动图

属性

src：图片路径（来源：source）
alt：当图片无法获取时的替代（alter）文字
title：同a标签，鼠标悬浮时显示

图片的关键是性能：压缩（一般是美工/UI去做）

作业

模拟常见问题页面，完成其内容页部分（只显示内容，练习：hX/a/hr，忽略其他如图标/样式等）
参考如何获得帮帮点，完成里面的表格。然后将“注册”和“邀请注册”上下两格合并。（练习：表格绘制和行列合并）
阅读收看：源栈培训：功能索引http://17bang.ren/Article/589
完成任一内容（求助/文章/意见建议）板块的列表页和单页的HTML内容，注意包含：
1. 完整的html文档结构（html/head/body）
2. 页头/页脚/正文/侧边栏等（header/footer/article/aside）
3. 标题/段落/图片/链接/强调/删除……等