web 前端学习笔记(1)

 <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&reg;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>


 










                
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值