2012年1月9日 星期一

HTML5 and CSS3: Develop with Tomorrow's Standards Today


人民幣:RMB 39 元



You should be looking at ways to lay out your interfaces without frames, using regular CSS or some JavaScript.


If you use target on your links, like this:

<a href="http://www.google.com" target="_blank">


you’ll want to look at using JavaScript instead, because target is deprecated.

Bear: 但實際上好像沒被廢棄,連W3C SPEC上都還看的到


Bear: <title>, <head>, <header>, <h1> 要搞清楚作用和差別

我們可以將section 標籤視為對文檔邏輯部份的描述,而將article標籤視為對具體內容的描述。

Think of a section as a logical part of a document. Think of an article as actual content, such as a magazine article, blog post, or news item.

Bear: 作者這句話非常的有用,還對section 及 article這二個用途搞不清楚的可以參考。


Our blog has a sidebar on the right side that contains links to the archives for the blog. If you’re thinking that we could use the aside tag to define the sidebar of our blog, you’d be wrong. You could do it that way, but it goes against the spirit of the specification. The aside is designed to show content related to an article. It’s a good place to show related links, a glossary, or a pullout quote.


We use a jQuery selector to grab the element with the class of popup, and then we add an observer to each element’s click event. The code we pass to the click method will be executed when someone clicks the link. The preventDefault method prevents the default click event behavior. In this case, it prevents the browser from following the link and displaying a new page.


You can also use them to display dates and times in a user’s time zone while still caching the page. Simply put the date on the HTML page as UTC, and convert it to the user’s local time on the client side. These attributes allow you to embed real, usable data in your pages, and you can expect to see more and more frameworks and libraries taking advantage of them. I’m sure you’ll find lots of great uses for them in your own work.

label標籤的for屬性用於引用與其相關聯的表單元素的id。這種用法有助於屏幕閱讀器識別頁面上的表單域。有序列表提供了一種良好的展現形式來列出表單域,從而避開了複雜的表格結構或 div 結構。

Notice that we are marking this form up with labels wrapped in an ordered list. Labels are essential when creating accessible forms. The for attribute of the label references the id of its associated form element. This helps screen readers identify fields on a page. The ordered list provides a good way of listing the fields without resorting to complex table or div structures. This also gives you a way to mark up the order in which you’d like people to fill out the fields.

HTML5引入了 autocomplete 屬性,用以通知瀏覽器不要為當前表單域自動填充數據。

You may have noticed we’ve added the autocomplete attribute to the password fields on this form. HTML5 introduces an autocomplete attribute that tells web browsers that they should not attempt to automatically fill in data for the field. Some browsers remember data that users have previously typed in, and in some cases, we want to tell the browsers that we’d rather not let users do that.


Styling elements is a whole lot easier with CSS3, especially if we don’t have the ability to modify the HTML we’re targeting. When you’re styling interfaces, use the semantic hierarchy and these new selectors before you add additional markup. You will find your code much easier to maintain.


CSS can style existing elements, but it can also inject content into a document. There are a few cases where content generation with CSS makes sense, and the most obvious one is appending the URL of a hyperlink next to the link’s text when a user prints the page. When you’re looking at a document on the screen, you can just hover over a link and see where it goes by looking at the status bar. However, when you look at a printout of a page, you have absolutely no idea where those links go.

Bear: 利用CSS改變最終輸出,但原始HTML檔未被改變。想像一下如果你不能動source code,但卻要改上面的東西時的狀況。