每日一点前端-1-基础练习 阳光穿透心脏的1/2处 2021-06-24 16:11 466阅读 0赞 1.文字段落 ![2789632-4ee9adfb8b887ac4.png][] 文字段落练习一 <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> ![2789632-4d518670083c3d6a.png][] 文字段落练习二 <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.超链接 ![2789632-c9873388b6373f35.png][] 超链接练习 <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.列表 ![2789632-b1a4f8df323c0cf9.png][] 列表练习 <!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.表格练习 ![2789632-50602d5140038261.png][] 表格练习 <!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.实现滚动效果 ![2789632-b7c88de34b204d8f.png][] 滚动效果 实现滚动效果<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.表单练习 ![2789632-607ebce86638bc1e.png][] 表单练习 <!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.表单应用 ![2789632-a1e138817ec7e7ca.png][] 表单应用 <!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存储访问次数 ![2789632-e851feadd8cee5e0.png][] 存储访问次数 <!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 ![2789632-9c364d3973acfc72.png][] 初识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.渐变 ![2789632-373fcd8320d11837.png][] 渐变颜色 <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.表单新特性 ![2789632-ded8588faf394a0c.png][] 表单新特性 <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设置修饰 ![2789632-021c93a34b67ceaa.png][] 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> ![2789632-3b18269684ea9294.png][] 公众号.png [2789632-4ee9adfb8b887ac4.png]: /images/20210615/a0c18ec22cd741ab89bde537f12685e3.png [2789632-4d518670083c3d6a.png]: /images/20210615/d270f935ac5b4441a02e8f8872029eaf.png [2789632-c9873388b6373f35.png]: /images/20210615/cfac7509f7bb419a8de02a0d10b88ef1.png [2789632-b1a4f8df323c0cf9.png]: /images/20210615/3b1fa056019547b9a6ede5ee566eef93.png [2789632-50602d5140038261.png]: /images/20210615/450d2189364d433d9fec1a553d7aa266.png [2789632-b7c88de34b204d8f.png]: /images/20210615/b2f3073906144be5ac6a3206dbc90b0f.png [2789632-607ebce86638bc1e.png]: /images/20210615/5c5f341871b445d290c8d1bc8bd98343.png [2789632-a1e138817ec7e7ca.png]: /images/20210615/fe26a9efd55a42d18d234846077dc4eb.png [2789632-e851feadd8cee5e0.png]: /images/20210615/3351993a4f6049a99ce5ce54341e53e8.png [2789632-9c364d3973acfc72.png]: /images/20210615/0165c71fe1e34cbf9ce8a00ce6ca8525.png [2789632-373fcd8320d11837.png]: /images/20210615/7afb53da991c465f83ba0964f75b02f3.png [2789632-ded8588faf394a0c.png]: /images/20210615/9360d0fcdc43496782e0392e9f92647c.png [2789632-021c93a34b67ceaa.png]: /images/20210615/d966049d43e141fb8f29aebd4a33cca0.png [2789632-3b18269684ea9294.png]: /images/20210615/92b740ec88dd4f668fb8f623c3781f28.png
还没有评论,来说两句吧...