0
点赞
收藏
分享

微信扫一扫

web端开发,web开发选型

前端的兴起

前端真正兴起和开始频繁出现在大家的视线里,大概是在十年前。彼时的 Web 开发基本是由后端主导,前端能做的只是校验一下数据、操作一下 DOM。(其中数据检验是 JS 产生的根本原因:当时网络太慢,在服务端检验数据并反馈给用户,让用户知晓输入错误,这个流程太长、反应太慢,因此通过脚本在用户端完成第一步校验,既方便了用户,又减轻了带宽的压力。)即使 06 年 jQuery 发布并风靡全球,以及 XMLHttpRequest 被纳入 W3C 标准,也没有改变这种状况。制约它进度的原因很简单,因为很多事情前端 做不了 或者 做不好。随着时间的推移,近几年,Angular、Backbone、React、Vue 等框架陆续发布,让前端越来越正规化、体系化。此时虽然仍有很多事,前端 做不了 或者 做不好,但前端这个岗位却已变得热辣空前。那么,是什么推动着前端发展到如此大的规模和火热的程度?

form表单细节

一、表单

1.表单<form> 标签用于为用户输入创建 HTML 表单

2.表单能够包含?input 元素,比如文本字段、复选框、单选框、提交按钮等等。

3.表单还可以包含?menus、textarea、fieldset、legend?和?label 元素。

4.表单用于向服务器传输数据。

二、表单form 的属性

(一)action属性

?action 属性规定当提交表单时,向何处发送表单数据

属性值:url 链接的地址

(二)name属性

name属性规定表单的名称。?name 属性提供了一种在脚本中引用表单的方法。

(三)method属性

method 属性规定在提交表单时所用的HTTP方法(GET 或是 POST)

1、什么时候使用GET?

method属性的默认值是GET,如果表单的提交是被动的(比如搜索引擎查询),并且没有敏感信息;

当使用GET的时候,表单数据是提交到页面的地址栏中的。

2、什么时候使用post?

地址栏中可以储存的数据是有限的,如果想要储存更多数据,更安全的储存数据就需要使用 post

表单正在更新数据,或是包含敏感信息(例如密码)最好使用post;

post 安全性更好,因为在页面地址栏中提交的数据使不可见的(如果上传的数据比较多或是要上传图片,就要使用post)。

(四)legend元素

<length> 元素为 <fieldset> 元素定义标签

<fieldset>标签 可以将表单内的相关元素分组,还可以在相关表单元素周围绘制边框。

<form>
 <fieldset>
  <legend>Personalia:</legend> Name: <input type="text"><br> Email: <input type="text"><br>
 </fieldset>
</form>

web端开发,web开发选型

input元素必须要加上 name 属性,定义一个名字,后台才会正常接收输入的数据;

三、表单描述标签的使用

<label> 为input元素定义标注

<label for="wenzi">文字</label>
<input type="text" id='wenz'></pre>

label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。

如果在 label 元素内点击文本,就会触发此控件,使该控件获得焦点。当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

为了实现同样的效果,会有另一种写法:不需要 for 和 id 属性;

<label>文字 <input type="text">
</label></pre>

四、表单约束属性

(一)required 属性

required?属性是一个布尔属性,规定必须在提交表单之前填写输入字段,必填字段。(required是H5的新属性)

注意:required 属性适用于下面的 input 类型:text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file。

(二)placeholder属性

placeholder?属性规定可描述输入字段预期值的简短的提示信息( 在输入框里面的提示文字,内容不会被提交),例如一个样本值或是预期格式的简短的描述。

placeholder 定义的提示会在用户输入值之前显示在输入字段中。

注意:placeholder 属性适用于下面的 input 类型:text、search、url、tel、email 和 password。

(三)value属性

value?属性为 input 元素设定值。对于不同的输入类型,value属性的用法也不同。

type类型为button、reset、submit。定义按钮上显示的文本

