JavaScript实现一些客户端的功能与业务,JavaScrip

有关HTML5的流言与真相

2011/06/17 · HTML5 · HTML5

你是免不了的。每个人都在谈论HTML5。自众人开始滥用圆角和渐变效果以来,HTML5或许是最热炒的技术。然而,许多人眼中所谓的 HTML5实际上只是老式的DHTML和Ajax。有关HTML5的诸多信息中鱼目混珠,因此,JavaScript专家雷米·夏普(Remy Sharp)和Opera公司的布鲁斯·劳森(Bruce Lawson)着眼这些流言,对其中的常见谬误和事实做了分类整理。

首先,一些事实。

很久很久以前,世上有一门叫做HTML的可爱语言,这门语言简单易学,用它写网站真是轻而易举。因而,所有人都用这门语言,从此,Web也从一堆物理论文的链接变成了今天我们所熟知和喜爱的模样。

大多数页面并不遵循这门语言的简单规则(因为写这些网页的人对内容本身要比媒介形式更为关心),因此所有浏览器都必须忽略错的代码,尽最大努力猜测作者到底是想怎样展示内容。

1999年,W3C决定终止HTML的制定工作,转而制定XHTML。一切都很完美,直到少数人注意到从XHTML升级到XHML2的升级工作 几乎脱离实际。XML的标准要求浏览器一旦碰到错误,就停止工作。另外因为W3C正在起草一种比老式、简陋的HMTL更出色的语言,它不赞成 (deprecate)使用img和a标签这类元素。

Opera和Mozilla开发人员不认同这种做法,并于2004年给W3C提交了一份报告,该报告称:“我们认为网页应用(Web Applications)是一个极为重要的领域,但当前技术并未为这一领域提供充分的支持。在多方制定的规范出来之前,单一厂商的解决方案存在的潜在风险在不断增大。”(译注:暗指Adobe的Flash技术?)

  这份报告提了7条设计原则

  1. 向后兼容,并有一个清晰的迁移路线(migration path)
  2. 明晰(Well-defined)的错误处理机制,类似CSS(比如,忽略未知内容,继续执行),相比之下XML错误处理机制过于“苛刻”。
  3. 编程错误不应直接暴露给终端用户。
  4. 实用性:所有最终进入网页应用技术规范的性特性都必须有实际的应用案例支撑。但反之则不成立:即所有类似的应用案例并不必然会将新特性加入到技术规范中。
  5. 脚本支持已经已得到公认(但是当有更方便的标签可满足需求时,应避免使用脚本。)(译者:类似表单输入数据验证。)
  6. 避免针对特定设备的规范。
  7. 制定过程必须开放。(网络本身从开放式发展中受益颇多。邮件列表,存档,规范草稿应一直对公众开放。)

该报告遭W3C的拒绝,因此Opera和Mozilla以及后来的苹果继续维护着一个叫做网络超文本应用程序技术工作组(Web Hypertext Application Technology Working Group,简称WHATWG)的邮件列表(Mail list),继续制定他们用以验证概念( proof-of-concept)的规范内容。这份规范对HTML4表单规范进行了扩充,在伊恩·希克森(Ian Hickson)的不断校订中,这份规范最终成为一份名叫网页应用程序1.0(Web Applications 1.0)的规范。后来伊恩·希克森离开Opera,加入Google。

在2006年,W3C终于意识到自己的错误,决定重新启用HTML,向WHATWG索要它的规范,并将其作为HTML5规范的基础。

上面这些是史事资料。现在我们来看看一些流传甚广的流言。

流言

“在2012(或2022)年之前,俺是用不上HTML5的了。”

这一流言是从HTML5进入到W3C流程的候选推荐阶段(Candidate Recommendation,简称REC)的项目日期所误传开来的。官方Wiki上写道:[INDENT] 如今一个规范要成为候选推荐标准(REC),它需要具备百分之百的可实施性(interoperable implementations),只有成功通过上万项的测试案例(Test Case)后才能验证这点(据保守估计,整个规范可能需要进行2万项测试)。当你在心里默算写这些测试案例需要多少时间,实施每个新特性又需要多少时间 时,你就会明白HTML5规范制定的时间跨度为什么这么长了。
[/INDENT]  因此,按此说法,在你能在两大浏览器中用上所有的功能之前,HTML5的规范是没有最终定稿的。

当然,真正重要的一小部分HTML5的特性已得到浏览器的支持,任何浏览器的支持情况汇总表单都会在一周之内过时,因为浏览器制作厂商的创新速度非常之快。另外,许多HTML5的新特性也通过JavaScript脚本在不支持HTML5的老浏览器中得以重现。Canvas属性在所有新浏览器中得到支持,其中包括IE9,另外在老的IE浏览器中,通过excanvas库,我们也可以模拟Canvas的特性。而音频和视频标签效果,我们则可以通过Flash在旧的浏览器中实现。

HTML5在设计上就可以优雅降级,因此运用一些JavaScript代码和创意,HTML5的所有功能都可以在老浏览器上实现。

