2020年4月30日总结(一)

一、表单元素

1.1.input的常用属性

• type：input的类型

  • text：文本输入框(明文输入)
  • password：文本输入框(密文输入)
  • radio：单选框
    • name值相同的radio才具备单选功能
  • checkbox：复选框
    • 属于同一种类型的checkbox，name值要保持一致
  • button：按钮
  • reset：重置
  • submit：提交表单数据给服务器
  • file：文件上传

• maxlength：允许输入的最大字数

• placeholder：占位字符

• readonly：只读

• disable：禁用

• checked：默认被选中

  • 只有当type为radio或checkbox时可用

• autofocus：当页面加载时，自动聚焦

• name：名字

• form：设置所属的form元素(填写form元素的id)（不常用）

  • 一旦使用了此属性，即使input不写在form元素内部，它的数据也能够提交给服务器

1.2.布尔属性

• 布尔属性可以没有属性值，写上属性名就代表使用这个属性

• 常见的布尔属性有：

  • disabled
  • checked
  • readonly
  • multiple：将select变为多选
  • autofocus
  • selected：select中默认选中

• 如果要给布尔值设值，值就是属性名本身

1.3.按钮

• 方式一:input实现

  • 普通按钮：input type="button" value="按钮"
  • 重置按钮：input type="reset"
  • 表单提交：input type="submit"

• 方式二:button实现

  • 注意：button的type属性默认值是submit

  • 普通按钮：button type="button" 按钮

  • 重置按钮：button type="reset" 重置

  • 表单提交：button type="submit" 提交

1.4.input和label

• label元素一般跟input配合使用，用来表示input的标题
• label可以跟某个input绑定，点击label就可以激活对应的input

1.5.去除input的Tab键选中效果

• outline: none;
• 或者tabindex="-1"

1.6.textarea

• textarea常用属性

  • cols：列数
  • rows：行数

• 缩放的CSS设置

  • 禁止缩放：resize: none;
  • 水平缩放：resize: horizontal;
  • 垂直缩放：resize: vertical;
  • 水平垂直缩放：resize: both;

1.7.select和option

• option是select的子元素，一个option代表一个选项

• select常用属性

  • multiple:可以多选
  • seze:显示多少项

• option常用属性

  • selected：默认被选中

1.8.fieldset和legend

1.9.form的常用属性

• 表单提交：将用户在input输入的内容提交给服务器

• 1.传统的表单提交：

  • 将所有的input包裹到一个form中
  • form设置action(服务器的地址)
  • input/button类型是submit
  • 点击submit，自动将所有的数据传到服务器
  • 弊端一：会进行页面的跳转(意味着服务器必须提前将一个页面写好，并且将写好的页面返回给前端，前端直接展示这个页面)
  • 服务器提前将页面写好：服务端渲染
  • 弊端二：不方便进行表单数据的验证

• 2.前后端分离：、

  • 通过JavaScript获取到所有表单的内容
  • 通过正则表达式进行表单的验证
  • 发送Ajax请求将数据传递给服务器
  • 验证成功后，服务器会返回结果，需要前端解析这个数据，并且决定显示什么内容(前端渲染和前端路由)

• action

  • 用于提交表单数据的请求URL

• method

  • 请求方法(get和post)，默认是get

• target

  • 在什么地方打开URL(参考a元素的target)

• enctype(encode和type的缩写)

  • 规定了在向服务器发送表单数据之前如何对数据进行编码
  • 取值有三种：
    • application/x-www-urlencoded：默认的编码方式
    • multipart/form-data：文件上传时必须为这个值，并且method必须是post
    • text/plain：普通文本传输

• accept-charset：规定表单提交时使用的字符编码(默认值UNKNOWN，和文档相同的编码)

• get和post

  • 提交表单数据时，浏览器发送的时http请求，有两种请求方式可以选择

  • get

    • 在请求URL后面以?的形式跟上发给服务器的参数，多个参数之间用&隔开。比如：www.baidu.com/?phone=&pas…
    • 由于浏览器和服务器对URL长度有限制，因此在URL后面附带的参数是有限制的，通常不超过1KB

  • post

    • 发给服务器的参数全部放在请求体中
    • 理论上，post传递的数据量没有限制(具体还得看服务器的处理能力)

二、元素类型

2.1.块级、行内级元素

• 根据元素的显示(能不能在同一行显示)类型，HTML元素可以主要分为2大类：

  • 块级元素(block-level elements)

  • 独占父元素一行

  • 比如div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、article、aside、footer、header、hgroup、main、nav、section、blockquote、hr等

  • 行内级元素(inline-level elements)

  • 多个行内级元素可以在父元素的同一行中显示

  • 比如a、img、span、strong、code、iframe、label、input、button、canvas、embed、object、video、audio等

• 根据元素的内容(是否浏览器会替换掉元素)类型，HTML元素可以主要分为2大类：

  • 替换元素(replaced elements)

    • 元素本身没有实际内容，浏览器根据元素的类型和属性，来决定元素的具体显示内容
    • 比如img、input、iframe、video、embed、canvas、audio、object等

  • 非替换元素(non-replaced elements)

    • 和替换元素相反，元素本身是有实际内容的，浏览器会直接将其内容显示出来，而不需要根据元素类型和属性来判断到底显示什么内容
    • 比如div、p等

2.2.CSS属性-display

• CSS中有个display属性，能修改元素的显示类型，有4个常用值：
  • block：让元素显示为块级元素
  • inline：让元素显示为行内级元素
  • none：隐藏元素
  • inline-block：让元素同时拥有行内元素和块级元素的特征
    • 可以和其他元素同一行显示
    • 可以设置宽度和高度