python学习总结五

本周主要学习了Web方面的知识，主要有Html,CSS,Javascript等
1.





<!doctype html>

<html>
<head> 
<meta charset="utf-8"> 
<title>熊彪的个人空间</title> 
<style>
h1 {color:#ff0000;font-size: 3cm;}

</style>

</head>
<body> 
<h1 title="这是一个提示信息">hello,world!</h1> 
<h2 style="background-color:yellow">熊彪，你好</h2> 
<button onclick="foo()">OK</button>
<script>
function foo(){window.alert('这是黄色网页，禁止观看');}
</script>
</body>

</html>

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a id="top"></a> 
<audio controls autoplay loop> 
<source src="./resours/sd.mp3" type="audio/mp3">
</audio>
<video controls width="400px">
<source src=".resours/sef.mov" type="">
</video>

<h1>Hello,world!</h1>
<hr>
<p>床前明月光<sup>1</sup></p>
<p>疑是地上<sub>2</sub>霜</p>
<p>举头望<del>明月</del></p>
<p>低头思<strong><em>故乡</em></strong></p>
<q>其实地上本没有路，走的人多了也便成了路</q>
<h3>熊彪的个人爱好</h3>
<ul>
<li>吃</li>
<li>喝</li>
<li>嫖</li>
<li>赌</li>
<li>毒</li>
</ul>
<ol>
<li>吃</li>
<li>喝</li>
<li>嫖</li>
<li>日</li>
<li>搞</li>
</ol>
<dl>
<dt>
<figure>
<img src="./images/12.jpg" alt="美女">
<figcaption>图1.这是什么图</figcaption>
</figure>
</dt>
<dd>每天晚上10点钟开始看黄色</dd>

<dd>每晚12点开始听淫歌</dd>

<dd>请发挥你的想象力去日本搞妓女</dd>
</dl>
<table border="1">
<caption>学生成绩表</caption>
<tr>
<th></th>
<th>姓名</th>
<th>python</th>
<th>js</th>
<th>jv</th>
</tr>
<tr>
<td rowspan="2">1801</td> 

<td>货松</td>
<td>50</td>
<td colspan="2">60</td>
</tr>
<tr>
<td>程程</td>
<td>20</td>
<td>29</td>
<td>50</td>
</tr>

</table>
<form action="" method="post" enctype="multipart/form-data">

<fieldset>
<legend>必填信息</legend>
<p>
<input type="text" name="username" placeholder="请输入你的用户名" required>
</p>
<p>
<input type="password" name="password" placeholder="请输入密码" required>
</p>
<p>
<input type="radio" name="gender" checked>男
<input type="radio" name="gender">女
</p>
<p>
<input type="checkbox" name="fav" checked>阅读
<input type="checkbox" name="fav">健身
<input type="checkbox" name="fav">运动
<input type="checkbox" name="fav">旅游
<input type="checkbox" name="fav" checked>交友
</p>
<p>
<input type="date" name="birthday">
</p>
<p>
<input type="email" name="email" placeholder="请输入你的邮箱" required>
</p>
</fieldset>
<fieldset>
<legend>选填信息</legend>
<p>
<select name="prov" >
<option value="北京">北京</option>
<option value="天津">天津</option>
<option value="上海">上海</option>
<option value="四川">四川</option>
<option value="湖南" selected>湖南</option>
</select>
</p>
<p>
<textarea rows="5" cols="30" name="熊彪"></textarea>
</p>
<p>
<input type="file" name="file">
</p>
</fieldset>
<p>
<input type="submit" value="立即注册">
<input type="reset" value="重新填写">
</p>

</form>


<a href="http://www.baidu.com" target="_blank">百度一下</a> 
<a href="index.html">我的首页</a>
<a href="#top">回顶部</a>

<a href="mailto:[email protected]">联系站长</a>

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2312605822&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:2312605822:53" alt="点我聊一聊" title="点我聊一聊"/></a>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./css/style.css">

</head>
<body>
<h1 id="shit" class="bar fo">Hello,世界!</h1>
<h1>哈哈，老孙来也</h1>

<h2 style="color: red;font-size:300px;">滚犊子，世界</h2>
<p>
My father was a self-taught mandolin player. He was one of the best string instrument players in our town. He could not read music, but if he heard a tune a few times, he could play it. When he was younger, he was a member of a small country music b
</p>




<p>Hello,world!</p>


<iframe src="https://map.baidu.com" width="400" height="300" scrolling="no" frameborder="no"></iframe>

<div>
<a href="http://www.qq.com">QQ</a>
</div>
<a href="http://www.baidu.com"></a>

</body>
</html>

4.css

/*通配符选择器*/
* {
border: 2px solid red;
color:gray;
}
/*标签选择器/id选择器/class类选择器*/
/*标签选择器是*开头，它选中所有内容。id选择器是#符合开头，它的优先级最高，
最具体。类选择器是.号开头，用得最普遍，因为它是最灵活的，它是遵循就近原则。
如果在属性后面加了！important，那么它就是优先级最高的，遵循重要性原则。*/

/*@font-face{
font-family:'这里写字体名'
src:url('这里写路径');
}这就是标签选择器*/
#shit{
color:yellow;
}
.fo {
height: 200px;
width: 1000px;

color:rgba(255,0,0,0.5);
}
/*opacity: 0.5; 这个表示透明度*/
.bar {
color:#0000ff !important;
background-color: lightgray;
font: italic small-caps bolder 72px/200px Arial ,'宋体';
/*line-height: 200px;
font-family: 'Courier New',Arial,隶书，宋体;
font-size:500%;
font-weight:bold;
font-style: italic;*/
letter-spacing: 30px;
word-spacing: 100px;
text-align: center;
text-decoration: line-through;
overflow: scroll;
}
p:first-line{
font-size:36px;
font-weight: bolder;
text-transform: lowercace
}

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<h1>Hello,world!</h1>
<ul class="menu">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<p>第一个段落标签</p>
<p>第二个段落标签</p>
<img class="photo" src="img/two-years.gif" alt="" />
<a href="http://www.baidu.com">百度一下</a>
<div>
<p>
第三个段落标签
<div>
<a href="http://www.126.com">126邮箱</a>
</div>
</p>
</div>
</body>