“俺的浏览器支持HTML5,你的不支持。”

这一流言认定HTML5是一个整体不可分割的标准。但实际上不是。正如前文所说,HTML5是一组新特性的组合。因此,短期来讲,你不能说一个 浏览器支持了HTML5的所有内容。而当浏览器能做到这点时,浏览器本身已经无关紧要了,因为那时我们将被新一代的HTML语言所震撼。

感觉HTML5乱的一塌糊涂,是吧?看看CSS2.1,这么多年了它都是一个尚未最终完成的标准,但是我们每个人无时不在用它。我们用CSS3轻松添加圆角,这点很快就会得到所有浏览器的支持,虽然CSS3的其他特性尚未得到所有浏览器的支持。

要提防那些浏览器“评分”网站。这些网站测试的内容经常与HTML5无关,比如CSS,SVG,甚至是网页字体(web fonts)。你手头需要完成的工作才是要紧的,你客户受众浏览器所支持的技术才是用得上的技术。

HTML5实际上正式认可了一些常见的书写错误(Tag Soup)

HTML5在语法方面要比XHTML松散很多:比如,你可以用纯大写或小写字母书写标签,甚至大小写混用也无妨。你无需对img这类的标签做自封闭处理(self-close),因此下面这两种写法都是合法的:

JavaScript

<img src="nice.jpg" /> <img src="nice.jpg">

1
2
<img src="nice.jpg" />
<img src="nice.jpg">

标签属性也无需用双引号括起来,因此下面这两种写法都是合法的:

XHTML

<img src="nice.jpg" /> <img src="nice.jpg">

1
2
<img src="nice.jpg" />
<img src="nice.jpg">

使用大写或小写(甚至混用)字母都可以,所以下面三种写法也都是合法的:

XHTML

<IMG SRC=nice.jpg> <img src=nice.jpg> <iMg SrC=nice.jpg>

1
2
3
<IMG SRC=nice.jpg>
<img src=nice.jpg>
<iMg SrC=nice.jpg>

这与HTML4毫无差异,但是如果你用习惯了XHTML,你碰到这种写法时还是会很震惊的。现实中,如果你使用HTML和文本内容书写页面,而 非使用XML(你极有可能是混用文本和HTML书写页面的,因为IE8并不能真正的渲染XHTML页面),那么上述细微差别也无关紧要:浏览器会忽略尾部 的斜杠,双引号,以及大小写。

HTML5语法看似松散,但实际的解析规则要严格的多。因而HTML5中,常见的书写错误(Tag Soul)将不复存在;HTML5的规范对这些无效标记做精确的描述和定义,因此所有遵循规范的浏览器都会生成同样的文档对象模型(DOM)。如果你曾写过JavaScript来遍历DOM,那么你就会对DOM不一致所带的恐怖经历有所体会。

但这种修正不应导致无效代码泛滥。HTML5为你创建的DOM可能并不是你想要的那个,因此对书写的HTML5代码进行验证仍然至关重要。随着新特性的大量涌入,对细小语法错误的忽视会让你的脚本失效,或是CSS样式出错,这也是我们为什么需要HTML5验证器的原因之所在。

HTML5远不仅仅只是让一些常见的书写错误合法化,而且让这些常见错误(Tag soup)成为历史。赞!

“我需要把我的网站从XHTML转换HTML5。”

HTML5对松散语法的包容性是敲响了XHTML的丧钟吗?制定XHTML2规范的工作组已经解散,对吧。

没错,XHTML2的工作组在2009年年末的时候解散了。他们起草的这个规范是用来与HTML5竞争的,但尚未得到执行实施,然而,同时保留 两队人马是对W3C组织资源的一种浪费。另外XHTML1已经是一个业已完成的规范,得到所有浏览器的广泛支持,并在必须的时限内仍将得到所有浏览器的支 持。因此你用XHTML书写的网站也将免受折腾之苦。

HTML5将会干掉XML

根本不会,如果你需要使用XML,而不是HTML,你可以选用XHTML5,它几乎包含所有HTML5的优点,只是要必须遵循严格XHTML语法(比如,要标签属性中的双引号不能省,自封闭元素的末尾斜杠不可省,必须用小写字母书写标签等等诸如此类。)

现实情况是XHTML5并不完全包含所有HTML5的特性。譬如< noscript> 就失效了。但你想想,这古董玩意儿还有人在用吗?

HTML5会干掉Flash和插件

< canvas> 标签可以让脚本根据键盘输入操纵图像实现动画效果,因此在一些简单的应用场景下可以与Adoble Flash竞争。HTML5还有对Video和Audio播放的原生支持。

正因为CSS Web字体尚未得到广泛支持,以Flash为基础的sIFR技 术将会填补这一空白,Flash也因逆向兼容HTML5视频内容而挽救局面。因为HTML5设计时“照顾”了老浏览器,Video标签之间的其他标记将会 被支持HTML5的浏览器所忽视,因此可以用老式的< object>或< embed> 标签,用Flash嵌入所有浏览器支持的视频内容,克罗克·卡门( Kroc Camen)在他的《全兼容的视频》一文中就倡导这种做法。(见下面截图。)

