使用HTML和CSS创建基本的网页头部

翻滚的胖子
2023-06-08 10:39:51
前端技术
HTML CSS

在创建网页时，头部是一个非常重要的部分，它包含了网页的标题、样式表、脚本等信息。本文将为你介绍如何使用HTML和CSS创建基本的网页头部。

HTML头部

在HTML中，头部内容位于<head>标签中。其中，<title>标签用于定义网页的标题，它将显示在浏览器的标题栏中。例如：

<head>
    <title>这是网页的标题</title>
</head>

在头部中还可以引入样式表和脚本，它们可以分别通过<link>和<script>标签来实现。其中，<link>标签用于引入外部样式表，例如：

<link rel="stylesheet" type="text/css" href="style.css">

这里的href属性指定了样式表文件的路径，type属性指定了样式表的类型为text/css。而<script>标签则用于引入脚本文件，例如：

<script src="script.js"></script>

这里的src属性指定了脚本文件的路径。

CSS头部

在CSS中，头部内容位于<style>标签中。其中，可以定义网页的样式，例如：

body {
    background-color: #f0f0f0;
}
h1 {
    color: red;
    font-size: 24px;
}

这里的body和h1分别是选择器，用于指定样式应用的元素。而花括号内的内容则是样式定义，例如background-color用于定义背景颜色，color用于定义字体颜色，font-size用于定义字体大小。

案例演示

下面是一个简单的案例，演示如何使用HTML和CSS创建基本的网页头部：

<!DOCTYPE html>
<html>
<head>
    <title>这是网页的标题</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="script.js"></script>
    <style>
        body {
            background-color: #f0f0f0;
        }
        h1 {
            color: red;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <h2>这是一个标题</h2>
    <p>这是一个段落。</p>
</body>
</html>