在中对元素进行排序的最佳实践是什么?

发布于 2024-08-16 04:03:44 字数 1491 浏览 9 评论 0原文

可以按任何顺序使用任何东西吗?在 </code 之前放置 <code><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"></code> 是否重要>

这是最常用的,是最好的方法吗?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Title Goes Here</title>
    <link rel="stylesheet" href="http://sstatic.net/so/all.css?v=5912">
    <link rel="shortcut icon" href="http://sstatic.net/so/favicon.ico">
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {

        $("#wmd-input").focus();
        $("#title").focus();
        $("#revisions-list").change(function() { window.location = '/posts/1987065/edit/' + $(this).val(); });

    });        
</script>


</head>

<body>
<p>This is my web page</p>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools.js"></script>
</body>

</html>

此网站 http://stackoverflow.com 没有任何编码,并且

我使用的 CMS有 SEO 组件,它在所有 js 和 css 之后添加每个用于 SEO 的 。文件。以 中允许的任何顺序放置任何元素是否会影响文档兼容性和编码?

can use anything in any order? does placing of <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> is important before <title>

this is most used, is it best way?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Title Goes Here</title>
    <link rel="stylesheet" href="http://sstatic.net/so/all.css?v=5912">
    <link rel="shortcut icon" href="http://sstatic.net/so/favicon.ico">
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {

        $("#wmd-input").focus();
        $("#title").focus();
        $("#revisions-list").change(function() { window.location = '/posts/1987065/edit/' + $(this).val(); });

    });        
</script>


</head>

<body>
<p>This is my web page</p>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools.js"></script>
</body>

</html>

this site http://stackoverflow.com doesn't have any encoding and <meta>

