首页 > 代码库 > HTML-锚点

HTML-锚点

2024-09-07 02:10:13   219人阅读

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>锚点</title>
    <style>
        .box1,.box2{
            height: 600px;
            border:1px solid;
        }
    </style>
</head>
<body>
<a href="http://www.mamicode.com/#box1">找到目标</a>
<a href="http://www.mamicode.com/#box2">找到内容</a>

<div class="box1" id="box1">我就是目标</div>
<div class="box2" id="box2">我就是内容</div>

<label for="input1">aaa</label>
<input type="text" id="input1"/>

<a href="http://www.mamicode.com/#">回到顶部</a>


<!--标准文档流-->
在没有 CSS 的干预下，块级元素独占一行，行内元素并排显示。

<!--结构化-->

<!--article标签装载显示一个独立的文章内容。例如一篇完整的论坛帖子，一则网站新闻，一篇博客文章，一个用户评论等等。-->
<!--artilce可以嵌套，则内层的artilce对外层的article标签有隶属的关系。例如，一个博客文章，可以用article显示，然后一些评论可以以article的形式嵌入其中。-->
<article>
    <h1>文章标题</h1>
    <p>这是一篇文章</p>
    <article>评论1...</article>
    <article>评论2...</article>
</article>

<!--定义一个节-->
<section>
    <h1>章节一</h1>
    <p>详细内容...</p>
</section>

<!--aside 装载非正文内容，侧边栏、广告栏-->
<aside>
    ...
</aside>

<!--导航-->
<nav>
    <a href="http://www.mamicode.com/#">新闻</a>
    <a href="http://www.mamicode.com/#">体育</a>
    <a href="http://www.mamicode.com/#">娱乐</a>
    <a href="http://www.mamicode.com/#">八卦</a>
</nav>

<nav>
    <ul>
        <li><a href="http://www.mamicode.com/#">新闻</a></li>
        <li><a href="http://www.mamicode.com/#">新闻</a></li>
        <li><a href="http://www.mamicode.com/#">新闻</a></li>
        <li><a href="http://www.mamicode.com/#">新闻</a></li>
    </ul>
</nav>

<footer>
    <!--定义作者信息-->
    <address>作者。。。。</address>
    <small>我们公司在2005年注册 2015-10-11&copy;</small>
</footer>

<!--文字高亮 提示-->
<p>别忘记<mark>写作业</mark></p>

<p>我是<sup>上标</sup></p>
<p>我是<sub>下标</sub></p>

<p>XX房子190m<sup>2</sup></p>
<h1>我是上标<sup>&reg;</sup></h1>

<p>我们在<time>9:00</time>上课</p>
<p><time>2.14</time>是情人节</p>
<p><time>7.7</time>也他妈是情人节</p>

</body>
</html>

HTML-锚点


联系
我们