</html>

/*定位*/
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
*{
border: 1px solid blue;
}
body{
width:80%;
margin: 10px auto;
}
p{
font:18px/20px '宋体';
}
p first-letter{
font-size:36px;
}
.foo{
position: fixed;/*relative相对定位,absolute
绝对定位*/

top: 50px;
left: 100px;
}
#adv{
width:200px;
height: 200px;
position: fixed;
right: 50px;
top: 120px;
background-color:blue ;
color:yellow;
/*display: none;* 这个的作用是去除掉，删掉之后不占位置*/
}
#bar{
width: 300px;
height: 200px;
background-color: red;
visibility: hidden;/*这个的作用是隐藏这个部分，但是位置还占着*/
}
</style>
</head>
<body>
<div id="adv">
此广告位招租
</div>
<p>
计算机系统的特点是能进行精确、快速的计算和判断,而且通用性好,使用容易
，还能联成网络。①计算：一切复杂的计算，几乎都可用计算机通过算术运算
和逻辑运算来实现。②判断：计算机有判别不同情况、选择作不同处理的能力,
故可用于管理、控制、对抗、决策、推理等领域。③存储：计算机能存储巨量信
息。④精确：只要字长足够，计算精度理论上不受限制。⑤快速：计算机一次操
作所需时间已小到以纳秒计。⑥通用：计算机是可编程的，不同程序可实现不同
的应用。⑦易用：丰富的高性能软件及智能化的人-机接口,大大方便了使用。
⑧联网：多个计算机系统能超越地理界限，借助通信网络，共享远程信息与软件
资源。

</p>
<div id="bar">
此广告位招租
</div>
<p>
计算机系统的特点是能进行精确、快速的计算和判断,而且通用性好,使用容易
，还能联成网络。①计算：一切复杂的计算，几乎都可用计算机通过算术运算
和逻辑运算来实现。②判断：计算机有判别不同情况、选择作不同处理的能力,
故可用于管理、控制、对抗、决策、推理等领域。③存储：计算机能存储巨量信
息。④精确：只要字长足够，计算精度理论上不受限制。⑤快速：计算机一次操
作所需时间已小到以纳秒计。⑥通用：计算机是可编程的，不同程序可实现不同
的应用。⑦易用：丰富的高性能软件及智能化的人-机接口,大大方便了使用。
⑧联网：多个计算机系统能超越地理界限，借助通信网络，共享远程信息与软件
资源。
</p>
<p>
计算机系统的特点是能进行精确、快速的计算和判断,而且通用性好,使用容易
，还能联成网络。①计算：一切复杂的计算，几乎都可用计算机通过算术运算
和逻辑运算来实现。②判断：计算机有判别不同情况、选择作不同处理的能力,
故可用于管理、控制、对抗、决策、推理等领域。③存储：计算机能存储巨量信
息。④精确：只要字长足够，计算精度理论上不受限制。⑤快速：计算机一次操
作所需时间已小到以纳秒计。⑥通用：计算机是可编程的，不同程序可实现不同
的应用。⑦易用：丰富的高性能软件及智能化的人-机接口,大大方便了使用。
⑧联网：多个计算机系统能超越地理界限，借助通信网络，共享远程信息与软件
资源。

