HTML 几个少用到的标签写代码过程中遇到的几个不常见标签。<colgroup>、<pre>、<code>、<xmp>、

<colgroup>

定义

HTML 中的表格列组（Column Group <colgroup>）标签用来定义表中的一组列表。

<table>
    <caption>Superheros and sidekicks</caption>
    <colgroup>
        <col>
        <col span="2" class="batman">
        <col span="2" class="flash">
    </colgroup>
    <tr>
        <td> </td>
        <th scope="col">Batman</th>
        <th scope="col">Robin</th>
        <th scope="col">The Flash</th>
        <th scope="col">Kid Flash</th>
    </tr>
    <tr>
        <th scope="row">Skill</th>
        <td>Smarts</td>
        <td>Dex, acrobat</td>
        <td>Super speed</td>
        <td>Super speed</td>
    </tr>
</table>

Superheros and sidekicks
	Batman	Robin	The Flash	Kid Flash
Skill	Smarts	Dex, acrobat	Super speed	Super speed

属性

此标签支持全局属性。

span属性

父元素

<table>

<pre>

定义

<pre> 标签的 “per” 的意思是 “preformatted text”（预格式化的文本），可定义预格式化的文本。没有特别规定里面的文本是什么内容。被包围在 <pre> 标签元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre>
此例演示如何使用 pre 标签
对空行和 空格
进行控制
</pre>

此例演示如何使用 pre 标签
对空行和 空格
进行控制

要点

pre元素是块级元素，但是只能包含文本或行内元素。也就是说，任何块级元素（常见为可以导致段落断开的标签）都不能位于pre元素中。
可以导致段落断开的标签（比如<h1>、<p> 和 <address> 标签）尽量不要包含在 <pre> 所定义的块里，我试过现在的浏览器（Google、IE和火狐），虽然可以把段落结束标签解释为简单地换行，但是在代码编辑器里会报错 "Invalid location of tag (h1)."
标签中的特殊符号被转换为符号实体，比如 "<" 代表 "<"，">" 代表 ">"。
pre元素中允许的文本可以包含物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。当把其他标签，比如<a>标签放到<pre>块中时，就像放在HTML/XHTML文档的其他部分中一样即可。
制表符tab在<pre>标签定义的块当中可以起到应有的作用，每个制表符占据8个字符的位置，但并不推荐使用tab，因为在不同的浏览器中，tab的表现形式各不相同。在用<pre>标签格式化的文档段中使用空格，可以确保文本正确的水平位置。
如果希望使用<pre>标签来定义计算机源代码，比如HTML源代码，请使用符号实体来表示特殊字符。一般将<pre>标签与<code>标签结合起来使用，以获得更加精确的语义，用于标记页面中需要呈现的源代码。
如果想要把某一段规定好的文本格式放在HTML中，那么就要利用pre元素的特性。

常见应用

表示计算机的源代码。

<code>

定义

<code> 标签的语义表示其中的文本是代码。常与<pre>一起使用。

<pre><code>
function cool(x) {
  return x + 1;
}
</code></pre>


function cool(x) {
  return x + 1;
}

在<pre><code>和代码之间有一个换行，而这也会被显示成一个空行，这非常讨厌。没有非常好的 CSS 方法来解决这个问题，最好的方法是与 <pre> 标签同一行开始代码，或者用编译程序来去除这里的换行。

注意

使用元素的时候，需要将内容中的"<"转义为"&lt";，以防止被浏览器当作正常标签解析。

<xmp> `！！！请不要使用该元素`

定义

<xmp> 标签之间的内容不会被当作文档内容解析，而会被用等宽字体直接呈现。HTML2 规范建议，本标签中的内容应该具有足够容纳每行80个字母的宽度。

提示

请不要使用这个元素。
从HTML3.2开始反对使用本元素，同时它不再会在之后版本内被推荐使用。在HTML5规范内，本元素已经完全被移除。
建议您使用<pre> 元素，如果有特殊需求，您可以使用 <code> 元素。需要您注意的是，使用元素的时候，需要将内容中的"<"转义为"&lt";，以防止被浏览器当作正常标签解析。
通过CSS样式表将 font-family 属性的值设置成为generic-font，可以让任何其他任何标签获得等宽字体的样式。

引申 —— html标签原样显示

如果是有空格和回车这样的特殊字符的简单文本在文本外加<pre></pre>标签。
如果是html内容、javascript、xml或其他特殊内容，使用<xmp></xmp>。
如果是在代码中执行时要显示或打印等可以使用<![cdata[ ]]>。
将特殊字符转为实体：如< 转为 &lt。

<filedset>

定义

HTML 中 <fieldset> 元素用于对表单中的控制元素进行分组（也包括 label 元素）。<fieldset> 标签会在相关表单元素周围绘制边框。

<form>
  <fieldset>
    <legend>Choose your favorite monster</legend>

    <input type="radio" id="kraken" name="monster">
    <label for="kraken">Kraken</label><br/>

    <input type="radio" id="sasquatch" name="monster">
    <label for="sasquatch">Sasquatch</label><br/>

    <input type="radio" id="mothman" name="monster">
    <label for="mothman">Mothman</label>
  </fieldset>
</form>

如上述例子所示，<fieldset> 元素将一个HTML表单的一部分组成一组，内置了一个 <legend> 元素作为 fieldset 的标题。这个元素有几个属性，最值得注意的是 form，其可以包含同一页面的 <form> 元素的 id，以使 <fieldset> 成为这个 <form> 的一部分，即使 <fieldset> 不在其内。还有 disabled 属性，可将 <fieldset> 及其所有内容设置为不可用。

