一、表单相关知识
1.表单:
所有需要提交到服务器端的表单项必须使用<form></form>括起来
form标签属性(有两个):
1)action,整个表单提交的位置(可以是一个页面,也可以是一个后台java代码)
2)method,表单提交的方式(get / post / delete ... ...等7种)
get提交方式:所有的内容显示在地址栏,不够安全,长度有限制
post提交方式:所有的内容不会显示在地址栏,比较安全,长度没有限制
2.表单标签:
1)文本输入项:<input type = "text" name = "" size = "" maxlength = "" readonly = "" placehoder = "" />
2)密码输入项:<input type = "password" name = ""./>
3)单选按钮:<input type = "radio" name = "" value = "" checked = "" />
4)多选按钮:<input type = "checkbox" name = "" value = "" checked = "" />
5)下拉列表:
<select name = "">
<option value = "" selected = "">北京</option>
<option value = "">上海</option>
</select>
6)文件上传项:<input type = "file" name = "" />
7)文本输入域:<textarea name = ""></textarea>
8)提交按钮:<input type = "submit" value = "" />
9)普通按钮:<input type = "button" value = "" />
10)重置按钮:<input type = "reset" value = "" />
11)隐藏项:<input type = "hidden" name = "" />
3.表单标签及属性代码
<body>
<form action="#" method="get">
隐藏字段:<input type="hidden" name="id" value="" /><br />
用户名:<input type="text" name="username" readonly="readonly" value="zhangsan" size="40px" maxlength="5" placeholder="请输入用户名"/><br />
密码:<input type="password" name="password" required="required"/><br />
确认密码:<input type="password" name="repassword"/><br />
性别:<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女" checked="checked"/>女<br />
爱好:<input type="checkbox" name="hobby" value="钓鱼"/>钓鱼
<input type="checkbox" name="hobby" value="打电动"/>打电动
<input type="checkbox" name="hobby" value="写代码" checked="checked"/>写代码<br />
头像:<input type="file" name="file"/><br />
籍贯:<select name="province">
<option>--请选择--</option>
<option value="北京">北京</option>
<option value="上海" selected="selected">上海</option>
<option value="广州">广州</option>
</select><br />
自我介绍:
<textarea name="zwjs">
</textarea><br />
提交按钮:<input type="submit" value="注册"/><br />
普通按钮:<input type="button" value="zhuce"/><br />
重置按钮:<input type="reset" />
</form>
</body>
二、div和span
1.div:是一个html标签,一个块级元素(单独显示一行)。它单独使用没有任何意义。必须结合CSS来使用。主要用在页面的布局。
2.span:是一个html标签,一个内联元素(显示一行)。它单独使用没有任何意义。必须结合CSS来使用。主要用于对摞起来的内容进行样式的修饰。
三、CSS
1.作用:
HTML:它是整个网站的骨架
CSS:它是对整个网站骨架的内容进行美化(修饰)
2.引入方式(3种):
1)行内引入
2)内容引入方式
3)外部引入
3.基本选择器(3种):
1)ID选择器:(保证唯一性)
#id 属性名{
属性名n:属性值n; 最后一行的分号可以省略,但最好不要省略。
}
2)元素选择器:(一般所有的元素设置相同样式时使用)
元素名{
属性名n:属性值n;
}
3)类选择器:(一般较多元素设置相同样式时使用)
.类名{
属性名n:属性值n;
}
4.其他选择器:
1)层次选择器:
元素名 子元素名{
属性名n:属性值n;
}
2.属性选择器:
元素名[属性名 = "属性值"]{
属性名n:属性值n;
}
如:input [ type = "text" ] {
... ...
}
5.浮动:
浮动的框可以向左或向右移动,知道它的外边缘碰到包含框或另外一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
四、补充:
1.去掉超链接下划线:
a{
text-decoration : none;
}
2.让div居中:
margin:0px auto;
3.让块级元素称为内联元素
display : inline;
4.块级元素内容居中:
text-align : center;