head标签
<head> 标签用于定义文档的头部,它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
<head> 元素必须包含文档的标题(title),可以包含脚本、样式、meta 信息 以及其他更多的信息。
以下列出的元素能被用在 <head> 元素内部:
<title> (在头部中,这个元素是必需的)
<style>、<base>、<link>、<meta>、<script>、<noscript>
1. title标签
<title> 标签定义HTML文档的标题,通常体现了网页的主题内容,浏览器会以特殊的方式来使用标题,并且通常它显示在浏览器窗口的标题栏或状态栏上。
<html>
<head>
<title>我是标题</title>
</head>
<body>
文档内容......
</body>
</html>
2. style标签
<style> 标签包含了 HTML 文档的样式详细,在默认情况下,在该元素内写入的样式指令将被认为是CSS。
<html>
<head>
<meta charset="UTF-8">
<title>我是标题</title>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
3. base标签
<base> 标签是 HTML 语言中的基准网址标记,是一个单标签。
<base> 标签位于网页头部文件的 标签内,一个页面最多只能使用一个 base 元素,用来提供一个指定的默认目标。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool(w3cschool.cn)</title>
<base href="https://www.w3cschool.cn/statics/images/"; target="_blank">
</head>
<body>
<p><img src="logo.png" > - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签,该标签指定了页面上所有链接的默认 URL,所以该图片的访问地址为 "https://www.w3cschool.cn/statics/images/logo.png";
<p><a href="https://www.w3cschool.cn/">w3cschool.cn</a>- 注意这个链接会在新窗口打开,即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。</p>
</body>
</html>
4. link标签
<link> 标签经常用于链接 CSS 样式表
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
5. meta标签
<meta> 标签是 HTML 语言头部的一个辅助性标签,提供有关页面的元信息(比如:针对搜索引擎和更新频度的描述和关键词、定义页面使用的语言),使用好<meta> 标签对 HTML 很有益。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool(w3cschool.cn)</title>
<meta name="description" content="免费web教程">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="W3Cschool">
<meta charset="UTF-8">
</head>
<body>
<p>所有 meta 标签显示在 head 部分...</p>
</body>
</html>
6. script标签
<script> 标签通常放置在一个 HTML 网页的头部标签 <head> 标签内,用于链接外部 JavaScript 文件的外部资源标签。
<head>
<!-- 引入js和编写js -->
<script src="tmp.js"></script>
</head>
7. noscript标签
<noscript> 标签在不支持 JavaScript 的浏览器中显示替代的内容,它可以包含任何 HTML 元素。
练习
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 指定编码 -->
<meta charset="UTF-8">
<!-- title标签 -->
<!-- 在head中所写的所有标签全部都看不到,是内部的一些东西,除了一个标签就是title-->
<!--浏览器的tag标签-->
<title>我是标题</title>
<!-- style标签 css样式-->
<style></style>
<!-- link标签 引入css -->
<link rel="stylesheet" href="tmp.css">
<!-- link标签 title的图标 -->
<link rel="shortcut icon" href="tubiao.ico">
<!-- meta标签 -->
<!-- 每3秒钟刷新一次 -->
<meta http-equiv="refresh" content="3">
<!-- 3秒后跳转到指定url -->
<meta http-equiv="refresh" content="1;Url=https://www.baidu.com">
<!--关键字检索 搜索引擎如百度,可以通过搜索content查找网站 -->
<meta name="keywords" content="jamie">
<!-- 网站描述-->
<meta name="description" content="关于测试的技术博客">
<!-- ie打开时以最高的兼容模式打开 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- script标签 -->
<!-- 引入js和编写js -->
<script src="tmp.js"></script>
</head>
<body>
</body>
</html>
更改html文档后,可以通过F12界面,清空缓存并重新加载页面,比清除浏览器缓存方便。