登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 业界 ›这些年没来得及学习的一些 HTML5 标签

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

吕梓美 7 天前
认识并学习下还没来得及学习的一些 HTML5 标签
标签

HTML  元素被用来展示东亚文字注音或字符注释。
比如:
  1. <ruby>兄弟<rt>xiongdi</rt></ruby>
复制代码
1.png

元素包含字符的发音，字符在 ruby 注解中出现，它用于描述东亚字符的发音。这个元素始终在  元素中使用。
如果需要将每个字和上面的拼音垂直对齐，可以使用两个 ruby 标签
  1. <ruby>兄<rt>xiong</rt></ruby>
  2. <ruby>弟<rt>di</rt></ruby>
复制代码
2.png

ruby 标签里面还有个 rp 标签， 元素用于为那些不能使用  元素展示 ruby 注解的浏览器。
  1. <ruby> 兄弟 <rp>(</rp><rt>xiongdi</rt><rp>)</rp> </ruby>
复制代码
用 ruby 能创造一些有意思的效果。
1、字幕拼音
  1.     <ruby>字<rt>zi</rt></ruby>
  2.     <ruby>幕<rt>mu</rt></ruby>
  3.     <ruby>拼<rt>pin</rt></ruby>
  4.     <ruby>音<rt>yin</rt></ruby>
复制代码
3.png

2、文字翻译注释
  1.     <ruby>jack，slowfuck<rt>捷克斯洛伐克（是一个国家）</rt></ruby>
  2.    
  3.    
  4.     <ruby>jack，slowfuck<rt>捷克斯洛伐克</rt></ruby>
  5.    
  6.    
  7.     <ruby>测试试<rt>あいにてつてせ</rt></ruby>
复制代码
4.png

3、人物介绍时，竖向文字的注释
  1.   <ruby >曹操<rt>字 孟德</rt></ruby>
  2.   <ruby >刘备<rt>字 玄德</rt></ruby>
复制代码
5.png

4、公式中的注释
  1.     A+B <ruby>===<rt>催化剂</rt></ruby>AB +BA
复制代码
6.png

5、多层叠加注释
  1.     <ruby>
  2. <input type="text" list="lists" placeholder="请选择或输入">
  3. <datalist id="lists">
  4.   <option value="HTML"></option>
  5.   <option value="CSS"></option>
  6.   <option value="JAVASCRIPT"></option>
  7. </datalist>  <ruby>中国<rt>中华人民共和国</rt></ruby>
  8. <input type="text" list="lists" placeholder="请选择或输入">
  9. <datalist id="lists">
  10.   <option value="HTML"></option>
  11.   <option value="CSS"></option>
  12.   <option value="JAVASCRIPT"></option>
  13. </datalist>  <rt>people republic of china</rt>
  14.     </ruby>
复制代码
7.png

标签

 元素表示从文档中删除的文字内容。效果相当于 css 的 text-decoration:line-through;
  1. <del>被删除的内容</del>
复制代码
<del>被删除的内容</del>
 元素定义已经被插入文档中的文本。效果相当于 css 的 text-decoration:underline;
  1. <ins>被插入的内容</ins>
复制代码
<ins>被插入的内容</ins>
当然，我们也可以修改 del 和 ins 的默认样式；以下例子来自 MDN。
  1.   <del>被删除的内容</del>
  2.   <ins>被插入的内容</ins>
复制代码
8.png

标签

元素表示一个缩写词或首字母缩略词。有一个可选的 title 属性，可包含完整的词汇或者语句。
  1. 库里</abbr>
复制代码
鼠标划上去查看效果：库里</abbr>
标签

 元素包含了一组  元素，这些元素表示其他表单控件可选值。
要关联表单控件  元素，需要将表单控件的 list 属性与  的 id 属性设置为一样的值；
  1. <input type="text" list="lists" placeholder="请选择或输入">
  2. <datalist id="lists">
  3.   <option value="HTML"></option>
  4.   <option value="CSS"></option>
  5.   <option value="JAVASCRIPT"></option>
  6. </datalist>
复制代码
9.gif

如果表单控件没有设置 list 属性或者  没有设置 id 属性，则没有下拉框可选项的效果。
标签

元素表示一个单词换行机会——文本中的一个位置，浏览器可以选择在此处换行，即使其换行规则不会在此处换行。
不过这个标签对中文无效。
  1.     wbr 标签：
  2.     <p>1111111222223333344445555666</p>
  3.     <br>
  4.     <p>1111111<wbr>22222<wbr>33333<wbr>4444<wbr>5555<wbr>666<wbr></p>
