侧边栏

head内的标签

发布于 | 分类于 前端/HTML

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

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

title标签 ​

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

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

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里面的讲解。

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属性都已经违背了优雅降级的思想。）

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则需要保证各个脚本之间的不依赖性）。

最后 ​

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

#标签

你要请我喝一杯奶茶？

版权声明：自由转载-非商用-保持署名和原文链接。

本站文章均为本人原创，参考文章我都会在文中进行声明，也请您转载时附上署名。