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表单提交数据的动作

  1. input标签中加入 type=sumbit
  2. 使用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;
} 

选择器的优先级

img

原文地址:https://www.cnblogs.com/samoo/p/11853328.html