type类型为text、password、hidden。定义输入字段的初始值(默认值);

type类型为checkbox、radio、image。定义输入相关联的值

注意:<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。

注意:value 属性无法与 <input type="file"> 一同使用。

(四)maxlength属性

maxlength?属性规定输入字段的最大长度,以字符个数计算。

maxlength 属性与?<input type="text"> 或 <input type="password">?配合使用(有输入长度)

(五)size属性

size?属性规定以字符数计的 <input> 元素的可见宽度。

size? 限制表单的长度(不建议用,用CSS去设置更好)

五、表单访问限制(表单禁用)

(一)readonly 属性

readonly?属性规定输入字段为只读,无法输入,可以使用value来设置默认值,可以提交到后台,但是用户无法修改。

只读字段无法修改,不过用户仍然可以使用tab键切换到该字段,还可以选中或拷贝其文本。

readonly 属性可以防止用户对值进行修改,直到满足某些条件为止(比如选中了一个复选框)。然后,需要使用 JavaScript 消除 readonly 值,将输入字段切换到可编辑状态。

readonly 属性可与?<input type="text"> 或 <input type="password">?配合使用。

(二)disabled属性

disabled?属性定义应该禁用input元素(只能看,不能提交到后台)

被禁用的 input元素既不可用,也不可点击。可以设置 disabled 属性,直到满足某些其他的条件为止(比如选择了一个复选框等等)。然后,就需要通过 JavaScript 来删除 disabled 值,将 input 元素的值切换为可用。

注意:disabled 属性无法与?<input type="hidden">?一起使用。

六、常用的字段扩展类型

描述
button 定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。
checkbox 定义复选框。
file 定义输入字段和 "浏览"按钮,供文件上传。
hidden 定义隐藏的输入字段,虽然隐藏了却依然存在。
image 定义图像作为提交按钮。
password 定义密码字段。该字段中的字符被掩码。
radio 定义单选按钮。
reset 定义重置按钮。重置按钮会清除表单中的所有数据。
submit 定义提交按钮。提交按钮会把表单数据发送到服务器。
text 定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。

H5新标签 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

描述
color 定义拾色器
date 定义 date 控件(包括年、月、日,不包括时间)
datetime 定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,基于 UTC 时区)
datetime-local 定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,不带时区)
email 定义用于 e-mail 地址的字段
month 定义 month 和 year 控件(不带时区)
number 定义用于输入数字的字段
range 定义用于精确值不重要的输入数字的控件(比如 slider 控件)
search 定义用于输入搜索字符串的文本字段
tel 定义用于输入电话号码的字段
time 定义用于输入时间的控件(不带时区)
url 定义用于输入 URL 的字段
week 定义 week 和 year 控件(不带时区)

七、大量文本和列表

(一)文本域

textarea?标签定义一个多行的文本输入控件

文本域中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(Courier)

文本域中的默认值,要放在一对textarea?标签中

可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小,不过更好地·办法是使用CSS的height 和 width属性

计算机网络

  • HTTP 缓存

  • 你知道 302 状态码是什么嘛?你平时浏览网页的过程中遇到过哪些 302 的场景?

  • HTTP 常用的请求方式,区别和用途?

  • HTTPS 是什么?具体流程

  • 三次握手和四次挥手

  • 你对 TCP 滑动窗口有了解嘛?

  • WebSocket与Ajax的区别

  • 了解 WebSocket 嘛?

  • HTTP 如何实现长连接?在什么时候会超时?

  • TCP 如何保证有效传输及拥塞控制原理。

  • TCP 协议怎么保证可靠的,UDP 为什么不可靠?

web端开发,web开发选型

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

算法

  • 链表

  • 字符串

  • 数组问题

  • 二叉树

  • 排序算法

  • 二分查找

  • 动态规划

  • BFS

  • DFS

  • 回溯算法

    web端开发,web开发选型

举报

相关推荐

0 条评论