简单个人博客HTML5页面制作资源-CSDN下载

共111个文件

jpg：72个

png：22个

css：12个

html

博客

5星 · 超过95%的资源需积分: 50 183 浏览量 2012-12-17 20:43:54 上传评论 2 收藏 16.7MB ZIP 举报

【个人博客页面】是一个基于HTML构建的简单网页设计，它主要展示了如何利用HTML5的特性来创建一个功能齐全且用户友好的在线日记或思想分享空间。在这个项目中，我们可以看到HTML的力量，它作为网页结构的基础，使内容组织有序，便于理解和检索。 HTML5是HTML的最新版本，引入了许多新特性，提高了网页的互动性和可访问性。在个人博客页面中，可能运用了以下HTML5元素和功能： 1. **语义化标签**：HTML5引入了如<header>、<nav>、<section>、<article>、<aside>和<footer>等语义化标签，这些标签帮助搜索引擎更好地理解网页内容，同时也提高了页面的可读性。例如，<header>可能用于包含博客的标题和导航链接，<article>则用于封装每篇博客文章。 2. **多媒体支持**：HTML5的<video>和<audio>元素允许直接在网页中嵌入视频和音频内容，无需依赖Flash或其他第三方插件。博主可以轻松地分享音频记录或者视频讲解。 3. **表单控件**：HTML5改进了表单处理，提供了新的输入类型（如date、email、url等），以及placeholder属性，使得用户界面更加友好，增强了数据验证功能。 4. **离线存储**：通过HTML5的离线存储技术（如Application Cache），博客页面可以在用户离线时仍然可以访问，提高用户体验。 5. **响应式设计**：使用HTML5的媒体查询（@media）和弹性布局（Flexbox或Grid）技术，可以实现跨设备兼容，确保博客在不同屏幕尺寸的设备上都能良好显示。 6. **Web Workers**：此功能允许在后台运行脚本，提高网页的性能，比如在加载长篇博客文章或处理大量数据时，不会阻塞用户的交互。 7. **Canvas和SVG**：这两个元素为动态图形和矢量图提供了支持，博主可以通过它们创作出独特的视觉效果或图表。在【压缩包子文件的文件名称列表】中提到的"个人博客页面"很可能包含了所有这些HTML5元素的实现代码。通过查看源代码，我们可以深入学习每个元素的用法，理解如何将它们结合在一起创建一个功能完善的个人博客。这个实例是一个很好的学习资源，可以帮助初学者或开发者了解如何利用HTML5创建现代网页。同时，它也提醒我们，尽管HTML看起来简单，但其强大的功能足以构建出复杂而优雅的网络应用。

资源推荐

资源详情

资源评论

收起资源包目录

个人博客页面（111个子文件）

frame.css 10KB

home.css 5KB

all_1.css 3KB

templatemo_style.css 2KB

mystyle.css 452B

ziliao.css 114B

ziliao.css 41B

HOME.html 34KB

ziliao.html 21KB

ziliao - 副本.html 18KB

37.jpg 256KB

right_p1.jpg 219KB

left_bg4.jpg 165KB

zhoumo.jpg 74KB

templatemo_top_bg.jpg 56KB

36.jpg 55KB

03.jpg 38KB

02.jpg 32KB

templatemo_logo.jpg 29KB

left_bg.jpg 29KB

templatemo_bottom_panel_bg.jpg 27KB

04.jpg 27KB

templatemo_image_01.jpg 22KB

right_bg.jpg 20KB

01.jpg 20KB

left_header.jpg 17KB

templatemo_image_02.jpg 8KB

f12.jpg 6KB

f3.jpg 6KB

f11.jpg 6KB

f7.jpg 6KB

f4.jpg 6KB

f8.jpg 6KB

f1.jpg 6KB

left_p1.jpg 5KB

f10.jpg 5KB

f9.jpg 5KB

templatemo_menu_bg.jpg 5KB

f5.jpg 5KB

f6.jpg 4KB

templatemo_comment_icon.jpg 4KB

templatmeo_column_two_bg.jpg 4KB

templatemo_ads.jpg 2KB

templatemo_180_column_bg.jpg 2KB

f2.jpg 2KB

templatemo_menu_bg_repeat.jpg 329B

李琛 - 有谁能够爱你超过我.mp3 6.53MB

hudie.png 202KB

QQ截图20121206143857.png 172KB

jiaoluo.png 153KB

left_bg2.png 129KB

jiao.png 121KB

touxiang.png 53KB

