超链接a

源码下载

知识点

• 超链接
• 行内元素、块元素

  经常上网都会有超链接的概念，浅层次来看通过超链接你可跳转到其它的网页浏览内容，互联网的互联靠的就是相互链接的网址，深层次来看它的实现依赖于计算机网络通信。 每个人的基础不同，方向不同，根据自的需要选择不同的挖掘深度。下面利用前面课程的案例，给文字和图片添加超链接。

9        <!--给“零丁洋”三个字添加超链接-->
10       <h1 style="width: 140px;margin: 0px auto">过<a href="http://baike.so.com/doc/5608867-5821476.html?from=175063&redirect=merge" target="_blank" style="text-decoration: none;color: blue">零丁洋</a></h1>
11       <p style="font-size: 16px">
12           辛苦遭逢起一经，干戈寥落四周星。
13           <br>
14           山河破碎风飘絮，身世浮沉雨打萍。
15           <br>
16           惶恐滩头说惶恐，零丁洋里叹零丁。
17           <br>
18           人生自古谁无死，留取丹心照汗青。
19       </p>
20       <!--给img图片元素添加超链接-->
21       <a href="http://baike.so.com/doc/982864-1038983.html" target="_blank"><img src="http://www.yanhuangxueyuan.com/HTML5/icon/wen.jpg" alt="文天祥" width="255px" height="400px"></a>
22   </div>

代码解析

  1.先把第10行代码，写成最简洁的形式。现在的目的是为了给“零丁洋”三个字添加超链接，那就把三个字写在超链接开始标签和结束标签之间，使用网页的时候大家应该都有体验， 当鼠标移动到超链接作用的区域，鼠标的形状就会发生变化，用标签a包裹的文本就是那个区域，点击可以跳转到新的页面。

<!--用超链接标签<a></a>包裹文字-->
<h1>过<a>零丁洋</a></h1>

  2.超链接属性href的功能就是为了给超链接添加点击后要跳转到的网页地址，你可以打开一个网页，在浏览器的地址栏复制下网址，把它赋值给href属性。

<!--超链接元素添加href属性，并把一个http网址赋值给href属性-->
<h1>过<a href="http://baike.so.com/doc/5608867-5821476.html?from=175063&redirect=merge">零丁洋</a></h1>

  3.设计产品的人都知道用户体验的概念，比如单击一个链接是当前页面刷新，还是浏览器重新打开一个新的页面来显示网页内容。正是因为这一点，在html标准里面 给超链接元素引入target属性，该属性有多个属性值，对应不同的跳转体验，也不用记忆，用的时候查一下，下面代码使用的_blank属性值，代表的就是打开一个新的页面来显示相关链接的内容。

<!--添加target属性，赋值_blank-->
<h1>过<a target="_blank">零丁洋</a></h1>

  4.一个标签有默认的功能，也有默认的外观样式，超链接默认有一个下划线，这里要注意这并不是html标准强制规定， 多数浏览器的默认结果是这样，有些情况下不同的浏览器的默认样式还是有区别的。这时候样式style属性毫无疑问派上了用场， 样式属性里面有一个下划线text-decoration属性，这个属性有不同的属性值，属性值是none的时候，不显示下划线，属性值等于underline，文本显示下划线。 这里说明浏览器厂商对a的下划线text-decoration属性默认设置了underline，p、h1等标签从文本默认是none没有下划线。

<!--添加style属性，给style属性添加下划线属性text-decoration，值是none；添加颜色属性color-->
<h1>过<a target="_blank" style="text-decoration: none;color: blue">零丁洋</a></h1> 

图片添加超链接

  5.图片添加超链接和文没有什么区别，都是使用超链接标签包裹要添加超链接的对象。

<!--用超链接标签<a></a>包裹图片元素-->
<a><img src="http://..."></a>