之前写网页都很标准的格式,最近一个项目出现了页面闪动等一系列问题【项目不是前后端分离】,

所以这边有后台的功劳,有部分后台是不管你页面结构的,在他们操作的时候可能会在,你的head内meta前加内联css,或者js,在引擎加载规范的前面有其他css,js干扰,加载后又有其他样式,js,导致页面结构不稳定。在这里提醒各位开发者,搭建规范的页面结构还是很重要的,这边我去百度了一篇比较有道理的解释。

基本上就这几个标签么
<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 最后节点上)。
    •   
      作者:貘吃馍香
      链接:https://www.zhihu.com/question/28714116/answer/41891650
      来源:知乎

网页结构——head标签内的更多相关文章

  1. HTML基本结构与标签总结整理篇

    HTML基本结构与标签总结整理篇 前言:这是笔者的学习总结与整理,如果有错误或疑问的地方,欢迎指正与讨论!另:此文会不定时更新~ 1.了解HTML 学习前端技术,必然涉及三个方面:html(结构).c ...

  2. 网页结构的简介和Xpath语法的入门教程

    相信很多小伙伴已经听说过Xpath,之前小编也写过一篇关于Xpath的文章,感兴趣的小伙伴可以戳这篇文章如何利用Xpath抓取京东网商品信息以及Python网络爬虫四大选择器(正则表达式.BS4.Xp ...

  3. HTML基本组成结构与标签的认识

    HTML基本组成结构与标签 其实组成结构用一张图来简单了解下如下 目前一般网站的结构是会如此不是很清晰简单 先来说说header头部 这样是不是更加清楚了 导航栏是引导用户查看网站内容的快捷入口,打个 ...

  4. HTML5 常用的结构化标签整理

    一.语义化结构化标签 结构化标签优点: 1.方便浏览器处理和识别,提升了网页的质量和语义. 2.减少了大量无意义的div标签,增强代码的可读性. 结构化标签:(header,nav,body,arti ...

  5. HTML5结构化标签

    一 结构化标签 在之前的HTML页面中,大家基本上都是用了Div+CSS的布局方式.而搜索引擎去抓取页面的内容的时候,它只能猜测你的某个Div内的内容是文章内容容器,或者是导航模块的容器,或者是作者介 ...

  6. label标签内含有input元素,点击事件会触发两次

    **label标签内含有input元素,点击事件会触发两次** 如果你的结构是label内写input实现点击文字时候input也有相应.并且,把事件设置在了label上,那么就会执行两次了. //h ...

  7. 23-python用BeautifulSoup用抓取a标签内所有数据

    1.获取子标签: thr_msgs = soup.find_all('div',class_=re.compile('msg'))   for i in thr_msgs:     print(i) ...

  8. html5-1 网页结构描述

    html5-1 网页结构描述 一.总结 一句话总结:注意head中的title,keywords,description,这对seo优化很有帮助 1.如何给某元素动态使用类似onclick方法? 点o ...

  9. 表单的子元素可不在form标签内

    表单是网页用于向服务器发送数据的元素.其用法类似下面: <form method="POST" action="/login"> <input ...

随机推荐

  1. JMeter学习笔记(六) 文件下载接口测试

    本次测试的是文件下载接口,文件是PDF文档,步骤如下: 1.通过jmeter的录制功能,获取了文件下载接口的地址和参数,和其他的HTTP请求一样的配置 2.执行此接口后,察看结果树,点击下载接口的结果 ...

  2. python之路——网络编程

    一.楔子 你现在已经学会了写python代码,假如你写了两个python文件a.py和b.py,分别去运行,你就会发现,这两个python的文件分别运行的很好.但是如果这两个程序之间想要传递一个数据, ...

  3. Ubuntu16.04安装openCV的问题集合

    Q1 下列软件包有未满足的依赖关系:   libtiff4-dev : 依赖: libjpeg-dev  E: 无法修正错误,因为您要求某些软件包保持现状,就是它们破坏了软件包间的依赖关系. 上网查了 ...

  4. .NET Core Linux 部署实践

    部署环境:CentOS 7 x64 必要条件:当前用户有sudo权限 1. 安装依赖包sudo yum install libunwind libicu2. 下载.net core安装文件curl - ...

  5. HDU 4107 Gangster(线段树 特殊懒惰标记)

    两种做法. 第一种:标记区间最大值和最小值,若区间最小值>=P,则本区间+2c,若区间最大值<P,则本区间+c.非常简单的区间更新. 最后发一点牢骚:最后query查一遍就行,我这个2B竟 ...

  6. 软工实践 - 第十五次作业 Alpha 冲刺 (6/10)

    队名:起床一起肝活队 组长博客:https://www.cnblogs.com/dawnduck/p/10004469.html 作业博客:班级博客本次作业的链接 组员情况 组员1(队长):白晨曦 过 ...

  7. 物联网第一次作业--我眼中的物联网——从认识RFID开始

    无线射频识别技术(Radio FrequencyIdentification,简称:RFID)是一种非接触式的自动识别技术,其基本原理是利用射频信号和空间耦合(电感或电磁耦合)或雷达反射的传输特性,实 ...

  8. kafka+windows+java+springboot中的配置

    1.百度kafka+zookeeper+windows配置 1.1  zookeeper配置 dataDir=/tmp/zookeeper # the port at which the client ...

  9. python3.6操作mysql

    1.通过 pip 安装 pymysql 进入 cmd  输入  pip install pymysql   回车等待安装完成: 安装完成后出现如图相关信息,表示安装成功. 2.测试连接 import ...

  10. 【POJ 2728 Desert King】

    Time Limit: 3000MSMemory Limit: 65536K Total Submissions: 27109Accepted: 7527 Description David the ...