学习原则
代码案例练习,为了增加代码熟练度
学习如同烧开水,断断续续烧一万个小时也烧不开.若持续不断的烧,一个小时足矣
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="普通按钮" onclick="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>
