每日一点前端-1-基础练习

最新推荐文章于 2022-10-19 08:33:57 发布

「已注销」

最新推荐文章于 2022-10-19 08:33:57 发布

阅读量256

点赞数

本文链接：https://blog.csdn.net/zhonghua_csdn/article/details/89877631

版权

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>
换行标记&lt;br&gt;,<br>我看书上用&lt;p&gt;<p>也可以
&lt;p&gt;<p>换的是段落
</br>
<hr>
&lt;hr&gt;一直在用&lt;hr aligh= 对齐方式 size=横线粗细width=横线长度color=横线颜色 noshade&gt;
<hr align="center" size="4" width="520px" color="#FF0000" noshade>
这条线在DW中无颜色变化，但在浏览器中可以看出那像鲜血一样的红色，长度为520px
<hr>
<font color="#00FF00">特殊符号请按shift+7（在使用DW时）在英文输入模式下才有效呦</font>

2.超链接

超链接练习

<p>&lt;a href=地址 name=字符串 target= 打开窗口方式&gt;热点&lt;/a&gt;
  </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>
&lt;a href = "Telnet:主机地址"&gt;热点&lt;/a&gt;</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/>
![](images/1.png)<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>