Các phần tử mới trong HTML 5 pdf

Tất cả những phần tử mới này có thể học dễ dàng bởi sự tương đồng đơn giản với các phần tử mà nhà thiết kế đã hiểu.. Bởi vì trình duyệt sẽ không ghi nhận hoặc làm bất cứ điều gì với các

Trang 1

Các phần tử mới trong HTML 5

Sự phát triển của HTML đã dừng lại vào năm 1999 với HTML 4 W3C đã tập trung nỗ lực của mình vào việc thay đổi cú pháp cơ bản của HTML từ Standard Generalized Markup Language (SGML - Ngôn ngữ đánh dấu tổng quát hóa tiêu chuẩn) sang XML, cũng như các ngôn ngữ đánh dấu hoàn toàn mới như Scalable Vector Graphics (SVG - Các đồ họa vector co giãn được), XForms và MathML Các nhà cung cấp trình duyệt đã tập trung vào các tính năng trình duyệt như các ô tab và các trình đọc RSS Các nhà thiết kế web đã bắt đầu tìm hiểu ngôn ngữ CSS và JavaScript™ để xây dựng các ứng dụng riêng của họ trên đỉnh của các khung công tác hiện có bằng cách sử dụng Ajax (JavaScript không đồng bộ + XML) Nhưng chính HTML hầu như đã không phát triển trong những năm tiếp theo

Các từ viết tắt thông dụng

 CSS: Cascading Style Sheets (Các bản định kiểu xếp chồng)

 HTML: Hypertext Markup Language (Ngôn ngữ đánh dấu siêu văn bản)

 W3C: World Wide Web Consortium (Hiệp hội Mạng toàn cầu)

 XML: Extensible Markup Language (Ngôn ngữ đánh dấu mở rộng)

Gần đây, HTML dường như đang hồi sinh Ba nhà cung cấp trình duyệt chính—Apple, Opera và Mozilla Foundation—đã hợp tác tạo nên nhóm WhatWG (Web Hypertext Application

Technology Working Group – Nhóm làm việc công nghệ ứng dụng siêu văn bản Web) để phát triển một phiên bản cập nhật và nâng cấp của HTML cổ điển Gần đây hơn, W3C đã lưu ý đến những phát triển này và đã bắt đầu những nỗ lực HTML thế hệ mới riêng của mình với những thành viên tương tự Cuối cùng, nhiều khả năng là hai nỗ lực sẽ được hợp nhất Mặc dù nhiều chi tiết vẫn còn được tranh luận, nhưng các phác thảo về phiên bản tiếp theo của HTML đang trở nên rõ ràng hơn

Phiên bản mới HTML này—thường được gọi là HTML 5, mặc dù nó cũng mang tên Web

Applications 1.0 (Các ứng dụng Web 1.0)—ngay lập tức sẽ phải được ghi nhận với nhà thiết kế Web Không có các namespace hoặc các lược đồ schema nào Các phần tử không cần bắt buộc phải được đóng lại Trình duyệt sẽ bỏ qua các lỗi Một p vẫn là một p, và một table (bảng) vẫn

sẽ là một table

Tuy vậy, các nhà thiết kế Web có thể sẽ gặp phải một số phần tử mới và khó hiểu Các phần tử

cũ như div vẫn còn, nhưng bây giờ HTML còn có thêm section, header, footer và nav nữa

em, code và strong cũng vẫn còn, nhưng cũng có thêm meter, time và m img và embed vẫn còn

và cũng có thêm cả video và audio Tuy nhiên, nếu bạn xem xét kỹ hơn thì sẽ phát hiện rằng những phần tử này không khác lắm Nhiều phần tử trong đó có thể là những thứ mà các nhà thiết

kế cần từ năm 1999 nhưng không có Tất cả những phần tử mới này có thể học dễ dàng bởi sự tương đồng đơn giản với các phần tử mà nhà thiết kế đã hiểu Trong thực tế, chúng dễ học hơn nhiều so với Ajax hoặc CSS

Cuối cùng, nếu người dùng sử dụng máy tính xách tay có tốc độ 300MHz chạy Windows 98 thì

