每日一点前端-1-基础练习
2017-02-21 本文已影响114人
张中华
1.文字段落
文字段落练习一
<h1>一级标题</h1> <!--一级标题-->
<h2>二级标题</h2> <!--二级标题-->
<h3>三级标题</h3> <!--三级标题-->
<hr>
<!---------------------------标题<Hn>----------------------------->
<font size="7">这是size=7的字体</font><p>
<font size="6">这是size=6的字体</font><p>
<font size="5">这是size=5的字体</font><p>
<font size="4">这是size=4的字体</font><p>
<font size="3">这是size=3的字体</font><p>
<font size="2">这是size=2的字体</font><p>
<font size="1">这是size=1的字体</font><p>
<hr>
<!-------------------------字体大小----------------------------->
文本文字标记<font>
<p>
<font size="5" color="#FF0000" face="Verdana, Geneva, sans-serif">字体的样式</font>
</p>
<p>
<font size="2" color="#000000" face="Georgia, Times New Roman, Times, serif">字体的样式</font>
</p>
<hr>
<!-----------------文本文字标记<font>使用-------------------------->
字型设置
<B>文本加粗显示</B><p>
<I>文本倾斜显示</I><p>
<U>文本加下划线</U><p>
<TT>设置文本以标准打印字体显示</TT><p>
文字<SUB>设置文本下标</SUB><p>
文字<sup>设置文本上标</sup><p>
<big>设置文本以大字体显示一个big</big><p>
<big><big><big><big>设置文本以大字体显示两四个big</big></big></big></big><p>
<font size="1" color="#FF0000" face="Verdana, Geneva, sans-serif">重复使用big在DW中看不出效果，然而在浏览器中可以看出真的变得很大</font><p>
<small>以小字体显示</small><p>
<blink>闪烁</blink><p>
<font size="1" color="#FF0000" face="Verdana, Geneva, sans-serif">说好的在ie中不可用呢，然而用火狐也看不出效果</font><p>
<em>强调</em><p>
<strong>加强</strong><p>
<samp>范例</samp><p>
<code>原始码</code><p>
<var>变量</var><p>
<dfn>定义</dfn><p>
<cite>引用</cite><p>
<adress>所在地址</adress><p>
<font size="2" color="#FF0000" face="Verdana, Geneva, sans-serif">其实吧，很明显可以看出上面好多效果有类似的，边学边找不同吧</font><p>
<hr>
文字段落练习二
<p align="center">center</p>
<p align="justify">justify</p>
<p align="left">left</p>
<p align="right">right</p>
<hr>
换行标记<br>,<br>我看书上用<p><p>也可以
<p><p>换的是段落
</br>
<hr>
<hr>一直在用<hr aligh= 对齐方式 size=横线粗细width=横线长度color=横线颜色 noshade>
<hr align="center" size="4" width="520px" color="#FF0000" noshade>
这条线在DW中无颜色变化，但在浏览器中可以看出那像鲜血一样的红色，长度为520px
<hr>
<font color="#00FF00">特殊符号请按shift+7（在使用DW时）在英文输入模式下才有效呦</font>
2.超链接
超链接练习
<p><a href=地址 name=字符串 target= 打开窗口方式>热点</a>
</br>
</p>
<p><a href="http://www.baidu.com" target="_blank">_blank</a></br>
<a href="http://www.baidu.com" target="new">_new</a></br>
<a href="http://www.baidu.com" target="_parent">_parent</a></br>
<a href="http://www.baidu.com" target="_self">_self</a></br>
<a href="http://www.baidu.com" target="_blank">_top</a></p>
</br>
<a href = "Telnet:主机地址">热点</a></br>
<a href="Telnet:"211.141.217.60">Telnet</a></br>
<a href="mailto:956159241@qq.com">邮箱</a></br>
news:目标地址
<a href="news:new.chinaren.net">新闻组连接中国新闻网</a></br>
3.列表
列表练习
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HCJ第六个界面</title>
<style type="text/css">
.left{
width:500px;
color:#F69;
border:double;
float:left;
}
.Lleft{
width:300px;
color:#F69;
border:double;
float:left;
}
.right{
overflow:scroll;
}
.Rright{
overflow:scroll;
}
</style>
</head>
<body>
<div class="left">无序列表一
<ul type="square">
<li>第一列</li>
<li>第二列</li>
<li>第三列</li>
</ul>
无序列表二
<ul>
<li type="disc">第一列disc实心圆显示</li>
<li type="circle">第二列空心圆表示</li>
<li type="square">第三列实心方块</li>
</ul>
<hr>
有序列表一无类型
<ol>
<li>第二列</li>
</ol>
有序列表二小写英文字母
<ol type="a">
<li>第一列</li>
<li>第二列</li>
</ol>
</div>
<div class="right">
定义列表标记
<dl>
<dt>电子商务
<dd>电子商务是以电子的方式进行商务交易</dd>
</dt>
<dt>国际贸易
<dd>国际贸易是世界各国间的贸易往来</dd>
</dt>
</dl>
<div class="Lleft">列表的嵌套使用<br/>
无序列表嵌套有序列表
<ul type="square">
<li>
西大名著
<ol type="I">
<li>水浒传</li>
<li>西游记</li>
<li>红楼梦</li>
<li>三国演义</li>
</ol>
</li>
<li>
君子志
<ol type="i">
<LI>仁</LI>
<LI>义</LI>
<LI>礼</LI>
<LI>智</LI>
<LI>信</LI>
</ol>
</li>
</ul>
</div>
<div class="Rright">
有序列表与无序列表的嵌套
<ol>
<li> zhang zhong hua
<ul>
<li>
zhang
</li>
<li>zhong</li>
</ul>
</li>
<li>hua zhong zhang
<ul>
<li>zhong </li>
<li>hua</li>
</ul>
</li>
</ol>
</div>
<hr>
</div>
</body>
</html>
4.表格练习
表格练习
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HCJ第 七个界面</title>
<style type="text/css">
.left{
float:left;
width:100px;
}
.center{
float:left;
margin-left:30px;
}
.right{
float:right;
}
</style>
</head>
<body>
<div class="left">创建一个表格
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
创建一个表格加属性
<table bgcolor="#00CC99" border="2" bordercolor="#CCFF33" bordercolordark="#003399" cellspacing="10px" cellpadding="5px" width="20px">
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
<table bgcolor="#00CC99" border="2" bordercolor="#CCFF33" bordercolordark="#003399" cellspacing="10px" cellpadding="5px" width="20px">
<caption align="left"><font color="#FF0000">表格标题</font></caption>
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
<hr/>
<table bgcolor="#00CC99" border="2" bordercolor="#CCFF33" bordercolordark="#003399" cellspacing="10px" cellpadding="5px" width="20px">
<caption align="top"><font color="#FF0000">colspan和rowspan属性实现表格的跨列和跨行处理rowspan</font></caption>
<tr>
<td rowspan=2>1.1</td>
<td>1.2</td>
</tr>
<tr>
<td>2.2</td>
</tr>
</table>
<table bgcolor="#00CC99" border="2" bordercolor="#CCFF33" bordercolordark="#003399" cellspacing="10px" cellpadding="5px" width="20px">
<caption align="top"><font color="#FF0000">colspan和rowspan属性实现表格的跨列和跨行处理colspan</font></caption>
<tr>
<td colspan=2>1.1</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
</div>
<div class="center">
做一个跨行跨列的实验,如图<br/>
<br/>
<caption align="top">表格实验</caption>
<table border="5px" bordercolor="#FFFF00" bordercolordark="#000066">
<tr rowspan=2 height="20px" align="center">
<td colspan="6" width="420px" >1.1</td>
</tr>
<tr align="center">
<td rowspan=4 colspan="3">3.1</td>
<td>3.4</td>
<td>3.5</td>
<td>3.6</td>
</tr>
<tr align="center">
<td>4.4</td>
<td>4.5</td>
<td>4.6</td>
</tr>
<tr align="center">
<td>5.4</td>
<td>5.5</td>
<td>5.6</td>
</tr>
<tr align="center">
<td>6.4</td>
<td>6.5</td>
<td>6.6</td>
</tr>
</table>
</div>
<div class="right">
<table border="5px" bordercolor="#FFFF00" bordercolordark="#000066" background="images/5.JPG">
<tr rowspan=2 height="20px" align="center">
<td colspan="6" width="420px" >1.1</td>
</tr>
<tr align="center">
<td rowspan=4 colspan="3">3.1</td>
<td>3.4</td>
<td>3.5</td>
<td>3.6</td>
</tr>
<tr align="center">
<td>4.4</td>
<td>4.5</td>
<td>4.6</td>
</tr>
<tr align="center">
<td>5.4</td>
<td>5.5</td>
<td>5.6</td>
</tr>
<tr align="center">
<td>6.4</td>
<td>6.5</td>
<td>6.6</td>
</tr>
</table>
</div>
</body>
</html>
5.实现滚动效果
滚动效果
实现滚动效果<br/>
<marquee bgcolor="0000FF" behavior="ALTENRATE" direction="left" scrollamout=5 scroldelay="100" height="60" width="100" >
滚吧
</marquee><br/><br/><br/><br/>
<marquee bgcolor="0000FF" behavior="scroll" direction="right" scrollamout=10 scroldelay="100" height="60" width="100" truespeed=2>
滚吧
</marquee><br/><br/><br/><br/>
<marquee bgcolor="0000FF" behavior="slide" direction="top" scrollamout=10 scroldelay="100" height="60" width="100" >
滚吧
</marquee><br/><br/><br/><br/>
6.表单练习
表单练习
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HCJ第十一个界面</title>
<style type="text/css">
#left{
width:50%;
border:groove;
float:left;
}
</style>
</head>
<body>
<div id="left">创建表单
<form action="" method="post" enctype="application/x-www-form-urlencoded" name="form1" target="_parent">
呵呵呵
</form><p>
使用文本域<p>
<label>我的数据
<input type="text" name="text" id="1.1" value="我的数据" size="30">
</label>
<hr/>
表单和文本域放在一起
<form action="" method="post" enctype="application/x-www-form-urlencoded" name="form2" target="_parent">
<label>我的数据
<input type="text" name="text" id="1.2" value="我的数据" size="30">
</label>
</form>
<font color="#FF0000">&好吧，没看出来分开有什么区别，边练边学吧
</font>
<p>
使用文本域
<form action="" method="post" enctype="application/x-www-form-urlencoded" name="form3" target="_parent">
<label>请输入数据（200字以内）
<script type="text/javascript">
function checkLen(obj){
var maxChars = 200;
if (obj.value.length > maxChars)
obj.value = obj.value.substring(0,maxChars);
var curr = maxChars - obj.value.length;
document.getElementById("count").innerHYML = curr.toString();
}
</script>
<textarea onkeyup="checkLen(this)" name="text" id="1.3" cols="30" rows="5">我
</textarea>
</label>
</form><p>
<form action="" method="post" enctype="application/x-www-form-urlencoded" name="form3" target="_parent">
<script type="text/javascript">
window.onload = function (){
document.getElementById('1.4').onkeydown = function(){
if (this.value.length >= 10)
event.returnValue = false;
}
}
</script>
<label>限制用键盘输入，不能粘贴复制
<textarea name="text" id="1.4" cols="30" rows="5">我
</textarea>
</label>
</form>
<font color="#000099">JS函数不会调用，暂时搁置！！！！！！！！！！！！！！！！！！！！！！！</font>
</div>
<div id="right">
使用按钮<br/>
<form action="" method="post" enctype="application/x-www-form-urlencoded" name="form4" target="_parent">
<label>提交
<input type="reset" name="button" id = "1.5" value="button"/>
</label>
</form>
使用单选按钮和复选框
<form action="" method="post" enctype="application/x-www-form-urlencoded" name="form5" target="_parent">
<label>我去
<input type="radio" name="radio1" id = "radio1" value="radio1"/>
</label>
<label>我不去
<input type="radio" name="radio1" id = "radio2" value="radio2"/>
</label>
</form>
<form action="" method="post" enctype="application/x-www-form-urlencoded" name="form5" target="_parent">
<label>篮球
<input type="checkbox" name="checkbox1" id = "checkbox1" value="checkbox1"/>
</label>
<label>乒乓球
<input type="checkbox" name="checkbox2" id = "checkbox2" value="checkbox2"/>
</label>
<label>足球
<input type="checkbox" name="checkbox3" id = "checkbox3" value="checkbox3"/>
</label>
</form><br/>
使用列表菜单
<form action="" method="post" enctype="application/x-www-form-urlencoded" name="form1" target="_parent">
<label>
<select name="11" id ="11">
<option selected>梅花</option>
<option>桂花</option>
<option>兰花</option>
<option>喇叭花</option>
</select>
</label>
</form><p>
使用文件域
<form action="" method="post" enctype="multipart/form-data" name="form1" >
<label>选择文件
<input name="file" type="file" id="file" size="25" maxlength="50"/>
</label>
</form><p>
使用图像域
<form action="" method="post" name="form1" >
<label>图像
<input name="image" type="image" id="image" src="images/9.jpg" alt="没有了" width="102.4" height="64"/>
</label>
</form><p>
使用隐藏域
使用图像域
<form action="" method="post" name="form1" >
<label>隐藏
<input name="hidden" type="hidden" id="hidden" value="123"/>
</label>
</form>
</div>
</body>
</html>
7.表单应用
表单应用
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HCJ第十一个界面</title>
<style type="text/css">
.table{
margin-left:400px;
background-image:url(images/5.jpg);
border:3px;
border-color:#FF0;
border-style:dotted;
}
</style>
</head>
<body>
<table class="table" >
<caption align="center">填写注册信息</caption>
<tr>
<td width="100">用户名</td>
<td width="200">
<form enctype="application/x-www-form-urlencoded" name="form1" id="form1" >
<label>
<input type="text" id="text" name="text" size="20" />
</label>
</form>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<form id="form2" name="form2" enctype="application/x-www-form-urlencoded">
<label>
<input id="password" name="password" type="password" size="20"/>
</label>
</form>
</td>
</tr>
<tr>
<td>
确认密码
</td>
<td>
<form id="form3" name="form3" enctype="application/x-www-form-urlencoded">
<label>
<input id="password2" name="password2" type="password" size="20" />
</label>
</form>
</td>
</tr>
<tr>
<td>
真实姓名
</td>
<td>
<form enctype="application/x-www-form-urlencoded" name="form1" id="form1" >
<label>
<input type="text" id="text" name="text" size="20" />
</label>
</form>
</td>
</tr>
<tr>
<td >
婚否
</td>
<td>
<form enctype="application/x-www-form-urlencoded" name="form4" id="form4" >
<label>已婚
<input type="radio" id="radio1" name="radio" />
</label>
<label>未婚
<input type="radio" id="radio2" name="radio" />
</label>
</form>
</td>
</tr>
<tr>
<td >
课余爱好
</td>
<td>
<form enctype="application/x-www-form-urlencoded" id="form5" name="form">
<label>足球
<input type="checkbox" id="zuqiu" name="checkbox"/>
</label>
<label>篮球
<input type="checkbox" id="lanqiu" name="checkbox"/>
</label>
<label>棒球
<input type="checkbox" id="bangqiu" name="checkbox"/>
</label>
</form>
</td>
</tr>
<tr>
<td >
出生月份
</td>
<td>
<form enctype="application/x-www-form-urlencoded" id="form7" name="form7">
<label>
<select id="month">
<option selected>一月</option>
<option>二月</option>
<option>三月</option>
<option>四月</option>
<option>五月</option>
<option>六月</option>
<option>七月</option>
<option>八月</option>
<option>九月</option>
<option>十月</option>
<option>十一月</option>
<option>十二月</option>
</select>
</label>
</form>
</td>
</tr>
<tr >
<td colspan="2" align="center">
<form enctype="application/x-www-form-urlencoded" name="form8" id="form8">
<input type="button" value="提交" id="tijiao" name="tijao"/>
<input type="reset" value="reset" id="reset" name="reset"/>
</form>
</td>
</tr>
</table>
</body>
</html>
8.html5存储访问次数
存储访问次数
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HCJ第十三个界面</title>
</head>
<body>
1.localStorage方法
<script type="text/javascript">
localStorage.lastname="东方不败";
document.write("Last name:" + localStorage.lastname);
</script>
<br/><br/><br/>
2.sessionStorage方法，关闭浏览器后，数据被删除
<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>
<p><font color="#CC0000">好吧^_^并没发现干嘛用的</font>
</p><br/><br/><br/>
3.记录访问次数<br/><br/>
<script type="text/javascript">
if (localStorage.pagecount){
localStorage.pagecount=Number(localStorage.pagecount)+1;
}
else{
localStorage.pagecount=1;
}
document.write("Visits: " + localStorage.pagecount + " time(s).");
</script>
<p>刷新页面会看到计数器再增长</p>
<p>请关闭页面，计数器会继续基数</p>
4.用session统计次数时，关闭浏览器，次数就会重置<br/><br/>
<script type="text/javascript">
if (sessionStorage.pagecount){
sessionStorage.pagecount=Number(sessionStorage.pagecount)+1;
}
else{
sessionStorage.pagecount=1;
}
document.write("Visits: " + sessionStorage.pagecount + " time(s).");
</script>
</body>
</html>
9.初识Canvas
初识Canvas
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HCJ第十三个界面</title>
<style type="text/css">
body{
font-size:70%;
font-family:Verdana, Geneva, sans-serif;
}
</style>
<script type="text/javascript">
function cnvs_getCoordinates(e){
x=e.clientX;
y=e.clientY;
document.getElementById("xycoordinates").innerHTML = "Coordinates:("+ x +","+ y +")";
}
function cnvs_clearCoordinates(){
document.getElementById("xycoordinates").innerHTML="";
}
</script>
</head>
<body style="margin:0px">
<canvas id="myCanvas" width="200" height="200" >
</canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
cxt.fillStyle = "#FF0000";
cxt.fillRect(0,0,150,75);
</script>
<hr/>
<p>把鼠标悬停在下面的矩形上可以看到坐标</p>
<div id = "coordiv" style="float:left;width:199px;height:99px;border:1px solid #00C"onmouseover="cnvs_getCoordinates(event)"
onMouseout="cnvs_clearCoordinates()">
</div>
<br/>
<br/>
<br/>
<div id="xycoordinates">
</div>
<br/>
<br/>
<br/>
<br/>
<br/><br/>
<br/>
<hr/>
在指定位置划线
<p>
<canvas id="myCanvas1" width="200" height="200" style="border:1px solid #0F0">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas1");
var cxt = c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<canvas id="macanvas2" width="300" height="150" style="">
<canvas>
</body>
</html>
10.渐变
渐变颜色
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #930">
your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
var grd = cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
11.表单新特性
表单新特性
<body>
html5中新增了如下表单输入类型
<ul type="square">
<li>email</li>
<li>url</li>
<li>number</li>
<li>range</li>
<li>Date pickers(date,month,week,time,datetime,datetime-local)</li>
<li>search</li>
<li>color</li>
</ul>
<br/><br/><br/>
1.email<br/><br/>
<form action="demo_form.asp" method="get">
E-mail:<input type="email" name="user_eamail" /><br/><br/>
<input type="submit"/>
</form>
2.url<br/><br/>
<form action="demo.asp" method="get">
Homepage:<input type="url" name="user_url" />
<input type="submit"/>
</form>
</body>
12.css设置修饰
css修饰
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
/*input.smallInput{
background:#ffffff;
border-bottom-color:#ff6633;
border-bottom-width:1px;
border-top-width:0px;
border-left-width:0px;
border-right-width:0px; solid #ff6633;
color:#0000000;
font-size:9pt;
font-style:normal}
*/
input.buttonface{
background:#ffcc00;
border:1 solid #ff6633;
color:#ff0000;
font-size:9pt;
font-style:normal;
font-variant:normal;
font-weight:normal;
height:25px;
line-height:normal;}
.mm {
text-indent:2em;
}
.nn:first-letter{
font-family:"Times New Roman", Times, serif;
font-size:24px;
color:#900;
}
</style>
</head>
<body>
<h3>文本缩进</h3>
<h5>段首缩进</h5>
<p class="mm">我是一个好孩子，哈哈哈</p>
<h5>文本下沉</h5>
<p class="nn">我是一个好孩子，哈哈哈</p>
<h5>文本对齐text-align</h5>
<p style="text-align:center">我是一个好孩子</p>
<h5>文本对齐virtical-align</h5>
<p style="vertical-align:middle"> 我是一个好孩子</p>
制作绚丽的文本框<br/>
<input type="submit" name="submit" value="彩色按钮" class="buttonface">
</body>
</html>
