jQuery换行与输入框插入语法：两种写法哪种符合规范？

嘿，咱们先把核心点说清楚：只要你是把 <br /> 放在文本输入框（也就是 <input type="text">）的HTML结构前面，而且标签本身写得规范，那语法上就没毛病～

不过既然你提到两种方案功能一致，我猜大概率是下面两种常见的写法，我给你拆解分析下：

先明确基础：<br />的语法合法性 #

在HTML5里，<br> 和 <br /> 都是合规的自闭合标签写法——前者是HTML5的简洁写法，后者是兼容XHTML的写法，两种都能用，不存在语法错误。

方案1：<br />独立放在输入框前

<div class="form-item">
  <label>用户名：</label>
  <br />
  <input type="text" placeholder="请输入用户名" />
</div>

这种写法完全符合语法规范，<br /> 明明白白在输入框的前面，结构清晰，一眼就能看出来是要在标签和输入框之间换行，可读性很强，绝对没问题。

方案2：<br />嵌套在<label>标签内

<div class="form-item">
  <label>用户名：<br /><input type="text" placeholder="请输入用户名" /></label>
</div>

这种写法同样语法正确！因为 <label> 标签本身就允许包含内联元素（比如 <br /> 和 <input>），而且这样写还能让标签和输入框的绑定更紧密（点击标签文字就能聚焦输入框，这本来就是 <label> 的原生功能），完全符合HTML的嵌套规则。

总结 #

如果这两种方案都是把 <br /> 放在输入框的HTML结构之前，那两种写法在语法上都是正确的，区别只在于你更倾向哪种结构组织方式：

• 想让标签和输入框的结构更分离，选方案1；
• 想让标签和输入框绑定更紧密，选方案2。

当然啦，如果你的“方案2”是把 <br /> 写在了输入框的属性里或者其他奇怪的位置，那肯定语法错误，但既然你说功能表现一致，应该都是合法的写法～

内容的提问来源于stack exchange，提问作者oxk4r