họ có thể ngạc nhiên khi nhận ra rằng các trang mới hiển thị tốt trong Netscape 4 và Windows®

Trang 2

Internet Explorer® 5 Bởi vì trình duyệt sẽ không ghi nhận hoặc làm bất cứ điều gì với các phần

tử mới, nhưng trang vẫn hiển thị và tất cả nội dung vẫn ở đó

Đó không phải là sự trùng hợp ngẫu nhiên HTML 5 được thiết kế để có thể tương thích với các trình duyệt không hỗ trợ nó Lý do rất đơn giản: Chúng ta tất cả đều là những người ở hang ra Hiện nay các trình duyệt có các ô tab, CSS và XMLHttpRequest, nhưng các trình biểu diễn hình ảnh (renderer) của HTML của chúng đang bị kẹt lại ở năm 1999 Web không thể tiến lên phía trước mà không tính đến cơ sở đã cài đặt HTML 5 hiểu điều này Nó cung cấp các lợi ích thực

sự cho tác giả trang web hôm nay đồng thời hứa hẹn nhiều hơn cho các độc giả trang web ngày mai khi các trình duyệt đang dần dần được nâng cấp Với ý nghĩ đó, chúng ta hãy xem xét những

gì HTML 5 mang đến cho bạn

Cấu trúc

Ngay cả các trang HTML đúng định dạng cũng khó xử lý hơn so với mong đợi vì thiếu cấu trúc Bạn phải tìm ra nơi nào là các ngắt đoạn bằng cách phân tích các mức header Các thanh Sidebar, footer, header, các trình đơn điều hướng, các phần nội dung chính và những đoạn riêng lẻ được đánh dấu bằng phần tử div chứa mọi thứ HTML 5 thêm các phần tử mới để xác định rõ ràng từng cái trong số các cấu kiện chung ấy:

 section: Một phần hoặc chương trong một cuốn sách, một phần trong một chương hoặc

về cơ bản là bất cứ thứ gì có tựa đề riêng của nó trong HTML 4

 header: Đầu trang được hiển thị trên trang; không giống như phần tử head (phần đầu)

 footer: Chân trang, nơi hiển thị chữ nhỏ; chữ ký trong một bức thư điện tử

 nav: Một bộ sưu tập các liên kết đến các trang khác

 article: Một mục độc lập trong một blog, tạp chí, bản tóm tắt và v.v

Ví dụ, hãy xem xét một trang đầu blog điển hình với một header ở đỉnh trang, một footer ở dưới đáy, một số mục, một phần điều hướng và thanh sidebar, như thể hiện trong Liệt kê 1

Liệt kê 1 Một trang blog điển hình hiện nay

<html>

<head>

<title>Mokka mit Schlag </title>

</head>

<body>

<h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1>

</div>

<h2><a href=

"/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/"> Spring Comes (and Goes) in Sussex County</a></h2>

Trang 3

<p>Yesterday I joined the Brooklyn Bird Club for our

annual trip to Western New Jersey, specifically Hyper

Humus, a relatively recently discovered hot spot It

started out as a nice winter morning when we arrived

at the site at 7:30 A.M., progressed to Spring around

10:00 A.M., and reached early summer by 10:15 </p>

</div>

<h2><a href=

"/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/"> But does it count for your life list?</a></h2>

<p>Seems you can now go <a

href="http://www.wired.com/science/discoveries/news/

2007/04/cone_sf">bird watching via the Internet</a> I

haven't been able to test it out yet (20 user

limit apparently) but this is certainly cool

Personally, I can't imagine it replacing

actually being out in the field by any small amount

On the other hand, I've always found it quite

sad to meet senior birders who are no longer able to

hold binoculars steady or get to the park I can

imagine this might be of some interest to them At

least one elderly birder did a big year on TV, after

he could no longer get out so much This certainly

tops that.</p>

</div>

<a href="/blog/page/2/">« Previous Entries</a>

</div>

</div>

<ul>

<li><a href="/blog/comment-policy/">Comment Policy</a></li>

</ul></li>

<li><h2>Archives</h2>

<ul>

