重学前端 详解头部（title base link style meta script/noscript）（第三天）
文章目录
- head
-
- title
- base
- link
- style
- meta
-
- http-equiv
- name
- script
菜鸟在第一篇里面讲网页内容的时候讲过一点这个，但是现在继续看详细的，发现还是得补充。
head
< head> 元素包含了所有的头部标签元素。在 < head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: < title>, < style>, < meta>, < link>, < script>, < noscript> 和 < base>。
还有一点干货：
重学前端 h多大 / 网页内容（html，body，head）/ element.style（第一天）
title
< title> 标签定义了不同文档的标题。(及显示在浏览器最上方的窗口导航栏里面的文字，无法设置样式)
< title> 在 HTML/XHTML 文档中是必须的。< title> 标签是 < head> 标签中唯一要求包含的东西。
< title> 元素：
- 定义了浏览器工具栏的标题
- 当网页添加到收藏夹时，显示在收藏夹中的标题
- title 标签的内容会作为搜索结果的超链接上的文字显示
注释：一个 HTML 文档中不能有一个以上的 < title> 元素。(如果有多个，则第一个生效)
提示：如果您遗漏了 < title> 标签，文档作为 HTML 是无效的。（不过本地的倒是依旧可以显示）
2020/8/14补：
-
菜鸟尝试了在body里面也打入了title，但是html默认title为display:none; 将其改为display:block; 可以显示，类似于display:block; 的 span！
-
当我们为head添加 display:block; 然后为title也添加 display:block; 你会发现，head里面的title可以显示了，而且可以没有默认的8px的边距，甚至可以改变其颜色、大小…
-
如果head里面未写title，那么body里面的title会默认变为文档的标题；如果head和body都写了title，那么默认是head里面的title！
结论：
在head中，只要是闭合标签，当head设置为block后，将其也设置为block，则可以显示在页面上！而且可以改变大小、颜色… 而且依旧可以生效 ！
2021/6/9补：
base
< base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接。
大致情况大致就是这样：
<head>
<base href="http://www.runoob.com/images/" target="_blank">
head>
<body>
<img src="logo.png" width="200px" height="39px" alt="Stickman">
<a href="http://www.runoob.com">runoob.coma>
body>
这样就可以默认访问 http://www.runoob.com/images/ 下面的东西，所以你的img路径就不用写全。
然后菜鸟试了一下这个：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<base href="http://www.runoob.com" target="_blank">
head>
<body>
<img src="/images/logo.png" width="200px" height="39px" alt="Stickman">
<a href="http://www.runoob.com">runoob.coma>
<a href="">runoob.coma>
body>
html>
然后，下面一个a确实可以成功访问！
菜鸟又想了一下，发现，如果可以默认网址，那能不能默认路径？于是变成了这样：
然后代码如下：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<base href="img/" target="_blank">
head>
<body>
<img src="/images/logo.png" width="200px" height="39px" alt="Stickman">
<a href="http://www.runoob.com">runoob.coma>
<a href="">runoob.coma>
<img src="git.jpg" />
body>
html>
最下面的图片是可以访问的，第一个a还能访问，第二个a点击进去就会显示：(当然现在发布的网站一般都会限制你访问的文件)
（菜鸟感觉这个元素其实没什么太大作用，毕竟路径还是自己写，靠得住！）
link
< link> 标签定义了文档与外部资源之间的关系，通常用于链接到样式表。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
head>
注意：
一定要写 rel=”stylesheet“ ，不然样式无法生效！
一般最常用的就是stylesheet，其他的还真的没用过，也不知道干啥的！（后面菜鸟用到了一定讲，也请会的读者积极留言，我会收录上来）
7月20号补：（icon）
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="img/天1.png">
<title style="color: red;">Documenttitle>
head>
<body>
body>
html>
显示：
注意：
- 这里link无论写在title前还是后都会显示在最前面！
- 如果写了两个，那么浏览器会自动选择更小的、更适合的一个图片显示。
- 这里上面有一个sizes，确实是用来设置icon的大小的，但是暂时没有浏览器支持！
- 只能使用相对路径，不能使用绝对路径！
style
（这里只是说明style标签，并不带有css，css后面重点讲）
注意 ( 应该按规范来，这里只是尝试 ) ：
-
style不仅可以在head里面，也可以放到body里面！
-
如果style写到了body里面，那么其默认为 display:none; 如果将其改成 display:block; ，其会显示，也一样可以生效！
meta
meta标签描述了一些基本的元数据 。元数据也不显示在页面上，但会被浏览器解析。
meta 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
1、为搜索引擎定义关键词：
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
2、为网页定义描述内容：
<meta name="description" content="免费 Web & 编程 教程">
网站的描述会显示在搜索引擎的搜索的结果中
3、定义网页作者：
<meta name="author" content="Runoob">
4、刷新当前页面：
<meta http-equiv="refresh" content="30">
5、定义编码(H5新的)：
<meta charset="UTF-8">
http-equiv
使用 http-equiv 已经不是规定 HTML 文档的字符集的唯一方式：
HTML 4.01： < meta http-equiv=“content-type” content=“text/html; charset=UTF-8”>
HTML5： < meta charset=“UTF-8”> //推荐使用
name
generator表示是由什么软件生成的html，一般是由开发工具自动生成的，实际中没什么作用。
注意：如果设置了 http-equiv 属性，则不应该再设置 name 属性。
更多查看菜鸟教程【特别是底下的前人总结，最好仔细看看】：HTML < meta > 标签
script
< script>标签用于加载脚本文件，如： JavaScript。< script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。JavaScript 最常用于图片操作、表单验证以及内容动态更新。
HTML< noscript> 标签：
< noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时，才会显示 < noscript> 元素中的内容。（当然现在一般都支持，可能是害怕有人在用IE1 ？？）
< noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。(即：可以在noscript里面写p、h、div…)
（后面会重点讲，这里只说明作用）