属性值写法与转义

HTML属性值的正确写法与转义是保证页面安全、避免解析错误的基础。

属性值引号规则

基本写法

<!-- 双引号（推荐） -->
<div class="container" id="main"></div>

<!-- 单引号 -->
<div class='container' id='main'></div>

<!-- 无引号（不推荐，仅限特定情况） -->
<div class=container id=main></div>

推荐统一使用双引号，保持代码风格一致。

引号嵌套处理

<!-- 外双内单 -->
<div title="这是'单引号'示例"></div>

<!-- 外单内双 -->
<div title='这是"双引号"示例'></div>

<!-- 混合使用 -->
<a href="javascript:alert('Hello')">点击</a>

特殊字符转义

常用转义字符

属性值中转义

<!-- 属性值包含引号 -->
<div title="他说：&quot;你好&quot;"></div>
<div title='他说：&#39;你好&#39;'></div>

<!-- 属性值包含特殊符号 -->
<a href="search?q=a&amp;b">搜索</a>
<div title="x &lt; y 小于比较">说明</div>

URL编码

URL特殊字符

<!-- URL中的特殊字符需要编码 -->
<a href="search?q=你好&amp;page=1">搜索</a>

<!-- 空格编码 -->
<a href="search?q=hello%20world">搜索</a>

<!-- 中文编码 -->
<a href="search?q=%E4%BD%A0%E5%A5%BD">搜索</a>

JavaScript URL编码

// URL编码
const url = 'https://example.com/search?q=' + encodeURIComponent('你好 世界');
// 结果：https://example.com/search?q=%E4%BD%A0%E5%A5%BD%20%E4%B8%96%E7%95%8C

// URL解码
decodeURIComponent('%E4%BD%A0%E5%A5%BD'); // "你好"

安全注意事项

XSS防护

<!-- 危险：直接插入用户输入 -->
<div title="<%= userInput %>"></div>

<!-- 安全：转义特殊字符 -->
<div title="&lt;script&gt;alert(1)&lt;/script&gt;"></div>

事件属性安全

<!-- 危险写法 -->
<div onclick="alert('<%= userInput %>')">点击</div>

<!-- 安全做法：使用data属性 -->
<div data-content="<%= escapedValue %>" onclick="handleClick(this)"></div>

<script>
function handleClick(el) {
    // 在JS中处理，可进行安全检查
    const content = el.dataset.content;
    alert(content);
}
</script>

属性值写法规范

推荐写法

<!-- 多属性换行 -->
<input
    type="text"
    name="username"
    id="username"
    class="form-control"
    placeholder="请输入用户名"
    required
>

<!-- 布尔属性省略值 -->
<input type="checkbox" checked>
<button disabled>禁用按钮</button>

不推荐写法

<!-- 无引号写法（易出错） -->
<div class=my class id=main></div>

<!-- 混合引号风格 -->
<div class='box' id="main"></div>

<!-- 属性值含空格无引号 -->
<div class=box container></div>  <!-- 错误！ -->

JSON作为属性值

写法示例

<div data-config='{"theme":"dark","size":"large"}'></div>
<div data-list='["apple","banana","orange"]'></div>

注意事项

<!-- 正确：外单内双 -->
<div data-config='{"key":"value"}'></div>

<!-- 正确：转义引号 -->
<div data-config="{&quot;key&quot;:&quot;value&quot;}"></div>

<!-- 错误：引号冲突 -->
<div data-config="{"key":"value"}"></div>

JavaScript处理

const el = document.querySelector('div');
const config = JSON.parse(el.dataset.config);
console.log(config.theme); // "dark"

要点总结

1. 统一引号：推荐全部使用双引号
2. 特殊转义：属性值中的"、<、>、&需转义
3. URL编码：URL参数使用encodeURIComponent编码
4. XSS防护：用户输入必须转义后才能放入属性