html头部固定代码

以下是一个基本的HTML头部固定代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: #333;
            color: #fff;
            padding: 10px;
            box-sizing: border-box;
        }
        main {
            margin-top: 60px;
            padding: 10px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <header>
        <h1>页面标题</h1>
    </header>
    <main>
        <p>页面内容</p>
    </main>
</body>
</html>

在这个例子中,我们使用了CSS的position: fixed属性来固定头部。top: 0left: 0属性将头部定位在页面的左上角。width: 100%属性使头部占据整个页面的宽度。background-colorcolor属性设置了头部的背景颜色和文字颜色。padding属性设置了头部的内边距,使其与页面内容保持一定的距离。box-sizing: border-box属性确保内边距和边框不会增加元素的宽度。

在页面的主体部分,我们使用了margin-top属性来确保页面内容不会被头部遮挡。padding属性设置了页面内容的内边距,使其与页面边缘保持一定的距离。box-sizing: border-box属性确保内边距和边框不会增加元素的宽度。

在上面的代码中,我们还使用了<!DOCTYPE html>声明来指定文档类型为HTML5。<html>标签是HTML文档的根元素,它包含了整个文档的内容。<head>标签包含了文档的头部信息,如页面标题、字符集、样式表等。<meta>标签用于指定文档的字符集。<title>标签用于设置页面的标题。<style>标签用于定义文档的样式。

<body>标签中,我们将页面内容放在了<main>标签中。<header>标签用于定义页面的头部。在这个例子中,我们将页面标题放在了<header>标签中。

最后,我们将整个文档放在了<html>标签中,并使用了<body>标签来定义文档的主体部分。