HTML 头部

最新推荐文章于 2024-03-17 11:50:58 发布

文丑颜不良啊

最新推荐文章于 2024-03-17 11:50:58 发布

阅读量2.4k

点赞数 1

本文链接：https://blog.csdn.net/jiaomubai/article/details/126968617

版权

HTML 与 CSS 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

html 中 <head> 元素包含了所有的头部标签元素。在 <head> 元素中可以插入脚本(scripts)、样式文件(CSS)及各种 meta 信息。一般来说，可以添加在头部区域的元素标签有：<title>、<style>、<meta>、<link>、<script>、<noscript>、<base> 等。

标签	说明
<head>	定义了文档信息
<title>	定义了文档的标题
<base>	定义了页面链接标签的默认链接地址
<link>	定义了一个文档和外部资源之间的关系
<meta>	定义了 html 文档中的元数据
<script>	定义了客户端的脚本文件
<style>	定义了 html 文档的样式文件

<title> 元素

<title> 标签定义了不同文档的标题。<title> 在 HTML/XHTML 文档中是必需的。它：

定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题

<base> 元素

<base> 标签描述了基本的链接地址/链接目标，该标签作为 html 文档中所有的链接标签的默认链接，就比如说我写了多个页面，有 page1 和 page2，如果我在 <base> 标签中设置了基本的链接地址为：xxx/，那么当我在 page1 页面上想要跳转到 page2 页面时，我只需要写跳转的目标地址为 page2 即可，实际的跳转链接就为 xxx/page2。这种通常用于页面较多，且页面之间有关联的项目中。比如说某个公司开发了一款 app，那么就可以在 <base> 中设置基本链接地址为 http://www.xxx.com 之类的。

对于我本地学习的文件来说，基本地址可以设置为:：file:///D:/workspace/code/myself/jx-html/jx-html/base/，即我当前文件所在地址。示例为：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML 头部示例</title>
    <base href="file:///D:/workspace/code/myself/jx-html/jx-html/base/" target="_blank">
</head>
<body>
    <p>
        跳转到<a href="paragraph.html">段落示例</a>
    </p>
</body>
</html>

我在当前的示例文件 head.html 中跳转到段落示例(paragraph.html)页面去，设置了基本链接地址为：file:///D:/workspace/code/myself/jx-html/jx-html/base/，在 <a> 标签中设置要跳转到的页面的名称，则实际跳转时会将两个地址拼接起来跳转，又因为我在 <base> 中设置了新页面的打开方式为 "_blank"，所以段落示例的页面会在新窗口中打开。

<link> 元素

<style> 元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML 头部示例</title>
    <!-- base 标签 -->
    <!-- <base href="file:///D:/workspace/code/myself/jx-html/jx-html/base/" target="_blank"> -->

    <!-- style 标签 -->
    <style type="text/css">
        /* 设置 h1 标签的字体颜色为红色 */
        h1 {
            color:red;
        }
        /* 设置 p 标签的字体颜色为蓝色 */
        p {
            color:blue;
        }
        /* 设置 body 部分的背景色为黄色 */
        body {
            background-color:rgb(231, 231, 154);
        }
    </style>

</head>
<body>

    <!-- base 标签 -->
    <!-- <p>
        跳转到<a href="paragraph.html">段落示例</a>
    </p> -->

    <h1>style 标签示例</h1>

    <p>
        折戟沉沙铁未销，自将磨洗认前朝。
        东风不与周郎便，铜雀春深锁二乔。
    </p>

</body>
</html>

<meta> 元素

该部分内容并不在浏览器页面中直接展示。

<script> 元素

涉及代码为：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- 作者 -->
    <meta name="author" content="jx">
    <!-- 网页描述 -->
    <meta name="description" content="html 学习">
    <!-- 关键字 -->
    <meta name="keywords" content="HTML,CSS,XML,JavaScript">

    <title>HTML 头部示例</title>
    <!-- base 标签 -->
    <!-- <base href="file:///D:/workspace/code/myself/jx-html/jx-html/base/" target="_blank"> -->

    <!-- style 标签 -->
    <style type="text/css">
        /* 设置 h1 标签的字体颜色为红色 */
        h1 {
            color:red;
        }
        /* 设置 p 标签的字体颜色为蓝色 */
        p {
            color:blue;
        }
        /* 设置 body 部分的背景色为黄色 */
        body {
            background-color:rgb(231, 231, 154);
        }
    </style>

    <script>
        document.write("Hello World !")
    </script>

</head>
<body>

    <!-- base 标签 -->
    <!-- <p>
        跳转到<a href="paragraph.html">段落示例</a>
    </p> -->

    <h1>style 标签示例</h1>

    <p>
        折戟沉沙铁未销，自将磨洗认前朝。
        东风不与周郎便，铜雀春深锁二乔。
    </p>

</body>
</html>

本文参考自：HTML 头部 | 菜鸟教程