标签：总结 color 标签 表单 学习 3.7 nbsp 选择器 属性
今日学习内容总结
在上周的学习中，我们已经对前端的学习迈开脚步了。我们了解了什么是前端，所以接下来的学习依旧是以前端为主的学习。在上周的学习中，我们首先学习HTML语言。HTML是一门标签语言，并不是编程语言。我们对html的学习其实主要是对html中的标签进行学习。而今天主要学习的就是，让标签具有独特的表现形式的方法。css方法。
from表单
在了解css之前，我们需要对from表单进行了解学习。
from表单简介
表单在Web网页中用以让访问者输入数据，当提交表单时，表单中输入的数据被打包传递给Web服务器端的程序以处理，从而使得Web服务器与用户之间具有交互功能。表单实现前后台交互：用户将表单提交到后台再右后台提交到数据库的过程，实现前后端交互。
表单在网页中主要负责数据采集功能，它用< form >标签定义。用户输入的信息都要包含在form标签中，点击提交后，< form >和</ form >里面包含的数据将被提交到服务器或者电子邮件里。所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。
表单是由窗体和控件组成的,一个表单一般应该包含用户填 写信息的输入框,提交按钮等，这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。
from表单的属性
# 表单标签的格式
< form action＝"url" method=get|post name=“myform” >< /form >
1. name: 表单提交时的名称
2. action： 提交到的地址
3. method：提交方式，默认为get
from表单属性
action属性
# from支持HTML的全局属性
# action 控制数据的提交地址
# 方式1:写全路径
action="http://www.aa7a.cn/user.php"
# 方式2:写后缀(自动补全IP和PORT)
action="user.php"
# 方式3:不写(朝网页所在的地址提交)
action=""
input标签
# input标签 获取用户各中类型数据的标签
input标签的三个重要属性
1. type 他是代表input的类型
2. name 他就是后台取值的依据(key)
3. val 他是我们输入的值，也是后台需要的值
# 写法
<input type="" name="">
# type属性
1. text 表示普通的文本，明文输入
2. password 输入的也是文本，密文输入
3. number 输入的是数字，不是数字不让输入
4. submit 提交按钮，提交form表单的内容
5. button 普通的按钮，默认没有任何的功能(意味着以后可以给它添加任意的功能，通过js)
6. radio 单选框
6.1. 我们需要注意的是单选框的所有的name值必须相同
6.2. 如果name不相同，就说明不在同一个选择方位，也就不存在单选，然后想要在后台取到他的值，你必须在定义的时候给附上一个值给value，这样才能取到值
7. checkbox 复选框，内容和单选框一样 他们都可以通过添加checked="checked"设置默认值
7.1. 如果属性名和属性值相同 可以简写checked
8. file 选择文件，可以选择文件提交给后台
9. date 日历展示
10. email 邮箱格式数据
11. reset 重置页面填写的数据
select标签
# select标签 select标签是一个下拉框的形式让用户进行选择选项
# 写法
<select>
<option></option>
<option></option>
</select>
select标签中必须包含option标签才能显示属性。select中有全局属性name，这个name是后台又来进行取值的，每个option标签的文本内容是显示给用户看的，我们需要取的是option标签中的value属性，所以在开始必须给option的value赋值。后台通过select的name取值，直接取到的就是对应option的value，如果我们向让他默认选择某个option，可以在option标签中加入selected属性，如果都不加，默认是显示第一个。
textarea标签
# textarea 文本框标签
# 写法
<textarea name="desc"></textarea>
与input中的text一样都是输入文本的，但是textarea标签没有字数的限制，并且输入框可以拖拉。
lable标签
# lable标签 专门给input标签配文字说明
# 写法
# 方式1
<label for="d1">用户名:</label>
<input type="text" id="d1">
# 方式2
<label>用户名:
<input type="text">
</label>
网络请求方式
最常见的网络请求方式有两种：
1.get请求
朝服务端索要数据
2.post请求
朝服务端提交数据
``
get与post的区别：
要想使用GET和POST请求跟服务器进行交互，得先了解一个概念：参数就是传递给服务器的具体数据，比如登录时的帐号、密码。
get与post做一个对比：GET和POST的主要区别表现在数据传递上。
**get**
在请求URL后面以?的形式跟上发给服务器的参数，多个参数之间用&隔开，比如：http://www.test.com/login?username=123&pwd=234&type=JSON。由于浏览器和服务器对URL长度有限制，因此在URL后面附带的参数是有限制的，通常不能超过1KB，最多只能携带2kb左右。
**post**
发给服务器的参数全部放在请求体中，post请求是在请求体中组织数据。
post与get的选择建议：
```python
1. 如果要传递大量数据，比如文件上传，只能用POST请求
2. GET的安全性比POST要差些，如果包含机密\敏感信息，建议用POST
3. 如果仅仅是索取数据（数据查询），建议使用GET
4. 如果是增加、修改、删除数据，建议使用POST
css
css简介
CSS是Cascading Style Sheet的缩写。译作”层叠样式表单“。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。使用CSS样式可以控制许多仅使用HTML无法控制的属性。HTML是一种标记性语言。当在浏览器中打开一个HTML网页时，浏览器将读取该网页中的HTML标签，并根据内置的解析规则将网页元素呈现出来。
CSS层叠样式表是一系列格式设置的规则，它们控制网页内容的外观。使用CSS设置页面格式时，可以将内容与表现形式分开。网页内容（即HTML代码）驻留在HTML文件自身中，而用于定义代码表现形式的CSS规则驻留在另一个文件（外部样式表）或HTML文档的另一部分（通常为文件头部分）中。使用CSS可以更加灵活地控制具体的页面外观，从精确的布局定位到特定的字体和样式。
CSS允许控制HTML无法独自控制的许多属性。CSS格式设置规则由选择器和声明两部分组成，其中选择器是标识格式元素的术语（如p、h1、类名或id），声明用于定义元素样式。CSS的主要优点是提供了便利的更新功能。
引入css的方式
1.head内style标签内部直接编写css代码
建议在小白学习阶段可以使用 方便查看
2.head内link标签引入外部css文件
工作中一般使用的都是link形式 符合标准
3.标签内部通过style属性直接编写
第三种也称之为"行内式"是最不推荐使用的一种方式
因为它会将HTML和CSS柔和到一起 增加了耦合度
css基本选择器
标签选择器
直接通过标签名查找标签。
html {background-color: black;}
p {font-size: 30px; backgroud-color: gray;}
h2 {background-color: red;}
以上css代码会对整个文档添加黑色背景；将所有p元素字体大小设置为30像素同时添加灰色背景；对文档中所有h2元素添加红色背景。
类选择器
类选择器又分单类选择器和多类选择器。但是这里先介绍单类选择器。
要使用类选择器我们需要首先对文件元素添加一个class属性，比如截至日期可能会出现在以下元素中:
# html 中
<p class="deadline">...</p>
<h2 class="deadline">...</h2>
# css中
p.deadline { color: red;}
h2.deadline { color: red;}
点号”.”加上类名就组成了一个类选择器。以上2个选择器会选择所有包含”deadline”类的p元素和h2元素。而其余包含该属性的元素则不会被选中。
id选择器
ID选择器和类选择器有些类似，但是差别又十分显著。首先一个元素不能像类属性一样拥有多个类，一个元素只能拥有一个唯一的ID属性。其次一个ID值在一个HTML文档中只能出现一次，也就是一个ID只能唯一标识一个元素(不是一类元素，而是一个元素)。类似类属性，在使用ID选择器前首先要在元素中添加ID属性，例如：
# html中
<p id="top-para">...</p>
<p id="foot-para">...</p>
# css中
#top-para {} #foot-para {}；
这样我们就可以对以上2个段落进行需要的操作了。正因为ID选择器的唯一性，也使其用法变得相对简单。id选择器正是通过标签的id属性查找标签的。
通用选择器
# 查找所有的标签的选择器
* {
color: blue;
}
css的组合选择器
标签之间的关系
<div>div1
<div>div2
<p>p1</p>
</div>
<p>p2
<span>span1</span>
</p>
<span>span2</span>
</div>
通过嵌套层级来表示亲属关系：
1. 对于div1来说div2、p2、span2都是儿子
2. 对于div2、p2、span2来说div1就是父亲
3. 对于p1来说div2是父亲 div1是爷爷(可以将div1和div2统称为祖先)
4. 对于span2来说div2、p2是哥哥 span2是弟弟
5. div1内部所有的标签无论层级都可以称之为是div1的后代
儿子选择器
# 在儿子选择器中关键符号是大于符号
#d1 > span {
color: red;
}
语义是查找id为d1标签内部所有的儿子span
后代选择器
# 在后代选择器中的关键符号是空格
#d1 span {
color: red;
}
语义是查找id为d1标签内部所有的后代span
毗邻选择器
# 在毗邻选择器中的关键符号是加号
#d1 + a {
color: red;
}
语义是查找id是d1标签同级别下面紧挨着第一个a标签
弟弟选择器
# 在弟弟选择器中的关键符号是小波浪号
#d1 ~ a {
color: red;
}
语义是查找id是d1标签同级别下面所有a标签
属性选择器
属性选择器在css2中引入，使我们可以根据元素的属性及属性值来选择元素。
三种查找方式
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;
}
css的分组与嵌套
分组查找方式：
div, p, span {
color: red;
}
语义是查找div或者p或者span
嵌套查找：
#d1, .c1, span {
color: red;
}
语义查找id是d1或者class包含c1或者span
额外用法：
1. div#d1 查找id是d1的div标签
2. div.c1 查找class包含c1的div标签
3. div #d1 查找div内部id是d1的后代标签
4. #d1>.c1 查找id是d1的内部class包含c1的儿子标签
伪类选择器
实现鼠标悬浮的效果：
p:hover {
color: orange;
}
语义鼠标移动到p标签上方 字体颜色动态修改为橙色
获取聚焦的方法：
input:focus {
background-color: black;
}
语义是输入框被鼠标左键选中，聚焦的效果
标签：总结,color,标签,表单,学习,3.7,nbsp,选择器,属性 来源： https://www.cnblogs.com/blank1210/p/16192135.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。