这些年没来得及学习的一些 HTML5 标签

生命力 發表於 2024-9-15 15:43:00

这些年没来得及学习的一些 HTML5 标签

<p>认识并学习下还没来得及学习的一些 HTML5 标签</p>
<h4 id="ruby-标签"><code><ruby></code> 标签</h4>
<p>HTML <code><ruby></code> 元素被用来展示<strong>东亚文字</strong>注音或字符注释。</p>
<p>比如:</p>
<pre><code class="language-html"><ruby>兄弟<rt>xiongdi</rt></ruby>
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/895887/202409/895887-20240915153617031-410171446.png" alt="image" loading="lazy"></p>
<p><code><rt></code> 元素包含字符的发音，字符在 ruby 注解中出现，它用于描述东亚字符的发音。这个元素始终在 <code><ruby></code> 元素中使用。</p>
<p>如果需要将每个字和上面的拼音垂直对齐，可以使用两个 ruby 标签</p>
<pre><code class="language-html"><ruby>兄<rt>xiong</rt></ruby>
<ruby>弟<rt>di</rt></ruby>
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/895887/202409/895887-20240915153339397-833729289.png" alt="image" loading="lazy"></p>
<p>ruby 标签里面还有个 rp 标签，<code><rp></code> 元素用于为那些不能使用 <code><ruby></code> 元素展示 ruby 注解的浏览器。</p>
<pre><code class="language-html"><ruby> 兄弟 <rp>(</rp><rt>xiongdi</rt><rp>)</rp> </ruby>
</code></pre>
<p>用 ruby 能创造一些有意思的效果。</p>
<p>1、字幕拼音</p>
<pre><code class="language-html"><div>
<ruby>字<rt>zi</rt></ruby>
<ruby>幕<rt>mu</rt></ruby>
<ruby>拼<rt>pin</rt></ruby>
<ruby>音<rt>yin</rt></ruby>
</div>
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/895887/202409/895887-20240915153350365-1327467355.png" alt="image" loading="lazy"></p>
<p>2、文字翻译注释</p>
<pre><code class="language-html"><div>
<ruby>jack，slowfuck<rt>捷克斯洛伐克（是一个国家）</rt></ruby>
</div>
<div>
<ruby>jack，slowfuck<rt>捷克斯洛伐克</rt></ruby>
</div>
<div>
<ruby>测试试<rt>あいにてつてせ</rt></ruby>
</div>
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/895887/202409/895887-20240915153403263-1097363552.png" alt="image" loading="lazy"></p>
<p>3、人物介绍时，竖向文字的注释</p>
<pre><code class="language-html"><div>
<ruby style="writing-mode: vertical-lr;display:inline-block;">曹操<rt>字孟德</rt></ruby>
<ruby style="writing-mode: vertical-lr;display:inline-block;">刘备<rt>字玄德</rt></ruby>
</div>
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/895887/202409/895887-20240915153415083-1383626767.png" alt="image" loading="lazy"></p>
<p>4、公式中的注释</p>
<pre><code class="language-html"><div>
A+B <ruby>===<rt>催化剂</rt></ruby>AB +BA
</div>
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/895887/202409/895887-20240915153423101-315933450.png" alt="image" loading="lazy"></p>
<p>5、多层叠加注释</p>
<pre><code class="language-html"><div>
<ruby>
   <ruby>中国<rt>中华人民共和国</rt></ruby>
   <rt>people republic of china</rt>
