📅 最后修改于: 2023-12-03 14:57:22.249000 🧑 作者: Mango
视觉代码按标签是一种针对程序员设计的代码编辑器插件，它可以根据标签对代码进行着色和排版，提高代码的可读性和可维护性。
在安装了视觉代码按标签插件的编辑器中，按下组合键“Ctrl + Shift + P”，在弹出的命令面板中输入“视觉代码按标签”后选择“开启”，即可开始使用视觉代码按标签功能。
<html>：HTML 标签，主要用于网页结构标记。<head>：HTML 中的头部标签，用于包含文档的元数据信息。<body>：HTML 中的 body 标签，用于包含网页的主体内容。<script>：用于定义脚本，可放置在 head 或 body 中。<style>：用于定义 CSS 样式。<h1>~<h6>：HTML 标题标签，用于表示文档的结构层次。<p>：用于表示一个段落。<a>：用于插入超链接。<img>：用于插入图片。<ul>、<ol>：无序列表和有序列表。<li>：列表中的一个项目。<table>：用于定义表格。<tr>：表格中的一行。<td>：表格中某一行的一个单元格。以下是一段示例代码，其包含了上述所提到的所有标签。代码片段按markdown标注如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>示例代码</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
h1 {
color: #369;
}
img {
max-width: 100%;
height: auto;
}
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
</style>
</head>
<body>
<h1>HTML</h1>
<p>HTML（Hypertext Markup Language）是一种用于创建网页的标准标记语言。</p>
<p>以下是 HTML 中的一些常用标签：</p>
<ul>
<li><code><head></code>：用于包含文档的元数据信息。</li>
<li><code><body></code>：用于包含网页的主体内容。</li>
<li><code><script></code>：用于定义脚本，可放置在 head 或 body 中。</li>
<li><code><style></code>：用于定义 CSS 样式。</li>
<li><code><h1></code>~<code><h6></code>：用于表示文档的结构层次。</li>
<li><code><p></code>：用于表示一个段落。</li>
<li><code><a></code>：用于插入超链接。</li>
<li><code><img></code>：用于插入图片。</li>
<li><code><ul></code>、<code><ol></code>：无序列表和有序列表。</li>
<li><code><li></code>：列表中的一个项目。</li>
<li><code><table></code>：用于定义表格。</li>
<li><code><tr></code>：表格中的一行。</li>
<li><code><td></code>：表格中某一行的一个单元格。</li>
</ul>
<h1>代码示例</h1>
<p>以下是一个简单的 HTML 页面：</p>
<pre><code>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>示例代码</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
h1 {
color: #369;
}
img {
max-width: 100%;
height: auto;
}
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
</style>
</head>
<body>
<h1>HTML</h1>
<p>HTML（Hypertext Markup Language）是一种用于创建网页的标准标记语言。</p>
<p>以下是 HTML 中的一些常用标签：</p>
<ul>
<li><code>&lt;head&gt;</code>：用于包含文档的元数据信息。</li>
<li><code>&lt;body&gt;</code>：用于包含网页的主体内容。</li>
<li><code>&lt;script&gt;</code>：用于定义脚本，可放置在 head 或 body 中。</li>
<li><code>&lt;style&gt;</code>：用于定义 CSS 样式。</li>
<li><code>&lt;h1&gt;</code>~<code>&lt;h6&gt;</code>：用于表示文档的结构层次。</li>
<li><code>&lt;p&gt;</code>：用于表示一个段落。</li>
<li><code>&lt;a&gt;</code>：用于插入超链接。</li>
<li><code>&lt;img&gt;</code>：用于插入图片。</li>
<li><code>&lt;ul&gt;</code>、<code>&lt;ol&gt;</code>：无序列表和有序列表。</li>
<li><code>&lt;li&gt;</code>：列表中的一个项目。</li>
<li><code>&lt;table&gt;</code>：用于定义表格。</li>
<li><code>&lt;tr&gt;</code>：表格中的一行。</li>
<li><code>&lt;td&gt;</code>：表格中某一行的一个单元格。</li>
</ul>
<h1>代码示例</h1>
<p>以下是一个简单的 HTML 页面：</p>
<pre><code>
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;示例代码&lt;/title&gt;
&lt;style&gt;
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
h1 {
color: #369;
}
img {
max-width: 100%;
height: auto;
}
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;HTML&lt;/h1&gt;
&lt;p&gt;HTML（Hypertext Markup Language）是一种用于创建网页的标准标记语言。&lt;/p&gt;
&lt;p&gt;以下是 HTML 中的一些常用标签：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;&amp;lt;head&amp;gt;&lt;/code&gt;：用于包含文档的元数据信息。&lt;/li&gt;
&lt;li&gt;&lt;code&gt;&amp;lt;body&amp;gt;&lt;/code&gt;：用于包含网页的主体内容。&lt;/li&gt;
&lt;li&gt;&lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt;：用于定义脚本，可放置在 head 或 body 中。&lt;/li&gt;
&lt;li&gt;&lt;code&gt;&amp;lt;style&amp;gt;&lt;/code&gt;：用于定义 CSS 样式。&lt;/li&gt;
&lt;li&gt;&lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt;~&lt;code&gt;&amp;lt;h6&amp;gt;&lt;/code&gt;：用于表示文档的结构层次。&lt;/li&gt;
&lt;li&gt;&lt;code&gt;&amp;lt;p&amp;gt;&lt;/code&gt;：用于表示一个段落。&lt;/li&gt;
&lt;li&gt;&lt;code&gt;&amp;lt;a&amp;gt;&lt;/code&gt;：用于插入超链接。&lt;/li&gt;
&lt;li&gt;&lt;code&gt;&amp;lt;img&amp;gt;&lt;/code&gt;：用于插入图片。&lt;/li&gt;
&lt;li&gt;&lt;code&gt;&amp;lt;ul&amp;gt;&lt;/code&gt;、&lt;code&gt;&amp;lt;ol&amp;gt;&lt;/code&gt;：无序列表和有序列表。&lt;/li&gt;
&lt;li&gt;&lt;code&gt;&amp;lt;li&amp;gt;&lt;/code&gt;：列表中的一个项目。&lt;/li&gt;
&lt;li&gt;&lt;code&gt;&amp;lt;table&amp;gt;&lt;/code&gt;：用于定义表格。&lt;/li&gt;
&lt;li&gt;&lt;code&gt;&amp;lt;tr&amp;gt;&lt;/code&gt;：表格中的一行。&lt;/li&gt;
&lt;li&gt;&lt;code&gt;&amp;lt;td&amp;gt;&lt;/code&gt;：表格中某一行的一个单元格。&lt;/li&gt;
&lt;/ul&gt;
&lt;table&gt;
&lt;tr&gt;
&lt;th&gt;名称&lt;/th&gt;
&lt;th&gt;性别&lt;/th&gt;
&lt;th&gt;年龄&lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;张三&lt;/td&gt;
&lt;td&gt;男&lt;/td&gt;
&lt;td&gt;20&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;李四&lt;/td&gt;
&lt;td&gt;女&lt;/td&gt;
&lt;td&gt;22&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</body>
</html>
以上代码片段中除了HTML标签之外，还包含了Markdown的语法，例如代码块和行内代码。