在利用VScode编写代码时,我们利用VScode的!键自动生成头部代码时,会自动生成以下内容
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Html</title> </head>
对于<head>中的内容又有什么意义,<head> 标签用于定义文档的头部,头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。在<head>标签中,我们可以使用如下标签,<meta>元信息标签,<title>用于定义网页标题,<rel>用于定义网页的引用内容,如样式表,图标等,<script>定义网页引用的脚本或者我们可以直接在其中编写脚本,但最好不要头部中编写脚本,因为这会导致浏览器加载效率,最好将脚本放置在页面尾部。<style>标签用于定义网页的样式表。
接下来我们讲述<meta>标签的作用。<meta>标签主要用来描述网页的相关信息。
<meta>标签主要有有三个属性,charset,name,http-equiv。
charset用来定义此网页是采用什么编码方式,我们常用UTF-8的编码方式
name则主要用来描述网页的内容信息,如author,keywords,description等。name采用名值对方式,name中的为属性名,content中的则是具体的值。例如
<meta name="keywords" content="计算机,前端,head标签">
利用name,我们可以定义我们自己想用来描述这个页面的有关信息。
http-equiv则主要用来向浏览器传输一些有关网页的信息,用来精确的显示网页信息
它采用和name一样采用名值对方式,可用来重刷新页面并重指向页面以及制定是否使用cookie等。例如,页面添加以下语句,将在三秒后刷新,并重定位到百度页面
<meta http-equiv="refresh" content="3; url=http://www.baidu.com">
VScode的自动生成代码中的X-UA-Compatible则是微软IE8的专有属性,它告诉IE8采用何种浏览器的方式去渲染页面。
<title>标签则用于定义网页的标题
<link>标签用于定义外部资源与文档的关系,其中rel定义与文档的关系,href定义内容地址,type定义资源类型
例:添加外部样式表
<link rel="stylesheet" href="CSS\index.css">
例:添加网页自定义图标
<link rel="shortcut icon" href="images\favicon.ico" type="image/x-icon">
以上就是head标签中部分常用标签的介绍,具体meta标签和link标签的具体值使用情况,可参考以下两位大神文章。
meta标签:http://www.divcss5.com/html/h50455.shtml
link标签:https://blog.csdn.net/lengye7/article/details/86763608
原文地址:https://www.cnblogs.com/ffyd-0511/p/11159281.html