form表单域
- form作用是在网页中向服务器提交数据
- 语法
<form action="提交数据的目标地址" method="get/post" get意思是明文方式提交数据,post通过http协议体方式提交数据
</form>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="http://www.baidu.com" method="post">
</form>
</body>
</html>
- 输入框
- input
- type=“text”
- 密码框
- input
- type=“password”
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="http://www.baidu.com" method="post">
用户名:
<input type="text" /><br />
密 码:
<input type="password" />
</form>
</body>
</html>
- 单选钮
- input
- type=“radio”
- name=“值”, 如果要实现多个单选钮选一个另一个失效,那么多个单选钮需要用相同的name属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="http://www.baidu.com" method="post">
用户名:
<input type="text" /><br />
密 码:
<input type="password" /><br />
性别:
<input type="radio" name="r1"/>男
<input type="radio" name="r1"/>女
</form>
</body>
</html>
- 复选钮
- input
- type=“checkbox”
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="http://www.baidu.com" method="post">
用户名:
<input type="text" /><br />
密 码:
<input type="password" /><br />
性别:
<input type="radio" name="r1"/>男
<input type="radio" name="r1"/>女<br />
您的爱好:
<input type="checkbox" />测试
<input type="checkbox" />吃饭
<input type="checkbox" />睡觉
</form>
</body>
</html>
- 下拉列表
- select实现一个下拉列表
- option实现下拉列表中的具体项
- option标签需要包裹在select标签里面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="http://www.baidu.com" method="post">
用户名:
<input type="text" /><br />
密 码:
<input type="password" /><br />
性别:
<input type="radio" name="r1"/>男
<input type="radio" name="r1"/>女<br />
您的爱好:
<input type="checkbox" />测试
<input type="checkbox" />吃饭
<input type="checkbox" />睡觉<br />
您来自哪里:
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
</form>
</body>
</html>
- 文本域
- textarea
- rows — 行数
- cols ----一行的字数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="http://www.baidu.com" method="post">
用户名:
<input type="text" /><br />
密 码:
<input type="password" /><br />
性别:
<input type="radio" name="r1"/>男
<input type="radio" name="r1"/>女<br />
您的爱好:
<input type="checkbox" />测试
<input type="checkbox" />吃饭
<input type="checkbox" />睡觉<br />
您来自哪里:
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
<br />
您的建议:
<textarea rows="10" cols="20"></textarea>
</form>
</body>
</html>
- 按钮
- 普通按钮
- input
- type=“button”
- 重置按钮
- input
- type=“reset”
- 提交按钮
- inpu
- type"submit"
- value–按钮表面显示的文字
- 这个属性一定不能忽略
- 对于提交按钮submit,在测试阶段,如果不确定数据提交到哪里
- form action属性值设置为"#" method设置为get
- 普通按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="#" method="get">
用户名:
<input type="text" /><br />
密 码:
<input type="password" /><br />
性别:
<input type="radio" name="r1"/>男
<input type="radio" name="r1"/>女<br />
您的爱好:
<input type="checkbox" />测试
<input type="checkbox" />吃饭
<input type="checkbox" />睡觉<br />
您来自哪里:
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
<br />
您的建议:
<textarea rows="10" cols="20"></textarea>
<br />
<input type="button" value="OK"/>
<input type="reset" value="重置"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
- 附加功能演示
- placeholder
- 输入框或者密码框内容为空的时候给用户一个友好的提示
- checked
- 单选钮或者复选钮默认选中状态
- checked="checked"如果属性名和属性值相同,那么可以省略属性值,只写属性名即可
- checked
- selected
- 下拉列表默认选中项
- selected=“selected”
- selected
- placeholder
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="#" method="get">
用户名:
<input type="text" placeholder="请输入用户名"/><br />
密 码:
<input type="password" placeholder="请输入密码"/><br />
性别:
<input type="radio" name="r1" />男
<input type="radio" name="r1" checked="checked"/>女<br />
您的爱好:
<input type="checkbox" />测试
<input type="checkbox" checked="checked"/>吃饭
<input type="checkbox" checked/>睡觉<br />
您来自哪里:
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option selected>深圳</option>
</select>
<br />
您的建议:
<textarea rows="10" cols="20"></textarea>
<br />
<input type="button" value="OK"/>
<input type="reset" value="重置"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
form小结
- input
- type
- text文本框
- password密码框
- radio单选钮
- checkbox复选钮
- button普通按钮
- reset重置按钮
- submit提交按钮
- value
- 当type为按钮的时候,value是按钮表面显示的文字
- placeholder
- 当type为输入框或者密码框,代表提示文字
- checked=“checked”
- 当type为单选钮或者复选钮,为默认选中按钮
- type
- select下拉列表
- option
- selected="selected"默认选中的选项
- textarea
- rows 行数
- cols 一行的字符数
- form
- action----点击提交按钮,数据要提交的服务器地址
- action="#"提交目标为空
- method
- get—用明文方式提交数据
- post—用http协议体的方式提交数据
- action----点击提交按钮,数据要提交的服务器地址
CSS
- web开发标准
- 结构----html
- 样式----css
- 行为----js
- 结构,样式,行为三者分离
- css代码书写位置
- 习惯把css代码写在head标签里,title标签的下面
- 用style标签包裹起来
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*书写css代码*/
</style>
</head>
<body>
</body>
</html>
- css基本语法
标签名{
css样式: 值;
css样式: 值;
}
css中如果涉及到像素,一定要带单位px
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*书写css代码*/
div{
background-color: red;
font-size: 50px;
color: yellow;
width: 500px;
height: 600px;
}
</style>
</head>
<body>
<div>
今天很高兴,认识了css和form
</div>
</body>
</html>
- css常用样式
background-color: red; /*背景色*/
font-size: 50px; /*字体大小,单位像素*/
color: yellow; /*文字颜色*/
width: 1000px; /*宽度*/
height: 600px; /*高度*/
/*text-align: right;*/ /*文字右对齐*/
text-align: center; /*文字居中*/
font-family: "楷体"; /*文字字体*/
/*text-decoration: line-through;*/ /*文字删除线*/
/*text-decoration:underline;*/ /*文字下划线*/
text-decoration: overline; /*文字上划线*/
font-weight: 900; /*文字加粗*/
font-style: italic; /*文字倾斜*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*书写css代码*/
div{
background-color: red; /*背景色*/
font-size: 50px; /*字体大小,单位像素*/
color: yellow; /*文字颜色*/
width: 1000px; /*宽度*/
height: 600px; /*高度*/
/*text-align: right;*/ /*文字右对齐*/
text-align: center; /*文字居中*/
font-family: "楷体"; /*文字字体*/
/*text-decoration: line-through;*/ /*文字删除线*/
/*text-decoration:underline;*/ /*文字下划线*/
text-decoration: overline; /*文字上划线*/
font-weight: 900; /*文字加粗*/
font-style: italic; /*文字倾斜*/
}
</style>
</head>
<body>
<div>
今天很高兴,认识了css和form
</div>
</body>
</html>
- css的原则
- 找到相应的元素,用样式来修饰这个元素
- 标签名{css样式}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
background-color: red;
}
p{
background-color: blue;
}
span{
font-size: 100px;
}
</style>
</head>
<body>
<div>
我是大盒子
</div>
<p>
我是一个小pp
</p>
<span>
我是小盒子
</span>
</body>
</html>
- 课堂练习
一个div
一个span
一个p
div背景为黄色
span背景为绿色
p的文字颜色为红色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
background-color: yellow;
}
span{
background-color: green;
}
p{
color: red;
}
</style>
</head>
<body>
<div>
aaaaaaaaaaaaaaaaaaaaa
</div>
<span>
bbbbbbbbbbbbbbbbbbbbbbb
</span>
<p>
cccccccccccccccccccccccccc
</p>
</body>
</html>
- 标签名选择器
- 通过标签名选中要修改css样式的元素
- 标签名{CSS样式}
- 同一个html中所有的同名标签,都会受到影响
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
color: red;
}
p{
font-size: 50px;
}
</style>
</head>
<body>
<div>
我是大盒子1
</div>
<div>
我是大盒子2
</div>
<p>
我是pppppp1
</p>
<p>
我是ppppp2
</p>
</body>
</html>
- 类名选择器
- 第一步:标签需要有个class属性,属性的值就是类名,不要用中文,也不要用特殊符号
- 第二步:.类名{CSS}
- 通过类名选择器,可以实现同样的标签,不同的css样式,可以实现不同的标签相同css样式
- 类名可以同名
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.c1{
font-size: 100px;
}
.c2{
background-color: red;
}
.c3{
color: yellow;
}
</style>
</head>
<body>
<div class="c1">
大盒子11111111111111111111111111
</div>
<div class="c2">
大盒子222222222222222222222222222
</div>
<p class="c3">
pppppppppppppppppppppppppppppppppppppp
</p>
<span class="c3">
cccccccccccccccccccccccccccccccccccc
</span>
</body>
</html>
- 课堂练习
两个p
两个div
第一个p的字体颜色是黄色
第二个p的字体颜色是红色
第一个div的字号为50px
第二个div的字号为100px
第二个div的背景颜色为黄色
第二个div的文字为倾斜
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.c1{
color: yellow;
}
.c2{
color: red;
}
.c3{
font-size: 50px;
}
.c4{
font-size: 100px;
background-color: yellow;
font-style: italic;
}
</style>
</head>
<body>
<p class="c1">
aaaaaaaaaaaaaaaaa
</p>
<p class="c2">
bbbbbbbbbbbbbbbbbbbbb
</p>
<div class="c3">
ccccccccccccccccccccccccc
</div>
<div class="c4">
dddddddddddddddddd
</div>
</body>
</html>
- id名选择器
- 第一步:给标签起一个id名
- 第二步:#id名{CSS}
- 同一个html,id名不能重名
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#id1{
color: red;
}
#id2{
color: yellow;
}
#id3{
color: blue;
}
</style>
</head>
<body>
<div id="id1">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div id="id2">
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
</div>
<span id="id3">
cccccccccccccccccccccccccccccc
</span>
</body>
</html>
- 课堂练习
用id名选择器修饰
一个div,红色字体
第一个div蓝色字体
一个div,背景为黄色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#id1{
color: red;
}
#id2{
color: blue;
}
#id3{
background-color: yellow;
}
</style>
</head>
<body>
<div id="id1">
aaaaaaaaaaaaaaaaaa
</div>
<div id="id2">
bbbbbbbbbbbbbbbbbbbbbbb
</div>
<div id="id3">
ccccccccccccccccccccccccccc
</div>
</body>
</html>
-
简单选择器
- 标签名选择器
- 标签名{CSS}
- 类名选择器
- .类名{CSS}
- 给标签起一个class名
- 同一个html中可以有相同的class名
- id名选择器
#id名{CSS}- 给标签起一个id名
- 同一个html中,不允许有重名的id名
- 标签名选择器
-
class和id的命名规则
- 可以是字符和数字
- 不能数字开头
- 不能纯数字
- 不能用特殊符号
- 不能用中文
- 不能用保留字
- 可以使用下划线_
-
css三大特性
- 继承性
- 覆盖性
- 优先级
继承性
- 标签有嵌套关系,最外层的标签为父标签,内层为子标签
- 父标签的css样式会自动继承给子标签
- 如果子标签也有属于自己的样式,会放弃继承
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
color: red;
}
span{
color: yellow;
}
</style>
</head>
<body>
<div>
<span>aaaaaaaaaaaaaaaaa</span>
<p>bbbbbbbbbbbbbbbbbbb</p>
<p>
<span>
ccccccccc
</span>
</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
color: yellow;
}
span{
font-size: 50px;
}
</style>
</head>
<body>
<div>
<span>
aaaaaaaaaaaaaaaaaa
</span>
</div>
</body>
</html>
覆盖性
- 相同的选择器,后写的会覆盖先写的css样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
color: red;
}
div{
color: yellow;
}
</style>
</head>
<body>
<div>
aaaaaaaaaaaaaaaaaaaa
</div>
</body>
</html>
以下例子不属于覆盖性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
color: red;
}
div{
font-size: 100px;
}
</style>
</head>
<body>
<div>
aaaaaaaaaaaaaaa
</div>
</body>
</html>
优先级
- 当不同的选择器选择到同一个元素,id选择器优先级最高,其次为类名选择器,标签名选择器优先级最低
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#id1{
color: black;
}
.c1{
color: yellow;
}
div{
color: red;
}
</style>
</head>
<body>
<div class="c1" id="id1">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</body>
</html>
以下代码与优先级无关
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#id1{
color: red;
}
.c1{
font-size: 100px;
}
div{
background-color: yellow;
}
</style>
</head>
<body>
<div class="c1" id="id1">aaaaaaaaaaaaaaaaaaaa</div>
</body>
</html>
- 一个小例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
color: yellow;
}
.c1{
color: red;
}
div{
font-size: 100px;
}
</style>
</head>
<body>
<div class="c1" id="id1">
<span>
aaaaaaaaaaaaaa
</span>
</div>
<span>
bbbbbbbbbbbbbbbbbbbbbb
</span>
</body>
</html>
2235
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
