HTML5与未来的网页设计(英文教程)


有些人接受了 ,有些人丢弃它太遥远的未来,有些人放弃了滥用的朋友有利于旧火焰在筹备。任何一方的辩论你的,你最有可能听到的所有的博客聊天围绕“新炎热” ,也就是HTML5 。它无处不在,它的未来,和你想知道的一切,您可以收到的旧新闻。

像jQuery插件,格式技术,并设计趋势的变化非常迅速地在整个网络社会。并在大多数情况下我们都接受的是,有些事情我们知道今天可以过时的明天,但是这是我们行业的性质。

在寻找一些稳定,我们通常可以转向代码本身,因为它往往会保持不变了很长一段时间(相对而言) 。因此,当一些惊喜和改变我们的代码,这是一个大问题,以及将有一些成长的痛苦,我们必须通过。幸运的是,据传,我们已经少了一个变化的担心 。

在这篇文章中,我希望能够给你一些提示和洞察HTML5 ,以帮助减轻疼痛的必然附带过渡到一种略有不同的语法。

 

Welcome to HTML5.

What are the basics?

The DOCTYPE

When I first started researching HTML5 a few months ago, one of the main things I struggled to find was the doctype. A simple thing, you’d think it would be everywhere, but after much frustration, I finally found it buried within w3.org and here it is:

<!DOCTYPE html>

我也好奇,为什么他们选择“的HTML ” ,而不是“ html5 ” ,这似乎合乎逻辑的方式来告诉浏览器,目前的文件写于HTML5 ,并提供了一个良好的范本,以供未来。但我发现, <!DOCTYPE html5>触发夸克斯模式中的IE6 ,和向后兼容时,考虑到<!DOCTYPE html>是一个相当不错的选择(在我看来) 。

总之,我真的很喜欢这个新的文档,它的小的,有意义的,也许我们会实际上能够记住这个时刻的心,而不是将其粘贴在网站上。

 

New Elements you should know

At first glance, with HTML5, the new elements immediately jump out and command attention. The W3C really listened to the community and planned for the future when architecting the abundance of new elements available. We have everything from basic structural elements like <header> and <footer> to others like <canvas> and <audio> that tap into, what seems to be, a very powerful API which allows us the freedom to create more user-friendly applications while further distancing ourselves from reliance on Flash for saving data and intense animation.

The new structural elements
  • <header>
    The header element contains introductory information to a section or page. This can involve anything from our normal documents headers (branding information) to an entire table of contents.
  • <nav>
    The nav element is reserved for a section of a document that contains links to other pages or links to sections of the same page. Not all link groups need to be contained within the <nav> element, just primary navigation.
  • <section>
    The section element represents a generic document or application section. It acts much the same way a <div> does by separating off a portion of the document.
  • <article>
    The article element represents a portion of a page which can stand alone such as: a blog post, a forum entry, user submitted comments or any independent item of content.
  • <aside>
    Aside, represents content related to the main area of the document. This is usually expressed in sidebars that contain elements like related posts, tag clouds, etc. They can also be used for pull quotes.
  • <footer>
    The footer element is for marking up the footer of, not only the current page, but each section contained in the page. So, it’s very likely that you’ll be using the <footer> element multiple times within one page.

When you take a look at these new elements, it looks like they’re just replacing our common DIV IDs; and in a way, it’s true. But, the diagram below shows that elements like <header> and <footer> can be used more than once on a single page where they behave more like classes and normal HTML elements that you can use over and over again to retain a semantic structure.

Elements like <header> and <footer> are not just meant to represent the top and bottom of the current document, but they also represent the <header> and <footer> of each document section, much the way we use <thead> and <tfoot> in data tables.

The benefits of using these structural elements is mainly due to the fact that they are extremely well defined and provide a great way to semantically structure your document. However, these elements do need to be used with some careful thought because they can, very easily be overused.

Further Reading on structural HTML5
  • Steve Smith on Structural Tags in HTML5
  • Lachlan Hunt’s Preview of HTML5
  • Elliot Harold on New Elements in HTML5
  • Bruce Lawson’s HTML5 Form Demo

Easing the transition from XHTML

Even though HTML 4.01, XHTML 1.0, & HTML5 are all very similar there are some small syntax differences that can, very easily, slip past anyone and invalidate code. Keeping this in mind, HTML5 has some built-in “slack” to make the transition a little easier.

For example, when marking up a form in HTML5, this is the proper syntax for an input text element:

<input type="text" id="name">

But this is also accepted as valid code in an attempt to ease the pain for avid XHTML coders (like myself) who are used to self-closing elements:

<input type="text" id="name"/>

The same rules apply to <meta> and other self closing elements. Legacy elements like <b> and <i> were also left in to help those coming over from HTML 4.01.l

What are the benefits?

With any new technology there has to be benefit; why else would you use it? If your old code works just as well and efficient as the new code there’s no reason to upgrade. No reason at all, trust me, I checked.

Luckily HTML5 is packed with cool new features, code slimming techniques and a lot of stuff I would call very large benefits. Most of which circle around the new APIs and the DOM tree.

