超链接怎么创建？a标签的href属性如何使用？

<a href="https://www.example.com">点击这里访问示例网站</a>

href="https://www.example.com"

https://www.example.com

<a href="mailto:support@yourcompany.com?subject=咨询&body=我想了解更多信息...">联系我们</a>

?subject=

&body=

tel:

<a href="tel:+8613800138000">拨打电话</a>

target

<a href="https://www.newsite.com" target="_blank">在新窗口打开</a>

rel="noopener noreferrer"

id

<!-- 页面顶部某个链接 -->
<a href="#section-introduction">跳到介绍部分</a>

<!-- 页面下方某个元素的ID -->
<h2 id="section-introduction">产品介绍</h2>

<a href="/product-details">点击这里</a>

<a href="/product-details">了解更多关于产品A的详情</a>

alt

不推荐的网站

rel="sponsored"

rel="ugc"

<a id="downloadLink" href="#">点击下载</a>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const downloadLink = document.getElementById('downloadLink');
        // 假设根据用户类型获取不同的下载链接
        const userType = 'premium'; // 实际中可能从后端获取
        if (userType === 'premium') {
            downloadLink.href = 'https://example.com/premium-download.zip';
            downloadLink.textContent = '下载高级版';
        } else {
            downloadLink.href = 'https://example.com/free-download.zip';
            downloadLink.textContent = '下载免费版';
        }
    });
</script>

#

click

event.preventDefault()

<a id="customActionLink" href="https://example.com/fallback-page">执行自定义操作</a>

<script>
    document.getElementById('customActionLink').addEventListener('click', function(event) {
        event.preventDefault(); // 阻止默认的页面跳转
        console.log('用户点击了链接，但页面没有跳转！');
        // 在这里执行你想要的任何自定义逻辑，比如：
        // showModal();
        // sendAnalyticsEvent('custom_link_clicked');
        // 或者，在满足条件后手动跳转：
        // window.location.href = 'https://example.com/success-page';
    });
</script>

<div id="linksContainer"></div>

<script>
    const data = [
        { text: '关于我们', url: '/about' },
        { text: '产品列表', url: '/products' },
        { text: '联系方式', url: '/contact' }
    ];

    const container = document.getElementById('linksContainer');

    data.forEach(item => {
        const a = document.createElement('a');
        a.href = item.url;
        a.textContent = item.text;
        a.style.marginRight = '10px'; // 简单样式
        container.appendChild(a);
    });
</script>