这个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>
来自MDN:
HTML元素(或HTML根元素)表示HTML或XHTML文档的根。 所有其他元素必须是此元素的后代。
正如@Buch所说, lang
属性表示页面的内容在哪种语言中,而class
属性与任何其他元素的class属性一样。 当你的JavaScript这样的JavaScript库正在做功能检查时,通常会使用你显示的内容,因此在JavaScript中可以检查body标签中是否存在不同的类,以确定当前浏览器支持哪些功能。
- 编辑 - 对于语言W3.org有各种语言代码的解释:http://www.w3.org/TR/html401/struct/dirlang.html#h-8.1.1在您的案例中en
代表英文。
“HTML lang属性可以用来声明网页的语言或网页的一部分,这是为了帮助搜索引擎和浏览器。” 英文 - en(来自http://www.w3schools.com/tags/ref_language_codes.asp)
“Modernizr特性检测库使用no-js类,当Modernizr加载时,它将用js替换no-js,如果JavaScript被禁用,类仍然存在,这允许您编写容易针对任一条件的CSS。 (来自@ Zach_L的答案HTML“no-js”类的目的是什么?)
这个给你:
html - 标签告诉浏览器这是一个HTML文档,它代表了HTML文档的根。 它是所有其他HTML元素的容器
lang - 告诉内容被什么语言包装
类 - 定义样式表中使用的css类。
想补充一点,我发现,“no-js”类被modernizr使用(http://modernizr.com/docs/)。 究竟是什么可以在这里阅读:http://alistapart.com/article/taking-advantage-of-html5-and-css3-with-modernizr
接下来,向该元素添加类“no-js”:
当Modernizr运行时,它将使用类“js”替换该类,从而使您可以在CSS中知道JavaScript是否已启用。 但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
链接地址: http://www.djcxy.com/p/96883.html