整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

客户端JavaScript的限制

于安全的考虑,客户端的js运行会受到种种限制,下面就让我们来了解一下。

浏览器的限制

浏览器限制了JavaScript任务的运行时间。这种限制是有必要的,它确保某些恶意代码不能通过永不停止的密集操作锁住用户的浏览器或计算机。

此类限制分为两种

  1. 调用栈大小限制
  2. 长时间运行脚本限制

单个JavaScript操作花费的总时间(最大值)不应该超过100毫秒。这个数字源自Robert Miller于1968年的研究。Nielsen指出如果界面在100毫秒内响应用户输入,用户会认为自己在“直接操纵界面中的对象”。超过100毫秒意味着用户会感到自己与界面失去的联系。

建议是在50ms内

浏览器不支持的功能

  1. JavaScript没有权限写入或删除客户计算机上的任意文件或列出任意目录
  2. 意味着JavaScript程序不能删除数据或植入病毒。
  3. 客户端JavaScript没有任何通用的网络能力。
  4. 虽然客户端JavaScript程序可以对HTTP协议编程,此外还有WebSockets,但是这些API都不允许对于范围更广的网络进行直接访问。

浏览器限制的功能

  1. JavaScript程序可以打开一个新的浏览器窗口,但是为了防止广告商滥用弹出窗口,很多浏览器限制这一功能,使得只有为了响应鼠标单击这样的用户触发事件的时候,才能使用。
  2. JavaScript程序可以关闭自己打开的浏览器窗口,但是不允许它不经过用户确认就关闭其他的窗口。
  3. HTML FileUpload元素的value属性是只读的。
  4. 脚本不能读取从不同服务器载入的文档的内容,除非这个就是包含该脚本的文档。

、目录

  • HTML 基本概念
  • HTML 基本结构
  • HTML 基本标签

二、HTML基本概念

2.1、什么是 HTML

  • 超文本标记语言(Hyper Text Markup Language)
  • 描述网页的语言
  • 传输最简单的文本内容
  • 可以表达文字内容之外的语言——HTML1.0

2.2、HTML的发展

  • html1.0—-xhtml1.0( 过渡 )—-xhtml2.0( 放弃 )——html5

三、HTML基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

四、HTML基本标签

4.1、标签和属性

  • 双标签:<标签名称></标签名称>
  • 单标签:<标签名 />

4.2、标签的属性

  • 基本格式:<标签名 属性1=“值1” 属性2=“值2”></标签名>
    • 标签可以拥有多个属性
    • 属性必须写在开始标签中,位于标签名后面
    • 属性之间不区分顺序
    • 标签与属性之间、属性与属性之间用空格隔开
    • 每个属性都有默认值,省略属性则表示使用默认值

4.2、HTML全局属性

  • class:规定元素的类名
  • id:规定元素唯一的id
  • lang:设置元素中内容的语言代码
  • style:规定元素的行内样式
  • title:规定元素的额外信息

五、HTML事件

5.1、HTML事件—窗口事件

  • 使用HTML事件触发浏览器中的行为,比如启动某一段JavaScript
  • 使用于body标签中
    • onblur:当窗口失去焦点时运行脚本
    • onfocus:当窗口获得焦点时运行脚本
    • onload:当加载文档时运行脚本

5.2、HTML事件—表单事件

  • form
    • onblur:当窗口失去焦点时运行脚本
    • onchange:当元素改变时运行脚本
    • onfocus:当窗口获得焦点时运行脚本
    • onreset:当表单重置时运行脚本,HTML5不支持
    • onselect:当选取元素时运行脚本
    • onsubmit:当提交表单时运行脚本

5.3、HTML事件—键盘事件

  • 键盘事件
    • onkeydown:当按下键时运行脚本
    • onkeypress:当按下并松开键时运行脚本
    • onkeyup:当松开键时运行脚本

