千家信息网

html头部需要放什么

发表于:2025-11-07 作者:千家信息网编辑
千家信息网最后更新 2025年11月07日,这篇文章主要介绍了html头部需要放什么,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。html头部需要放:1、title标签,设置文档
千家信息网最后更新 2025年11月07日html头部需要放什么

这篇文章主要介绍了html头部需要放什么,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

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

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

必要的title

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

    web

Encoding(编码方式)

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

        web

Description(网站描述)

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

Viewport

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

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

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

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

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

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

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

Favicon

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

css

通过link标签链入样式文件

javascript(重点)

通过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放在了页面底部。

async:

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

3 最好把js文件放在哪

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

感谢你能够认真阅读完这篇文章,希望小编分享的"html头部需要放什么"这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!

文件 浏览 浏览器 标签 网页 就是 底部 头部 比例 页面 属性 用户 篇文章 网站 脚本 必要 内容 大小 方式 标题 数据库的安全要保护哪些东西 数据库安全各自的含义是什么 生产安全数据库录入 数据库的安全性及管理 数据库安全策略包含哪些 海淀数据库安全审计系统 建立农村房屋安全信息数据库 易用的数据库客户端支持安全管理 连接数据库失败ssl安全错误 数据库的锁怎样保障安全 美国国家网络安全战略是多久 日服英雄联盟更新服务器不在线 服务器网页登录后连接被重置 软件开发人员 笔记本电脑 山南市网络安全进校园 大学生网络安全防范主题论文 微博桌面服务器连接失败 物联网数据库哪种好 梅特勒托利多数据库管理 40岁还能做网络安全技术 如何用云服务器搭建可视化大数据 银行卡一直显示在服务器中 数据库如何把嵌入宏出来 服务器的硬盘线 河北网络安全等级保护 惠普服务器的管理地址 数据库家庭地址允许空吗 网络安全小报边缘装饰 保卫萝卜用什么软件开发 三种服务器 常用数据库建表英文 北京惠企网络技术有限公司 网络安全的绘画作品一等奖初中 大一网络安全法黑板报 加强网络安全的手抄报 年终述职报告 软件开发 软件开发合同解除通知 dna数据库的建设及应用 弱电工程服务器哪款好 行云数据库查询表的映射关系
0