HTML 头部

前言

标签 描述 备注 🔗
<head> </head> 定义头部 🔗
  • <head> 元素包含了所有的头部标签元素。

  • <head> 元素中你可以插入脚本(scripts), 样式文件(CSS),及各种 meta 信息。

  • 可以添加在头部区域的元素标签为: <title>, <link>, <base>, <meta>, <style>, <script>, <noscript>

1、实例

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!DOCTYPE html>

    <html>

    <head>
    <link rel="shortcut icon" href="https://www.qianchia.com/logo.png" />
    <title>Qian Chia 工作室</title>
    </head>

    </html>
  • 效果

2、头部元素

标签 描述 备注 🔗
<title> </title> 定义文档的标题 🔗
<link /> 定义文档与外部资源的关系 🔗
<base /> 定义页面中所有链接的默认地址或默认目标 🔗
<meta /> 定义 HTML 文档中的元数据,描述 HTML 文档的描述,关键词,作者,字符集等 🔗
<style> </style> 定义 HTML 文档的样式文件 🔗
<script> </script> 定义 HTML 客户端的脚本文件 🔗

3、属性

属性 描述 备注 🔗
profile URL HTML5 不支持。规定文档 URL 的一系列规则。这些规则能被浏览器识别并且准确读取 <meta> 标签的内容属性中的信息

4、< title > 元素

  • <title> 标签定义了不同文档的标题。

  • <title> 在 HTML/XHTML 文档中是必须的。

  • <title> 元素:

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!DOCTYPE html>

    <html>

    <head>
    <meta charset="utf-8" />
    <title>文档标题</title>
    </head>
    <body>
    文档内容......
    </body>

    </html>
  • 效果

5、< link > 元素

  • <link> 标签定义了文档与外部资源之间的关系

  • <link> 标签通常用于链接到样式表

  • 实例

    1
    2
    3
    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css" />
    </head>

6、< base > 元素

  • <base> 标签描述了基本的链接地址/链接目标,该标签作为 HTML 文档中所有的链接标签的默认链接

  • 实例

    1
    2
    3
    <head>
    <base href="https://www.qianchia.com/" target="_blank" />
    </head>

7、< meta > 元素

  • <meta> 标签描述了一些基本的元数据

  • <meta> 标签提供了元数据,元数据也不显示在页面上,但会被浏览器解析

  • <meta> 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据

  • 元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 Web 服务

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <head>
    <!-- 定义文档字符集 -->
    <meta charset="utf-8" />

    <!-- 为搜索引擎定义关键词 -->
    <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />

    <!-- 为网页定义描述内容 -->
    <meta name="description" content="Qian Chia 工作室" />

    <!-- 定义网页作者 -->
    <meta name="author" content="Qian Chia" />

    <!-- 每 30 秒钟刷新当前页面 -->
    <meta http-equiv="refresh" content="30" />

    </head>

8、< style > 元素

  • <style> 标签定义了 HTML 文档的样式文件引用地址

  • <style> 元素中你也可以直接添加样式来渲染 HTML 文档

  • 实例

    1
    2
    3
    4
    5
    6
    <head>
    <style type="text/css">
    body {background-color: yellow}
    p {color: blue}
    </style>
    </head>

9、< script > 元素

  • <script> 标签用于加载脚本文件,如:JavaScript

  • 实例

    1
    2
    3
    4
    5
    <head>
    <script>
    document.write("Hello World!")
    </script>
    </head>

10、HTML 实例

文章目录
  1. 1. 前言
  2. 2. 1、实例
  3. 3. 2、头部元素
  4. 4. 3、属性
  5. 5. 4、< title > 元素
  6. 6. 5、< link > 元素
  7. 7. 6、< base > 元素
  8. 8. 7、< meta > 元素
  9. 9. 8、< style > 元素
  10. 10. 9、< script > 元素
  11. 11. 10、HTML 实例
隐藏目录