1.复习内容

Emmet

• 属性

  input[type=“text”]

2.灵感代办

• get和post区别

• 两组ANKI

• SOCKET复习

• form表单练习

• Windows快捷键

3.学习内容

表单 form

作用：

采集用户信息，提交给服务器

组成：

表单元素(form)负责提交数据，表单控件(input passwd) 采集信息

提交方式：

• get方式

  get是用字符串拼接在网址中 ?开始 &连接，

• post方式

  post是将数据封装在请求体中，如果是文件，图片等，要用post，并设置编码类型，enctype=“multipart/from-data”

* input标签属性

• input标签

  一般都放在form表单中，放在form外的数据并不提交，类型就用type=“text”

• name属性

  相当于key和value中的key，传递时候是key=value,也是控件的名称

• placeholder属性

输入框的提示文本，类似于安卓的hint

• maxlength属性

  设置最大字符数

• readonly属性

  不需要取值，设置输入框只读

• value属性

  设置控件的默认值，如果用户改变，则提交用户更改的属性

• type类型 radio

  设置控件的单选多选，如果是多选，一组内容name要唯一，其中value是要被提交的属性

• checked 属性

  按钮选中状态，默认选中

• type类型checkbox

  多选框

• label标签

  用来绑定管理一个id，点击自身和点击id元素效果相同

• type类型 file

  可以选择上传一个文件，要用post才能传输二进制，get知识传输一个文件名

• type类型 hidden

  隐藏域：发送当前页面附加信息，用户不可见

• select 标签 下拉菜单

  <select>要给出name值，里面嵌套的option要给value值

• textarea标签 多行文本域

  不常用，可以在里面换行

• 功能按钮 提交 重置 普通按钮

  value在功能按钮中，设置的是显示的文本

  submit：是提交，将控件内容提交

  reset：是清空，还原到初始状态

  button ：是普通按钮，没有value就为空

• button标签

  可以指定类型，type也是三种

  form标签内：等价于submit提交

  form标签外：等价于普通按钮

CSS 层叠样式表

使用方式

1. 行内样式：style标签属性：书写css样式声明
   • element.style{} 都是行内样式

     样式代码：属性名：属性值

• 常用属性：
  • font-size 设置字体大小，去像素值
  • color 设置文本样色
  • background-color 设置背景颜色

1. 内嵌样式表

   使用<style><\style>书写样式，实现结构与样式分离，使用选择器匹配（根据标签名，类名，属性名等来查找元素）

• 外链样式表 Css

  <link> 引入样式表

  • rel属性 stylesheet
  • href属性 index.css
  • type属性 text/css
  • 如果有删除线，应该是属性出错,如果在继承中，说明是优先级不够

• 样式表特点

  1. 层叠性

     多个样式之间可以重叠设置

  2. 继承性

     子元素可以继承父元素或者祖先元素的文本样式

  3. 优先级

     发生样式冲突时，谁优先级高就用谁

     优先级划分：行内样式>选择器样式>代码书写顺序>浏览器默认样式和继承样式(后来者居上)

• user agent stylesheet

  浏览器的默认样式

• inherited from

  继承浏览器样式

  如果有删除线，是继承的优先级不够

标签选择器

基础选择器 (id 标签 类)

1. 标签名匹配元素（h1，div等）
2. ID选择器（根据ID属性值 # 来选择）
3. 类选择器（根据类 .来选择）
4. 群组选择器（selector1,selector2）
5. 后代选择器（selector selector）
6. 子选择器 （selector>selector）浏览器查找时候是逆序查找
7. 属性选择器 ([id=“value”] 就是选择属性,可以省略值)
8. 并列选择器（id.class 就是并列选择器，没有空格，标签都要放在前面 p.class）
9. 伪类选择器（配合基础选择器使用）表示元素的某种状态
   1. 在chrome中，右上角：hov强制显示状态
   2. 伪标签中，可以嵌套使用 :hover div
   • 超链接伪类选择器

     :link 访问前

     :visited 访问后

   • 动态伪类

     :hover 鼠标悬停元素上 最常用的状态

     :active 激活状态，鼠标点按

   • 表单控件的状态

     :focus 输入框编辑状态时 ，光标在其中(取消输入框在焦点下的轮廓线outline:none)

   选择器的优先级

   1. 相同类型的选择器（后来居上）
   2. 不同类型的选择器发生样式冲突，看权重，权重值越高，优先级越高
      1. 标签选择器 1
      2. 类class、伪类 10
      3. id选择器 100
      4. 后代选择器 子代选择器 （各个选择器累加计算）
      5. 群组选择器 每一个选择器都有各自的权重

4.扩展延伸知识

伪元素 after和before

​ 在元素前后添加

​ https://www.cnblogs.com/polk6/p/8058468.html

浏览器内核

1. IE trident
2. Firefox Gecko
3. Google chrome Webkit/blink
4. Safari webkit
5. Opera presto

网页结构

• HTML CSS Javascript
• 结构，样式，动作

学习阶段（任何技能都要长时间的练习）

1. 能用出来（实践，扎实复习）
2. 能讲出去（理解透彻）

同步异步

​ 同步是一个一个执行
​ 异步是共同执行

CSS 权重（优先级）

​ 行内样式： 1000
​ id 100
​ class 属性 伪类 10
​ 标签|伪元素 1
​ 通配符 * 0
​ 256进制 ：CSS进制

HTML5中新引入了section

​ section和div的功能是一样的，想用来取代div

CSS查找规则

字体基础属性

• ​ font-size:20px 设置字体大小（设置字体高度，而不是宽度）
• font-width:bold; 100-900 没有单位
• ​ font-style:italic 斜体
• font-family: arial 设置字体

color：字体颜色

• 土鳖式：纯英文单词 red
• 颜色代码：#fff
• 颜色函数：rgb(,,)

border:是一个复合属性

• border是组合图形
• border-witdth
• border-style
• border-[left/right/top/bottom]-color

transparent是透明色

颜色基础

​ 三原色：

​ 光学三原色 RGB

​ 美术三原色 RYB

​ 每两位代表一种颜色：

5.知识内容个人梳理

6.今天都复习了之前的什么内容