图片 1

 

但也并是不所的应用场合都是可以用HTML5取代Flash的。比如HTML5中就没办法进行数字版权的管理。Opera,Firefox和 Chrome这类浏览器允许简单的右键点几下就将视频保存的本地电脑上。如果你不想用户保存视频文件,你就需要使用插件。另外捕捉麦克风或是摄像头的信号 就只能通过Flash实现。(不过 元素已经出现到HTML5以后的规范中),因此如果你想写一个可以终结聊天轮盘(Chatroulette)网站的东西来,那么HTML5并不适合你。

HTML5在可访问性(Accessibility)方面做得比较差

关于HTML5的讨论中有不少是唠叨HTML5可访问性的。这点很好,应该欢迎:因为网络的基础语言已经做了太多了的改变,因此确保网页对于那 些残障人士的易访问性极其重要。另外,更为重要的是在技术方案的制定过程中就将其考量进入,而非事后修补。毕竟大多数开发人员甚至没有为图片标签添加 Alt属性,所以提供现成可用的易访问性(accessibility)相比人们手动添加更容易成功。

这也是为什么HTML5添加了类似滑块(

JavaScript

<input type="range">

1
&lt;input  type=&quot;range&quot;&gt;

,目前仅Opera和Webkit内核的浏览器支持)原生控件和日期选定控件(

JavaScript

<input type="date">

1
&lt;input  type=&quot;date&quot;&gt;

,仅Opera支持)——因为之前,我们只能用JavaScript和图片来模拟,并添加键盘支持和WAI-ARIA的Role属性。

而Canvas标签则又是另一番情况,该标签原本是苹果独创的,后遭其他浏览器厂商的逆向工程破解,继而被吸纳为HTML5规范的一部分,因此 Canvas技术本身在可访问性方面并未做考量。如果你只是用它制作一些视觉美化,那问题不大,你大可把它看成图片,只是不能添加ALt属性来指定替换的 文本内容(已有人建议在规范中作此增添,但目前尚未得到实施)。因此,确保Canvas之中的信息在页面的其他地方有替代信息,从而增强页面的可访问性。

Canvas中的文本变成了像素,如图片中的文本。因此,辅助技术和屏幕阅读器来可以读出其中的信息。可考虑用W3C的可缩放适量图像标准 (SVG)替代,尤其对于动态图像和文本内容来说。SVG目前得到了主流浏览器的支持,其中包括IE9(IE8及以下的浏览器不支持,不过SVGWeb库 通过Flash技术可以在老式浏览器中模仿SVG。)

video和audio标签也很有前途。尽管这两个标签的规范尚未完全确定(而且许多浏览器还不支持)。HTML5已经添加了一个新 的track 的标签,可以包含带时间轴的文本(歌词和外文媒体的字幕),你可以在视频下面用JavaScript来添加时间轴字幕,并与视频内容同步。

“当我第一次用HTML5的时候,HTML5的大师会助我一臂之力”

如果是真的那该多好。不过保罗·艾瑞士(Paul Irish)和迪维亚·梅丽亚( Divya Manian)打造的HTML5模板文件对 你来说就足以很好。模板文件包含一系列的文件,你可以作为模板用在你的项目中。模板文件包含了你所必须的JavaScript,方便在IE中添加新元素; 它从Google的CDN上引用jQuery,另外如果Google服务器出问题了,还可降级引用你自己服务器上的JS库。

图片 2

它也添加了适用iOS,Android和Opera手机版的标签,并用一个易于理解的CSS reset文件搭建了一个基本的CSS骨架。它甚至还一个.htaccess文件,以便为HTML5视频提供正确的MIME类型。如果你不需要全部的内 容,你可删除对你项目无用的内容,精简文件。

深入阅读材料

HTML5的话题很宽泛。下面是是我们手工挑选的几个链接。披露提醒(Disclosure):本文的作者参与了下面的一些项目。

  • W3C规范:HTML5
    写网站的同学都应该看看的资料。
  • HTML5的演示例子
    HTML5 API在浏览器中的实际效果示范例子
  • HTML5 Doctor
    这个博客上都是些短小精悍的文章,“帮你马上运用HTML5技术”
  • html5-shims 上面会分享一些脚本,教你如何在浏览器中模仿再现HTML5的功能特性。

原文:Remy and Bruce
译文:21haolou

 

赞 收藏 评论

图片 3

8、对WEB标准以及W3C的理解与认识?

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,容易维 护、改版方便,不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。

23、如何在页面上实现一个圆形的可点击区域?

a、map+area或者svg
b、border-radius
c、纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等

12、说说你对HTML语义化的理解?

(1)什么是HTML语义化?
<基本上都是围绕着几个主要的标签,像标题(H1~H6)、列表(li)、强调(strong em)等等>
  根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