<li><a href="/blog/2007/04/"'>April 2007</a></li>

<li><a href="/blog/2007/03/"'>March 2007</a></li>

<li><a href="/blog/2007/02/"'>February 2007</a></li>

<li><a href="/blog/2007/01/"'>January 2007</a></li>

Trang 4

</ul>

</li>

</ul>

</div>

</div>

</body>

</html>

Ngay cả việc thụt đầu dòng thích hợp, đó là một đống khá lộn xộn của các div lồng nhau Trong HTML 5, bạn có thể thay thế chúng bằng các phần tử ngữ nghĩa trực tiếp hơn, như trong Liệt kê

2

Liệt kê 2 Một trang blog điển hình theo HTML 5

<html>

<head>

<title>Mokka mit Schlag </title>

</head>

<body>

<h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1>

</header>

<h2><a href=

"/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/"> Spring Comes (and Goes) in Sussex County</a></h2>

<p>Yesterday I joined the Brooklyn Bird Club for our

annual trip to Western New Jersey, specifically Hyper

Humus, a relatively recently discovered hot spot It

started out as a nice winter morning when we arrived at

the site at 7:30 A.M., progressed to Spring around 10:00

A.M., and reached early summer by 10:15 </p>

</article>

<h2><a href=

"/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/"> But does it count for your life list?</a></h2>

<p>Seems you can now go <a

href="http://www.wired.com/science/discoveries/news/

2007/04/cone_sf">bird watching via the Internet</a> I

haven't been able to test it out yet (20 user

limit apparently) but this is certainly cool

Personally, I can't imagine it replacing

actually being out in the field by any small amount

Trang 5

On the other hand, I've always found it quite

sad to meet senior birders who are no longer able to

hold binoculars steady or get to the park I can

imagine this might be of some interest to them At

least one elderly birder did a big year on TV, after

he could no longer get out so much This certainly

tops that.</p>

</article>

<nav>

<a href="/blog/page/2/">« Previous Entries</a>

</nav>

</section>

<nav>

<ul>

<ul>

<li><a href="/blog/comment-policy/">Comment Policy</a></li>

</ul></li>

<li><h2>Archives</h2>

<ul>

<li><a href="/blog/2007/04/"'>April 2007</a></li>

<li><a href="/blog/2007/03/"'>March 2007</a></li>

<li><a href="/blog/2007/02/"'>February 2007</a></li>

<li><a href="/blog/2007/01/"'>January 2007</a></li>

</ul>

</li>

</ul>

</nav>

</footer>

</body>

</html>

Không cần thiết có các div nào nữa Thay vì sử dụng các thuộc tính class đặc trưng cho trang, ý nghĩa của các phần khác nhau có thể được suy ra từ các tên tiêu chuẩn Điều này đặc biệt quan trọng đối với âm thanh, điện thoại di động và các trình duyệt không chuẩn khác

Về đầu trang

Các phần tử ngữ nghĩa khối

Cũng như các phần tử cấu trúc, HTML 5 thêm một số phần tử mức-khối thuần ngữ nghĩa:

 aside

 figure

 dialog

Trang 6

Tôi sử dụng hai phần tử đầu tiên suốt trong các bài viết như bài này và trong các cuốn sách của tôi Phần tử thứ ba, bản thân tôi không sử dụng nhiều lắm, nhưng nó phổ biến trong nhiều văn bản viết

Phần tử aside

Phần tử aside mô tả một lưu ý, một lời khuyên, một thanh bên, một nội dung trích dẫn, một nhận xét trong ngoặc đơn hoặc một cái gì đó chỉ ở bên ngoài luồng chính của câu chuyện Ví dụ, trong các bài viết trên developerWorks, bạn thường tìm thấy các thanh bên được mã hóa thành các bảng, như thể hiện trong Liệt kê 3

Liệt kê 3 Một thanh bên của HTML 4 trên developerWorks

<td>

<p><a name="xf-value"><span class="smalltitle">.xf-value</span></a></p>

<p>

The <code type="inline">.xf-value</code> selector used here styles the input field value but not its label This is actually inconsistent

with the current CSS3 draft The example really should use the