</p>
<p>
计算机系统的特点是能进行精确、快速的计算和判断,而且通用性好,使用容易
，还能联成网络。①计算：一切复杂的计算，几乎都可用计算机通过算术运算
和逻辑运算来实现。②判断：计算机有判别不同情况、选择作不同处理的能力,
故可用于管理、控制、对抗、决策、推理等领域。③存储：计算机能存储巨量信
息。④精确：只要字长足够，计算精度理论上不受限制。⑤快速：计算机一次操
作所需时间已小到以纳秒计。⑥通用：计算机是可编程的，不同程序可实现不同
的应用。⑦易用：丰富的高性能软件及智能化的人-机接口,大大方便了使用。
⑧联网：多个计算机系统能超越地理界限，借助通信网络，共享远程信息与软件
资源。

</p>
<p>
计算机系统的特点是能进行精确、快速的计算和判断,而且通用性好,使用容易
，还能联成网络。①计算：一切复杂的计算，几乎都可用计算机通过算术运算
和逻辑运算来实现。②判断：计算机有判别不同情况、选择作不同处理的能力,
故可用于管理、控制、对抗、决策、推理等领域。③存储：计算机能存储巨量信
息。④精确：只要字长足够，计算精度理论上不受限制。⑤快速：计算机一次操
作所需时间已小到以纳秒计。⑥通用：计算机是可编程的，不同程序可实现不同
的应用。⑦易用：丰富的高性能软件及智能化的人-机接口,大大方便了使用。
⑧联网：多个计算机系统能超越地理界限，借助通信网络，共享远程信息与软件
资源。

</p>
</body>

</html>

/*浮动*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#one,#two,#three{
/*设置浮动-脱离正常的文档流*/
width: 300px;
height: 300px;
/*float: right;*/
position: absolute;
z-index: 10;

}
#one{
top: 50px;
left: 50px;
background-color: red;
}
#two{
top: 100px;
left: 100px;
background-color: green;
z-index: 20;
}
#three{
top: 150px;
left: 150px;
background-color: blue;
}
#four{
/*清除浮动-恢复正常的文档流*/
clear: both;
width: 200px;
height: 100px;
color:crimson;
border: 1px solid blue;
}
</style>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four">Hello!!!</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
font-family:verdana ,'宋体';
}
body{
width: 960px;
margin: 10px auto;
}
#header,#main,#footer{
background-color: lightgray;
margin: 20px 0;
clear: both;
}
#header h1{
height: 60px;
line-height: 60px;
text-align: center;
}
#nav{
height: 40px;
text-align: center;
}
#nav ul{
margin-top: 10px;
}
#nav ul li{
line-height: 35px;
width: 100px;
margin: 0 10px;
display: inline-block;
}
a{
text-decoration: none;
}
a:link,a:visited,a:active{
color:black;
}/*这里是伪类*/
#nav ul li:hover{
border-bottom: 4px solid red;
}
.feature{
height: 250px;
text-align:center;
background-color: aquamarine;
}
.one,.two,.three{
width: 300px;
height: 150px;
float: left;
}
.one{
margin:10px 15px 0 0;
background-color: salmon;
}
.two{
margin:10px 15px ;
background-color: aqua;
}
.three{
margin: 10px 0 0 15px;
background-color: burlywood;
}
#footer{
text-align: center;
line-height: 45px;
height: 45px;
font-size: 2em;
}
</style>
</head>
<body>

<div id="header">
<h1>Logo</h1>
<div id="nav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Products</a></li>
<li><a href="">Services</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</div>
<div id="main">
<div class="feature">Feature</div>
<div class="one">Column One</div>
<div class="two">Column Two</div>
<div class="three">Column Three</div>

