右侧
当前位置:网站首页 > 前端html > 正文

html个人网站完整代码模板

作者:admin发布时间:2024-01-07分类:前端html浏览:20


导读:当创建一个个人网站时,HTML(超文本标记语言)是构建网站的基本语言之一。以下是一个简单的HTML模板,用于创建一个基本的个人网站。这个模板包括网站的基本结构,如标题、导航、主要内...

当创建一个个人网站时,HTML(超文本标记语言)是构建网站的基本语言之一。以下是一个简单的HTML模板,用于创建一个基本的个人网站。这个模板包括网站的基本结构,如标题、导航、主要内容区域和页脚。你可以根据自己的需求进行修改和扩展。

本文文章目录

<!DOCTYPE >
< lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人网站</title>
    <style>
        /* 在这里添加你的CSS样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f0f0f0;
        }
        header {
            background-color: #333;
            color: #fff;
            padding: 20px 0;
            text-align: center;
        }
        nav {
            background-color: #444;
            text-align: center;
            padding: 10px;
        }
        nav a {
            color: #fff;
            text-decoration: none;
            margin: 10px;
        }
        .container {
            max-width: 960px;
            margin: 0 auto;
            padding: 20px;
        }
        footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 10px 0;
        }
    </style>
</head>
<body>
    <header>
        <h1>欢迎来到我的个人网站</h1>
        <p>这里是我的个人信息和作品展示</p>
    </header>
    <nav>
        <a href="#">首页</a>
        <a href="#">关于我</a>
        <a href="#">作品集</a>
        <a href="#">联系我</a>
    </nav>
    <div class="container">
        <section>
            <h2>关于我</h2>
            <p>在这里写一些关于你自己的信息。</p>
        </section>
        <section>
            <h2>作品集</h2>
            <p>展示你的作品,可以包括图片、项目链接等。</p>
        </section>
        <section>
            <h2>联系我</h2>
            <p>提供联系方式,如电子邮件、社交媒体链接等。</p>
        </section>
    </div>
    <footer>
        &copy; 2023 个人网站. 版权所有.
    </footer>
</body>
</>

这个模板包括以下几个重要部分:

1. `` 声明文档类型。 2. `` 标签,包裹整个HTML文档。 3. `` 标签,包含文档的元数据,如字符集设置、视口设置和标题。 4. `` 标签,用于设置字符集和视口。 5. `` 标签,设置网站的标题,将显示在浏览器标签页上。 6. `<style>` 标签,用于在HTML中嵌入CSS样式。 7. `<body>` 标签,包含网站的可见内容。 8. `<header>` 标签,用于头部内容,包括标题和欢迎信息。 9. `<nav>` 标签,用于导航链接。 10. `<div class="container">` 标签,包含网站的主要内容。 11. `<section>` 标签,用于划分不同部分,如关于我、作品集和联系我。 12. `<footer>` 标签,包含页脚信息,如版权声明。</p><p id="总结">总结:</p><p>你可以根据自己的需求,替换文本和链接,添加更多的内容和样式,以创建适合你个人需求的网站。还可以添加JavaScript来增加交互性和功能。不过,请注意,这只是一个基本模板,你可以根据自己的技能和需求来进行扩展和改进。</p> <p>标签:<a href="http://yongchangkc.com/tags-83.html" class="mr10">网站</a><a href="http://yongchangkc.com/tags-1713.html" class="mr10">完整</a><a href="http://yongchangkc.com/tags-1155.html" class="mr10">代码</a> </p> </div> <hr class="tx-hr mb15"> <div class="info-next"> <ul class="row"> <li class="col-12 col-m-24">上一篇:<a href="http://yongchangkc.com/19227.html" title="服务器电脑配置要求">服务器电脑配置要求</a></li> <li class="col-12 col-m-24 ta-r">下一篇:<a href="http://yongchangkc.com/19229.html" title="php才是最好的语言 段子">php才是最好的语言 段子</a></li> </ul> </div> </div> <div class="tx-box mb15 pd15"> <h2 class="tx-title1 mb15"><strong>相关推荐</strong></h2> <ul class="ul-30 ul-arrow row"> <li class="col-12 col-m-24"><a href="http://yongchangkc.com/19500.html" title="永久免费的网站服务器有哪些类型" target="_blank">永久免费的网站服务器有哪些类型</a></li> <li class="col-12 col-m-24"><a href="http://yongchangkc.com/19433.html" title="写配置单的网站" target="_blank">写配置单的网站</a></li> <li class="col-12 col-m-24"><a href="http://yongchangkc.com/19372.html" title="专门diy电脑的网站有哪些" target="_blank">专门diy电脑的网站有哪些</a></li> <li class="col-12 col-m-24"><a href="http://yongchangkc.com/19370.html" title="买一个网站服务器多少钱" target="_blank">买一个网站服务器多少钱</a></li> <li class="col-12 col-m-24"><a href="http://yongchangkc.com/19354.html" title="网站服务器多少钱一年" target="_blank">网站服务器多少钱一年</a></li> <li class="col-12 col-m-24"><a href="http://yongchangkc.com/19297.html" title="电脑组装网站推荐手机" target="_blank">电脑组装网站推荐手机</a></li> <li class="col-12 col-m-24"><a href="http://yongchangkc.com/19254.html" title="html下拉菜单代码" target="_blank">html下拉菜单代码</a></li> <li class="col-12 col-m-24"><a href="http://yongchangkc.com/19246.html" title="php代码是什么" target="_blank">php代码是什么</a></li> <li class="col-12 col-m-24"><a href="http://yongchangkc.com/19215.html" title="网页特殊符号HTML代码大全" target="_blank">网页特殊符号HTML代码大全</a></li> <li class="col-12 col-m-24"><a href="http://yongchangkc.com/19202.html" title="哪里有免费的网站源码" target="_blank">哪里有免费的网站源码</a></li> </ul> </div> </div> <div class="tx-side col-7 col-m-24 col1-"> <dl> <dt>前端html排行</dt> <dd> <ul class="ul-33 ul-rank"> <li><span>1</span><a href="http://yongchangkc.com/17480.html" title="html文件怎么转换成word文件" target="_blank">html文件怎么转换成word文件</a></li> <li><span>2</span><a href="http://yongchangkc.com/18013.html" title="菜鸟工具官网网址" target="_blank">菜鸟工具官网网址</a></li> <li><span>3</span><a href="http://yongchangkc.com/17649.html" title="safari怎么打开本地网页" target="_blank">safari怎么打开本地网页</a></li> <li><span>4</span><a href="http://yongchangkc.com/17402.html" title="vue数据绑定的几种方式" target="_blank">vue数据绑定的几种方式</a></li> <li><span>5</span><a href="http://yongchangkc.com/17575.html" title="苹果手机上使用HTML编辑器" target="_blank">苹果手机上使用HTML编辑器</a></li> <li><span>6</span><a href="http://yongchangkc.com/17419.html" title="HTML 列表" target="_blank">HTML 列表</a></li> <li><span>7</span><a href="http://yongchangkc.com/17523.html" title="html 翻译" target="_blank">html 翻译</a></li> <li><span>8</span><a href="http://yongchangkc.com/18099.html" title="python免费看电影源码" target="_blank">python免费看电影源码</a></li> <li><span>9</span><a href="http://yongchangkc.com/17428.html" title="html菜鸟教程首页" target="_blank">html菜鸟教程首页</a></li> </ul> </dd> </dl> <dl class="function" id="Tblogpublished"> <dt class="function_t">随机文章</dt><dd class="function_c"> <ul><li><h4 class="title"><a href="http://yongchangkc.com/19523.html" title="发表于2024-02-18 浏览量:6">wps自动填写对应内容</a></h4></li><li><h4 class="title"><a href="http://yongchangkc.com/17212.html" title="发表于2023-10-24 浏览量:37">为什么我的表格里没有切片器</a></h4></li><li><h4 class="title"><a href="http://yongchangkc.com/17909.html" title="发表于2023-11-21 浏览量:31">定义表格的标签是什么</a></h4></li><li><h4 class="title"><a href="http://yongchangkc.com/19335.html" title="发表于2024-01-19 浏览量:7">excel排名函数怎么用</a></h4></li><li><h4 class="title"><a href="http://yongchangkc.com/19126.html" title="发表于2024-01-03 浏览量:12">java面试答不上来怎么办</a></h4></li><li><h4 class="title"><a href="http://yongchangkc.com/18892.html" title="发表于2023-12-29 浏览量:16">服务器编码一般是什么</a></h4></li><li><h4 class="title"><a href="http://yongchangkc.com/19059.html" title="发表于2024-01-01 浏览量:11">电脑配置的介绍</a></h4></li><li><h4 class="title"><a href="http://yongchangkc.com/17477.html" title="发表于2023-11-07 浏览量:44">在线转换word文档</a></h4></li><li><h4 class="title"><a href="http://yongchangkc.com/18004.html" title="发表于2023-11-25 浏览量:21">组装电脑安装系统教程</a></h4></li><li><h4 class="title"><a href="http://yongchangkc.com/16848.html" title="发表于2023-09-05 浏览量:50">服务器配置 FTP服务器软件</a></h4></li><li><h4 class="title"><a href="http://yongchangkc.com/18179.html" title="发表于2023-11-28 浏览量:25">word调格式快捷键</a></h4></li><li><h4 class="title"><a href="http://yongchangkc.com/17238.html" title="发表于2023-10-26 浏览量:52">如何在电脑上下载word文档</a></h4></li></ul> </dd> </dl> <dl class="function" id="divPrevious"> <dt class="function_t">最近发表</dt><dd class="function_c"> <ul><li><h4 class="title"><a href="http://yongchangkc.com/19611.html" title="发表于2024-03-01 浏览量:1">一页分成左右两半打印</a></h4></li><li><h4 class="title"><a href="http://yongchangkc.com/19610.html" title="发表于2024-03-01 浏览量:2">台式电脑的组装教程</a></h4></li><li><h4 class="title"><a href="http://yongchangkc.com/19609.html" title="发表于2024-03-01 浏览量:3">excel怎么一拉就求和怎么不能拉</a></h4></li><li><h4 class="title"><a href="http://yongchangkc.com/19608.html" title="发表于2024-03-01 浏览量:3">web proxy online</a></h4></li><li><h4 class="title"><a href="http://yongchangkc.com/19607.html" title="发表于2024-03-01 浏览量:4">怎么把电脑默认为wps文档</a></h4></li><li><h4 class="title"><a href="http://yongchangkc.com/19606.html" title="发表于2024-03-01 浏览量:4">1500元组装电脑配置推荐</a></h4></li><li><h4 class="title"><a href="http://yongchangkc.com/19605.html" title="发表于2024-03-01 浏览量:4">键盘怎么输入数学公式</a></h4></li><li><h4 class="title"><a href="http://yongchangkc.com/19604.html" title="发表于2024-03-01 浏览量:4">佛跳墙v2.7.9破解</a></h4></li><li><h4 class="title"><a href="http://yongchangkc.com/19603.html" title="发表于2024-02-29 浏览量:2">word表格怎么大批量排版</a></h4></li><li><h4 class="title"><a href="http://yongchangkc.com/19602.html" title="发表于2024-02-29 浏览量:4">组装电脑哪个店铺好</a></h4></li></ul> </dd> </dl> <dl class="function" id="divTags"> <dt class="function_t">标签列表</dt><dd class="function_c"> <ul><li><a title="函数" href="http://yongchangkc.com/tags-1.html">函数<span class="tag-count"> (236)</span></a></li> <li><a title="配置" href="http://yongchangkc.com/tags-4.html">配置<span class="tag-count"> (3713)</span></a></li> <li><a title="服务器" href="http://yongchangkc.com/tags-8.html">服务器<span class="tag-count"> (4752)</span></a></li> <li><a title="表格" href="http://yongchangkc.com/tags-14.html">表格<span class="tag-count"> (811)</span></a></li> <li><a title="代理服务器" href="http://yongchangkc.com/tags-21.html">代理服务器<span class="tag-count"> (283)</span></a></li> <li><a title="连接" href="http://yongchangkc.com/tags-25.html">连接<span class="tag-count"> (583)</span></a></li> <li><a title="打印" href="http://yongchangkc.com/tags-26.html">打印<span class="tag-count"> (289)</span></a></li> <li><a title="设置" href="http://yongchangkc.com/tags-55.html">设置<span class="tag-count"> (463)</span></a></li> <li><a title="页码" href="http://yongchangkc.com/tags-56.html">页码<span class="tag-count"> (231)</span></a></li> <li><a title="下载" href="http://yongchangkc.com/tags-58.html">下载<span class="tag-count"> (728)</span></a></li> <li><a title="输入" href="http://yongchangkc.com/tags-61.html">输入<span class="tag-count"> (258)</span></a></li> <li><a title="文件" href="http://yongchangkc.com/tags-62.html">文件<span class="tag-count"> (417)</span></a></li> <li><a title="软件" href="http://yongchangkc.com/tags-64.html">软件<span class="tag-count"> (278)</span></a></li> <li><a title="教程" href="http://yongchangkc.com/tags-75.html">教程<span class="tag-count"> (246)</span></a></li> <li><a title="配置文件" href="http://yongchangkc.com/tags-86.html">配置文件<span class="tag-count"> (405)</span></a></li> <li><a title="电脑" href="http://yongchangkc.com/tags-87.html">电脑<span class="tag-count"> (1006)</span></a></li> <li><a title="转换成" href="http://yongchangkc.com/tags-90.html">转换成<span class="tag-count"> (523)</span></a></li> <li><a title="电脑配置" href="http://yongchangkc.com/tags-103.html">电脑配置<span class="tag-count"> (566)</span></a></li> <li><a title="数据" href="http://yongchangkc.com/tags-107.html">数据<span class="tag-count"> (236)</span></a></li> <li><a title="文档" href="http://yongchangkc.com/tags-125.html">文档<span class="tag-count"> (581)</span></a></li> <li><a title="打开" href="http://yongchangkc.com/tags-127.html">打开<span class="tag-count"> (324)</span></a></li> <li><a title="香港" href="http://yongchangkc.com/tags-146.html">香港<span class="tag-count"> (271)</span></a></li> <li><a title="自动" href="http://yongchangkc.com/tags-179.html">自动<span class="tag-count"> (240)</span></a></li> <li><a title="数字" href="http://yongchangkc.com/tags-201.html">数字<span class="tag-count"> (325)</span></a></li> <li><a title="免费" href="http://yongchangkc.com/tags-254.html">免费<span class="tag-count"> (516)</span></a></li> </ul> </dd> </dl> <dl class="function" id="divLinkage"> <dt class="function_t">友情链接</dt><dd class="function_c"> <ul></ul> </dd> </dl> </div> </div> </div> <div class="footer tx-box ta-c f-12"> <div class="wide"> Copyright www.yongchangkc.com Some Rights Reserved. 滨州兴鼎信息科技有限公司 <a href="https://beian.miit.gov.cn" rel="nofollow">鲁ICP备2023008593号-10</a> </div> </div> <script src="http://yongchangkc.com/zb_users/theme/tx_freecms/script/txcstx.min.js?v=2023-03-31"></script> </body> </html><!--1,053.98 ms , 23 queries , 3346kb memory , 0 error-->