<code type="inline">::value</code> pseudo-class instead like so:

</p>

<pre class="displaycode">input::value { width: 20em; }

#ccnumber::value { width: 18em }

#zip::value { width: 12em }

#state::value { width: 3em }</pre>

</td></tr></tbody></table><br>

<p>

However, Firefox doesn't yet support this syntax

</p>

</td></tr></table>

Trong HTML 5, bạn có thể viết phần tử này hợp lý hơn nhiều, như thể hiện trong Liệt kê 4

Liệt kê 4 Một thanh bên của HTML 5 trên developerWorks

<aside>

<h3>.xf-value</h3>

<p>

The <code type="inline">.xf-value</code> selector used here styles the input field value but not its label This is actually inconsistent

with the current CSS3 draft The example really should use the

Trang 7

<code type="inline">::value</code> pseudo-class instead like so:

</p>

<pre class="displaycode">input::value { width: 20em; }

#ccnumber::value { width: 18em }

#zip::value { width: 12em }

#state::value { width: 3em }</pre>

<p>

However, Firefox doesn't yet support this syntax

</p>

</aside>

Trình duyệt có thể tìm ra nơi đặt thanh bên, có thể với sự giúp đỡ chút ít từ CSS

Phần tử figure

Phần tử figure mô tả một hình ảnh mức-khối, cùng với một lời chú thích Ví dụ, trong nhiều bài viết trên developerWorks, bạn thấy cách đánh dấu giống như Liệt kê 5; các kết quả được hiển thị trong Hình 1

Liệt kê 5 Một phần tử figure của HTML 4 trên developerWorks

<a name="fig2"><b>Figure 2 Install Mozilla XForms dialog</b></a><br />

<img alt="A Web site is requesting permission to install the following item: Mozilla XForms 0.7 Unsigned"

src="installdialog.jpg" border="0" height="317" hspace="5" vspace="5"

width="331" />

<br />

Trang 8

Hình 1 Hộp thoại cài đặt của XForms Mozilla

Trong HTML 5, bạn có thể viết phần tử này có ngữ nghĩa hơn, như thể hiện trong Liệt kê 6

Liệt kê 6 Một phần tử figure của HTML 5 trên developerWorks

<legend>Figure 2 Install Mozilla XForms dialog</legend>

<img alt="A Web site is requesting permission to install the following item:

Mozilla XForms 0.7 Unsigned"

src="installdialog.jpg" border="0" height="317" hspace="5" vspace="5" width="331" />

</figure>

Quan trọng hơn, các trình duyệt—đặc biệt là các trình đọc màn hình—có thể ghi kèm lời chú thích với hình một cách rõ ràng mà không nhập nhằng

Phần tử figure không chỉ giới hạn cho các bức ảnh Bạn cũng có thể sử dụng nó để chú thích các phần tử audio, video, iframe, object và embed

Phần tử dialog

Phần tử dialog mô tả một cuộc trò chuyện giữa một số người Người ta nạp chồng lên phần tử

dt của HTML 5 để chỉ ra người nói và nạp chồng lên phần tử dd của HTML 5 để chỉ ra tiếng nói Điều này cho phép hiển thị hợp lý ngay cả trong các trình duyệt cũ Liệt kê 7 cho thấy một đoạn đối thoại nổi tiếng từ "Đối thoại liên quan đến Hai hệ thống thế giới chính" của Galileo

Trang 9

Liệt kê 7 Một cuộc đối thoại của Galileo trong HTML 5

<dt>Simplicius </dt>

<dd>According to the straight line AF,

and not according to the curve, such being already excluded

for such a use.</dd>

<dt>Sagredo </dt>

<dd>But I should take neither of them,

seeing that the straight line AF runs obliquely I should

draw a line perpendicular to CD, for this would seem to me

to be the shortest, as well as being unique among the

infinite number of longer and unequal ones which may be

drawn from the point A to every other point of the opposite

line CD </dd>

<dt>Salviati </dt>

<dd><p> Your choice and the reason you

adduce for it seem to me most excellent So now we have it

that the first dimension is determined by a straight line;

the second (namely, breadth) by another straight line, and