</div>
<div id="footer">
©Copyright 2011
</div>
</body>

</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="description" content=""/>
<title>用户登录</title>
<style >
body{
width:960px;
margin: 0 auto;
border: 1px solid red;
}
#login{
width:290px;
margin: 20px auto;
}
#login fieldset{
border-radius:5px ;
}
#login legend{
background-color: lightgray;
padding: 2px 15px;/*内边距*/
border-radius:5px ;
}
#login span{
display:inline-block;
width:60px;
}
#login input{
margin:20px 5px;/*外边距*/
border: none;

}
#login input[name^="user"]{
width:175px;
outline:none;
border-bottom:1px dashed darkgray ;
}
#login input[type="submit"]{
margin-left:195px ;
color:white;
background-color: chocolate;
border-radius:5px ;
}
#login input[type="submit"]:hover{
background-color: darkgreen;
cursor:pointer;/*这里的hover是伪类，鼠标放上去改动背景色*/
}
#data{

margin: 20px auto;
border-collapse:collapse ;/*边框合并*/
}
#data td.tl{
border-top-left-radius: 10px;
}
#data td.tr{
border-top-right-radius: 10px;
}
#data td{
border-bottom: 1px solid lightgray;
height: 60px;
}
#data td.first{
width:60px;
}
#data td.after{
width:60px;
}
#data tr.head{
background-color: cornflowerblue;
}
#data tr.odd{
background-color: azure;
}
#data tr.even{
background-color:beige ;
}
#data td.center{
text-align: center;
}

</style>
</head>
<body>

<form id="login" action="" method="post" >
<fieldset >
<legend>用户登录</legend>
<span>用户名:</span>
<input type="text" name="username" required/>

<span>密码:</span>
<input type="password" name="userpass" required />
<input type="submit" value="登录" />

</fieldset>
</form>
<table id="data" >
<tr>
<td></td>
<td>成都</td>
<td>北京</td>
<td>杭州</td>
</tr>
<tr>
<td>Python</td>
<td>2018年2月</td>
<td>2018年3月</td>
<td>2018年4月</td>
</tr>
<tr>
<td>MySQL</td>
<td>2017年2月</td>
<td>2017年3月</td>
<td>2017年4月</td>
</tr>
<tr>
<td>Django</td>
<td>2016年2月</td>
<td>2016年3月</td>
<td>2016年4月</td>
</tr>
<tr>
<td>爬虫</td>
<td>2015年2月</td>
<td>2015年3月</td>
<td>2015年4月</td>
</tr>

</table>

</body>

</html>

10.

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="description" content="" />
<title>用户登录</title>
<style>
body {
width: 90%;
margin: 0 auto;
font-size: 16px;
}
#login {
width: 290px;
margin: 20px auto;
}
#login fieldset {
border-radius: 5px;
}
#login legend {
background-color: lightgray;
padding: 2px 15px;
border-radius: 5px;
}
#login span {
display: inline-block;
width: 60px;
text-align: right;
}
#login input {
margin: 12px 5px;
border: none;
}
#login input[name^="user"] {
width: 175px;
outline:none;
border-bottom: 1px dotted darkgray;
}
#login input[type="submit"] {
margin-left: 195px;
color: white;
background-color: chocolate;
border-radius: 5px;
}
#login input[type="submit"]:hover {
background-color: darkgreen;
cursor: pointer;
}
#data {
margin: 10px auto;
border-collapse: collapse;
}
#data td {
border-bottom: 1px solid gray;
border-right: 1px solid gray;
width: 160px;
height: 60px;
}
#data td.tl {
border-top-left-radius: 10px;
}
#data td.tr {
border-top-right-radius: 10px;
}
#data td.bl {
border-bottom-left-radius: 10px;
}
#data td.br {
border-bottom-right-radius: 10px;
}
#data td.last {
border-right: none;
}
#data td.first {
width: 250px;
padding-left: 10px;
}
#data td.center {
color: white;
text-align: center;
}
#data td.bottom {
border-bottom: none;
}
#data tr.head {
background-color:lightblue;
}
#data tr.odd {
background-color: beige;
}
#data tr.even {
background-color: blanchedalmond;
}
</style>
</head>

