css

目录

form表单

'''获取其那段用户数据并发送给后端服务器'''
<form action=""></form>  # 需要在form标签内部编写获取用户数据标签

# 1.属性action
	控制数据的提交地址
    方式1：写全路径
    	action = "http://www.aa7a.cn/user.php"
    方式2：写后缀（自动补全IP和Port）
    	action = "user.php"
	方式3：不写（朝网页所在的地址提交）
    	action=""
	'''URL：统一资源定位符'''
# 2.input标签
	获取用户各种种类数据的标签（html里面的变形金刚）
    type属性
    text				正常展示普通文本
    password			 密文展示
    date				 日历展示
    radio				  单选
    '''
    可以通过添加  checked="checked"  设置默认值  如果属性名和属性值相同可以简写checked
    '''
    checkbox			  多选
    '''
    可以通过添加 checked = "checked"  设置默认值 跟单选一样可以简写
    '''
    email				  邮箱格式数据
    file				  文件数据
    '''
    可以通过添加multiple属性控制获取单个还是多个文件
    '''
    sumbit				   触发form表单提交数据的动作
    '''
    能够触发form表单提交数据动作的标签有两个
    1.input的type=submit
    2.单独的button而不是type = button
    '''
    reset					重置页面填写的数据
    button					 普通按钮默认没有任何的功能
    
# 3.select标签
    下拉框
    <select name="province" id="">
    	<option value="bj">北京</option>
        <option value="SH">上海</option>
	    <option value="SZ">深圳</option>
    </select> 
   '''
    一个个的下拉选项是一个个的option标签
    默认是单选 也可以添加multiple变成多选
   '''
# 4.textarea标签
	获取大段文本内容
    <textarea name="desc"></textarea>
'''
input标签中有两个非常重要的属性
1.name属性
	类似于字典的key（前端程序员写）
2.value属性
	类似于字典的value（用户自己传）
	如果标签是选择类型的 那么还需要前端程序员自己填写value
	用于具体数据含义
ps：我们在编写input标签的时候应该添加name属性
'''
# 2.lable标签
	给input标签配文字说明 也不是不可以使用
    方式1：
    	<label for="d1">用户名</label>
        <input type="text" id="d1">
    方式2：
    	<label>用户名：
        <input type = "text">
        </label>

网络请求方式

'''最常见的网络请求方式有两种'''
1.get请求
	朝服务端索要数据
2.post请求
	朝服务端提交数据
# 两种请求都可以携带数据
	get请求是在url后面通过?组织数据
    url?name=&pwd&emaill
    post请求是在请求体中组织数据
    	HTTP协议请求数据格式
'''
get请求虽然可以携带数据 但是一般只用于不重要的数据携带
并且get请求携带数据的大小有限制最多只能携带2kb
get请求的数据是直接显示在  浏览器搜索框
'''

form表单中有一个method属性 用于控制提交方式
	有两个选项 默认get请求

CSS简介

# 1.语法结构
	选择器{属性名1：属性值1； 属性名：属性值}
# 2.语法注释
/*注释内容*/
'''
一个正常的网页css样式是有非常多 就算专门开设css文件存储也很乱
这个时候就可以在css文件中通过注释来辅助辨别与查找
  	eg:
  		/*博客园样式表*/
  		/*导航条样式*/
  		/*左侧栏样式*/
  		/*右侧栏样式*/
'''
# 3.多种引入css的方式
1.head内style标签内部直接编写css代码
2.head内link标签引入外部css文件
3.标签内部通过style属性直接编写
	第三种也称之为"行内式"是最不推荐使用的一种方式
    因为它会将HTML和CSS柔和到一起 增加耦合度

CSS的学习流程是 先学会如何查找标签 之后才能学如何给标签修改样式

CSS查找标签值基本选择器

# 1.标签选择器（范围查找）
	直接通过标签名查找标签
    h1 {
        color: deeppink; /*让所有h1标签内部所有的字体颜色变为深粉色*/
        } 
# 2.类选择器查找（范围查找）
	通过标签的class属性查找标签
	.c1 {
         color: greenyellow;  /*将所有class属性中含有c1的标签内部字体颜色改为亮绿色*/
        }
# 3.id选择器(精确查找)
	通过标签的id属性查找标签
  	#d1 {
         color: orange;
         }
# 4.通用选择器(了解 几乎不用)
	查找所有的标签
  	* {
      	color: blue;
    }

css查找标签之组合选择器

标签关系
<div>div1
	<div>div2
		<p>p1</p>
	</div>
    
	<p>p2
		<span>span1</span>
	</p>
    
	<span>span2</span>
</div>
<!--
通过嵌套层级来表示亲属关系
1.对于div1来说 div1来说div2、p2、span2都是儿子
2.对于div2、p2、span2来说div1就是父亲
3.对于p1来说div2是父亲 div1是爷爷(可以将div1和div2统称为祖先)
4.对于span2来说div2、p2是哥哥
5.div1内部所有的标签无论层级都可以称之为是div1的后代
-->
1.儿子选择器（关键符号是大于号）
#d1 > span{
<!--查找id是d1标签内的所有儿子span-->
}

2.后代选择器（关键符号空格）
#d1 span{
<!--查找id是d1标签内部的所有后代span-->
}

3.毗邻选择器（关键符号是加号）
#d1 + a{
<!--查找id是d1标签 同级别下面的所有a-->
}

属性选择器

<!--根据标签内部的属性名和属性值查找标签-->
1.直接通过属性名查找
[type]{
<!--查找具有type属性的所有标签-->
}

2.属性名是type并且值是text的标签
[type='text']{}

3.属性名是type并且值是text的div标签
div[type='text']{}

分组与嵌套

1.分组
div,p,span{
<!--查找div或p或span-->
}

2.嵌套
#d1,.c1,span{
<!--查找id是d1或者 class包含c1 或者span-->
}
<!--
综合玩法
	玩法1
		div#d1				查找id是d1的div标签
		div.c1				查找class包含c1的div标签

	玩法2
		div #d1				查找div标签内id是d1的后代标签
		#d1>.c1				查找id是d1的儿子标签class包含c1的标签
-->

伪类选择器

# 鼠标悬浮
p:hover{
<!--鼠标移动到p标签上方 p的样式会变为该类里面的样式-->
}

#获取焦点
input:focus{
<!--输入框被鼠标选中（聚焦）-->
background-color:black;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <style>

    </style>
</head>
<body>
<form action="">
    <p>用户名：
    <input type="text">
</p>

<p>
    密码：<input type="password">
</p>

<p>
    绑定邮箱：<input type="email">
</p>

<p>出生日期：
    <input type="date" name="birthday">
</p>

<p>性别：
    男<input type="radio" name="male" checked>
    女<input type="radio" name="famale">
</p>

<p>爱好：
    唱<input type="checkbox">
    跳<input type="checkbox">
    篮球<input type="checkbox">

</p>

<p>地址：
    <select name="a">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
    </select>
    <select name="b" >
        <option value="a">东</option>
        <option value="b">南</option>
        <option value="c">西</option>
    </select>
</p>

<p>
    <input type="submit">
    <input type="reset">
</p>
</form>

</body>
</html>
posted @   名字只需六字  阅读(25)  评论(0)  编辑  收藏  举报
相关博文：
·  前端HTML
·  froms组件 cookie session
·  HTML之CSS
·  HTML+CSS
·  form表单与CSS选择器和样式操作
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· winform 绘制太阳，地球，月球 运作规律
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
点击右上角即可分享
微信分享提示
AI IDE Trae