一. 表单标签
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><!--表单标签的根标签：action：指定提交的URL地址注意：表单只会提交有name属性的表单项数据(注意下面的这些标签很多用了name属性)所有表单标签都有name属性如果没有指定method属性，默认就是get请求get请求的请求参数是显示在地址栏上面一般表单提交方式使用post方式get和post的区别？1）get请求的参数会显示在浏览器地址栏上，而post请求不会把请求参数显示在地址栏；2）Post请求的安全性比get高；3）get请求参数的长度有限制，而Post请求的参数大小没有限制；4）get请求有缓存，而post请求没有缓存；--><!--form里的action是指提交到指定的地方--><form action="" method="post"><!--placeholder算是一种提示-->用户名：<input type="text" id="username" name="username" title="请输入用户名" placeholder="请输入用户名" value=""/><br/>密码：<input type="password" name="userpass"/><br/><!-- 同一组单选框的name属性必须相同 --><!--checked默认选择-->性别：男<input type="radio" name="gender" value="male" checked/>女<input type="radio" name="gender" value="female"/><br/><!-- 同一组的复选框的name属性必须相同 -->兴趣爱好：吃<input type="checkbox" name="hobby" value="eat"/>喝<input type="checkbox" name="hobby" value="drink"/>玩<input type="checkbox" name="hobby" value="play"/><br/>居住地：<select><option>请选择省份</option><option>广东省</option><option>湖南省</option></select><select name="city"><option>请选择城市</option><option>深圳</option><option>广州</option><option>惠州</option></select><br/>大头照：<input type="file"/><br/>自我介绍：<textarea name="introduce" cols="30" rows="5"></textarea><br/><!--submit: 提交按钮button: 普通按钮--><input type="submit" value="注册"/></form><br/><!--title当鼠标在图片上静止不动时会有title对应的值的提示信息--><img src="images/tv01.jpg" title="这是电视机"/></body></html>
二. 事件
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><!--如果要点击按钮的时候执行一些javascript代码，就可以给该按钮绑定事件。--><input type="button" value="click me" onclick="alert('Hello JS')"/></body></html>
三. CSS介绍
1. HTML文件
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><!--<style>/* CSS样式 */span {color: green;font-size: 20px;}</style>--><!-- 引入CSS文件 --><link rel="stylesheet" href="css/1.css"/></head><body><span style="color:green;font-size:32px;">苹果</span><span>苹果</span><span>苹果</span><span class="fruit">苹果</span><span id="banana" class="fruit">香蕉</span></body></html>
2. CSS文件
/* 标签选择器 */span {color: red; /* 字体颜色 */font-size: 20px; /* 字体大小 */}/* 类选择器: 根据元素的class属性名进行样式化 */.fruit {color: blue;font-size: 14px;}/* ID选择器: 根据元素ID属性值进行样式化 */#banana {color: yellow;font-size: 14px;}
四. 选择器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>/* 交集选择器：只会对选择1中的选择2进行样式化tbody input {font-size: 28px;}*//* 并集选择器：同时对多个选择器进行样式化tbody, input {font-size: 28px;}*//* 通用选择器* */* {font-size: 20px;}/* 伪类选择器：对元素的不同状态进行样式化 */a:link {font-size: 14px;color: red;}a:hover {font-size: 22px;}a:active {font-size: 22px;color: blue;}a:visited {color: grey;}</style></head><body><table><tbody><tr><td>用户名：</td><td><input type="text" value="小宝"/></td></tr></tbody><tfoot><tr><td colspan="2"><input type="button" value="提交"/></td></tr></tfoot></table><a href="">百度</a></body></html>
五. 伪类选择器案例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css">/* 对tbody中的tr的鼠标滑过的状态进行样式化 */tbody tr:hover {background-color: yellow;}</style></head><body><table border="1" width="300" align="center" cellspacing="0"><thead><tr><th>书名</th><th>作者</th><th>价格</th></tr></thead><tbody align="center"><tr><td>三国演义</td><td>罗贯中</td><td>99</td></tr><tr><td>红楼梦 </td><td>曹雪芹</td><td>89</td></tr><tr><td>西游记 </td><td>吴承恩</td><td>109</td></tr><tr><td>水浒传 </td><td>施耐庵</td><td>79</td></tr></tbody></table></body></html>
六. 背景样式
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>body {height: 2000px;background-color: yellow; /* 设置背景颜色 */background-image: url("images/time1.jpg");/* 设置背景图片 */background-repeat: no-repeat; /* 设置背景图片不重复 */background-position: 50% 50%; /* 设置背景图片的位置 */background-attachment: fixed; /* 设置背景图不滚动 */}</style></head><body></body></html>
七. 字体样式
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>* {font-size: 18px;}span {color: red;font-weight: bolder; /* 字体加粗 */}p {text-indent: 2em; /* 字体缩进(1个em代表1个字体大小) */text-align: left; /* 文本对齐方式 */letter-spacing: 5px; /* 设置文本距离 */text-transform: capitalize; /* 转换大小写 */}a {text-decoration: none; /* 去掉下划线 */}</style></head><body><p><!-- 行内标签 -->设置字体的重量，例如：字体加粗<span>bold border</span></p><a href="">老男孩</a></body></html>
八. 表格样式
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>table {/*border-collapse: collapse; 合并单元格边框 */border-spacing: 10px; /* 设置单元格边框的距离 */}</style></head><body><table border="1" width="500" height="200" align="left"><!-- 表格标题 --><caption align="bottom">学员成绩表</caption><thead><tr align="left"><th>姓名</th><th>性别</th><th>成绩</th></tr></thead><tbody><tr><td align="center">小宝</td><td rowspan="3">男</td><td>100</td></tr><tr><td>大宝</td><!--<td>男</td>--><td>90</td></tr><tr><td>大大宝</td><!--<td>男</td>--><td>95</td></tr><tr><td>平均成绩:</td><td colspan="2">95</td><!--<td></td>--></tr></tbody></table></body></html>
九. 边框样式
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>/*span {border-width: 3px; !* 边框的宽度 *!border-color: red; !* 边框颜色 *!border-style: double; !* 边框风格 *!}*/span {/*border: 1px solid red;*/border-left: 1px solid red;border-top: 1px dotted blue;border-right: 1px dashed green;border-bottom: 3px double yellow;}</style></head><body><span>老男孩</span></body></html>
十. 盒子模型
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>div {width: 180px;height: 180px;border: 1px solid red;/*padding-left: 10px; 设置左内边距 *//*padding-top: 10px; 设置上内边距 *//*padding: 20px 0px 0px 20px; 设置四条边内边距(上右下左) */padding: 10px 10px; /* 设置上下和左右内边距 */}</style></head><body><!-- 块标签 --><div>Python</div><div style="margin-top:10px;margin-left:10px;">Java</div></body></html>
十一. 定位
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0px;}div {width: 150px;height: 150px;border: 1px solid gray;}.red {background-color: red;}.green {background-color: green;/* position: relative; 相对定位 */position: absolute; /*绝对定位 */left: 20px;top: 20px;}.blue {background-color: blue;}</style></head><body><div class="red"></div><div class="green"></div><div class="blue"></div></body></html>
十二. 固定定位
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>body {height: 2000px;}img {position: fixed; /* 固定定位 */top: 250px;left: 980px;}</style></head><body><img src="images/dialog.png"/></body></html>
十三. 浮动定位
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0px;}div {width: 150px;height: 150px;border: 1px solid gray;}.red {background-color: red;float: left; /* 左浮动 */height: 200px;}.green {background-color: green;float: left; /* 左浮动 */}.blue {background-color: blue;float: left; /* 左浮动 */}</style></head><body><div class="red"></div><div class="green"></div><div class="blue"></div><div>我是老男孩</div></body></html>
