We know that HTML is a simple markup language. Some basic knowledge has been said and almost everything that needs to be said has been said. No one pays attention to what is new about HTML. In fact, Otherwise, maybe we are only familiar with the very common tags in HTML, but you may not be familiar with or use some special tags, but maybe you will really like them. 1. optgroup tag - logically group the options in the select element Few of us pay attention to this element, and few people know what the function of this element is. In fact, this element is usually used in the select element, and its function is to logically group the options in the select element. In fact, we may use this element on many occasions. For example, when we conduct identity surveys on web visitors, we usually ask them to fill in information. Taking the city where you currently live as an example, you may live in Jiangsu Province or Shandong Province. If you live in other provinces, there are cities under these provinces, so you need to group these cities into their respective provinces. Normally we would write code like this: <select> The result is this: In fact, this method is very crude. If we use the optgroup element, we will achieve different effects: <select> The result is this: Is this method better? 2. Sub tag and sup tag - superscript and subscript settings for text objects The sub tag is an inline element whose function is to display the included text as a subscript, slightly smaller than the current font. This element is available in HTML from Internet Explorer 3.0 and above, and in script from Internet Explorer 4.0 and above. This element requires a closing tag. A common example is that when editing mathematical formulas, we need to set the superscript and subscript of variables. The example is as follows: X<sub>2</sub> The result is this: X 2 X 2 It can be used for comments in combination with other tags, for example: Mao Zedong<sub><em>Note: great leader, revolutionary, military strategist and thinker</em></sub> The result is this: Notes on Mao Zedong: great leader, revolutionist, military strategist and thinker 3. bdo tag - disable bidirectional rules for selected text fragments Let's look at a simple example first: <bdo dir="ltr">I love you very much</bdo> <bdo dir="rtl">Your love is not mine</bdo> Note: When using the bod tag, you must use the dir tag attribute. ltr refers to the arrangement order from left to right, and rtl refers to the arrangement order from right to left. The displayed result is: i love you very much You love me very much We see that different text sorting becomes the same display result after being defined by bdo. This is the role of bdo. The Unicode bidirectional algorithm automatically reverses the embedded character sequence based on its directional properties. For example, the basic direction of English documents is left to right (ltr). If a section of the document contains language that reads from right to left (rtl), you can apply a bidirectional algorithm to reverse the direction of the language. The bidirectional algorithm and the DIR tag attribute are usually sufficient to handle changes in embedding direction. However, when you submit formatted text to a bidirectional algorithm, errors may occur. For example, a text segment containing English and Hebrew formatted in an email will be incorrectly converted by the bidirectional algorithm. Since the reading order of the Hebrew text has already been converted in email format, applying the bidirectional algorithm to it causes the text to be converted again. The bdo element will turn off the bidirectional algorithm and control the reading order. When you use the bdo element you must use the dir tag attribute.
<option selected>Your city</option>
<option>---Shandong Province---</option>
<option>Jinan City</option>
<option>Laizhou City</option>
<option>……</option>
<option>---Anhui Province---</option>
<option>Hefei City</option>
<option>……</option>
<option>---Jiangsu Province---</option>
<option>Nanjing City</option>
<option>……</option>
</select>
<option selected>Your city</option>
<optgroup label="Shandong Province">
<option>Jinan City</option>
<option>Laizhou City</option>
</optgroup>
<optgroup label="Anhui Province">
<option>Hefei City</option>
<option>……</option>
</optgroup>
<optgroup label="Jiangsu Province">
<option>Nanjing City</option>
<option>……</option>
</optgroup>
</select>
X<sup>2</sup>