web前端html5+css3学习笔记(4)——超链接、列表

本文链接：https://blog.csdn.net/m0_52353966/article/details/129638523

文章目录

一、超链接

<a href="https://www.jd.com/" target="_blank">去京东</a>

target：控制跳转时如何打开页面

_self ：在本窗口打开（默认值）

_blank ：在新窗口打开

id ：元素的唯一标识，可用于设置锚点

name ：元素的名字，写在 a 标签中，也能设置锚点

1.跳转到页面

可以跳转到其他网页或者本地网页

代码中的多个空格、多个回车，都会被浏览器解析成一个空格

虽然 a 是行内元素，但 a 元素可以包裹除它自身外的任何元素

2.跳转到文件

若浏览器无法打开文件，则会引导用户下载。我们也可以靠download属性强制触发下载，属性值是下载文件的名称

<!-- 浏览器可以打开，但要强制触发下载 -->
<a href="./resource/电影.mp4" download="电影1">下载电影</a>

3.跳转到锚点

两种方法：（推荐用第二种）

<!-- 第一种方式：a标签配合name属性 -->
<a name="test1"></a>
<!-- 第二种方式：其他标签配合id属性 下面这个是锚点-->
<p id="test2">我是一个位置</p>


<!-- 跳转到test1锚点-->
<a href="#test1">去test1锚点</a>
<!-- 跳到本页面顶部 -->
<a href="#">回到顶部</a>
<!-- 跳转到其他页面锚点 -->
<a href="demo.html#test1">去demo.html页面的test1锚点</a>
<!-- 刷新本页面 -->
<a href="">刷新本页面</a>
<!-- 执行一段js,如果还不知道执行什么，可以留空，javascript:; -->
<a href="javascript:alert(1);">点我弹窗</a>

具有 href 属性的 a 标签是超链接，具有 name 属性的 a 标签是锚点

name 和 id 都是区分大小写的，且 id 最好别以数字开头

注意跳转锚点必须要加上#，可以跳转到其他页面文件的锚点，也可以执行JS代码

4.唤起指定应用

可以唤起设备应用程序

<!-- 唤起设备拨号 -->
<a href="tel:10010">电话联系</a>
<!-- 唤起设备发送邮件 -->
<a href="mailto:10010@qq.com">邮件联系</a>
<!-- 唤起设备发送短信 -->
<a href="sms:10086">短信联系</a>

超文本中的超字是超链接

超文本是一种组织信息的方式，通过超链接将不同空间的文字、图片等各种信息组织在一起，能从当前阅读的内容，跳转到超链接所指向的内容（页面、文件、锚点、应用）。

二、列表

1.有序列表

ordered list

<ol> <li>是列表项

<ol>
    <li>把冰箱门打开</li>
    <li>把大象放进去</li>
    <li>把冰箱门关上</li>
</ol>

2.无序列表

unordered list

<ul>

<ul>
    <li>上海</li>
    <li>西安</li>
    <li>武汉</li>
</ul>

3.定义列表

definition list

<dl> 一个<dt>是一个术语名称，一个<dd>是术语描述（可以有多个）

<dl>
    <!-- title -->
    <dt>做好笔记</dt>
    <!-- description -->
    <dd>笔记是我们以后复习的一个抓手</dd>
    <dd>笔记可以是电子版，也可以是纸质版</dd>
    <dt>多加练习</dt>
    <dd>只有敲出来的代码，才是自己的</dd>
    <dt>别怕出错</dt>
    <dd>错很正常的，改正后并记住，就是经验</dd>
</dl>

列表可以嵌套，下面用span包裹了

<ul>
    <li>成都</li>
    <li>
        <span>上海</span>
        <ul>
            <li>外滩</li>
            <li>杜莎夫人蜡像馆</li>
            <li>
                <a href="https://www.opg.cn/">东方明珠</a>
            </li>
            <li>迪士尼乐园</li>
        </ul>
    </li>
    <li>西安</li>
    <li>武汉</li>
</ul>

<li> 标签最好写在 <ul> 或 <ol> 中，不要单独使用