新语义和结构标签

Posted 2020-09-26 没入门的小学员

新语义或结构标签

arcicle

• 示例

<article>
    <h1>标题</h1>
    <p>征文内容</p>
</article>

• 标签定义及使用说明 
  
  • 定义独立内容
  • 定义的内容本身必须是有意义的并且独立于文档的其余部分
  • 潜在来源 
    
    • 论坛帖子
    • 博客文章
    • 新闻故事
    • 评论

aside

• 示例

<p>My family and I visited The Epcot center this summer.</p>

<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

• 标签定义及使用说明 
  
  • 定义 article 标签外的内容。
  • aside 的内容应该与附近的内容相关
• 提示和注释 
  
  • aside 的内容可用作文章的侧栏

datails

• 示例

//如果没有summary标签，列表的名字为“详细信息”，列表默认是关闭的，除非在details中设置open
//details中的内容永远是一个列表
<details>
    <summary>这是一个列表</summary>
    <p>点开就看到了</p>
</details>

• 标签定义及使用说明 
  
  • 规定了用户可见的或者隐藏的需求的补充细节。
  • 用来供用户开启关闭的交互式控件。任何形式的内容都能被放在 details 标签里边
  • 元素的内容对用户是不可见的，除非设置了 open 属性
• 提示和注释 
  
  • 与 summary 标签配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。
• 属性 
  
  • open：规定details是否可见

dialog

• 示例

<dialog open>这是个对话框</dialog>

• 只有 Chrome 和 Safari 6 支持 标签
• 标签定义及使用说明 
  
  • 定义一个对话框、确认框或窗口
• 属性 
  
  • open：对话框可以显示出来

figure

• 示例

//用来标记文档中的一个图像
<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
</figure>

• 标签定义及使用说明 
  
  • 规定独立的流内容（图像、图表、照片、代码等等）
  • figure元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响。

figcaption

• 示例

<!-- <figure> 元素标记文档中的一个图像。<figure> 元素带有一个标题
<figure>-->
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>

• 标签定义及使用说明 
  
  • figcaption 标签为 figure 元素定义标题。
  • figcaption 元素应该被置于 figure 元素的第一个或最后一个子元素的位置

nav

• 示例

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">javascript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

• 标签定义及使用说明 
  
  • 标签定义导航链接的部分

progress

• 示例

下载进度：<progress value="10" max="100"></progress>

• 标签定义及使用说明 
  
  • 定义运行中的任务进度
• 提示和注释 
  
  • progress 标签与 JavaScript 一起使用来显示任务的进度
  • progress 标签不适合用来表示度量衡（例如，磁盘空间使用情况或相关的查询结果）。表示度量衡，请使用 meter 标签代替。
• 属性 
  
  • max：需要完成的值
  • value：进程当前值