1.mark

is used to show the most important points on the page, just as a book likes to use highlighters to mark important points, the browser half shows the content marked in yellow

2. The details and the summary

When summary is placed inside the Details element, the Summary element defines the summary information for Details, which is visible by default and expands when you click summary

Method of use

<div>Mark:<mark>I'm Mark mark</mark></div>
<details>
    <summary>Crazy Stone</summary>
    <p>Crazy Stone is a really good movie!</p>
</details>
Copy the code

According to the effect

Ruby, RB, RT, RP, RTC, RBC

The label instructions
ruby Used to display phonetic or character annotations of East Asian scripts
rt Is the interpretation or pronunciation of characters (Chinese zhuyin or characters)
rb Is the subject content that represents the phonetic annotation or annotation
rp Is used in Ruby comments to define what should be displayed by browsers that do not support Ruby elements
rtc <rt>Tag enhanced edition, he is not a collection! One content tag can correspond to up to two<rtc>Label, this label will be generally translated subtitles, English above, middle Chinese characters, Chinese pinyin below
rbc is<rb>A collection of tags, one<ruby>There can only be one body, and the first of many is valid by default, that is, to manage all of them<rb>Tag, you don’t have to, DOM is a little bit less formal

Ruby, RB, RT, RP use methods

<ruby>
	<rb>Me and my country</rb>
	<rt>Chinese translation: 1</rt>
	<rp>(ǒ he wǒ de zǔ)</rp>
</ruby>
Copy the code

According to the effect

In the example above

The label instructions
<rb> Content Subject (Me and my Country)
<rt> (wǒ he W ǒ de zǔ guo)
<rp> Alternate display content when browsers are incompatible

RBC, RTC method 1

<ruby>
	<rbc>
		<rb>you</rb><rp>(</rp><rt>N ǐ</rt><rp>)</rp>
		<rb>good</rb><rp>(</rp><rt>H m: o</rt><rp>)</rp>
	</rbc>
	<rtc style="ruby-position: under;">
		<rp>(</rp><rt>hello</rt><rp>)</rp>
	</rtc>
</ruby>
Copy the code

According to the effect

Note: < RTC > and < RBC > are currently only supported by Firefox, if you use any other browser, this example will enclose parentheses around Ruby annotations, and the format may look bad.

You can also use both<rtc>Or a<rtc> + <rt>The combination of

RBC, RTC usage 2

<ruby>
    <rb>Give a rose and leave a lingering fragrance</rb>
    <rtc style = "ruby-position: over"><rt>Zeng Ren Mei Gu ī shǒu Liu Yu Xi āng</rt></rtc>
    <rtc style = "ruby-position: under"><rt>you share rose get fun</rt></rtc>
</ruby>
Copy the code

According to the effect

Ruby style attributes: Ruby-position, ruby-align

Style properties instructions
ruby-position <ruby>Tag specific style, control<ruby>The position of the label content relative to the labeled text,overHorizontal text is rendered above the annotations and vertical text is rendered to the right. The default value,underHorizontal text is rendered below the annotations and vertical text is rendered to the left
ruby-align Represents how the content is aligned with the text of the annotation,startStart position aligned (left aligned),centerCenter, space-between evenly distributed,space-aroundDistribute content evenly within its box, but not necessarily fill space from edge to edge

4.bdi

The text orientation setting that separates a piece of text from its parent element, useful for situations where you do not have complete control over the content

