学习原则
代码案例练习,为了增加代码熟练度
学习如同烧开水,断断续续烧一万个小时也烧不开.若持续不断的烧,一个小时足矣
HTML代码练习
1. 多媒体标签
<embed src="C:\1.mp4" width="400" height="300"/> 属性: autostart控制是否自动播放 loop控制循环次数 <bgsound src="C:\2.mp3" autostart="true" loop=2>
2. 段落标记
<h1>清平乐</h1> <hr size="10" width="400" color="rgb(0,255,0)" align="left" noshade> <p>年年雪里，常插梅花醉，挼尽梅花无好意，赢得满衣清泪！<br/>今年海角天涯，萧萧两鬓生华。看取晚来风势，故应难看梅花。</p>
3. 字体标签
<font size="6" color="red" face="华文行楷">CodingPark</font> size:大小(1-7),默认是2(所以也可以用"+5") size="+3"等于size="5" color:颜色 face:字体类型(比如:黑体)
4. 特殊字符
<小于 >大于 ©版权 ™商标 &与符号 "双引号
5. 图片标签
<img src="imgs/10.jpg" width="400" height="300" align="top" alt="点我" useMap="#Map"/>美女图片哦<br/> <map name="Map"> <area shape="circle" coords="100,100,32" href="2.gif"> </map> src:指图片位置 相对路径 绝对路径:(d:\1.jpg) 带协议的绝对路径(http://www.itheima.com/wang/1.jpg) width:宽度 height:高度 alt="提示文本" align:设置周围文本的对齐方式(top center bottom) useMap="#热点区域名"
6. 列表标签
ol :order list有序列表 type:A,a,I,i,1 li: list item 列表项目 ul: unorder list无序列表 type: circle (空心圆),disc(默认是实心圆),square(方形) li: list item 列表项目
7. 超链接标签
<a href="http://www.baidu.com" target="_blank">百度</a><br/> <a href="mailto:codingpark@163.com">打开邮箱</a><br/> <a href="imgs.rar">下载</a><br/> <a href="thunder:tsjflkjsaofisfasdf==s?">迅雷下载</a> href: 可以是外网(http://),邮箱(mailto)，下载文件(thunder迅雷协议) target:打开的目标位置(_blank也可以用new,打开新窗口) (_self:在自身打开) (_parent在父窗口中打开),(_top在顶层窗口中打开)(框架名：在指定的某个框架中打开) 锚链接(a name="标记名") 再通过<a href="#标记名")
8. 表格标签
<table border="1px" bordercolor="00ff00" width="500px" align="center" cellspacing="0px" cellpadding="5px"> <caption>人员记录表</caption> <thead> <tr align="center"> <th>姓名</th> <th>年龄</th> <th>爱好</th> <th>户口</th> </tr> </thead><tbody> <tr align="center" bgColor="c3f3c3"> <td>tom</td> <td>22</td> <td>swim</td> <td>beijing</td> </tr> </tbody><tfoot> <tr align="center" bgColor="f3c3f3"> </tr> </tfoot></table> border: 边框 bordercolor:边框颜色 width：表格宽度 align：对齐方式 cellpacing：单元格之间距离 cellpadding：单元格内部文本与边框的距离 行<tr>attribute:bgColor--设置行背景颜色 列(单元格)<td>colospan:跨列 rowspan：跨行 表格的分区加载 <thead> <tbody><tfoot>分区加载 <caption>加标题
9. 画中画标签
<a href="subframe/01.html" target="MainFrame">第一页</a><br/> <a href="subframe/02.html" target="MainFrame">第二页</a><br/> <a href="subframe/03.html" target="MainFrame">第三页</a><br/> <iframe src="#" name="MainFrame" width=480px height=320px>
10. 框架集标签
<frameset rows="80,*,10%"> <frame src="01html.html" noresize scrolling="no"></frame> <frameset cols="50,*"> <frame src="02.html"></frame> <frame src="02.html" name="MainFrame"></frame> </frameset> <frame src="03font.html"></frame> </frameset> <!-- frameset:框架集(cols 垂直切割,rows水平切割) frame:框架 src:资源 name:框架名 noresize:不可改变大小 scrolling:控制滚动条
11. 表单标签
<form action="02.html" method="post"> <input type="hidden" name="id" value="21323435435435434454345"/> 用户名:<input type="text" name="username"/><br/> 密码:<input type="password" name="password"/></br/> 性别:<input type="radio" name="sex" value="male"/>男 <input type="radio" name="sex" value="female"/>女<br/> 爱好:<input type="checkbox" name="hobby" value="eat" />吃饭 <input type="checkbox" name="hobby" value="sleep"/>睡觉 <input type="checkbox" name="hobby" value="study"/>学java<br/> 上传:<input type="file" name="img"/><br/> 省份:<select name="city"> <option value="bj">北京</option> <option value="sh">上海</option> <option value="sz">深圳</option> <option value="dg">东莞</option> </select><br/> 个人简历:<textarea cols="10" rows="3">本人是一个正直的人</textarea><br/> <input type="submit" value="注册"/> <input type="image" src="btn_reg.gif"/> <input type="reset" value="重置"/> <input type="button" value="普通按钮" οnclick="alert('点击我了')"/> </form> form代表表单 method:post/get(代表提交数据方式) post: 1.地址栏不显示数据，数据放在主体内容中 2.更安全 3.理论上没有数据量的限制 get: 1.地址栏能看到提交的数据 2.相对不安全 3.有数据量的限制，一般认为是1KB input type: text(文本框),password(密码框),radio(单选 name要同名才能单选),checkbox(复选框),hidden(隐藏域),submit(提交按钮,可以提交form表单),reset(重置),button(普通按钮),file(文件域)，image(图片按钮，也具有提交功能) textarea:多行文本框 rows cols控制行和列 select:下拉列表 列表项目:option
12. 表单语义化标签
<form> <fieldset> <legend>用户必填信息</legend> <table> <tr> <td><label for="usernameqqqqqq">用户名</label></td> <td><input type="text" id="usernameqqqqqq" name="username"/></td> </tr> <tr> <td><label for="pwd">密码</label></td> <td><input type="password" id="pwd" name="password"/></td> </tr> </table> </form> 好处: 去掉样式或者样式丢失页面结构依然清晰分明，便于后期开发以及维护表单域要用fieldset标签包起来，并用legend标签说明表单的用途 每个input标签对应的说明文本都要使用label标签，并通过为input设置id属性，在label标签中设置for="后面的id"来让说明和相应的input关联起来
CSS代码练习
1. 选择器
#div1{ //id选择器 color:red; font-family:"宋体"; } div{ //标签选择器 font-family:"黑体"; font-size:3cm; color:black; } .cc{ //类选择器 font-size:2cm; color:"green" } html标签选择器 class类选择器,定义时用.cc,引用时用class="cc" id选择器 定义时用#div1,引用时用id="div1"
2. 伪元素选择器顺序
/*顺序L-V-H-A 在visited中设置font-size不起作用*/ a:link{ color:red; text-decoration:none; //去掉下划线 } a:visited{ color:blue; } a:hover{ text-decoration:underline; //加上下划线 } a:active{ color:green; font-size:2cm; }
3. div背景属性
div{ background-color:red; //背景颜色 background-image:url('photo-3.jpg'); //背景图片 background-position:100px 50px; //背景位置 background-repeat:no-repeat; //背景是否重复 width:300px; //宽度 height:300px; //高度 text-indent:6em; //缩进宽度 }
4. position定位
position: absolute绝对定位，它是相对于浏览器左上角(0,0)坐标而言，并且后面的内容会往前跑 relative:相对定位，它是相对于自己原来的位置而言，并且后面的内容不会有任何变化 float:left,right clear:清除左右的浮动 display:设置可见性,none不可见，block可见 div{ width:100px; height:50px; border:1px solid black; margin:5px; padding:10px,20px; text-align:center; } #div1{ background:#FF0000; float:right; } #div2{ background:yellow; float:right; clear:both; /*position:absolute; left:300px; top:200px;*/ } #div3{ background:blue; float:right; clear:both; }
5. 重叠事例
<head> <title> New Document </title> <style> /* z-index:设置垂直方向的层叠（值越大越靠上） */ div{ width:100px; height:50px; border:1px solid black; margin:5px; padding:10px,20px; text-align:center; } #div1{ background:#FF0000; position:absolute; z-index:1; } #div2{ background:yellow; position:absolute; left:50px; top:50px; z-index:0; } #div3{ background:blue; position:absolute; left:60px; top:60px; z-index:-1; } </style> </head> <body> <div id="div1">AAAAAA</div> <div id="div2">BBBBBB</div> <div id="div3">CCCCCC</div> </body> </html>
6. 阴影文字效果
<html> <head> <title> 阴影文字效果 </title> <style> div{ font-size:60px; font-weight:bold; font-family:"黑体" } #div1{ color:#AAAAAA; position:relative; left:0.1cm; top:-1.06em; z-index:-1; } </style> </head> <body> <div>CSS定位阴影</div> <div id="div1">CSS定位阴影</div> </body> </html>
7. 图片上加文字
<html> <head> <title>加水印</title> <style> #div1{ border:2px solid black; width:315px; height:210px; padding:5px; } #div2{ position:absolute; top:202px; left:200px; color:white; } </style> </head> <body> <div id="div1"><img src="./images/1.jpg" /></div> <div id="div2">create photo</div> </body> </html>
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