有些人接受了 ,有些人丢弃它太遥远的未来,有些人放弃了滥用的朋友有利于旧火焰在筹备。任何一方的辩论你的,你最有可能听到的所有的博客聊天围绕“新炎热” ,也就是HTML5 。它无处不在,它的未来,和你想知道的一切,您可以收到的旧新闻。

像jQuery插件,格式技术,并设计趋势的变化非常迅速地在整个网络社会。并在大多数情况下我们都接受的是,有些事情我们知道今天可以过时的明天,但是这是我们行业的性质。

在寻找一些稳定,我们通常可以转向代码本身,因为它往往会保持不变了很长一段时间(相对而言) 。因此,当一些惊喜和改变我们的代码,这是一个大问题,以及将有一些成长的痛苦,我们必须通过。幸运的是,据传,我们已经少了一个变化的担心 。

在这篇文章中,我希望能够给你一些提示和洞察HTML5 ,以帮助减轻疼痛的必然附带过渡到一种略有不同的语法。

 

Welcome to HTML5.

What are the basics?

The DOCTYPE

When I first started researching HTML5 a few months ago, one of the main things I struggled to find was the doctype. A simple thing, you’d think it would be everywhere, but after much frustration, I finally found it buried within w3.org and here it is:

<!DOCTYPE html>

我也好奇,为什么他们选择“的HTML ” ,而不是“ html5 ” ,这似乎合乎逻辑的方式来告诉浏览器,目前的文件写于HTML5 ,并提供了一个良好的范本,以供未来。但我发现, <!DOCTYPE html5>触发夸克斯模式中的IE6 ,和向后兼容时,考虑到<!DOCTYPE html>是一个相当不错的选择(在我看来) 。

总之,我真的很喜欢这个新的文档,它的小的,有意义的,也许我们会实际上能够记住这个时刻的心,而不是将其粘贴在网站上。

 

New Elements you should know

At first glance, with HTML5, the new elements immediately jump out and command attention. The W3C really listened to the community and planned for the future when architecting the abundance of new elements available. We have everything from basic structural elements like <header> and <footer> to others like <canvas> and <audio> that tap into, what seems to be, a very powerful API which allows us the freedom to create more user-friendly applications while further distancing ourselves from reliance on Flash for saving data and intense animation.

The new structural elements
  • <header>
    The header element contains introductory information to a section or page. This can involve anything from our normal documents headers (branding information) to an entire table of contents.
  • <nav>
    The nav element is reserved for a section of a document that contains links to other pages or links to sections of the same page. Not all link groups need to be contained within the <nav> element, just primary navigation.
  • <section>
    The section element represents a generic document or application section. It acts much the same way a <div> does by separating off a portion of the document.
  • <article>
    The article element represents a portion of a page which can stand alone such as: a blog post, a forum entry, user submitted comments or any independent item of content.
  • <aside>
    Aside, represents content related to the main area of the document. This is usually expressed in sidebars that contain elements like related posts, tag clouds, etc. They can also be used for pull quotes.
  • <footer>
    The footer element is for marking up the footer of, not only the current page, but each section contained in the page. So, it’s very likely that you’ll be using the <footer> element multiple times within one page.

When you take a look at these new elements, it looks like they’re just replacing our common DIV IDs; and in a way, it’s true. But, the diagram below shows that elements like <header> and <footer> can be used more than once on a single page where they behave more like classes and normal HTML elements that you can use over and over again to retain a semantic structure.

Elements like <header> and <footer> are not just meant to represent the top and bottom of the current document, but they also represent the <header> and <footer> of each document section, much the way we use <thead> and <tfoot> in data tables.

The benefits of using these structural elements is mainly due to the fact that they are extremely well defined and provide a great way to semantically structure your document. However, these elements do need to be used with some careful thought because they can, very easily be overused.

Further Reading on structural HTML5
  • Steve Smith on Structural Tags in HTML5
  • Lachlan Hunt’s Preview of HTML5
  • Elliot Harold on New Elements in HTML5
  • Bruce Lawson’s HTML5 Form Demo

Easing the transition from XHTML

Even though HTML 4.01, XHTML 1.0, & HTML5 are all very similar there are some small syntax differences that can, very easily, slip past anyone and invalidate code. Keeping this in mind, HTML5 has some built-in “slack” to make the transition a little easier.

For example, when marking up a form in HTML5, this is the proper syntax for an input text element:

<input type="text" id="name">

But this is also accepted as valid code in an attempt to ease the pain for avid XHTML coders (like myself) who are used to self-closing elements:

<input type="text" id="name"/>

The same rules apply to <meta> and other self closing elements. Legacy elements like <b> and <i> were also left in to help those coming over from HTML 4.01.l

What are the benefits?

With any new technology there has to be benefit; why else would you use it? If your old code works just as well and efficient as the new code there’s no reason to upgrade. No reason at all, trust me, I checked.

Luckily HTML5 is packed with cool new features, code slimming techniques and a lot of stuff I would call very large benefits. Most of which circle around the new APIs and the DOM tree.


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3