not only straight, but at right angles to that which

determines the length Thus we have defined the two

dimensions of a surface; that is, length and breadth </p>

<p> But suppose you had to determine a height—for

example, how high this platform is from the pavement down

below there Seeing that from any point in the platform we

may draw infinite lines, curved or straight, and all of

different lengths, to the infinite points of the pavement

below, which of all these lines would you make use of? </p>

</dd>

</dialog>

Người ta vẫn còn đang tranh cãi về cú pháp chính xác của phần tử này Một số người muốn nhúng văn bản bổ sung không phải đối thoại (chẳng hạn như các hướng dẫn biểu diễn) vào trong phần tử dialog và những người khác không hài lòng với việc nạp chồng lên dt và dd Tuy nhiên, hầu hết mọi người đều đồng ý rằng một số trình bày đối thoại ngữ nghĩa như vậy là một điều tốt, ngay cả khi họ chưa đồng ý về cú pháp chính xác

Về đầu trang

Các phần tử ngữ nghĩa nội dòng

HTML 4 có năm phần tử nội dòng khác nhau để mô tả các biến thể tinh tế khác nhau của mã máy tính: var, code, kbd, tt và samp Tuy nhiên, nó không có cách nào để chỉ ra các đặc tính cơ bản như thời gian, các số hoặc lời mỉa mai HTML 5 nhằm mục đích chỉnh lý lại sự thiếu cân đối giữa các chuyên gia và những người viết bình thường bằng một số phần tử nội dòng mới

Trang 10

Phần tử mark

Phần tử m cho biết văn bản đó được "đánh dấu" bằng cách nào đó nhưng không nhất thiết phải nhấn mạnh Bạn có thể tưởng tượng nó như là các đoạn được làm nổi bật trong một cuốn sách Trường hợp sử dụng kinh điển là các trang được lưu trong bộ nhớ đệm của Google Khi bạn đi theo một liên kết đến các bản sao được lưu trong bộ nhớ đệm, các thuật ngữ tìm kiếm được đánh dấu Ví dụ, nếu bạn tìm kiếm "Egret" (con cò), thì một trang Google được lưu trữ trong bộ nhớ đệm có thể được đánh dấu như sau:

The Great <m>Egret</m> (also known as the

American <m>Egret</m>) is a large white wading bird found worldwide

The Great <m>Egret</m> flies with slow wing beats The

scientific name of the Great <m>Egret</m> is <i>Casmerodius

albus</i>

Tên của phần tử này hiện đang còn phải thảo luận một chút Có thể thay đổi nó thành mark thay cho m trước khi đặc tả được phát hành

Phần tử time

Phần tử time cho biết một thời điểm cụ thể trong lịch sử, chẳng hạn như 05:35 chiều, giờ chuẩn

ở miền đông Bắc Mỹ (EST), 23.04 2007 Ví dụ,

<p>I am writing this example at

<time>5:35 P.M on April 23rd</time>

</p>

Phần tử time giúp các trình duyệt và những người khác nhận ra các vùng thời gian trong các trang HTML Nó không đòi hỏi bất kỳ định dạng đặc biệt nào về nội dung của phần tử Tuy nhiên, mỗi phần tử time nên có một thuộc tính datetime bao gồm thời gian dưới dạng dễ chấp nhận với máy tính, như sau:

<p>I am writing this example at

<time datetime="2007-04-23T17:35:00-05:00">5:35 P.M on April 23rd</time>

</p>

Các vùng thời gian dễ đọc với máy tính có thể có ích cho các công cụ tìm kiếm, các chương trình lịch biểu và v.v

Phần tử meter

Phần tử meter biểu diễn một giá trị số trong một phạm vi đã quy định Ví dụ, bạn có thể sử dụng

nó với tiền lương, tỷ lệ phần trăm các cử tri Pháp đã bỏ phiếu cho Le Pen hoặc các điểm thi Ở đây, tôi sử dụng phần tử meter để đánh dấu một số dữ liệu mà tôi đã nhận được từ một lập trình viên của Google tại Software Development 2007:

Định dạng
Số trang	18
Dung lượng	211,44 KB