是否有 HTML 的#Region 代码答案

【问题标题】：Is there #Region code for HTML是否有 HTML 的#Region 代码
【发布时间】：2011-04-01 02:42:00
【问题描述】：

在 VB 和 C# 中有 #Region ... #endRegion 并使其可折叠。在 HTML 中有类似的方法吗？

现在我只有 cmets 阻止了我的 HTML 页面上不同元素的位置，但我希望有一个折叠点，而不是折叠所有 <tr> <td> 和 <div> 标记。

【问题讨论】：

标签： c# html vb.net region

【解决方案1】：

我认为简短的回答是否定的。

Region 只是编辑器 (Visual Studio) 识别的 IDE 指令。 HTML 标准中没有任何内容，您在 HTML 中所做的任何内容也会直接发送到浏览器，所以我没有遇到任何内容，也无法想象会有任何内容。

【讨论】：

【解决方案2】：

突出显示您要折叠的部分，然后转到Edit -> Outlining -> Hide Selection

参考：How to: Collapse and Expand HTML Elements in Visual Web Developer

编辑：假设您使用的是 Visual Studio

【讨论】：

根据@Jim 在他的问题中的原始陈述，这只允许折叠现有的 HTML 部分，您不能将多个 HTML 元素包装在 #region 中并折叠 - 您可以做的最接近的是DIV 元素，但随后也会被发送到客户端。
我不相信它。我只是用这个方法折叠了一个段落的中间。
对不起，你是对的。这是我以前没有遇到过的额外功能。它几乎与区域相同，但您似乎无法为其命名，如果您隐藏 3 行，则显示隐藏选择的“...”将显示为第 4 行的开头（而不是它是自己的）但它隐藏了该部分。就像你说的，它完全是 IDE 驱动的，可以在 HTML 元素中工作，也可以包含 2 个或更多不同元素的一部分。
是的，它确实缺少命名功能。所以，这是一个部分解决方案。

【解决方案3】：

这确实取决于 IDE，今天刚刚注意到 Visual Studio 的免费 Web Essentials 2012 插件的最新版本在 HTML 中添加了区域支持。

http://visualstudiogallery.msdn.microsoft.com/07d54d12-7133-4e15-becb-6f451ea3bea6

http://vswebessentials.com/changelog

  <!--#region main  -->


  <!--#endregion -->

【讨论】：

这在 Visual Studio 2013 中仍然有效，仍然需要 Web Essentials。
 和  在 Intellij 中工作

【解决方案4】：

从 Visual Studio 2013 Update 4 开始，HTML 编辑器现在支持区域。您可以使用内置代码 sn-p: type "

<!-- #region SampleRegion -->
<!-- #endregion -->

您可以在update 4 here.中找到此改进和其他新功能的详细信息

【讨论】：

【解决方案5】：

您可以将它用于您的折叠 cmets

<!-- Your comment caption -->
   <div class="hidden">
       Put Your comments here
   </div>

所以div可以在VS中的html代码中折叠或展开

【讨论】：

【解决方案6】：

我使用 div 标签来折叠 html 代码块：

<div>
  Code Blocks...
</div>

在我学习之前

<!--#region explanation blocks  -->
        Code Blocks...
<!--#endregion -->

他们都解决了问题。

【讨论】：

【解决方案7】：

对于 HTML：

<!--#region -->
        Code code code...
<!--#endregion -->

对于 Javascript：

// #region
        Code code code...
// #endregion

如您所见，Visual Studio 在 cmets 内声明区域块。

 Html 中的注释符号

// Javascript 中的注释符号

【讨论】：

【解决方案8】：

<% # region %>

<% # endregion %>

【讨论】：

我修复了您的图片链接，但鉴于您没有提及它是什么 IDE，并且您提供的代码 sn-p 在运行时什么都不做，这不太可能对任何人都有用...

【解决方案9】：

为了让大纲在 Visual Studio 2019 中工作，请确保在评论结束标签前后留有空间：

<!-- #region -->
    <!--Blazor Components Signal-R server-->
    <script src="_framework/blazor.server.js"></script>
    <!-- jQuery -->
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <!-- jQuery UI 1.11.4 -->
    <script src="~/lib/plugins/jquery-ui/jquery-ui.min.js"></script>
    <!--Bootstrap bundle-->
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- #endregion -->

【讨论】：

【解决方案10】：

奇怪的是，有时区域功能在 Visual Studio 2022 中对我有效，有时则无效。我尝试了上述许多方法，但对于该区域是否实际创建而言，它是命中注定的。

但我发现这每次都有效：

 <div data-region="My Header Region">This is my Header Region</div>
 </div>

每次都塌陷，清楚地显示地区名称。

**感谢@AndrewMorton 评论更新。

【讨论】：

只为开发环境中的 UI 创建另一个级别的<div> 似乎是个坏主意。
@AndrewMorton，查看更新。
这看起来是个进步！