当新的语义标签像
,
,
or
标签会更合适. 或者如前所述,它们不使用新的语义标记
or
instead of
and
tags. The result of this old approach is over-complicated markup that is behaving inconsistently across different browsers. 在编写新的HTML5文档时, 开发人员应该采用新的语义标签, 享受HTML5规范带来的所有好处, 让旧习惯成为过去.
问:讨论一下新的HTML5元素如何在不同的组合中使用,即
and
, and
and
.
New HTML5 elements opened up a whole new combination of possibilities and interesting ways of their usage.
For example, 尽管经典的知识是只能有一个页眉和一个页脚, 新的HTML5文档可以包含多个
and
elements. Both the new semantic tags are designed to serve their respective purposes in relation to their parent element. 这意味着不仅是页面
可以包含页眉和页脚,但每个
and
element.
另一个例子是new的用法
and
元素及其组合:
can contain
elements, and an
can contain
elements. To describe this with an example: in your web page you could have a dashboard page with a
对于社交网络的互动,a
对于最新的新闻文章,其中将包含几个
elements. Conversely, an
might contain a
最后供读者评论.
问:讨论HTML5如何简化HTML结构. Provide examples.
首先,HTML5规范简化了doctype声明. Doctype, or Document Type Declaration, tells the browser what type of document they can expect. 旧的XHTML doctype声明如下:
HTML4 Transitional doctype是这样的:
HTML5的新doctype声明非常简单:
HTML5引入的另一个简化, 我们如何声明字符编码, or charset, of the document. HTML5中的字符集声明如下:
...
...
This is much simpler than previously in HTML4 which didn’t have charset meta attribute:
...
...
HTML5规范在简化方面走得太远了,标签
,
and
对于有效的HTML5文档不是强制性的吗. 下面的简单示例将通过 W3C标记验证服务:
My title
Wall of text
在这个例子中唯一起作用的重要标记是HTML5的新doctype, 没有它,浏览器将无法检测到它是一个HTML5文档.
Q: Explain why a cross-browser support is still important if all the modern browsers follow the same HTML5 specification.
HTML5规范是一组定义有效文档的规则, and also provides instructions on how browsers must interpret and render such a document. Unfortunately, the reality is that no browser still supports all the rules defined by HTML5 specification. 大多数主流浏览器都支持该规范的大部分内容, 但在浏览器对HTML5规范的解释上仍然存在差异. As a result, it is necessary for the developer to confirm whether the aspect they are making use of will be supported by all of the browsers on which they hope to display their content. 这就是为什么跨浏览器支持一直是开发人员头痛的问题, 尽管规格有所改进.
问:讨论HTML5的可访问性方面, 特别是在现实世界中使用时,它的局限性和问题.
Today, Web页面和应用程序的使用越来越多, and making them accessible to people who rely upon assistive technology is becoming more important than before. HTML has gone a long way, and HTML5 introduced new user interface features which enable people who rely upon assistive technology to use the web more easily. 尽管存在问题. One of the problems is that developers and designers previously didn’t pay too much attention to this aspect of their web pages or applications. In their defense, as mentioned, one of their main reasons was that the web prior HTML5 didn’t have any accessibility interface features. And now, even if developers want to implement additional accessibility options in their applications, there is a constant problem any new and emerging web technology is facing: browser support. HTML5 accessibility 跟踪最常见的跨浏览器的可访问性特性. 实现可访问性特性并覆盖所有浏览器, 开发者需要额外的时间投入. This can be a key factor that clients need to anticipate if they want their web applications and pages to be on the edge of what is possible with technology today.
Q: Explain HTML5 Web Storage, discuss its security considerations, and the difference between localStorage
and sessionStorage
.
HTML5 enabled web pages to store data locally within the user’s browser with use of Web Storage. 在早期版本中,开发人员只能使用cookie. 新的Web存储更安全、更快. Unlike cookies, 来自Web Storage的数据并不包含在每个服务器请求中, 它只在被要求时使用. 数据以名称和值对的形式存储. 与cookie相比的其他好处是存储限制. Web存储空间最大可达5MB,其内容永远不会传输到服务器. 一个网页只能访问它自己存储的数据,因为它受到每个源的限制.
值得注意的是,虽然Web Storage比cookie更安全, 有些事情要记住. 它比使用cookie要好,因为内容不会通过网络传输, 但是本地存储没有加密. 因此,像安全令牌这样的敏感数据永远不应该存储在那里. Web应用程序不应该依赖于存储在Web Storage中的数据, 由于恶意用户可以很容易地修改其中的数据 localStorage
and sessionStorage
values at any time.
Speaking of sessionStorage
, the difference between localStorage
and sessionStorage
涉及存储的生命周期和范围. Data stored through localStorage
is permanent: it does not expire and remains stored on the user’s computer until a web application deletes it, 或者用户要求浏览器删除它. On the other hand, sessionStorage
具有与浏览器选项卡相同的生存期,其中存储它的脚本正在运行. 当选项卡关闭时,存储的任何数据都将通过 sessionStorage
is deleted.
不像原点极限 localStorage
, sessionStorage
is window scoped. For example, 如果用户有两个浏览器选项卡显示来自同一来源的文档, 这两个标签是分开的 sessionStorage
data. The scripts running in one tab cannot read or overwrite the data written by scripts in the other tab, even if both tabs are visiting exactly the same page and are running exactly the same scripts.
问:解释一下什么是网络工作者.
JavaScript is a single-threaded language, so multiple scripts cannot run at the same time. Web workers is a new API for running scripts in the browser background independently of other scripts, in its own thread. 其结果是,网页不需要等待网络工作者完成, 这样可以提高性能和响应能力, because users can interact with the page while the web worker is still running in the background. Web workers are, for example, perfect for long-running scripts that do heavy computation.
Wrap Up
We just scratched the surface of the knowledge needed to be a dedicated HTML5 developer full-time or part-time. 找到真正的HTML5大师是一个挑战. We hope you find the questions presented in this post to be a useful foundation in your quest for the elite few among HTML5 developers. 寻找这样的候选人是非常值得的, as they will undoubtedly have a significant positive impact on your team’s productivity and results.