HTML和CSS
今天讲的HTML和CSS
HTML讲的表格和表单
<table></table>表格
<tr></tr>行
<td><td/>列（一行两列）
文本输入
文本框<input type="txt" name="" id="" value=""
密码框<input type="password" name="" id="" value""/>
文本域<textarea name="" id="" cols""（字符多少） rows=""(几行高)></textarea>
隐藏域<input type="hidden" name="" id="" value=""/>
按钮
提交按钮<input type="submit"name="" id="" value=""/>
重置按钮<input type="reset" name="" id="" value=""/>
选择输入
单选按钮组<input type="radio" name="" checked="checked" value=""/> checked(设置默认选项)
复选框<input type="checkbox" name="" value=""/>
文件上传<input type="file" name="" id=""/>
<lable></lable>
下拉列表框
<select name="" size="">
<option value="值">内容1<option>
<option value="值" selected="selected">内容2<option> -selected(设为默认)
<option value="值">内容3<option>
练习题：
答：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> <form> 昵称：<input type="text" name="" id=""/><br><br> 密码：<input type="password" name="" id=""/><br><br> 邮箱：<input type="text" name="" id=""/> <select id="" name=""> <option value="1">qq.com</option> <option value="2">123.com</option> <option value="3">xxx.com</option> </select><br><br> 性别：<label>男</label><input type="radio" id="" name="dd"> <label>女</label><input type="radio" id="" name="dd"><br><br> 兴趣：<label>旅游</label><input type="checkbox" id="" name=""> <label>摄影</label><input type="checkbox" id="" name=""> <label>运动</label><input type="checkbox" id="" name=""><br><br> <table> <tr> <td>个人介绍：<br><br><textarea name="" id="" cols="30" rows="5"></textarea></td> </tr> </table> <input type="submit" name=="" id="" value="注册"/><br><br> 上传个人照片：<br><br> <input type="file" name="" id="">
CSS的字体样式和文本样式
字体样式：font-family（字体类型）
font-size（字体大小）
font-weight（字体粗细）
font-style（字体倾斜）
color（颜色）
文本样式：text-decoration（下划线、删除线、顶划线）
text-indent（段落首行缩进）
text-align（文本水平对齐方式）
line-height（行高）
underline(下划线)
line-through（删除下）
overline（顶划线）
练习题：
答：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#aaa{text-decoration:line-through;}
</style>
</head>
<body>
<img src="file:///C|/Users/Administrator/Desktop/8c1001e93901213fcbf5783d53e736d12e2e9508.jpg" width="200" >
<br>史蒂夫·乔布斯传果粉致敬经典版典藏套装(当当全国独家
<p>抢购价：￥116.10</p>
<p id="aaa">定价：￥198.00 </p>
<div>
<img src="u=3863055345,1307926133&fm=26&gp=0.jpg" width="20">
<span>加入购物车</span>
</div>
</body>
</html>
边框样式：
border-width（边框的宽度）
border-style（边框的外观）：
none（无样式）
solid（实线）
hidden（与none相同。不过应用于表除外。对于表，hidde用于解决边框冲突）
dashed（虚线）
dotted（点线）
double（双线，双线的宽度等于 border-width的值）
3）border-color
属性用来定义边框的颜色。
（4）简洁写法
border-width: 1px;
border-style: solid;
border-color: red;
可以简写为：border:1px solid red;
（5）局部边框样式
border-top: ;
border-bottom: ;
border-left: ;