复制代码
观察下面图中的变化
10.gif

标签

 元素覆盖了当前文本的方向，使文本以不同的方向渲染出来。
在元素上设置全局属性 dir，可以表示元素里面的内容渲染方向
  1. <bdo dir="rtl">一行从右到左的文本</bdo>
  2. <bdo dir="ltr">一行从左到右的文本</bdo>
复制代码
11.png

还有一个和  很像的标签
mdn 对它的介绍很能说明它的作用了：双向隔离元素  告诉浏览器的双向算法将其包含的文本与周围的文本隔离，当网站动态插入一些文本且不知道所插入文本的方向性时，此功能特别有用。
我用上面的例子再加上 ，来看看效果。
和其他块级元素，改变里面文字的方向时，在显示上会有差异。
  1. <fieldset>
  2.     <legend> <bdo dir="rtl"></legend>
  3.     <bdo dir="rtl">这是<bdi >一行</bdi>文本，结束。</bdo>
  4. </fieldset>
  6. <fieldset>
  7.     <legend><bdo ></legend>
  8.     <bdo >这是<bdi·>一行</bdi>文本，结束。</bdo>
  9. </fieldset>
  11. <fieldset>
  12.     <legend><p dir="rtl"></legend>
  13.     <p dir="rtl">这是<bdi >一行</bdi>文本，结束。</p>
  14. </fieldset>
  16. <fieldset>
  17.     <legend><p ></legend>
  18.     <p >这是<bdi >一行</bdi>文本，结束。</p>
  19. </fieldset>
复制代码
12.png

在上面的 p 元素中，改变文字方向的同时也会改变文本布局方式。
标签

