【问题标题】:what exactly does this HTML tag do? [closed]这个 HTML 标签到底是做什么的? [关闭]
【发布时间】:2014-04-04 19:46:26
【问题描述】:

实际上,我有一个源代码,除了下面的代码之外,我确实理解了整个代码,所以请为我提供这个标签的正确解释。 就是它

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

【问题讨论】:

标签: html css


【解决方案1】:

来自MDN

HTML 元素(或 HTML 根元素)代表 HTML 或 XHTML 文档的根。所有其他元素必须是该元素的后代。

正如@Buch 所说,lang 属性表示页面内容所使用的语言,class 属性与任何其他元素的类属性一样工作。您显示的通常在 modernizr 等 JavaScript 库进行功能检查时使用,因此您可以在 JavaScript 中检查 body 标签上是否存在不同的类,以确定当前浏览器支持哪些功能。

--编辑-- 对于语言W3.org 解释了各种语言代码是什么:http://www.w3.org/TR/html401/struct/dirlang.html#h-8.1.1 在您的情况下en 代表英语。

【讨论】:

  • 感谢您宝贵的回答,伙计
【解决方案2】:

“HTML lang 属性可用于声明网页或网页的一部分的语言。这是为了帮助搜索引擎和浏览器。” 英语 - zh (来自http://www.w3schools.com/tags/ref_language_codes.asp

“Modernizr 特征检测库使用 no-js 类。当 Modernizr 加载时,它将 no-js 替换为 js。如果禁用 JavaScript,该类仍然存在。这使您可以编写轻松针对任一条件的 CSS 。” (来自@Zach_L 在What is the purpose of the HTML "no-js" class? 中的回答)

【讨论】:

    【解决方案3】:

    你在这里:

    html - 标签告诉浏览器这是一个 HTML 文档,它代表 HTML 文档的根。它是所有其他 HTML 元素的容器

    lang - 说明内容是用什么语言包装的

    class - 定义样式表中使用的 css 类。

    想补充一点,我发现,modernizr (http://modernizr.com/docs/) 使用了“no-js”类。它到底做了什么可以在这里阅读:http://alistapart.com/article/taking-advantage-of-html5-and-css3-with-modernizr

    接下来,将类“no-js”添加到元素中:

    Modernizr 运行时,它将用“js”类替换该类 它允许你在你的 CSS 中知道 JavaScript 是否是 启用。但 Modernizr 并不止于此:它会为 它检测到的每个功能,如果浏览器在它们前面加上“no-” 不支持。所以,你的元素看起来像 这在页面加载时(提供 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

    【讨论】:

      【解决方案4】:

      http://www.w3schools.com/tags/ref_language_codes.asp for lang="en"

      What is the purpose of the HTML "no-js" class? for class="no-js"(class属性的主要用途是在css或脚本语言中用作选择器)

      【讨论】:

        【解决方案5】:

        html 标签包装任何 html 页面。 lang 是一个属性,用于指定内容的语言,class 是用于在 CSS 或 jQuery 中选择标签的类属性。

        【讨论】:

        • 那里面的“en”语言是什么?
        • en 代表英语
        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2017-01-28
        • 2015-11-04
        • 2018-02-14
        • 2019-06-10
        • 1970-01-01
        • 2012-03-30
        • 2014-01-29
        相关资源
        最近更新 更多