这是我的第一次JavaScript初级技巧
❤️笔芯❤️~
JavaScript工作原理
HTML超文本标记语言 来指定网页的内容和结构
CSS层叠样式表 来指定网页的外观,CSS用于指定样式,独立于网页结构的方式实现的
JavaScript能够在网页中添加行为
JavaScript的变量和值
声明变量时,总是以关键字var打头。
任何情况下,都应该这样做,尽管省略关键字var,JavaScript也不会报错。
创建变量时,可以不给它指定初始值,以后再给它赋值。(变量说:没有值,那我不是没什么用了,伤害不大,侮辱性极强)
变量说,我也是有(名字)的。— 可不能随随便便给我命名呢?
第一,要以字母,下划线,或者美元符号开头。
第二,然后可以使用任意数量的字母,数字,下划线,或者美元符号。
对了,还有不要使用任何内置的关键字 哦!(达达问:那我怎么知道有哪些关键字呢?变量:哈哈!是的,很多关键字,我也记不住,但是常用的,多了解的,慢慢就知道了,也不用去记住。让我变量告诉你哦,所以就别把这些给我命名了哦)
例如以下关键字:
123456break,delete,for,let,super,void,case,do,functi ...
一个合格的初级前端工程师需要掌握的模块笔记
前言❤️笔芯❤️~
Web模块html基本结构
html标签是由<>包围的关键词。
html标签通常成对出现,分为标签开头和标签结尾。
有部分标签是没有结束标签的,为单标签,单标签必须使用/结尾。
页面所有的内容,都在html标签中。
html标签分为三部分:标签名称,标签内容,标签属性。
html标签具有语义化,可通过标签名能够判断出该标签的内容,语义化的作用是网页结构层次更清晰,更容易被搜索引擎收录,更容易让屏幕阅读器读出网页内容。
标签的内容是在一对标签内部的内容。
标签的内容可以是其他标签。
标签属性
class属性:用于定义元素的类名
id属性:用于指定元素的唯一id,该属性的值在整个html文档中具有唯一性
style属性:用于指定元素的行内样式,使用该属性后将会覆盖任何全局的样式设定
title属性:用于指定元素的额外信息
accesskey属性:用于指定激活元素的快捷键
tabindex属性:用于指定元素在tab键下的次序
dir属性:用于指定元素中内容的文本方向,属性只有ltr或rtl两种
lang属性:用于指定元素内容的语言
事件属性
window窗 ...
localStorage和sessionStorage本地存储
前言笔芯❤️~
知识点使用HTML5中的Web Storage API, 可以在客户端存储更多的数据,,可以实现数据在多个页面中共享甚至是同步,对于复杂的数据,可以使用 Web SQL Database API 来实现。
掌握 localStorage 和 sessionStorage 存储方式, 存储 JSON 对象的数据, 使用 Web SQL Database 的基本操作。
Web StorageWeb Storage API 的属性,方法,事件。
cookie 可用于传递少量的数据, 是一个在服务器和客户端 之间来回传送文本值的内置机制,服务器可以根据 cookie 追踪 用户在不同页面的访问信息。
cookie 的特点:
第一,大小的限制,cookie 的大小 限制 在 4KB 以内。
第二,带宽的限制,cookie 数据 会在服务器和浏览器 之间来回传送,所以访问哪个页面,都会消耗网络的带宽。
第三,安全风险,因为 cookie 会频繁在网络中传送, 所以在网络上是可见的,在不加密的情况下,是由安全风险的。
第四,操作复杂,在客户端的浏览器中,使用 JavaScript ...
HTML5中的拖放功能
前言笔芯❤️~
知识点拖拽的体验,你享受过吗,在HTML5之前,可以使用事件mousedown,mousemove,mouseup巧妙实现页面的拖放操作,但注意拖放的操作范围只是局限在浏览器内部。
而HTML5的拖放API功能直接实现拖放操作,而且拖放的范围已经超出浏览器的边界,HTML5提供的文件api支持拖拽多个文件并上传。
要学会掌握html5中的拖放api和 文件api,光标拖放事件,从web网页上访问本地文件系统。
拖放api在html5中的拖放api重点:
第一,为页面元素提供了拖放特性;
第二,为光标增加了拖放事件;
第三,提供了用于存储拖放数据的DataTransfer对象
draggable特性draggable特性用于定义元素是否允许用户拖放:提供了三个值
true,false,auto
把元素变成可以拖放的:
1<div draggable="true"></div>
img元素和a元素默认是可以拖放的
光标拖放事件在html5中提供了7个与拖放相关的光标事件:
按照时间的顺序:
第一,开始拖拽时触发的事件,事件 ...
挑战前端知识点HTTP/ECMAScript
前言希望可以通过这篇文章,能够给你得到帮助。(感谢一键三连),接收好挑战了吗?
关于HTTP模块
1.说说你对HTTP和HTTPS的理解,并说一下它们的端口号是什么好的,HTTP是超文本传输协议,是一个基于请求与响应,无状态的,应用层的协议,常基于TCP/IP协议传输数据,互联网上应用最为广泛的一种网络协议,所有的www文件都必须遵守这个标准,设计HTTP的初衷是为了提供一种发布和接收HTML页面的方法。
HTTP是一种广泛使用的网络传输协议,是客户端浏览器或其他程序与web服务器之间的应用层通信协议或者标准tcp,用于从www服务器传输超文本到本地浏览器的传输协议,它可以使浏览器更加高效,使网络传输减少。
那么HTTPS,它是一种通过计算机网络进行完全通信的传输协议,经过HTTP进行通信,利用SSL/TLS建立通信,加密数据包。HTTPS使用的主要目的是提供对网站服务器的身份认证,同时保护交换数据的隐私与完整性。
https是http的加密版,是以安全为目标的http,在http中加入ssl,安全基础是ssl。
TLS是传输层加密协议,前身是SSL协议。
HTTP通常承载于T ...
必学必会-音频和视频
前言希望可以通过这篇文章,能够给你得到帮助。(感谢一键三连)
学习深入理解HTML5的audio和video。
HTML5视频概述在HTML5播放一个视频,很简单,只需要一行代码:
1<video src="resources/dadaqianduan.mp4" autoplay></video>
了解多媒体术语了解视频文件格式:
123456789Audio Video InterLeaved .aviFlash Video .flvMPEG-4 .mp4Matroska .mkvOgg .ogv
音频和视频编解码器
编解码器可以理解为一些算法代码,用于处理视频,音频或者其元数据的编码格式。对音频或视频文件进行编码,可使得文件大大缩小,便于在因特网上传输。
音频编解码器:
MP3,使用ACC音频
Wav,使用Wav音频
Ogg,使用OggVorbis音频
视频编解码器:
MP4,使用H.264视频,AAC音频
WebM,使用VP8视频,OggVorbis音频
Ogg,使用Theora视频,OggVorbis音频
多媒体文件格式audio ...
前端170面试题+答案学习整理
前言希望可以通过这篇文章,能够给你得到帮助。(感谢一键三连)
1.css3有哪些新特性圆角border-radius,阴影box-shadow,对文字加特效text-shadow,线性渐变gradient,变化transform,伪元素::selection,媒体查询,多栏布局,图片边框border-image。
p:first-of-type,选择属于其父元素的首个<p>元素的每个<p>元素
p:last-of-type,选择属于其父元素的最后一个<p>元素的每个<p>元素
p:only-of-type,选择属于其父元素的唯一<p>元素的每个<p>元素
p:only-child,选择属于其父元素的唯一子元素的每个<p>元素
p:nth-child(2),选择属于其父元素的第二个子元素的每个<p>元素
:enabled:disabled,控制表单控件的禁用状态
:checked,单选框或复选框被选中
2.first-child与first-of-type的区别是
first-child ...
前端HTML5面试官和应试者一问一答
前言希望可以通过这篇文章,能够给你得到帮助。(感谢一键三连)
1.HTML5表单增加的输入类型
url类型:专门为输入url地址定义的文本库,在验证输入文本的格式时,如果文本框中的的内容不符合url地址的格式,会提示验证错误。
email类型:专门是为输入email地址定义的文本框,在验证输入的文本的格式时,如果文本框中的内容不符合email地址的格式,会提示验证错误。在email类型的input元素还有一个multiple属性,表示在该文本框中可输入用逗号隔开的多个邮件地址。
range类型:用于把输入框显示为滑动条,可以作为某一特定范围内的数值选择器。min和max特性,分别表示范围的最小值,默认为0,范围的最大值,默认为100.range类型有一个step特性,表示拖动的步长,默认为1。
number类型:专门为输入特定的数字而定义的文本框,具有min,max,step特性。
tel类型:专门为输入电话号码而定义的文本框,没有特殊的验证规则。
search类型:专门为输入搜索引擎关键词定义的文本框,没有特殊的验证规则。
color类型:color类型的input元素默认会提供一 ...
Vue.js笔试题解决业务中常见问题
前言希望可以通过这篇文章,能够给你得到帮助。(感谢一键三连)
1.h5底部输入框被键盘遮挡问题如果你遇到h5页面这个问题,当输入框在最底部,点击软键盘后输入框会被遮挡,可以如下解决问题:
123456789var getHeight = $(document).height();$(window).resize(function(){ if($(document).height() < getHeight) { $('#footer').css('position','static'); }else { $('#footer').css('position','absolute'); }});
2.触屏即播放123$('html').one('touchstart',function(){ audio.play()})
3.阻止旋转 ...
哪吒闹海,席卷图文学习前端Flex布局
前言本篇文章进行学习css中的一个重点应用,布局样式为flex布局,相信你学习了解过display属性,position属性,float属性,但今天只学习新东西就是flex布局。
flex布局是什么
flex是flexible box的缩写,意思是弹性布局,代码样式如下:
123.box { display: flex;}
Flexbox Layout模块是提供一个更有效的方式来布置,对齐和item之间在一个容器中分配的控件,即使它们的大小是未知的,或者是动态的,所以单词命名flex(弹性工作制的)
flex布局可以使容器更改其item的宽度,高度,以便最好地填充可用空间,或者收缩它们来防止溢出。flexbox布局使用比较合适应用程序地组件和小规模布局上。
在webkit内核地浏览器中,要加上-webkit前缀哦,代码格式如下:
1234.box { display: -webkit-flex; display: flex;}
当设置flex布局之后,子元素(item)的float,clear,vertical-align属性会失效。
学习前 ...