HTML文档头部

时间  2019-11-11
标签 html 文档 头部 栏目 HTML 繁體版
原文   原文链接

前面的话

  在声明文档类型以后，HTML文档的下一部分为<html>标签，告知浏览器应将括在<html>...</html>内的全部内容解析为HTML。而后是HTML文档的两个主要部分：<head>和<body>。<head>将包含有关页面的常规信息和元数据，本文将详细介绍HTML的文档头部<head>javascript

 

概述

  <head>大部分不可见，描述了文档的一些基本的属性和信息(能够呈现的是title和icon)。<head>元素下的子元素主要包括<meta>、<title>、<base>、<link>、<style>和<script>这六个元素css

 

meta

  <meta>标签(meta-information)用于提供页面有关的元数据，除了提供文档字符集、使用语言、做者等基本信息外，还涉及对关键词和网页等级的设定。经过设置不一样的属性，元数据能够分为如下几种:html

  若是设置了charset，即将对网页使用的字符集做出声明HTML5java

  若是设置了name，它是一个文档级的元数据，将附着在整个页面上web

  若是设置了http-equiv，它是一个编译指令，即由服务器提供的来指示页面应如何加载chrome

  若是设置了itemprop，将定义一个用户自定义的元数据(未实现)windows

一、charset浏览器

  charset声明声明当前文档所使用的字符编码，但该声明能够被任何一个元素的lang特性的值覆盖。文档的编码必定要与文件自己的编码保持一致，不然会出现乱码，推荐使用UTF-8编码缓存

  [注意]字符编码必须写在<head>元素的最开始，若是位于<title>标签以后，那么<title>标签极可能会乱码服务器

<meta charset="utf-8"/>

二、name

【关键词】

<meta name="keywords" content="HTML, CSS, XML" />

【描述】

<meta name="description" content="Free Web tutorials on HTML, CSS, JavaScript" />

【做者】

<meta name="author" content="littlematch">

【版权】

<meta name="copyright" content="本页版权归小火柴全部">

【视口(移动端使用)】　

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

【IE浏览器渲染】

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

  若是安装了GCF(Google Chrome Frame谷歌内嵌浏览器框架GCF)，则使用GCF来渲染页面，若是没有安装，则使用最高版本的IE内核进行渲染

【双核浏览器渲染】

<meta name="renderer" content="webkit">

  若是是双核浏览器，则使用webkit内核渲染

三、http-equiv

【定时跳转】

  让网页多少秒刷新，或跳转到其余网页

<meta http-equiv="refresh" content="5">
<meta http-equiv="refresh" content="5;url=http://www.baidu.com">

【缓存过时时间】

  能够用于设定网页的到期时间，一旦过时则必须到服务器上从新调用。须要注意的是必须使用GMT时间格式

<meta http-equiv="Expires" Content="0">
<meta http-equiv="Expires" Content="Sat Nov 28 2016 21:19:15 GMT+0800">

【禁止缓存】

  用于设定禁止浏览器从本地机的缓存中调阅页面内容，用户没法脱机浏览

<meta http-equiv="Pragma" Content="No-cach">

【独立页面】

  强制页面在当前窗口中以独立页面显示，能够防止本身的网页被别人看成一个frame页调用

<meta http-equiv="windows-Target" content="_top">

【兼容模式】

  Edge模式告诉IE以最高级模式渲染文档，也就是说，什么版本IE就用什么版本的标准模式渲染；chrome模式表示强制IE使用Chrome Frame渲染。Google官方提供了对Google Frame插件安装状况的检测，这里直接调用方法便可，若是检测到IE并未安装Google Frame，则弹出对话框提示安装。使用此插件，用户能够经过IE的用户界面，以Chrome内核的渲染方式浏览网页

  下面表示若是当前浏览器版本是小于等于IE8的，则使用chrome，若是不是，则使用IE标准模式

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=IE8">

  [注意]关于<meta>元素的更多信息移步至此

 

title

  <title>元素定义文档的标题，显示在浏览器的标题栏或标签页上。它只能够包含文本，如果包含有标签，则包含的任何标签都不会被解释

  <title>元素详细来讲，有如下三个做用：一、定义浏览器工具栏中的标题；二、提供页面被添加到收藏夹时显示的标题；三、显示在搜索引擎结果中的页面标题

  [注意]在全部HTML文档中，<title>都是必须的

<title>About Me</title>

 

