02注册表单、HTML 、CSS
1、表单
表单用来收集数据。
-
标签名称:form
属性:
action:将数据提交到哪里。#表示提交到本页
method:提交数据的方式。 取值可以是以下两个。
get:
举例:http://www.baidu.com?key=value&key=value
1. 数据会显示在地址栏中
2. 使用?分割了地址和提交的数据.
3. 每一个数据都是一个key=value
4. 多个键值对之间使用&分隔
5. 地址栏的长度有限
post(web常用):
1. 数据不会显示在地址栏中
2. 长度不限。 -
表单的组件。
表单中会有一些文本框或者按钮之类的东西,这些东西都是表单的组件。
input标签表示表单的组件
type属性可以控制该组件是什么组件,取值可以是下面的内容
(1)text(记住):文本框(默认值)
(2)password(记住):密码框
(3)radio(记住):单选框
(4)checkbox(记住):复选框
(5)date:日期栏。Html5的特性,有些浏览器不支持
(6)file(记住):文件框
(7)image:图形提交按钮。点击之后提交表单
(8)submit:(记住)提交
(9)reset:重置
(10)hidden(记住):隐藏域。不想给用户显示的内容可以放在隐藏域中。
(11)button(记住):按钮,需要集合js使用。 -
其他属性:需要将要提交的数据放在表单内。
-
name属性:作为提交数据的key(需要将提交的数据加上name属性)。
特殊用途:radio中除了作为数据时的key之外,可以表示一组数据。
特殊用途:checkbox中作为提交数据是的key之外,可以表示一组数据。
value属性:作为提交数据的值。 -
在文本框等组件中给出的value属性,name文本框中会出现默认的内容。
如果不想使用value属性给出的默认值,那么也可以自己在文本框中重新输入,输入的内容是什么,提交的值就是什么。 -
特殊用法,在radio,可以表示要提交的值。
特殊用法,在checkbox,可以表示要提交的值
checked属性:可以将单选框或者复选框变为默认选中的的状态。
标准写法:checked = “checked”
畸形写法:checked = “”或者checked -
了解属性:size:尺寸,默认是20
maxLength:最大输入长度
Readonly:只读。写法readonly = “readonly”。支持畸形写法。数据会提交。
disable:不可用。写法disable = “disable”。支持畸形写法。数据不会提交。
html5中的组件(了解)
button 定义可点击的按钮(大多与 JavaScript 使用来启动脚本)
color 定义拾色器。
date 定义日期字段(带有 calendar 控件)
datetime 定义日期字段(带有 calendar 和 time 控件)
datetime-local 定义日期字段(带有 calendar 和 time 控件)
month 定义日期字段的月(带有 calendar 控件)
week 定义日期字段的周(带有 calendar 控件)
time 定义日期字段的时、分、秒(带有 time 控件)
email 定义用于 e-mail 地址的文本字段
number 定义带有 spinner 控件的数字字段
range 定义带有 slider 控件的数字字段。
search 定义用于搜索的文本字段。
tel 定义用于电话号码的文本字段。
url 定义用于 URL 的文本字段。 -
表单中的下拉框组件:select标签表示下拉框----name属性提交数据的key
子标签option:下拉框中的选项,在option标签的内容中给出的显示的东西
value属性:提交数据的值。
selected属性;默认的选中状态selected = “selected”
select下拉框的了解属性:multiple:多选属性multiple = “multiple”
size:下拉框的显示的个数
表单中的文本域:
textarea:文本域(超大的文本框)
rows:行高。cols:列宽
文本域中的默认值直接在标签的主体内容中给出。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<h3>用户注册</h3>
<form action="server" method="get">
<input type="hidden" name="id" value="123456789">
<table>
<tr>
<td>用户名:</td>
<td><input name="user" type="text" value="孙悟空"></td>
</tr>
<tr>
<td>密码:</td>
<td><input name="pwd" type="password"></td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="gender" value="男" checked="checked">男
<input type="radio"name="gender" value="女">女
</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<input type="checkbox" name="hobby" value="游泳" checked ="checked">游泳
<input type="checkbox" name="hobby" value="上网" >上网
<input type="checkbox" name="hobby" value="上吊" >上吊
<input type="checkbox" name="hobby" value="上学" checked = "checked">上学
</td>
</tr>
<tr>
<td>学历:</td>
<td>
<select name="edu" multiple="multiple" size="4">
<option value="1">高中</option>
<option value="2">大专</option>
<option value="3" selected="selected">本科</option>
<option value="4">硕士</option>
<option value="5">烈士</option>
<option value="6">圣斗士</option>
</select>
</td>
</tr>
<tr>
<td>照片</td>
<td>
<input type="file" name="photo" accept="image/*">
</td>
</tr>
<tr>
<td>个人简介</td>
<td><textarea name="intor" rows="5"> </textarea></td>
</tr>
<tr>
<td colspan="2"align="center"></td>
<td>
<input type="submit" value="注册">
<input type="reset" value="重置">
<input type="button" value="普通按钮">
<button>我也是按钮</button>
<input type="image" src="img/">
</td>
</tr>
</table>
</form>
</body>
</html>
2、CSS
- 介绍css用于页面的美化(主要是美工用的)
1. 功能强大
2. 分工明确,html主要用于页面构建,css用于美化。
CSS的引入(使用)的三种方法:
- 行内引入
让css的样式对某个标签生效。
在标签内提供style的属性,该属性的值就是css的样式。
样式格式:key:value;key:value; - 内部引入
可以让一个页面中的多个元素使用一个css样式。
在head标签中添加标签(规范)
style中的内容的语法:
选择器 {
样式
} - 外部引入
可以让多个页面中的元素使用一个css的样式。
步骤:
- 新建css文件,编写css样式
- 将css的文件进行引入
引入方式: - 在head中使用link标签引入
- 使用style标签引入
@import url("…/css/demo.css");
真正的优先级:后面的样式会覆盖掉前面的样式。优先级最高的是行内引入,不会被覆盖。
CSS的选择器
选择器可以帮助我们从页面上获取标签。
选择器可以用于内部引入或外部引入。
三种基本的选择器:
- id选择器:可以修改唯一的一个标签。在标签中我们可以提供id属性,id属性的值时唯一的。id选择器可以根据元素的id属性值获取标签。
#id名称 {
样式;
} - class选择器:可以根据标签class属性的值获取。每一个标签都可以有class属性,class属性的值允许重复的。
.class名称 {
样式;
} - 标签选择器:根据标签名称获取元素。
标签名称 {
样式;
}
优先级:
id选择器 > class选择器 > 标签选择器----------越精准的选择器,优先级越高。
CSS的扩展选择器------扩展选择器是对基本选择器的组合使用,用法丰富多样。
(1)层级选择器:获取父元素(标签)下面的子元素(标签)。
格式:
父选择器 子选择器 {
样式
}
(2)属性选择器
作用:根据属性选择元素。只要包含某个属性,或者属性的值为指定的就可以选中。
格式:
只要包含该属性就是选中了
标签名称[属性名] {
样式
}
必须属性名=属性值才是选中
标签名称[属性名=属性值] {
样式
}
(3)并集选择器
作用:多个选择器的集合。可以选择多个选择器中的内容。
格式:
选择器1, 选择器2 {
样式
}
/*并集选择器,选择id是myFont的元素,以及div,以及p元素,修改颜色*/
#myFont, div, p {
color: red;
}
</style>
(4)伪类选择器
可以根据元素的状态来选择元素。
链接:
a:link 正常状态
a:visited 访问过的
a:hover 鼠标悬停
a:active 正在激活
文本框:
:focus 得到焦点
/*a:link 正常状态*/
a:link {
color: red;
}
/*a:visited 访问过的*/
a:visited {
color: orange;
}
a:hover {
color: yellow;
}
a:active {
color: green;
}
#myText:focus {
color: red;
}
CSS的背景属性:
-
如果要查找属性以及对应的使用方式,可以参考w3cschool.chm文档。
背景色:background-color
1. 颜色常量,如:red
2. 使用十六进制,如:#ABC
3. 红绿蓝 使用 rgb(红,绿,蓝)
背景图片:background-image url(图片文件)
平铺方式:background-repeat
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
背景位置:background-position
left
Top -
CSS的文本属性:颜色:color
颜色常量,如:red
使用十六进制,如:#123 (常用方式)
使用rgb(红,绿,蓝)函数
设置行高:line-height 单位是像素
文字修饰:text-decoration
none 默认,标准的文本
underline 下划线
overline 上划线
文本对齐:text-align
left 把文本排列到左边。默认值:由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
字体名:font-family 设置字体,本机必须要有这种字体
设置大小:font-size 单位:像素
设置样式:font-style
italic 浏览器会显示一个斜体的字体样式。
normal 默认值。浏览器显示一个标准的字体样式。
设置粗细:font-weight
bolder加粗div { color: red;/*文字颜色*/ line-height: 40px;/*设置行高*/ text-decoration: underline; /*下划线*/ text-align: center;/*对齐方式*/ font-family: 楷体;/*字体样式*/ font-size: 40px;/*字体大小*/ font-style: italic; /*倾斜*/ font-weight: bolder;/*加粗*/ }
-
CSS的浮动和浮动取消: float属性表示浮动
left:向左浮动
right:向右浮动
clear属性表示取消浮动
left:取消左浮
right取消右浮
both:直接取消浮动(3) -
CSS的display:内联标签(行内标签): 不会自动换行
块标签:会自动换行
span是行内标签
div是块标签
display可以让块元素和行内元素进行转换。
display的属性
inline:行内标签。(3)
block: 块标签(1)
none:不显示(4)
display的作用:
1. 将块元素和行内元素进行转换。
2. 隐藏和显示 -
CSS的盒子模型:页面中的任何元素都是盒子。
盒子的组成
1. 内容
2. 边框 border
3. 内间距(盒子与内容之间的距离) padding
4. 外间距(盒子与盒子之间的距离) margin
注意,如果修改内间距,那么盒子会被撑大。
如果不希望盒子被撑大,那么可以使用怪异盒子模型。
标准盒子模型:
内容(不变) + 内间距 + 边框 = 盒子的大小
怪异盒子模型:
设置的盒子的宽和高是多少,盒子的大小就是多少,内容所占的大小会自动压缩。
如果在ccs中给出属性box-sizing:border-box,盒子就会变成怪异盒子