To give you an example, Arabic is usually read from right to left. For example, when translating the 2008 Beijing Olympics, the browser will assume that 2008 is part of the Arabic text and will default to reverse order (👇 in this example, I did not write 2008 first, When you add a number to an Arabic word, the default is in reverse order. We can solve it by adding the BDI tag

Method of use

<p><bdi>An ل أ ل ع an ب an ل أ organisation ل م ب ي ة ف ي ب ك ي ن</bdi>: Beijing 2008 Olympic Games</p>
<p>Free button أ button ع free button ع free button أو button م Planet cartoon Red planet cartoon Free button Radio message: The 2008 Beijing Olympic Games</p>
Copy the code

According to the effect

5.wbr

Used to wrap the specified text at the appropriate place, usually too long for English words, the browser will wrap the specified place

Method of use

<div style="width: 100px;">International word: inter<wbr>national<wbr>ization</div>
Copy the code

According to the effect

6. Fieldset and legend

A border is drawn around the associated form element. Used to group form elements, fieldSet also has name, form, and Disable attributes

Fieldset properties instructions
name Refers to the name of the Fieldset element
form This property must be a valid <form… /> to specify that the fieldSet element specifies the form
disable Disables the form element, which is a Boolean value (<fieldset disabled></fieldset>)

Method of use

  <fieldset>
    <legend>A form to fill out</legend>Name:<input type="text" /><br>Age:<input type="text" />
  </fieldset>
Copy the code

According to the effect

Off topic: according to the labels above we can write the effect of lines on both sides and text in the middle

fieldset{
      border-left: none;
      border-right: none;
      border-bottom: none;
      color: #009688;
      border-color: #defffc;
      height:20px;
      
  }
  legend{
      text-align: center;
      padding: 0 10px;
      font-size: 14px;
  }
<fieldset>
    <legend>Historical events</legend>
</fieldset>
Copy the code

Results the following

7. Labels that you don’t use often but can use well

The label instructions
<b> Bold text
<i> Italic text
<em> Emphasis on text
<small> Definition of small font text, usually used to annotate disclaimers, notes, copyright related, HTML5 removed<big>The element
<sup> Superscript text
<sub> The subscript text
<bdo> The tag that controls text sorting. It has two attributes, LTR: forward order (left to right) or RTL reverse order (right to left)

Method of use

    <p><b>B: Bold text</b></p>
    <p><i>I: Italic text</i></p>
    <p><em>Em: Emphasize the text</em></p>
    <p>Normal text<small>: Text in small print</small></p>
    <p>H<sub>2</sub>O</p>
    <p>10<sup>2</sup></p>
    <p>Positive sequence LTR:<bdo dir="ltr">123456789</bdo></p>
    <p>RTL in reverse chronological order:<bdo dir="rtl">123456789</bdo></p>
Copy the code

According to the effect

8. Semantically relevant labels

The label instructions
<abbr> Used to indicate an abbreviation. It is recommended to specifyThe title attributeTo specify the full name of the abbreviation
<address> Represents the address, commonly used by browsersitalicsTo represent the
<blockquote> Define aVery long quote textThe browser displays the text indented, specifying the cite attribute, which in English specifies the URL or source from which the text was quoted
<q> Define a short piece of reference text that the browser will give youAdd quotation marks, the difference from blockquote is that blockquote is used to refer to a large piece of text with a line break, while q elements refer to a piece of text without a line break.Shorter text
<cite> The title used to represent the work that the browser will useitalicsTo display the
<code> Representing computer code
<dfn> Define a technical term that browsers usually useBold or italicTo display the
<del> The deleted text will be displayed by the browserDraw a line in theIs displayed in the
<ins> Defines the text to be inserted, and the browser will use theThe underlineIn the form of
<pre> Indicates that the text contained by the element has already been processedpre-formattedThat is, the space, carriage return, TAB key and other formatting characters of the text contained in the Pre elements are retained, but the browser handles most of the HTML elements of the Pre
<samp> Defines sample text forIdentifies computer program output, usually using the browser’s default monotype font
<kbd> defineKeyboard text“Is used to indicate that text is keyboard input and is often used in computer documentation
<var> Represents a variable that browsers typically use as aitalicsThe display)

Method of use

    <p><mark>Abbr tags:</mark>The United States:<abbr title="American">USA</abbr></p>
    <div><mark>The address label:</mark>Address:<address>Nanjing, Jiangsu Province</address></div>
    <p><mark>Blockquote tags:</mark>Define a long quote text<blockquote>The browser displays the text indented, specifying the cite attribute, which specifies the URL or source from which the text was quoted</blockquote></p>
    <p><mark>Q tag text:</mark><q>The reference text</q></p>
    <p><mark>Cite the label:</mark><cite>This is a headline</cite></p>
    <p><mark>Code label:</mark>A piece of computer code:<code>document.getELementById("id");</code></p>
    <p><mark>DFN tags:</mark><dfn>Define the project</dfn></p>
    <p><mark>Del tags:</mark><del>I was deleted</del></p>
    <p><mark>Ins tags:</mark><ins>Inserted text</ins></p>
    <p><mark>The pre tag:</mark>
    	<pre>
    	let a = 1;
    	let b = 2;
    	console.log(a+b);
    	</pre>
    </p>
    <p><mark>Samp tag instead:</mark>Program output:<samp>Program output</samp></p>
    <p><mark>The KDB tags:</mark>type<kbd>quit</kbd>type<kbd>tab</kbd>Switching.</p>
    <p><mark>Var tags:</mark>Variables:<var>Type type</var></p>
Copy the code

According to the effect