HTML教程源代码

合集下载

开机吓人的程序源代码-学院-黑客基地

Goto xing
呼呼，快去试试吧，源码在这里，清除应该不难了吧？！
关键字：开机吓人
责任编辑：blackpower
本文引用网址：与您的QQ/MSN好友分享!
上一篇：DOS下修改IP地址和网关
下一篇：如何简单实现可执行文件的自我删除
发表评论加入收藏告诉好友打印本页关闭窗口返回顶部 VIP会员
图片
免疫Windows系统不受
CentOS 5.1系统下挂载
变种机器狗木马病毒防
“反黑军团”总教头
黑客训练营一瞥
热点
+ 运行命令大集合 + 不依赖于net user添加账户的 + 利用脚本编写天气查询器 + RAR命令的在批处理中的运用 +
开机吓人的程序源代码-学院-黑客基地网站入口：用户名: 密码: 不保存保存一天保存一月保存一年免费注册 | 忘记密码繁體中文设为首页
加入收藏
新闻: 业界事件威胁科技创业社会 | 黑基公告会员动态企业平台人物专访 | 安全培训搜索留言本在线投稿广告
color 4a
@Echo
________________________________________________________________________________
color 5a
@Echo
________________________________________________________________________________
图片: 黑客极客科技生活视频: 聚焦教程影视娱乐空间: 情感电脑生活文艺旅游影音动漫科技运动图书签

简单个人主页html源码

<td align="center"> <a href="./friend.html">我的朋友 </a> </td>
<td align="center"> <a href="./message.html">给我留言 </a> </td>
<td align="center"> . </td>
<p>某某某版权所有</p></td>
</tr>
</table>
</td>
<td width="250" height="206"><img src="/file/201310/1_201310281634351265.png" width="200" height="240" /></td>
</tr>
</table>
<table width="90%" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td height="206" valign="top">
<table width="785" height="181" border="0" cellpadding="0" cellspacing="0"> <tr>

html网页制作源代码

html网页制作源代码HTML网页制作源代码HTML（HyperText Markup Language）是一种标记语言，用于创建网页的结构和内容。

网页的源代码是指用HTML语言编写的文本文件，它包含了网页的各种元素、标签和属性。

在本文中，我们将介绍如何使用HTML语言编写网页的源代码。

在编写HTML网页源代码之前，我们需要一些基本的工具和软件。

首先，我们需要一个文本编辑器，例如Notepad ++、Sublime Text或Visual Studio Code。

这些文本编辑器具有代码高亮功能，使得编写和阅读源代码更加方便。

其次，我们需要一个现代的Web 浏览器，例如Google Chrome、Mozilla Firefox或Microsoft Edge，用于查看我们编写的网页。

下面是一个基本的HTML网页源代码的示例，它包含了网页的基本结构和内容：```<!DOCTYPE html><html><head><title>我的网页</title></head><body><h1>欢迎来到我的网页</h1><p>这是一个段落。

</p><ul><li>列表项1</li><li>列表项2</li><li>列表项3</li></ul></body></html>```以上代码中，`<!DOCTYPE html>`声明了文档类型为HTML5。

`<html>`标签是HTML文档的根元素。

`<head>`标签包含了网页的头部信息，包括标题（`<title>`标签）等。

`<body>`标签包含了网页的主要内容。

HTML与源代码

在描述一些复杂的表达式时，特别是一些数学公式，经常会用到上标和下标，例如3的平方（32）。在HTML页面中，上标采用<SUB> 元素，下标采用<SUP>元素。其具体语法是： <SUB>作为上标的文字</SUB> <SUP>作为下标的文字</SUP>
与文字排版相关的元素
在与文字排版相关的元素就是对某段文字进行设置的元素，包括文本缩进、段落、换行、段落居中等。一个好的网页，文字段落的设置是必不可少的，它可以使网页更加的简洁和漂亮。本节就来详细讲解与文字排版相关的一些元素

<HR ALIGN="对齐方式" WIDTH="宽度" SIZE="高度" COLOR="颜色" NOSHADE> Align属性值：left（左对齐）、center（居中）、right（右对齐） Width：表示宽度，可以使用百分数，也可以用像素表示 Size：表示高度，其值是数字 Color：代表颜色，默认黑色 Noshade：代表不显示阴影，默认情况是显示阴影
无序列表是以<UL>标记开始，以</UL>标记结束的。在无序列表内的列表项用<LI>表示，其具体的语法如下所示： <UL> <LI>无序列表项1</LI> <LI>无序列表项2</LI> …… </UL>

无序列表

<UL> <LI>无序列表项1</LI> …… </UL>

html源代码解释

常用HTML代码解释一、文字1.标题文字<h#>..........</h#> #=1~6；h1为最大字，h6为最小字2.字体变化<font>..........</font>【1】字体大小<font size=#>..........</font> #=1~7；数字愈大字也愈大【2】指定字型<font face="字体名称">..........</font>【3】文字颜色<font color=#rrggbb>..........</font>rr：表红色（red）色码gg：表绿色（green）色码bb：表蓝色（blue）色码rrggbb也可用6位颜色代码数字3.显示小字体<small>..........</small>4.显示大字体<big>..........</big>5.粗体字<b>..........</b>6.斜体字<i>..........</i>7.打字机字体<tt>..........</tt>8.底线<u>..........</u>9.删除线<strike>..........</strike>10.下标字<sub>..........</sub>11.上标字<sup>..........</sup>12.文字闪烁效果<blink>..........</blink>13.换行（也称回车）<br>14.分段<p>15.文字的对齐方向<p align="#"> #号可为left：表向左对齐（预设值）center：表向中对齐right：表向右对齐P.S.<p align="#">之后的文字都会以所设的对齐方式显示，直到出现另一个<p align="#">改变其对齐方向，遇到<hr>或<h#>标签时会自动设回预设的向左对齐。

简洁又漂亮的单网页404页源码（html格式404源码）

