【原】向html5进军(7)——html5学习手册 1-10页

书名:HTML5学习手册 (HTML5 cookbook)

作者: Christopher Schmitt 和Kyle Simpson

出版: O'Reilly Media,2011年10月

概译:yukon12345

 

前言:这本书有200多页。相对于前一本书,这本书作者明显话要简洁很多。。。。但也非常详细。当然我会尽量做到简洁又全面。。


面向的读者

这本书适合所有感兴趣的人学。。但对技术悟性和专业知识也是必要的。

例子代码使用须知和一些有用的联系方式

你可以在自己的程序或文档里使用本书的代码,一般无需联系我们获得允许。除非你要把这些代码刻录在CD-ROM上出售。回答问题时引用这些代码不需要授权。但如果在你的书或产品文档里包含大量例子代码,需要授权。

我们期望,但并不要求你进行原作品的署名。一个标准的原作署名声明包括标题,作者,出版商,ISBN。比如:

 “HTML5 Cookbook by Christopher Schmitt andKyle Simpson (O’Reilly). Copyright 2011 Christopher Schmitt and Kyle Simpson,978-1-449-39679-4.”

如果你对你使用的情形是否应该被授权有疑问,请联系

permissions@oreilly.com.

我们有个网页刊登了本书的勘误表,例子,以及其他的相关信息:

http://www.oreilly.com/catalog/9781449396794

如果想提问或评论这本书,请发邮件:

bookquestions@oreilly.com

如果对我们出版的书,课程,会议新闻等感兴趣,请访问:

 http://www.oreilly.com.

我们的Facebook:http://facebook.com/oreilly

我们的推特Twitter:http://twitter.com/oreillymedia

我们在 YouTube: http://www.youtube.com/oreillymedia

(这些悲剧的都被墙了。不过对于上网老鸟来说应该不成问题)

还有一个预览书的网站,里面有7500本各类书籍,不过需要付费购买。

 http://my.safaribooksonline.com.

 

第一章  基础语义和语法

 

1.声明DOCTYPE(文档类型)

在你页面的最开头声明文档类型

<!DOCTYPE html>

<html>

    <head>

        <title>HTML5, for Fun &amp;Profit</title>

    </head>

    <body>

    </body>

</html>

注意:DOCTYPE并不是一定要大写,它大小写不敏感。

讨论

DOCTYPE文档类型声明告诉浏览器HTML的版本。HTML5文档相对于老版本简化了很多。并且向后兼容,使得版本迁移非常容易。

如果你有一个HTML4.0的网站,这样改变声明是变为一个有效的HTML5网站的第一步。

另外,所有浏览器都能将这种缩短的DOCTYPE识别呈现为严格标准(strictstandard)模式(就算不支持html5)

注意:有些元素在HTML5里已经被移除。比如<center>标签。建议你就算不写HTML5也不要在HTML4里使用。

参考

可以查看http://www.w3.org/TR/html5-diff/#doctype 来了解非常详细的HTML4和HTML5之间的差异。W3C组织正在为此起写一份草案。

 

2.声明字符集

文档head标签里,加入一个meta声明:

<metacharset="UTF-8" />

讨论交流

字符编码告诉浏览器呈现的字符是哪种编码方式。浏览器首先从网页服务器获取HTTP头来决定字符编码(例如Content-Type 头),并且这个声明优先级要高于你在html文档里的设置。

如果在http头和文档都没有申明,浏览器会根据编码特性估计一个合适的字符编码方式,但有可能会判断错误造成乱码。

这不但会造成显示上的问题,还会带来一个安全风险。

注意:几年前,谷歌爆出了一个与字符编码有很大关系的跨站脚本漏洞:http://shiflett.org/blog/2005/dec/googles-xss-vulnerability

你也可以看这里的翻译 http://blog.csdn.net/yukon12345/article/details/6883016

另外,相对于早期HTML声明字符的繁琐,HTML5需要声明的更少。并且更利于兼容以前版本。

3.特殊的字符

在这一段,我们将字符编码定义为utf-8。因为它支持绝大多数字符。但有时候,你仍然需要引入一个该编码方式不能表示的字符。

注意:这里有各种数字,字母的表示法。http://www.digitalmediaminute.com/reference/entity/

你可以使用数字字符引用法(Numeric Character Reference  NCR)或者是命名字符集(named entity)让浏览器来显示一些特殊字符。