(2)为什么要语义化?
为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看;
用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;
有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。
(3) 语义化标签
<header></header>
<footer></footer>
<nav></nav>
<section></section>
<article></article> SM:用来在页面中表示一套结构完整且独立的内容部分
<aslde></aside> SM:主题的附属信息(用途很广,主要就是一个附属内容),如果article里面为一篇文章的话,那么文章的作者以及信息内容就是这篇文章的附属内容了
<figure></figure>SM:媒体元素,比如一些视频,图片啊等等
<datalist></datalist>
SM:选项列表,与input元素配合使用,来定义input可能的值
<details></details>
SM:用于描述文档或者文档某个部分的细节~ 默认属性为open~
ps:配合summary一起使用

目录

29、WebSocket与消息推送?

B/S架构的系统多使用HTTP协议,HTTP协议的特点:
1 无状态协议2 用于通过 Internet 发送请求消息和响应消息3 使用端口接收和发送消息,默认为80端口底层通信还是使用Socket完成。

图片 4

HTTP协议决定了服务器与客户端之间的连接方式,无法直接实现消息推送(F5已坏),一些变相的解决办法:
双向通信与消息推送
轮询:客户端定时向服务器发送Ajax请求,服务器接到请求后马上返回响应信息并关闭连接。 �优点:后端程序编写比较容易。 �缺点:请求中有大半是无用,浪费带宽和服务器资源。 �实例:适于小型应用。
长轮询:客户端向服务器发送Ajax请求,服务器接到请求后hold住连接,直到有新消息才返回响应信息并关闭连接,客户端处理完响应信息后再向服务器发送新的请求。 �优点:在无消息的情况下不会频繁的请求,耗费资小。 �缺点:服务器hold连接会消耗资源,返回数据顺序无保证,难于管理维护。 Comet异步的ashx,�实例:WebQQ、Hi网页版、Facebook IM。
长连接:在页面里嵌入一个隐蔵iframe,将这个隐蔵iframe的src属性设为对一个长连接的请求或是采用xhr请求,服务器端就能源源不断地往客户端输入数据。 �优点:消息即时到达,不发无用请求;管理起来也相对便。 �缺点:服务器维护一个长连接会增加开销。 �实例:Gmail聊天
�Flash Socket:在页面中内嵌入一个使用了Socket类的 Flash 程序JavaScript通过调用此Flash程序提供的Socket接口与服务器端的Socket接口进行通信,JavaScript在收到服务器端传送的信息后控制页面的显示。 �优点:实现真正的即时通信,而不是伪即时。 �缺点:客户端必须安装Flash插件;非HTTP协议,无法自动穿越防火墙。 �实例:网络互动游戏。
Websocket:WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。依靠这种技术可以实现客户端和服务器端的长连接,双向实时通信。特点:a、事件驱动b、异步c、使用ws或者wss协议的客户端socket
d、能够实现真正意义上的推送功能
缺点: 少部分浏览器不支持,浏览器支持的程度与方式有区别。

11、请你描述一下 cookies,sessionStorage 和 localStorage 的区别?

sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据。有了本地数据,就可以避免数据在浏览器和服务器间不必要地来回传递。

sessionStorage、localStorage、cookie都是在浏览器端存储的数据,其中sessionStorage 的概念很特别,引入了一个“浏览器窗口”的概念。sessionStorage 是在同源的同窗口(或tab)中,始终存在的数据。也就是说只要这个浏览器窗口没有关闭,即使刷新页面或进入同源另一页面,数据仍然存在。关闭窗口后,sessionStorage 即被销毁。同时“独立”打开的不同窗口,即使是同一页面,sessionStorage 对象也是不同的

cookies会发送到服务器端。其余两个不会。

Microsoft 指出 Internet Explorer 8 增加cookie 限制为每个域名50个,但IE7 似乎也允许每个域名50个cookie。Firefox 每个域名cookie 限制为50个。Opera每个域名cookie 限制为30个。Firefox 和Safari 允许cookie 多达4097个字节,包括名(name)、值(value)和等号。Opera 许cookie 多达4096个字节,包括:名(name)、值(value)和等号。Internet Explorer 允许cookie 多达4095个字节,包括:名(name)、值(value)和等号。

区别:

- Cookie

  • 每个域名存储量比较小(各浏览器不同,大致4K)
  • 所有域名的存储量有限制(各浏览器不同,大致4K)
  • 有个数限制(各浏览器不同)
  • 会随请求发送到服务器
    - LocalStorage
  • 永久存储
  • 单个域名存储量比较大(推荐5MB,各浏览器不同)
  • 总体数量无限制
    - SessionStorage
  • 只在 Session 内有效
  • 存储量更大(推荐没有限制,但是实际上各浏览器也不同)

8、对WEB标准以及W3C的理解与认识?

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、
文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,
容易维 护、改版方便,不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。

1、浏览器页面有哪三层构成,分别是什么,作用是什么?

构成:结构层、表示层、行为层
分别是:HTML、CSS、JavaScript
作用:HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能与业务。

34、请你说说cookie 和session 的区别?