简洁⼜漂亮的单⽹页404页源码（html格式404源码）简洁⼜漂亮的单⽹页404页源码⼀个简洁⼜偏亮的单页⾯404页源码，FYI<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>404-[对不起！您访问的页⾯不存在] </title><style type="text/css">.head404{ width:580px; height:234px; margin:50px auto 0 auto; background:url('/Public/images/head404.png') no-repeat; }.txtbg404{ width:499px; height:169px; margin:10px auto 0 auto; background:url('/Public/images/txtbg404.png') no-repeat;}.txtbg404 .txtbox{ width:390px; position:relative; top:30px; left:60px;color:#eee; font-size:13px;}.txtbg404 .txtbox p {margin:5px 0; line-height:18px;}.txtbg404 .txtbox .paddingbox { padding-top:15px;}.txtbg404 .txtbox p a { color:#eee; text-decoration:none;}.txtbg404 .txtbox p a:hover { color:#FC9D1D; text-decoration:underline;}</style></head><body bgcolor="#494949"><div class="head404"></div><div class="txtbg404"><div class="txtbox"><p>对不起，您请求的页⾯不存在、或已被删除、或暂时不可⽤</p><p class="paddingbox">请点击以下链接继续浏览⽹页</p><p>》<a style="cursor:pointer" οnclick="history.back()">返回上⼀页⾯</a></p><p>》<a href="/">返回⽹站⾸页</a></p></div></div></body></html>⽹页预览：------------------------------------------------------------------------------扩展阅读：404、403、405、500｜常见⽹页错误代码解析No.1 404 ⽆法找到⽂件404是⼤家上⽹冲浪时最常见的错误代码，⼀般出现的原因可能是：①页⾯被删除或不存在②⽹址输⼊有误③没插⽹线或没有联⽹做为⽣活中最常见的404，除了本⾝找不到查询页⾯的含义，还延伸出很多额外的意义。

w3cHTML(教程完整版)

Previous Page Next Page HTML 文档是由 HTML 元素定义的。
HTML 元素
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
开始标签元素内容结束标签
<p> This is a paragraph </p>
<a href="default.htm" > This is a link </a>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
亲自试一试
注释：浏览器会自动地在标题的前后添加空行。
注释：默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
标题很重要
请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。
实例
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
亲自试一试
提示：使用水平线 (<hr> 标签) 来分隔文章中的小节是一个办法（但并不是唯一的办法）。
属性总是在 HTML 元素的开始标签中规定。
属性实例
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：

ASP网络应用程序设计教程(第二版)例题源代码

有了asp就不必担行环境可用来建立和执行动态的交互式心客户端的浏览器能否运行所编写的代码因为所有的程序都将在服务器端执行
ASP_SE 各章示例代码
【例 1.1】简单静态 HTML 网页示例  <html> <head> <title> 简单静态网页示例 </title> </head> <body> <p align="center"><font color="blue">Hello World!</font></p> <p align="center"><font face="黑体">世界你好！</font></p> </body> </html>
src = "left.htm" >
totay = Date() theTime = Time() If left(theTime,2)> "12" Then
Response.Write "<H3>下午好!</H3>" Else
Response.Write "<H3>上午好!</H3>" End If %> 今天是 <%=totay%>，时间 <%=theTime%> </body> </html>
【例 1.2】客户端动态网页示例  <html> <head> <script language="JavaScript"> function getname(str) {alert("您好! "+ str+"!");} </script> </head> <body> 请输入您的姓名： <form> <input type="text" name="name" onBlur="getname(this.value)" value=""> </form> </body> </html>

html代码全集案例

Html网页的代码很全哦1)贴图：&lt。

img src=&quot。

图片地址&quot。

&gt。

2)加入连接：&lt。

a href=&quot。

所要连接的相关地址&quot。

&gt。

写上你想写的字&lt。

/a&gt。

1)贴图：<img src="图片地址">2)加入连接：<a href="所要连接的相关地址">写上你想写的字</a>3)在新窗口打开连接：<a href="相关地址" target="_blank">写上要写的字</a>消除连接的下划线在新窗口打开连接：<a href="相关地址" style="text-decoration:none" target="_blank">写上你想写的字</a>4)移动字体(走马灯)：<marquee>写上你想写的字</marquee>5)字体加粗：<b>写上你想写的字</b>6)字体斜体：<i>写上你想写的字</i>7)字体下划线: <u>写上你想写的字</u>8)字体删除线: <s>写上你想写的字</s>9)字体加大: <big>写上你想写的字</big>10)字体控制大小：<h1>写上你想写的字</h1> (其中字体大小可从h1-h5,h1最大，h5最小)11)更改字体颜色：<font color="#value">写上你想写的字</font>(其中value值在000000与ffffff(16位进制)之间12)消除连接的下划线：<a href="相关地址" style="text-decoration:none">写上你想写的字</a>13)贴音乐：<embed src=音乐地址 width=300 height=45 type=audio/mpeg autostart="false">14)贴flash: <embed src="flash地址" width="宽度" height="高度">15)贴影视文件：<img dynsrc="文件地址" width="宽度" height="高度" start=mouseover>16)换行：<br>17)段落：<p>段落</p>18)原始文字样式：<pre>正文</pre>19)换帖子背景：<body background="背景图片地址">20)固定帖子背景不随滚动条滚动：<body background="背景图片地址" body bgproperties=fixed>21)定制帖子背景颜色：<body bgcolor="#value">(value值见10)22)帖子背景音乐：<bgsound="背景音乐地址" loop=infinite>23)贴网页：<iframe src="相关地址" width="宽度" height="高度"></iframe>/----------------------------------------HTML特效代码--------------------------------/1。

HTML源代码

<tr>
<td width="146" valign="top" align="left" id="logo">
<a href="/" id="top-logo"><img src="/img/iknow/docshare/logo_uu="137" height="46"></a>
<span id="topright">
<a p;| 
<a target="_blank"p;| 
</span>
</div>
<h1>商法二名词解释小抄 </h1>
<p class="summary ml">
<span id="summary">比较全面的小抄</span>
<span id="full-summary" style="display:none">比较全面的小抄<a href="#" onclick="view.showHideSummary(2)"><<隐藏</a></span>
<script type="text/javascript" src="/static/js/helper.js"></script>

HTML零基础入门教程

首语人们常常以为制作一个网站很难，但其实并非如此！人人都能学会如何制作网站。

而且，假如你继续阅读本教程的话，你将能在一小时内制成一个网站。

有些人觉得制作网站需要昂贵的、高级的工具——当然这是错误的。

的确有许多软件声称它们可以为你创建网站，它们有的比较好用，有的就差些。

但如果你要制作符合W3C规范并令你满意的网页的话，你必须自己动手做。

好在这不难，而且你已具备所需的全部软件了。

本教程的目的就是：通过简单、全面和正确的介绍，教会你如何创建网站。

本教程将从基础讲起，不要求你具备任何编程知识。

当然，本教程无法遍及所有知识，所以你要自己多做实验。

不过别担心，学习制作网站是件充满乐趣的事，而且一旦掌握它，你便会感到无比满足。

你可以自由选择如何使用本教程，但我们建议你每天学习2到3课，然后花点时间来实验你所学到的新知识。

好的，不多说，我们现在就开始吧！第1课：开始学习12你可以先在自己的计算机上制作网站，待网站制作完毕再上传到因特网上。

接下来学习什么？下一课将介绍HTML是什么，然后从第三课开始学习有趣的HTML。

第2课：HTML是什么？这一课将为你简要介绍你的新朋友——HTML。

HTML是什么？HTML是浏览器的“母语”。

长话短说，HTML是由一名叫Tim Berners-Lee的科学家发明的。

他发明HTML的目的，是为了方便不同大学的科学家们可以更容易地获取彼此的研究文档。

HTML取得了的巨大成功，大大超出了Tim Berners-Lee的原本预计。

通过发明HTML，他为我们今天所认识的万维网奠定了基础。

HTML是一门语言，它令我们可以在因特网上展示信息（例如科学研究信息）。

你所看到的网页，是浏览器对HTML进行解释的结果。

要查看一个网页的HTML代码，只需在浏览器菜单栏上点击“查”，然后选择3第3课：元素与标签现在你要学习的是HTML的重要成分——元素（element）。

元素用于结构化HTML文档，并告知浏览器如何呈现网页。

猜拳(石头剪子布)前端HTML源代码,三种不同的实现方式

