关于html页面head标签顺序

基本上head就这几个标签么:

<meta>、<link>、<title>、<script>、<style>、<base>.

它们没有(规范上的)既定顺序标准。
一般是按照具体经验来分配。
如:

  1. <meta>
  2. <title>
  3. <link> \ <style>
  4. <base>
  5. <script>

当然,约往后位置约不重要。比如 4 5 调换也没啥大事儿。
基本规律是:

  • meta 最好写在第一个,特别是 meta chaset 设定必须写第一个,它们是元数据,能让数据获取方得知此页面的元数据。最先得知页面编码,进而获取之后meta(如果有)内的作者、关键字等数据(因为这些内容可能是非ASCII字符)时,可以用指定编码方式获取。获取方得到全部元数据后可以自行判断是否继续获取其后内容。
  • title 紧随 meta 之后是因为可能获取方需要知道页面标题信息,并且在最先获取 chaset 信息后知道此标题的编码方式。如果获取方是页面浏览器,那么它可以最先用正确的页面编码方式显示标题给用户。
  • link、style 紧随 meta,其实还是主要为 link 大部分都是 CSS 样式文件考虑。由于外联样式可以并行下载,不会阻塞后续处理工作,style 也能让浏览器尽快得知页面排版布局信息。
  • base 一般情况下用的不多,只要不放第一个基本没啥关系。
  • script 放在最后,是基于script 不关是下载还是执行都会阻塞页面考虑,让它尽量偏后。(当然,这在绝大部分现代浏览器中不是事儿了,它会尽量"拖后"外联脚本下载时机)现在大多数情况没有特殊需求 script 都不放在 head 里了,而是放在 body 最后一个子节点上(也有给扔 html body 之外的,浏览器容错还是能给它修正回 body 最后节点上)。

大牛总结:

首先要指定编码,当然服务端也要指定编码,保持一致。
然后是对于可以切换内核的浏览器提示优先切换内核,诸如国内占比比较大的360浏览器6.0版本之后。然后是IE相关的浏览器使用其支持的最高版本的文档模式。
接着考虑可以使用viewport来支持不同尺寸和分辨率的设备。
关于页面相关说明,诸如作者可以在适当位置添加。
蜘蛛是否抓取索引的标志可以考虑添加。
接着是dns-prefetch缓存assets相关的域名。
如果你确定页面多数内容是弹出新窗口,那么可以指定页面的链接打开模式。
对于不支持或者禁用脚本的网站,可以使用转向带参数,请求无脚本时候的网站内容。
页面标题是页面必不可少的,同时也是蜘蛛索引的重要指标,可以考虑程序动态输出。
引入主要的样式文件,同时根据设备类型来引入设备相关的样式文件,以支持平板以及打印机。
前端脚本通过后端变量设置版本,以利于文档和静态资源的更新。
关于前置全局脚本,需要做到:
如果页面不作为iframe内容使用,要防止恶意被嵌套,发生误导或者钓鱼相关的事情。
如果使用类名作为钩子来告知页面程序是否支持调用,可以在此进一步处理。
对于旧版本的IE,这里特指版本小于等于IE8的老旧浏览器,如果要做优雅降级,那么需要再此做前置程序处理。
如果页面程序存在依赖数据来渲染的情况,前置的数据也推荐放置于此。
如果页面依赖脚本加载器,可以在此添加加载器脚本。
对于旧版本的浏览器可以使用IE条件注释配合shim脚本,以及respond来提供一些额外的功能支持,以减少写代码时的额外处理,以及保持一致性访问。
页面关键词和相关说明也是至关重要的,如果你做SEO的话。
如果你还要提供RSS以及PING,请也在此一并提供。
对于搜索引擎提供shortlink,以合并改版rewrite后的状况。

时间: 2024-12-12 15:05:49

关于html页面head标签顺序的相关文章

javascript如何统计页面中标签的数量

javascript如何统计页面中标签的数量:本章节介绍一下如何统计页面中标签的数量,当然标签是可以重复的,虽然不常用,不过寄希望能够给大家带来或多或少的帮助.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" />

关于界面的按钮的显隐 还有jsp页面数据的传递 把页面的标签变成只读

//界面按钮的显示隐藏 界面input的锁定    function change(){       document.getElementById('first1').style.display="inline";       document.getElementById('first2').style.display="inline";       document.getElementById('first3').style.display="in

嵌套移动APP端的H5页面meta标签

嵌套移动APP端的H5页面meta标签小结: <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /> <meta name="apple-mobile-web-app-capable" con

引用asp.net母版页后,母版页和内容页的页面事件执行顺序

如下,经测试得到的执行步骤: 第01步.内容页的 Page_PreInit第02步.母版页的 Page_Init第03步.内容页的 Page_Init第04步.内容页的 Page_InitComplete第05步.内容页的 Page_PreLoad第06步.内容页的 Page_Load第07步.母版页的 Page_Load第08步.母版页或内容页的 按钮点击等回发事件(Master或Content的Button事件不会同时触发)第09步.内容页的 Page_LoadComplete第10步.内容

css:层叠样式表 美化页面 修改标签的样式

css:层叠样式表  美化页面 修改标签的样式 写法分类: 1.内联: <!--使用<link />标签将css文件引入到html文件中--> <!--<link href="路径" rel="stylesheet"/>--> <!--<link/>标签只可以放在<head></head>之中,另外在html中内嵌css样式也只可以写在head标签之中--> <!-

Eclipse 新建.jsp页面后,页面头部标签报错的解决方法

Eclipse 新建.jsp页面后,页面头部标签报错的解决方法 1.报错地方: 2.解决方法: .jsp页面右键==>BUild Path ==>Configure Build Path... 3.接着 4.按步骤操作后.jsp页面就不会报错了 版权声明:本文为CSDN博主「爱吃狼的羊」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明. 原文链接:https://blog.csdn.net/weixin_39890531/article/details/78

浏览器加载显示html页面内容的顺序

我们经常看到浏览器在加载某个页面时,部分内容先显示出来,又有些内容后显示.那么浏览器加载显示html究竟是按什么顺序进行的呢 其实浏览器加载显示html的顺序是按下面的顺序进行的:1.IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的.2.在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完).3.如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载.4.并且在下载后进行解析,解析过

使用iframe,注销以后,点击某个标签,跳转到的登录页面位于标签中

当使用iframe时,要么会话过期,要么手动注销,如果此时再进行操作,可能遇到跳转到登录页面,可是登录页面会位于标签执行,并没有全屏显示,即位于当前的iframe中,此时的解决方式很简单,只需要在登录页面添加以下javascript代码: <script> if(window != top) { top.location.href = location.href; } </script>

iwebshop里面前端页面query标签如何传递api数据

开发中遇到了前台页面用query标签查出来的数据,需要通过api获取数据,那么接下来就给大家说一下如何通过api里的方法来传递数据到前端! 首先前端页面必须是query标签获取的数据 例子: {set:$queryObj=Api::run('getSellerList',$flag);$resultData=$queryObj->find()} {if:$resultData} {foreach:items=$resultData} 例子中 注意自己定义的 api方法 给一个自定义参数,此$fl