在学习前端过程中,对于head标签内部的内容没有进行深入的了解过,今天来总结一下。
head里可以放这些标签:
<head>元素包含了所有的头部标签元素,在head中你可以插入脚本(scripts),样式文件(CSS),及各种meta信息,可以添加到头部区域的元素为
<title> 定义网页的标题(浏览器工具栏标题,搜素引擎结果页面标题,收藏夹标题)
<meta> 用来定义页面的特殊信息(页面关键字,页面描述) ,描述了一些基本的元数据
<link> 定义了文档与外部资源之间的关系,通常用来引入外部样式(css文件)
<style>用来定义元素的css样式
<script> 用来定义页面的JavaScript 代码 也可用来引入文件
<base> 可以用来统一设置当前页面上的超链接的跳转方式 使用了 <base> 标签,则必须具备 href 属性或者 target 属性或者两个属性都具备。
<noscript>是一个相当古老的标签,其被引入的最初目的是帮助老旧浏览器的平滑升级更替,因为早期的浏览器并不能支持 JavaScript。noscript 标签在不支持JavaScript 的浏览器中显示替代的内容。这个元素可以包含任何 HTML 元素。
在平常的使用中,一般利用vscode插件自动生成html框架,因此基本很少去编写meta标签。自动生成的meta标签:
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
重点:meta标签
meta 元素往往不会引起用户的注意,但是meta对整个网页有影响,会对网页能否被搜索引擎检索,和在搜索中的排名起着关键性的作用。
<meta http-equiv=" " name=" " content=" ">
meta有个必须的属性content用于表示需要设置的项的值。
meta存在两个非必须的属性http-equiv和name, 用于表示要设置的项。
比如<meta http-equiv=”Content-Security-Policy” content=”upgrade-insecure-requests”>,设置的项是Content-Security-Policy设置的值是upgrade-insecure-requests
1. http-equiv 属性
http-equiv一般设置的都是与http请求头相关的信息,设置的值会关联到http头部。也就是说浏览器在请求服务器获取html的时候,服务器会将html中设置的meta放在响应头中返回给浏览器。常见的类型比如content-type, expires, refresh, set-cookie, window-target, charset, pragma等等。
1.1 http-equiv 属性类型:content-type
比如:<meta http-equiv=”content-type” content=”text/html charset=utf8″>可以用来声明文档类型,设置字符集,content-type几乎所有的属性都可以在meta中进行设置。这样设置浏览器的头信息就会包含:content-type: text/html charset=utf8
1.2 expires
用于设置浏览器的过期时间, 其实就是响应头中的expires属性。
<meta http-equiv="expires" content="31 Dec 2021"> expires:31 Dec 2008
1.3 refresh
该种设定表示5秒自动刷新并且跳转到指定的网页。如果不设置url的值那么浏览器则刷新本网页。<meta http-equiv="refresh" content="5 url=http://www.zhiqianduan.com">
1.4 window-target
强制页面在当前窗口以独立页面显示, 可以防止别人在框架中调用自己的页面。
<meta http-equiv="window-target" content="_top >
1.5 pragma
禁止浏览器从本地计算机的缓存中访问页面的内容
<meta http-equiv="pragma" content="no-cache">
2. name 属性
name属性主要用于描述网页,与对应的content中的内容主要是便于搜索引擎查找信息和分类信息用的, 用法与http-equiv相同,name设置属性名,content设置属性值。
1. author
author用来标注网页的作者<meta name="author" content="aaa@mail.abc.com">
2. description
description用来告诉搜素引擎当前网页的主要内容,是关于网站的一段描述信息。<meta name="description" content="这是我的HTML">
3. keywords
keywords设置网页的关键字,来告诉浏览器关键字是什么。是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时,会用这些关键字对文档进行分类。<meta name="keywords" content="Hello world">
4. generator
表示当前html是用什么工具编写生成的,并没有实际作用,一般是编辑器自动创建的。<meta name="generator" content="vscode">
5. revised
指定页面的最新版本<meta name="revised" content="V2,2015/10/1">
6. robots
告诉搜索引擎机器人抓取哪些页面,all / none / index / noindex / follow / nofollow。<meta name="robots" content="all">
all:文件将被检索,且页面上的链接可以被查询;none:文件将不被检索,且页面上的链接不可以被查询;index:文件将被检索;follow:页面上的链接可以被查询;noindex:文件将不被检索,但页面上的链接可以被查询;nofollow:文件将不被检索,页面上的链接可以被查询。
3. scheme 属性
scheme 属性用于指定要用来翻译属性值的方案。此方案应该在由 head 标签的 profile 属性指定的概况文件中进行了定义。html5不支持该属性。
5. base 标签
base标签定义了文档的基础url地址,在文档中所有的相对地址形式的url都是相对于这里定义的url而言的。为页面上的链接规定默认地址或目标。
base标签包含的属性。
1. href
href是必选属性,指定了文档的基础url地址。例如,如果希望将文档的基础URL定义为https://www.abc.com,则可以使用如下语句:<base href=”http://www.abc.com”>如果文档的超链接指向welcom.html,则它实际上指向的是如下url地址:https://www.abc.com/welocme.html。
2. target
定义了当文档中的链接点击后的打开方式_blank,_self,_parrent,_top。
6. link 标签
link用于引入外部样式表,在html的头部可以包含任意数量的link,link标签有以下常用属性。<link type="text/css" rel="stylesheet" href="github-markdown.css">
1. type
定义包含的文档类型,例如text/css
2. rel
定义html文档和所要包含资源之间的链接关系,可能的值有很多,最为常用的是stylesheet,用于包含一个固定首选样式的表单。
3. href
表示指向被包含资源的url地址
7. style 标签
编写内部样式表的标签。<style>
body {
background: #f3f5f9;
}
</style>
8. script 标签
加载javascript脚本的标签。加载的脚本会被默认执行。默认情况下当浏览器解析到script标签的时候会停止html的解析而开始加载script代码并且执行。<script src="script.js"></script>
1. type
指示脚本的MIME类型。<script type="text/javascript">
2. async
规定异步执行脚本,仅适用于通过src引入的外部脚本。设置的async属性的script加载不会影响后面html的解析,加载是与文档解析同时发生的。加载完成后立即执行。执行过程会停止html文档解析。<script async src="script.js"></script>
3. charset
规定在外部脚本文件中使用的字符编码。<script type="text/javascript" src="script.js" charset="UTF-8"></script>
4. defer
规定是否对脚本执行进行延迟,直到页面加载为止。设置了defer属性的script不会阻止后面html的解析,加载与解析是共同进行的,但是script的执行要在所有元素解析完成之后,DOMContentLoaded事件触发之前完成。<script defer src="script.js"></script>
5. language
规定脚本语言,与“type“`功能类似,不建议使用该字段。
6. src
外部脚本的地址。<script src="script.js"></script>
9. bgsound
网站背景音乐。<bgsound src="music.mp4" autostart="true" loop="5">
1. src
表示背景音乐的url值。
2. autostart
是否自动播放ture自动播放,false不播放,默认为false。
3. loop
是否重复播放,值为数字或者infinite,表示重复具体次或无限次。