<html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><title>猜拳（石头剪子布） </title><script type="text/javascript">var userselect = 3;function userchk(val) {userselect = valvar userselectval = "请出招";switch (userselect) {case 0: userselectval = "你将要出招“布”"; break;case 1: userselectval = "你将要出招“石头”"; break;case 2: userselectval = "你将要出招“剪刀”"; break;}document.getElementById("userselectval").innerText= userselectval;document.getElementById("computerselectval").innerT ext = "";document.getElementById("movesval").innerText = "";}function Moves() {if (userselect < 0 || userselect > 2) {alert("请选择要出的招")return;}var movesval = "";var computerselect = parseInt((Math.random() * 1000) % 3);if (compare(computerselect, userselect) == 1) {movesval = "猜拳结果：你赢了";}if (compare(computerselect, userselect) == 0) {movesval = "猜拳结果：平局";}if (compare(computerselect, userselect) == -1) {movesval = "猜拳结果：你输了";}var computerselectval = "计算机出招";switch (computerselect) {case 0: computerselectval = "计算机出招“布”"; break;case 1: computerselectval = "计算机出招“石头”"; b reak;case 2: computerselectval = "计算机出招“剪刀”"; break;}document.getElementById("computerselectval").innerT ext = computerselectval;document.getElementById("movesval").innerText = movesval;alert(movesval);}//比较猜拳结果function compare(cpu, you) {var win = 0;switch (you - cpu) {case 2: { win = 1; break; }case 1: { win = -1; break; }case 0: { win = 0; break; }case -1: { win = 1; break; }case -2: { win = -1; break; }}return win;}function MovesRadio(){var computerselect = parseInt((Math.random() * 1000) % 3);var userselect = 3;for(var i=0;i<=2;i++){if(document.f1.r1[i].checked==true){userselect = i;}}if (compare(computerselect, userselect) == 1) {movesval = "猜拳结果：你赢了";}if (compare(computerselect, userselect) == 0) {movesval = "猜拳结果：平局";}if (compare(computerselect, userselect) == -1) {movesval = "猜拳结果：你输了";}var computerselectval = "计算机出招";switch (computerselect) {case 0: computerselectval = "计算机出招“布”"; break;case 1: computerselectval = "计算机出招“石头”"; break;case 2: computerselectval = "计算机出招“剪刀”"; break;}document.getElementById("radiocomputerselectval").i nnerText = computerselectval;document.getElementById("radiomovesval").innerText = movesval;alert(movesval);}var seluserselect = 1;function MovesSelect() {var computerselect = parseInt((Math.random() * 1000) % 3);var objsel = document.getElementById("select");var objselval =objsel.options[objsel.selectedIndex].value;seluserselect = parseInt(objselval);if (compare(computerselect, seluserselect) == 1) {movesval = "猜拳结果：你赢了";}if (compare(computerselect, seluserselect) == 0) {movesval = "猜拳结果：平局";}if (compare(computerselect, seluserselect) == -1) {movesval = "猜拳结果：你输了";}var computerselectval = "计算机出招";switch (computerselect) {case 0: computerselectval = "计算机出招“布”"; break;case 1: computerselectval = "计算机出招“石头”"; break;case 2: computerselectval = "计算机出招“剪刀”"; break;}document.getElementById("selcomputerselectval").inn erText = computerselectval;document.getElementById("selmovesval").innerText = movesval;alert(movesval);}</script></head><body><h3 align="center">猜拳（石头剪子布）点击按钮</h3><div align="center"><div align="center">请选择要出的招</div><input type="button" value="石头" onclick="userchk(1)" /><input type="button" value="剪子" onclick="userchk(2)" /><input type="button" value="布" onclick="userchk(0)" /><div id="userselectval">请出招</div><input type="button" name="button" id="button" value="出拳" onclick="Moves()" /><div id="computerselectval"></div><div id="movesval">结果</div></div><h3 align="center">猜拳（石头剪子布）单选按钮组</h3><form name="f1" id="f1" align="center"><input type="radio" name="r1" id="s1" value="1"checked="checked" />布<input type="radio" name="r1" id="s2" value="2" />石头<input type="radio" name="r1" id="s3" value="3" />剪子<div>请出招</div><input type="button" name="button" id="button" value="出拳" onclick="MovesRadio()" /><div id="radiocomputerselectval"></div><div id="radiomovesval">结果</div></form><h3 align="center">猜拳（石头剪子布）下拉列表</h3><div align="center"><div align="center">请选择要出的招</div><select id="select"><option value="1">石头</option><option value="2">剪子</option><option value="0">布</option></select><div>请出招</div><input type="button" name="button" id="button" value="出拳" onclick="MovesSelect()" /><div id="selcomputerselectval"></div><div id="selmovesval">结果</div></div></body></html>。

网页制作教程课件6

2．<html></html>标记 <html>标记位于<!DOCTYPE>标记之后，称为HTML文档的根标记，<html>标记标志着HTML文档的开始，最末尾的</html>标记标志着HTML文档的结束，在<html>和</html>标记中间的是HTML文档的头部和主体部分。
3．<head></head>标记 <head>标记紧跟在<html>标记之后，也称为头部标记，用于标记HTML文档的头部信息，在其中包含了<meta>标记、<link>标记、<style>标记和<title>标记等，用于描述文档的标题、作者以及和其他文档的关系等信息。在头部标记中，除了页面的标题，其他的信息都不会显示在页面中。一个HTML文档只有一对<head>标记。
size
设置文字的大小，可以取1到7之间的整数值
color
设置文字的颜色
5.换行标记在HTML中，一个段落中的文字从左到右依次排列，直到浏览器窗口的右端才会自动换行，如果希望某段文本强制换行显示的话，直接按enter键是不起作用的，这就用到了换行标记<br/>。
3.2.2特殊字符标记
在制作网页时，有时候会用到一些特殊字符，比如说网页最下方一般会有版权信息©符号，网页中的文章也会首行缩进2个字，在Word中通常我们按空格符也能缩进2个字，但是在网页中按空格键是实现不了缩进的，必须得用网页中的空格符&nbsp，还有 “>”、“<”号等符号，这些都是网页中的特殊字符，网页中常见的特殊字符，如下表3-3所示。

HTML语言源代码实例

9
13. 列表元素
第二章超文本标记语言 HTML
文档中的列表是很重要的，它将使文档一目了然，在 HTML 中的列表分为无序列表和有序列表。
⑴无序列表：<UL 元素和 LI 元素>
ul 元素可用于创建一个以圆点等项目开始的无序列表，列表中的每一项用 li 加以识别
<html> <HEAD> <TITLE>无序列表的使用</TITLE> </HEAD> <BODY> <UL > <LI>天津公安警官职业学院 <LI>电教中心 <LI>授课教师：李平 <LI>授课内容《HTML 标记语言》 <HR width=200 align="left"color=green > <LI>无序列表 </UL> </BODY> </html> ⑵有序列表：<OL 元素和 LI 元素>
第二章超文本标记语言 HTML HTML 语言源代码实例
1. 第一个 HTMபைடு நூலகம் 示例
<html> <head> <title>第一个 HTML 示例</title> </head> <body> HTML 的基本结构。 </body> </html>
2. 换行标签<br>
<html> <head> <title>测试换行标签</title> </head> <body> 天津公安警官职业学院 <br> 电教中心<br> 授课教师李平<br> </body>

