3-网站友情链接页面案例

3.1 案例需求

img

  • 点击百度,进入百度页面....

3.2 技术分析

1.列表标签

1.1无序列表
  • 语法
1
2
3
4
<ul type="类型">
    <li>需要显示的条目内容</li>
    ...
</ul>
  • 示例代码
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
    <!--二 无序列表 ul-->
    <!--type属性: 列表的类型; circle: 空心圆; square: 实心的正方形-->
    <ul type="square">
        <!--li定义列表里面的条目(item). li定义在ul里面-->
        <li>乔丹</li>
        <li>詹姆斯</li>
        <li>艾弗森</li>
        <li>科比</li>
        <li>库日天</li>
    </ul>
  • 注意点

​ ul标签和li标签是一个整体,一般情况下ul标签和li标签都是一起出现, 不会单个出现.

​ li要定义在ul里面

  • 应用场景

​ 新闻列表 ​ 商品列表 ​ 导航条

1.2有序列表
  • 语法
1
2
3
4
<ol type="类型" start="起始索引">
    <li>需要显示的条目内容</li>
    ...
</ol>
  • 示例代码
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
    <!--一,有序列表 ol
        start属性: 起始的索引(默认是第1个)
        type属性: 列表类型;  1: 阿拉伯数字; a: 小写的英文字母; A:大写的英文字母; i: 小写的罗马数字; I:大写的罗马数字
    -->
    <ol start="1" type="1">
        <!--li定义列表里面的条目(item). li定义在ol里面-->
        <li>乔丹</li>
        <li>詹姆斯</li>
        <li>艾弗森</li>
        <li>科比</li>
        <li>库日天</li>
    </ol>

2.超链接标签

2.1超链接标签的基本使用
  • 超链接标签的作用: 就是用于控制页面与页面之间跳转的
1
2
3
4
5
超链接标签的格式:
        <a href="指定需要跳转的目标路径" target="打开的方式">需要展现给用户查看的内容</a>
target属性取值: 
        _blank:新起页面
        _self:当前页面(默认)
  • 示例代码
1
2
3
4
5
6
    <!--href属性: 跳转的路径(可以是本地的也可以是远程的)
        target属性: 链接打开方式; _blank: 新开一个窗口;_self:在当前页面打开(默认值)
    -->

    <a href="http://www.baidu.com" target="_self">百度</a>
    <a href="../案例一信息展示案例/index.html">案例一信息展示页面</a>
2.2假链接

​ 就是点击之后不会跳转的链接我们称之为假链接.在企业开发前期, 其它界面都没有写出来, 那么我们就不知道应该跳转到什么地方, 所以就只能使用假链接来代替. 当项目后期其它界面都已经完成时再将假链接体会为真链接

1
<a href="#">这是一个假链接</a>

3.3 思路分析

  • 创建一个html
  • 创建一个标题标签
  • 创建无序(ul)列表标签, 再在ul里面定义3个li
  • 在每一个li里面嵌套超链接, 写上跳转的路径

3.4 代码实现

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--- 创建一个html
    - 创建一个标题标签
    - 创建无序(ul)列表标签, 再在ul里面定义3个li
    -  在每一个li里面嵌套超链接, 写上跳转的路径
-->
    <h1>友情链接</h1>
    <!--  ul>(li>a)*3: tab-->
    <ul>
        <li><a href="http://www.baidu.com" target="_blank">百度</a></li>
        <li><a href="http://www.itcast.cn">传智</a></li>
        <li><a href="#">谷歌</a></li>
    </ul>

</body>
</html>