HTML中是否有#Region代码？

Question

在VB和C#中，有#Region ... #endRegion的代码块，可以折叠显示。HTML中是否有类似的功能？

目前我只是在HTML页面上使用注释来标记不同元素的位置，但我希望有一个单一的折叠点，而不是所有的<tr>、<td> 和 <div> 标签都被折叠显示。

- Jim

Answer 1

这确实取决于集成开发环境，我今天刚注意到Visual Studio的免费Web Essentials 2012插件的最新版本已经在HTML中添加了“区域”支持。

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

http://vswebessentials.com/changelog

  <!--#region main  -->


  <!--#endregion -->

- BigBlondeViking

---

这在Visual Studio 2013中仍然有效，仍需要安装Web Essentials。 - Samuel MacLachlan

<!-- region 区域名称 --> 和 <!-- endregion --> 在Intellij中起作用。 - Hisham Bawa

Answer 2

As of Visual Studio 2013 Update 4 regions are now supported in the HTML editor. You may use the built in code snippet: type "

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

You can find the details of this improvement and other new features in update 4 here.

- Mauricio Aviles

Answer 3

我的看法是不可以。

Region只是一个IDE指令，在编辑器（Visual Studio）中才会被识别。在HTML标准中没有任何内容，而且无论您在HTML中放置什么内容，它都会直接发送到浏览器，因此我从未遇到过任何情况，并且无法想象以后会有类似的情况出现。

- Paul Hadfield

Answer 4

选中你想要折叠的部分，然后前往 Edit -> Outlining -> Hide Selection

参考资料: 如何在Visual Web Developer中折叠和展开HTML元素

注: 假设您正在使用Visual Studio

- Ryan Kinal

---

根据@Jim在他的问题中最初的陈述，这只允许折叠现有的HTML部分，您不能将几个HTML元素包装在#region中并折叠它 - 最接近的方法是使用DIV元素，但那也会被发送到客户端。 - Paul Hadfield

我不相信它会。我只是使用这种方法折叠了段落的中间部分。 - Ryan Kinal

抱歉，你是对的。这是我以前没有遇到过的额外功能。它几乎与区域相同，但似乎无法为其命名，如果隐藏了3行，则显示隐藏选择的“…”将出现在第4行的开头（而不是单独的一行），但它被隐藏在该部分中。就像你所说的那样，它完全由IDE驱动，并且可以在HTML元素内工作或包含2个或多个不同元素的一部分。 - Paul Hadfield

是的，它缺少命名功能。因此，这只是一个部分解决方案。 - Ryan Kinal

Answer 5

对于HTML：

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

Javascript的相关内容：

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

你会发现，Visual Studio在注释中标识了区域块。

在Html中，<!-- -->是注释符号。

在Javascript中，//是注释符号。

- user10823333

Answer 6

为了使 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 -->

注意：这个功能在Visual Studio 2022中还不能使用。

- Ashraf Sada

Answer 7

我使用div标签来折叠HTML代码块:

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

在我学习之前

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

它们两个都解决了问题。

- suleymanduzgun

Answer 8

你可以将此用于折叠评论。

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

在VS中，div标签可以折叠或展开。

- Cybernetic Code

Answer 9

在Visual Studio Code中，可以通过使用正确的语法来完成此操作：

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

确保在#和region或endregion之间没有空格。

- Akaisteph7

Answer 10

奇怪的是，有时候在Visual Studio 2022中区域功能对我有效，有时候则无法使用。我尝试了上面很多方法，但是要么区域实际上被创建了，要么就没有。

但是我发现这种方法每次都能行：

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

每次它都会崩溃，并且它会清晰地显示区域名称。

**由于@AndrewMorton的评论进行了更新。

- Greg Gum

---

在开发环境中，仅为 UI 创建另一个 <div> 层似乎是一个不好的想法。 - Andrew Morton

@AndrewMorton，参见更新。 - Greg Gum

那看起来像是一个改进！ - Andrew Morton