HTML蛋糕网源代码

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>蛋糕屋</title><TITLE>tip</TITLE><STYLE></STYLE><TITLE>tip</TITLE><STYLE></STYLE></head><body background="框架/0162.gif"><table align="center"><tr><td><img src="20110824xingren.jpg" width="900" /></td></tr><table align="center" border="0" width="900" cellpadding="0" cellspacing="0" background="框架/0105.gif"><tr align="center"><td><font size="+2"><b> <a href="#">主页</a></b></font></td><td><font size="+2" ><b><a href="#">简介</a></b></font></td><td><font size="+2" ><b><a href="#">产品</a></b></font></td><td><font size="+2" ><b><a href="#">精品</a></b></font></td><td><font size="+2" ><b><a href="#">客服</a></b></font></td><td><font size="+2" ><b><a href="#">鲜花</a></b></font></td><td><font size="+2" ><b><a href="#">特惠</a></b></font></td><td><form><select name="" size=""><option value="1">抹茶蛋糕<option value="2">水果蛋糕<option value="3">奶油蛋糕<option value="4">巧克力蛋糕<option value="5">鲜花配送<option value="6">祝寿蛋糕<option value="7">提拉米苏<option value="8">主页<option value="9">欢庆礼包</select></td><tr><table align="center" border="0" width="900" bgcolor="#FFFFFF"><tr><td ><img src="框架/100003575267999.gif"/></td><td><table border="0" cellpadding="0" cellspacing="0" height="333" width="165"><tr><td align="center"><font size="+2">鲜花花语</font> </td></tr><tr><td ><font size="-1"><ul><li>新年祝福语</li><br /><li>情人节祝福语</li><br /><li>三八节祝福语</li><br /><li>开业祝福语</li><br /><li>感恩节祝福语</li><br /><li>母亲节祝福语</li><br /><li>端午节祝福语</li><br /><li>朋友生日祝福语</li><br /><li>圣诞节祝福语</li></ul></td></tr></table></td></tr></table><table align="center" border="0" width="900" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"><tr><td width="300"><font face="宋体" size="-1"><b>账号  <input type="password" name="text1" size="" />      <input name="b1" type="button" id="c1" value="注册" /><br /><br />密码  <input type="password" name="text1" /> &nbsp    <input name="b1" type="button" id="c1" value="忘记" /><br /><br />    <input name="b1" type="button" id="c1" value="登陆" />         <input name="b1" type="button" value="取消"/></font></td><td width="324" align="center" ><img src="框架/logo.gif" /></td><td><table align="center" border="0" align="center" width="250" background="框架/0133.gif" ><tr><td align="center" background="框架/0105.gif"><b>新闻</b></td></tr><tr><td ><a href="#">最专业的鲜花速递服务商</a><br /><a href="#">荣获中国B2C电子商务第一名</a><br /><a href="#">中国花卉协会会员</a><br /><a href="#">足不出户，网络、电话均可订购</a><br /><a href="#">中国市区内最快2小时即可送达</a><br /><a href="#">采用昆明顶级花材，保证新鲜</a><br /></td></tr></table></tr></table></tr></table></tr></table><table align="center" border="0" width="900" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" background="框架/0325.gif"><tr><td width="200"><img src="footerrx.jpg"</td><td><font size="-1">按用途：<a href="#"> 全部</a> <a href="#"> 生日蛋糕</a> <a href="#"> 祝寿蛋糕</a> <a href="#"> 情侣蛋糕</a> <a href="#"> 节日蛋糕</a> <a href="#"> 庆典蛋糕</a> <a href="#"> 儿童蛋糕</a><br /><br />按材料：<a href="#"> 全部</a> <a href="#"> 鲜奶蛋糕</a> <a href="#"> 水果蛋糕</a> <a href="#"> 巧克力蛋糕</a> <a href="#"> 穆斯蛋糕</a> <a href="#"> 冰激凌蛋糕</a> <a href="#"> 抹茶蛋糕</a> <a href="#"> 芝士蛋糕</a> <a href="#"> <a href="#"> 提拉米苏</a> <a href="#"> 黑森林</a> <br /><br />按对象：<a href="#">全部</a><a href="#"> 恋人</a> <a href="#"> 长辈</a> <a href="#"> 领导</a> <a href="#">朋友</a> <a href="#">客户</a> <a href="#"> baby </a><br /><br />按造型：<a href="#"> 全部</a> <a href="#"> 心形蛋糕</a> <a href="#"> 方形蛋糕</a> <a href="#"> 圆形蛋糕</a> <a href="#"> 多层蛋糕</a> <a href="#"> 艺术蛋糕</a> <a href="#"> 生肖蛋糕</a> <br /></font></td></tr></table><table border="0" align="center" width="900" cellpadding="0" cellspacing="0"bgcolor="#FFFFFF"><tr><td width="600"><img src="框架/headerps.jpg" /></td><td ><img src="框架/donghua.gif" /></td></tr></table><table border="0" width="900" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" ><td height="2"><tr ><td width="200"><table align="center" border="0" width="230" height="625" background="框架/0325.gif"><tr><td height="30" background="框架/0105.gif"><font size="+2" color="#5E4A2F"><b>按用途<b></font></td></tr><tr><td height="66" ><font size="-1"><a href="#">生日蛋糕</a> | <a href="#">祝寿蛋糕</a> | <a href="#"> 情侣蛋糕</a><br /><br /> <a href="#">节日蛋糕</a> | <a href="#">庆典蛋糕</a> | <a href="#"> 儿童蛋糕</a><br /></font></td></tr><tr><td height="30" background="框架/0105.gif"><font size="+2" color="#5E4A2F"><b>按材料<b></font></td></tr><tr><td height="66" ><font size="-1"><a href="#">鲜奶蛋糕</a> | <a href="#">水果蛋糕</a> | <a href="#"> 巧克力蛋糕</a><br /><br /><a href="#">穆斯蛋糕</a> | <a href="#">抹茶蛋糕</a> | <a href="#"> 冰激凌蛋糕</a><br /><br /><a href="#">芝士蛋糕</a> | <a href="#"> 提拉米苏</a> | <a href="#"> 黑森林</a><br /></font></td></tr><tr><td height="30" background="框架/0105.gif"><font size="+2" color="#5E4A2F"><b>按造型<b></font> </td></tr><tr><td height="66"><font size="-1"><a href="#"> 心形蛋糕</a> | <a href="#">方形蛋糕</a> |<a href="#"> 圆形蛋糕</a><br/><br /><a href="#"> 多层蛋糕</a> | <a href="#"> 艺术蛋糕</a> | <a href="#"> 生肖蛋糕</a></font></td> </tr><tr><td height="30" background="框架/0105.gif"><font size="+2" color="#5E4A2F"><b>按对象<b> </font></td></tr><tr><td height="66"><font size="-1"><a href="#">恋人</a> | <a href="#"> 长辈</a> | <a href="#"> 领导</a><br /><br /><a href="#"> 朋友</a> | <a href="#"> 客户</a> | <a href="#"> baby</a><br /></font></td></tr><tr><td><img src="框架/dingyue.jpg"</td></tr><tr><td><input type="password" name="text1"/>邮箱地址</td></tr></table></td><td><table border="0" width="670" cellpadding="0" cellspacing="0" style="border-color:#FFFFFF" style="background-color:#B6F1FC" background="框架/0266.gif"><tr><td colspan="3"><font size="+2" color="#0000FF"><b>分类产品</b></font></td></tr> </tr><tr><td><table border="1" align="center"><td align="center"><img src="蛋糕/701002175228.jpg" /></td></table></td><td><table border="1" align="center"><td align="center"><img src="蛋糕/701050175228.jpg" /></td></table></td><td><table border="1" align="center"><td align="center"><img src="蛋糕/701060175228.jpg" /></td></table></td></tr><tr><td align="center"><font face="宋体">奇思妙想<font color="#FF0000">[￥219元]</font><br/>编号 09084</br>查看详情 <a href="#">立即订购</a></br></font></td><td align="center"><font face="宋体">月光<font color="#FF0000">[￥248元]</font><br/>编号 09084</br>查看详情 <a href="#">立即订购</a></br></font></td><td align="center"><font face="宋体">荷塘月色<font color="#FF0000">[￥189元]</font><br/>编号 09084</br>查看详情 <a href="#">立即订购</a></br></font></td></tr><tr><td><table border="1" align="center"><td align="center"><img src="蛋糕/805011175228.jpg" /></td></table></td><td><table border="1" align="center"><td align="center"><img src="蛋糕/803001175228.jpg" /></td></table></td><td><table border="1" align="center"><td align="center"><img src="蛋糕/803005175228.jpg" /></td></table></td></tr><tr><td align="center"><font face="宋体">缘分天空<font color="#FF0000">[￥318元]</font><br/>编号 09084</br>查看详情 <a href="#">立即订购</a></br></font></td><td align="center"><font face="宋体">幸福时光<font color="#FF0000">[￥219元]</font><br/>编号 09084</br>查看详情 <a href="#">立即订购</a></br></font></td><td align="center"><font face="宋体">爱之舞<font color="#FF0000">[￥179元]</font><br/>编号 09084</br>查看详情 <a href="#">立即订购</a></br></font></td> </tr><tr><td colspan="3" align="center" style="font:"宋体"" style="font-style:inherit"><a href="#">1 </a><a href="#">2 </a><a href="#">3 </a><a href="#">4 </a><a href="#">5 </a><a href="#">6 </a><a href="#">7 </a><a href="#">8 </a><a href="#">9 </a><a href="#">上一页</a> <a href="#">下一页</a></td></tr></table></td></table><table align="center" width="900"><tr><td><img src="框架/footimg.gif" /></td></tr></table> <br /><br /><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td align="center"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Copyright ⓒ [2012 Year] [] </font></td></tr></table></body></html>。

