Why there are some unknown attributes in the <nav> tag

I am pretty new to web design, falling into javascript design with bootstrap, but every now and then, I CAN find some attributes in tags that seems not supported anywhere. I am really confused.

For example: the following code about "nav" tag

<nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left offcanvas"     role="navigation">
  <a class="navmenu-brand" href="#">Brand</a>
<ul class="nav navmenu-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
<div class="navbar navbar-default navbar-fixed-top">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>

why we can have "role" attribute here for "nav" tag? I have searched all the possible resources: http://www.w3schools.com/tags/tag_nav.asp suggested [Global Attributes in HTML.] and [Event Attributes in HTML.] are supported for "nav", however "role" is in neither of them.

I am just wondering How can we add attributes that are not allowed seemingly at will?

Could someone please help explain How bootstrap javascript matching works that just by adding data-toggle and data-target, we can have certain active effects on certain target？

---

Bootstrap has jquery plugins that parse the page and use those data-xxxx attributes to instrument their elements with handlers. Although it is not always a good idea to create your own attributes (normally intellisense will balk unless you add the "data-" or "x-" prefix) there is nothing keeping you from doing it. It will mean nothing to the DOM but Javascript and jQuery can still use them as though they were valid attributes.

链接地址: http://www.djcxy.com/p/36624.html

上一篇: 什么是HTML角色属性

下一篇: 为什么在<nav>标签中有一些未知的属性