跳到主要内容

HTML 头部元素

<head> 为定义页面头部的元素。它可以包含以下子元素：

  • <title>
  • <meta>
  • <link>
  • <style>
  • <script>
  • <base>

<head> 元素​

该元素定义了页面相关的配置信息（元数据），包括页面的标题，引用的页面样式和脚本等。

元数据不会显示在页面中。head 元素与body元素相邻，并且在body前面，它们的父元素都是是html元素。

<!DOCTYPE html>
<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        <p>页面内容</p>
    </body>
</html>

<title> 元素​

该元素定义页面的标题，标题必须是纯文本的。它会显示在选项卡的标题栏中。

标题元素在页面中是必需的，页面标题的内容对搜索引擎优化非常重要。

<!DOCTYPE html>
<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        <p>页面内容</p>
    </body>
</html>

该元素定义页面与外部资源之间的关系。

<!DOCTYPE html>
<html>
    <head>
        <title>页面标题</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <p>页面内容</p>
    </body>
</html>

<meta> 元素​

通常使用该元素指定字符集、页面描述、关键字、页面作者和视窗设置。

<!DOCTYPE html>
<html>
    <head>
        <title>页面标题</title>
        <!--定义字符集-->
        <meta charset="UTF-8">

        <!--定义关键字-->
        <meta name="keywords" content="HTML, CSS, JavaScript">

        <!--定义网页描述-->
        <meta name="description" content="免费教程网站">

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

        <!--每隔10秒刷新页面-->
        <meta http-equiv="refresh" content="10">

        <!--设置视窗以使网站在所有设备上看起来都不错-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <p>页面内容</p>
    </body>
</html>
设置视窗

视窗是用户在网页上的可见区域，这个设置在小屏幕的移动设备上尤为重要。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • width=device-width 设置页面的宽度为设备的屏幕宽度
  • initial-scale=1.0 设置页面的初始缩放级别

<style> 元素​

该元素用于定义单个页面的样式。

<!DOCTYPE html>
<html>
    <head>
        <title>页面标题</title>
        <style>
            body {background-color: blue;}
            h1 {color: black;}
            div {color: white;}
        </style>
    </head>
    <body>
        <p>页面内容</p>
    </body>
</html>

<script> 元素​

该元素用于定义页面的 JavaScript 代码。

<!DOCTYPE html>
<html>
    <head>
        <title>页面标题</title>
        <script>
            function sayHello() {
                document.querySelector("body").innerHTML = "Hello World!";
            }
        </script>
    </head>
    <body>
        <p>页面内容</p>
    </body>
</html>

<base> 元素​

指定用于一个页面中包含的所有相对路径的根URL。一个页面只能有一个<base> 元素。

<!DOCTYPE html>
<html>
    <head>
        <title>页面标题</title>
        <base href="https://www.rucoding.com/" target="_blank">
    </head>
    <body>
        <p>页面内容</p>
        <img src="img/logo.svg" alt="logo">
        <a href="learn/html/base/favicon">HTML 图标</a>
    </body>
</html>

HTML 参考​

名称描述

CSS 参考​

名称描述