HTML简易网站
本网站的代码是本人大一初学h5的一次实验报告作业，源码附上，需要的直接拿取即可。
本网站编写代码简单，涉及到5个html页面，一个css样式控制，五个html页面的样式链接link都由一个css样式控制。图片可以根据自身喜好进行插入。（原图可以联系我来取）
结构图
效果图
index.html页面代码
<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的驿站</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="nav">
<tr>
<td><img src="images/图片1.png" height="100" /></td>
<td width="100" align="center"><a class="head" href="index.html">主页</a></td>
<td width="100" align="center"><a class="head" href="每日分享.html">每日分享</a></td>
<td width="100" align="center"><a class="head" href="好剧助力.html">好剧助力</a></td>
<td width="100" align="center"><a class="head" href="经典语录.html">经典语录</a></td>
<td width="100" align="center"><a class="head" href="我的音乐.html">我的音乐</a></td>
</tr>
</table>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" class="main">
<tr>
<td></td>
</tr>
<tr>
<td><table width="760" border="0" cellspacing="10" cellpadding="0">
<tr>
<td>
<h3>作者前言</h3>
<h4 >大学生英文提升途径</h4>
<p class="text">①看电影学英语
一部经典的电影可以反复观看对于懒癌患者十分友好第一遍可以开中英字幕
然后二刷时就只保留英文字幕三刷甚至不开字幕反复看和听
英语的口语和听力能力一定有很大的提升
想要更精进一点还可以选择相关片段进行跟读练习
进一步提升自己的口语能力!
</td>
<td><img src="images/图片2.png" width="383" height="289" /></td>
</tr>
<tr>
<td><img src="images/图片3.png" width="400" /></td>
<td>
<p class="text">②看TED学英语
这个是我用的最多的一种方法特别适合碎片化时间来学习还能学到很多观点
简直是学英语的神器!
</p></td>
</tr>
<tr>
<td><p class="text">③读英文原著
当你啃下来一本英文原著
你的英语水平一定会有质的飞跃最近在读《你当像鸟飞往你的山》这本书真的太值得一读了!读下来收获很多! </p></td>
<td><img src="images/图片4.png" width="400" /></td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
好剧助力.html 页面代码
<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的驿站</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="nav">
<tr>
<td><img src="images/图片1.png" height="100" /></td>
<td width="100" align="center"><a class="head" href="index.html">主页</a></td>
<td width="100" align="center"><a class="head" href="每日分享.html">每日分享</a></td>
<td width="100" align="center"><a class="head" href="好剧助力.html">好剧助力</a></td>
<td width="100" align="center"><a class="head" href="经典语录.html">经典语录</a></td>
<td width="100" align="center"><a class="head" href="我的音乐.html">我的音乐</a></td>
</tr>
</table>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" class="main">
<tr>
<td></td>
</tr>
<tr>
<td><table width="800" border="0" cellspacing="10" cellpadding="0">
<tr>
<td><div class="title">好剧助力</div></td>
</tr>
<tr>
<td valign="top"><table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="imgs"><img src="images/泰坦尼克.png" width="300" height="200" border="0" /></td>
<td class="imgs"><img src="images/罗马假日.png" width="300" height="200" border="0" /></td>
<td class="imgs"><img src="images/怦然心动.png" width="300" height="200" border="0"/></td>
</tr>
<tr >
<td class="juming">泰坦尼克号</td>
<td class="juming">罗马假日</td>
<td class="juming">怦然心动</td>
</tr>
<tr>
<td class="imgs"><img src="images/王冠.png" width="300" height="200" border="0" /></td>
<td class="imgs"><img src="images/老友记.png" width="300" height="200" border="0" /></td>
<td class="imgs"><img src="images/凯瑟琳大帝.png" width="300" height="200" border="0" />
</td>
<tr >
<td class="juming">王冠</td>
<td class="juming">老友记</td>
<td class="juming">凯瑟琳大帝</td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
我的音乐.html 页面代码
<!DOCTYPE html">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的驿站</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="nav">
<tr>
<td><img src="images/图片1.png" height="100" /></td>
<td width="100" align="center"><a class="head" href="index.html">主页</a></td>
<td width="100" align="center"><a class="head" href="每日分享.html">每日分享</a></td>
<td width="100" align="center"><a class="head" href="好剧助力.html">好剧助力</a></td>
<td width="100" align="center"><a class="head" href="经典语录.html">经典语录</a></td>
<td width="100" align="center"><a class="head" href="我的音乐.html">我的音乐</a></td>
</tr>
</table>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" class="main">
<tr>
<td></td>
</tr>
<tr>
<td><table width="800" border="0" cellspacing="10" cellpadding="0">
<tr>
<td colspan="2"><div class="title">
<p >我的音乐----My heart will go on (Love Theme from "Titanic")</p>
</div></td>
</tr>
<tr>
<td valign="top">
<p >My heart will go on </p>
<p >Every night in my dreams </p>
<p >I see you I feel you</p>
<p >That is how I know you go on </p>
<p >Far across the distance </p>
<p >And spaces between us. </p>
<p >You have come to show you go on </p>
<p >Near far </p>
<p >wherever you are </p>
<p >I believe that the heart does go on </p>
<p >Once more </p>
<p >you open the door </p>
<p >And you're here in my heart. </p>
<p >And my heart will go on and on </p>
<p >Love can touch us one time. </p>
<p>And last for a lifetime</p>
<p>And never let go till we're gone,</p>
<p>Love was when I loved you</p>
<p>One true time I hold to.</p>
<p>In my life we'll always go on.
</p>
<p>Near far,
</p>
<p>wherever you are</p>
<p>I believe that the heart does go on
</p>
<p>Once more,
</p>
<p>you open the door,
</p>
<p>And you're here in my heart,
</p>
<p>And my heart will go on and on
</p>
<p>You're here,
</p>
<p>You're here,
</p>
<p>there's nothing I fear.
</p>
<p>And I know that my heart will go on
</p>
<p>we'll stay forever this way.
</p>
<p>You are safe in my heart,
</p>
<p>and my heart will go on and on
</p><br>
</td>
<td valign="top"><table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td></td>
</tr>
<tr>
<td></embed>
</td>
</tr>
<tr>
<td><img src="images/耳机.png" width="300" border="0" /></td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
每日分享.html 页面代码
<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的驿站</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="nav">
<tr>
<td><img src="images/图片1.png" height="100" /></td>
<td width="100" align="center"><a class="head" href="index.html">主页</a></td>
<td width="100" align="center"><a class="head" href="每日分享.html">每日分享</a></td>
<td width="100" align="center"><a class="head" href="好剧助力.html">好剧助力</a></td>
<td width="100" align="center"><a class="head" href="经典语录.html">经典语录</a></td>
<td width="100" align="center"><a class="head" href="我的音乐.html">我的音乐</a></td>
</tr>
</table>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" class="main">
<tr>
<td></td>
</tr>
<tr>
<td><table width="800" border="0" cellspacing="10" cellpadding="0">
<tr>
<td colspan="2"><div class="title">今日语录----love(爱情)</div></td>
</tr>
<tr>
<td>
<div id="shi">
<p> I love you not because of who you are,but because of who I am when I am with you.
</p>
<p>我爱你，不是因为你是一个怎样的人，而是因为我喜欢与你在一起时的感觉。
</p>
<p>No man or woman is worth your tears,and the one who is ,won't make you cry.
</p>
<p>没有人值得你流泪，值得让你这么做的人不会让你哭泣。
</p>
<p>The worst way to miss someone is to be sitting right beside them knowing you can't have them.
</p>
<p>失去某人，最糟糕的莫过于，他近在身旁，却犹如远在天边。
</p>
<p>Never frown,even when you are sad,because you never know who is falling in love with your smile.
</p>
<p>纵然伤心，也不要悉眉不展，因为你不知是谁会爱上你的笑容。
</p>
<p>To the world you may be one person,but to one person you may be the world.
</p>
<p>对于世界而言，你是一个人；但是对于某人，你是他的整个世界。
</p>
<p>Don't waste your time on a man/woman,who isn't willing to waste their time on you.
</p>
<p>不要为那些不愿在你身上花费时间的人而浪费你的时间。
</p>
<p>Just because someone doesn't love you the way you want them to,doesn't mean they don't love you with all they have.
</p>
<p>爱你的人如果没有按你所希望的方式爱你，那并不代表他们没有全心全意地爱你。
</p>
<p>Don't try to hard,the best things come when you least expect them to.
</p>
<p>不要着急，最好的总会在最不经意的时候出现。
</p>
<p>Maybe God wants us to meet a few wrong people before meeting the right one,so that when we finally meet the person,we will know how to be grateful.
</p>
<p>在遇到梦中人之前，上天也许会安排我们先遇到别人；在我们终于遇见心仪的人时，便应当心存感激。
</p>
<p>Don't cry because it is over,smile because it happened.
</p>
<p>不要因为结束而哭泣，微笑吧，为你的曾经拥有。
</p>
<p>Life is a pure flame,and we live by an invisible sun within us.
-------Sir Thomas Browne
</p>
<p>“生命是束纯净的火焰，我们依靠自己内心看不见的太阳而存在。”
--------托马斯。布朗爵士
</p>
</div>
<div>
</td>
</tr>
</table>
</body>
</html>
经典语录.html 页面代码
<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的驿站</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="nav">
<tr>
<td><img src="images/图片1.png" height="100" /></td>
<td width="100" align="center"><a class="head" href="index.html">主页</a></td>
<td width="100" align="center"><a class="head" href="每日分享.html">每日分享</a></td>
<td width="100" align="center"><a class="head" href="好剧助力.html">好剧助力</a></td>
<td width="100" align="center"><a class="head" href="经典语录.html">经典语录</a></td>
<td width="100" align="center"><a class="head" href="我的音乐.html">我的音乐</a></td>
</tr>
</table>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" class="main">
<tr>
<td></td>
</tr>
<tr>
<td><table width="1000" border="0" cellspacing="10" cellpadding="0">
<tr>
<td><div class="title">
<p >经典语录----直击心灵</p>
</div></td>
</tr>
<tr>
<td valign="top" >
<p style="font-size:24px; font-family:font-family: '仿宋'"> Are you one of the many graduate students out there looking for some motivation in order to boost your
life? It’s not going to be a piece of cake to figure out what you want out of life but each day trust that you are getting closer and closer to finding and doing what you love.I collected forty inspirationaland motivational
quotes that every graduate student should know to get that shot of encouragement to achieve your goals and
find your calling. lf you can find only one quote that inspires you, it’ll be well worth it!<br />
<p style="font-size:24px; font-family: '仿宋'">
你是那群正为了提升生活而寻找动力的毕业生们中的一页吗?搞清楚你想要的生活并非难事，但是每天要离你所热爱的事物更近一点可就不是易事了。我收集了40句励忠名言，以使每一名毕业生都能从中获得激励，从而实现自己的目标、找到自己的兴趣。如果你能找到一句话能激发出自己的正能量，那就值了!
</p>
<br />
<img width="650" height="300" src="images/远方.png" />
<p style="font-size:24px; font-family:font-family: '仿宋'">  The greatest test of courage on earth is to bear defeat without losing heart.</p>
<p style="font-size:24px; font-family:font-family: '仿宋'">
世界上对勇气的最大考验是忍受失败而不丧失信心。</p>
<img width="650" height="300" src="images/山谷.png" />
<p style="font-size:24px; font-family:font-family: '仿宋'">Life would be too smooth if it had no rubs in it.</p>
<p style="font-size:24px; font-family:font-family: '仿宋'"> 生活若无波折险阻，就会过于平淡无奇
</p>
<img width="650" height="300" src="images/登山.png" />
<p style="font-size:24px; font-family:font-family: '仿宋'">Wasting time is robbing oneself.</p>
<p style="font-size:24px; font-family:font-family: '仿宋'">浪费时间就是掠夺自己</p>
<p ><img width="650" height="300" src="images/自行车.png" />
<p>
</p></td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
style.css 样式页面
/* CSS Document */
@charset "utf-8";
body {
background-image:url(images/%E8%83%8C%E6%99%AF.jpeg);
font-family: "宋体";
font-size: 12px;
line-height: 25px;
width:800px;
height:800px;
}
.head {
font-size:24px;
font-family:"华文行楷";
color:#FFF;
}
.text {
font-family:"仿宋";
font-size:18px;
color:#000;
font-weight:200;
}
h4,h3 {
font-family:"华文行楷";
font-size:24px;
color:#30C;
font-weight:400;
}
.juming {
text-align:center;
font-family:"隶书";
font-size:24px;
height:60px;
padding:20px;
}
.imgs {
padding:10px;
}
#shi {
font-size:18px;
font-family:"新宋体";
color:#003;
}
.nav {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #738CAA;
width: 800px;
margin-right: auto;
margin-left: auto;
}
.main {
color: #000;
}
a {
font-size: 14px;
font-family: "微软雅黑";
}
a:link {
color: #333;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #333;
}
a:hover {
text-decoration: none;
color: #FFF;
}
a:active {
text-decoration: none;
color: #333;
}
.title {
font-size:18px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #200F15;
border-left-width: 5px;
border-left-style: solid;
border-left-color: #200F15;
padding-left: 10px;
color: #AD5A5A;
}
链接: link.
图片:
带尺寸的图片:
居中的图片:
居中并且带尺寸的图片:
当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。
如何插入一段漂亮的代码片
去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.
// An highlighted block
var foo = 'bar';
生成一个适合你的列表
- 项目
- 项目
- 项目
- 项目
- 项目1
- 项目2
- 项目3
- 计划任务
- 完成任务
创建一个表格
一个简单的表格是这么创建的：
| 项目 | Value |
|---|---|
| 电脑 | $1600 |
| 手机 | $12 |
| 导管 | $1 |
设定内容居中、居左、居右
使用:---------:居中
使用:----------居左
使用----------:居右
| 第一列 | 第二列 | 第三列 |
|---|---|---|
| 第一列文本居中 | 第二列文本居右 | 第三列文本居左 |
SmartyPants
SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：
| TYPE | ASCII | HTML |
|---|---|---|
| Single backticks | 'Isn't this fun?' | ‘Isn’t this fun?’ |
| Quotes | "Isn't this fun?" | “Isn’t this fun?” |
| Dashes | -- is en-dash, --- is em-dash | – is en-dash, — is em-dash |
创建一个自定义列表
-
Markdown
- Text-to- HTML conversion tool Authors
- John
- Luke
如何创建一个注脚
一个具有注脚的文本。1
注释也是必不可少的
Markdown将文本转换为 HTML。
KaTeX数学公式
您可以使用渲染LaTeX数学表达式 KaTeX:
Gamma公式展示 Γ ( n ) = ( n − 1 ) ! ∀ n ∈ N \Gamma(n) = (n-1)!\quad\forall n\in\mathbb N Γ(n)=(n−1)!∀n∈N 是通过欧拉积分
Γ ( z ) = ∫ 0 ∞ t z − 1 e − t d t . \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. Γ(z)=∫0∞tz−1e−tdt.
你可以找到更多关于的信息 LaTeX 数学表达式here.
新的甘特图功能，丰富你的文章
- 关于 甘特图 语法，参考 这儿,
UML 图表
可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：
这将产生一个流程图。:
- 关于 Mermaid 语法，参考 这儿,
FLowchart流程图
我们依旧会支持flowchart的流程图：
- 关于 Flowchart流程图 语法，参考 这儿.
导出与导入
导出
如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。
导入
如果你想加载一篇你写过的.md文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
继续你的创作。
注脚的解释 ↩︎
242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