(1)、cookie数据存放在客户的浏览器上,session数据放在服务器上。
(2)、cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗考虑到安全应当使用session。
(3)、session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能考虑到减轻服务器性能方面,应当使用COOKIE。
(4)、单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie。所以个人建议:将登陆信息等重要信息存放为session中。其他信息如果需要保留,可以放在Cookie中。

6、每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗?

<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。(重点:告诉浏览器按照何种规范解析页面)

25、实现不使用 border 画出1px高的线,在不同浏览器的标准模式与怪异模式下都能保持一致的效果?

<div style="height:1px;overflow:hidden;background:red"></div>

14、说说你对SVG理解?

SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG是W3C("World Wide Web ConSortium" 即 " 国际互联网标准组织")在2000年8月制定的一种新的二维矢量图形格式,也是规范中的网络矢量图形标准。SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式。SVG于2003年1月14日成为 W3C 推荐标准。
特点:
(1)任意放缩
用户可以任意缩放图像显示,而不会破坏图像的清晰度、细节等。
(2)文本独立
SVG图像中的文字独立于图像,文字保留可编辑和可搜寻的状态。也不会再有字体的限制,用户系统即使没有安装某一字体,也会看到和他们制作时完全相同的画面。
(3)较小文件
总体来讲,SVG文件比那些GIF和JPEG格式的文件要小很多,因而下载也很快。
(4)超强显示效果
SVG图像在屏幕上总是边缘清晰,它的清晰度适合任何屏幕分辨率和打印分辨率。
(5)超级颜色控制
SVG图像提供一个1600万种颜色的调色板,支持ICC颜色描述文件标准、RGB、线X填充、渐变和蒙版。
(6)交互X和智能化。SVG面临的主要问题一个是如何和已经占有重要市场份额的矢量图形格式Flash竞争的问题,另一个问题就是SVG的本地运行环境下的厂家支持程度。
浏览器支持:
Internet Explorer9,火狐,谷歌Chrome,Opera和Safari都支持SVG。
IE8和早期版本都需要一个插件 - 如Adobe SVG浏览器,这是免费提供的。

15、HTML全局属性(global attribute)有哪些?

参考资料:MDN: html global attribute或者W3C HTML global-attributes
accesskey:设置快捷键,提供快速访问元素如aaa在windows下的firefox中按alt

  • shift + a
    可激活元素
    class:为元素设置类标识,多个类名用空格分开,CSS和javascript可通过class属性获取元素
    contenteditable: 指定元素内容是否可编辑
    contextmenu: 自定义鼠标右键弹出菜单内容
    data-*: 为元素增加自定义属性
    dir: 设置元素文本方向
    draggable: 设置元素是否可拖拽
    dropzone: 设置元素拖放类型: copy, move, link
    hidden: 表示一个元素是否与文档。样式上会导致元素不显示,但是不能用这个属性实现样式效果
    id: 元素id,文档内唯一
    lang: 元素内容的的语言
    spellcheck: 是否启动拼写和语法检查
    style: 行内css样式
    tabindex: 设置元素可以获得焦点,通过tab可以导航
    title: 元素相关的建议信息
    translate: 元素和子孙节点内容是否需要本地化

15、HTML全局属性(global attribute)有哪些?

参考资料:MDN: html global attribute或者W3C HTML global-attributes

  • accesskey:设置快捷键,提供快速访问元素如aaa在windows下的firefox中按alt + shift + a可激活元素
  • class:为元素设置类标识,多个类名用空格分开,CSS和javascript可通过class属性获取元素
  • contenteditable: 指定元素内容是否可编辑
  • contextmenu: 自定义鼠标右键弹出菜单内容
  • data-*: 为元素增加自定义属性
  • dir: 设置元素文本方向
  • draggable: 设置元素是否可拖拽
  • dropzone: 设置元素拖放类型: copy, move, link
  • hidden: 表示一个元素是否与文档。样式上会导致元素不显示,但是不能用这个属性实现样式效果
  • id: 元素id,文档内唯一
  • lang: 元素内容的的语言
  • spellcheck: 是否启动拼写和语法检查
  • style: 行内css样式
  • tabindex: 设置元素可以获得焦点,通过tab可以导航
  • title: 元素相关的建议信息
  • translate: 元素和子孙节点内容是否需要本地化

26、HTML5标签的作用?(用途)

a、使Web页面的内容更加有序和规范
b、使搜索引擎更加容易按照HTML5规则识别出有效的内容
c、使Web页面更接近于一种数据字段和表

7、说说你对HTML5认识?(是什么,为什么)

是什么:

HTML5指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务(Plug-in-Based Rich Internet Application,RIA),例如:AdobeFlash、Microsoft Silverlight与Oracle JavaFX的需求,并且提供更多能有效加强网络应用的标准集。HTML5是HTML最新版本,2014年10月由万维网联盟(W3C)完成标准制定。目标是替换1999年所制定的HTML 4.01和XHTML 1.0标准,以期能在互联网应用迅速发展的时候,使网络标准达到匹配当代的网络需求。