<body>
<form id="login" action="" method="post">
<fieldset>
<legend>用户登录</legend>
<span>用户名: </span>
<input type="text" name="username" required>
<span>密码: </span>
<input type="password" name="userpass" required>
<span>邮箱: </span>
<input type="email" name="useremail" required>
<input type="submit" value="登录" />
</fieldset>
</form>
<table id="data">
<tr class="head">
<td class="tl first"></td>
<td class="center">成都</td>
<td class="center">北京</td>
<td class="tr center last">杭州</td>
</tr>
<tr class="odd">
<td class="first">Python从入门到住院全国巡演</td>
<td class="after">2018年2月28日上午9:30</td>
<td class="after">2018年3月28日上午9:30</td>
<td class="last">2018年4月28日上午9:30</td>
</tr>
<tr class="even">
<td class="first">MySQL从删除到跑路公开课</td>
<td>2018年2月27日上午9:30</td>
<td>2018年3月5日上午9:30</td>
<td class="last">2018年4月2日上午9:30</td>
</tr>
<tr class="odd">
<td class="first">Django从学习到上吊交流会</td>
<td>2018年2月28日上午9:30</td>
<td></td>
<td class="last">2018年5月21日上午9:30</td>
</tr>
<tr class="even">
<td class="first bottom bl">爬虫从精通到坐牢无遮大会</td>
<td class="bottom">2018年3月3日上午9:30</td>
<td class="bottom">2018年4月17日上午9:30</td>
<td class="last bottom br">2018年1月15日上午9:30</td>
</tr>
</table>
</body>

</html>

11.

