html头部需要放什么
这篇文章主要介绍了html头部需要放什么，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
html头部需要放：1、title标签，设置文档标题；2、多个meta标签，设置编码方式、网站描述和Viewport；3、link标签，设置网页标题的小图标和引入样式文件；4、script标签，引入脚本文件。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
必要的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 class="lazy" data-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 class="lazy" data-src="test.js"></script>async：
对于async，这个是html5中新增的属性，它的作用是能够异步的加载和执行脚本，不因为加载脚本而阻塞页面的加载。一旦加载到就会立刻执行。有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。但是很有可能不是按照原本的顺序来执行的。如果js前后有依赖性，用async，就很有可能出错。
<script async class="lazy" data-src="test.js"></script>3 最好把js文件放在哪
现在浏览器做了一些优化，即使把js放在head里面也不会有大问题，所以我们可以将必要的js放在head里面，比较大的js放在body的底部，但是最简单最好方法就是放在body底部，W3C是将js放在head里面；
感谢你能够认真阅读完这篇文章，希望小编分享的“html头部需要放什么”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网行业资讯频道，更多相关知识等着你来学习!
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