为什么:

HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网。为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电、触摸、不开放)。
HTML5增强了浏览器的原生功能,符合HTML5规范的浏览器功能将更加强大,减少了Web应用对插件的依赖,让用户体验更好,让开发更加方便,另外W3C从推出HTML4.0到5.0之间共经历了17年,HTML的变化很小,这并不符合一个好产品的演进规则。

24、title与h1的区别、b与strong的区别、i与em的区别?

title属性没有明确意义只表示是个标题,H1则表示层次明确的标题,对页面信息的抓取也有很大的影响;
strong是标明重点内容,有语气加强的含义,使用阅读设备阅读网络时:<strong>会重读,而<B>是展示强调内容。i内容展示为斜体,em表示强调的文本;
Physical Style Elements -- 自然样式标签b, i, u, s, preSemantic Style Elements -- 语义样式标签strong, em, ins, del, code应该准确使用语义样式标签, 但不能滥用, 如果不能确定时首选使用自然样式标签。

一、HTML部分

34、请你说说cookie 和session 的区别?

(1)、cookie数据存放在客户的浏览器上,session数据放在服务器上。
(2)、cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
考虑到安全应当使用session。
(3)、session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能
考虑到减轻服务器性能方面,应当使用COOKIE。
(4)、单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie。
所以个人建议:
将登陆信息等重要信息存放为session中。
其他信息如果需要保留,可以放在Cookie中。

28、谈谈你对canvas的理解?

canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术。<canvas> 标记和 SVG以及 VML 之间的一个重要的不同是,<canvas> 有一个基于 JavaScript 的绘图 API,而 SVG 和 VML 使用一个 XML 文档来描述绘图。SVG 绘图很容易编辑与生成,但功能明显要弱一些。

canvas可以完成动画、游戏、图表、图像处理等原来需要Flash完成的一些功能。

9、HTML5行内元素有哪些,块级元素有哪些, 空元素有哪些?

(1)行内元素
a - 锚点* abbr - 缩写* acronym - 首字* b - 粗体(不推荐)* bdo - bidi override* big - 大字体* br - 换行* cite - 引用* code - 计算机代码(在引用源码的时候需要)* dfn - 定义字段* em - 强调* font - 字体设定(不推荐)* i - 斜体* img - 图片* input - 输入框* kbd - 定义键盘文本* label - 表格标签* q - 短引用* s - 中划线(不推荐)* samp

  • 定义范例计算机代码* select - 项目选择* small - 小字体文本* span - 常用内联容器,定义文本内区块* strike - 中划线* strong - 粗体强调* sub
  • 下标* sup - 上标* textarea - 多行文本输入框* tt - 电传文本* u - 下划线* var - 定义变量
    (2)块元素(block element)
    address - 地址* blockquote - 块引用* center - 举中对齐块* dir - 目录列表* div - 常用块级容易,也是css layout的主要标签* dl - 定义列表* fieldset - form控制组* form - 交互表单* h1 - 大标题* h2 - 副标题* h3 - 3级标题* h4 - 4级标题* h5 - 5级标题* h6 - 6级标题* hr
  • 水平分隔线* isindex - input prompt* menu - 菜单列表* noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容* noscript - )可选脚本内容(对于不支持script的浏览器显示此内容)* ol - 排序表单* p
  • 段落* pre - 格式化文本* table - 表格* ul - 非排序列表可变元素可变元素为根据上下文语境决定该元素为块元素或者内联元素。* applet - java applet* button - 按钮* del - 删除文本* iframe - inline frame* ins - 插入的文本* map - 图片区块(map)* object - object对象* script - 客户端脚本。

** (3)空元素(在HTML[1] 元素中,没有内容的 HTML 元素被称为空元素)**

//换行


//分隔线<input>//文本框等

18、介绍一下你对浏览器内核的理解?

主要分成两部分:渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎:负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
JS引擎则:解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确,后来JS引擎越来越独立,内核就倾向于只指渲染引擎。

35、说说浏览器内核及差异?

