<colgroup>

define

The Column Group < COLGroup > tag in HTML is used to define a set of lists in a table.

<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>
Copy the code
Superheros and sidekicks
  Batman Robin The Flash Kid Flash
Skill Smarts Dex, acrobat Super speed Super speed

attribute

This tag supports global attributes.

Span attribute

The parent element

<table>

<pre>

define

The <pre> tag’s “per” means “preformatted text”. You can define preformatted text. There are no specific rules about what text is inside. The text enclosed in the <pre> tag element is usually reserved for Spaces and newlines. Text is rendered in a monospaced font.

<pre> This example shows how to use the pre tag to control blank lines and Spaces. </pre>Copy the code
This example shows how to control blank lines and Spaces using pre tags

The main points of

  • Pre elements are block-level elements, but can only contain text or inline elements. That is, no block-level element (typically a tag that can break a paragraph) can be in a Pre element.
  • Tags that can break paragraphs (such as

    ,

    , and

    tags) should be kept out of the blocks defined by 

    . I've tried modern browsers (Google, Internet Explorer, and Firefox), and although it's possible to interpret end-of-paragraph tags as simple line breaks, "Invalid location of tag (h1)."
  • Special symbols in tags are converted to symbolic entities, such as “<“. > < span style = “max-width: 100%; On behalf of “>”.
  • The text allowed in pre elements can contain physical styles and content-based style variations, as well as links, images, and horizontal separators. Other tags, such as tags, can be placed in the 
     block just as in other parts of an HTML/XHTML document.

  • The TAB character TAB can do its job in blocks defined by the 
     tag, and each TAB takes up eight characters, but it's not recommended because TAB representations vary from browser to browser. Using Spaces in document sections formatted with 
     tags ensures correct horizontal placement of text.
  • If you want to use the 
     tag to define computer source code, such as HTML source code, use symbolic entities to represent special characters. The 
     tag is typically used in conjunction with the  tag to get more precise semantics for marking source code that needs to be rendered on a page.
  • If you want to format a certain set of text in HTML, take advantage of the pre element’s features.

Common application

Represents the source code of the computer.

<code>

define

The semantics of the <code> tag indicate that the text within it is code. Often used with <pre>.

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

function cool(x) {
  return x + 1;
}
Copy the code

There is a line break between <pre><code> and the code, which is also shown as a blank line, which is very annoying. There is no very good CSS way to solve this problem, the best way is to start the code on the same line as the <pre> tag, or use a compiler to remove the newline here.

Pay attention to

When using elements, you need to escape the “<” in the content to “&lt”; To prevent the browser from parsing it as a normal label.

<xmp> !!!!!!!!! Do not use this element

define

Content between < XMP > tags is not parsed as document content but rendered directly in a monospaced font. The HTML2 specification recommends that the content in this tag be wide enough to fit 80 letters per line.

prompt

  • Do not use this element.

  • This element has been deprecated since HTML3.2 and is no longer recommended in later versions. This element has been completely removed from the HTML5 specification.

  • It is recommended that you use the <pre> element, or if you have special requirements you can use the <code> element. Note that when using elements, you need to escape the “<” in the content to “&lt”; To prevent the browser from parsing it as a normal label.

  • Setting the value of the font-family property to generic-font via a CSS stylesheet makes it possible to make any other tag have the same font style.

Extension – HTML tags are displayed as is

  • If it’s simple text with special characters like Spaces and carriage returns, add a <pre></pre> tag to the text.

  • For HTML content, javascript, XML, or other special content, use < XMP ></ XMP >.

  • If you want to display or print while executing in code, you can use <! [cdata []] >.

  • Converts special characters to entities: for example, < to &lt.

<filedset>

define

The <fieldset> element in HTML is used to group control elements (including label elements) in a form. The < fieldSet > tag draws a border around the related form element.

<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>
Copy the code

As shown in the example above, the < Fieldset > element groups parts of an HTML form, with a built-in < Legend > element as the title of the fieldset. This element has several attributes, most notably the form, which can contain the ID of the <form> element on the same page to make <fieldset> part of the <form>, even if <fieldset> is not inside it. There is also the Disabled property, which makes <fieldset> and all of its contents unavailable.

attribute

  • Disabled (HTML 5)

