head内的标签

由于sublime中可以很方便的生成页面模板(!+ctr+e组合键),因此一般除了引入脚本跟样式表之外以及更改title内容之外,并没有在head标签内做其他改动,对于这个跟body标签同级的元素所给予的关注度基本可以忽略,今天了解了一点seo的东西,发现应当重新回过头来看一看这个被我忽视了这么久的重要标签。

<!--more-->

关于head标签本身,其实并没有什么其他需要注意的地方,它只是所有头部元素的容器,所有头部元素内容都不会出现在页面上。文章的重要放在head内部的标签上。

1. title标签

这个大概是最熟悉的一个标签了,使用其内容指定整个文档出现在浏览器标签栏中的名字(在手机浏览器中中查看网页时,能够更清楚的看到标题)。有下面几个方面需要注意。

  • 如果title内容为空或者没有title标签,则会以整个文件名作为标签栏名字,一般情况下,最好设置一个标签;
  • 一个页面如果存在多个title,则只有第一个title的内容生效,其他的标题标签会被浏览器忽略,一般情况下,最好只设置一个标签;
  • title标签也是一个DOM元素节点,因此可以动态的修改其中的内容(貌似除了伪装成跳转页面并没有什么其他的用处,我想到的一种做法是在公共的JS文件中对title进行判断,只有在指定的页面内对应的JS才会生效,比如某些返回顶部的按钮之类的,具体的做法还是得仔细想想。)
  • 貌似并不能对title进行样式设定(这是前面提到的所有头部元素都不会出现在页面上,因此根本就无法渲染其样式),也不能包含其他的标签(浏览器会将title标签内的所有内容直接映射到标签栏上),平常看见的一些网页标题前有个类似于logo的背景图,使用的是ico图标的方式及下面就会提到的link标签。

2. link标签

该标签可以将外部资源引入当前页面文档,通过指定其href属性(即路径),可以将外部资源与页面链接起来。link标签另一个比较重要的属性是rel,rel属性规定当前文档与被链接文档之间的关系。

  • rel最常见的属性值就是rel=”stylesheet,该属性得到了全部浏览器的支持。在CSS样式的四种作用方式中,使用Link标签链接外部样式表是最常见的一种。然而,link标签的用途并不单单只是作用于样式表;
  • 比如在title标签中提到的标签栏logo图标,即是使用link标签来完成的,具体做法是 将rel属性值更改为icon,并将href指定为某个图片资源,需要注意的是虽然支持多种图片格式,一般的做法是使用ico格式的图片,可以通过各种图片格式转换器获得,这样做的目的是为了...(好吧我也不太清楚,大多数浏览器会自动识别网站根目录下的.ico文件,以及为了获得更好的图片效果吧。汗!这个解释真是牵强)。
      <link rel="icon" href="house.ico">
    此外link标签的rel还有很多其他的属性值,只是由于这些值只得到了部分浏览器的支持,且并不是很常见,因此这里就不介绍了,详情可以查看w3cSchool里面的讲解

3. style标签

额这个是耳熟能详。我学CSS写的第一行样式就是在这个标签里面写的。Style也十分简单,只有一个唯一的属性type,且具有唯一的属性值text/css。虽然有的教程上写的style标签的type属性及属性值不能省略,但是我发现一个没有任何属性的style标签内部的样式也会生效。(既然都是唯一的属性及属性值,为什么还要显式地声明呢?难道是为了以后出现取代css样式的技术吗?拭目以待哦,这里立个flag。)

  • 为了结构与样式分离,因此一般很少使用style标签设置页面样式,(不过写个demo或者简单的测试啥的,style标签还是很常用的)。更多的是设置DOM元素的style属性而非style标签(JS设置的style都是行内样式,咳咳,跑题了)。
  • 此外,并不是只能在head中放置style标签,可以在页面中任何一个地方使用style标签,并且浏览器也会自动解析并渲染出正确的样式(即使所指定的样式位于需要渲染的DOM节点之后),style标签默认样式display:none,且无法更改。但是!(重要的都在最后面),一般情况下应当将style标签放在头部(如果存在的话),这样的 css 文件可以先加载,避免先加载 body 内容,导致页面一开始样式错乱,然后闪烁,不但是style标签,使用link标签链接外部样式表时也应当如此对待。
  • 最后,style标签也是一个DOM元素,也可以被querySelector等方法获取到并设置innerHTML等属性(然而这个我是真没想到有什么用,毕竟动态设定style属性都已经违背了优雅降级的思想。)

4. script标签

该标签用于定义浏览器脚本程序(好吧,现在基本上也就是JS一统天下了,不过昨天还在某个网页上看见了vbscript的程序。)此外由于js是script标签type属性的默认值,因此不必显示指明type="text/javascript"。

  • 与样式表不同的是,内嵌样式与外部样式分别采用了style标签和link标签,而script标签既可以书写页面脚本,也可以引入外部脚本(设置src属性值为指定路径)。
  • 与style标签相同的是,可以在script标签中进行JS代码的书写且该段代码会被浏览器正确解析,需要注意的是由于浏览器是自上往下加载页面的,若将 javascript 文件放到 头部,如果script中的代码不处于任何任何函数中,则当浏览器加载到该程序时就会执行,意味着必须等到所有的 javascript 代码都被 下载、解析和执行完成 之后才开始呈现页面内容。这样就会造成呈现页面时出现明显的延迟,窗口一片空白;此外将JS放在头部会增加页面内容加载时间。为避免这样的问题一般将全部将 javascript 文件放到底部(所以这里强行将script标签归为头部元素有点名不副实)。
  • 为了解决上述问题,可以设置script标签的另外两个属性async和defer。
    • defer属性的作用是表明脚本在执行时不会影响页面的构造,(实质上是脚本会延迟到整个页面加载完毕后再执行,因此defer属性相当于告诉浏览器遇见脚本就按顺序下载,但是延迟执行,这里的执行时按页面中的脚本标签顺序先后执行);
    • async属性与defer类似,是告诉浏览器不必等待脚本的下载和执行,从而异步加载页面的其他内容,与defer不同的是,async无法保证数个script标签内代码的执行顺序(并不是按照页面中的脚本顺序来执行的,其顺序是不定的,因此如果使用async则需要保证各个脚本之间的不依赖性)。

5. 最后

这篇博文写了三个晚上,这实在是...最近学习效率比较低呀。整理完head标签内部常见的元素,接下来的重点是head标签中的meta标签,这是一个充满着谜团与惊喜的标签哦