<span style="color: rgb(255, 0, 0); "><strong>HTML5 学习</strong></span><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第一个网站</title>
</head>
<body>
学习1
<font style="font-size:111px" color="red">hello world</font>
<h1>hello®world</h1>
<h1>δ</h1>
<br />
<b> <font size="7" color="blue">hello world</font></b><br />
<a href="www.baidu.com" target="_self">aaaaaaaa</a><br />
<br />
<img src="https://www.baidu.com/img/bd_logo1.png" width="380px" border="5" />
<br />
<table border="5" align="center" width="888px" bgcolor="royalblue" cellspacing="7" bordercolor="1" cellpadding="15PX">
<tr align="center">
<td>bbbbbbbbbb1</td>
<td>aaaaaaaaaa2</td>
<td>bbbbbbbbbb2</td>
</tr >
<tr align="center">
<td>bbbbbbbbbb1</td>
<td>aaaaaaaaaa2</td>
<td>bbbbbbbbbb2</td>
</tr>
<tr align="center">
<td>bbbbbbbbbb1</td>
<td>aaaaaaaaaa2</td>
<td>bbbbbbbbbb2</td>
</tr>
</table>
</body>
</html> <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第一个网站</title>
</head>
<body>
<table width="800px" height="27px" border="1" bordercolor="#ff00ff" cellspacing="0">
<tr align="center">
<td colspan="3">星期一菜谱</td>
</tr>
<tr align="center">
<td rowspan="2">荤菜</td>
<td>茄子</td>
<td>青椒</td>
</tr>
<tr align="center">
<td>青菜</td>
<td>豆腐</td>
</tr>
<tr align="center">
<td>土豆</td>
<td rowspan="3">荤菜</td>
<td>豆角</td>
</tr>
<tr align="center">
<td>豌豆</td>
<td rowspan="2">
<img width="35px" src="img/LB-5.jpg" />
</td>
</tr>
<tr align="center">
<td>豌豆</td>
</tr>
</table>
</body>
</html>HTML5 表格（课程表）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第一个网站</title>
</head>
<body>
<table width="600px" height="147px" border="1" bordercolor="#ff00ff" cellspacing="0">
<tr align="center">
<td colspan="1">课程表</td>
<td colspan="5">工作日</td>
<td colspan="2">周末</td>
</tr>
<strong>
<tr align="center" bgcolor="black" style="font-family: '微软雅黑';font-size: larger;color: red;">
<td >星期</td>
<td >星期一</td>
<td >星期二</td>
<td >星期三</td>
<td >星期四</td>
<td >星期五</td>
<td >星期六</td>
<td >星期日</td>
</tr>
</strong>
<tr align="center">
<td rowspan="4">上午</td>
<td >数学</td>
<td >音乐</td>
<td >语文</td>
<td >英语</td>
<td >生物</td>
<td rowspan="4">计算机</td>
<td rowspan="4">上自习</td>
</tr>
<tr align="center" >
<td >化学</td>
<td >物理</td>
<td >地理</td>
<td >政治</td>
<td >美术</td>
</tr>
<tr align="center" >
<td >美术</td>
<td >英语</td>
<td >语文</td>
<td >数学</td>
<td >体育</td>
</tr>
<tr align="center" >
<td >数学</td>
<td >体育</td>
<td >英语</td>
<td >生物</td>
<td >化学</td>
</tr>
<tr align="center">
<td rowspan="2">上午</td>
<td >数学</td>
<td >音乐</td>
<td >语文</td>
<td >英语</td>
<td >生物</td>
<td rowspan="4">计算机</td>
<td rowspan="4">上自习</td>
</tr>
<tr align="center" >
<td >化学</td>
<td >物理</td>
<td >地理</td>
<td >政治</td>
<td >美术</td>
</tr>
</table>
</body>
</html>
HTML5 添加背景图片：
<!DOCTYPE HTML>
<head>
<style type="text/css">
body
{
background: #ff0000 url(img/QQ图片20150821075230.ico) no-repeat fixed center ; <!--no-repeat fixed center 无重复固定中心-->
}
p.bottommargin
{
margin-bottom: 205px;
color: black;
border: solid thick green;
}
</style>
</head>
<body >
<p>This is a paragraph with no margin specified</p>
<p class="bottommargin">This is a paragraph with a specified bottom margin</p>
<p>This is a paragraph with no margin specified</p>
</body>
</html>9月20日
<!DOCTYPE HTML5>
<html>
<head>
<meta charset="utf-8" http-equiv=""/>
<title>你好!</title>
</head>
<body >
<hr size="7" color="red" width="677" align="center" /><br />
<h1>你好</h1><br />
<font face="楷体" style="font-size:190px;"><i><u><b>李斌</b></u></i></font><br />
<a href="img/HBuilder.png" target="_top"><font size="7" color="crimson" >souhu</font></a>
<form action="OK.html" method="get">
用户名：<input type="text" name="username" /><br /><br />
密 码：<input type="password" name="pwd" /><br /><br />
<input type="submit" value="登陆 " />
<input type="reset" value="重新填写 " /><br /><br /><br />
<input type="checkbox" name="v1" />香蕉<br />
<input type="checkbox" name="v1" />橘子<br />
<input type="radio" name="v1" />香蕉<br />
<input type="radio" name="v1" />橘子<br />
<input type="file" name="文件" />文件<br /><br />
出生地：
<select name="shiri">
<option value="">--选择--</option>
<option value="bj">北京</option>
<option value="gz">广州</option>
<option value="sh">上海</option>
</select><br />
留言：
<textarea cols="40" rows="10">请这里输入</textarea>
</form>
</body>
</html>9月26号
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<audio src="music/速度与激情.mp3" autoplay="autoplay"> aaaaaaaa </audio>
<div style="border:5px solid red;width:600px;margin: 73px 10px 0px 10px;">
你好
<img src="img/LB-2.jpg" width="400px" title="你大爷" />
</div>
<br />
<a href="https://www.baidu.com/"> <img src="img/啊啊啊啊啊啊啊啊啊啊啊啊.jpg" width="100px" title="这是我吗？" /></a>
<textarea style="height: 100px;width: 200px;"wrap="soft" name="你大爷" rows="5" cols="5"></textarea>
<br />
<table bgcolor="aqua" border="1" width="510px" height="410px">
<td bgcolor="red">你大爷</td>
<tr>
<th valign="top" align="left">你好</th>
<th bgcolor="blue">我是初学者</th>
</tr>
<tr>
<td>aaaaaaaaaaaa</td>
<td>bbbbbbbbbbbb</td>
</tr>
</table>
<marquee bgcolor="darkblue" behavior="alternate" direction="right" scrollamount="6" ><font color="deeppink">aaaaaaaaaaaaaaaa</font>我是李斌。。。。。。。。。。。
<img width="80px" height="90px" src="img/啊啊啊啊啊啊啊啊啊啊啊啊.jpg" />
</marquee>
</body>
</html><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<table width="100%" height="100%" border="0" align="center" cellpadding="0">
<tr height="50px">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr height="330px">
<td width="250px"> </td>
<td>
<table width="852px" height="563px" background="img/email.jpg" border="0">
<tr height="160px">
<td> </td>
<td> </td>
</tr>
<tr height="90px">
<td width="330px"> </td>
<td>
<form action="qqqqq.html" method="post">
<table border="0" align="left" height="100%">
<tr>
<td>
用户名：
</td>
<td>
<input type="text" name="username" />
</td>
</tr>
<tr>
<td>
密 码：
</td>
<td>
<input type="password" name="passwd" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交" />
<input type="reset" value="重来" />
</td>
</tr>
<tr>
<td colspan="2">
<a href="https://www.baidu.com/">找回密码</a>
<a href="https://www.baidu.com/">注册新用户</a>
</td>
</tr>
</table>
</form>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</td>
<td> </td>
</tr>
<tr height="25px">
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>CSS滤镜（黑白）：
<style type="text/css">
/*给网页添加 黑白滤镜*/
html{
/*兼容FF*/
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
/*兼容IE内核*/
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
/*兼容其它，谷歌之类的*/
-webkit-filter: grayscale(1);
}
</style><!doctype html>
<html lang="en">
<head>
<link type="text/css" href="css/h5.css" rel="stylesheet" />
<meta charset="UTF-8" />
<title>DIV+CSS</title>
</head>
<body>
<div class="style1">
<table>
<tr>
<td>你好</td>
<td>卧槽</td>
</tr>
<tr>
<td>你是谁</td>
<td>我是谁</td>
</tr>
<tr>
<td>你大舅</td>
<td>你二舅</td>
</tr>
</table>
</div>
<span class="style1" id="mulu1">栏目1</span>
<br />
<span class="style1" id="mulu2">栏目2</span>
<br />
<img src="img/TAM-1.jpg" width="400px" height="300px" class="grey"/>
</body>
</html>css文件：
.style1
{
margin: 0px 0px 0px 0px;
width: 333px;
height: 222px;
background: white;
}
.style1 table {
border: 2px solid red;
width: 333px;
height: 222px;
}
.style1 table td {
border: 1px solid yellow;
text-align: center;
font-family: "黑体";
font-weight: 10000;
color: aqua;
}
#mulu1 {
color: red;
}
#mulu2 {
color: green;
}
.grey{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: url(gray.svg#grayscale);
filter: gray;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
</pre><p><strong><span style="color:#ff0000">javascript 学习</span></strong></p><pre name="code" class="css"> <pre name="code" class="html"><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script>
document.write('<table align="center" border="1" width="800px">');
for (var i=0; i<1000;) {
if (i%10==0){
var bg="#ffffff";
if(i%20==0){
bg="#cccccc";
}
document.write('<tr bgcolor="'+bg+'">');}
document.write('<td style="color: red;">'+(i++)+'</td>');
if (i%10==0)
document.write('<tr>');
}
</script>
</head>
<body>
</body>
</html>
JavaScript 实现数组转置：<pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Barely a script at all</title>
<script language="JavaScript">
var a = [
[1, 2, 3, 4],
[5, 6, 7, 8],
[9, 8, 7, 6]
];
document.write("转置前：<br />");
for (var i = 0; i < a.length; i++) {
for (var j = 0; j < a[i].length; j++) {
document.writeln(a[i][j]);
}
document.write("<br />");
}
var b = new Array();
for (var k = 0; k < a[0].length; k++) {
b[k] = new Array();
for (var j = 0; j < a.length; j++) {
b[k][j] = "";
}
}
// document.writeln(k);
// document.writeln(j);
document.write("转置后：<br />");
// document.write("转置后：<br />");
for (var i = 0; i < a.length; i++) {
for (var j = 0; j < a[i].length; j++) {
b[j][i] = a[i][j];
}
}
// document.write(b);
for (var i = 0; i < b.length; i++) {
for (var j = 0; j < b[i].length; j++) {
document.writeln(b[i][j]);
}
document.write("<br />");
}
// document.writeln(i);
</script>
</head>
<body>
</body>
</html>
扫一扫
375
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