5.4、HTML事件—鼠标事件

  • 鼠标事件
    • onclick:当单击鼠标时运行脚本
    • ondblclick:当双击鼠标时运行脚本
    • onmousedown:当按下鼠标时运行脚本
    • onmousemove:当鼠标指针移动时运行脚本
    • onmouseout:当鼠标指针移出元素时运行脚本
    • onmouseover:当鼠标指针移至元素之上时运行脚本
    • onmouseup:当松开鼠标按钮时运行脚本

5.5、HTML事件—多媒体事件

  • 多媒体事件
    • onabort:当发生中止事件时运行脚本

六、标签

6.1、注释标签

  • 标签: < !-- 注释内容 -- >
  • 作用:在源文档中插入注释。注释不会在浏览器中显示

6.2、文档标题标签

  • 标签:
  • 作用:
    • 定义浏览器工具栏中的标题
    • 提供页面被收藏时的标题
    • 显示在搜索引擎中显示的页面标题

6.3、标题标签

  • 标签:

  • 作用:
    • 用来定义HTML的标题
    • 用例定义最高等级的标题
    • 用例定义最低等级的标题
  • 属性:全局属性、事件属性

6.4、段落标签

  • 标签:
  • 作用:定义段落
  • 属性:全局属性,事件属性

6.5、容器标签1

  • 标签:
  • 作用:对行内元素进行组合,提供了一种将文本或文档的一部分独立出来的方式
  • 属性:全局属性、事件属性

6.7、容器标签2

  • 标签:
  • 作用:
    • 定义了HTML文档中一个分隔区块或一个区域部分
    • 经常与CSS一起使用,用于定义网页布局
  • 属性:全局属性、事件属性

6.8、图像标签

  • 标签:
  • 作用:定义HTML页面中的图像
  • 属性:
    • src:定义显示图像的URL(必选)
    • alt:定义图像的替代文本(必选)
    • title:鼠标悬停图像时显示的文本
    • width:图像的宽度
    • height:图像的高度
    • border:设置图像边框的宽度

6.9、超链接标签

  • 标签:
  • 定义超链接,从一个页面链接到另一个页面
  • 属性:全局属性、事件属性
    • href:规定链接的目标URL

6.10、列表标签

  • 标签:
<ul>
<li></li>
<li></li>
</ul>
  • 作用:
    • 定义无序列表
      * <ul>与<li>一起使用,创建无序列表
  • 属性:全局属性、事件属性

6.11、列表标签 - 有序列表

  • 标签:<ol><li>...</li><li>...</li></ol>
  • 作用:
    • 定义了一个有序列表,列表排序以数字来显示
    • 使用
    • 标签来定义列表选项
  • 属性:全局属性、事件属性

5.12、表格标签

  • 标签:
    • 表格:<table></table>
    • 行:<tr></tr>
    • 单元格:<td></td>
  • 作用:定义表格
  • 属性:全局属性、事件属性
    • border:定义表格是否有边框

6.13、表单域

  • 标签:<form></form>
  • 创建用户输入的HTML表单
  • 属性:全局属性、事件属性
    • action:指定接收并处理表单信息的服务器URL地址
    • method:表单数据提交的方式
    • name:指定表单的名称

6.14、表单标签

  • 标签:
  • 作用:定义了用户可以在其中输入的字段,输入字段可以通过多种方式改变,取决于type的属性
  • 属性、全局属性、事件属性
    • type:规定要显示input标签的元素的类型
      • text:单行文本(不可换行)
      • password:密码输入框
      • radio:单选框(配合name可以实现单选效果)
      • checkbox:复选框
      • button:普通按钮
      • submit:提交按钮
      • reset:重置按钮
      • image:图像形式的提交按钮
      • file:文件域,点击之后打开文件选择器
    • name:控件名称,name相同则表示为同一组数据
    • value:指定input元素的值
    • size:显示大小
    • checked:是否被选中
    • maxlength:控制输入的最大字符长度

