首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

前端面试题1(HTML篇)

在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作 HTML5 为什么只需要写 ?...[endif]--> 如何区分HTML5: DOCTYPE声明新增的结构元素功能元素 HTML5的离线储存怎么使用,工作原理能不能解释一下?...在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件 原理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术),通过这个文件上的解析清单离线存储资源...如果需要使用iframe,最好是通过javascript动态给iframe添加src属性值,这样可以绕开以上两个问题 优点: 用来加载速度较慢的内容(如广告) 可以使脚本可以并行下载 可以实现跨子域通信...通过 visibilityState 的值检测页面当前是否可见,以及打开网页的时间等; 在页面被切换到其他后台进程的时候,自动暂停音乐或视频的播放 如何在页面上实现一个圆形的可点击区域?

1.8K10

前端开发面试题总结之——HTML

在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。 (3)如果HTML文档包含形式完整的DOCTYPE,那么他一般以标准模式呈现。...HTML5的离线存储怎么使用?能否解释一下工作原理? 在用户没有连接英特网时,可以正常访问站点和应用;在用户连接英特网时,更新用户机器上的缓存文件。...注意:sessionStorage 都可以用localStorage 来代替,但需要记住的是,在窗口或者标签关闭时,使用sessionStorage 存储的数据会丢失。...如何在页面上实现一个圆形的可点击区域?...可以防止:恶意破解密码、刷票、论坛灌水,有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试

1.8K80
您找到你想要的搜索结果了吗?
是的
没有找到

前端面试那些坑之HTML篇

在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。 2、HTML5为什么只需要写?...9、HTML5的离线储存怎么使用,工作原理能不能解释一下? 在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件。...14、如何实现浏览器内多个标签之间的通信?...通过visibilityState 的值检测页面当前是否可见,以及打开网页的时间等; 在页面被切换到其他后台进程的时候,自动暂停音乐或视频的播放; 17、如何在页面上实现一个圆形的可点击区域?...区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水; 有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试。

1.4K90

常用meta标签属性整理总汇

--     all:文件将被检索,且页面上的链接可以被查询;     none:文件将不被检索,且页面上的链接不可以被查询;     index:文件将被检索;     follow:页面上的链接可以被查询...;     noindex:文件将不被检索;     nofollow:页面上的链接不可以被查询。  ...maximum-scale:允许用户缩放到的最大比例 user-scalable:用户是否可以手动缩 (no,yes) minimal-ui:可以在页面加载时最小化上下状态栏。...如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1,则用户将不能放大/缩小网页来看到全部的内容。...-- [wml|xhtml|html5]根据手机的协议语言,选择其中一种; url="url" 后者代表当前PC所对应的手机URL,两者必须是一一对应关系。

1.1K21

HTML5 & CSS3初学者指南(3) – HTML5新特性

会话存储就是cookies确定的解决方案,正如 HTML5 Web存储规格 陈述的: 引用: “如果用户使用相同的站点在两个不同的窗口购买了飞机票。...不像桌面系统,Web 应用程序一直缺乏离线工作的能力。现在不一样了,HTML5 本地存储的出现,已经使脱机工作成为了可能。...因为有了本地存储,你就可以继续离线工作,而 Web 应用程序会使用一些客户端脚本如 JavaScript 间歇性地将你的工作保存到本地存储。...你可以将 navigator.geolocation 比作浏览器中的指南针。浏览器是否支持这个 API,还有待确认。你可以通过将以下的 if-else 写入到自己的代码中,来检测浏览器是否支持。...拖放 我们已经很熟悉拖放电脑桌面上的文件、文件夹和图标了。拖放是一种任何的桌面应用具有的强有力的也是理所当然应该具备的用户交互。

2K80

HTML5 Web缓存&运用程序缓存&cookie,session