</ruby>
</div>
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/895887/202409/895887-20240915153653995-872553759.png" alt="image" loading="lazy"></p>
<hr>
<h4 id="delins-标签"><code><del><ins></code> 标签</h4>
<p><code><del></code> 元素表示从文档中删除的文字内容。效果相当于 css 的 <code>text-decoration:line-through;</code></p>
<pre><code class="language-html"><del>被删除的内容</del>
</code></pre>
<p><del>被删除的内容</del></p>
<p><code><ins></code> 元素定义已经被插入文档中的文本。效果相当于 css 的 <code>text-decoration:underline;</code></p>
<pre><code class="language-html"><ins>被插入的内容</ins>
</code></pre>
<p><ins>被插入的内容</ins></p>
<p>当然，我们也可以修改 del 和 ins 的默认样式；以下例子来自 MDN。</p>
<pre><code class="language-html"><del>
<p>被删除的内容</p>
</del>
<ins>
<p>被插入的内容</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>
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/895887/202409/895887-20240915153437979-248432924.png" alt="image" loading="lazy"></p>
<hr>
<h4 id="abbr-标签"><code><abbr></code> 标签</h4>
<p><code><abbr></code> 元素表示一个缩写词或首字母缩略词。有一个可选的 <code>title</code> 属性，可包含完整的词汇或者语句。</p>
<pre><code class="language-html"><abbr title="史蒂芬库里，小学生，库日天">库里</abbr>
</code></pre>
<p>鼠标划上去查看效果：库里</abbr></p>
<hr>
<h4 id="datalist-标签"><code><datalist></code> 标签</h4>
<p><code><datalist></code>  元素包含了一组 <code><option></code> 元素，这些元素表示其他表单控件可选值。</p>
<p>要关联表单控件 <code><datalist></code> 元素，需要将表单控件的 <code>list</code> 属性与 <code><datalist></code> 的 <code>id</code> 属性设置为一样的值；</p>
<pre><code class="language-html"><input type="text" list="lists" placeholder="请选择或输入">
<datalist id="lists">
<option value="HTML"></option>
<option value="CSS"></option>
<option value="JAVASCRIPT"></option>
</datalist>
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/895887/202409/895887-20240915153447453-537632288.gif" alt="image" loading="lazy"></p>
<p>如果表单控件没有设置 list 属性或者 <code><datalist></code> 没有设置 id 属性，则没有下拉框可选项的效果。</p>
<hr>
<h4 id="wbr-标签"><code><wbr></code> 标签</h4>
<p><code><wbr></code>元素表示一个单词换行机会——文本中的一个位置，浏览器可以选择在此处换行，即使其换行规则不会在此处换行。</p>
<p>不过这个标签对中文无效。</p>
<pre><code class="language-html"><div style="width:120px;overflow:auto;resize:horizontal;border:1px dotted #000;">
wbr 标签：
<p>1111111222223333344445555666</p>
<br>
<p>1111111<wbr>22222<wbr>33333<wbr>4444<wbr>5555<wbr>666<wbr></p>
</div>
</code></pre>
<p>观察下面图中的变化</p>
<p><img src="https://img2024.cnblogs.com/blog/895887/202409/895887-20240915153456501-869696536.gif" alt="image" loading="lazy"></p>
<hr>
<h4 id="bdobdi-标签"><code><bdo><bdi></code> 标签</h4>
<p><code><bdo></code> 元素覆盖了当前文本的方向，使文本以不同的方向渲染出来。</p>
<p>在元素上设置全局属性 <code>dir</code>，可以表示元素里面的内容渲染方向</p>
<pre><code class="language-html"><bdo dir="rtl">一行从右到左的文本</bdo>
<bdo dir="ltr">一行从左到右的文本</bdo>
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/895887/202409/895887-20240915153505651-1217280549.png" alt="image" loading="lazy"></p>
<p>还有一个和 <code><bdo></code> 很像的标签 <code><bdi></code></p>
<p>mdn 对它的介绍很能说明它的作用了：双向隔离元素 <code><bdi></code> 告诉浏览器的双向算法将其包含的文本与周围的文本隔离，当网站动态插入一些文本且不知道所插入文本的方向性时，此功能特别有用。</p>
<p>我用上面的例子再加上 <code><bdi></code>，来看看效果。</p>
<p><code><bdo></code> 和其他块级元素，改变里面文字的方向时，在显示上会有差异。</p>
<pre><code class="language-html"><fieldset>
<legend> &lt;bdo dir="rtl"&gt;</legend>
<bdo dir="rtl">这是<bdi style="color:red;">一行</bdi>文本，结束。</bdo>
</fieldset>

<fieldset>
<legend>&lt;bdo style="direction: rtl;"&gt;</legend>
<bdo style="direction: rtl;">这是<bdi·style="color:□red;">一行</bdi>文本，结束。</bdo>
</fieldset>

<fieldset>
<legend>&lt;p dir="rtl"&gt;</legend>
<p dir="rtl">这是<bdi style="color:red;">一行</bdi>文本，结束。</p>
</fieldset>

<fieldset>
<legend>&lt;p style="direction: rtl;"&gt;</legend>
<p style="direction: rtl;">这是<bdi style="color:red;">一行</bdi>文本，结束。</p>
</fieldset>
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/895887/202409/895887-20240915153514087-1392823121.png" alt="image" loading="lazy"></p>
<p>在上面的 p 元素中，改变文字方向的同时也会改变文本布局方式。</p>
<hr>
<h4 id="col-标签"><code><col></code> 标签</h4>
<p>表格列元素，<code><col></code>元素在父 <code><colgroup></code> 元素所代表的列组中定义一列或多列。</p>
<p><code><col></code> 标签有个 <code>span</code> 属性，指定控制的连续列数。</p>
<p>比如有一个三行七列的表格</p>
<pre><code class="language-html"><table>
<caption>this is a table</caption>
<tr>
   <th></th>
   <th>一</th>
   <th>二</th>
   <th>三</th>
   <th>四</th>
   <th>五</th>
   <th>六</th>
   <th>七</th>
</tr>
<tr>
   <td>上午</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>下午</td>
   <td>22</td>
   <td>22</td>
   <td>22</td>
   <td>22</td>
   <td>22</td>
   <td>22</td>
   <td>22</td>
</tr>
</table>
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/895887/202409/895887-20240915153524815-341729049.png" alt="image" loading="lazy"></p>
<p>下面代码就表示第一个 <code><col></code> 标签影响前两列，随后的 4 个 <code><col></code> 标签影响随后的 4 列，最后一个 <code><col></code> 标签影响最后两列。</p>
<pre><code class="language-html"><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>
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/895887/202409/895887-20240915153531811-1393643152.png" alt="image" loading="lazy"></p>
<p>以上所有标签完整示例</p><br><br>
来源：https://www.cnblogs.com/zsxblog/p/18415285

頁: [1]

琼殿技术论坛's Archiver

这些年没来得及学习的一些 HTML5 标签