链接的使用
编码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title></title>
<style>
a{
/*去掉下划线*/
text-decoration:none;
}
</style>
</head>
<body>
<!-- img是加图片 src是来源
alt:当图片不存在时显示站位
利于SEO（搜索引擎优化） -->
<!-- . 当前所在目录 -->
<!-- .. 上一级目录 -->
<!-- <img src="../1.jpg"alt="美食"
width="500px"> -->
<!-- <a href="http://www.baidu.com">百度</a> -->
<!-- _blank打开一个新网页，并保留原有的网页 -->
<a target="_blank" href="./2.html#a">美食</a>
</body>
</html>
注意 “.”的使用 .是当前目录 ..是上一级目录
二；在原标题栏中加入链接练习
编码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title></title>
<style>
div{
width: 1500px;
margin: 0px auto;
/*background-color: #ff0000;*/
}
li{
/*去掉点*/
list-style: none;
/*这是字体的宽度*/
width: 90px;
height: 50px;
/*行高*/
line-height: 50px;
background-color: #be0000;
/*字体的外边框*/
margin: 0px 0px;
float: left;
/*字体与背景居中*/
text-align: center;
/*字体大小*/
font-size: 20px;
color: #ffffff;
}
a{
text-decoration:none;
color: #ffffff;
}
</style>
</head>
<body>
<div>
<ul>
<li><a target="_blank" href="http://www.baidu.com">新闻</a></li>
<li><a href="http://www.taobao.com">云计算</a></li>
<li><a href="http://www.tianmao.com">大数据</a></li>
<li><a href="http://www.souqiu8.com">移动</a></li>
<li><a href="http://www.51cto.com">网络</a></li>
<li><a href="http://www.youku.com">安全</a></li>
<li><a href="./11.jpg" >系统</a></li>
<li><a href="http://www.qq.com">开发</a></li>
<li><a href="http://www.weixin.com">服务器</a></li>
<li><a href="http://www.baidu.com">存储</a></li>
<li><a href="http://www.baidu.com">数据库</a></li>
<li><a href="http://www.baidu.com">虚拟化</a></li>
<li><a href="http://www.baidu.com">商务办公</a></li>
<li><a href="http://www.baidu.com">CIOage</a></li>
<li><a href="http://www.baidu.com">读书</a></li>
</ul>
</div>
</body>
</html>
如图所示
点击新闻图标后
依次点击会跳转到相应的界面。