共 111 条

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <link href="css/all_1.css" rel="stylesheet" type="text/css" /> <link href="css/frame.css" rel="stylesheet" type="text/css" /> <link href="css/home.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="templatemo_header_panel"> <div id="templatemo_header_section"> <div id="templatemo_title_section"><span class="s1">R荒</span><span>的念土</span><a href="http://blog.sina.com.cn/u/1772212975 ">  [编辑]</a></div> <div class="url"> <a href="http://blog.sina.com.cn/u/1772212975 ">http://blog.sina.com.cn/u/1772212975 </a> <a href="http://blog.sina.com.cn/u/1772212975 ">订阅</a> <a href="http://blog.sina.com.cn/u/1772212975 ">手机阅读 </a> </div> <div class="audio"> <audio id="audio" src="音乐/李琛 - 有谁能够爱你超过我.mp3" controls="controls" autoplay="autoplay" loop="loop" > </audio><br /> <select> <option>有谁能够爱你超过我</option> <option>流年</option> <option>爱情转移</option> <option>一路上有你</option> <option>若不是因为你</option> </select> </div> </div> </div>  <div id="templatemo_menu_panel"> <div id="templatemo_menu_section"> <ul> <li><a href="HOME.html" class="current">首页</a></li> <li><a href="#">博文目录</a></li> <li><a href="#">图片</a></li> <li><a href="#">视频</a></li> <li><a href="#">音乐</a></li> <li><a href="#">我们的故事</a></li> <li><a href="#" class="last">有关于我</a></li> </ul> </div> </div>  <div id=content_all> <div id="head"> <marquee behavior=scroll align="middle" direction="down" scrollamount=20>也许你不会相信，某年某月的某一天，我对你的思念有多长</marquee> <marquee behavior=scroll align="middle" direction="down" scrollamount=100>这世上除了你还有谁会这样懂我</marquee> <marquee behavior=scroll align="middle" direction="down" scrollamount=60>想你，念你!@$#%^*)(_+*-+/~~~~~----还是想你念你-______</marquee> <marquee behavior=scroll align="middle" direction="down" scrollamount=10>....对不起，那天不该对你发脾气的。。</marquee> <marquee behavior=scroll align="middle" direction="down" scrollamount=50>雨，一连好几天的雨，让我对你的思念更加凝重了</marquee> <marquee behavior=scroll align="middle" direction="down" scrollamount=20>我们在也不去那家云南面馆吃了，难吃死了</marquee> <marquee behavior=scroll align="middle" direction="down" scrollamount=2>要用多久才能再次拥抱你，我的温柔乡</marquee> </div> <div id="content" align="center" class="container_16" > <div id="left" class="grid_4"> <div id="left_top"> <div class="left_header"> <p class="header1">个人资料</p> </div> <div class="left_p2"> <img class="left_head" src="images/touxiang.png" /> </div> <div class="left_word2"> <p class="word2"><a href="ziliao.html" >R荒的念土</a></p> </div> <div class="left_p3"> <table width="160"> <td class="td1"><a href="#">进入空间</a></td> <td class="td2"><a href="#">进入微博</a></td> </table> </div> <hr class="hr1" /> <div class="left_p4"> <table> <tr> <td><a href="#">加为好友</a></td> <td class="td2"><a href="#">留纸条</a></td> </tr> <tr> <td><a href="#">说悄悄话</a></td> <td class="td2"><a href="#">加关注</a></td> </tr> </table> </div> <hr class="hr2" /> <div class="left_word3"> <ul> <li>博客等级：<span>10</span></li> <li>博客积分：<span>1000</span></li> <li>访问量：<span>2220</span></li> <li>关注人气： <span>220</span></li> </ul> </div> </div>  <div id="left_middle"> <div class="left_header"> <p class="header2">最近访客</p> </div> <div class="visitor"> <table> <tr class="tr1"> <td><a href="#"><img src="images/f1.jpg" /></a></td> <td><a href="#"><img src="images/f2.jpg" /></a></td> <td><a href="#"><img src="images/f3.jpg" /></a></td> </tr> <tr class="tr2"> <td><a href="#">飘然</a></td> <td><a href="#">梦想天空</a></td> <td><a href="#">小石子</a></td> </tr> <tr class="tr3"> <td>刚刚</td> <td>1小时前</td> <td>2小时前</td> </tr> </table> <table> <tr class="tr1"> <td><a href="#"><img src="images/f4.jpg" /></a></td> <td><a href="#"><img src="images/f5.jpg" /></a></td> <td><a href="#"><img src="images/f6.jpg" /></a></td> </tr> <tr class="tr2"> <td><a href="#">越寒</a></td> <td><a href="#">@%凌%@</a></td> <td><a href="#">啊!!</a></td> </tr> <tr class="tr3"> <td>7小时前</td> <td>11小时前</td> <td>2天前</td> </tr> </table> <table> <tr class="tr1"> <td><a href="#"><img src="images/f7.jpg" /></a></td> <td><a href="#"><img src="images/f8.jpg" /></a></td> <td><a href="#"><img src="images/f9.jpg" /></a></td> </tr> <tr class="tr2"> <td><a href="#">远方</a></td> <td><a href="#">我要学英语</a></td> <td><a href="#">虚竹</a></td> </tr> <tr class="tr3">

评论收藏

内容反馈