html新增标签 2021/1/30

最新推荐文章于 2023-02-24 17:34:41 发布

PBitW

最新推荐文章于 2023-02-24 17:34:41 发布

阅读量903

点赞数

分类专栏：重学前端1 HTML 文章标签： html H5新增标签 role属性详解

本文链接：https://blog.csdn.net/langwang_100/article/details/113429576

版权

重学前端1 HTML 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

文章目录

一、role属性

这是菜鸟在菜鸟教程中看见的一段文字：
在这里插入图片描述
菜鸟反正是没看懂 [这里希望懂的读者积极留言讨论] ，但是其中一个属性让菜鸟感觉得研究研究，那就是 role="link"

百度解释：

使用role属性告诉辅助设备（如屏幕阅读器）这个元素所扮演的角色，属于WAI-ARIA（指无障碍的网页应用技术）。WAI-ARIA是W3C的可访问性倡议，是一组可以被添加到HTML元素中的属性。
本质上是增强语义性，当现有的HTML标签不能充分表达语义性的时候，就可以借助role来说明，以便于盲人区分。通常这种情况出现在一些自定义的组件上（例如一个tree组件，html里目前还没有tree这个标签），这样可增强组件的可访问性、可用性和可交互性。
让网站更符合W3C标准
更有利于搜索引擎优化

更多，见：WAI-ARIA MDN

举个例子：

你用 span 写了一个 button 的效果和作用，但是盲人并不知道，这时你就可以使用 role=“button” 创建切换按钮。

一个切换按钮可以有两个状态：pressed，not pressed，除了 role=“button” 之外，按钮是否为切换按钮，则可以用aria-pressed的属性来表示：

如果没有 aria-pressed表明这不是一个切换按钮
如果 aria-pressed=“false” 表示这个按钮当前是 not pressed 的
如果 aria-pressed=“true” 表示这个按钮当前是 pressed 的
如果 aria-pressed=“mixed” 则认为按钮部分是 partially pressed 的

当使用这个 button 时，用户代理应该将该元素公开为操作系统的易访问性API中的按钮控件。屏幕阅读器应该将元素声明为一个按钮并描述其可访问的名称。语音识别软件应该可以通过说：“点击”+按钮的可访问的name 就能激活这个按钮。

Note: 关于辅助技术如何处理这种技术，意见可能有所不同。上面所提供的信息是其中之一，因此并非规范。

在下面的代码片段中，一个 span 元素已经被赋予了按钮角色。由于使用的是 < span> 元素，因此需要提供 tabindex 属性使按钮的可聚焦并成为tab顺序流中的一部分。

注意：这段代码提供了CSS样式，以使 < span>元素看起来像一个按钮， handleBtnClick 和 handleBtnKeyPress 是事件处理程序，当鼠标单击、 Space or Enter 被按下时，执行该按钮的操作

HTML:

<button type="button" aria-pressed="false" onclick="handleBtnClick(event)">
  Native button toggle
</button>

<span role="button" tabindex="0"
 aria-pressed="false" onclick="handleBtnClick(event)"
 onKeyPress="handleBtnKeyPress(event)">
  Span button toggle
</span>

CSS:

button,
[role="button"] {
    padding: 3px;
    border: 1px solid #CCC;
}

button[aria-pressed="true"],
[role="button"][aria-pressed="true"] {
    border: 2px solid #000;
}

JS:

function handleBtnClick(event) {
  toggleButton(event.target);
}

function handleBtnKeyPress(event) {
  // Check to see if space or enter were pressed
  if (event.key === " " || event.key === "Enter") {
    // Prevent the default action to stop scrolling when space is pressed
    event.preventDefault();
    toggleButton(event.target);
  }
}

function toggleButton(element) {
  // Check to see if the button is pressed
  var pressed = (element.getAttribute("aria-pressed") === "true");
  // Change aria-pressed to the opposite state
  element.setAttribute("aria-pressed", !pressed);
}

使用时机：

role属性的应用主要是表单，比如输入密码，对于正常人可以用placaholder提示输入密码，但是对于残障人士是无效的，这个时候就需要role了。另外，在老版本的浏览器中，由于不支持HTML5标签，所以有必要使用role属性。

推荐阅读：
WAI-ARIA无障碍网页应用属性完全展示

二、article标签

标签定义及使用说明：

< article> 标签定义独立的内容/文章。

< article> 标签是 HTML5 的新标签

< article> 标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。

< article> 的潜在来源：

论坛帖子
博客文章
新闻故事
评论

article元素代表文档、页面或者应用程序中与上下文不相关的独立部分，该元素经常被用于定义一篇日志、一条新闻或用户评论等。

article元素通常使用多个section元素进行划分，一个页面中article元素可以出现多次。

注意：

article元素中的文字显示要比div中同类型的文字要小

代码：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<article>
  <h1>Internet Explorer 9</h1>
  <p> Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。</p>
</article>
<div>
  <h1>Internet Explorer 9</h1>
  <p> Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。</p>
</div>

</body>
</html>

运行结果：
在这里插入图片描述
但是菜鸟感觉这个并不碍事，究其原因可能是浏览器特意弄的区别（今后可能会变化），如图：

由图可以看出，article、aside、nav、section都会产生该效果。

三、aside标签

标签定义及使用说明：

< aside> 标签定义 < article> 标签外的内容。

aside 的内容应该与附近的内容相关。

