时间戳

首页 > 解决方案 > 包装长 HTML 标签，哪种方式？

html - 包装长 HTML 标签，哪种方式？

问题描述

假设我有以下 html 标签：

<button type="button" class="btn btn-primary btn-block" onclick="myFunction(); mySecondFunction();" title="It's a button!"></button>

这变得很长并且开始难以阅读它具有哪些属性所以我想通过将每个属性放在一个新行上来包装标签，但是哪种方式是一个好的做法呢？保留>最后一个属性？把它>放在自己的线上？

方法一：

<button 
  type="button" 
  class="btn btn-primary btn-block" 
  onclick="myFunction(); mySecondFunction();" 
  title="It's a button!"
>
  Button Text
</button>

方法二：

<button 
  type="button" 
  class="btn btn-primary btn-block" 
  onclick="myFunction(); mySecondFunction();" 
  title="It's a button!">
  Button Text
</button>

方法三：

<button 
type="button" 
class="btn btn-primary btn-block" 
onclick="myFunction(); mySecondFunction();" 
title="It's a button!">
  Button Text
</button>

方法4（只有当你太长时才换行）：

<button type="button" class="btn btn-primary btn-block" 
onclick="myFunction(); mySecondFunction();" title="It's a button!">
  Button Text
</button>

还有什么方法？？

我知道无论如何在技术上是可以接受的，但请记住代码编辑器如何管理制表符和格式，以及简单的可读性，想看看推荐的方式是什么。

标签： html

解决方案

根据 Google's style guide的换行部分，看起来方法 2 可能是您的最佳选择。该指南建议将>放在最后一个属性上：

<md-progress-circular
  md-mode="indeterminate"
  class="md-accent"
  ng-show="ctrl.loading"
  md-diameter="35">
</md-progress-circular>

推荐阅读