表格列元素，元素在父  元素所代表的列组中定义一列或多列。
标签有个 span 属性，指定控制的连续列数。
比如有一个三行七列的表格
  1. [table]    this is a table    [tr]<input type="text" list="lists" placeholder="请选择或输入">
  2. <datalist id="lists">
  3.   <option value="HTML"></option>
  4.   <option value="CSS"></option>
  5.   <option value="JAVASCRIPT"></option>
  6. </datalist><input type="text" list="lists" placeholder="请选择或输入">
  7. <datalist id="lists">
  8.   <option value="HTML"></option>
  9.   <option value="CSS"></option>
  10.   <option value="JAVASCRIPT"></option>
  11. </datalist>一<input type="text" list="lists" placeholder="请选择或输入">
  12. <datalist id="lists">
  13.   <option value="HTML"></option>
  14.   <option value="CSS"></option>
  15.   <option value="JAVASCRIPT"></option>
  16. </datalist>二<input type="text" list="lists" placeholder="请选择或输入">
  17. <datalist id="lists">
  18.   <option value="HTML"></option>
  19.   <option value="CSS"></option>
  20.   <option value="JAVASCRIPT"></option>
  21. </datalist>三<input type="text" list="lists" placeholder="请选择或输入">
  22. <datalist id="lists">
  23.   <option value="HTML"></option>
  24.   <option value="CSS"></option>
  25.   <option value="JAVASCRIPT"></option>
  26. </datalist>四<input type="text" list="lists" placeholder="请选择或输入">
  27. <datalist id="lists">
  28.   <option value="HTML"></option>
  29.   <option value="CSS"></option>
  30.   <option value="JAVASCRIPT"></option>
  31. </datalist>五<input type="text" list="lists" placeholder="请选择或输入">
  32. <datalist id="lists">
  33.   <option value="HTML"></option>
  34.   <option value="CSS"></option>
  35.   <option value="JAVASCRIPT"></option>
  36. </datalist>六<input type="text" list="lists" placeholder="请选择或输入">
  37. <datalist id="lists">
  38.   <option value="HTML"></option>
  39.   <option value="CSS"></option>
  40.   <option value="JAVASCRIPT"></option>
  41. </datalist>七    [/tr]    [tr]<input type="text" list="lists" placeholder="请选择或输入">
  42. <datalist id="lists">
  43.   <option value="HTML"></option>
  44.   <option value="CSS"></option>
  45.   <option value="JAVASCRIPT"></option>
  46. </datalist>[td]上午[/td]<input type="text" list="lists" placeholder="请选择或输入">
  47. <datalist id="lists">
  48.   <option value="HTML"></option>
  49.   <option value="CSS"></option>
  50.   <option value="JAVASCRIPT"></option>
  51. </datalist>[td]11[/td]<input type="text" list="lists" placeholder="请选择或输入">
  52. <datalist id="lists">
  53.   <option value="HTML"></option>
  54.   <option value="CSS"></option>
  55.   <option value="JAVASCRIPT"></option>
  56. </datalist>[td]11[/td]<input type="text" list="lists" placeholder="请选择或输入">
  57. <datalist id="lists">
  58.   <option value="HTML"></option>
  59.   <option value="CSS"></option>
  60.   <option value="JAVASCRIPT"></option>
  61. </datalist>[td]11[/td]<input type="text" list="lists" placeholder="请选择或输入">
  62. <datalist id="lists">
  63.   <option value="HTML"></option>
  64.   <option value="CSS"></option>
  65.   <option value="JAVASCRIPT"></option>
  66. </datalist>[td]11[/td]<input type="text" list="lists" placeholder="请选择或输入">
  67. <datalist id="lists">
  68.   <option value="HTML"></option>
  69.   <option value="CSS"></option>
  70.   <option value="JAVASCRIPT"></option>
  71. </datalist>[td]11[/td]<input type="text" list="lists" placeholder="请选择或输入">
  72. <datalist id="lists">
  73.   <option value="HTML"></option>
  74.   <option value="CSS"></option>
  75.   <option value="JAVASCRIPT"></option>
  76. </datalist>[td]11[/td]<input type="text" list="lists" placeholder="请选择或输入">
  77. <datalist id="lists">
  78.   <option value="HTML"></option>
  79.   <option value="CSS"></option>
  80.   <option value="JAVASCRIPT"></option>
  81. </datalist>[td]11[/td]    [/tr]    [tr]<input type="text" list="lists" placeholder="请选择或输入">
  82. <datalist id="lists">
  83.   <option value="HTML"></option>
  84.   <option value="CSS"></option>
  85.   <option value="JAVASCRIPT"></option>
  86. </datalist>[td]下午[/td]<input type="text" list="lists" placeholder="请选择或输入">
  87. <datalist id="lists">
  88.   <option value="HTML"></option>
  89.   <option value="CSS"></option>
  90.   <option value="JAVASCRIPT"></option>
  91. </datalist>[td]22[/td]<input type="text" list="lists" placeholder="请选择或输入">
  92. <datalist id="lists">
  93.   <option value="HTML"></option>
  94.   <option value="CSS"></option>
  95.   <option value="JAVASCRIPT"></option>
  96. </datalist>[td]22[/td]<input type="text" list="lists" placeholder="请选择或输入">
  97. <datalist id="lists">
  98.   <option value="HTML"></option>
  99.   <option value="CSS"></option>
  100.   <option value="JAVASCRIPT"></option>
  101. </datalist>[td]22[/td]<input type="text" list="lists" placeholder="请选择或输入">
  102. <datalist id="lists">
  103.   <option value="HTML"></option>
  104.   <option value="CSS"></option>
  105.   <option value="JAVASCRIPT"></option>
  106. </datalist>[td]22[/td]<input type="text" list="lists" placeholder="请选择或输入">
  107. <datalist id="lists">
  108.   <option value="HTML"></option>
  109.   <option value="CSS"></option>
  110.   <option value="JAVASCRIPT"></option>
  111. </datalist>[td]22[/td]<input type="text" list="lists" placeholder="请选择或输入">
  112. <datalist id="lists">
  113.   <option value="HTML"></option>
  114.   <option value="CSS"></option>
  115.   <option value="JAVASCRIPT"></option>
  116. </datalist>[td]22[/td]<input type="text" list="lists" placeholder="请选择或输入">
  117. <datalist id="lists">
  118.   <option value="HTML"></option>
  119.   <option value="CSS"></option>
  120.   <option value="JAVASCRIPT"></option>
  121. </datalist>[td]22[/td]    [/tr]  [/table]
复制代码
13.png

下面代码就表示第一个  标签影响前两列，随后的 4 个  标签影响随后的 4 列，最后一个  标签影响最后两列。
  1. <input type="text" list="lists" placeholder="请选择或输入">
  2. <datalist id="lists">
  3.   <option value="HTML"></option>
  4.   <option value="CSS"></option>
  5.   <option value="JAVASCRIPT"></option>
  6. </datalist><input type="text" list="lists" placeholder="请选择或输入">
  7. <datalist id="lists">
  8.   <option value="HTML"></option>
  9.   <option value="CSS"></option>
  10.   <option value="JAVASCRIPT"></option>
  11. </datalist>
复制代码
14.png

以上所有标签完整示例

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

使用道具 举报
相关推荐
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
吕梓美
7 天前

0

粉丝关注

13

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