day02.html & css知识总结
-
总体知识梳理
代码:
注册页面案例:
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<title></title>
<style type=“text/css”>
/*CSS渲染*/
body{
height:
500px;
}
#out{
background: url(../img/regist_bg.jpg);
height:
100%;
padding-top:80px ;
}
#inner{
border:
5px
solid blueviolet;
width:
800px;
margin:
0
auto;
padding:
20px;
background-color:
#fff;
}
</style>
</head>
<body>
<div id=“out”>
<div id=“inner”>
<table width=“60%” align=“center”>
<tr>
<td colspan=“3”>
<font color=“blue” size=“4”>会员注册</font> USER REGISTER
</td>
</tr>
<tr>
<td align=“right”>用户名</td>
<td colspan=“2”>
<input type=“text” size=“50” />
</td>
</tr>
<tr>
<td align=“right”>密码</td>
<td colspan=“2”>
<input type=“password” size=“50” />
</td>
</tr>
<tr>
<td align=“right”>确认密码</td>
<td colspan=“2”>
<input type=“password” size=“50” />
</td>
</tr>
<tr>
<td align=“right”>Email</td>
<td colspan=“2”>
<input type=“text” size=“50” />
</td>
</tr>
<tr>
<td align=“right”>姓名</td>
<td colspan=“2”>
<input type=“text” size=“50” />
</td>
</tr>
<tr>
<td align=“right”>性别</td>
<td colspan=“2”>
<input type=“radio” name=“sex” value=“1” checked=“checked” />男
<input type=“radio” name=“sex” value=“0” />女
</td>
</tr>
<tr>
<td align=“right”>出生日期</td>
<td colspan=“2”>
<input type=“date” size=“50” />
</td>
</tr>
<tr>
<td align=“right”>验证码</td>
<td colspan=“2”>
<input type=“text” size=“7” maxlength=“4” />
<input type=“image” src=“../img/captcha.jhtml” />
</td>
</tr>
<tr>
<td colspan=“3” align=“center”>
<input type=“submit” width=“100” value=“注册” name=“submit” border=“0” style=“background: url(‘../img/register.gif’) no-repeat
scroll
0
0
rgba(0, 0, 0, 0);
height:35px;width:100px;color:white;” />
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
-
表单相关标签知识梳理:
代码:
01.
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<title></title>
</head>
<body>
<!–
作者：offline
时间：2016-08-10
描述：<form>表单标签，默认不显示
* action：提交到服务程序的路径
* method：提交方式
* get方式：
* 1.数据使用，用？连接
* 2.K=V
* 3.后面参数使用&连接
* 4.参数可见
* post方式：
* 1.参数不可见（相对安全）
* 2.参数不是在URL上面
–>
<form action=“#” method=“post”>
</form>
</body>
</html>
02.
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<title></title>
</head>
<body>
<!–
作者：offline
时间：2016-08-10
描述：<input>输入域标签
单行输入框
*type：取值
1.text：默认
2.password：密码框
3.radio：单选
4.date：日期
5.image：图形提交按钮
6.reset：重置按钮，恢复表单默认值
7.submit：提交按钮
8.hidden：隐藏域
9.file：文件选择框
10.button：普通按钮
11.checkbox：复选框
* readonly：是否只读，会提交到服务器，
* name：如果数据需要提交到服务器，必须设置name属性，服务器根据name属性值获取提交的数据
* value：input默认值
* size：大小
* maxlength：允许输入最大长度
* disabled：是否启用，数据不会提交到服务器
* checked：设置单选或复选选中
*
–>
<form>
用户名<input type=“text” value=“xq” name=“uaername” /><br />
随机数<input type=“text” value=“0311” readonly=“readonly” name=“random” /><br />
伪随机数<input type=“text” value=“888” disabled=“disabled” name=“rm” /><br />
密码<input type=“password” name=“password” /><br />
性别<input type=“radio” name=“sex” value=“1” checked=“checked” />男
<input type=“radio” name=“sex” value=“0” />女<br />
生日<input type=“date” name=“birthday” /><br />
验证码<input type=“text” name=“validate” size=“6” maxlength=“4” />
<input type=“image” src=“../captcha.jhtml” /><br />
爱好<input type=“checkbox” name=“hobby” value=“code” checked=“checked”/>手工
<input type=“checkbox” name=“hobby” value=“code” />java
<input type=“checkbox” name=“hobby” value=“code” />敲代码
<input type=“hidden” value=“间谍” name=“hid” /><br />
<input type=“file” name=“file” /><br />
<input type=“button” value=“点我” /><br />
<input type=“submit” value=“确定” />
<input type=“reset” value=“reset” />
</form>
</body>
</html>
03.
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<title></title>
</head>
<body>
<!–
作者：offline
时间：2016-08-10
描述：<select>下拉选择框
* name：提交到服务器，必须设置，
* value：默认值
* multiple：多选
* size：多选时可见个数
<option>:子选项
*selected默认选中
*
–>
<form action=“#” method=“get”>
<select name=“education” multiple=“multiple” size=“5”>
<option>–请选择学历–</option>
<option value=“small” selected=“selected”>小班</option>
<option value=“middle”>中班</option>
<option value=“big”>大班</option>
<option value=“before”>学前班</option>
<option value=“one”>一年级</option>
</select>
<input type=“submit” />
</form>
</body>
</html>
04.
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<title></title>
</head>
<body>
<!–
作者：offline
时间：2016-08-10
描述：<textarea>多行输入域
* rows 行数
* cols 列数
注意：标签体内不要有空格或换行
–>
<form action=“#” method=“get”>
<textarea rows=“3” cols=“34” name=“disc”></textarea>
<input type=“submit”/>
</form>
</body>
</html>
-
css样式知识梳理:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<title></title>
<style>
font{
color: blue;
}
</style>
</head>
<body>
<!–
作者：offline
时间：2016-08-10
描述：引入方式
1.行内样式：使用HTML的style属性来设置样式。代码臃肿，比较麻烦（不建议使用）
2.内部样式：基本上解决了问题
3.外部样式
注意：rel=”stylesheet”
<link type=”text/css” href=”../css/firstCss.css” rel=”stylesheet”/>
总结：离作用标签越近，效果越明显
–>
<font color=“red” size=“4”>会员注册</font>
<font>会员注册</font>
</body>
</html>
-
选择器知识梳理:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<title></title>
<style type=“text/css”>
/*元素选择器 元素名（标签名）{…css…}*/
font{
color: red;
font-size:
xx-large;
font-family:
“楷体“;
}
/*类选择器 .类名{…css…}*/
.ft{
color: burlywood;
font-size:
xx-small;
font-family:
楷体;
}
/*ID选择器 #id值{…css…}*/
#sec{
color: deepskyblue;
font-size:
medium;
font-family:
“微软雅黑“;
}
/*属性选择器 元素名[属性=’属性值‘]{…css…}*/
font[class=‘ft’]{
color:
#743689;
font-size: calc(5);
font-family:
“宋体“;
}
/*包含选择器 父元素
子代元素{…css…}*/
.body
.ft{
color: crimson;
font-size: -webkit-calc(6);
font-family:
“微软雅黑“;
}
</style>
</head>
<body class=“body”>
<font>会员注册</font><br />
<font id=“sec”>会员注册</font><br />
<h2 class=“ft”>xiaoqiang</h2>
<font class=“ft”>nihao</font>
</body>
</html>
-
div和span
-
css的样式知识梳理:
01.
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<title></title>
<style type=“text/css”>
div{
/*颜色
线条
宽度 */
border: red 1px
solid;
width:
200px;
height:
60px;
display:
inline;
/*display: none;*/
}
font{
/*颜色
线条
宽度*/
border: blueviolet solid
1px;
width:
200px;
height:
60px;
/*display: block;*/
display:
inline-block;
}
</style>
</head>
<body>
<!–
作者：offline
时间：2016-08-10
描述：
display
1.inlin：块元素转换为行元素
2.block：行元素转换为块元素
3.inline—block：行内块元素（具备共同特点）
4.none：隐藏元素
<div>块元素
<font>行元素
–>
<div>1-1</div>
<div>1-2</div>
<h1>公司简介</h1>
<hr />
<font>你好</font>
<font>你好</font>
<b>粗体</b>
<b>粗体</b>
</body>
</html>
02.
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<title></title>
<style>
a{
color: red;
}
.ul{
background-color:#984789 ;
}
#sec{
background-color: aqua;
}
</style>
</head>
<body>
<a href=“#”>淘宝</a>
<ul class=“ul”>
<li>淘宝</li>
<li id=“sec”>京东</li>
<li>百度</li>
</ul>
</body>
</html>
03.
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<title></title>
<style type=“text/css”>
/*
* fload:浮动
* left：左浮动
* right：右浮动
* none：无浮动
* clear：取消浮动
* both:取消左右浮动
*
*/
div{
border: blueviolet 1px
solid;
width:
300px;
height:
43px;
float:
right;
}
</style>
</head>
<body>
<div>1-1</div>
<div style=“clear: both“>1-2</div>
<div style=“clear: both“>1-3</div>
<div>1-4</div>
</body>
</html>
-
css盒子模型知识梳理:
代码:
01.
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<title></title>
<style type=“text/css”>
#out{
border:
1px blue dotted;
width:
600px;
height:
400px;
}
.inner{
border:
1px orangered solid;
width:
200px;
height:
75px;
/*margin顺时针赋值
上
右
下
左*/
margin:
10px
20px
10px
20px;
/*padding顺时针赋值
上
右
下
左*/
padding:
50px
70px;
/*
特殊写法:
margin: 10px 等效于 argin: 10px 10px 10px 10px
margin: 10px 20px 等效于 margin: 10px 20px 10px 20px
margin: 10px 20px 30px 等效于 margin: 10px 20px 30px 20px
*/
}
</style>
</head>
<body>
<div id=“out” align=“center”>
<div class=“inner”>1-1</div>
<div class=“inner” >1-2</div>
</div>
</body>
</html>
02.
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<title></title>
<style type=“text/css”>
#out{
border:
3px blueviolet dotted;
width:
600px;
height:
400px;
}
.inner{
border:
3px royalblue groove;
width:
200px;
height:
88px;
margin:
44px;
border-left:4px red solid ;
}
</style>
</head>
<body>
<div id=“out” align=“center”>
<div class=“inner”>1-1</div>
<div class=“inner”>1-2</div>
</div>
</body>
</html>
