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

3.1 案例需求¶

点击百度，进入百度页面....

3.2 技术分析¶

1.列表标签¶

1.1无序列表¶

语法

<ul type="类型">
    <li>需要显示的条目内容</li>
    ...
</ul>

示例代码

    <!--二 无序列表 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有序列表¶

语法

<ol type="类型" start="起始索引">
    <li>需要显示的条目内容</li>
    ...
</ol>

示例代码

    <!--一,有序列表 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超链接标签的基本使用¶

超链接标签的作用: 就是用于控制页面与页面之间跳转的

超链接标签的格式:
        <a href="指定需要跳转的目标路径" target="打开的方式">需要展现给用户查看的内容</a>
target属性取值: 
        _blank：新起页面
        _self：当前页面（默认）

示例代码

    <!--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 代码实现¶

<!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>