I use a CMS which has SEO component which adds every <meta> for SEO after all js and css. files. can placing of any elements in any order which are allowed in <head> affect document compatibility and encoding?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(7

长安忆 2024-08-23 04:03:44

在 HTML 中,DOCTYPE 必须首先出现,后跟一个 元素,该元素必须包含一个 元素,该元素包含一个 </code> 元素,后跟一个 <code><body></code> 元素。请参阅 <a href="http://www.w3.org/TR/html4/struct/global.html" rel="noreferrer">HTML 4.01</a> 中对 HTML 文档全局结构的描述,以及<a href="http://www.w3.org/TR/html5/syntax.html#syntax" rel="noreferrer">HTML5 草案</a>;除了<code>DOCTYPE</code>之外,实际要求大多相同,但描述不同。

实际的标签( 等)是可选的;如果标签不存在,将自动创建元素。 </code> 是 HTML 中唯一必需的标签。最短的有效 HTML 4.01 文档(至少是我可以生成的)是(需要 <code><p></code> 因为 <code><body></code> 中需要有一些内容有效):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><title></title><p>

以及最短的有效HTML5文档:

<!DOCTYPE html><title></title>

注意,在XHTML中,所有标签都必须显式指定;不会隐式插入任何元素。

在某些情况下,浏览器会执行内容类型嗅探,以确定尚未使用 Content-Type HTTP 标头指定的资源类型,如果 Content-Type< /code> 标头尚未提供或不包含 charset (您通常应该尝试包含这些标头,并确保它们正确,但在某些情况下您不能,例如未通过 HTTP 传输的本地文件)。不过,出于这些目的,它们仅在文档开头嗅探有限数量的字节,因此任何旨在影响内容嗅探或字符编码嗅探的内容都应该位于文档开头附近。

因此,HTML5 指定任何 用于指定字符集的标签( 或简单的 ) 必须位于文件的前 1024 个字节内才能生效。因此,如果您要在文档中包含字符编码信息,则应该将标记放在文件的早期,甚​​至可能放在 </code> 元素之前。但请记住,如果您正确指定 <code>Content-type</code> 标头,则不需要此标记。

在 CSS 中,后面的样式声明优先于前面的样式声明,所有否则是平等的。因此,您通常应该先放置可能会被覆盖的最通用的样式表,然后再放置更具体的样式表。

出于性能原因,最好将脚本放在页面底部、 之前,因为加载脚本会阻止页面的呈现。

显然,

总的来说,除了我已经指定的约束之外, 中标签的顺序除了为了可读性之外,应该不会太重要。我倾向于将 </code> 放在顶部,并将其他 <code><meta></code> 标记按某种逻辑顺序放置。

大多数时候,将内容放入 HTML 文档正文的顺序应该是它们的显示顺序或访问顺序。您可以使用 CSS 重新排列内容,但屏幕阅读器通常会按源顺序读取内容,搜索索引会按源顺序提取内容,等等。

In HTML, the DOCTYPE must come first, followed by a single <html> element, which must contain a <head> element containing a <title> element, followed by a <body> element. See the description of the global structure of an HTML document in HTML 4.01 and the HTML5 draft; the actual requirements are mostly the same other than the DOCTYPE, but they are described differently.

The actual tags (<html>, </html>, <head>, etc) are optional; the elements will be created automatically if the tags don't exist. <title> is the only required tag in HTML. The shortest valid HTML 4.01 document (at least, that I could generate) is (needs a <p> because there needs to be something in the <body> to be valid):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><title></title><p>

And the shortest valid HTML5 document:

<!DOCTYPE html><title></title>

Note that in XHTML, all tags must be specified explicitly; no elements will be inserted implicitly.

Browsers perform content type sniffing in some circumstances to determine the type of a resource that hasn't been specified using a Content-Type HTTP header, and also character encoding sniffing if the Content-Type header hasn't been supplied or doesn't include a charset (you should generally try to include these headers, and make sure that they are correct, but there are some circumstances in which you cannot, such as local files not transferred over HTTP). They only sniff a limited number of bytes at the beginning of the document for these purposes, though, so anything that is intended to affect the content sniffing or character encoding sniffing should be near the beginning of the document.

For this reason, HTML5 specifies that any meta tag which is used to specify the character set (either <meta http-equiv="Content-type" content="text/html; charset=..."> or simply <meta charset=...>) must be within the first 1024 bytes of the file in order to take effect. So, if you are going to include character encoding information within your document, you should put the tag early in the file, possibly even before the <title> element. But recall that this tag is unnecessary if you properly specify a Content-type header.

In CSS, later style declarations take precedence over earlier ones, all else being equal. So, you should generally put the most generic style sheets that may be overridden earlier, and the more specific style sheets later.

For performance reasons, it can be a good idea to put scripts at the bottom of the page, right before the </body>, because loading scripts blocks the rendering of the page.

Obviously, <script> tags should be ordered so that scripts that depend on each order have the dependencies loaded first.

On the whole, other than the constraints I have already specified, the ordering of tags within <head> shouldn't matter too much, other than for readability. I tend to like to see the <title> towards the top, and put the other <meta> tags in some sort of logical order.

Most of the time, the order you should put things into the body of an HTML document should be the order they should be displayed in, or the order they should be accessed. You can use CSS to rearrange things, but screen readers will generally read things in source order, search indexes will extract things in source order, and so on.

等你爱我 2024-08-23 04:03:44

这是我使用的模板,只需删除新项目不需要的内容即可。

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title></title>

    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">

    <meta name="robots" content="index, follow">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">

    <link rel="stylesheet" href="scss/style.css" />

    <!-- http://realfavicongenerator.net/ -->

    <meta property="fb:page_id" content="">
    <meta property="og:title" content="">
    <meta property="og:image" content="">
    <meta property="og:description" content="">
    <meta property="og:url" content="">
    <meta property="og:site_name" content="">
    <meta property="og:type" content="website">

    <meta name="twitter:card" content="summary">
    <meta name="twitter:url" content="">
    <meta name="twitter:title" content="">
    <meta name="twitter:description" content="">
    <meta name="twitter:image" content="">
    <meta name="twitter:site" content="">

    <script src="js/vendor/modernizr.js"></script>
  </head>
  <body>
  </body>
</html>

This is the template I use, just delete whatever you dont need for a new project.

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title></title>

    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">

    <meta name="robots" content="index, follow">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">

    <link rel="stylesheet" href="scss/style.css" />

    <!-- http://realfavicongenerator.net/ -->

    <meta property="fb:page_id" content="">
    <meta property="og:title" content="">
    <meta property="og:image" content="">
    <meta property="og:description" content="">
    <meta property="og:url" content="">
    <meta property="og:site_name" content="">
    <meta property="og:type" content="website">

    <meta name="twitter:card" content="summary">
    <meta name="twitter:url" content="">
    <meta name="twitter:title" content="">
    <meta name="twitter:description" content="">
    <meta name="twitter:image" content="">
    <meta name="twitter:site" content="">

    <script src="js/vendor/modernizr.js"></script>
  </head>
  <body>
  </body>
</html>
计㈡愣 2024-08-23 04:03:44

在布莱恩的回答中添加一些性能建议,从逻辑上讲,最高优先级应该是需要下载的内容,以便浏览器可以尽快开始下载它们,以及会影响页面呈现方式的内容。所以我建议:

  • 影响外观的元数据,例如字符集(规范也很早就要求)、视口、具有 apple-mobile-web-app-capable 的
  • 标题位于顶部附近,以便浏览器可以尽快渲染它,并且用户可以感觉到一些东西正在发生
  • Favicon 和触摸图标
  • CSS(至少是首屏的 CSS;如果您想变得更奇特,可以在页脚中加载其他 CSS)。此步骤通常会阻止其他一切继续进行,这就是为什么我将前面的项目放在其上方,因为它们在 CSS 延迟期间提供了一些反馈。
  • 无法在页脚中加载的关键脚本(例如可能影响布局的用户代理嗅探)
  • 其他所有内容(例如链接和元标记形式的必要元数据)

您还可以考虑内联加载的任何 CSS 和 JS头,特别是如果它很小并且外部脚本/工作表不太可能根据您的典型访问者配置文件进行缓存。如果您内联它,理想情况下您会想要压缩它。

最后一件事:用户必须等待头部 - 以及它加载的任何阻塞资源 - 因此最好将尽可能多的内容放在正文或页脚中。

Adding a few performance suggestions to Brian's answer, highest priority should logically be things that will need to be downloaded, so the browser can start downloading them asap, and things that will affect how the page is presented. So I'd suggest:

  • Metas affecting appearance, such as charset (required early by the spec too), viewport, apple-mobile-web-app-capable
  • Title near the top so the browser can render it asap and user has a sense something is happening
  • Favicon and touch icons
  • CSS (at least CSS for above-the-fold; other CSS can be loaded in the footer if you want to get fancy). This step typically blocks everything else from proceeding, which is why I put the previous items above it, as they provide some feedback during the CSS delay.
  • Critical scripts (such as user-agent sniffing that may affect layout) which can't be loaded in the footer
  • Everything else (e.g. necessary metadata in the form of links and meta tags)

You might also consider inlining whatever CSS and JS is loaded in head, especially if its small and the external script/sheet is unlikely to be cached according to your typical visitor's profile. And if you do inline it, you'll ideally want to compress it.

Last thing: The user has to wait around for head - and any blocking resources it loads - so it's best to put as much as possible in the body or footer.

暮凉 2024-08-23 04:03:44

根据W3应该是:

  • 元字符集
  • 标题
  • 元名称=“描述”
  • 元名称=“关键字” "
  • 样式表
  • JavaScript 文件

According to W3 should be:

  • Meta charset
  • Title
  • Meta name="descripition"
  • Meta name="keywords"
  • Stylesheet
  • JavaScript Files
请持续率性 2024-08-23 04:03:44

大多数浏览器并不介意您可以对元素进行排序,但始终应首先指定charset

IE7+ 的最佳实践要求 字符集X-UA-Compatiblebase< /code> 声明发生在 head 中的其他任何内容之前,否则浏览器会重新启动并重新解析之前的所有内容。

Most browsers don't mind how you order your elements, but you should always specify charset first.

Best practices for IE7+ require that the charset, X-UA-Compatible, and base declarations occur before anything else in the head, otherwise the browser starts over and re-parses everything that came before.

递刀给你 2024-08-23 04:03:44

您首先需要您的内容类型,因为这表示字符编码,否则如果稍后出现,某些浏览器会尝试猜测编码。 (我不记得具体细节,但我认为 IE 会猜测它是否在文档的前 75 个字符中找不到编码?)

大多数网络服务器在 HTTP 标头中发送编码,但如果用户保存您的页面,标题不会随之保存。

我会将 CSS 引用放在第二位,以便浏览器尽快下载它们。

JavaScript 我不会放在头部,它应该放在页面的底部,因为下载它们会阻止页面渲染。

You want your content-type first as this denotes the character encoding, otherwise if it comes later on, some browsers attempt to guess the encoding. (I can't remember the specifics, but I think IE will guess if it doesn't find an encoding in the first 75 characters of the document?)

Most webservers send the encoding in the HTTP headers, but if a user saves your page, the headers aren't saved with it.

I'd put CSS references second so the browser downloads them as soon as possible.

JavaScript I wouldn't put in the head, it should go at the bottom of your pages as downloading them blocks rendering of pages.

小帐篷 2024-08-23 04:03:44

IIRC,某些浏览器会在遇到 content-type 元素时重新加载文档。因此该元素可能应该位于文档的 head 元素中的第一个位置。

IIRC, some browsers will re-load the document upon encountering a content-type element. So that element should probably come first within the head element of the document.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文