比如NCR的方式

&#169;

或者命名字符集

&copy;

参见 Mark Pilgrim关于字符编码的文章 《深入HTML5》

http://diveintohtml5.org/semantics.html#encoding

 

4.声明语言

在html标签里使用:

<htmllang="en">

讨论

浏览器,屏幕阅读器,和其他一些程序用lang属性来判断解读内容。

但语言声明在HTML5和历代HTML里并不是必须的,只是为了良好的可用性和辅助性。

参考

Mark Pilgrim的辅助性研究Dive Into Accessibility 讨论了文档语言。

http://diveintoaccessibility.org/day_7_identifying_your_language.html

 

5.最优的脚本和链接

引用script和link声明:

<linkrel="stylesheet" href="styles.css" />

<scriptsrc="scripts.js"></script>

讨论

HTML5只需要很少的信息。在以前的版本都需要添加type属性。但如果你在上面两个链接漏掉了,大多数浏览器会推测正确的值。

由于现在web只有一种标准的脚本语言和样式表,因此HTML5设定了type属性可选。


6.HTML5文档结构新增元素

<header>

用来容纳一页或一章的标题部分。也可以放如附加信息如logo标志,导航等。

<footer>

容纳页/章的信息,比如作者,链接,版权声明

<nav>

一般容纳导航链接,另外虽然没有规定,但通常被header容纳。

<aside>

包含一些与正文内容有关,又独立的信息。比如侧边栏,醒目引文pull quotes(yukon12345:国外网站很流行,国内貌似百度首页个人版里也有类似。具体是用大引号引起一段文字,放在文章某一位置。杂志上开头看的比较多。)等等。

<section>

应用最广泛的一种新的结构元素。容纳一些主题分组类似或相关的内容。

<article>

用于独立于页面的内容。比如一篇博客的文章入口(类似于文章标题加一些内容简介组成的一条链接。点进后可以看全文)。如下图

 

一篇简单的博客,通常由标题,导航栏,侧边栏,底部栏目等。

HTML5 代码如下:

 

     <header>

          <h1><abbrtitle="Hypertext Markup Language">HTML</abbr>5, for Fun&amp; Profit</h1>

          <nav>

              <ul>

                   <li><ahref="/Archive/">Archive</a></li>

                   <li><ahref="/About/">About</a></li>

              </ul>

          </nav>

     </header>

     <article>

         <h2><code>nav</code> Isn't for <em>All</em>Links</h2>

<p>Though the<code>nav</code> element often contains links, that doesn't meanthat <em>all</em> link</p>

     </article>

     <article>

          <h2>You've Got the<code>DOCTYPE</code>. Now What?</h2>

<p>HTML5 isn't anall or nothing proposition. You can pick and choose what works best for you. Soon</p>

     </articl>

     <aside>

          <h2>HTML5 Elsewhere</h2>

          <p>Feed your HTML5 fix withresources from our partners:</p>

          <ul>

              <li><ahref="http://lovinghtml5.com">Loving HTML5</a></li>

              <li><ahref="http://semanticsally.com">SemanticSally</a></li>

          </ul>

     </aside>

     <footer>

<p>Copyright&copy; 2011 <a href="http://html5funprofit.com">HTM5, forFun &amp; Profit</a>. All right Received</p>

     </footer>

配合CSS,这些标签会在浏览器里呈现如图1-1的效果

图1-1

 

• Nav

是HTML5里的新元元素,用来说明超链的实际作用(语义)。

7.结构性元素

使用这些结构性元素会让你的标签更符合语义,同时还指明了文档的主要内容所在处。

这些元素对使用屏幕阅读器或用键盘上网的特殊人群有很重要的作用。因为可以方便的切换到不同的区域(yukon12345:跟用tab键切换输入框焦点类似)。

以前,我们要实现这样功能的时候通常需要设置快捷键或“跳跃链接“,但在HTML5建立了一些正式可用的标记元素。

不过到本书写完时,并没有浏览器或辅助技术支持这些结构元素的导航作用。

