web前端 --- 超链接标签、列表标签

雨天_

已于 2023-04-17 14:59:19 修改

阅读量2.5k

点赞数 4

分类专栏： web前端文章标签： html 前端 css3 javascript web

于 2022-06-30 10:27:25 首次发布

本文链接：https://blog.csdn.net/weixin_62443409/article/details/125533744

版权

web前端专栏收录该内容

13 篇文章 3 订阅

订阅专栏

超链接标签 --- a标签 -- 行内标签

（1）含义

实现页面间的跳转和数据传输

（2）属性

href：跳转路径（url）
target：表示页面打开方式

（3）超链接分类

外部链接

<a href="https://www.baidu.com">百度</a>
<a href="https://www.bilibili.com" target="_blank">哔哩哔哩</a>

内部链接

<!-- 也可是本地页面,建议使用相对路径 -->
<a href="./bs.html">多媒体标签</a>

锚点链接：点击该链接可以迅速定位到页面中的某个位置(作用和目录的链接类似)

<a href="#">#</a>
<!-- 也可代指未完成的页面，将其先空出来 -->

（4）PS

a标签无href，就是一个标准的行内标签
href中无内容，需写#，此时页面不会跳转 --- 锚点功能

（5）代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接标签</title>
</head>
<body>
    <h1>超链接标签</h1>
    <!-- 
        href属性：跳转的路径（url：统一资源定位符）
            网络路径【网络协议：//域名：端口/uri】（uri：统一资源标识符，服务器内部的某个路径。） 例：https://www.baidu.com:443/a/b/c/index.html(a/b/c/index.html即为uri)
        
        target属性：表示页面打开方式。
            默认值为"_self"（当前页面），可修改为"_blank"（新页面）
     -->
     <a href="https://www.baidu.com">百度</a><!--a标签是行内标签-->
     <a href="https://www.bilibili.com" target="_blank">哔哩哔哩</a>
     <!-- 也可是本地页面,建议使用相对路径 -->
     <a href="./bs.html">多媒体标签</a>
     <a href="#">#</a>
</body>
</html>

（5）锚点功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚点功能</title>
    <style>
        html{
            /* 为根标签添加 */
            scroll-behavior: smooth;
            /* 滚动条的行为。behavior：行为. */
        }
        #top{
            width: 100%;
            height: 400px;
            border: 1px solid red;
        }
        .content{
            height: 2000px;
        }
        #footer{
            height: 500px;
            border: 1px solid blue;
        }
    </style>
</head>

<body>
    <h1>实现顶部->底部，底部->顶部的跳转</h1>
    <header id="top">
        <a href="#footer">到底部</a><!--实现到底部的功能-->
    </header>  

    <div class="content">

    </div>

    <footer id="footer">
        <a href="#top">到顶部</a><!--实现到顶部的功能-->
    </footer>
</body>
</html>

列表标签

（1）有序列表：ol li

网页显示会有1，2，3，4这样的数字图标显示，表示为有序显示

<h1>有序列表</h1>
    <ol><!--order list-->
    <!-- start可定义开始数字。 -->
        <li>1234567</li><!--list item-->
        <li>1234567</li>
        <li>1234567</li>
        <li>1234567</li>
        <li>1234567</li>
        <li>1234567</li>
        <li>1234567</li>
    </ol>

（2）无序列表：ul li

无顺序之分，它的展现形式是由<ul>标签包裹着<li>标签

<h1>无序列表</h1>
    <ul>
        <li>1234567</li><!--list item-->
        <li>1234567</li>
        <li>1234567</li>
        <li>1234567</li>
        <li>1234567</li>
        <li>1234567</li>
        <li>1234567</li>
    </ul>

无序的展现形式改为方形

    <style>
        ul{
            /* 去除黑点 */
            list-style: none;/*square（方形）*/
            list-style-type: square;
            /* type:类型，可更改前方的无序的样式 */
            list-style-image: none;
            /*将前方无序的样式改为图片*/
            margin-left: 20px;/*左方空出20个像素*/
        }
    </style>

<h1>无序列表</h1>
<ul>
    <li>1234567</li><!--list item-->
    <li>1234567</li>
    <li>1234567</li>
    <li>1234567</li>
    <li>1234567</li>
    <li>1234567</li>
    <li>1234567</li>
</ul>

无序列表的展现形式为空心圆

    <style>
        ul{
            /* 去除黑点 */
            list-style: circle;/*square（方形）*/
        }
    </style>

<h1>无序列表</h1>
    <ul>
        <li>1234567</li><!--list item-->
        <li>1234567</li>
        <li>1234567</li>
        <li>1234567</li>
        <li>1234567</li>
        <li>1234567</li>
        <li>1234567</li>
    </ul>

（3）自定义列表：dl dt dd

dt：定义标题
dd：定义描述（与ul、li类似）

    <h1>自定义列表</h1>
    <dl >
        <dt>省份：
            <dd>陕西</dd>
            <dd>广西</dd>
            <dd>湖北</dd>
        </dt>
        <li>1234567</li><!--list item-->
        <li>1234567</li>
        <li>1234567</li>
        <li>1234567</li>
        <li>1234567</li>
        <li>1234567</li>
        <li>1234567</li>
    </dl>

PS：也可将dt直接当成标题来使用

（4）代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
    <style>
         *{
             /* *为通配符，代表所有 */
            margin: 0;
            padding: 0;
            /*向左无空格，全部占满*/
        }
        dl{
            list-style: none;/*将列表样式改为none*/
        }
        ul{
            /* 去除黑点 */
            list-style: none;/*square（方形）*/
            list-style-type: armenian;
            /* type:类型，可更改前方的无序的样式 */
            list-style-image: none;
            /*将前方无序的样式改为图片*/
            margin-left: 20px;/*左方空出20个像素*/
        }
    </style>
</head>
<body>
    <h1>有序列表</h1>
    <ol><!--order list-->
    <!-- start可定义开始数字。 -->
        <li>1234567</li><!--list item-->
        <li>1234567</li>
        <li>1234567</li>
        <li>1234567</li>
        <li>1234567</li>
        <li>1234567</li>
        <li>1234567</li>
    </ol>

    <h1>无序列表</h1>
    <ul>
        <li>1234567</li><!--list item-->
        <li>1234567</li>
        <li>1234567</li>
        <li>1234567</li>
        <li>1234567</li>
        <li>1234567</li>
        <li>1234567</li>
    </ul>

    <h1>自定义列表</h1>
    <dl >
        <dt>省份：
            <dd>陕西</dd>
            <dd>广西</dd>
            <dd>湖北</dd>
        </dt>

        <li>1234567</li><!--list item-->
        <li>1234567</li>
        <li>1234567</li>
        <li>1234567</li>
        <li>1234567</li>
        <li>1234567</li>
        <li>1234567</li>
</dl>
</body>
</html>