如果要永久存储信息,可以保存在数据库中! session工作原理:为每个用户创建一个session id(核心!!!)。...(但是可以通过其它方式实现,如:通过URL传递session id) 用户验证一般采用session。 cookie: 目的:网站标记用户身份而存储在本地客户端的数据(通常经过加密)。...用户访问网页时,名字记录在cookie中; 下次继续访问该网页时,可以从cookie中读取用户访问记录。 cookie会在同源的http请求携带(即使不需要),即在客户端和服务器之间来回传递!...sessionStorage:由英文意思也可知,它是对session的数据存储,所以在用户关闭浏览器(标签/窗口)后,数据被删除! HTML5 web存储支持情况: IE8以上,现代浏览器。...HTML5 server-sent events(服务器发送事件): server-sent事件是单向信息传递;网页可以自动获取来自服务器的更新!

2.1K70

h5调用底层接口的一些知识

h5调用本地摄像头      前端时间使用HTML5做了一个WEB端APP,其中用到了H5面调用手机摄像头的功能,当时也是花了不少时间去研究。...h5调用微信支付    用户通过微信外浏览器打开商品页面,进行微信支付购买商品......题主提到的需求有两种方案:https://www.zhihu.com/question/46841202 h5网中使用打电话功能     如果需要在移动浏览器中实现拨打电话,发送email,调用...比如我用安卓手机自带webkit内核浏览器(原生浏览器没有微信分享功能),打开新浪文章,就不会出现这个微信分享的功能按钮。那么,用HTML5写的页面怎么获得微信接口,来实现一键分享的功能?...废话就不多说了,直接上代码:HTML5如何调用浏览器APP的微信分享功能:http://blog.csdn.net/web_qdkf/article/details/50442938

4.8K130

专访Layabox创始人谢成鸿:让中国HTML5技术屹立世界之巅

因为他们已经开始搞下一代汽车了,优势不在于体量的体现。在于未来技术的投入和投资,这让美国走在了科技强国的前沿。...当时创立可乐吧的时候,也是基于懒人思维,它是全球最早用插件做的游平台,当时,我们利用网页技术和插件技术去还原端游的效果。后来,我们拥有了五六千万的全球用户。...厚积薄发 让HTML5技术屹立世界之巅 当我在2011年介入到这个行业时,发现HTML5所面临的最大问题体现在技术层面上HTML5的性能和兼容性是它最致命的,也是被诰病的东西。...在此之前,我们推出了一个引擎叫做LayaFlash,它除了可以用Flash的AS3语言开发HTML5游戏之外,更重要的特点是可以把Flash游转换成HTML5游戏。...从我的角度来看,未来HTML5技术和内容上的融合,完全体现了LayaAir的优势,依靠我们的技术才能真正的实现大型HTML5游戏的畅快运行,提供给用户更好的体验。

1K30

五分钟了解浏览器工作原理

渲染引擎的主要工作是解析 HTML。渲染引擎默认可展示 HTML、XML和图片,还可以通过插件或扩展程序支持其他数据类型。 ?...内容的实际尺寸和位置需要经过计算才能渲染到页面上(浏览器视口)。这个过程也叫重排(reflow)。...如果请求的 URL 不在缓存中,ISP 的 DNS 服务器首先发起 DNS 查询,找到服务器的 IP 地址。找到正确的 IP 地址后,浏览器使用特定的协议与服务器建立连接。...包括平台(Linux,Windows,Mac,BSD 以及其他 Unix 系统)、协议、用户界面、HTML5 支持情况、是否开源、所有权等等,具体可参考维基百科https://en.wikipedia.org...以上是对浏览器工作原理的粗浅描述,当然实际上浏览器底层还是比较复杂的,远不是几张图和一篇文章能说清楚的。有兴趣的可以去看看浏览器的源码,进行深入了解。

72120

HTML5前端发展前景怎么样?