< aside> 标签是 HTML5 的新标签

提示：< aside> 的内容可用作文章的侧栏

aside元素用来定义当前页面或者文章的复数信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等其他类似的有别于主要内容的部分。

aside元素主要的用法：

在article元素之外使用，作为页面或者站点全局的附属信息部分，最常用的形式是侧边栏，其中的内容可以使友情链接、广告单元等。

四、header标签

标签定义及使用说明：

< header> 标签定义文档或者文档的一部分区域的页眉。

< header> 元素应该作为介绍内容或者导航链接栏的容器。

在一个文档中，您可以定义多个 < header> 元素。

注释：< header> 标签不能被放在 < footer>、< address> 或者另一个 < header> 元素内部。

< header> 标签是 HTML 5 中的新标签

header元素是一种具有引导和导航作用的的结构元素，该元素可以包含所有通常放在页面头部的内容。header元素通常用来放置整个页面或页面内的一个内容区块的标题，也可以包含网站Logo图片、搜索表单或者其他相关内容。

一个网页中可以使用多个header元素，也可以为每一个内容块添加header元素。

五、nav标签

标签定义及使用说明：

< nav> 标签定义导航链接的部分。

并不是所有的 HTML 文档都要使用到 < nav> 元素。< nav> 元素只是作为标注一个导航链接的区域。

在不同设备上（手机或者PC）可以制定导航链接是否显示，以适应不同屏幕的需求。

< nav> 是 HTML5 的新标签

使用时机：
nav元素通常可以用于以下场合中：

传统导航条
侧边栏导航
页内导航
翻页操作

六、footer标签

标签定义及使用说明：

< footer> 标签定义文档或者文档的一部分区域的页脚。

< footer> 元素应该包含它所包含的元素的信息，在典型情况下，该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。

在一个文档中，您可以定义多个 < footer> 元素。

< footer> 标签是 HTML 5 中的新标签。

提示：假如您使用 < footer> 元素来插入联系信息，应该在 < footer> 元素内使用 < address> 标签。

footer元素用于定义一个页面或者区域的底部，它可以包含所有通常放在页面底部的内容。与header元素相同，一个页面中可以包含多个footer元素。同时，也可以在article元素或者section元素中添加footer元素。

七、address标签

标签定义及使用说明：

< address> 标签定义文档作者/所有者的联系信息。

如果 < address> 元素位于 < body> 元素内部，则它表示该文档作者/所有者的联系信息。

如果 < address> 元素位于 < article> 元素内部，则它表示该文章作者/所有者的联系信息。

< address> 元素的文本通常呈现为斜体。

大多数浏览器会在< address> 元素的前后添加换行。

代码：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<span>djadjahdajda</span>
<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
<span>djadjahdajda</span>

</body>
</html>

运行结果：
在这里插入图片描述

提示：不应该使用 < address> 标签来描述邮政地址，除非这些信息是联系信息的组成部分。

提示：< address> 元素通常被包含在< footer> 元素的其他信息中。

八、main标签

定义和用法：

< main> 标签用于指定文档的主体内容。

< main> 标签中的内容在文档中是唯一的。它不应包含在文档中重复出现的内容，比如侧栏(aside)、导航栏(header/nav)、版权信息(footer)、站点标志或搜索表单。

注意：在一个文档中，< main> 元素是唯一的，所以不能出现一个以上的 < main> 元素。

< main> 元素不能是以下元素的后代：< article>、< aside>、< footer>、< header> 或 < nav>

< main> 标签是 HTML5 中新增加的

九、section标签

标签定义及使用说明：

< section> 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。

section和div的区别：

section不是通用容器元素。如果仅仅是用于设置样式或脚本处理，应用div元素。一条简单的准则是：只有元素内容会被列在文档大纲中时，才适合用section元素。

使用时机：

section 里应该有标题（h1~6）[文章中推荐用 article 来代替]

我们可以理解为一个非文章段落，有明确 id 的一个特殊模块容器（不是专用以包住块的容器）

如果article元素、aside元素或nav元素更符合使用条件，那么不要使用section元素

二~九总结

总而言之，这些标签其实都是可以用div代替的，但是合理运用这些标签可以使页面内容更加清晰，比满屏幕div便于阅读，只需要在一些该用的地方使用就好！并不强求全部布局都用这些，毕竟div才是专门的容器标签！
在这里插入图片描述

二~九都是块级元素，详见：重学前端浏览器支持（添加新元素）/拖放（第八天）

十、caption标签

标签定义及使用说明：

< caption> 标签定义表格的标题。

< caption> 标签必须直接放置到 < table> 标签之后。

您只能对每个表格定义一个标题。

提示：通常这个标题会被居中于表格之上。然而，CSS 属性 “text-align” 和 “caption-side” 能用来设置标题的对齐方式和显示位置。

caption-side属性

caption-side 属性设置表格标题的位置；该属性指定了表标题相对于表框的放置位置，表标题显示为好像它是表之前（或之后）的一个块级元素。
在这里插入图片描述

十一、hgroup（标题分组）

在这里插入图片描述

PBitW

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
html新增标签 2021/1/30

一、role属性二、article标签三、aside标签四、header标签五、nav标签六、footer标签七、address标签八、main标签九、section标签section和div的区别：二~九总结十、caption标签caption-side属性十一、hgroup（标题分组）
复制链接

扫一扫