如何使用HTML制作个人网站(如何搭建个人博客)

🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码:【🔰 echarts大屏展示大数据平台可视化(150套) 】
🎁 免费且实用的WEB前端学习指南: 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 💬历任研发工程师,技术组长,教学总监;曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰,难凉热血;多年过去,历经变迁,物是人非。 然而,对于技术的探索和追求从未停歇。 💪坚持原创,热衷分享,初心未改,继往开来!



一、👨‍🎓网站题目

👩‍🔬个人博客网站、👨‍🔬个人主页介绍、个人简介、个人博客设计制作 、等网站的设计与制作。


二、✍️网站描述

🏷️ 大学生个人HTML网页设计作品,采用DIV CSS布局制作,页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。页面精美包含多个排版布局,学生网页作业水平制作。

🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)

  1. 页面分为页头、菜单导航栏(最好可下拉)、中间内容板块、页脚四大部分。
  2. 所有页面相互超链接,可到三级页面,有5-10个页面组成。
  3. 页面样式风格统一布局显示正常,不错乱,使用Div+Css技术。
  4. 菜单美观、醒目,二级菜单可正常弹出与跳转。
  5. 要有JS特效,如定时切换和手动切换图片轮播。
  6. 页面中有多媒体元素,如gif、视频、音乐,表单技术的使用。
  7. 页面清爽、美观、大方,不雷同。 。
  8. 不仅要能够把用户要求的内容呈现出来,还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、📚网站介绍

📔网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面:计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器,已达到打开后就能即时看到网站的效果。

📘网站素材方面:计划收集各大平台好看的图片素材,并精挑细选适合网页风格的图片,然后使用PS做出适合网页尺寸的图片。

📒网站文件方面:网站系统文件种类包含:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;

📙网页编辑方面:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。
其中:
(1)📜html文件包含:其中index.html是首页、其他html为二级页面;
(2)📑 css文件包含:css全部页面样式,文字滚动, 图片放大等;
(3)📄 js文件包含:js实现动态轮播特效, 表单提交, 点击事件等等(个别网页中运用到js代码)。


四、🌐网站演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


五、⚙️ 网站代码

🧱HTML结构代码


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link type="text/css" rel="stylesheet" href="css/css.css">
    <title>主页</title>
</head>

