核心提示：HTML学习准备网站开发主要的三大块：1、前端(1)HTML(2)css(3)JavaScript2、后端3、数据库一、本地数据处理1、webstoragetitle/title script src...
HTML学习准备
网站开发主要的三大块：
1、前端
(1)HTML
(2)css
(3)JavaScript
2、后端
3、数据库
一、本地数据处理
1、webstorage
<title></title>
<script src="js/jquery-1.10.min.js"></script>//引入jQuery框架
<script type="text/javascript">
function MyClick1(){
var username=$("#txtUserName").val();
var pwd=$("#txtpwd").val();
sessionStorage.setItem("k_username",username);//方式1
sessionStorage.setItem("k_pwd",pwd);//方式1
localStorage.setItem("k_username",username);//方式2
localStorage.setItem("k_pwd",pwd);//方式2
alert("储存成功");
}
function MyClick2(){
alert(sessionStorage.getItem("k_username"));
alert(sessoinStorage.getItem("k_pwd"));
}
</script>
</head>
<body>
<input type="text" id="txtUserName"/>
<input type="psaaword"id="txtpwd"/>
<input type="button"value="按钮1"onclick="MyClick1()"/>
<input type="button"value="按钮2"onclick="MyClick2()"/>
</body>
</html>
2、webstorage制作留言板
<script>
$(function(){
if(localStorage.getItem("k_con")!=null)
{
"k_con",$("#dCon").html(localStorage.getItem("k_con"));
}
});
function PostCon(){
var sCon=$("#trCon").val();
$("#dCon").append("<p>"+sCon+"</p>");
localStorage.setItem("k_con",$("#dCon").html());
}
function Clera(){
$("#dCon").html("");
localStorage.alear();
}
</script>
<body>
<p><textarea id="trCon"cols="30"rows="8"></textarea></p>
<p><input type="button"value="发表"onclick="PostCon()"/><input type="button"value="清除" onclick="Clear()"/></p>
<p id="dCon"></p>
</body>
3、HTML5本地数据库
<script src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var db=openDatabase("myDB","1.0","test db",2014*10);
function Add(){
db.transaction(function(fx)){
fx.executeSql("create table if not exists UserInfor(UserName TEXT,Pwd TEXT)",[]);
var username=$("#txtAUserName").val();
var pwd=$("#txtAPwd").val();
fx.executeSql("insert into UserInfor values(?,?)",[username,pwd],function(){
alert("添加成功");
});
});
}
function Sel(){
var sql="select*from UserInfor where 1=1";
var username=$("#txtSUserName").val();
if(username!= "")
{
aql+="and UserName='"+username+"'";
}
fx.executeSql(sql,[],function(fx,rs){
for(var i=0;i<rs.rows.length;i++)
{
var s="<p>"+rs.rows.item[i].UserName+"  "+rs.rows.item[i].Pwd"<p>";
$("#dCon ").append((s));
}
})
}
</head>
<body>
<p><input type="text" id="txtAUserName"/><input type="pswwword"id="txtAPwd"/><input type="button" value="添加"onclick="Add()"/></p>
<p><input type="text"id="txtSUserName"/><input type="button"value="查询"onclick="Sel()"/></p>
<p><input type="text"id="txtDUserName"/><input type="button"value="删除"/></p>
<p id="dCon"></p>
</body>
</html>
4、canvas画矩形圆形直线三角形
<style type="text/scc">
*{
padding:0px;
margin:0px;
}
<script type="text/javascript">
function Draw(){
var c=document.getElementById("mycanvas");
c.width=500;
c.height=500;
var ctx=c.getContext("2d");
ctx.fillStyle="#ff0000";
ctx.fillRect(0,0,200,200);
}
</script>
<body>
<canvas id="mycanvas"></canvas>
<input type="button"value="画图"onclick="Draw()"/>
</body>
5、贝塞尔曲线实现
<script>
function Draw(){
var c=document.getElementById("mycanvas");
c.width=500;
c.height=500;
var ctx=c.getContext("2d");
ctx.lineWidth=6;
ctx.strokeStyle="#ff0000";
ctx.beginPath();
ctx.moveTo(0,200);
ctx.quadraticCurveTo(75,50,300,200);//二次坐标
ctx.bezierCurveTo(205,56,237,444,456,236);
ctx.stroke();
}
</script>
<body>
<canvas id="mycanvas"></canvas>
<input type="button"value="画图"onclick="Draw()"/>
</body>
6、图形的组合与裁切
<script>
onload=function(){
var c=document.getElementById("mycanvas");
c.width=500;
c.heigth=500;
var ctx=c.getContext("2d");
ctx.fillRect(50,25,100,100);
ctx.globalCompositeOperation="source-in";
ctx.fillStyle="#00ff00";
ctx.beginPath();
ctx.arc(150,125,53,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
}
</script >
CSS学习
一、css引入方式
1、内嵌
<title>标题</title>
<style type="text/css">
p{
color:#F00;
}
</head>
<body>
你好
</body>
</html>
2、外链
css文件
p{
color:"red";
}
html文件
<link href="demo.css" type="text/css" rel="stylesheet"/>
</head>
二、css选择器以及权重
1、css选择器
<link href="文件名.css" type="text/css" rel="stylesheet"/>
<body>
<p class="c1" id="d1">你好</p>
</body>
三、css常用属性
1、超链接相关、表格细线合并
css文件
p或p
{
color:#F00;//字体颜色
font-size:24px;//字体大小
font-family:"微软雅黑";//字体
font-weight:9090;//加粗
width:100px;//p大小
height:100px;
border:solid 1px red;//设置边框
}
HTML文件
<title>标题</title>
<link href="demo.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<p>你好</p>
</body>
//、超链接相关、表格细线合并
css文件
a:link { color:blue;font-size:36px;}
a:visited {color:black;}
a:hover {color:red;}
a:active {color:yellow;}
HTML文件
<title>标题</title>
<link href="demo.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<a href="http://www.w3cschool.com.cn">w3cschool.com.cn</a>
</body>
2、//表格
css文件
table
{
width:500px;
hright:400px;
border-collapse:collapse;//合并边框
}
th,td
{
border:solid 1px red;
}
HTML文件
<title>标题</title>
<link href="demo.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<table>
<tr><th>姓名</th><th>年龄</th><th>性别</th><th>学号</th></tr>
<tr><td>张三</td><td>20</td><td>男</td><td>12356</td></tr>
<tr><td>张三</td><td>20</td><td>男</td><td>12356</td></tr>
<tr><td>张三</td><td>20</td><td>男</td><td>12356</td></tr>
<tr><td>张三</td><td>20</td><td>男</td><td>12356</td></tr>
<tr><td>张三</td><td>20</td><td>男</td><td>12356</td></tr>
</table>
</body>
3、边框、背景属性
css文件
#d1
{
width:100px;
height:100px;
border:solid 5px #F00;//直线
border:dashed 5px #F00;//虚线
border:dotted 5px #F00;//点线
border-width:5px;
background-image:url(1.png);//背景图片
}
HTML文件
<title>标题</title>
<link href="demo.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<p></p>
</body>
4、隐藏、滚动条、zindex属性
css文件
#d1
{
width:100px;
height:100px;
border:solid 5px #F00;
border:dashed 5px #F00;
border:dotted 5px #F00;
border-width:5px;
overflow:hidden;//隐藏超出的文本部分
overflow:auto; //显示滚动条
}
.c
{
width:100px;
height:200px;
border:solid 1px red;
z-zindex:2;//控制层数
}
HTML文件
<title>标题</title>
<link href="demo.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<p> 文字好多的文字</p>
<p class="c c2"></p>
</body>
5、鼠标、列表、垂直居中属性
css
p
{
cursor:pointer;//鼠标指示
cursor:wait;//等待
cursor:help;
}
//列表
li
{
list-style-type:circle;//列表是圆形
list-style-image:url("1.png");//列表是小图标
}
img{
vertical-align:text-bottom;//垂直居中显示
}
HTML
<a href="javascript：;">你好</a>
<p>你好</p>
<ul>
<li>fasfasfasfas</li>
<li>fasfasfasfas</li>
<li>fasfasfasfas</li>
<p>你好啊</p>
</ul>
6、块级元素、行内元素
块级元素的特点 ：
1、块级元素的内容，默认显示在快的左上角。
2、块元素，单独占满一行。
常用的块元素：
p
p
h1-h6
form
menu
pre
table
三种列表
7、浮动
8、圆角、阴影、背景铺满
//圆角
#d1{
width：100px;
height:100px;
border:solid 2px red;
border-radius:30px;//使边框的角变圆
border-radius:10px 20px 0px 0px;
}
body{
//背景图片的铺满
background-image:url("benbenla-b.jpg");
background-repeat:no-repeat;
background-size:cover;
}
四、css3动画
1、旋转、倾斜、位移、平滑过渡、缩放
css
*
{
padding:0px;
margin:0px;
}
#d1{
width:150px;
height:150px;
bouder:solid 2px red;
background-color:#FC9;
position:absolute;
top:200px;
left:200px;
transform:rotate(0deg) scale(1.5) translate(20px,30px) skew(30deg,30deg);//边框旋转30度 //放大缩小//倾斜
}
#d1:hover
{
transform:rotate(30deg) scale(2);//在旋转的过程中放大
transition:transform 1s ease-in;//旋转的缓慢的放大
}
2、自定义动画
*
{
padding:0px;
margin:0px;
}
#d1
{
position:absolute;
top:100px;
left:200px;
width:700px;
height:438px;
background-image:url("1.jpg");
-webkit-animation:donghua 20s infinite ease;//动画的定义、播放时间、速度
}
@keygrames donghua //沿X轴旋转，将X改成Y是沿Y轴旋转
{
0%{
transform:translateX(0deg);
}
50%{
transform:rotateX(180deg);
}
100%{
transform:rotateX(360deg);
}
}
3、渐变
*
{
padding:0px;
margin:0px;
}
#d1
{
width：300px;
height:200px;
border:solid 1px red;
background:-webkit-gradient(linear,left,top,left bottom,from(blue),to(red)，color-stop(0.4,#fff));//在%40的位置加了白色
（1） //静态渐变其中色标可以无限添加
background:-webkit-gradient(radial,center center,0,center center,200,from(blue),to(red));
(2) 中心渐变，同样可以添加色标