<!doctype html>
<html>
<head>
<title>HTML5 Layout</title>
<meta charset="utf-8">
<style type="text/css">
body {
color: #666666;
background-color: #f9f8f6;
background-image: url("images/dark-wood.jpg");
background-position: center;
font-family: Georgia, Times, serif;
line-height: 1.4em;
margin: 0;
}
.wrapper {
width: 940px;
margin: 20px auto 20px auto;
border: 2px solid #000000;
background-color: #ffffff;
}
.header {
height: 160px;
background-image: url(img/header.jpg);
}
h1 {
text-indent: -9999px;
width: 940px;
height: 130px;
margin: 0;
}
.nav, .footer {
clear: both;
color: #ffffff;
background-color: #aeaca8;
height: 30px;
}
.nav ul {
margin: 0px;
padding: 5px 0px 5px 30px;
}
.nav li {
display: inline;
margin-right: 40px;
}
.nav li a {
color: #ffffff;
}
.nav li a:hover, .nav li a.current {
color: #000000;
}
.section.courses {
float: left;
width: 659px;
border-right: 1px solid #eeeeee;
}
.article {
clear: both;
overflow: auto;
width: 100%;
}
hgroup {
margin-top: 40px;
}
figure {
float: left;
width: 290px;
height: 220px;
padding: 5px;
margin: 20px;
border: 1px solid #eeeeee;
}
figcaption {
font-size: 90%;
text-align: left;
}
.aside {
width: 230px;
float: left;
padding: 0 0 0 20px;
}
.aside .section a {
display: block;
padding: 10px;
border-bottom: 1px solid #eeeeee;
}
.aside .section a:hover {
color: #985d6a;
background-color: #efefef;
}
a {
color: #de6581;
text-decoration: none;
}
h2 {
margin: 10px 0 5px 0;
padding: 0;
}
h3 {
margin: 0 0 10px 0;
color: #de6581;
}
.aside h2 {
padding: 30px 0px 10px 0px;
color: #de6581;
}
.footer {
font-size: 80%;
padding: 7px 0 0 20px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<h1><img src="img/header.jpg" alt="" /></h1>
<div class="nav">
<ul>
<li><a href="" class="current">home</a></li>
<li><a href="">classes</a></li>
<li><a href="">catering</a></li>
<li><a href="">about</a></li>
<li><a href="">contact</a></li>
</ul>
</div>
</div>
<div class="section courses">
<div class="article">
<figure>
<img src="img/bok-choi.jpg" alt="Bok Choi" />
<figcaption>Bok Choi</figcaption>
</figure>
<hgroup>
<h2>Japanese Vegetarian</h2>
<h3>Five week course in London</h3>
</hgroup>
<p>A five week introduction to traditional Japanese vegetarian meals, teaching you a selection of rice and noodle dishes.</p>
</div>
<div class="article">
<figure>
<img src="img/teriyaki.jpg" alt="Teriyaki sauce" />
<figcaption>Teriyaki Sauce</figcaption>
</figure>
<hgroup>
<h2>Sauces Masterclass</h2>
<h3>One day workshop</h3>
</hgroup>
<p>An intensive one-day course looking at how to create the most delicious sauces for use in a range of Japanese cookery.</p>
</div>
</div>
<div class="aside">
<div class="section popular-recipes">
<h2>Popular Recipes</h2>
<a href="">Yakitori (grilled chicken)</a>
<a href="">Tsukune (minced chicken patties)</a>
<a href="">Okonomiyaki (savory pancakes)</a>
<a href="">Mizutaki (chicken stew)</a>
</div>
<div class="section contact-details">
<h2>Contact</h2>
<p>Yoko's Kitchen<br />
27 Redchurch Street<br />
Shoreditch<br />
London E2 7DP</p>
</div>
</div>
<div class="footer">
© 2011 Yoko's Kitchen
</div>
</div>
</body>

</html>

12.

<!doctype html>
<html>
<head>
<title>Images</title>
<meta charset="utf-8">
<style type="text/css">
body {
color: #665544;
background-color: #d4d0c6;
background-image: url("images/backdrop.gif");
font-family: Georgia, "Times New Roman", serif;
text-align: center;
}
.wrapper {
width: 720px;
margin: 0 auto;
}
.header {
margin: 40px 0 20px 0;
}
.entry {
width: 220px;
float: left;
margin: 10px;
height: 198px;
background-image: url("images/shadow.png");
background-repeat: no-repeat;
background-position: bottom;
}
figure {
display: block;
width: 202px;
height: 170px;
background-color: #e7e3d8;
margin: 0;
padding: 9px;
text-align: left;
}
figure img {
width: 200px;
height: 150px;
border: 1px solid #d6d6d6;
}
figcaption {
background-image: url("images/icon.png");
padding-left: 20px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<img src="images/title.gif" alt="Galerie Botanique" width="456" height="122" />
<p>Here is a selection of antique botanical prints held in our collection.</p>
</div>
<div class="entry">
<figure><img src="images/print-01.jpg" alt="Helianthus" />
<figcaption>Helianthus</figcaption>
</figure>
</div>
<div class="entry">
<figure><img src="images/print-02.jpg" alt="Passiflora" />
<figcaption>Passiflora</figcaption>
</figure>
</div>
<div class="entry">
<figure><img src="images/print-03.jpg" alt="Nyctocalos" />
<figcaption>Nyctocalos</figcaption>
</figure>
</div>
<div class="entry">
<figure><img src="images/print-04.jpg" alt="Polianthes" />
<figcaption>Polianthes</figcaption>
</figure>
</div>
<div class="entry">
<figure><img src="images/print-05.jpg" alt="Ficus" />
<figcaption>Ficus</figcaption>
</figure>
</div>
<div class="entry">
<figure><img src="images/print-06.jpg" alt="Dendrobium" />
<figcaption>Dendrobium</figcaption>
</figure>
</div>
</div>
</body>

</html>

13.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.foo tr td{
width: 100px;
text-align: center;
border: 1px solid black;
}
</style>
</head>
<body>
<script>
mulTable();
function mulTable() {
document.write('<table class="foo">');
for (var row = 1; row < 10; row += 1) {
document.write('<tr>');
for (var col = 1; col <= row; col += 1) {
document.write('<td>');
document.write(row + '×' + col + '=' + row * col);
document.write('</td>');
}
document.write('</tr>');
}
document.write('</table>');
}

</script>

14.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
请输入行数:<input type="number" id="inputNum" value="5"/>
<input type="button" value="打印小脸" onclick="printFace()"/>
<script type="text/javascript">
function printFace(){
var lineNum = document.getElementById("inputNum").value;
for(var i=lineNum; i>0; i-=1){
k = 2*i-1;
temp = ""
for(var j=0;j<k;j+=1){
temp += "\u263a";
}
document.write("<p style='margin: 10px auto;text-align: center;'>"+temp+"</p>")
}
}
</script>
</body>

</html>

15.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="num1" />
<select id="op">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">×</option>
<option value="/">÷</option>
</select>
<input type="text" id="num2" />
<button onclick="calculate()">=</button>
<input type="text" id="result" readonly />
<script>
function calculate(){
var x = document.getElementById("num1").value;
var y = document.getElementById("num2").value;
var operator = document.getElementById("op").value;
var result = eval(x + operator + y);
document.getElementById("result").value=result;
}
</script>
</body>

</html>

16.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#message {
text-align: right;
margin: 10px 50px 0 0 ;
font-size: 2em;
color: red;
}
</style>
</head>
<body>
<div id="message"></div>
<script type="text/javascript">
var h = new Date().getHours();
var message = "";
if (0 <= h && h < 5) {
message = "你好";
}else if (h < 10 ){
message = "早上好";
}else if (h < 13){
message = "上午好";
}else if (h < 15){
message = "中午好";
}else if (h < 19){
message = "下午好";
}else {
message = "晚上好";
}
document.getElementById("message").innerHTML =
"<a href='http://www.qq.com'>" + message + "</a>";
</script>
</body>

</html>

17.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="demo">点击生成随机名单</p>
<button onclick="foo()">点我</button>
<script>
function foo(){
var students = ["A", "B", "C", "D", "E"];
var after_stu = [];
for (var i = 0; i < 3; i += 1){
var index = parseInt(Math.random() * students.length);
after_stu.push(students[index]);
students.splice(index, 1);
}
var x = document.getElementById("demo")
x.innerHTML = "生成的随机名称：" + after_stu;
}
</script>
</body>

</html>

18.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<lable for="num">请输入你猜的数字：</lable>
<input type="text" size="2" id="num">
<input type="button" onclick="judge()" value="确定">
<p id="hint"></p>
<script type="text/javascript">
/*js中有6类数据类型：number,string,boolean,
null,undefined,object.可以通过typeof查看变量的数据类型。
//双斜线是单行注释的作用*/
/*parseInt是得到整数的意思，parseFloat得到浮点数*/
/*当把字符串与数值相比较时，比如字符串'123'会自动转换成数值，(注意switch
语句里不做转换，比如5=='5'返回False。如果不想
类型转换用===或者!==这些符号表示，如果0<a<10在js里要表示成（a>0&&a<10)
*/
/*把其他数据类型转变为布尔型用两个!!*/
//生成随机数的通用公式：[min,max]:Math.ramdom()*(max-min+1)+min
//[min,max):Math.random()*(max-min)+min
var answer=parseInt(Math.random()*100+1)/*Math.random()是生成[0,1)区间的数*/
var counter=0;
function judge(){
counter+=1;
var hint='';
var txt=document.getElementById('num')
var num=parseInt(txt.value);
if(isNaN(num)){
window.alert('请输入1-100间的整数');
}else{
if(num<answer){
hint='大一点';
}else if(num>answer){
hint='小一点';
}else{
hint='恭喜你猜对了! 你猜了'+counter+'次';
}
var p=document.getElementById('hint');
p.innerHTML+='你猜的数字是'+num+','+hint+'<br>';
txt.value='';
txt.blur();/*获得光标用focus(),失去光标用blur()*/
}
}
</script>
</body>

</html>

19.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript">
function add(){
var total=0;
for(var i=0;i<arguments.length;i+=1){
//匿名函数arguments
total+=arguments[i];
}
return total;
}
window.alert(add(100,200))

</script>

</body>

</html>

20.js面向对象

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//JS创建对象的字面量语法-Json
/*var stu1={
name:'熊彪',
age:25,
study:function(courseName){
window.alert(this.name+'正在学习'+courseName+'.');
},
WatchAv:function(){
if (this.age>=18){
window.alert(this.name+'正在看黄片.');
}else{
window.alert(this.name+'看熊出没.');
}
}

};
stu1.study('python')
stu1.WatchAv();*/
//在js中函数是一等公民。
function Student(name,age){
//创建对象的构造器方法
this.name=name;
this.age=age;
}
Student.prototype.study=function(courseName){
window.alert(this.name+'正在学习'+courseName+'.');
};
Student.prototype.watchAv()=function(){
if(this.age>=18){
window.alert(this.name+'正在看片.');
}else{
window.alert(this.name+'只能看熊出没.');
}
}
//创建对象时要用new
var stu1=new Student('赵信',25);
var stu2=new Student('熊彪',30);
stu1.study('python');
stu2.watchAv();
</script>
</body>
</html>

猜你喜欢