HTML head标签

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界面,清空缓存并重新加载页面,比清除浏览器缓存方便。

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/jamieblue1/article/details/89246398
今日推荐