在互联网的演化进程中,网页制作是Web1.0时代产物,那时网站的主要内容是静态的,用户使用网站的行为也以浏览为主。...在前端领域混了这几年,总结了一套前端学习的精讲视频和学习路线,如果有对前端开发感兴趣的伙伴,不管你是想转行,或是大学生,还有工作中想提升自己能力的web前端党,欢迎大家的加入我的前端开发交流群:603985993...大规模的公司把这些分得很细,所以,你可以精通一门,熟悉其他的,进军大公司。 哪些人适合做web前端呢? 1、女生 谁说女生不适合做技术?...HTML5前端是一个介于设计师和程序之间的工种,具有两者的特性,其实是很适合女生来做的,我身边做HTML5前端做的很少的女生不在少数,做HTML5前端是一个细心的活,做出来还不行,需要做的精细,这个层面上来讲的话...HTML5前端作为互联网+时代,用户体验为王的掌控者,当然待遇是水涨船高的。 2、人才需求大 互联网对人们的影响越来越大,各类职业也需求更多,前端的人才需求比以前也有了质的飞跃。

41710

h5调用底层接口的一些知识

h5调用本地摄像头      前端时间使用HTML5做了一个WEB端APP,其中用到了H5面调用手机摄像头的功能,当时也是花了不少时间去研究。...h5调用微信支付    用户通过微信外浏览器打开商品页面,进行微信支付购买商品......题主提到的需求有两种方案:https://www.zhihu.com/question/46841202 h5网中使用打电话功能     如果需要在移动浏览器中实现拨打电话,发送email,调用sns...比如我用安卓手机自带webkit内核浏览器(原生浏览器没有微信分享功能),打开新浪文章,就不会出现这个微信分享的功能按钮。那么,用HTML5写的页面怎么获得微信接口,来实现一键分享的功能?...废话就不多说了,直接上代码:HTML5如何调用浏览器APP的微信分享功能:http://blog.csdn.net/web_qdkf/article/details/50442938

4.7K50

HTML中常用meta标签整理

-- [wml|xhtml|html5]根据手机的协议语言,选择其中一种; url="url" 后者代表当前PC所对应的手机URL,两者必须是一一对应关系。...-- all:文件将被检索,且页面上的链接可以被查询; none:文件将不被检索,且页面上的链接不可以被查询; index:文件将被检索; follow:页面上的链接可以被查询...; noindex:文件将不被检索; nofollow:页面上的链接不可以被查询。...maximum-scale:允许用户缩放到的最大比例 user-scalable:用户是否可以手动缩 (no,yes) 注意,很多人使用initial-scale=1到非响应式网站上,这会让网站以100%...如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1,则用户将不能放大/缩小网页来看到全部的内容。

1.7K20

HTML5定稿了,为什么原生App世界将被颠覆

结果是苹果和Google不但不在浏览器上积极实现HTML5关于移动App所需的规范,反而对HTML5做出种种限制。...导流效率高:除了入口多、流量大,导流效率高也不可忽视,谁都知道:游和端游打同样的广告,广告变用户的转化率,游远远高于端游。...可精准导流到二级:我们都知道搜索引擎可以直接进入到 ■HTML5对最终用户的3大优势 ●大幅降低使用门槛 为什么流媒体会替代下载视频成为主流?为什么游会如此火爆?只因用户太“懒”。...让用户更方便的满足需求,有时效果好于更多的满足需求。 用户眼睛看到一个兴趣点,点击后,就应该立即开始满足用户需求。比如流媒体可以立即看,可以立即玩。...谁先满足用户这个需求,谁就制胜。 ●实时更新、差量更新的优秀体验 HTML5应用可以绕开应用市场的限制进行自主实时更新,用户可以快速享受新服务。

62630

前端常见的6种HTML5错误用法

有时候不应该同时使用hgroup和header: 如果只有一个子头部 如果hgroup自己就能工作的很好。。。这不废话么 第一个问题一般是这样的: 请不要复制这段代码!...注意:不是所有页面上的链接都需要放在nav元素中——这个元素本意是用作主要的导航区块。举个具体的例子,在footer中经常会有众多的链接,比如服 务条款,主页,版权声明等等。...这正是figure的美妙之处——它可以从主内容移动到sidebar中,而不影响文档流。 这些问题也包含在之前提到的HTML5 element flowchart中。...如果纯粹只是为了呈现的图,也不在文档其他地方引用,那就绝对不是。其他视情况而定,但一开始可以问自己:“这个图片是否必须和上下文有关?”...我们可以为logo是否应该是H1标签而互相喷到牛都放完回家了,但这里不是我们讨论的焦点。真正的问题在于figure元素的滥用。figure只应该被引用在文档中,或者被section元素围绕。