浏览器最核心的部分是“Rendering Engine”,即“渲染引擎”,我们一般叫做浏览器内核。它主要的功能是解释网页中的语法并渲染网页。所以渲染引擎决定了浏览器如何显示网页内容以及页面的格式信息。不同的浏览器内核对网页语法的解释不尽相同,这就导致了不同浏览器渲染出的网页可能有一些差异。
比较出名的浏览器内核有以下几种:KHTML、Trident、Gecko、Presto、Webkit、Blink。
(1)、Trident内核就是我们所熟知的IE浏览器的内核,该内核在IE4中首次采用,沿用到IE11,俗称“IE内核”。一直到Windows XP时期,由于Windows的市场占有率非常高导致IE多年一家独大,微软长时间没有更新Trident内核产生了不好的后果:一是Trident内核几乎与W3C的标准脱节;二是Trident大量的Bug没有得到及时解决带来的安全问题等。很多用户开始转投其他浏览器,Firefox和Opera就是在这个时候兴起的。
另外,很多国产浏览器都是“双核浏览器”,其中一个核心是Trident,另一个常见的是Webkit。比如遨游浏览器、360安全浏览器等。
(2)、Gecko内核是Firefox采用的内核,开始于Netscape6。Gecko的特点是代码完全公开,可开发程度很高。Gecko的出现和IE也不无关系,当年IE与W3C标准严重脱节导致内部一些开发人员不满,他们与当时已经停止更新的Netscape的一些员工创办了Mozilla,以当时的Mosaic内核为基础重新编写了内核,于是就有了Gecko。
Gecko内核的浏览器仍然是Firefox的用户最多,多以有时候也会被称为Firefox内核,Gecko内核也是一个跨平台的内核。
(3)、Presto内核是Opera之前使用过的内核,Opera12.17以及更早的版本曾经采用过的内核,现在已经停止开发并废弃。该内核在2003年的Opera7中首次使用,Presto的特点是渲染速度的优化达到了极致,但代价是牺牲了网页的兼容性。
Presto是一个动态内核,在脚本处理上Presto有着天生的优势,页面的全部或者部分都能够在回应脚本事件时等情况下被重新解析。此外该内核在执行javascript的时候有着最快的速度,根据在同等条件下的测试,Presto内核执行同等Javascript所需的时间仅有Trident和Gecko内核的三分之一(也有人测试说Presto渲染部分快部分慢,总体和其他内核差不多)。可惜Presto是商业引擎,很大程度上限制了内核的发展。现在Opera改用Google Chrome相同的Blink内核。
(4)、Webkit内核是苹果公司自己的内核,也是苹果Safari浏览器使用的内核。Webkit引擎包含WebCore排版引擎和JavascriptCore解析引擎,均从KDE的KHTML引擎衍生而来,基于GPL开源。Google Chrome使用了Webkit内核,在脚本解析上Chrome使用了自家研发的V8引擎。
现在许多手机浏览器使用的都是Webkit内核,苹果自带Safari,Android的默认浏览器等。
(5)、Blink是由Google和Opera Software开发的浏览器排版引擎,于2013年4月公布了这一消息。该渲染引擎是开源引擎Webkit中Webcore组件的一个分支,并且在Chrome(28及往后版本)、Opera(15及往后版本)和Yandex浏览器中使用。
而在Google作出此举之际,Mozilla与Samsung也达成合作开发协议开发下一代浏览器渲染引擎Servo。
(6)、KHTML是网页排版引擎之一,由KDE开发。KHTML拥有速度快捷的优点,但对错误语法的容忍度则比Mozilla产品所使用的Gecko引擎小。苹果电脑于2002年采纳了KHTML,作为开发Safari浏览器之用,并发布所修改的最新及过去版本源代码。后来发表了开放源代码的WebCore及WebKit引擎,它们均是KHTML的衍生产品,在开发网站列出引擎改变内容,并会传回至KDE计划。

34、请你说说cookie 和session 的区别?

(1)、cookie数据存放在客户的浏览器上,session数据放在服务器上。
(2)、cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
考虑到安全应当使用session。
(3)、session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能
考虑到减轻服务器性能方面,应当使用COOKIE。
(4)、单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie。
所以个人建议:
将登陆信息等重要信息存放为session中。
其他信息如果需要保留,可以放在Cookie中。

