what exactly does this HTML tag do?
Actually i am having a source code with me and i do understand the whole except the below code so please provide me the correct explanation for this tag. It is it
<html lang="en" class="no-js">
in the program
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circular Navigation - Interactive Demo | Codrops</title>
<meta name="description" content="Circular Navigation Styles - Building a Circular Navigation with CSS Transforms | Codrops "/>
<meta name="keywords" content="css transforms, circular navigation, round navigation, circular menu, tutorial"/>
<meta name="author" content="Sara Soueidan for Codrops"/>
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div class="cn-wrapper">
<ul>
<li><a href="#"><span class="icon-picture"></span></a></li>
<li><a href="#" class="active"><span class="icon-headphones"></span></a></li>
<li><a href="#"><span class="icon-home"></span></a></li>
<li><a href="#"><span class="icon-facetime-video"></span></a></li>
<li><a href="#"><span class="icon-envelope-alt"></span></a></li>
</ul>
</div>
<div class="steps">List items are positioned absolutely. Anchor tags inside them are also positioned absolutely, and their size is given so that they are visible at the end of the transformation. Red dot represents the container's center.</div>
<button class="play-button">Start Demo</button>
<button class="step-button">Next Step</button>
<button class="reset-button" disabled>Reset</button>
<span><em>*Best experienced in Chrome</em></span>
<ul class="info">
<li>List Item</li>
<li>Nav Container</li>
<li>Anchor inside List Item</li>
<li>Container center</li>
</ul>
<a class="back" href="http://tympanus.net/codrops/?p=16114">
<span>Back to the Codrops Article</span>
</a>
<script src="js/vendor/jquery-1.10.1.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
From MDN:
The HTML Element (or HTML root element) represents the root of an HTML or XHTML document. All other elements must be descendants of this element.
As @Buch said the lang attribute says what language the content of the page is in, and the class attribute works like any other element's class attribute. The one you show is usually used when a javascript library such as modernizr is doing feature checking so in your JavaScript you can check for the presence of different classes on the body tag to determine what features are supported by the current browser.
--Edit-- For the languages W3.org has an explanation for what the various language codes are: http://www.w3.org/TR/html401/struct/dirlang.html#h-8.1.1 in your case en stands for English.
"The HTML lang attribute can be used to declare the language of a Web page or a portion of a Web page. This is meant to assist search engines and browsers." English - en (From http://www.w3schools.com/tags/ref_language_codes.asp)
"The no-js class is used by the Modernizr feature detection library. When Modernizr loads, it replaces no-js with js. If JavaScript is disabled, the class remains. This allows you to write CSS which easily targets either condition." (From @Zach_L's answer in What is the purpose of the HTML "no-js" class?)
here you are:
html -The tag tells the browser that this is an HTML document and it represents the root of an HTML document. It is the container for all other HTML elements
lang - Tells what language the content is wrapped by
class - defining the css class used in a stylesheet.
Wanted to add that I found out, that the "no-js" class is used by modernizr ( http://modernizr.com/docs/ ) . What exactly it does can be read here: http://alistapart.com/article/taking-advantage-of-html5-and-css3-with-modernizr
Next, add the class “no-js” to the element:
When Modernizr runs, it will replace that class with the class “js” which allows you to know, in your CSS, whether or not JavaScript is enabled. But Modernizr doesn't stop there: It will add classes for every feature it detects, prefixing them with “no-” if the browser doesn't support it. So, your element will look something like this upon pageload (providing JavaScript is enabled):
<html class=“js canvas canvastext no-geolocation rgba hsla multiplebgs
borderimage borderradius boxshadow opacity cssanimations csscolumns
cssgradients cssreflections csstransforms csstransforms3d
csstransitions video audio localstorage sessionstorage webworkers
applicationcache fontface”>
Reference: http://www.w3schools.com/tags/tag_html.asp
链接地址: http://www.djcxy.com/p/96884.html上一篇: 兼容性模式问题在IE 9中
下一篇: 这个HTML标签究竟做了什么？