href属性中能否直接写入JavaScript代码？

在HTML代码中，href属性主要用于定义超链接的目标地址，从技术实现的角度看，确实可以通过javascript:伪协议在其中执行脚本代码。

 <pre class="code-example">&lt;a href="javascript:alert('执行成功')"&gt;点击演示&lt;/a&gt;</pre>
    <p class="alert-box yellow">浏览器兼容性测试显示：截至2025年，Chrome、Firefox等主流浏览器仍支持这种语法</p>
</section>
<section>
    <h3 class="subtitle">实际开发中的三大隐患</h3>
    <div class="grid-container">
        <div class="card danger">
            <h4><i class="icon shield"></i>安全破绽</h4>
            <ul>
                <li>可能被利用进行XSS跨站脚本攻击</li>
                <li>未过滤的用户输入直接执行时风险加倍</li>
                <li>OWASP十大安全风险中排名第七</li>
            </ul>
        </div>
        <div class="card warning">
            <h4><i class="icon accessibility"></i>可用性缺陷</h4>
            <ul>
                <li>屏幕阅读器可能无法正确识别操作意图</li>
                <li>禁用JavaScript时功能完全失效</li>
                <li>移动端长按菜单出现"复制链接"等无效选项</li>
            </ul>
        </div>
        <div class="card info">
            <h4><i class="icon search"></i>SEO影响</h4>
            <ul>
                <li>百度搜索《百度搜索优质内容指南》明确建议避免非常规协议</li>
                <li>Google将此类实现归类为"勉强可用"体验</li>
                <li>无法被搜索引擎蜘蛛正确抓取</li>
            </ul>
        </div>
    </div>
</section>
<section>
    <h3 class="subtitle">推荐替代方案对比表</h3>
    <table class="comparison-table">
        <thead>
            <tr>
                <th>实现方式</th>
                <th>语义化</th>
                <th>可访问性</th>
                <th>SEO友好度</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><code>href="javascript:;"</code></td>
                <td><span class="badge red">×</span></td>
                <td><span class="badge red">20%</span></td>
                <td><span class="badge orange">40%</span></td>
            </tr>
            <tr>
                <td><code>button</code>标签+事件绑定</td>
                <td><span class="badge green">√</span></td>
                <td><span class="badge green">85%</span></td>
                <td><span class="badge green">100%</span></td>
            </tr>
            <tr>
                <td><code>role="button"</code>属性</td>
                <td><span class="badge blue">△</span></td>
                <td><span class="badge green">95%</span></td>
                <td><span class="badge green">90%</span></td>
            </tr>
        </tbody>
    </table>
</section>
<section>
    <h3 class="subtitle">符合E-A-T原则的最佳实践</h3>
    <div class="best-practice">
        <div class="step">
            <div class="step-number">1</div>
            <p>使用语义化的<code>&lt;button&gt;</code>标签替代超链接：</p>
            <pre>&lt;button onclick="handleClick()"&gt;安全操作&lt;/button&gt;</pre>
        </div>
        <div class="step">
            <div class="step-number">2</div>
            <p>渐进增强式的事件绑定：</p>
            <pre>document.getElementById('actionBtn').addEventListener('click', function() {
// 逻辑代码