博客数据来源声明:
本博客大部分数据来源于各大网站的收集整理改编,主要有GitHub(

一、HTML部分
1、浏览器页面有哪三层构成,分别是什么,作用是什么?
2、HTML5的优点与缺点?
3、Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?
4、HTML5有哪些新特性、移除了哪些元素?
5、你做的网页在哪些流览器测试过,这些浏览器的内核分别是什么?
6、每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗?
7、说说你对HTML5认识?(是什么,为什么)
8、对WEB标准以及W3C的理解与认识?
9、HTML5行内元素有哪些,块级元素有哪些, 空元素有哪些?
10、什么是WebGL,它有什么优点?
11、请你描述一下 cookies,sessionStorage 和 localStorage 的区别?
12、说说你对HTML语义化的理解?
13、link和@import的区别?
14、说说你对SVG理解?
15、HTML全局属性(global attribute)有哪些?
16、说说超链接target属性的取值和作用?
17、data-属性的作用是什么?
18、介绍一下你对浏览器内核的理解?
19、常见的浏览器内核有哪些?
20、iframe有那些缺点?
21、Label的作用是什么,是怎么用的?
22、如何实现浏览器内多个标签页之间的通信?
23、如何在页面上实现一个圆形的可点击区域?
24、title与h1的区别、b与strong的区别、i与em的区别?
25、实现不使用 border 画出1px高的线,在不同浏览器的标准模式与怪异模式下都能保持一致的效果?
26、HTML5标签的作用?(用途)
27、简述一下src与href的区别?
28、谈谈你对canvas的理解?
29、WebSocket与消息推送?
30、img的title和alt有什么区别?
31、表单的基本组成部分有哪些,表单的主要用途是什么?
32、表单提交中Get和Post方式的区别?
33、请你谈谈Cookie的弊端?
34、请你说说cookie 和session 的区别?
35、说说浏览器内核及差异?
36、内容还会不断补充。。。

2、HTML5的优点与缺点?

优点:
a、网络标准统一、HTML5本身是由W3C推荐出来的。
b、多设备、跨平台
c、即时更新。
d、提高可用性和改进用户的友好体验;
e、有几个新的标签,这将有助于开发人员定义重要的内容;
f、可以给站点带来更多的多媒体元素(视频和音频);
g、可以很好的替代Flash和Silverlight;
h、涉及到网站的抓取和索引的时候,对于SEO很友好;
i、被大量应用于移动应用程序和游戏。
缺点:
a、安全:像之前Firefox4的web socket和透明代理的实现存在严重的安全问题,同时web storage、web socket 这样的功能很容易被黑客利用,来盗取用户的信息和资料。
b、完善性:许多特性各浏览器的支持程度也不一样。
c、技术门槛:HTML5简化开发者工作的同时代表了有许多新的属性和API需要开发者学习,像web worker、web socket、web storage 等新特性,后台甚至浏览器原理的知识,机遇的同时也是巨大的挑战
d、性能:某些平台上的引擎问题导致HTML5性能低下。
e、浏览器兼容性:最大缺点,IE9以下浏览器几乎全军覆没。

36、内容还会不断补充。。。

博客数据来源声明:
本博客大部分数据来源于各大网站的收集整理改编,主要有GitHub(

20、iframe有那些缺点?

*iframe会阻塞主页面的Onload事件;
*搜索引擎的检索程序无法解读这种页面,不利于SEO;
*iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe,最好是通过javascript
动态给iframe添加src属性值,这样可以绕开以上两个问题。

图片 5

31、表单的基本组成部分有哪些,表单的主要用途是什么?

组成:表单标签、表单域、表单按钮
a、表单标签:这里面包含了处理表单数据所用CGI程序的URL,以及数据提交到服务器的方法。
b、表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等。
c、表单按钮:包括提交按钮,复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。
主要用途:表单在网页中主要负责数据采集的功能,和向服务器传送数据。

3、Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?

回答1:

(1)、<!DOCTYPE> 声明位于文档中的最前面,处于 <html> 标签之前。告知浏览器的解析器,用什么文档类型 规范来解析这个文档。
(2)、严格模式的排版和JS 运作模式是以该浏览器支持的最高标准运行。
(3)、在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
(4)、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

回答2:

doctype声明指出阅读程序应该用什么规则集来解释文档中的标记。在Web文档的情况下,“阅读程序”通常是浏览器或者校验器这样的一个程序,“规则”则是W3C所发布的一个文档类型定义(DTD)中包含的规则。
(1)<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。该标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的HTML 文档。
(2)所谓的标准模式是指,浏览器按 W3C 标准解析执行代码;怪异模式则是使用浏览器自己的方式解析执行代码,因为不同浏览器解析执行的方式不一样,所以我们称之为怪异模式。
严格模式是浏览器根据web标准去解析页面,是一种要求严格的DTD,不允许使用任何表现层的语法,如<br/>。严格模式的排版和JS 运作模式是以该浏览器支持的最高标准运行混杂模式则是一种向后兼容的解析方法,说的透明点就是可以实现IE5.5以下版本浏览器的渲染模式。
(3)浏览器解析时到底使用标准模式还是怪异模式,与你网页中的 DTD 声明直接相关, DTD 声明定义了标准文档的类型(标准模式解析)文档类型,会使浏览器使用相应的方式加载网页并显示,忽略 DTD 声明 ,将使网页进入怪异模式。

2、HTML5的优点与缺点?

优点:
a、网络标准统一、HTML5本身是由W3C推荐出来的。
b、多设备、跨平台
c、即时更新。
d、提高可用性和改进用户的友好体验;
e、有几个新的标签,这将有助于开发人员定义重要的内容;
f、可以给站点带来更多的多媒体元素(视频和音频);
g、可以很好的替代Flash和Silverlight;
h、涉及到网站的抓取和索引的时候,对于SEO很友好;
i、被大量应用于移动应用程序和游戏。
缺点:
a、安全:像之前Firefox4的web socket和透明代理的实现存在严重的安全问题,同时web storage、web socket 这样的功能很容易被黑客利用,来盗取用户的信息和资料。
b、完善性:许多特性各浏览器的支持程度也不一样。
c、技术门槛:HTML5简化开发者工作的同时代表了有许多新的属性和API需要开发者学习,像web worker、web socket、web storage 等新特性,后台甚至浏览器原理的知识,机遇的同时也是巨大的挑战
d、性能:某些平台上的引擎问题导致HTML5性能低下。
e、浏览器兼容性:最大缺点,IE9以下浏览器几乎全军覆没。

本文由必威发布于必威-前端,转载请注明出处:JavaScript实现一些客户端的功能与业务,JavaScrip

相关阅读