html 头部

lxf2023-03-15 17:21:01

html头部需要放:1、title标签,设置文档标题;2、多个meta标签,设置编码方式、网站描述和Viewport;3、link标签,设置网页标题的小图标和引入样式文件;4、script标签,引入脚本文件。

html 头部

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

这是我在面试时遇到的一个问题,平时习惯用插件!加Tab生成html5结构的我,除了说放css和js外竟然想不起来还要放什么,这个问题看起来很简单,却很容易被我们忽略,所以写篇文章总结一下,HTML head(头部)里面应该要放什么?

必要的title

title是必要的,但是如果没有加,浏览器也会自动帮你加上。

<head>
    <title>web</title>
</head>

Encoding(编码方式)

编码方式的规范是放在head的最前面,如果不指定,浏览器也会根据服务器的header进行判定,但是不一定准确。

<head>
    <meta charset="UTF-8">
    <title>web</title>
</head>

Description(网站描述)

之前没有注意到这个,就是对你的网站描述,搜索引擎会看到,在SEO里面应该很常用

<meta name="description" content="这里是对网站的描述">

Viewport

这个就很常见了,viewport一般是做移动端适配,将页面放在一个虚拟的窗口中-viewport中,如果网页没有用viewport就会出现我们在手机浏览器打开时很小,而且还可以移动缩放,low爆了,viewport就是让网页开发者通过其大小,动态的设置其网页内容中控件元素的大小,从而使得在浏览器上实现和web网页中相同的效果(比例缩小)。,用来更好支持响应式网站。

 <meta name="viewport" content="width=device-width, initial-scale=1">
  • width:控制viewport的大小,一般情况下指定为device-width(单位为缩放为100%的CSS像素),也可以指定一个固定的值例如600.

  • height:和width相应,指定高度。

  • initial-scal:初始缩放比例,页面第一次load的时候的缩放比例。

  • maximum-scale:允许用户缩放到的最大比例。

  • minimum-scale:允许用户缩放到的最小比例。

  • user-scalable:用户是否可以手动缩放。

Favicon

这个是网页标题左边的小图标,指定他的路径,如果没有指定,浏览器会在根目录下寻找

<link rel="icon" href="/favicon.ico" type="image/x-icon" />

css

通过link标签链入样式文件

<link rel="stylesheet" href="css/test.css">

javascript(重点)

通过script标签链入脚本文件

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

这里我们讨论几个点

1 js文件放在head里面和放在body里面的区别

首先放在head里面,script 标签如果沒加上 async属性的話,會 block 住浏览器,就是要下载完这个js文件才会进行下一步操作,如果文件很小还好,如果是比较大的,就会有阻塞的效果,影响用户体验。

浏览器解析网页时是一行行解析的,就是说解析到head里面的js文件时就会停下来,而我们的Dom结构是在head下面的body标签里面,就是说我们得等js文件下载完成才能看到body的内容,那我们选择放在body底部的话,浏览器就会优先加载dom,解析到body底部的js时才去下载,但是在下载之前我们已经能看到body的内容,浏览体验就会好一点,

那有人会问,放在body头部和底部有什么区别呢?其实放在body头部的话就和放在head里面一样的啦

2 js文件放在head里面避免弊端

有两个属性可以解决js文件同步下载的问题: defer和async

defer:

如果一个script加了defer属性,即使放在head里面,它也会在html页面解析完毕之后再去执行,也就是类似于把这个script放在了页面底部。

<script defer src="test.js"></script>

async:

对于async,这个是html5中新增的属性,它的作用是能够异步的加载和执行脚本,不因为加载脚本而阻塞页面的加载。一旦加载到就会立刻执行。有 async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。但是很有可能不是按照原本的顺序来执行的。如果js前后有依赖性,用async,就很有可能出错。

<script async src="test.js"></script>

3 最好把js文件放在哪

现在浏览器做了一些优化,即使把js放在head里面也不会有大问题,所以我们可以将必要的js放在head里面,比较大的js放在body的底部,但是最简单最好方法就是放在body底部,W3C是将js放在head里面;

推荐教程:《html视频教程》

以上就是html头部放什么东西的详细内容,更多请关注AdminJS其它相关文章!