实际上,无障碍富网络应用规范( theWeb Accessibility Initiative’s Accessible Rich Internet Applications (WAI-ARIA)已经指明了如何使用HTML5的AIRA标记role (见第二章)

什么时候使用结构性元素

关注你的内容,为每个元素考虑语义。

例如,一些网站会有一个“头“栏目,比如logo,公司名,宣传语,这里用header标签是个不错的主意。一章正文的导航和标题也适合用header。

同理,大多数页面的底部会有作者,版权,相关信息,文章节选,题外话什么的,可以用footer来容纳。

如果你有一组链接,有些为了导航,有些是外部链接时,可使用nav。但注意网站主导航栏或者搜索链接,友情链接并不适合使用nav。

何时使用div元素

上面一个博客标签例子中,你会发现新的标签取代了很多无语义的div,但div仍然是HTML5重要一员。最好注意使用具有语义的标签而不是大量使用div。比如你想设置文章的一段,那么使用具有语义的p标签最好不过,虽然div也可以提供同样的块级样式。

设置结构元素的样式

所有浏览器都能显示这些新增元素,但一些老浏览器并不认识它们,只会简单的把这些结构元素呈现为为行内(inline)元素,并导致一些样式上的问题。不过修正这个问题也很简单,只要使用css

header, footer,nav, article, aside, section {

    display: block;

}

就可以告诉浏览器这些是块级元素(block-level),或者设定这些新元素的其他样式了。

不过在IE9以前的版本,为了能让浏览器认识并设置它们的样式,你还必须使用一段javascript脚本来添加这些元素。第二章会更详细的介绍javascript相关。

<script>

    document.createElement('header');

    document.createElement('footer');

    document.createElement('nav');

    document.createElement('article');

    document.createElement('aside');

    document.createElement('section');

</script>

参考

Script Junkie的文章 使用HTML5新语义标记 "Using HTML5's New Semantic TagsToday"

http://msdn.microsoft.com/en-us/scriptjunkie/gg454786

8.article或section到底该选哪个

由于两者作用相近,你可能会疑惑到底该选哪一个

<article>是一类特殊的<section>。它是一种相对比较独立的内容元素。

适合用在:

视频和其文字记录

网络新闻稿

博客评论

注意:我们经常可以看到一篇文章的URL里包含了这篇文章的标题(yukon12345:wordpress就是使用这种格式。还有wiki百科等)这时,应该用<article>来容纳这篇文章内容。

还有使用article来容纳一个博客的文章列表:

<article>

         <h2><code>nav</code>Isn't for <em>All</em> Links</h2>

<p>Thoughthe <code>nav</code> element often contains links, that doesn'tmean that <em>all</em> link</p>

</article>

<article>

          <h2>You've Got the<code>DOCTYPE</code>. Now What?</h2>

<p>HTML5isn't an all or nothing proposition. You can pick and choose what works bestfor you. So on</p>

     </article>

<section>

前面说过,section是一种较通用的结构元素,用于把一些相关内容分组容纳。相比article,更侧重于分组。并不强调独立性。

不过注意它并不是像div那样没有语义的容器。

比如上面的例子可以被包含在section中:

< section>

<article>

         <h2><code>nav</code>Isn't for <em>All</em> Links</h2>

<p>Thoughthe <code>nav</code> element often contains links, that doesn'tmean that <em>all</em> link</p>

</article>

<article>

          <h2>You've Got the<code>DOCTYPE</code>. Now What?</h2>

<p> HTML5isn't an all or nothing proposition. You can pick and choose what works bestfor you. So on</p>

     </article>

</section>

但是w3c的细则还有进一步说明: ( http://www.w3.org/TR/html5/sections.html#the-section-element)

“A general rule is that the section elementis appropriate only if the element's contents would be listed explicitly in thedocument's outline.”

“只有在其包含的内容是明确的文档概述时,使用section 才是合理的“

HTML5  section元素容纳的“文档概述“还要有一个h1-h6标签的标题。

因此我们需要为上面的section例子加上标题:(省略了部分)

<section>

    <h1>Most Recent Blog Posts</h1>

    <article>

        <h2> </h2>

<p></p>

<article>

</section>

讨论

Section和article的不同点可能让人迷惑。以下几点可能对你有帮助:

  •  不要把section用作样式设置的容器。应当使用div或span。
  •   如果header,footer,aside,article更符合条件,不要使用section。
  •   除非内容分块有设定标题,否则不要用section包含它。

参考 HTML5 doctor 网站有一个方便的流程图帮助你选择正确的HTML5结构元素http://html5doctor.com/happy-1st-birthday-us/#flowchart

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