6.15、文本标签

  • 标签:
  • 定义一个多行的文本输入控件
  • 属性:全局属性、事件属性
    • cols:规定文本区域内可见的宽度
    • disabled:规定禁用文本区域
    • name:规定文本区域的名称
    • readonly:规定文本区域为只读
    • rows:规定文本区域内可见的行
    • placeholder:规定一个简短的提示,描述文本区域内期望的输入值

6.16、下拉菜单

  • 标签:…
  • 作用:
    • 用来创建下拉列表
    • 中的标签定义了列表中的可用选项
  • 属性:全局属性、事件属性
    • isabled:当属性为true时,会禁用下拉列表
    • multiple:当属性为true时,可选择多个选项
    • name:定义下拉列表的名称
    • size:规定下拉列表中可见选项的数目

霍格沃兹的测试管理班是专门面向测试与质量管理人员的一门课程,通过提升从业人员的团队管理、项目管理、绩效管理、沟通管理等方面的能力,使测试管理人员可以更好的带领团队、项目以及公司获得更快的成长。提供 1v1 私教指导,BAT 级别的测试管理大咖量身打造职业规划。

lt;input> 元素的输入类型

大家学习了表单之后,有木有发现input通过定义不同的type属性,描述不同的输入类型。今天小编带大家总结一下input常用的输入类型。

1.文本输入

设置 type 属性值为 'text'

<input type="text">

文本输入框

2.密码输入

设置 type 属性值为 ‘password’

<input type="password">

密码输入框

3.提交表单按钮

设置 type 属性值为 ‘submit’

<input type="submit">

定义提交表单数据至表单处理程序的按钮

4.单选按钮

设置 type 属性值为 ‘radio’

<input type="radio">true

单选按钮

5.复选框

设置 type 属性值为 ‘checkbox’

<input type="checkbox">

6.按钮

设置 type 属性值为 ‘button’

<input type="button" value="确定">

<input>元素输入属性

在讲input的输入属性之前,给大家讲讲HTML属性是怎么回事。

可能大家也发现了,之前文章讲得的HTML中,好多加了属性的元素,例如a标签中加了href属性定义了链接的地址,还有table中加border属性给表格添加边框线。

<a href="https://www.toutiao.com/i6491189339890909709/">sublime的安装与使用</a>

<table border="1"></table>

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

属性总是以名称/值对的形式出现,比如:name="value"。属性总是在 HTML 元素的开始标签中规定。

虽然属性和属性值对大小写不敏感,但是小编还是建议大家用小写的。

后续课程CSS会用到属性给大家总结一下:

class 规定元素的类名

id 规定元素的唯一 id

style 规定元素的行内样式

好啦,我们开始学习input的输入属性。

看如下例子,

<input type="text" value="John">

type属性定义了文本的输入类型,value属性定义了输入字段的初始值。

设置默认值

用value设置初始值往往在你修改输入值时遇到麻烦,如果不提前把初始值删掉的话,你输入新值后跟在初始值后边。

修改输入值

为了解决这个问题,我们可以使用占位符(placeholder)

<input type="text" placeholder="John" >

当你输入新值时,初始值会消失。

使用占位符

readonly 属性

readonly 属性规定输入字段为只读(不能修改)

<input type="text" value="Sunshin" readonly>

disabled 属性

  • disabled 属性规定输入字段是禁用的。

  • 被禁用的元素是不可用和不可点击的。

  • 被禁用的元素不会被提交。

<input type="text" value="Sunshin" disabled >

输入框不可用

required 属性

required 属性是布尔属性。如果设置,则规定在提交表单之前必须填写输入字段。

<input type="text" value="Sunshin" required>

今天内容是不是又有点多呢?我控制不住我自己啊(⊙o⊙)…

打开编辑器好好练习一下吧!

你必须非常努力,才能看起来好不费力!

关注小白前端,才能持续收到文章推送哦~