HTML基础
# form表单概念
表单可以理解为需要用户注册或者登陆的表单，也是有许多个标签以及属性值来展现出来，form标签用来表示整个表单结构的双标签，称之为表单域，
标签书写为：<form action="" method=""></form>
# action属性
控制数据的提交地址
方式1:写全路径
action="http://www.aa7a.cn/user.php"
方式2:写后缀(自动补全IP和PORT)
action="user.php"
方式3:不写(朝网页所在的地址提交)
action=""
'''URL:统一资源定位符(网址)'''
# method属性
method属性值表示以什么样式来提交当前表单的数据，最常见的是get和post，get是指将数据在url中进行提交，这种方式因为是明文，所以相对不安全，而post方式是指数据写在html请求的请求体中
常见的表单元素
# 文本输入框
<input type="test"/>
# 密码输入框
<input type="password"/>
# 提交按钮
<input type="submit"/>
# 单选框
<input type="radio"/>
因为是单选所以在radio" 后面还要再加个name="单选的类别的英文的单词或者拼音即可例如，xingbie" />单选的内容，例如：男，如果不加name就会成为多选，<input type="radio" name=xingbie/>男孩纸； <input type="radio" name=xingbie/>女孩纸
# 多选框
<input type="checkbox"/>
'如果刷新网页，需要网页中选项默认被选中，就在checkbox后面加checked="checked" 因为属性值一样，所以简写成checked 也可以，单选同等'
# 文本域 textarea
<textarea rows="行数" cols="列数"></textarea>
# 下拉框 select
也是一个属性值等于属性名的属性，添加下拉选项后面也能实现选项被默认显示被选中下拉框
<select name="province" id="">
<option value="BJ">北京</option>
<option value="SH">上海</option>
<option value="SZ">深圳</option>
</select>
'''一个个的下拉选项是一个个option标签
默认是单选 也可以添加multiple变成多选'''
# 重置按钮
<input type"rsset"/>
# 普通按钮
<input type"button" value"按钮的名字"/>
按钮的名字可以举例：登录，注册，展开
表单元素细节
# name属性
是用来区分哪个数据属于什么样的表单项
# value
可以用在具有文本框的属性值后面，写上value之后刷新网页 框内会默认显示加了value的表单项
# textarea标签
获取大段文本内容
<textarea name="desc"></textarea>
"""
input标签中有两个非常重要的属性
1.name属性
类似于字典的key(前端程序员写)
2.value属性
类似于字典的value(用户自己传)
如果标签是选择类型的 那么还需要前端程序员自己填写value
用于区分具体数据含义
ps:我们在编写input标签的时候应该添加name属性
"""
网络请求方式
在HTTP/1.1协议中，定义了8种发送http请求的方法
GET、POST、OPTIONS、HEAD、PUT、DELETE、TRACE、CONNECT、PATCH
根据HTTP协议的设计初衷，不同的方法对资源有不同的操作方式
"""最常见的网络请求方式有两种"""
1.get请求
朝服务端索要数据
2.post请求
朝服务端提交数据
# 两种请求都可以携带数据
get请求是在url后面通过?组织数据
url?name=jason&pwd=123&email=123@qq.com
post请求是在请求体中组织数据
HTTP协议请求数据格式
理论上，POST传递的数据量没有限制（具体还得看服务器的处理能力）
'''
get请求虽然可以携带数据 但是一般只用于不重要的数据携带
并且get请求携带数据的大小有限制 最多只能携带2KB左右
'''
form表单中有一个method属性 用于控制提交的方式
有两个选项 默认是get请求
# GET和POST的选择
选择GET和POST的建议
（1）如果要传递大量数据，比如文件上传，只能用POST请求
（2）GET的安全性比POST要差些，如果包含机密\敏感信息，建议用POST
（3）如果仅仅是索取数据（数据查询），建议使用GET
（4）如果是增加、修改、删除数据，建议使用POST
CSS
CSS简介
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力
CSS语法结构
# 由两个主要的部分构成：选择器，以及一条或多条声明:
选择器通常是您需要改变样式的 HTML 元素
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开
# 多种引入css的方式
1.head内style标签内部直接编写css代码
2.head内link标签引入外部css文件
工作中一般使用的都是link形式 符合标准
3.标签内部通过style属性直接编写
第三种也称之为"行内式"是最不推荐使用的一种方式
因为它会将HTML和CSS柔和到一起 增加了耦合度
行内元素、块元素和空元素
# 行内元素特点
1、和其他元素都在一行上
2、元素的高度、宽度、行高及顶部和底部边距不可设置
3、元素的宽度就是它包含的文字或图片的宽度，不可改变
# 块级元素特点
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度
# 空元素
知名的空元素： <br> <hr> <img> <input> <link> <meta>
鲜为人知的是： <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
'''通过CSS，我们可以定位元素、控制元素的可见性和尺寸、设置元素的形状、将一个元素置于另一个之后，以及向某些选择器添加特殊的效果，比如链接。可以渲染HTML，使页面更加美观'''
CSS查找标签之基本选择器
# 1.标签选择器(范围查找)
直接通过标签名查找标签
li {
color: deeppink;
}
# 2.类选择器(范围查找)
通过标签的class属性查找标签(关键性符号是句点符)
.c1 {
color: greenyellow; /*将所有class属性中含有c1的标签内部字体颜色改为亮绿色*/
}
# 3.id选择器(精确查找)
通过标签的id属性查找标签
#d1 {
color: orange;
}
'''ID选择器有以下几点需要注意：
一. ID，就像你的QQ号一样，是唯一的，每个ID选择器的名不能重复，但是class类名可以重复。
二. id选择器不能像类选择器一样多个合并使用，一个元素只能命名一个id名。
三. 可以在不同文档中使用同一个ID名，但前提是每个文档中不能有重复的ID名。'''
# 4.通用选择器(了解 几乎不用)
查找所有的标签
* {
color: blue;
}
'''用“ * ”来表示，用来选中所有元素，但在企业开发中一般不会使用通配符选择器，而有些表单、新闻详情这类简单、干净、一致的页面会有全局设置，目的就是看起来简洁、整齐。'''
CSS查找标签之组合选择器
后代选择器
'''关键符号是空格'''
# /*后代选择器：空格表示后代，下面示例表示c1下面的所有后代*/
.c1 {
color: red;
}
# /*后代选择器，空格表示后代，c1后代中包含c3的*/
.c1 .c3{
color: blue;
}
# /*后代选择器，表示c1的后代包含c2，c2的后代包含c3*/
.c1 .c2 .c3{
color: brown;
}
# /*子代选择器，用“>”表示子代，表示作用于c1的儿子*/
.c1 > .c4{
color: aqua;
}
</style>
毗邻选择器
# 毗邻选择器：第一个兄弟（同级称之为兄弟），只能向下找兄弟
# 关键符号是加号
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c3 + .c4{
color: blue;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2">
<div class="c3">item1</div>
</div>
<div class="c3">item2</div>
<div class="c4">item3</div>
</div>
</body>
'''示例中c2、c3、c4都是兄弟，但是该样式之作用于c4'''
弟弟选择器
# 关键符号是小波浪号
<style>
'查找id是i1标签同级别下面所有div标签'
#i1 ~ div{
color: red;
}
'查找id是i1标签同级别下面div标签 class是c4的'
#i1 ~ div.c4{
color: blue;
}
</style>
<body>
<p id="i1">item0</p>
<div class="c1">item1</div>
<div class="c2">item2</div>
<div class="c3">item3</div>
<div class="c4">item4</div>
</body>
儿子选择器
儿子选择器(关键符号是大于号)
#d1 > span { 查找id是d1标签内部所有的儿子span
color: red;
}
与或选择器
<style>
'与选择器：标签为p的，并且class为c1，需要两个条件同时满足'
p.c1{
color: red;
}
'或选择器：用逗号表示或；标签为p并且class为c1，或id为i1'
p.c1,#i1{
color: blue;
}
</style>
<body>
<div class="c1">item1</div>
<p class="c1">item2</p>
<div>item3</div>
<p id="i1">item4</p>
</body>
属性选择器
# 根据标签内部的属性名和属性值查找标签(关键符号是中括号)
1.方式1:直接通过属性名查找
[type] {
background-color: red;
}
2.方式2:属性名是type并且值是text的标签
[type='text'] {
background-color: red;
}
3.方式3:属性名是type并且值是text的div标签
div[type='text'] {
background-color: red;
}
分组和嵌套
# 1.分组
div, p, span { 查找div或者p或者span
color: red;
}
'为了尽量减少代码，你可以使用分组选择器'
# 2.嵌套
#d1, .c1, span { 查找id是d1或者class包含c1或者span
color: red;
}
'''
div#d1 查找id是d1的div标签
div.c1 查找class包含c1的div标签
div #d1 查找div内部id是d1的后代标签
#d1>.c1 查找id是d1的内部class包含c1的儿子标签
'''
伪类选择器
# 1.鼠标悬浮
p:hover { 鼠标移动到p标签上方 字体颜色动态修改为橙色
color: orange;
}
# 2.获取聚点
input:focus { 输入框被鼠标左键选中(聚焦)
background-color: black;
}
浙公网安备 33010602011771号