<body>
    <div class="wrapin">
        <div class="top">
            <div class="tx"><img src="picture/tx.jpg"></div>
            <font color="white">
                <p class="Name">ReggaeShark</p>
                <div class="autograph">**</div>
        </font></div>
        <div class="menu"> <a href="">首页</a><a href=</
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
简介 Symphony([ˈsɪmfəni],n.交响乐)是一个现代化的社区平台,因为它: 实现了面向内容讨论的论坛 包含了面向用户分享、交友、游戏的社交网络 集成了聚合独立博客的能力,共建共享优质资源 并且 100% 开源 欢迎到 Sym 官方讨论区了解更多。另外,如果你需要搭建一个企业内网论坛,请使用 SymX。 动机 Sym 的诞生是有如下几点原因: (正版) 很多系统界面上仍然保持着老式风格,远远没有跟上时代发展的脚步,它们没有创新、好玩的特性,缺少现代化的交互元素和用户体验 大部分系统是从程序员的角度进行设计的,没有考虑实际的产品、运营需求,这类系统功能过于简陋、细节不够精致、缺乏长期维护 另外,我们正在探索新的社区模式,实现独奏(Solo)与协奏(Symphony)相结合的社区新体验 (野版) 万能的 GitHub 上连个能用的 Java 社区系统都找不到,Sym 填补了这个宇宙级空白 做最 NB 的开源社区系统,预计几年以后 82% 的社区都将是 Sym 搭建的 作者技痒,炫技之作,Ruby/Python/Node.js/(特别是)PHP 怎么能比得过 Java 案例 个人维护: 黑客派 宽客网 贵州IT 超级产品经理 Titandb 学习主站 呆萌狮 - Demo's 公司维护: 四方环视 如果你也搭建好了,欢迎通过 Pull Request 将你的站点加到这个列表中 :-p 功能特性 具体功能点细节可浏览 Sym 功能点脑图,下面列出了 Sym 的主要特性,说明 现代化 的由来。 好用的编辑器 Markdown:支持 GFM 语法以及一些扩展语法 格式调整:粗体、斜体、超链接、引用、列表等可以通过工具栏按钮,同时也支持快捷键 文件上传:支持复制粘贴或者拖拽上传图片;支持上传普通文件;对 MP3 会使用在线播放器进行渲染 剪贴板处理:自动将复制的内容转换为 Markdown 格式;外链的图片自动上传站内 @用户:根据用户名自动补全,支持快捷键 Emoji:支持大部分主流 Emoji 表情,快捷键自动补全 数学公式:支持 LaTex 数学公式渲染 数据暂存:支持本地浏览器暂存数据,避免意外情况导致编辑内容丢失 智能、灵活的信息架构 传统的节点式社区要求帖子必须 分类 到某一个节点下,信息架构方式属于自上而下。Sym 不是自上而下的节点式信息架构,帖子不需要固定分类,通过标签 聚合 到某个领域下。 标签:根据帖子内容智能抽取关键字进行标签自动补全,一篇帖子关联多个标签。标签和标签之间以带边权重的图结构进行描述,方便进行相关计算 领域:一个领域下包含了多个标签,通过标签将帖子自动聚合到具体领域,随时可以通过增减关联标签从而达到调整领域范围,最终聚合出适合的帖子列表 满足多样化的发帖需求 目前支持 4 中帖子类型,满足不同用户的偏好: 普通帖子:提问或分享对别人有帮助的经验与见解 思绪:写作过程的记录与重放,文字版的沙画表演 (?) 小黑屋:邀请好友在私密空间中进行交流 同城广播:发起你所在城市的招聘、Meetup 等 另外,所有帖子都可以设置 打赏区 ,打赏区可以放置一些“珍藏”内容,只有打赏后的用户才能浏览。打赏区编辑器同样支持 Markdown、Emoji 和文件上传等特性。打赏区支持内容更新,并可以随时调整打赏积分值。 对于测试帖,可以使用 Sandbox 机制:带有 Sandbox 标签的帖子将视为测试帖,不会显示在首页或是某领域内,只会展现在发帖者自己的帖子列表中。 人性化的回帖交互 实时呈现:回帖提交后其他浏览者可以不刷新页面就实时看到你的回帖 随时滚动:浮出式回帖编辑器方便回帖者随时滚动屏幕查看其他内容,不必担心焦点丢失 真正的回复:回复是针对回帖而言的,而 @ 是针对用户而言的,@ 是提及不是回复,很多系统都没有考虑到这一点。回复/引用可以在当前位置进行展开浏览,也可以跳转到回帖处,并支持跨分页跳转 智能机器人:回帖时可以让机器人也参与到讨论中来,活跃气氛的同时说不定机器人真的能解决一些问题呢 用户个性化设置 用户可以自己设置很多参数以满足个性化需求: 帖子列表浏览分页每页条目数 回帖浏览模式:传统(按发布时间升序,无实时推送刷新);实时(按发布时间降序,实时推送新回帖) 头像浏览模式:原图(支持 gif 动图);静态图 Chrome 通知/邮件订阅/键盘快捷键开关 设置常用 Emoji,方便发布内容时快速插入表情 除了功能个性化配置项,还有很多隐私项开关: 是否公开帖子/回帖列表 是否公开
SupeV是我们开发的一套视频播客系统,基本上囊括了现阶段主流视频网站所拥有的全部功能,如视频的上传、播放、分享等应用,此外还包括用户的博客空间、个人专辑、最新最热关注等增加用户体验的细节功能。此外,SupeV还采用了独特的站外引用机制、高性能模板机制、搜索引擎完美收录技术、AJAX技术等。 SupeV为站长提供视频软件系统,而且还免费提供高带宽和无限的存储空间,将视频资源的维护成本降低到零,让视频网站不再仅仅是巨头们的特权。现在,站长仅需一个虚拟主机空间,即使不懂技术也能搭建、配置、管理和维护自己的视频网站,就像泡杯茶一样简单。 SupeV可以通过UCenter(用户中心)与Discuz!论坛、SupeSite、X-Space、ECShop 等产品进行无缝整合,实现各子站点的同时登录、同时退出。对于站长来说,SupeV将获得Comsenz系列产品的运作支持,实现无限扩展,长期发展后顾无忧。  功能列表: 站长仅需虚拟主机空间,就可以架设自己的视频网站。 与Discuz!论坛,SupeSite/X-Space 等产品无缝整合用户系统(UCenter),实现各子站点的同时登录同时退出,未来还支持ECShop等。 提供简体,不久还会随(UCenter)支持繁体、UTF-8简体、UTF-8繁体共四种语言版本,方便不同地区用户使用。 无论是播放器水印、站外引用的Logo,还是播放器的内外链接,都与站长域名一致。 独特的站外引用机制,不但可以在站外展示视频,同时可以统计出被多少地址引用,站外播放的次数,使站长和用户对于自己视频的价值有更好的评估。 通过系统内置或站长自定义的计划任务功能,实现对防作弊缓存、我看过的视频、空间脚印、热门tag、SEO信息的定期更新。 实现了用户注册的奖励机制,在奖励期间用户注册可以成为高级会员,奖励期满,按积分、注册天数、视频数、重新计算用户组。 用户积分机制,方便站长鼓励用户发布视频,并通过通过设置用户组的积分、发视频数、注册天数实现用户组的晋升,从而取得更多的权限。 为加快网站页面加载速度、保证页面无死图、搜索引擎友好度,所有视频缩图均保存到站长本地空间。 全面使用AJAX技术,在个人空间、个人后台、视频播放等多个细小环节上,方便用户浏览、使用。 用户状态保活机制,能在播放视频以及上传视频时保证您的用户不掉线。 支持数据库、文件、eAccelerator 等三种缓存模式,可以方便任意切换。 高性能模板机制,无论是小型还是大型站点都能体现出它速度快、易定制的优点,同时比传统模板机制更节省I/O请求。使同等规模站点能更少的消耗服务器资源。 强化的编码转换,能完全兼容GBK下繁体中文到UTF-8的转换。 通过开启伪静态功能,使网站主要页面变成html后缀,增强搜索引擎收入效果。 支持google Sitemap 功能,增强搜索引擎收入效果。 全国首个支持百度视频协议的视频系统,增强搜索引擎收入效果。 可以方便联播专辑、点播单、我看过的视频,并自由控制播放列表。 可以方便的控制专辑以及频道的缩略图。 可以针对视频、专辑、用户发表评论。 可以任意更改视频空间名称、修改个人头像以及资料。 增加FLASH头像功能,方便用户任意裁剪喜欢的头像。 根据网站人气,定时更新网站热门TAG,方便用户了解站内热门视频。 用户有自己的视频空间,展示我的视频、我的好友、关注我的人以及我的订阅、我的收藏等等。 通过保留用户组方便控制用户是否需要验证以及禁止访问。 通过设置用户组的积分、发视频数、注册天数实现用户组的晋升。 模块管理机制,方便的生成首页模块模板,只要正确的替换默认模板中的生成代码,既可实现若干新组合。 提供两种专辑排序功能,方便用户对视频较多的专辑进行整理。 在视频播放期间,可以收藏视频或者添加到自己的专辑中,并对视频做评论、评分,以及把视频顶起。被顶起的视频更有机会得到更多人的观看。 好友和订阅机制,加上与Discuz!以及X-Space整合的短信息功能。方便与好友沟通。 专门而独立的TAG页面,在任何页面看到的TAG都能查看同TAG的视频列表。 清晰、简单、明了的后台审核机制,使审核不再是一件流程繁琐、麻烦的事。 方便的主题管理功能,可实现压缩包上传下载,方便模板爱好者,制作自己的风格模板。 可以对用户搜索实现搜索频率、最大同时搜索数量、最大搜索天数、结果页数等进行控制。 强大的验证码机制、可实现动态GIF、Flash、中文等验证码机制,在未来版本中还有更多技术提升的空间。 设置禁止发视频、强制审核时间段等。 方便的时区、时间设置。 提供后台 视频、专辑、评论、TAG、公告、碎片、分类、联盟站点等多种内容设置。 特别提供了后台帮助的管理功能,可以更容易的修改帮助方便用户使用。 后台界面、搜索、操作等在用户体验上的一致统一,无需额外学习成本。 后台碎片功能,可以实现站长对信息的内部分类,通过模块功能,将首页信息按块分的更细腻。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值