属性

disabled （HTML 5）如果设置了这个 bool 值属性, <fieldset> 的所有子代表单控件也会继承这个属性。这意味着它们不可编辑，也不会随着 <form> 一起提交。它们也不会接收到任何浏览器事件，如鼠标点击或与聚焦相关的事件。默认情况下，浏览器会将这样的控件展示为灰色。注意，<legend> 中的表单元素不会被禁用。
form （HTML 5）将该值设为一个 <form> 元素的 id 属性值以将 <fieldset> 设置成这个 <form> 的一部分。
name （HTML 5）

CSS 样式

<fieldset> 有几种特别的样式方案。

它的 display 值默认为 block，因此建立了一个块级格式化上下文。如果将 <fieldset> 的 display 值设置为行内级别，则会表现为 inline-block，否则会表现为 block。默认情况下 <fieldset> 会有 2px groove 的边界围绕着内容，还有一个默认的小的内边距，还有 min-inline-size: min-content (en-US) 。
如果其中有 <legend> 元素，会放在块级框起始处的边界上。<legend> 的宽度会根据内容尽量收缩（shrink-wrap），同时也建立了一个格式化上下文。display 值会块级化（例如 display: inline 表现为 block）。
一个匿名的框会包围 <fieldset> 的内容，这个框继承了 <fieldset> 的一些属性。如果将 <fieldset> 的样式设置为 display: grid 或 display: inline-grid，那么这个匿名框也会是栅格上下文。如果将 <fieldset> 的样式设置为 display: flex 或 display: inline-flex，则匿名框也会是弹性盒上下文。除上述情况之外，匿名框默认建立块级格式化上下文。
你可以以任意方式自行设置 <fieldset> 和 <legend> 的样式以配合你的页面设计。

注：截至目前为止，Microsoft Edge 和 Google Chrome 不能在 \<fieldset> 中使用 flexbox 和 grid 布局。

应用

简单 fieldset

<form action="#">
  <fieldset>
    <legend>Simple fieldset</legend>
    <input type="radio" id="radio">
    <label for="radio">Spirit of radio</label>
  </fieldset>
</form>

禁用 fieldset

<form action="#">
  <fieldset disabled>
    <legend>Disabled fieldset</legend>
    <div>
      <label for="name">Name: </label>
      <input type="text" id="name" value="Chris">
    </div>
    <div>
      <label for="pwd">Archetype: </label>
      <input type="password" id="pwd" value="Wookie">
    </div>
  </fieldset>
</form>

<marquee> `！！！已废弃`

定义

HTML marquee 元素（<marquee>）用来插入一段滚动的文字。你可以使用它的属性控制当文本到达容器边缘发生的事情。但请不要使用它。

属性

behavior 设置文本在 marquee 元素内如何滚动。可选值有 scroll，slide 和 alternate。如果未指定值，默认值为 scroll。
bgcolor 通过颜色名称或十六进制值设置背景颜色。
direction 设置 marquee 内文本滚动的方向。可选值有 left, right, up and down。如果未指定值，默认值为 left。
height 以像素或百分比值设置高度。
hspace 设置水平边距。
loop 设置 marquee 滚动的次数。如果未指定值，默认值为 −1，表示 marquee 将连续滚动.
scrollamount 设置每次滚动时移动的长度（以像素为单位）。默认值为 6。
scrolldelay 设置每次滚动时的时间间隔（以毫秒为单位）。默认值为 85。请注意，除非指定 truespeed 值，否则将忽略任何小于 60 的值，并改为使用 60。
truespeed 默认情况下，会忽略小于60的scrolldelay值。如果存在truespeed，那些值不会被忽略。
vspace 以像素或百分比值设置垂直边距。
width 以像素或百分比值设置宽度。

全局属性tabindex

定义

tabindex 全局属性。指示其元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航（通常使用Tab键，因此得名）。

<p>Click anywhere in this pane, then try tabbing through the elements.</p>

<label>First in tab order:<input type="text"></label>

<div tabindex="0">Tabbable due to tabindex.</div>

<div>Not tabbable: no tabindex.</div>

<label>Third in tab order:<input type="text"></label>

值

它接受一个整数作为值，具有不同的结果，具体取决于整数的值：

tabindex=负值 (通常是tabindex=“-1”)，表示元素是可聚焦的，但是不能通过键盘导航来访问到该元素，用JS做页面小组件内部键盘导航的时候非常有用。
tabindex="0" ，表示元素是可聚焦的，并且可以通过键盘导航来聚焦到该元素，它的相对顺序是当前处于的DOM结构来决定的。
tabindex=正值，表示元素是可聚焦的，并且可以通过键盘导航来访问到该元素；它的相对顺序按照tabindex 的数值递增而滞后获焦。如果多个元素拥有相同的 tabindex，它们的相对顺序按照他们在当前DOM中的先后顺序决定。 注：tabindex 的最大值不应超过 32767。如果没有指定，它的默认值为 0。

根据键盘序列导航的顺序，值为 0 、非法值、或者没有 tabindex 值的元素应该放置在 tabindex 值为正值的元素后面。

如果我们在 <div> 上设置了 tabindex 属性，它的子元素内容不能使用箭头键来滚动，除非我们在内容上也设置 tabindex。

其他全局属性。

HTML 几个少用到的标签