base

  <base>用于指定文档里全部相对URL地址的基础URL，为页面上全部连接规定默认地址和默认打开方式。文档中的基础URL可使用document.baseURI进行查询

  [注意]一份文档最多一个<base>元素。若是指定了多个<base>`元素，只会使用第一个href和target值，其他都会被忽略

<base href="http://cnblogs.com" target="_blank">

 

  <link>指定了外部资源与当前文档的关系，具备属性href、rel、media、hreflang、type和sizes。其中href和rel是经常使用的，href指定了连接的资源的地址(url)，而rel指定了资源的类型

【rel属性】

alternate   指示连接到该文档的另外一个版本
author      指示连接到当前文档的做者主页
help        指向一个跟网站或页面相关的帮助文档
icon        引入表明当前文档的图标，新的sized属性与这个属性结合使用，指定连接图片的宽高
license     连接到当前的文档的版权声明
next        指示连接到文档是一组文档中的下一份
pingback    处理当前文档被引用状况的服务器地址
prefetch    指明须要缓存的目标资源
prev        标明了上一个文档
search      连接到能够用于搜索当前页面和相关页面的资源
sidebar     连接到能够做为附属上下文的文档
stylesheet  引入样式表
tag         建立应用于当前文档的标签

【media属性】

screen      计算机屏幕
tty         终端
tv          电视
projection  投影仪
handheld    手持设备
print       打印的页面
braille     盲文设备
aural       语音合成器
all         全部

【sizes属性】

  sizes属性规定被连接资源的尺寸，且只有当被连接资源是图标时，才可以使用该属性

<link rel="icon" href="demo.gif" type="image/gif" sizes="16x16" />

【引入图标】　　　　

<link rel="shortcut icon" href="ico.ico"/>

【引入外部样式表】

<link rel="stylesheet" type="text/css" href="mystyle.css" />

  [注意]关于<link>元素的更多信息移步至此

 

style

  <style>元素包含了文档的样式化信息或者文档的一部分，经常使用于引入内部CSS样式

<style>
　　body{background-color: red;}
</style>

  <style>主要包含如下属性

【type】

  该属性以MIME类型(不该该指定字符集)定义样式语言。若是该属性未指定，则默认为‘text/css'

【media】

  指定哪一个媒体应该应用该样式

【title】

  指定可选的样式表

【disabled】

  若是指定该属性，关闭(不该用)样式规则到文档中的元素。

【scoped】

  使用scoped属性，能够在页面任意位置添加CSS样式。可是这样就违背告终构与样式分离的原则，要当心使用。若是该属性存在，则样式应用于其父元素；若是不存在，则应用于整个文档。该属性只有chrome和firefox支持

<article>
  <div>The scoped attribute</div>
  <p>This text should be black</p>
  <section>
    <style scoped>
      p { color: red; }
    </style>
    <p>This should be red.</p>
  </section>
</article>

 

script

  <script>的做用是在HTML或XHTML文档中嵌入或引用可执行的脚本。没有async或defer属性的脚本和内联脚本会在浏览器继续解析剩余文档前被获取并马上执行

【src】

  这个属性定义引用外部脚本的URI，这能够用来代替直接在文档中嵌入脚本。有src属性的script元素标签内不该该再有嵌入的脚本

【type】

  该属性定义script元素包含或src引用的脚本语言。属性的值为MIME类型，支持的MIME类型包括text/javascript, text/ecmascript, application/javascript和application/ecmascript。若是没有定义这个属性，脚本会被视做JavaScript。若是MIME类型不是JavaScript类型(上述支持的类型)，则该元素所包含的内容会被看成数据块而不会被浏览器执行

  若是type属性为module，代码会被看成JavaScript模块

<!-- HTML4 and (x)HTML -->
<script type="text/javascript" src="javascript.js">

<!-- HTML5 -->
<script src="javascript.js"></script>

【defer】

  这个布尔属性定义该脚本是否会延迟到文档解析完毕后才执行

【async】

  async属性是HTML5新增的属性，IE9-浏览器不支持。该布尔属性指示浏览器是否在容许的状况下异步执行该脚本。该属性对于内联脚本无做用(即没有src属性的脚本）

javascript加载

  正常状况下，当浏览器在解析HTML源文件时若是遇到外部的script，那么解析过程会暂停，并发送请求来下载script文件，只有script彻底下载并执行后才会继续执行DOM解析

<script src="myBlockingScript.js"></script>

  在下载过程当中浏览器是被阻止作其余有用的工做的，包括解析HTML，执行其余脚本，以及展现CSS布局。虽然Webkit预加载扫描程序能够探测性地在下载阶段进行多线程下载，可是某些页面仍然存在很大的网络延迟

  当前有不少技术来提高页面显示速度，但都须要额外的代码以及针对特定浏览器的技巧。如今，script能够经过添加async或者defer属性来让脚本没必要同步执行

<script async src="myAsyncScript.js" onload="myInit()"></script>  
<script defer src="myDeferScript.js" onload="myInit()"></script>

  async和defer标注的script都不会暂停HTML解析就马上被下载，二者都支持onload事件回调来解决须要该脚原本执行的初始化

  二者的区别在于执行时的不一样：async脚本在script文件下载完成后会当即执行，而且其执行时间必定在window的load事件触发以前。这意味着多个async脚本极可能不会按其在页面中的出现次序顺序执行；与此相对，浏览器确保多个defer脚本按其在HTML页面中的出现顺序依次执行，且执行时机为DOM解析完成后，document的DOMContentLoaded事件触发以前

  [注意]若是同时设置async和defer，和只设置async属性的效果一致

  下面展现的是一个须要1秒来下载，以及1秒来解析执行其余操做的例子，整个页面载入花了大约2秒钟

#

  一样的例子，但此次咱们指定了script的defer属性.由于当defer脚本下载的时候，其余操做能够并行执行，因此大概快了1倍

#
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程