第一次前端前端知识体系锚点的使用

最新推荐文章于 2024-07-26 14:14:21 发布

yamotl

最新推荐文章于 2024-07-26 14:14:21 发布

阅读量150

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/yamotl/article/details/133827846

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

前端三要素
html（hyper text makeup language超文本标记语言）、css（cascading style sheet层叠样式单）、javascriipt
html的作用是创建结构，分为如供显示的元素和供用户收集的元素。
css的作用是创建样式，选择器（选元素）、盒子模型（元素特性）、布局。各种样式
javascript，简写js，为了拓展浏览器交互功能：数据交互，效果交互、第三方框架：jquery（函数库）、layer（弹框组件）、echarts（图表库）、vue（不用找元素，直接进行数据更新，去dom操作，基于js）
前端体系
在这里插入图片描述

锚点的使用

<!DOCTYPE html>
<html>
    <!--head标签是设置页面的配置信息-->
    <head>
    <!--title标签是设置页面的标题信息-->
        <title>first page</title>
    <!--meta标签是设置页面的编码配置信息-->
        <meta charset="utf-8"/>
    </head>
    <body>
        我的第一个页面
        <!--基本元素-->
        <div>
        <a name="top">第一章</a>
        <h1>qcby</h1>
        <h2>qcby</h2>
        <h3>qcby</h3>
        <h4>qcby</h4>
        <h5>qcby</h5>
        <h6>qcby</h6>
        <a name="top2">第二章</a>
        <h1>qcby</h1>
        <h2>qcby</h2>
        <h3>qcby</h3>
        <h4>qcby</h4>
        <h5>qcby</h5>
        <h6>qcby</h6>
        <a name="top3">第三章</a>
        <h1>qcby</h1>
        <h2>qcby</h2>
        <h3>qcby</h3>
        <h4>qcby</h4>
        <h5>qcby</h5>
        <h6>qcby</h6>
        </div>
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>
        <div>div1</div>
        <div>div2</div>
        <div>div3</div>
        <span style="color:red">span</span>
        <span>span</span>
        <span>span</span>
        <hr>
        <!--超链接
            配套属性：href
            href:超文本资源路径
            target:指定超文本资源的打开方式 _self（本窗口） _blank（新窗口） _parent（跳出父级窗口） 
            _top（跳出顶级窗口） 自定义窗口？
        锚点
        配套属性：href
            name:定点名称
        -->
        <!--锚点的使用-->
        <a href="http://www.baidu.com" target="_blank">跳转到百度</a>
        <a href="#top">回到顶部</a><!--本页面锚点-->
        <a href="test.html"></a><!--切换页面-->
        <a href="test.html#top"></a><!--切换到另一页面锚点-->
        
        <div style="position:fixed;right:10px;top:10px"><!--css样式使用-->
            <div><a href="#top">第一章</a></div>
            <div><a href="#top2">第二章</a></div>
            <div><a href="#top3">第三章</a></div>
        </div>
    </body>
</html>

<!--
    html标签（元素）由两部分组成：标签、标签属性、标签内容，举例<div style="color:red" id="gs">
    青城博雅</div>
-->