XHTML 属性“拧螺丝”指南：多一个空格都别想过

11-22 78 0 0

XHTML 不是 HTML 的“亲兄弟”，是“质检员”。
它最爱干的事：给你挑引号、大小写、闭合标签的刺。
属性这一栏，一句话——“值必引、名必小、自定义得戴前缀帽”。

1. 三个死规矩，背下来一辈子不踩坑

值必须包引号

<img src=bg.jpg />          <!-- 错！ -->
<img src="bg.jpg" />        <!-- 对 -->

属性名必须小写

<div CLASS="box">           <!-- 错！ -->
<div class="box">           <!-- 对 -->

自定义属性得加 data- 前缀，否则校验器直接甩脸

<div myval="123">           <!-- 错！ -->
<div data-myval="123">      <!-- 对 -->

2. 日常高频属性，顺嘴就能溜

场景	属性	一句话记忆
锚点/链接	`href`	想去哪，写哪
图片	`src` + `alt`	一个给路径，一个给“挂图失败”时的替补台词
表格合并	`colspan` / `rowspan`	横着占几列、竖着占几行，数字写几就几
悬停提示	`title`	鼠标放上去蹦出来的小灰框
行内样式	`style`	应急改颜色、调字号，能不用就别用，攒到 CSS 再收拾

3. 自定义属性别瞎起名

<ul>
  <li data-price="9.9" data-stock="9">咖啡</li>
  <li data-price="19.9" data-stock="0">蛋糕</li>
</ul>

JS 里一拍即合：

// 读
var price = node.dataset.price;
// 写
node.dataset.stock = 18;

不用 data- 开头，DOM 就拿不到 dataset，省不了这点键盘寿命。

4. 一段能通过 W3C 校验的“最小模板”

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>XHTML 属性示例</title>
</head>
<body>
  <p id="p1" class="text" title="悬停提示">Hello, XHTML!</p>
  <img src="logo.png" alt="网站标志" />
  <div data-role="banner" data-color="dark">横幅内容</div>
</body>
</html>

拿去 https://validator.w3.org/ 过一遍，红灯少一个，你离“处女座”前端就近一步。

5. 一句话收个尾

XHTML 的属性规则只有“严”，没有“难”。
把引号、小写、data- 当成空气，写代码时顺手带上，质检员就永远挑不出刺。

快来点个赞吧

编程知识