Get to know and learn some HTML5 tags that you haven't had a chance to learn yet.
<ruby> tab (of a window) (computing)
HTML <ruby> element is used to display theEast Asian scriptAnnotation or character annotation.
For example.
<ruby> brother<rt> xiongdi</rt> </ruby>
<rt> element contains the pronunciation of the character, which appears in the ruby annotations, which are used to describe the pronunciation of East Asian characters. This element is always in the<ruby> element is used.
If you need to align each character vertically with the pinyin above, you can use two ruby tags
<ruby>brother<rt>xiong</rt></ruby>.
<ruby>brother<rt>di</rt></ruby>.
There's an rp tag inside the ruby tag.<rp> element is used to add a new element for those who can't use the<ruby> element displays a browser for ruby annotations.
<ruby> brother <rp>(</rp> <rt>xiongdi</rt> <rp>)</rp> </ruby>
You can create some interesting effects with ruby.
1. Subtitle Pinyin
<div>
<ruby>word<rt>zi</rt></ruby>
<ruby>curtain<rt>mu</rt></ruby>.
<ruby>spell<rt>pin</rt></ruby>.
<ruby>tone<rt>yin</rt></ruby>
</div>
2. Textual translation notes
<div>.
<ruby> jack, slowfuck<rt> Czechoslovakia (which is a country)</rt> </ruby>
</div>
</div>
<ruby> jack, slowfuck<rt> Czechoslovakia</rt> </ruby>.
</div>
</div>
<ruby> test test<rt> あいにてつてせ</rt></ruby>
</div>.
3. Annotation of vertical text during character introduction
<div>
<ruby style="writing-mode: vertical-lr;display:inline-block;">Cao Cao<rt>word Mende, capital of the People's * (Tw)</rt></ruby>
<ruby style="writing-mode: vertical-lr;display:inline-block;">Liu Bei (142-208 BC), warlord<rt>word two-character surname Xuan De</rt></ruby>
</div>
4. Notes in the formula
<div>
A+B <ruby>===<rt> catalyst</rt></ruby> AB +BA
</div>
5. Multi-layer overlay annotations
<div>
<ruby>
<ruby>China<rt>People's *</rt></ruby> <rt>People's *</rt> </ruby>.
<rt>people *</rt>
</ruby> </div>.
/div> </div>.
<del><ins> tab (of a window) (computing)
<del> element represents the textual content removed from the document. The effect is equivalent to the csstext-decoration:line-through;
<del> deleted content </del>
Deleted content
<ins> element defines the text that has been inserted into the document. The effect is equivalent to the csstext-decoration:underline;
<ins> what was inserted </ins>
inserted content
Of course, we can also change the default style of del and ins; the following examples are from MDN.
<del>
<p>Deleted content</p>
</del>
<ins>
<p>inserted content</p>
</ins>
<style>
del,ins { display: block; text-decoration: none; position: relative }
del { background-color: #fbb; }
ins { background-color: #d4fcbc; }
del::before, ins::before {
position: absolute;
left: 0.5rem;
font-family: monospace;
}
del::before { content: '−'; }
ins::before { content: '+'; }
</style>
<abbr> tab (of a window) (computing)
<abbr> element represents an acronym or initialism. There is an optionaltitle attribute, which can contain complete words or statements.
<abbr title="Steph Curry, juniors, Kujitsu"> Curry</abbr>
Mouse over it to see the effect:Curry (name)
<datalist> tab (of a window) (computing)
<datalist> element contains a set of<option> elements that represent other form control optional values.
To associate a form control<datalist> element, you need to set the form control'slist Comparison of attributes with<datalist> (used form a nominal expression)id property is set to the same value;
<input type="text" list="lists" placeholder="Please select or enter">
<datalist >
<option value="HTML"></option>
<option value="CSS"></option>
<option value="JAVASCRIPT"></option>
</datalist>
If the form control does not set the list property or the<datalist> Without setting the id attribute, there is no effect of the dropdown box being optional.
<wbr> tab (of a window) (computing)
<wbr>element represents a word break opportunity - a location in the text where the browser can choose to break a line, even if its line break rules would not do so here.
This label is not valid for Chinese though.
<div style="width:120px;overflow:auto;resize:horizontal;border:1px dotted #000;">
wbr Tags:
<p>1111111222223333344445555666</p>
<br>
<p>1111111<wbr>22222<wbr>33333<wbr>4444<wbr>5555<wbr>666<wbr></p>
</div>
Observe the changes in the graph below
<bdo><bdi> tab (of a window) (computing)
<bdo> element overrides the current orientation of the text so that the text is rendered in a different direction.
Setting global attributes on an elementdirThe direction in which the content inside the element is rendered can be indicated by the
<bdo dir="rtl"> a line of right-to-left text</bdo>
<bdo dir="ltr"> a line of text from left to right</bdo>
There's another one and<bdo> Very similar labels.<bdi>
mdn's description of what it does is pretty self-explanatory: it isolates elements in both directions.<bdi> Tells the browser's bi-directional algorithm to isolate the text it contains from the surrounding text, which is especially useful when a website dynamically inserts some text and does not know the directionality of the inserted text.
I used the above example plus<bdi>Come and see the effect.
<bdo> and other block-level elements, there is a difference in display when changing the orientation of the text inside.
<fieldset>
<legend> <bdo dir="rtl"></legend>
<bdo dir="rtl"> This is <bdi style="color:red;"> a line of </bdi> text, end. </bdo>
</fieldset>
<fieldset>
<legend> <bdo style="direction: rtl;"> </legend>
<bdo style="direction: rtl;"> This is <bdi-style="color:□red;"> a line of </bdi> text, end. </bdo>
</fieldset>
<fieldset>
<legend> <p dir="rtl"> </legend>
<p dir="rtl">This is <bdi style="color:red;">a line of </bdi> text, end. </p>
</fieldset>
<fieldset>
<legend> <p style="direction: rtl;"> </legend>
<p style="direction: rtl;"> This is <bdi style="color:red;"> a line of </bdi> text, end. </p>
</fieldset>
In the p element above, changing the orientation of the text also changes the way the text is laid out.
<col> tab (of a window) (computing)
table column elements.<col>element in the parent<colgroup> element defines one or more columns in the group of columns represented by the element.
<col> The label has aspan attribute that specifies the number of consecutive columns of the control.
For example, there is a table with three rows and seven columns
<table>
<caption>this is a table</caption>
<tr>
<th></th>
<th>"one" radical in Chinese characters (Kangxi radical 1)</th>
<th>stupid (Beijing dialect)</th>
<th>surname San</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
</tr>
<tr>
<td>morning</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
</tr>
<tr>
<td>afternoon</td>
<td>22</td>
<td>22</td>
<td>22</td>
<td>22</td>
<td>22</td>
<td>22</td>
<td>22</td>
</tr>
</table>
The following code represents the first<col> The label affects the first two columns, followed by the 4<col> tag affects the next 4 columns, with the last<col> The label affects the last two columns.
<colgroup>
<col span="2">
<col style="background-color:#97db0a;">
<col style="width:40px;">
<col style="background-color:#97db0a;">
<col style="background-color:#97db0a;border:4px solid #c1437a;">
<col span="2" style="width:100px;">
</colgroup>
All labels aboveFull Example