HTML基础(二)----form表单和CSS
目录
HTML基础（二）form表单、CSS
form表单
表单用于向服务器传输数据，从而实现用户与Web服务器的交互
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等
表单还可以包含textarea、select、fieldset和label标签
参数：
action：控制数据提交的地址
三种书写方式
1. 不写 默认朝当前页面所在的地址提交数据
2. 写全路径
3.只写路径后缀
method：控制数据提交的方式
get form表单默认是get请求
pos
input用法
input需要和label一起使用
<form action="">
<label for="">
<input type="text" name="" id="">
</label>
</form>
--------------------------------------------------------
<label for="d1">用户名:</label>
<input type="text" id="d1">
| type属性值 | 表现形式 | 对应代码 |
|---|---|---|
| text | 单行输入文本 | <input type=text" /> |
| password | 密码输入框 | |
| date | 日期输入框 | |
| checkbox | 复选框 | |
| radio | 单选框 | |
| submit | 提交按钮 | |
| reset | 重置按钮 | |
| button | 普通按钮 | |
| hidden | 隐藏输入框 | |
| file | 文本选择框 |
#form表单如果要提交文件数据 必须修改以下参数
#enctype="multipart/form-data"
<form action="" method="post" enctype="multipart/form-data">
<p>
<label for="d1">
用户名：<input type="text" name="d1" >
</label>
</p>
<p>
密码：<input type="password" >
</p>
<p>
生日：<input type="date" >
</p>
<p>
毕业院校：<input type="text" >
</p>
<p>
男<input type="radio" name="gender" value="male">
女<input type="radio" name="gender" value="female">
</p>
<p>
python<input type="checkbox" name="course" value="python">
linux<input type="checkbox" name="course" value="linux">
go<input type="checkbox" name="course" value="go">
</p>
<p>
<input type="hidden" name="" >
</p>
<p>自我介绍:
<textarea name="info" id="" cols="100" rows="10"></textarea>
</p>
<p>证书:
<input type="file" name="myfile">
</p>
<p>
<input type="button" value="按钮">
<input type="reset" value="重置">
<input type="submit" value="提交">
</p>
</form>
#disable属性:禁用该input框
<p><label for="d1">
用户名:<input type="text" id="d1" name="username" disable></label></p>
#value属性 设置默认值
<p><label for="d1">
用户名:<input type="text" id="d1" value="momo" name="username" disable></label></p>
#默认选中 radio checkbox
checked='checked'
当属性名和属性值相同的时候 可以只写属性名(******)
select标签
<p>course:
<select name="" id="" multiple>
<option value="">python</option>
<option value="">linux</option>
<option value="">go</option>
</select>
</p>
textarea多行文本
<p>个人简历:
<input type="file" name="myfile">
</p>
form表单提交数据的动作
- input标签中加入 type=sumbit
- 使用button标签
<input type="submit" value="提交">
<button> button </button>
CSS
层叠样式表:用于控制html标签样式
语法结构:
选择器 {属性1:属性值1}
<style>
p{
background-color: #2b99ff;
}
</style>
CSS的三种引入方式
1.通过link标签引入外部css文件
<link rel="stylesheet" href="02%20示例css样式.css">
2.直接在html页面上的head内,通过style标签直接书写css代码
<style>
p{
background-color: #2b99ff;
}
</style>
3.行内式(直接在标签内部通过style属性直接书写)
<h1 style="color: orange">我是标签内部</h1>
基本选择器
元素选择器
p {color: "red";}
ID选择器
#id选择器 #+id值
#d1 {
background-color: red;
}
类选择器
#类选择器 .+类值
.c1 {
font-size: 14px;
}
通用选择器
#通用选择器 *
* {
color: white;
}
组合选择器
后代选择器
#li内部的a标签设置字体颜色
li a {
color: green;
}
儿子选择器
#选择所有父级是 <div> 元素的 <p> 元素
div>p {
font-family: "Arial Black", arial-black, cursive;
}
毗邻选择器
#选择所有紧接着<div>元素之后的<p>元素
div+p {
margin: 5px;
}
弟弟选择器
#弟弟选择器 同级别下面所有的
div~span {
color: orange;
}
属性选择器
#1.含有某个属性名的标签
#2.含有某个属性名并且属性值是...的标签
#3.找p标签并且含有某个属性名并且属性值是...的标签
[password] {
color: red;
}
[username] {
color: black;
}
分组和嵌套
分组
#d1 {
color: red;
}
.c1 {
color: red;
}
p {
color: red;
}
--------------------------------------------------------
#d1,.c1,p {
color: orange;
}
嵌套
# 空一格代表内部所有的
.c1 p {
color: red;
}
伪类选择器
#未访问的链接
a:link {
color: red;
}
#鼠标移动到链接上
a:hover { /*hover表示的就是悬浮的意思*/
color: black;
}
# 选定的链接
a:active {
color: orange;
}
#已访问的链接
a:visited {
color: pink;
}
#input输入框获取焦点时样式
input:focus {
background-color: orange;
}
span:hover {
background-color: pink;
}
伪元素选择器
first-letter
#给首字母设置特殊样式
p:first-letter {
font-size: 48px;
color: red;
}
before
/*在每个<p>元素之前插入内容*/
p:before {
content:"*";
color:red;
}
after
/*在每个<p>元素之后插入内容*/
p:after {
content:"[?]";
color:blue;
}
选择器的优先级
