HTML5的学习之新增元素

╰半夏微凉° 2023-02-17 14:50 7阅读 0赞

## HTML5的学习之新增元素 ##

这篇文章学习一下HTML5新增的元素及浏览器的兼容

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>&lt;article&gt;</td> 
   <td>定义页面独立的内容区域。</td> 
  </tr> 
  <tr> 
   <td>&lt;aside&gt;</td> 
   <td>定义页面的侧边栏内容。</td> 
  </tr> 
  <tr> 
   <td>&lt;bdi&gt;</td> 
   <td>允许您设置一段文本，使其脱离其父元素的文本方向设置。</td> 
  </tr> 
  <tr> 
   <td>&lt;command&gt;</td> 
   <td>定义命令按钮，比如单选按钮、复选框或按钮</td> 
  </tr> 
  <tr> 
   <td>&lt;details&gt;</td> 
   <td>用于描述文档或文档某个部分的细节</td> 
  </tr> 
  <tr> 
   <td>&lt;dialog&gt;</td> 
   <td>定义对话框，比如提示框</td> 
  </tr> 
  <tr> 
   <td>&lt;summary&gt;</td> 
   <td>标签包含 details 元素的标题</td> 
  </tr> 
  <tr> 
   <td>&lt;figure&gt;</td> 
   <td>规定独立的流内容（图像、图表、照片、代码等等）。</td> 
  </tr> 
  <tr> 
   <td>&lt;figcaption&gt;</td> 
   <td>定义  元素的标题 </td> 
  </tr> 
  <tr> 
   <td>&lt;footer&gt;</td> 
   <td>定义 section 或 document 的页脚。</td> 
  </tr> 
  <tr> 
   <td>&lt;header&gt;</td> 
   <td>定义了文档的头部区域</td> 
  </tr> 
  <tr> 
   <td>&lt;mark&gt;</td> 
   <td>定义带有记号的文本。</td> 
  </tr> 
  <tr> 
   <td>&lt;meter&gt;</td> 
   <td>定义度量衡。仅用于已知最大和最小值的度量。</td> 
  </tr> 
  <tr> 
   <td>&lt;nav&gt;</td> 
   <td>定义导航链接的部分。</td> 
  </tr> 
  <tr> 
   <td>&lt;progress&gt;</td> 
   <td>定义任何类型的任务的进度。</td> 
  </tr> 
  <tr> 
   <td>&lt;ruby&gt;</td> 
   <td>定义 ruby 注释（中文注音或字符）。</td> 
  </tr> 
  <tr> 
   <td>&lt;rt&gt;</td> 
   <td>定义字符（中文注音或字符）的解释或发音。</td> 
  </tr> 
  <tr> 
   <td>&lt;rp&gt;</td> 
   <td>在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。</td> 
  </tr> 
  <tr> 
   <td>&lt;section&gt;</td> 
   <td>定义文档中的节（section、区段）。</td> 
  </tr> 
  <tr> 
   <td>&lt;time&gt;</td> 
   <td>定义日期或时间。</td> 
  </tr> 
  <tr> 
   <td>&lt;wbr&gt;</td> 
   <td>规定在文本中的何处适合添加换行符。</td> 
  </tr> 
 </tbody> 
</table>

其中，<header>,<nav>,<section>,<article>,<aside>,<figcaption>,<figure>,<footer>为语义化新元素，即标签名成基本可以表达元素的意义。

<header></header>
        <figure>
            <img src="../js练习/1.jpg" alt="">
            <figcaption>这是一辆跑车</figcaption>  
        </figure>

**视频讲解链接：  
https://www.bilibili.com/video/BV16f4y127hi/**