from表单、网络请求方式、css介绍、css各种选择器

今日学习内容总结

      在上周的学习中，我们已经对前端的学习迈开脚步了。我们了解了什么是前端，所以接下来的学习依旧是以前端为主的学习。在上周的学习中，我们首先学习HTML语言。HTML是一门标签语言，并不是编程语言。我们对html的学习其实主要是对html中的标签进行学习。而今天主要学习的就是，让标签具有独特的表现形式的方法。css方法。

from表单#

      在了解css之前，我们需要对from表单进行了解学习。

from表单简介#

      表单在Web网页中用以让访问者输入数据，当提交表单时，表单中输入的数据被打包传递给Web服务器端的程序以处理，从而使得Web服务器与用户之间具有交互功能。表单实现前后台交互：用户将表单提交到后台再右后台提交到数据库的过程，实现前后端交互。

      表单在网页中主要负责数据采集功能，它用< form >标签定义。用户输入的信息都要包含在form标签中，点击提交后，< form >和</ form >里面包含的数据将被提交到服务器或者电子邮件里。所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。

      表单是由窗体和控件组成的,一个表单一般应该包含用户填 写信息的输入框,提交按钮等，这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。

from表单的属性#

Copy
  # 表单标签的格式
  < form action＝"url" method=get|post name=“myform” >< /form >

  1. name: 表单提交时的名称
  2. action： 提交到的地址
  3. method：提交方式，默认为get

      from表单属性

      action属性

Copy
  # from支持HTML的全局属性
  # action  控制数据的提交地址
  # 方式1:写全路径
  action="http://www.aa7a.cn/user.php"

  # 方式2:写后缀(自动补全IP和PORT)
  action="user.php"

  # 方式3:不写(朝网页所在的地址提交)
      action=""

      input标签

Copy
  # 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标签

Copy
  # 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标签

Copy
  # textarea 文本框标签
  # 写法
  <textarea name="desc"></textarea>

      与input中的text一样都是输入文本的，但是textarea标签没有字数的限制，并且输入框可以拖拉。

      lable标签

Copy
  # lable标签 专门给input标签配文字说明 
  # 写法
  # 方式1
    <label for="d1">用户名:</label>
    <input type="text" id="d1">

  # 方式2
    <label>用户名:
      <input type="text">
    </label>

网络请求方式#

      最常见的网络请求方式有两种：

Copy
  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的选择建议：

Copy
    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的方式#

Copy
  1.head内style标签内部直接编写css代码
      建议在小白学习阶段可以使用   方便查看
  2.head内link标签引入外部css文件
      工作中一般使用的都是link形式   符合标准
  3.标签内部通过style属性直接编写
      第三种也称之为"行内式"是最不推荐使用的一种方式
      因为它会将HTML和CSS柔和到一起  增加了耦合度

css基本选择器#

      标签选择器

      直接通过标签名查找标签。

Copy
    html {background-color: black;}

    p {font-size: 30px; backgroud-color: gray;}

    h2 {background-color: red;}

      以上css代码会对整个文档添加黑色背景；将所有p元素字体大小设置为30像素同时添加灰色背景；对文档中所有h2元素添加红色背景。

      类选择器

      类选择器又分单类选择器和多类选择器。但是这里先介绍单类选择器。

      要使用类选择器我们需要首先对文件元素添加一个class属性，比如截至日期可能会出现在以下元素中:

Copy
    # 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属性，例如：

Copy
  # html中
  <p id="top-para">...</p>

  <p id="foot-para">...</p>

  # css中
  #top-para {} #foot-para {}；

      这样我们就可以对以上2个段落进行需要的操作了。正因为ID选择器的唯一性，也使其用法变得相对简单。id选择器正是通过标签的id属性查找标签的。

      通用选择器

Copy
  # 查找所有的标签的选择器
  * {
      	color: blue;
    }

css的组合选择器#

      标签之间的关系

Copy
  <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的后代

      儿子选择器

Copy
    # 在儿子选择器中关键符号是大于符号
    #d1 > span {
          color: red;
      }

    语义是查找id为d1标签内部所有的儿子span

      后代选择器

Copy
    # 在后代选择器中的关键符号是空格
    #d1 span {
        color: red;
      }
  
    语义是查找id为d1标签内部所有的后代span

      毗邻选择器

Copy
    # 在毗邻选择器中的关键符号是加号
    #d1 + a {
        color: red;
      }
  
    语义是查找id是d1标签同级别下面紧挨着第一个a标签

      弟弟选择器

Copy
    # 在弟弟选择器中的关键符号是小波浪号
    #d1 ~ a {
        color: red;
      }
  
    语义是查找id是d1标签同级别下面所有a标签

属性选择器#

      属性选择器在css2中引入，使我们可以根据元素的属性及属性值来选择元素。

      三种查找方式

Copy
    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的分组与嵌套#

      分组查找方式：

Copy
    div, p, span {  
               color: red;
            }

    语义是查找div或者p或者span

      嵌套查找：

Copy
        #d1, .c1, span {  
        	color: red;
        }

    语义查找id是d1或者class包含c1或者span

      额外用法：

Copy
    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的儿子标签

伪类选择器#

      实现鼠标悬浮的效果：

Copy
    p:hover {  
              color: orange;
          }

    语义鼠标移动到p标签上方 字体颜色动态修改为橙色

      获取聚焦的方法：

Copy
      input:focus {  
            background-color: black;
        }

    语义是输入框被鼠标左键选中，聚焦的效果