如果要说HTML中谁是最最重要的元素，那一定就是

超链接

是超链接把我们一个一个的网页连接起来，从而形成了今天广阔无边的互联网世界！

a标签

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

<a href="http://17bang.ren" title="飞哥的线上互助社区" target="_blank">一起帮</a>

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

title

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

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

target

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

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

href

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

网址

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

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

因为它包含了协议（http）和域名（17bang.ren），不够灵活。因为我们还在开发阶段：

1. 域名可能根本没有确定（用localhost代替），这时候该使用什么域名呢？
2. 假设某一天我们网站的域名更换了呢？所有a标签里面的域名再全部替换一遍吗？
3. 我们的html页面可能根本就没有部署到服务器呀！
   

路径（Path）

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

• 绝对（Absolute）路径：它总是以斜杠（/）开头，用斜杠代表根目录（如果是ASP.NET项目即当前项目的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；

  <a href="/readme.txt">readme</a>

• 否则提示下载，比如.dll文件

  <a href="/system.zip">system</a>

还可以强行指示浏览器下载该文件，需要添加一个download属性：

<a href="/readme.txt" download>readme</a>

单独的一个download，下载时直接使用文件原名称；如果想要重命名的话，可以在download中指定：

<a href="hello.txt" download="xxx" title="飞哥的线上互助社区" target="_self">一起帮</a>

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

锚标记

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

    <a href="../welcome.html#email">email</a>
    <a href="#email">email</a>

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

    <a id="email">email</a>
    <a name="email">email</a>

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

HTML5新用法

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

<a href="mailto:2282636022@qq.com?subject=">给飞哥一封Email:2282636022@qq.com</a>
<a href="tel:+18623051469">给飞哥来个电话：18623051469</a>

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

图像

img标签

可用于显示图片：

    <img src="/images/源栈小九.png" alt="颜值担当" title="大神小班，ASP.NET全栈培训" />

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

属性

• src：图片路径（来源：source）
  PS：为什么a标签里面用href，img中用src？咳咳，这就是前端……没那么多道理可讲，^_^
  
• alt：当图片无法获取时的替代（alter）文字
• title：同a标签，鼠标悬浮时显示

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

base64

有时候，出于各种各样的考虑，我们不想把图片放文件夹中……

1. 将二进制的图片信息，按每6个一组，分成若干组
2. 根据base64索引表将每组数据替换成对应的字符：大小写字母、数字、符号"+"、"/"一共64个

@想一想@：为什么是64个？

演示：图片转base64

如何选择？

理解，如果：

• 按传统模式，浏览器会发起两次请求，一次获得HTML内容，一次获得图片。（演示：F12 - 网络）
• 按base64模式，图片作为HTML内容的一部分，一次性发送给浏览器

所以，base64看起来能获得性能提升。但是：

• 传统模式，图片可以被浏览器缓存（F12演示）
  PS：有时候为了避免缓存，可以添加不同的url参数
• base64模式没法缓存

#体会#：性能优化不能简单化……

base64的常见使用场景：图片是由用户混在HTML中上传的。（文章发布演示）

浏览器缓存

为了提高性能，浏览器在请求一次服务器资源后，会将一些静态资源（比如.css文件、.js文件、图片文件）缓存在本地（内存/磁盘）

这样下一次再请求这些相同的静态资源文件，就可以直接从本地获取，不需要向服务器请求。

但是，这样就会造成一个问题：

当服务器端的文件内容发生了变化，浏览器无法及时响应。（这被称之为“缓存脏数据/过期内容”，是所有缓存都有的问题）

巧用url参数

如果src的url值带有url参数，缓存的就是：banner1.svg?v=GaE_EmkeBf-yBbrJ26lpkGd4jkOSh1eVKJaNOw9I4uk，而不是banner1.svg

不同的v值，无法相互匹配，所以：

作业

完成以下页面（只关注HTML内容，忽略其他如图标/样式等）：

1. 模拟常见问题页面，完成其内容页部分
2. 参考如何获得帮帮点，完成里面的表格。然后将“注册”和“邀请注册”上下两格合并。
3. 完成任一内容（求助/文章/意见建议）板块的列表页和单页

注意包含：

• 完整的html文档结构（html/head/body）
• 页头/页脚/正文/侧边栏等（header/footer/article/aside）

源栈学历

在当前系列 HTML和CSS 中继续学习：

多快好省！前端后端，线上线下，名师精讲

• 先学习，后付费；
• 不满意，不要钱。
• 编程培训班，我就选源栈

更多了解 加：