html_day4---html加强+表格布局案例
Day4
●HTML加强
（1）背景色彩和文字色彩
<bodybgcolor=# text=# link=# alink=# vlink=#>
bgcolor ---背景色彩
text ---非可链接文字的色彩
link ---可链接文字的色彩
alink ---正被点击的可链接文字的色彩
vlink ---已经点击(访问)过的可链接文字的色彩
（2）页面空白(Margin)
页面左边的空白 <bodyleftmargin=#>
页面上方的空白(天头) <bodytopmargin=#> #=margin amount
**默认的文字是不紧靠左侧和右侧的。这时可以设置leftmargin和topmargin的值
（3）超链接
（4）标尺线hr
<hr size=# noshade corlor=#>
（5）字体
①标题字体<h#> ... </h#> #=1, 2, 3, 4, 5, 6
②字体大小<font size=#> ... </font> #=1, 2, 3, 4, 5,6, 7 or +#, -#
③物理字体
<b>粗体</b>今天天气真好！
<i>斜体</i>今天天气真好！
<u>下划线</u>今天天气真好！
可以组合使用！
④客户端字体
<font face="#, #, ...,#"> ... </font>
#=客户端可获得的字体
（6）文字布局标记
①分段<p>…</p>
②换行<br/>
③对齐方式
④文字的分区(Division)显示：div
⑤列表：无序列表，有序列表
（7）图像
①<img alt=#>
#=在浏览器尚未完全读入图象时，在图象位置显示的文字。
（8）表单
①checked默认选中的（对于checkbox和radio）
<input type=checkbox>
<input type=checkbox checked>
<input type=checkbox value=**>
②对于select(下拉列表)，默认选中为selected
③文本域textarea自动换行与不自动换行：wrap=off，默认是换行。
（9）表格
①th与td区别
②vlign属性：top,bottom,left,right,定义字体在表格中的对齐方式
（10）会移动的文字：marquee(IE8以上浏览器不支持)
（11）多媒体页面
●案例：
使用表格布局，做一个邮箱登陆界面
<html> <head> <title>邮箱登陆 </title> </head> <body> <table width=100% ><!--第一层表格--> <tr height="150px" ><td> </td><td> </td><td> </td></tr> <tr><td width="350px"> </td><td> <!--background可以设置背景图片--><!--第二层表格--> <table width="535px" height="300px" background="background.jpg" > <tr height="60px"><td> </td><td> </td></tr> <tr><td width=200px> </td><td> <form action="" method="post"> <table height=100%><!--第三层表格--> <tr><td height="40px"><font size=4>用户名:</font></td><td><input type="text"/></td></tr> <tr><td height="40px"><font size=4>密 码:</font></td><td><input type="password"/></td></tr> <tr><td height="40px" colspan=2 align=center> <input type="submit" value="登 录 " style="font-size:18px"/> <input type="reset" value="重 置" style="font-size:18px"/></td></tr> <tr><td height="40px" colspan=2 align=center> <a href="#">找回密码</a> <a href="#">注册用户</a></td></tr> </table> </form> </td></tr> <tr><td> </td><td> </td></tr> </table> </td><td> </td></tr> <tr><td> </td><td> </td><td> </td></tr> </table> </body> </html>