If the bool property is set, all descendants of < fieldSet > form controls inherit the property as well. This means that they are not editable and will not be submitted with <form>. They also do not receive any browser events, such as mouse clicks or focal-related events. By default, browsers display such controls in gray. Note that form elements in < Legend > are not disabled.

  • Form (HTML 5)

Set this value to the ID attribute value of a <form> element to set < fieldSet > as part of the <form>.

  • Name (HTML 5)

CSS styles

<fieldset> has several special style schemes.

  • Its display value defaults to block, thus establishing a block-level formatting context. If the display value of <fieldset> is set to the inline level, it will appear inline-block, otherwise it will appear as block. By default, <fieldset> will have a 2px groove border around the content, a default small inner margin, and min-inline-size: min-content (en-us).

  • If there is a <legend> element, it is placed on the border at the beginning of the block-level box. The width of <legend> is shrink-wrap based on the content and also establishes a formatting context. The display value is block-level (for example, display: inline appears as a block).

  • The contents of < FieldSet > are surrounded by an anonymous box that inherits some of the properties of < FieldSet >. If the style of <fieldset> is set to display: grid or display: inline-grid, the anonymous box will also be a raster context. If the style of <fieldset> is set to display: flex or display: inline-flex, the anonymous box is also an elastic box context. In addition to the above, anonymous boxes create block-level formatting contexts by default.

  • You can style < FieldSet > and < Legend > in any way you want to fit your page design.

Note: As of now, Microsoft Edge and Google Chrome cannot use Flexbox and Grid layouts in \<fieldset>.

application

Simple fieldset
<form action="#">
  <fieldset>
    <legend>Simple fieldset</legend>
    <input type="radio" id="radio">
    <label for="radio">Spirit of radio</label>
  </fieldset>
</form>
Copy the code
Disable the 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>
Copy the code

<marquee> !!!!!!!!! Have been abandoned

define

The HTML marquee element (<marquee>) is used to insert a scroll of text. You can use its properties to control what happens when the text reaches the edge of the container. But please don’t use it.

attribute

  • behavior

Sets how text scrolls within the marquee element. The options are scroll, slide, and alternate. If no value is specified, the default value is scroll.

  • bgcolor

Set the background color by color name or hexadecimal value.

  • direction

Sets the scrolling direction of text within the marquee. The available values are left, right, up and Down. If no value is specified, the default value is left.

  • height

Sets the height in pixels or percentages.

  • hspace

Set a horizontal margin.

  • loop

Set the number of times the marquee scrolls. If no value is specified, the default value is −1, which indicates that the marquee will be continuously rolled.

  • scrollamount

Sets the length, in pixels, to move during each scroll. The default value is 6.

  • scrolldelay

Sets the time interval, in milliseconds, between each scroll. The default value is 85. Note that unless a Truespeed value is specified, any value less than 60 is ignored and 60 is used instead.

  • truespeed

By default, scrolldelay values less than 60 are ignored. If truespeed exists, those values are not ignored.

  • vspace

Sets the vertical margin in pixels or percentages.

  • width

Set the width in pixels or percentages.

The global property tabIndex

define

Tabindex Global property. Indicates whether its element can be focused, and whether/where it participates in sequential keyboard navigation (usually using the Tab key, hence the name).

<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>
Copy the code

value

It accepts an integer as a value, with different results depending on the value of the integer:

  • Tabindex = negative (usually tabIndex = “-1”), indicating that the element is focusable but cannot be queried by keyboard navigation, which is useful when using JS for internal keyboard navigation of page widgets.
  • Tabindex =”0″, indicating that the element is focusable and can be focused to by keyboard navigation, its relative order determined by the DOM structure in which it is currently located.
  • Tabindex = positive, indicating that the element is focusable and can be queried by keyboard navigation; Its relative order increases with tabIndex and lags in focusing. If multiple elements have the same TabIndex, their relative order is determined by their order in the current DOM.

Note: The maximum value of tabIndex should not exceed 32767. If not specified, it defaults to 0.

Depending on the order in which the keyboard sequence navigates, elements with a value of 0, invalid, or no tabIndex value should be placed after elements with a positive tabIndex value.

If we set the tabIndex property on <div>, its child content cannot be scrolled using the arrow keys unless we also set tabIndex on the content.

Other global properties.