html海绵宝宝网页源代码

html海绵宝宝网页源代码<!DOCTYPE html><html><head><meta charset="utf-8"/><title>canvas海绵宝宝</title></head><body><canvasid="canvas"width="1000"height="700"style="background:#01539 f;"></canvas></body><script>var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");with(ctx){//袖子//左beginPath();fillStyle="#fff";strokeStyle="#000";lineWidth=2;bezierCurveTo(142,253,112,263,112,303) quadraticCurveTo(120,308,150,303)fill();stroke();closePath();//右beginPath();fillStyle="#fff";strokeStyle="#000";lineWidth=2;bezierCurveTo(445,253,477,263,477,303) quadraticCurveTo(467,308,447,303)fill();stroke();closePath();//胳膊//左beginPath();fillStyle="#f5e261";strokeStyle="#000";lineWidth=2;moveTo(122,306);lineTo(110,406); lineTo(120,406); lineTo(132,306);fill();stroke();closePath();//右beginPath();fillStyle="#f5e261"; strokeStyle="#000"; moveTo(458,306); lineTo(470,406); lineTo(480,406); lineTo(468,306);fill();stroke();closePath();//手//左//衣服beginPath();fillStyle="#fff";strokeStyle="#000"; lineWidth=5; shadowColor="#000"; shadowOffsetX=0; shadowOffsetY=0; shadowBlur=0; moveTo(145,385); lineTo(146,425); lineTo(442,425); lineTo(443,385); stroke();fill();closePath();//裤子beginPath();fillStyle="#ae6f28"; strokeStyle="#000"; moveTo(146,427); lineTo(147,470); lineTo(441,470); lineTo(442,427); stroke();fill();closePath();//裤子图案beginPath();fillStyle="#000";rect(156,438,60,15); rect(236,438,120,15); rect(373,438,60,15); fill();closePath();//裤腿beginPath();fillStyle="#ae6f28"; strokeStyle="#000"; lineWidth=2;moveTo(190,472); lineTo(190,490); lineTo(235,490); lineTo(235,472); moveTo(350,472); lineTo(350,490); lineTo(395,490);lineTo(395,472);fill();stroke();closePath();//腿beginPath();fillStyle="#fffe71"; strokeStyle="#000"; lineWidth=2; moveTo(208,491); lineTo(208,516); lineTo(218,516); lineTo(218,491); moveTo(368,491); lineTo(368,516); lineTo(378,516); lineTo(378,491);fill();stroke();closePath();//袜子beginPath();fillStyle="#fff"; strokeStyle="#000"; lineWidth=2;moveTo(208,517); lineTo(207,560); lineTo(218,560); lineTo(218,517); moveTo(368,517); lineTo(368,560); lineTo(379,560); lineTo(378,517);fill();stroke();closePath();//蓝杠beginPath(); strokeStyle="#536d92"; lineWidth=4;moveTo(208,523); lineTo(218,523); moveTo(368,523); lineTo(378,523);stroke();closePath();//红杠beginPath(); strokeStyle="#da4751"; lineWidth=4;moveTo(209,530); lineTo(218,530); moveTo(369,530); lineTo(378,530); stroke();closePath();//领带beginPath(); strokeStyle="#000"; lineWidth=5;fillStyle="#ef4641"; moveTo(270,385); lineTo(320,385); lineTo(298,413); lineTo(292,413);lineTo(270,385); moveTo(292,415); lineTo(280,446); lineTo(295,462); lineTo(310,446); lineTo(298,415); stroke();fill();closePath();//领子beginPath(); strokeStyle="#000"; fillStyle="#fff"; moveTo(280,393); lineTo(265,410); lineTo(218,385); moveTo(310,393); lineTo(325,410); lineTo(362,385); stroke();fill();closePath();//脸beginPath();strokeStyle="#818620";fillStyle="#f5e262";lineWidth=5;bezierCurveTo(140,50,150,60,160,50); quadraticCurveTo(170,40,180,50); quadraticCurveTo(190,60,200,50); quadraticCurveTo(210,40,220,50); quadraticCurveTo(230,60,240,50); quadraticCurveTo(250,40,260,50); quadraticCurveTo(270,60,280,50); quadraticCurveTo(290,40,300,50); quadraticCurveTo(310,60,320,50); quadraticCurveTo(330,40,340,50); quadraticCurveTo(350,60,360,50); quadraticCurveTo(370,40,380,50); quadraticCurveTo(390,60,400,50); quadraticCurveTo(410,40,420,50); quadraticCurveTo(430,60,440,50); quadraticCurveTo(450,40,460,50); quadraticCurveTo(465,60,460,70);quadraticCurveTo(468,100,458,110); quadraticCurveTo(446,120,456,130); quadraticCurveTo(466,140,456,150); quadraticCurveTo(444,160,454,170); quadraticCurveTo(464,180,454,190); quadraticCurveTo(442,200,452,210); quadraticCurveTo(462,220,452,230); quadraticCurveTo(440,240,450,250); quadraticCurveTo(460,260,450,270); quadraticCurveTo(438,280,448,290); quadraticCurveTo(458,300,448,310); quadraticCurveTo(436,320,446,330); quadraticCurveTo(456,340,446,350); quadraticCurveTo(434,360,444,370); quadraticCurveTo(454,380,444,390); quadraticCurveTo(435,405,424,390); quadraticCurveTo(415,380,405,390); quadraticCurveTo(395,400,385,390); quadraticCurveTo(375,380,365,390); quadraticCurveTo(355,400,345,390); quadraticCurveTo(335,380,325,390);quadraticCurveTo(295,380,285,390); quadraticCurveTo(275,400,265,390); quadraticCurveTo(255,380,245,390); quadraticCurveTo(235,400,225,390); quadraticCurveTo(215,380,205,390); quadraticCurveTo(195,400,185,390); quadraticCurveTo(175,380,165,390); quadraticCurveTo(155,400,145,390); quadraticCurveTo(135,380,145,370); quadraticCurveTo(153,360,143,350); quadraticCurveTo(133,340,143,330); quadraticCurveTo(151,320,141,310); quadraticCurveTo(131,300,141,290); quadraticCurveTo(149,280,139,270); quadraticCurveTo(129,260,139,250); quadraticCurveTo(147,240,137,230); quadraticCurveTo(127,220,137,210); quadraticCurveTo(145,200,135,190); quadraticCurveTo(125,180,135,170); quadraticCurveTo(143,160,133,150); quadraticCurveTo(123,140,133,130);quadraticCurveTo(141,120,131,110); quadraticCurveTo(121,100,131,90); quadraticCurveTo(139,80,129,70); quadraticCurveTo(119,60,129,50); quadraticCurveTo(137,45,140,50); stroke();fill();closePath();//眼睛beginPath();strokeStyle="#000";fillStyle="#fff";arc(249,180,45,0,Math.PI*2,true); arc(341,180,45,0,Math.PI*2,true); stroke();fill();closePath();//眼仁beginPath();strokeStyle="#000";fillStyle="#50d1f1";arc(255,180,18,0,Math.PI*2,true);fill();closePath();beginPath();strokeStyle="#000";fillStyle="#50d1f1";arc(335,180,18,0,Math.PI*2,true); stroke();fill();closePath();//眼球beginPath();strokeStyle="#000";fillStyle="#000";arc(255,180,10,0,Math.PI*2,true); stroke();fill();closePath();beginPath();strokeStyle="#000";fillStyle="#000";arc(335,180,10,0,Math.PI*2,true);fill();closePath();//眼睫毛beginPath(); lineWidth=6; strokeStyle="#000"; moveTo(210,122); lineTo(223,142); moveTo(247,112); lineTo(247,133); moveTo(283,117); lineTo(270,140); moveTo(307,120); lineTo(320,140); moveTo(344,112); lineTo(344,133); moveTo(380,120); lineTo(365,140); stroke();closePath();//嘴角beginPath();fillStyle="#fdd06b"lineWidth=3;strokeStyle="#ca5939";moveTo(190,230);bezierCurveTo(160,175,265,190,230,230); stroke();fill();closePath();beginPath();fillStyle="#fdd06b"lineWidth=3;strokeStyle="#ca5939";moveTo(350,230);bezierCurveTo(325,175,435,190,395,230); stroke();fill();closePath();//牙beginPath();strokeStyle="#000";lineWidth=2;fillStyle="#fff";moveTo(275,272);lineTo(275,292);lineTo(295,292);lineTo(295,272);moveTo(300,272);lineTo(300,292);lineTo(320,292);lineTo(320,271);//rect(297,252,20,20);fill();stroke();closePath();//嘴beginPath();strokeStyle="#000";lineWidth=3;bezierCurveTo(210,220,290,340,380,220); stroke();closePath();beginPath();strokeStyle="#000";lineWidth=2;bezierCurveTo(205,225,205,215,220,220); stroke();closePath();beginPath();strokeStyle="#000";lineWidth=2;bezierCurveTo(370,220,380,215,385,225); stroke();closePath();//鼻子beginPath();strokeStyle="#000";lineWidth=3;fillStyle="#f5e262";moveTo(290,215);bezierCurveTo(265,170,340,185,300,225); stroke();fill();closePath();//下巴beginPath();strokeStyle="#cb662e";lineWidth=2;bezierCurveTo(250,305,270,330,290,310); quadraticCurveTo(300,305,310,310); quadraticCurveTo(330,330,350,305); shadowColor="#cb662e";shadowOffsetX=0;shadowOffsetY=-3;shadowBlur=10;stroke();closePath();//雀斑beginPath();fillStyle="#bf7627";arc(197,205,2,0,Math.PI*2,true);fill();closePath();beginPath();fillStyle="#bf7627";arc(210,214,2,0,Math.PI*2,true);fill();closePath();beginPath();fillStyle="#bf7627";arc(218,207,2,0,Math.PI*2,true); fill();closePath();beginPath();fillStyle="#bf7627";arc(367,205,2,0,Math.PI*2,true); fill();closePath();beginPath();fillStyle="#bf7627";arc(390,206,2,0,Math.PI*2,true); fill();closePath();beginPath();fillStyle="#bf7627";arc(380,213,2,0,Math.PI*2,true); fill();closePath();//皮鞋//左beginPath();strokeStyle="#000";fillStyle="#000";lineWidth=4;shadowColor="#000";shadowOffsetX=0;shadowOffsetY=0;shadowBlur=0;arc(180,577,11,0,Math.PI*2,true); bezierCurveTo(185,560,197,575,207,560); moveTo(207,560);lineTo(217,560);quadraticCurveTo(227,570,217,585); quadraticCurveTo(197,580,180,585); quadraticCurveTo(207,561,185,570);rect(207,585,10,4)stroke();fill();//ctx.rotate(m*Math.PI/180)closePath();//右beginPath();strokeStyle="#000";fillStyle="#000";lineWidth=4;shadowColor="#000";shadowOffsetX=0;shadowOffsetY=0;shadowBlur=0;arc(405,577,11,0,Math.PI*2,true); bezierCurveTo(400,560,388,575,378,560); moveTo(378,560);lineTo(368,560);quadraticCurveTo(358,570,368,585); quadraticCurveTo(388,580,405,585); quadraticCurveTo(422,561,400,570);rect(368,585,10,4)stroke();fill();//ctx.rotate(m*Math.PI/180)closePath();//白点beginPath();strokeStyle="#f5e262";fillStyle="#c4b127";fill();EvenCompEllipse(ctx,160,100,10,15); EvenCompEllipse(ctx,150,150,5,7); EvenCompEllipse(ctx,200,320,7,10) EvenCompEllipse(ctx,225,350,11,16) EvenCompEllipse(ctx,425,120,11,16) EvenCompEllipse(ctx,410,320,9,12) EvenCompEllipse(ctx,380,340,6,9)closePath();}function EvenCompEllipse(ctx,x,y,a,b){ctx.save();//选择a、b中的较大者作为arc方法的半径参数var r=(a>b)?a:b;var ratioX=a/r;//横轴缩放比率var ratioY=b/r;//纵轴缩放比率ctx.scale(ratioX,ratioY);//进行缩放（均匀压缩）ctx.beginPath();//从椭圆的左端点开始逆时针绘制ctx.moveTo((x+a)/ratioX,y/ratioY);ctx.arc(x/ratioX,y/ratioY,r,0,2*Math.PI); ctx.closePath();ctx.stroke();ctx.fill();ctx.restore();};</script></html>。

