2014-03-03 12 views
-3

其實我有一個源代碼與我,我確實瞭解整體,除了下面的代碼,所以請給我這個標籤的正確解釋。 這是它這個HTML標籤到底做了什麼?

<html lang="en" class="no-js"> 

在節目

<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> 
+4

這裏你去:http://stackoverflow.com/questions/6724515/what-is-the-purpose-of-the-html-no-js-class –

回答

1

MDN

的HTML元素(或HTML根元素)表示HTML或XHTML文檔的根。所有其他元素必須是此元素的後代。

由於@Buch說lang屬性說,頁面的內容是什麼語言,和class屬性像任何其他元素的class屬性。通常在JavaScript庫(如modernizr)正在執行功能檢查時使用您顯示的那個,因此您可以在JavaScript中檢查body標籤上是否存在不同的類,以確定當前瀏覽器支持哪些功能。

- 編輯 - 爲W3.org有各種語言的代碼是什麼解釋的語言:http://www.w3.org/TR/html401/struct/dirlang.html#h-8.1.1你的情況en代表英語。

+0

Thanx爲您寶貴的答案夥計 –

-1

的HTML標籤包裝任何HTML頁面。 Lang是用於指定內容所用語言的屬性,class是用於在CSS或jQuery中選擇標記的類屬性。

+2

然後那是什麼「en」語言? –

+0

en代表英文 – Buch

1

你在這裏:

HTML -The標籤告訴瀏覽器,這是一個HTML文件,它代表了一個HTML文檔的根。這是所有其他HTML元素容器

- 告訴什麼語言的內容是由

包裹 - 定義在樣式表中使用的CSS類。

想補充一點,我發現,「no-js」類被modernizr使用(http://modernizr.com/docs/)。究竟它確實可以在這裏閱讀:http://alistapart.com/article/taking-advantage-of-html5-and-css3-with-modernizr

接下來,這些類「無JS」添加元素:

當Modernizr的運行,它將取代類與類「js」 它允許您在CSS中知道是否啓用了 。但是Modernizr並不止於此:它會爲其檢測到的每個功能添加 的類,如果瀏覽器 不支持它,則在「無 - 」前加上它們。所以,你的元素看起來像 這樣在頁面加載(提供啓用JavaScript):

<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」> 

參考:http://www.w3schools.com/tags/tag_html.asp