form&css

form&css

一、表单（重点）

1. form标签

• 常用属性：
  • action：表单数据的提交路径
  • method：表单的提交方式。常用的方式有：get / post

2. input标签

• 常用属性：
  • type：
    • text：默认值。文本框
    • password：密码框
    • radio：单选按钮。
      • 默认值设置：在需要默认选中的选项上，增加属性：checked或者checked=“checked”
    • checkbox：复选框
      • 默认值设置：在需要默认选中的选项上，增加属性：checked或者checked=“checked”
    • button：普通按钮。没有功能，要和js配合自定义功能
    • submit：提交按钮
    • reset：重置按钮，把表单项的数据恢复成默认值
    • image：图片提交按钮。用图片作为按钮，功能是提交表单。需要再使用src设置图片的路径
    • hidden：隐藏域，不会显示到页面上的表单项
    • file：文件选择框。默认提交的是文件名称，而不是上传文件
  • name：如果表单项的数据要提交，就必须有name属性
  • value：作用会随着type而改变
    • 在text里：value是默认值
    • 在password里：value是默认值
    • 在radio里：value表示一个选项的值。选中哪个选项，就提交哪个选项的value值
    • 在checkbox里：value表示一个选项的值。选中哪个选项，就提交哪个选项的value值
    • 在button里：value是按钮上的文字
    • 在submit里：value是按钮上的文字
    • 在reset里：value是按钮上的文字
    • 在image里：value没有实际意义
    • 在hidden里：value是隐藏域的值
    • 在file里：value是无效的

3. select标签：下拉框

• select：下拉框本身
  • name：如果下拉框的数据要提交，就必须有name属性
• option：下拉选项，是select的子标签
  • value：每个下拉选项的值。选中哪个选项，就提交哪个选项的value值
• 默认值：
  • 没有手动设置的时候：默认选中第1个选项
  • 手动设置默认值：在需要默认选中的选项上，增加属性selected或者selected=“selected”

4. textarea标签

• 常用属性：
  • name：如果数据要提交，就必须有name属性
  • rows：文本域的高度可以显示几行。被CSS代替了
  • cols：文本域的宽度可以显示几列。被CSS代替了
• 默认值：
  • textarea没有value属性
  • 默认值要写在textarea标签体里（开始标签和结束标签中间）

5. get提交和post提交的区别（面试题）：

• get提交：数据会显示到地址栏；post提交：数据不会显示到地址栏
• get提交：安全性差；post提交：安全性相对高
• get提交：有长度限制；post提交：没有长度限制

二、CSS

1.div标签和span标签

1.1 标签介绍

• div标签：里边可以放任何内容，不会对内容做任何样式修饰。和CSS配合自定义样式
  • 独占一行
• span标签：里边 可以放任何内容，不会对内容做任何样式修饰。和CSS配合自定义样式
  • 内容多大，就占多大空间
• 使用场景：span通常用于文本数据的样式；其它内容通常使用div标签

1.2 块元素和内联元素

• 块元素：行级元素。独占一行的元素，比如：div，h1~h6， hr等等
• 内联元素：行内元素。内容多大，就占多大空间，比如：span, font

2. CSS简介

2.1 什么是CSS

CSS：Casecade StyleSheets，层叠样式表

2.2 CSS的作用

用来美化修饰页面的

3. CSS语法

3.1 CSS引入

在HTML里引入CSS

• 内联样式（行内样式）：把样式写到标签的style属性值里
  • 书写规范：style=“样式名:值; 样式名:值;…”
  • 没有复用性
• 内部样式：把样式写到了head的子标签style里
  • 书写规范：
    
    
    
  • 有一定的复用性：在当前页面里
• 外部样式：把样式写到单独的css文件里，在HTML里使用link标签引入css文件
  • 书写规范：
  • 有最强的复用性：在整个web项目里，每个页面都可以引入使用样式

3.2 CSS选择器

选择要修饰的HTML标签

• 基本选择器
  • 标签选择器： 标签名{样式}
  • ID选择器： #ID值{样式}
  • 类选择器： .类名{样式}
  • 优先级：
    • ID选择器 > 类选择器 > 标签选择器
    • 如果优先级相同，后加载覆盖先加载
• 扩展-层级选择器
  • 由多个选择器，使用空格连接。
  • 注意：空格表示的是后代，而不是子元素
    #d2 .cls1{
    color:red;
    }
• 扩展-属性选择器
  • 根据HTML的属性值再次过滤选择的元素
  • 选择器[HTML属性名=“值”]{样式}
    input[type=“text”]{
    background-color: green;
    }
    input[type=“password”]{
    background-color: blue;
    }

3.3 CSS常用样式

4. CSS的盒子模型

• 把5个样式都加到一个元素上，元素看起来像一个盒子，就称这五个样式统一为：盒子模型
  • width：宽度
  • height：高度
  • border：边框
  • padding：内边距。边框和内容之间的距离
  • margin：外边距。元素向外延伸多占用的空间
• 盒子模型的分类：
  • 标准盒子模型：box-sizing:content-box;
    • 盒子的大小 = width/height + 内边距 + 边框线
    • width和height仅仅是盒子内容区域的大小
    • 添加了边框、内边距，盒子会被撑大
  • 怪异盒子模型：box-sizing:border-box;
    • 盒子的大小 = width/height
    • 添加了边框、内边距，盒子内容会被缩小，但是盒子整体大小不变