HTML实现代码雨源码及效果示例

HTML实现代码⾬源码及效果⽰例最近学习了HTML，今天写个HTML代码⾬，然后下⾯⽤HTML和js也写了⼀个，给⾃⼰留点笔记先看看效果1、绿⾊：2、彩⾊：3、背景⾊：4、绿⾊逐渐变浅：源代码：<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>Code -by ZhenYu.Sha</title><style type="text/css">html, body {width: 100%;height: 100%;}body {background: #000;overflow: hidden;</style></head><body><canvas id="cvs"></canvas><script type="text/javascript">var cvs = document.getElementById("cvs");var ctx = cvs.getContext("2d");var cw = cvs.width = document.body.clientWidth;var ch = cvs.height = document.body.clientHeight;//动画绘制对象var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; var codeRainArr = []; //代码⾬数组var cols = parseInt(cw / 14); //代码⾬列数var step = 16; //步长，每⼀列内部数字之间的上下间隔ctx.font = "bold 26px microsoft yahei"; //声明字体，个⼈喜欢微软雅⿊function createColorCv() {//画布基本颜⾊ctx.fillStyle = "#242424";ctx.fillRect(0, 0, cw, ch);}//创建代码⾬function createCodeRain() {for (var n = 0; n < cols; n++) {var col = [];//基础位置，为了列与列之间产⽣错位var basePos = parseInt(Math.random() * 300);//随机速度 3~13之间var speed = parseInt(Math.random() * 10) + 3;//每组的x轴位置随机产⽣var colx = parseInt(Math.random() * cw)//绿⾊随机var rgbr = 0;var rgbg = parseInt(Math.random() * 255);var rgbb = 0;//ctx.fillStyle = "rgb("+r+','+g+','+b+")"for (var i = 0; i < parseInt(ch / step) / 2; i++) {var code = {x: colx,y: -(step * i) - basePos,speed: speed,// text : parseInt(Math.random()*10)%2 == 0 ? 0 : 1 //随机⽣成0或者1text: ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "s", "t", "u", "v", "w", "x", "y", "z"][parseInt(Math.random() * 11)], //随机⽣成字母数组中的⼀个 color: "rgb(" + rgbr + ',' + rgbg + ',' + rgbb + ")"}col.push(code);}codeRainArr.push(col);}}//代码⾬下起来function codeRaining() {//把画布擦⼲净ctx.clearRect(0, 0, cw, ch);//创建有颜⾊的画布//createColorCv();for (var n = 0; n < codeRainArr.length; n++) {//取出列col = codeRainArr[n];//遍历列，画出该列的代码for (var i = 0; i < col.length; i++) {var code = col[i];if (code.y > ch) {//如果超出下边界则重置到顶部code.y = 0;} else {//匀速降落code.y += code.speed;}//1 颜⾊也随机变化//ctx.fillStyle = "hsl("+(parseInt(Math.random()*359)+1)+",30%,"+(50-i*2)+"%)";//2 绿⾊逐渐变浅// ctx.fillStyle = "hsl(123,80%,"+(30-i*2)+"%)";//3 绿⾊随机// var r= 0;// var g= parseInt(Math.random()*255) + 3;// var b= 0;// ctx.fillStyle = "rgb("+r+','+g+','+b+")";//4 ⼀致绿ctx.fillStyle = code.color;//把代码画出来ctx.fillText(code.text, code.x, code.y);}}requestAnimationFrame(codeRaining);}//创建代码⾬createCodeRain();//开始下⾬吧 GO>>requestAnimationFrame(codeRaining);</script></body></html>更多代码⾬的⽂章请参考我的其它⽂章：“代码⾬”js+css+html实现HTML代码：<!DOCTYPE html><html><head><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="css/ok.css"><title>code by-zhenyu.sha</title></head><canvas id="canvas"></canvas></body><script src="/jquery/jquery-1.10.2.js"></script><script src="/demos/canvas/matrix/stats.min.js"></script><script type="text/javascript" src="js/ok.js"></script></html>js代码：(function() {var lastTime = 0;var vendors = ['ms', 'moz', 'webkit', 'o'];for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||window[vendors[x] + 'CancelRequestAnimationFrame'];}if (!window.requestAnimationFrame)window.requestAnimationFrame = function(callback, element) {var currTime = new Date().getTime();var timeToCall = Math.max(0, 16 - (currTime - lastTime));var id = window.setTimeout(function() {callback(currTime + timeToCall);},timeToCall);lastTime = currTime + timeToCall;return id;};if (!window.cancelAnimationFrame)window.cancelAnimationFrame = function(id) {clearTimeout(id);};}());// statsvar stats = new Stats();stats.setMode(0);stats.domElement.style.position = 'absolute';stats.domElement.style.left = '0px';stats.domElement.style.top = '0px';document.body.appendChild(stats.domElement);var M = {settings: {COL_WIDTH: 20,COL_HEIGHT: 25,VELOCITY_PARAMS: {min: 4,max: 8},CODE_LENGTH_PARAMS: {min: 20,max: 40}},animation: null,c: null,ctx: null,lineC: null,ctx2: null,WIDTH: window.innerWidth,HEIGHT: window.innerHeight,COLUMNS: null,canvii: [],font: '30px matrix-code',letters: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '$', '+', '-', '*', '/', '=', '%', '"', '\'', '#', '&', '_', '(', ')', ',', '.', ';', ':', '?', '!', '\\', '|', '{', '}', '<', '>', '[', ']', '^', '~'], codes: [],createCodeLoop: null,codesCounter: 0,init: function() {M.c = document.getElementById('canvas');M.ctx = M.c.getContext('2d');M.c.width = M.WIDTH;M.c.height = M.HEIGHT;M.ctx.shadowBlur = 0;M.ctx.fillStyle = '#000';M.ctx.fillRect(0, 0, M.WIDTH, M.HEIGHT);M.ctx.font = M.font;M.COLUMNS = Math.ceil(M.WIDTH / M.settings.COL_WIDTH);for (var i = 0; i < M.COLUMNS; i++) {M.codes[i] = [];M.codes[i][0] = {'open': true,'position': {'x': 0,'y': 0},'strength': 0};}M.loop();M.createLines();M.createCode();// not doing this, kills CPU// M.swapCharacters();window.onresize = function() {window.cancelAnimationFrame(M.animation);M.animation = null;M.ctx.clearRect(0, 0, M.WIDTH, M.HEIGHT);M.codesCounter = 0;M.ctx2.clearRect(0, 0, M.WIDTH, M.HEIGHT);M.WIDTH = window.innerWidth;M.HEIGHT = window.innerHeight;M.init();};},loop: function() {M.animation = requestAnimationFrame(function() {M.loop();});M.draw();stats.update();},draw: function() {var velocity, height, x, y, c, ctx;// slow fade BG colourM.ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';M.ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';M.ctx.fillRect(0, 0, M.WIDTH, M.HEIGHT);M.ctx.globalCompositeOperation = 'source-over';for (var i = 0; i < M.COLUMNS; i++) {// check member of array isn't undefined at this pointx = M.codes[i][0].position.x;y = M.codes[i][0].position.y - height;c = M.codes[i][0].canvas;ctx = c.getContext('2d');M.ctx.drawImage(c, x, y, M.settings.COL_WIDTH, height);if ((M.codes[i][0].position.y - height) < M.HEIGHT) {M.codes[i][0].position.y += velocity;} else {M.codes[i][0].position.y = 0;}}}},createCode: function() {if (M.codesCounter > M.COLUMNS) {clearTimeout(M.createCodeLoop);return;}var randomInterval = M.randomFromInterval(0, 100);var column = M.assignColumn();if (column) {var codeLength = M.randomFromInterval(M.settings.CODE_LENGTH_PARAMS.min, M.settings.CODE_LENGTH_PARAMS.max);var codeVelocity = (Math.random() * (M.settings.VELOCITY_PARAMS.max - M.settings.VELOCITY_PARAMS.min)) + M.settings.VELOCITY_PARAMS.min; var lettersLength = M.letters.length;M.codes[column][0].position = {'x': (column * M.settings.COL_WIDTH),'y': 0};M.codes[column][0].velocity = codeVelocity;M.codes[column][0].strength = M.codes[column][0].velocity / M.settings.VELOCITY_PARAMS.max;for (var i = 1; i <= codeLength; i++) {var newLetter = M.randomFromInterval(0, (lettersLength - 1));M.codes[column][i] = M.letters[newLetter];}M.createCanvii(column);M.codesCounter++;}M.createCodeLoop = setTimeout(M.createCode, randomInterval);},createCanvii: function(i) {var codeLen = M.codes[i].length - 1;var canvHeight = codeLen * M.settings.COL_HEIGHT;var velocity = M.codes[i][0].velocity;var strength = M.codes[i][0].strength;var text, fadeStrength;var newCanv = document.createElement('canvas');var newCtx = newCanv.getContext('2d');newCanv.width = M.settings.COL_WIDTH;newCanv.height = canvHeight;for (var j = 1; j < codeLen; j++) {text = M.codes[i][j];newCtx.globalCompositeOperation = 'source-over';newCtx.font = '30px matrix-code';if (j < 5) {newCtx.shadowColor = 'hsl(104, 79%, 74%)';newCtx.shadowOffsetX = 0;newCtx.shadowOffsetY = 0;newCtx.shadowBlur = 10;newCtx.fillStyle = 'hsla(104, 79%, ' + (100 - (j * 5)) + '%, ' + strength + ')';} else if (j > (codeLen - 4)) {fadeStrength = j / codeLen;fadeStrength = 1 - fadeStrength;newCtx.shadowOffsetX = 0;newCtx.shadowOffsetY = 0;newCtx.shadowBlur = 0;newCtx.fillStyle = 'hsla(104, 79%, 74%, ' + (fadeStrength + 0.3) + ')';} else {newCtx.shadowOffsetX = 0;newCtx.shadowOffsetY = 0;newCtx.shadowBlur = 0;newCtx.fillStyle = 'hsla(104, 79%, 74%, ' + strength + ')';}newCtx.fillText(text, 0, (canvHeight - (j * M.settings.COL_HEIGHT)));}M.codes[i][0].canvas = newCanv;},swapCharacters: function() {var randomCodeIndex;var randomCode;var randomCodeLen;var randomCharIndex;var newRandomCharIndex;var newRandomChar;for (var i = 0; i < 20; i++) {randomCodeIndex = M.randomFromInterval(0, (M.codes.length - 1));randomCode = M.codes[randomCodeIndex];randomCodeLen = randomCode.length;randomCharIndex = M.randomFromInterval(2, (randomCodeLen - 1));newRandomCharIndex = M.randomFromInterval(0, (M.letters.length - 1));newRandomChar = M.letters[newRandomCharIndex];randomCode[randomCharIndex] = newRandomChar;}M.swapCharacters();},createLines: function() {M.linesC = document.createElement('canvas');M.linesC.width = M.WIDTH;M.linesC.height = M.HEIGHT;M.linesC.style.position = 'absolute';M.linesC.style.top = 0;M.linesC.style.left = 0;M.linesC.style.zIndex = 10;document.body.appendChild(M.linesC);var linesYBlack = 0;var linesYWhite = 0;M.ctx2 = M.linesC.getContext('2d');M.ctx2.beginPath();M.ctx2.lineWidth = 1;M.ctx2.strokeStyle = 'rgba(0, 0, 0, 0.7)';while (linesYBlack < M.HEIGHT) {M.ctx2.moveTo(0, linesYBlack);M.ctx2.lineTo(M.WIDTH, linesYBlack);linesYBlack += 5;}M.ctx2.lineWidth = 0.15;M.ctx2.strokeStyle = 'rgba(255, 255, 255, 0.7)';while (linesYWhite < M.HEIGHT) {M.ctx2.moveTo(0, linesYWhite + 1);M.ctx2.lineTo(M.WIDTH, linesYWhite + 1);linesYWhite += 5;}assignColumn: function() {var randomColumn = M.randomFromInterval(0, (M.COLUMNS - 1));if (M.codes[randomColumn][0].open) {M.codes[randomColumn][0].open = false;} else {return false;}return randomColumn;},randomFromInterval: function(from, to) {return Math.floor(Math.random() * (to - from + 1) + from);},snapshot: function() {window.open(M.c.toDataURL());}};function eventListenerz() {var controlToggles = document.getElementsByClassName('toggle-info');var controls = document.getElementById('info');var snapshotBtn = document.getElementById('snapshot');function toggleControls(e) {e.preventDefault();controls.className = controls.className === 'closed' ? '' : 'closed';}for (var j = 0; j < 2; j++) {controlToggles[j].addEventListener('click', toggleControls, false);}snapshotBtn.addEventListener('click', M.snapshot, false);}window.onload = function() {M.init();eventListenerz();};css代码：@import url("/css?family=Carrois+Gothic");@font-face {font-family: 'matrix-code';src: url('/demos/canvas/matrix/font/matrix-code.eot?#iefix') format('embedded-opentype'), url('/demos/canvas/matrix/font/matrix-code.woff') format('woff'), url('/demos/canvas/matrix/font/mat }html,body {-webkit-font-smoothing: antialiased;font: normal 12px/14px "Carrois Gothic", sans-serif;width: 100%;height: 100%;margin: 0;overflow: hidden;color: #fff;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}body {background: black;}#stats {z-index: 100;}#info {background: rgba(0, 0, 0, 0.7);position: fixed;bottom: 0;left: 0px;width: 250px;padding: 10px 20px 20px;z-index: 100;-webkit-transform-origin: bottom center;-moz-transform-origin: bottom center;-o-transform-origin: bottom center;transform-origin: bottom center;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: -webkit-transform .5s ease-in-out;-moz-transition: -moz-transform .5s ease-in-out;-o-transition: -o-transform .5s ease-in-out;transition: transform .5s ease-in-out;}#info.closed {-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);-o-transform: rotate(180deg);transform: rotate(180deg);}.toggle-info {position: absolute;display: block;height: 10px;background: rgba(0, 0, 0, 0.8);width: 290px;left: 0;text-align: center;padding: 3px 0 7px;text-decoration: none;color: white;text-shadow: none;}.toggle-info:hover {background: rgb(0, 0, 0);}#close {top: -20px;}#open {bottom: -20px;-webkit-transform: rotate(-180deg);-moz-transform: rotate(-180deg);-o-transform: rotate(-180deg);transform: rotate(-180deg);}button {background: rgba(255, 255, 255, 0.2);color: #fff;border: 0;border-radius: 2px;padding: 7px 10px;box-shadow: 0 0 3px 0px rgba(255, 255, 255, 0.3);button:hover {background: rgba(255, 255, 255, 0.1);}pa {color: #fff;}pa:hover {color: #EFFDEB;text-shadow: 0px 0px 5px #75AD61;}到此这篇关于HTML实现代码⾬源码及效果⽰例的⽂章就介绍到这了,更多相关HTML代码⾬内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！。

HTML基础知识及应用

这里的颜色值可以是一个十六进制数(用“#”作为前缀)，也可以是以下16种颜色名称如：Black = "#000000“ Green = "#008000" Red = "#FF0000“ Blue = "#0000FF“

位置控制
通过ALIGN属性可以选择文字或图片的对齐方式，LEFT表示向左对齐，RIGHT表示向右对齐，CENTER表示居中。基本语法如下：
<DL> <DT>第一项 <DD>叙述第一项的定义 <DT>第二项 <DD>叙述第二项的定义 <DT>第三项 <DD>叙述第三项的定义
</DL> 查看例子

TABLE表格表格
表格的基本结构表格的标题表格的尺寸设置表格内文字的对齐、表格内文字的对齐、t;DIV ALIGN=#> #＝left／right／center
另外，ALIGN属性也常常用在其它标签中，引起其内容位置的变动。如：<P ALIGN=#>
<HR ALIGN=#> <H1 ALIGN=#〉 #＝left／right／center

列表
无序号列表序号列表定义性列表
<caption align=top> ... </caption>
设置标题位于表格下方：
<caption align=bottom> ... </caption>

表格尺寸设置表格的大小
一般情况下，表格的总长度和总宽度是根据各行和各列的总和自动调整的，如果我们要直接固定表格的大小，可以使用下列方式： <table width=n1 height=n2> width和height属性分别指定表格一个固定的宽度和长度，n1和n2可以用像素来表示，也可以用百分比（与整个屏幕相比的大小比例）来表示