55210

前端常见技术点-HTML扫盲(17问)

DOCTYPE> 是否存在选择呈现模式,被称为 切换或 侦测。...为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构;增强用户体验;利于页面的 SEO;方便其他设备解析;便于团队开发和维护,语义化更具有可读性; 7、HTML5 离线储存的工作原理?...14、浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的? 访问离线资源,同时检测 manifest 文件是否更新,如果更新了则从服务器拉取新的资源并缓存在本地 Cache。...Cookies 可以简单的理解为客户端浏览器的一种本地存储方式(4K),对应于每一个不同的客户端都有一个不同的 Session ID,这个 ID 一般会存储在本地的 Cookie 中(也可以通过 URL...17、HTML5 Web Workers 可以把耗时操作放在独立的 Web Worker 中运行,这样不会阻塞整个页面。Workers 与主线程之间通过 postMessage 方法通信。

56720

【前端面试题】01—42道常见的HTML5面试题(附答案)

可以用一个简单的方法,在页面上单击一个按钮,弹出一个弹框,而弹框也是自己写的一个div。...对于HTML5,仅须放置下面的文档类型代码,让浏览器识别HTML5文档。 如果不放入标签,HTML5不会工作。...18、HTML5中的应用缓存是什么? HTML5应用缓存的最终目的是帮助用户离线浏览页面。换句话说,如果网络连接不可用,打开的页面就来自浏览器缓存,离线应用缓存可以帮助用户达到这个目的。...应用缓存可以帮助用户指定哪些文件需要缓存,哪些不需要 19、如果HTML5看成一个开放平台,它的构建模块有哪些?...25、如何实现浏览器内多个标签之间的通信? 在标签之间,调用 localstorge、 cookies等数据存储,可以实现标签之间的通信 26、如何让 Websocket兼容低版本浏览器?

4.6K10

webApp开发心得「建议收藏」

SPA(single page application),即单webapp,它具有以下优点: 用户体验,对于内容的改动不需要加载整个页面。...fake-首屏加速 以上是一个网站首页的加载时间,我们分别取其150kb与30kb网速的加载速度,可以看出会慢!...若他是webapp,我们可以做一些优化 我们应该避免页面长时间白,这个时候便提出了fake的概念。页面渲染只需要完整的HTML以及CSS,这个便是第一个优化点。...30s-60s,若是过期时间内用户回到列表的话不会重新请求数据 这对服务器压力,页面响应皆是有利的,这个在30s内事实上意义不大,可以减少一次请求。...webapp资源释放 根据前面的描述,我们可以得出一个结论: 无论是view还是UI组件我们得提供统一的destroy接口,以便让用户继承释放资源。

81840

webapp开发实战_html5开发手机app实例

SPA(single page application),即单webapp,它具有以下优点: 用户体验,对于内容的改动不需要加载整个页面。...fake-首屏加速 以上是一个网站首页的加载时间,我们分别取其150kb与30kb网速的加载速度,可以看出会慢!...若他是webapp,我们可以做一些优化 我们应该避免页面长时间白,这个时候便提出了fake的概念。页面渲染只需要完整的HTML以及CSS,这个便是第一个优化点。...30s-60s,若是过期时间内用户回到列表的话不会重新请求数据 这对服务器压力,页面响应皆是有利的,这个在30s内事实上意义不大,可以减少一次请求。...webapp资源释放 根据前面的描述,我们可以得出一个结论: 无论是view还是UI组件我们得提供统一的destroy接口,以便让用户继承释放资源。

1.8K20
领券