Tìm hiểu HTML5 – CSS3 và xây dụng ứng dụng minh họa
LỜI CẢM ƠN
Để hoàn thành bài báo cáo luận văn tốt nghiệp này, chúng em đã nhận được sự
giúp đỡ và góp ý nhiệt tình của quý thầy cô và các bạn trường Đại học Giao Thông
vận tải TPHCM.
Trước hết em xin chân thành cảm ơn quý thầy cô và các bạn trường Đại học
Giao Thông vận tải TPHCM, đặc biệt là những thầy cô đã tận tình dạy bảo chúng em
suốt thời gian học tại trường.
Em xin gửi lời cám ơn sâu sắc đến thầy Nguyễn Lương Anh Tuấn đã dành thời
gian và tâm huyết hướng dẫn giúp em hoàn thành báo cáo luận văn tốt nghiệp.
Mặc dù chúng em đã có nhiều cố gắng để hoàn thành báo cáo luận văn này, tuy
nhiên không thể tránh khỏi những thiếu sót, rất mong nhận được sự đóng góp của quý
thầy cô và các bạn!
TPHCM - Tháng 03 - năm 2012
SVTH: Phan Thị Ngọc Nhạn
Trần Thị Xuân My
1
Tìm hiểu HTML5 – CSS3 và xây dụng ứng dụng minh họa
MỤC LỤC
CHƯƠNG 1: TỔNG QUAN HTML5 – CSS3 2
CHƯƠNG 1: TỔNG QUAN HTML5 – CSS3
1.1 Giới thiệu chung HTML và CSS
1.1.1 HTML
HTML là ngôn ngữ đánh dấu. Ngôn ngữ đánh dấu là một phương pháp cho biết
vai trò của các phần tử trong hồ sơ. Nó tập trung vào cấu trung của hồ sơ chứ
không phải dạng thể hiện. Ví dụ, chúng ta có thể cho biết rằng một phần văn bản
là đoạn văn, còn phần khác là tiêu đề cấp trên, phần khác nữa là tiêu đề cấp
dưới. Ta thực thiện những điều này bằng cách đặt mã lệnh (được gọi là các thẻ)
vào hồ sơ. HTML có khoảng 30 thẻ được sử dụng phổ biến.
1.1.2 CSS
CSS là một tập hợp các hướng dẫn về kiểu, nhằm báo cho trình duyệt Web biết

cách hồ sơ HTML sẽ được thể hiện ra sao đối với người dùng. Với CSS, chúng
ta có thể xác định các kiểu như kích thước, màu và khoảng cách của văn bản
cũng như việc bố trí văn bản, hình ảnh trong trang. CSS còn có thể làm nhiều
hơn thế nữa.
1.2 Sự ra đời HTML5 – CSS3
Trong năm 2004, một nhóm các nhà phát triển của Apple, Opera,Mozilla không
hài lòng với hướng mà HTML và XHTML hướng tới. Họ thành lập một nhóm
gọi là Web Hypertext ApplicationTechnology Working Group(WHATWG). Họ
công bố đề xuất đầu tiên vào năm 2005 dưới tên Web Application 1,0.Năm
2006,World Wide WebConsortium (W3C) đã quyết định hỗ trợ chính thức
WHATWG chứ không phải là tiếp tục phát triển XHTML.Trong năm 2007,các
đặc điểm kỹ thuật mới đã được tái bản bởi W3C theo tên HTML5.Trong khi
người ta nghĩ rằng các chi tiết kỹ thuật cuối cùng sẽ không được công bố cho
2
Tìm hiểu HTML5 – CSS3 và xây dụng ứng dụng minh họa
đến 2022, thời gian mà bây giờ là được xem xét lại.2009-2010,có một sự quan
tâm bùng nổ đến HTML5, và kết quả là tăng số lượng của các trình duyệt và các
thiết bị đã được giới thiệu hỗ trợ nó. Chương này đầu tiên sẽ giới thiệu nhiều
cấu trúc mới trong các đặc điểm kỷ thuật HTML5. Ngoài ra nó sẽ kiểm tra
những thiết bị hỗ trợ cấu trúc HTML5.
1.3 Những đặc tính nổi bật của HTML5 và CSS3
1.3.1 Video và hiệu ứng flash
HTML5 sẽ cho phép bạn xem video mà không cần sử dụng 1 plugin như Flash
hoặc Silerlight.
Những lợi ích với tính năng video của HTML5: Thứ nhất, nó miễn phí và không
cần phần mềm Adobe Flash plugin. Thứ hai, Flash có thể làm chậm máy tính
của bạn (mặc dù phần mềm tăng tốc phần cứng hardware-accelerated Flash 10.1
– đang trong phiên bản beta – có thể giúp bạn giải quyết vấn đề này). Sau cùng,
nó chỉ là một trong nhiều phần mềm đang chạy và chiếm tài nguyên hệ thống.
Với HTML5, tính năng video đã được xây dựng sẵn trong đó.

Tính năng video mới này chắc chắn sẽ là một sự trợ giúp tuyệt vời cho những
người sử dụng Apple iPhone bởi vì Apple phải từ chối khá nhiều để bất kỳ sự
điều khiển của nó trên iPhone sẽ được chuyển giao tới cho một ứng dụng khác
(dạng điều khiển này thường được biết đến như là một chế độ absolute
monarchy). Nhưng cũng hy vọng HTML5 sẽ có lợi cho điện thoại Blackberry,
loại điện thoại mà hầu hết không có khả năng hỗ trợ flash.
Ngoài ra, HTML5 và CSS3 sẽ giúp các nhà thiết kế Web đễ dàng hơn trong việc
tạo ra các hiệu ứng động và các trò chơi tương tác mà không cần dùng đến
Flash. Một số ví dụ về những gì bạn có thể làm với HTML5, CSS3 và một ít hỗ
trợ từ Javascript đó là Akihabra Games và Star Wars AT-AT Walker. Mặc dụ
không thể thay thế hoàn toàn cho Flash nhưng HTML5 và CSS3 có nhiều hứa
hẹn trong lĩnh vực này.
1.3.2 Kho lưu trữ Offline: Ứng dụng web tiến tới bước tiếp theo
Các ứng dụng web ngày càng trở nên tinh vi, và một số tính năng mới trong
HTML5 sẽ giúp chúng tiếp tục được cải thiện. HTML5 cho phép các ứng dụng
3
Tìm hiểu HTML5 – CSS3 và xây dụng ứng dụng minh họa
web có khả năng lưu trữ thong tin và tiện ích Internet để sử dụng khi bạn đang
offline. Tính năng này cho phép lưu trữ và truy cập dữ liệu như e-mail, lịch và
các tiện ích khác thong qua các ứng dụng web, ngay cả khi bạn đang offline,
điều này làm cho các ứng dụng web trở nên tốt hơn và hữu dụng hơn.
1.3.3 Công cụ thiết kế mới
HTML5 và CSS3 cũng làm cho các ứng dụng web và các trang web hấp dẫn
hơn. HTML5 có sẵn các tính năng mới được thêm vào giúp cho việc xây dựng
ứng dụng web dễ dàng hơn rất nhiều. Ví dự như nhiều màu sắc hơn và hỗ trợ
đường cong, việc làm mờ, góc tròn (thay vì ép buộc các nhà thiết kế web sử
dụng các hình ảnh để tạo ra góc tròn), và dĩ nhiên cả việc lưu trữ offline. Tất cả
những điều này làm trang web trở nên dễ nhìn hơn, bắt mắt hơn và làm cho mọi
thứ sát với những gì mà nhà thiết kế tưởng tượng trong đầu hơn.
1.4 Khả năng tương thích HTML5 và CSS3

Mặc dù HTML5 và CSS3 vẫn chưa được hoàn tất, nhưng chúng đã làm thay đổi
bộ mặt của trang web. Một số trình duyệt – như các phiên bản hiện hành của
Safari và Chrome – đã thực thiện một số tính năng từ các phiên bản dự thảo của
HTML5 và CSS3. Và với việc sử dụng những trình duyệt này, bạn có thể xem
nhiều trang web mà trong đó cũng sử dụng HTML5 và CSS3 như CNN.com,
The New York Times, Youtube (trong phiên bản beta) và Vimeo.
Phiên bản hiện tại của Internet Explorer, trình duyệt IE8, hỗ trợ HTML5 rất hạn
chế, tuy nhiên, IE9 sẽ hỗ trợ H264 video, âm thanh nhúng, đồ họa vecto tỷ lệ và
CSS3.
HTML5 và CSS 3 được kết hợp với các công nghệ web khác như JavaScript –
có thể rất hữu ích cho phong cách, định dạng và tốc độ hoạt động của bất kỳ
trang web nếu được sử dụng đúng. Hai ngôn ngữ sẽ cách mạng hóa cách chúng
ta lập trình và xem internet với các tính năng cải tiến all-in-one, có thể loại bỏ
việc phải sử dụng nhiều ứng dụng của bên thứ ba (ví dụ như Flash).
4
Tìm hiểu HTML5 – CSS3 và xây dụng ứng dụng minh họa
CHƯƠNG 2: HTML5
2.1 Cấu trúc trang HTML5
2.1.1 Khai báo doctype
Bởi vì có một số phiên bản của HTML, trình duyệt yêu cầu một loại
DOCTYPE để nói với nó những gì phiên bản sử dụng và làm thế nào để
làm cho nó đúng.Phần này, bạn sẽ học cách hình thành một DOCTYPE
cho HTML5.Trong một tài liệu HTML hoặc XHTML truyền thống, thẻ
DOCTYPE có thể như sau:
DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN"
" />Và còn có nhiều biến thể của DOCTYPE.
HTML5 giúp đơn giản hoá DOCTYPE :
<DOCTYPE html>
2.1.2 Tạo khai báo mã hóa ký tự
Các ngôn ngữ khác nhau sử dụng các bộ ký tự hoặc bảng mã khác nhau.

Thẻ này khai báo ký tự được đặt để sử dụng. Các ký tự phổ biến nhất
được sử dụng bởi hầu hết các ngôn ngữ là UTF-8.
2.1.3 Tổ chức code sử dụng thành phần tạo khối
Trong HTML, chỉ thực sự cách để chia nhỏ một tài liệu thành các thành
phần riêng biệt là sử dụng thẻ <div>. HTML5 trình bày một số tùy chọn
mới. Trong giải pháp này, bạn sẽ tìm hiểu làm thế nào để sử dụng các thẻ
HTML5 mới để tạo ra các phần tài liệu riêng biệt. Các tag <div> thành
công phân chia tài liệu thành các thành phần. Tuy nhiên, <div> có rất ít ý
nghĩa trong việc xác định các bộ phận của 1 tài liệu. HTML5 cung cấp
một số yếu tố cấu trúc mới phân chia tài liệu thành các phần có ý nghĩa.
Với thành phần tạo khối mới của HTML5:
2.1.3.1 Thẻ <section>
Đại diện cho bất kỳ thành phần nào của tài liệu. Chức năng tương tự
như thẻ <div> nhưng cung cấp sự mô tả rõ ràng hơn và nội dung
nhạy cảm của việc phân chia tài liệu. Khi tạo 1 section trong
5
Tìm hiểu HTML5 – CSS3 và xây dụng ứng dụng minh họa
HTML5, giống như khi sử dụng thẻ <div> trong HTML, ban có thể
sử dụng thuộc tính class hoặc id. Khi hai thuộc tính này được áp dụng
cho bất kỳ thành phần nào của HTML5, chúng được xem là biến toàn
cục. Mỗi id phải là duy nhất, class được sử dụng nhiều lần.
2.1.3.2 Thẻ <article>
Được sử dụng đẻ xác định các phần của tài liệu mà ta muốn được độc
lập và phân phối từ các phần còn lại của tài liệu. Thẻ này độc lập, có
thể có khu vực riêng và các phân khu của nó.
2.1.3.3 Thẻ <aside>
Cung cấp một cách mô tả rõ ràng hơn các thành phần trong tài liệu.
Đối với nội dung bên cạnh các nội dung chính được đặt. Các nội
dung <aside> có liên quan đến nội dung xung quanh nội dung chính.
2.1.3.4 Thẻ <header>

Được dùng để tạo ra một tài liệu hay phần tiêu đề. Nó cũng có thể
chứa <h1>…<h6>. Ta có thể sử dụng nó để đặt logo và bảng một
phần của nội dung thành phần <header>. Đây là cách dễ dàng để tạo
ra giới thiệu cho cả tài liệu và section, có thể cả <navigation>. Không
thể sử dụng thành phần <header></header> bên trong <footer>,
<address> hoặc các thành phần <header> khác. Nếu ta làm thế kết
quả sẽ không đúng.
2.1.3.5 Thẻ <hgroup>
Cung cấp cho ta khả năng hiển thị nhóm tiêu đề (<h1> đến <h6>) với
nhau cho các nhu cầu như tiêu đề thay thế và phân nhóm. Trong một
tài liệu HTML5 được xây dựng tốt, các thành phần
<hgroup></hgroup> là một cách tuyệt vời để kết hợp chặt chẽ khách
nhau nhóm và phân nhóm. Điều này đặc biệt đúng nếu ta đang sử
dụng các thành phần <article></article>. Ta được đảm bảo bất kỳ
nhóm và phần nhóm kết nối sẽ di chuyển như là một nhóm.
2.1.3.6 Thẻ <footer>
6
Tìm hiểu HTML5 – CSS3 và xây dụng ứng dụng minh họa
Tạo ra trang chân cho các tài liệu HTML5. Nó có thể chứa thông tin
bản quyền, tác giả thông tin, trích dẫn, chính sách bảo mật. Có thể sử
dụng cấu trúc trang chân cho một tài liệu HTML5 hoặc bất kỳ section
trong tài liệu đó. Không được sử dụng trong các thành phần <header>
hoặc trong một thành phần <footer>. Điều này sẽ hiển thị kết quả tài
liệu không đúng mong muốn.
2.1.3.7 Thẻ <nav>
Hầu hết các trang web đề có liên kết điều hướng. Các liên kết, cho dù
là các siêu liên kết hoặc nút của một số loại, thường được tách ra từ
phần còn lại của tài liệu thông qua việc sử dụng một phần <div>.
Trong HTML5 chó thể sử dụng <nav> để định hướng web. Kết cấu
thành phần <nav></nav> có thể được sử dụng để tạo ra một container

để tổ chức các yếu tố điều hướng trong toàn bộ tài liệu HTML5 hoặc
trong bất kỳ bộ phận nào của tài liệu.
2.1.3.8 Thẻ <figure>
Chèn hình ảnh, minh họa, sơ đồ vào trang web. Cho đến nay, một nhà
phát triển chỉ có thể chèn một <img> vào bất cứ nơi nào nó cần thiết.
Hiện nay, ta có thể sử dụng đánh dấu chỉ định nơi các con số nên
được đặt bằng cách sử dụng thành phần <figure> trong HTML5.
2.1.3.9 Thẻ <dialog>
Xác định cuộc trò chuyện trên màn hình. Có 3 phần chính để thẻ
<dialog>:
 Yếu tố <dialog> gói xác định cuộc trò chuyện.
 Thành phần DT xác định người nói.
 Thành phần DD xác định các cuộc trò chuyện.
2.2 Thành phần cấu trúc và thành phần ngữ nghĩa của HTML5
2.2.1 Tìm hiểu microdata
HTML5 giới thiệu khả năng xác định ngữ nghĩa tùy chỉnh trong một
trang web bằng cách sử dụng dữ liệu vĩ mô. Dữ liệu vĩ mô cho phép bạn
chỉ định máy có thể đọc các thành phần tùy chỉnh trong một trang web
bằng cách sử dụng cú pháp cặp tên – giá trị với nội dung hiện có.
7
Tìm hiểu HTML5 – CSS3 và xây dụng ứng dụng minh họa
Các yếu tố tùy chỉnh mà đại diện cho đối tượng được gọi là các item.
Các giá trị được gán cho các item và thuộc tính của chúng. để những yếu
tố tùy chỉnh này để có giá trị, bạn cần phải định nghĩa một từ vựng tùy
chỉnh bao gồm danh sách các thuộc tính có tên thể hiện cho đối tượng.ví
dụ, bạn muốn để tạo ra dữ liệu vĩ mô đại diện cho đối tượng người dùng,
bạn sẽ phải xác định thuộc tính của nó trong một vốn từ dữ liệu vĩ mô.
Từ vựng này sẽ bao gồm việc kê khai các thuộc tính như tên, họ, địa chỉ,
và số an sinh xã hội.
Để tạo một item, sử dụng thuộc tính itemscope. Để xác định một thuộc

tính của một item, sử dụng thuộc tính itemprop.Đặc biệt, các thuộc tính
itemscope là yếu tố được kết hợp với một phần tử HTML, và nó cho
phépbạn xác định phạm vi của phần tử. Itemscope thuộc tính có thể được
liên kết với bất kỳ thành phần nào hợp lệ HTML.
2.2.2 Sử dung thuộc tính itemscope, itemprop
Các dữ liệu vĩ mô được giới thiệu bởi HTML5 là một cách để gán nhãn
cho nội dung để mô tả loại thông tin cụ thể. Để tạo ra một yếu tố bằng
cách sử dụng cú pháp dữ liệu vĩ mô, về cơ bản bạn sẽ khai báo ba thuộc
tính tiêu chuẩn trong thẻ HTML:
- itemscope: Một thuộc tính Boolean được sử dụng để tạo ra một item
-itemprop: Được sử dụng để thêm một thuộc tính cho một item hoặc một
trong những hậu duệ của item
-itemtype: Được sử dụng để định nghĩa một vốn từ tùy chỉnh Trong giải
pháp này, chúng tôi sẽ sử dụng một vốn từ được định nghĩa bởi Google
cho mục mà chúng tôi muốn mô tả.
2.2.3 Thẻ <hr>
Trong các phiên bản trước của HTML, thẻ <hr> đã được sử dụng đúng
cho việc tạo ra các đường ngang trên một trang.trong HTML5, nó đã
thay đổi ngữ nghĩa.
Tại cái nhìn đầu tiên, các tag <hr> vẻ như nó đang làm chính xác những
8
Tìm hiểu HTML5 – CSS3 và xây dụng ứng dụng minh họa
điều tương tự trong HTML5 rằng nó đã ở trước phiên bản của HTML.
Tuy nhiên, mục đích của HTML để mô tả các bộ phận khác nhau của tài
liệu.Trước đây, tag <hr> vẽ một đường ngang. Trong khi đó dòng có ích,
nó thực sự không làm gì để mô tả một phần của tài liệu khác hơn là một
đường ngang. W3C đã thay đổi ngữ nghĩa chức năng của thẻ <hr>.
Chính thức, mục đích của nó là để xác định "kết thúc của một section và
bắt đầu một cái khác "Đây là nơi mà sự nhầm lẫn này bắt đầu: như được
thảo luận Chương 1, HTML5 có một thẻ mới được gọi là <section>,

được thiết kế để phần riêng biệt. Đây là chủ đề của cuộc tranh luận đang
diễn ra giữa các nhà phát triển. Trong bài viết này, sự đồng thuận là có lẽ
là <hr>thẻ có thể được sử dụng để các chủ đề riêng biệt trong phần một.
Kể từ khi HTML5 vẫn còn là một tác phẩm một công việc trong tiến bộ,
và nó có thể sẽ vẫn như vậy trong một thời gian dài, có lẽ là một định
nghĩa cuối cùng hơn sẽ đến.
2.2.4 Thẻ <iframe>
Bạn có thể sử dụng thẻ <iframe> để tạo ra một trình duyệt trong trình
duyệt và mở tài liệu từ nguồn khác.Thẻ này đã tăng lên tầm quan trọng
bởi vì HTML5 không hỗ trợ các thuộc tính scrolling, frameborder, và
marginheight, tất cả điều đó được hỗ trợ trong các phiên bản trước của
HTML.
2.2.5 Thẻ <area>
Trong khi bạn có thể sử dụng thẻ <area> trong các phiên bản trước của
HTML,phiên bản thực hiện trong HTML5 giới thiệu một số khả năng
mới và thú vị. Hãy bắt đầu bằng cách nhìn vào một số vấn đề cơ bản của
việc sử dụng thẻ <area> trong HTML5.
Thẻ <area> được sử dụng để tạo siêu liên kết bằng cách sử dụng bản đồ
hình ảnh. Nói cách khác, nó lấy hình ảnh và phân chia thành các phần,
với các siêu liên kết độc đáo của nó. HTML5, tuy nhiên, nhìn vào liên
9
Tìm hiểu HTML5 – CSS3 và xây dụng ứng dụng minh họa
kết một chút khác biệt so với các phiên bản trước của HTML. Nó phân
chia liên kết thành ba loại:
-hyperlink: cho phép người sử dụng để điều hướng đến một nguồn tài
nguyên nhất định.
-External Resources:liên kết đến các tài nguyên được xử lý tự động để
làm tăng thêm tài liệu hiện tại.
-Annotations: thay đổi các nguồn tài nguyên tự động được sử dụng trong
các external resources chúng cũng có thể

thay đổi cách hoạt động của một siêu liên kết.
2.3 HTML Form
2.3.1 Các kiểu input mới trong html5
HTML5 form giới thiệu một thiết lập mới các công cụ để làm cho hình thức
phát triển dễ dàng hơn và phong phú hơn.Dưới đây là một số các thành phần
form mới được giới thiệu bởi HTML5:
- keygen element
- output element
- progress element
- meter element
- e-mail input type
- url input type
- date picker element
- time, datetime, month, and week elements
- number input type
- search input type
- range input type
- tel input type
10
Tìm hiểu HTML5 – CSS3 và xây dụng ứng dụng minh họa
- color input type
Khác hơn các loại đầu vào, HTML5 giới thiệu một số thuộc tính mới có thể
được sử dụng trong một form như list, autofocus, placeholder, required
,multiply,pattern,autocomplete, min và max, và step.Ngay cả ngữ pháp cho việc
kê khai của các thành phần form thay đổi với HTML5. Trong thực tế, bây giờ
bạn có thể khai báo thành phần form ở bất kỳ điểm nào của trang và liên kết với
một đối tượng form bằng cách sử dụng các thuộc tính form.
2.3.2 Sử dụng kiểu input là email
Sử dụng kiểu input là email bằng cách đơn giản: <input type=”email”/>
Trình duyệt sẽ tự động kiểm tra tính hợp lệ của email do người dùng

nhập vào.Sự kiểm tra của từng trình duyệt là không giống nhau.Với
Opera bao gồm * @ * trong các đầu vào là đủ cho nó để được chấp nhận,
trong khi đó trong Safari,Chrome, Firefox, bạn cần phải nhập ít nhất
*@ (một lí tự trước và sau ký hiệu @ và 1 đoạn bao gồm các kí tự).
2.3.3 Kiểu input là url
Ngày nay, người sử dụng được chèn các địa chỉ web vào các hình thức
với tần số ngày càng nhiều, cho dù đó là các URL trang web cá nhân của
mình, blog, hoặc tài khoản LinkedIn. HTML5 giới thiệu một loại đầu
vào mới để quản lý loại hình này của văn bản bằng cách tôn trong tiêu
chuẩn địa chỉ Internet. Hiện tại, rất ít trình duyệt hỗ trợ cho loại input
này. Để tạo input chỉ cần: <input type = “url”/>
2.3.4 Sử dụng điều khiển spinner cho số
Làm việc với những con số luôn luôn là phức tạp hơn bạn tưởng tượng.
Ví dụ, một người sử dụng có thể rất dễ dàng chèn một giá trị không
mong muốn trong một lĩnh vực văn bản, hy vọng sẽ nhận được một
số.Một ví dụ cổ điển là một lĩnh vực số lượng trong một trang web
thương mại điện tử. Khi bạn chọn một đối tượng mua và nhấp vào Thêm
vào Giỏ hàng nút, bạn cũng sẽ được yêu cầu để chèn số lượng của mặt
hàng đó để mua.Người dùng có thể chèn thêm bất kỳ giá trị trong lĩnh
11
Tìm hiểu HTML5 – CSS3 và xây dụng ứng dụng minh họa
vực này, vì vậy những gì sẽ xảy ra nếu người sử dụng chèn một ký tự
hoặc không hợp lệ biểu tượng do nhầm lẫn?Các ứng dụng sẽ phải xác
minh nó trên máy khách hoặc máy chủ bên để tránh truyền thông tin
không hợp lệ hệ thống thương mại điện tử từ chối (hoặc gửi và hoá đơn
số lượng không chính xác).HTML5 giúp các nhà phát triển bằng cách
thêm một điều khiển spinner kho công cụ.Một điều khiển spinner là một
input text với các mũi tên lên và xuống. như thể hiện trong hình
Người dùng có thể click vào mũi tên để thay đổi giá trị số họ muốn đưa
vào form.Bằng cách sử dụng thành phần form này, người sử dụng không

thể làm cho một sai lầm khi điền vào mẫu bởi vì những con số không hợp
lệ.Các trình duyệt không hỗ trợ thẻ này thì sẽ hiển thị như trường văn bản
đơn giản.Cú pháp đơn giản: <input type="number" />
Sự gia tăng và giảm giá trị sẽ làm việc tự động.Một số thuộc tính cho
phép bạn tùy chỉnh. Các thuộc tính này cho phép bạn thiết lập tối đa và
giá trị tối thiểu và đơn vị để sử dụng cho sự gia tăng và giảm.
2.3.5 Thêm 1 thanh trượt vào form với kiểu input là range
Một thành phần HTML5 thú vị cung cấp được sử dụng để làm việc với
những con số và form là thanh trượt.Một thành phần trượt là một điều
khiển biểu mẫu cho phép người sử dụng để điều chỉnh các giá trị trong
một phạm vi hữu hạn dọc theo một hoặc hai trục. Người sử dụng chọn
một giá trị bằng cách trượt một ngón tay cái đồ họa giữa các điểm kết
thúc của một ca khúc mà tương ứng với một loạt các giá trị.Giống như
spinner, điều khiển này cũng giúp bạn tránh những sai lầm.
Để tạo 1 thanh trượt trong form bạn chỉ cần khai báo như sau:
<input type=”range” min=”1” max=”10” step=”1” value=”6”/>
12
Tìm hiểu HTML5 – CSS3 và xây dụng ứng dụng minh họa
2.3.6 Gửi nhiều file
Đã có thể gửi bất kỳ loại tập tin từ máy tính của bạn đến một máy chủ từ
xa với những phiên bản cũ hơn HTML bằng cách sử dụng form, và
<input type=”file”>.tuy nhiên,Điều khiển biểu mẫu này, có giới hạn có
thể chỉ gửi một tập tin tại một thời điểm. Nếu người dùng muốn tải lên
một album ảnh và do đó gửi một số hình ảnh, các nhà phát triển đã sử
dụng các công nghệ khác, chẳng hạn như Flash hoặc JavaScript, cung
cấp tính năng này.Bây giờ, với HTML5 và với việc bổ sung của một
thuộc tính, nó có thể quản lý tất cả mọi thứ mà không sử dụng bất kỳ
ngôn ngữ bên ngoài.HTML5 giới thiệu một thuộc tính mới cho các
type=”file”, đó là multiple, để cải thiện khả năng sử dụng tập tin tải
lên.Multiple là một thuộc tính Boolean cho biết liệu người sử dụng nên

được cho phép chỉ định nhiều hơn một giá trị.Có thể làm như sau:
<input type="file" multiple />
2.3.7 Tạo danh sách dữ liệu
Thẻ này có nghĩa là một tập hợp các yếu tố tùy chọn mà đại diện cho các
tùy chọn được xác định trước cho các điều khiển khác. Vì vậy, nó có thể
được liên kết với một điều khiển biểu mẫu, như một đầu vào văn bản.
Khi kiểm soát được sự tập trung, nó sẽ cung cấp một danh sách các tùy
chọn được xác định trước để người sử dụng như là dữ liệu được điền
vào, cũng như cho phép người dùng gõ một cái gì đó của riêng mình.
Các trình duyệt cũ hơn, hoặc những người không hỗ trợ datalists, sẽ làm
cho một trường văn bản đơn giản.
VD: <input list="food" name="food"/>
<datalist id="food">
<option value="Spaghetti Aglio e Olio">
<option value="Lasagne">
<option value="Fusilli al pesto">
<option value="Rigatoni alla Carbonara">
</datalist>
2.3.8 Xác nhận hợp lệ các điều khiển form
13
Tìm hiểu HTML5 – CSS3 và xây dụng ứng dụng minh họa
Trong giải pháp đầu tiên trong chương này, chúng tôi đã giới thiệu cho
các bạn làm thế nào để sử dụng được xây dựng trong cơ chế để xác nhận
hợp lệ giữ liệu đưa vào. Chức năng này là mới của HTML5.Khi bạn làm
việc với các form, xác nhận dữ liệu chắc chắn là một khía cạnh quan
trọng có thể yêu cầu khá nhiều nỗ lực. Chúng ta thường sắp xếp để hệ
thống xác nhận hỗn hợp. Với JavaScript hay các framework AJAX
(chẳng hạn như JQuery, Dojo, và MooTools), bạn có thể làm cho phía
máy khách xác nhận và bạn có thể phát triển phía máy chủ thủ tục xác
nhận với ngôn ngữ phía server(PHP, Python, Java, và như vậy).Chèn các

thuộc tính mới trong HTML5, bạn có thể ủy nhiệm một số chức năng xác
minh dữ liệu để trình duyệt và làm giảm nỗ lực cần thiết cho các loại
điều khiển (ít nhất là từ phía khách hàng). Một số điều khiển form kế
thừa các hệ thống xác nhận hợp lệ mà không cần phải viết bất kỳ mã
nào.Như phần trên đã giới thiệu ta đã biết cho các cơ chế xác nhận cho
kiểu input là e-mail chỉ bằng cách <input type="email" /> hoặc cho url
hoặc số <input type="url"> và <đầu vào type = "số">.Tuy nhiên, một
thuộc tính có thể được sử dụng để xác định sự hiện diện của một lĩnh vực
bắt buộc trong form mà bạn không thể bỏ trống.Để yêu cầu này loại xác
nhận, bạn cần phải sử dụng thuộc tính required trong thẻ input <input
type="text" required/> Thuộc tính này là Boolean. Khi được chỉ định thì
thành phần không thể được bỏ trống.Các trình duyệt hỗ trợ thuộc tính
này hiển thị một thông báo lỗi hoặc chèn một đường viền màu đỏ trên
trường đó nếu bị bỏ trống.
Một khía cạnh quan trọng liên quan đến khả năng sử dụng form cho thấy
rằng các lĩnh vực bắt buộc phải cung cấp cho người dùng với một hình
ảnh hoặc văn bản thông báo cho họ về các dữ liệu cần thiết. Một quy ước
là chèn một dấu hoa thị (*) bên cạnh trường cần thiết.Bạn có thể thêm
14
Tìm hiểu HTML5 – CSS3 và xây dụng ứng dụng minh họa
một số văn bản và các qui ước đồ họa với CSS bằng cách sử dụng các
class:valid hay invalid,hoặc option hay required.
Chú ý:Việc xây dựng trong cơ chế xác nhận của các trường trong
HTML5 sẽ được áp dụng tự động theo mặc định.Tuy nhiên,có bối cảnh
trong đó nó là cần thiết để sử dụng JavaScript để tạo ra thói quen xác
nhận phức tạp và mạnh mẽ hơn.Trong trường hợp này, nó là cần thiết để
ghi đè lên hệ thống xác nhận mặc định của trình duyệt.
2.3.9 Tạo các input tự tạo bằng các biểu thức chính quy
Biểu thức chính qui cung cấp một cách mạnh mẽ, ngắn gọn và linh hoạt
cho các chuỗi kết hợp của văn bản, chẳng hạn như các ký tự đặc biệt, từ

ngữ, hoặc các mẫu của các ký tự. Một biểu thức chính quy được viết
bằng một ngôn ngữ chính thức có thể được giải thích bởi một bộ xử lý
biểu thức chính quy, mà là một chương trình mà có phục vụ như là một
phân tích cú pháp phát sinh kiểm tra văn bản và nhận dạng các phần phù
hợp với các đặc tả đã được cung cấp.HTML5 cho phép bạn kiểm tra đầu
vào của người dùng có phù hợp với giá trị đầu vào đối với một biểu thức
chính quy hay không.Mã mà bạn cần để ghi vào sử dụng các biểu thức
thông thường với các phiên bản trước của HTML như sau:
<input type="text" name="ssn" onblur="if (!^\d{3}-\d{2}-\d{4}$this.value)
alert(this.title+'\nAn error occurred. Please verify your data.');" title="The Social
Security Number"/>
Trên sự kiện onblur của thành phần input, một câu lệnh JavaScript được
thực hiện. Nó điều khiển các mẫu được áp dụng cho các dữ liệu trong
trường dữ liệu và nó cung cấp một thông báo lỗi nếu xác nhận đã không
thành công.Với HTML5, một thuộc tính mới có sẵn cho phép bạn kết
hợp một mẫu của các ký tự thông qua các biểu thức để một đầu vào văn
bản được áp dụng như xác nhận các dữ liệu được chèn vào trong trường
dữ liệu.Điều này thực sự đơn giản.
<input type="text" name="ssn" pattern="(!^\d{3}-\d{2}-\d{4}$"
15
Tìm hiểu HTML5 – CSS3 và xây dụng ứng dụng minh họa
Giá trị quy định trong các thuộc tính pattern phải phù hợp với mô hình
sản xuất JavaScript.Để cung cấp cho người dùng với một mô tả của
pattern, hoặc một báo cáo lỗi trên trường dữ liệu nếu một giá trị không
hợp lệ nhập vào, bạn có thể sử dụng thuộc tính tiêu đề:
<input type="text" name="ssn" pattern="(!^\d{3}-\d{2}-\d{4}$" title="The Social
Security Number" />
Không phải tất cả các trình duyệt hỗ trợ thuộc tính mạnh mẽ này. May
mắn thay, có một thư viện mà lấp đầy khoảng cách này Google’s Web
Forms 2,, mà bạn có thể tìm thấy tại địa chỉ sau:

westonruter/webforms2. Nếu thư viện nhận ra khi nó được tải mà trình
duyệt không tương thích với một số các các chức năng HTML5 mới,
chẳng hạn như các thuộc tính pattern, áp dụng các phương thức của của
mình thay thế.Bạn cần phải import wbforms2_src.js thư viện JavaScript
bằng cách sử dụng thẻ script để sử dụng thư viện:
<script type="text/javascript" src="YOUR_FOLDER/webforms2_src.js"> </ script>
Nó cũng rất quan trọng cho webforms2.css và webforms2-msie.js cả
được đặt trong cùng thư mục webforms2.js hoặc webforms2-p.js (tùy
theo bạn quyết định sử dụng).Thực hiện đã được thử nghiệm và nên làm
việc trong các trình duyệt sau:
- Mozilla Firefox 1.0.8
- Mozilla Firefox 1.5.0.9
- Mozilla Firefox 2
- Internet Explorer 6
- Internet Explorer 7
- Safari 2.0.4
- Safari 3 (Windows)
- Opera 9 (thực hiện thử nghiệm)
2.3.10 Thiết lập placeholder trong <input>
16
Tìm hiểu HTML5 – CSS3 và xây dụng ứng dụng minh họa
Tính khả dụng là một khía cạnh tinh tế và rất quan trọng của ứng dụng
web và đặc biệt là các form. Nhà phát triển cố gắng làm cho trải nghiệm
người dùng với các form dễ chịu nhất có thể bằng cách giảm thiểu các
khả năng lổi khi người dùng dữ liệu đầu vào. Một thủ thuật đơn giản
nhưng hiệu quả là đặt văn bản trong một trường input để cung cấp một
gợi ý cho người sử dụng.
Thậm chí nếu nó đã được đơn giản trong quá khứ để tạo ra loại tính năng
này, bạn vẫn phải sử dụng JavaScript.HTML5 giới thiệu một thuộc tính
mới thông minh kết hợp với các điều khiển input text nhưng biến mất

nếu field được focus hoặc làm cho nó xuất hiện trở lại nếu nó mất focus.
Tất cả điều này thực hiện mà không có mã JavaScript.Thuộc tính cho
phép bạn thực hiện chức năng này là placeholder. Nó là vô cùng dễ dàng
để sử dụng các placeholder text trong một hình webform
<input type="text" placeholder="Insert name"/>
Các trình duyệt không hỗ trợ thuộc tính này chỉ đơn giản là sẽ bỏ qua nó
và thấy không có gì trong field đó.
2.3.11 Tạo điều khiển date và time
Ngày và thời gian sử dụng thường xuyên trong form. Nếu bạn nghĩ về
mức độ thường xuyên sử dụng loại dữ liệu này, nó sẽ không lâu để nhận
ra rằng việc sử dụng chính xác và hiệu quả có thể giúp xác định sự thành
công hay thất bại của toàn bộ trang web. Bạn nghĩ rằng tôi đang phóng
đại?Hãy suy nghĩ về đặt phòng một chuyến bay. Các thông tin mà bạn
chèn vào một hình thức điển hình cho truy vấn này là: sân bay khởi hành,
đến sân bay, ngày khởi hành, ngày trở lại, và thời gian ưa thích cho các
chuyến bay đi và trở về.Vì vậy, hãy tưởng tượng như thế nào quan trọng
là phải có một hình thức giúp người dùng chèn chính xác thông tin về
ngày và thời gian, làm giảm hoặc thậm chí loại trừ khả năng lỗi.
Phát triển Web đã sử dụng chức năng bảng chọn ngày bằng cách sử dụng
17
Tìm hiểu HTML5 – CSS3 và xây dụng ứng dụng minh họa
JavaScript có thể được tìm thấy trong các framework AJAX .HTML5
giới thiệu một loạt các đánh dấu để làm việc với các ngày và thời gian dễ
dàng hơn nhiều.HTML5 giới thiệu một số các loại input khác nhau để xử
lý ngày / thời gian picker: <input type="date" />
<input type="time" />
2.4 Các thành phần HTML5 đa phương tiện: Audio và Video
2.4.1 Nhúng 1 đoạn video trong một trang web
Với HTML5, xuất bản một đoạn video trên một trang web đã trở thành
một hoạt động thực sự đơn giản.Chúng ta phải viện đến các plug-in của

bên thứ ba để làm cho video có thể truy cập vào một trang HTML, sắp
kết thúc.Mã như thế này có thể trở thành dĩ vãng:
<object width="640" height="480">
<param name="movie" value="your_video.swf">
<embed src="your_video.swf" width="500" height="500"></embed>
</object>
Người sử dụng cuối cùng sẽ không còn phải tải về các plug-in thêm hoặc
cập nhật lên phiên bản chính xác của các những người họ đã cài đặt để
xem video. Cũng không phải họ sẽ trải qua trình duyệt bị treo do sự bất
ổn định của một số plug-in của bên thứ ba.Chúng ta hãy xem làm thế nào
mọi thứ đang thay đổi với HTML5.
Với sự ra đời của thẻ <video> mới, tất cả chúng ta phải làm là khai báo
này đánh dấu trong trang web, xác định video để tải, và trình duyệt sẽ
làm phần còn lại (giả sử nó hỗ trợ các yếu tố video): <video
src="your_video.ogg" />
Các thuộc tính src chứa địa chỉ của nguồn tài nguyên phương tiện truyền
thông (video hoặc audio) để được hiển thị trong trang.trong ví dụ mã
trên, chúng tôi hỏi nó để tải các video trong các định dạng Ogg
Theora.Ngay cả khi mã này là đủ để làm cho có thể sử dụng video, nó là
thích hợp hơn để xác định kích thước của chứa đoạn video bằng cách sử
dụng các thuộc tính chiều rộng và chiều cao:
<video width="640" height="360" src="your_video.mp4" />
18
Tìm hiểu HTML5 – CSS3 và xây dụng ứng dụng minh họa
Nếu bạn không thiết lập các giá trị, trình duyệt sẽ sử dụng kích thước của
video gốc.Các thuộc tính khác được hỗ trợ bởi thẻ video:
-preload: Nói cho các trình duyệt để tải trước nội dung phim trong khi
trang đang tải. Bằng cách này,người sử dụng sẽ không phải chờ đợi cho
video tải khi chơi video.
- autoplay: Nói cho trình duyệt để chơi các video tự động ngay sau khi nó

có sẵn. Bạn hãy cẩn thận với thuộc tính này bởi vì bạn không phải lúc
nào cũng chắc chắn rằng người dùng sẽ muốn xem video. Điều này đặc
biệt đúng nếu người dùng được kết nối thông qua một thiết bị di động, và
băng thông là đắt tiền.
-loop:thực hiện lại đoạn video ngay sau khi nó kết thúc.
- controls: Nếu quy định, nó nói với các trình duyệt để hiển thị một tập
hợp được xây dựng trong điều khiển như chơi, dừng lại,tạm dừng, và âm
lượng.
- poster: Chỉ định một tập tin hình ảnh mà các trình duyệt có thể hiển thị
khi không có dữ liệu video có sẵn.
Nếu người dùng mở các tập tin HTML trong một trình duyệt không hỗ
trợ thẻ video, một trang trắng được hiển thị.Vì vậy, nó là tốt thực hành để
cung cấp nội dung khác trong trang trong trường hợp này xảy ra. Sử dụng
thuộc tính poster để hiển thị một hình ảnh mà có thể là một khung hình
của video (bắt như là một hình ảnh). Nó có thể ;ocal, hoặc đến từ những
nơi khác trên Web.
<video width="640" height="360" src="comtaste_showreel.mp4" autoplay
poster=" /img/Figure_5_3.png"> Video is not supported in this browser! </video>
Đối với điện thoại di động các thiết bị iOS của Apple (iPhone, iPod
Touch, và iPad) và các thiết bị Android, có một số vấn đề với sự hỗ trợ
HTML5 video:
- Nếu bạn sử dụng các thuộc tính poster này, iOS sẽ bỏ qua các thành
19
Tìm hiểu HTML5 – CSS3 và xây dụng ứng dụng minh họa
phần video. Apple đã tuyên bố rằng lỗi này đã được cố định trong iOS
4.0.
- iOS chỉ hỗ trợ định dạng H.264. Nếu bạn sử dụng thẻ <source> nó sẽ
chỉ công nhận các định dạng video đầu tiên.
- Android :mặt khác không hỗ trợ các điều khiển của trình duyệt và sẽ do
đó bỏ qua chúng.

2.4.2 Phát hiện hỗ trợ video trên trình duyệt
Có những kỹ thuật khác nhau để xác minh các định dạng video được hỗ
trợ bởi các trình duyệt được tải trang. Giải pháp này sử dụng các thư viện
JavaScript Modernizr, từ www.modernizr.com, .Chúng ta cũng có thể sử
dụng chức năng của thư viện video này để xác minh hỗ trợ các thẻ video
và codec. Dưới đây là một ví dụ:
if (Modernizr.video) {
if (Modernizr.video.webm) {
// Support the WebM
}
else if (Modernizr.video.ogg)
{
// Support the Ogg Theora + Vorbis
} else if (Modernizr.video.h264){
// Support the H.264 video + AAC audio }
}
Về cơ bản, thư viện thực hiện việc xác minh hỗ trợ video bằng cách kiểm
tra thuộc tính canPlayType của thành phần Video .
Trình duyệt sau đó trả về một trong ba giá trị:
-empty string:Nó không hỗ trợ nó.
20
Tìm hiểu HTML5 – CSS3 và xây dụng ứng dụng minh họa
-maybe string:Nó không phải là chắc chắn rằng nó không được hỗ trợ.
-probably string:Nó hỗ trợ sự kết hợp của container và codec.
2.4.3 Tạo một bộ tùy chỉnh điều khiển video
Bất cứ phần tử đa phương tiện, có thể là âm thanh hoặc video, để cung
cấp cho người sử dụng với các tùy chọn tương tác với nội dung bằng
cách sử dụng cổ điển là chơi, dừng lại, tạm dừng, và các nút điều khiển
âm lượng.HTML5 có một thuộc tính tự nhiên làm cho các nút trên một
màn hình điều khiển video.Tuy nhiên, nó có thể (và thường là thích hợp

hơn) để tạo ra các nút điều khiển tùy chỉnh để họ kết hợp đồ họa của
trang web video được công bố.Các yếu tố âm thanh và video là một phần
của thành phần DOM HTML5 phương tiện truyền thông, cung cấp một
mạnh mẽ và rất dễ dàng để sử dụng API để điều khiển để chạy bộ phim.
Nó đơn giản để chèn một điều khiển video trong nội dung video. Trong
thực tế, có một thuộc tính điều khiển cho các từ thẻ<video>tận dụng lợi
thế của điều khiển được xây dựng trong của trình duyệt. Tất cả những gì
bạn cần làm là xác định thuộc tính trong tag để hiển thị các bộ điều khiển
trên video:
<video width="640" height="360" src="comtaste_showreel.mp4" controls/>
Mỗi trình duyệt sẽ sử dụng đồ họa riêng của mình cho việc thiết kế các
điều khiển video. Nó là có thể, tuy nhiên, để tạo ra các điều khiển video
tùy chỉnh bằng cách sử dụng đồ họa của riêng của bạn, và quyết định
chức năng để cung cấp. Ví dụ, bạn có thể viết một tính năng đồng bộ hóa
phụ đề trong một đoạn video và kích hoạt với bộ điều khiển video, hoặc
một tính năng cho phép người dùng bỏ qua từ một trong những dấu trang
khác để xem phân khúc, trong đó họ là quan tâm nhất. Bởi vì bạn là một
trong những văn bản các chức năng của bộ điều khiển video với
JavaScript, bạn thực sự có thể làm như bạn vui lòng.
21
Tìm hiểu HTML5 – CSS3 và xây dụng ứng dụng minh họa
Để làm như vậy, bạn phải sử dụng các thuộc tính phương tiện truyền
thông HTML5 và DOM các sự kiện mà bạn có sử dụng chẳng hạn như
quá trình tải, chơi,tạm dừng, và chơi xong.
2.4.4 Tải trước video
Có hai phương pháp chính để cung cấp các phương tiện truyền thông qua
Internet:
-streaming:sử dụng một máy chủ và một giao thức cho phép người sử
dụng thấy bất kỳ
một phần của đoạn video mà không cần phải chờ đợi cho video để tải,

trong suốt toàn bộ chiều dài của video.
-progressive download:sử dụng các tiêu chuẩn giao thức HTTP để truyền
tải các tập tin. Trong trường hợp này,người sử dụng không thể bỏ qua
một phần của video đã được tải.Đối với một đoạn video được phân phối
progressive download, nó là quan trọng để quản lý việc nạp trước. Điều
này cho phép bạn tải các video trong nền ngay cả khi người sử dụng vẫn
không được thực hiện bộ phim.
Có một thuộc tính tải trước cho các phần tử video cho phép bạn tải một
video trong nền. Tất cả bạn cần phải làm là khai báo trong thẻ video và
chỉ định một trong ba giá trị nó có thể có:
+auto(giá trị mặc định): nó bắt đầu tải các file video ngay khi tải
trang.
+none: nó không bắt đầu tải các file video.
+metadata : nó cho thấy trình duyệt nạp trước các siêu dữ liệu tài
nguyên, chẳng hạn như kích thước,thời gian, và
Tuy nhiên, bạn phải rất cẩn thận với cách bạn sử dụng thuộc tính này.
Trong thực tế, thuộc tính này cho trình duyệt bắt đầu tải về các file video
ngay khi tải trang. Thậm chí nếu người dùng không bao giờ thực hiện
các video,nền trang web sẽ yêu cầu cho nó để tải bằng bất cứ cách nào,
lãng phí băng thông có giá trị.Dưới đây là một ví dụ về làm thế nào để sử
22
Tìm hiểu HTML5 – CSS3 và xây dụng ứng dụng minh họa
dụng thuộc tính:
<video width = "640" height = "360"
src = "comtaste_showreel.mp4" autoplay preload poster =" /
img/Figure_5_3.png "/>
Lưu ý rằng trình duyệt Safari trên iOS bỏ qua các thuộc tính tải trước và
không bao giờ tải trước video.
2.4.5 Sử dụng thành phần audio
Âm thanh là một yếu tố đa phương tiện cũng thường được sử dụng trên

Web. Cũng giống như nội dung video, âm thanh bị thiếu một tiêu chuẩn
mở để cung cấp trên trang web trong quá khứ. Đây là lý do tại sao sử
dụng âm thanh nội dung trên web, và vẫn còn là ủy thác cho bên thứ ba
plug-in.QuickTime, Windows Media Player, Flash Player, Real Player là
phổ biến nhất plug-in được sử dụng phát triển để chơi nội dung âm
thanh. Một lần nữa, cuối cùng, Flash Player đã được tuyên bố là người
chiến thắng. với thị trường sự xâm nhập của gần 99% máy tính kết nối
Internet, Flash đã đảm bảo rằng bất kỳ trang web có thể xuất bản nội
dung âm thanh tương thích với định dạng này.Bằng cách sử dụng Flash
Player, nó có thể chơi âm thanh trong các định dạng sau: AIFF, WAV,
MP3.Bây giờ HTML5 đã giới thiệu một thẻ <audio> , cho phép bạn chèn
các phần tử âm thanh mà không cần phải để phân phối bất kỳ plug-in của
bên thứ ba.Theo như định dạng có liên quan, không có giới hạn được mô
tả bởi các chi tiết kỹ thuật HTML5 về audio codec, hoặc định dạng
container, bạn có thể sử dụng.Các tập tin âm thanh MP3, AAC, OGG
cũng tốt. Những thay đổi là sự hỗ trợ cung cấp cho các định dạng các
trình duyệt. Để đảm bảo khả năng tương thích lớn nhất có thể, do đó nó
được thực hành tốt để cung cấp định dạng khác nhau của các yếu tố âm
thanh tương tự thông qua các thuộc tính source. Sau đó nó sẽ được trình
duyệt để chọn nguồn được liệt kê đầu tiên mà nó có thể chơi.
23
Tìm hiểu HTML5 – CSS3 và xây dụng ứng dụng minh họa
Thẻ <audio> thừa hưởng hầu hết các thuộc tính và các sự kiện của thẻ
<video>. Trong thực tế, để chèn một thành phần audio, tất cả những gì
bạn cần làm là khai báo các thẻ và chỉ định các thuộc tính src: <audio
controls autoplay src="audio.mp3">
những thuộc tính của audio:
-src:một địa chỉ URL, local hoặc từ xa, có chứa nguồn.
-Autoplay:quy định cụ thể liệu tập tin cần chơi một lần nạp.
-Loop:quy định cụ thể liệu tập tin cần được chơi nhiều lần.

-Controls:xác định liệu trình duyệt sẽ hiển thị điều khiển mặc định của
nó.
-Preload:quy định cụ thể cho dù âm thanh đã được cài đặt sẵn trang. Nó
chấp nhận những giá trị sau đây: none, metadata, và auto.
-Play():chơi audio
-Pause(): tạm dừng
-canPlayType():cho biết liệu các loại MIME được có thể được chơi.
-Buffered():Chỉ định thời gian bắt đầu và kết thúc của Phần đệm của âm
thanh.
Bởi vì không phải tất cả các loại âm thanh được hỗ trợ bởi tất cả các thiết
bị và các trình duyệt, nó là một thực hành tốt nhất để danh sách các thành
phần<source> như bạn thấy dưới đây:
<audio controls autoplay>
<source src="mySong.aac" type="audio/mp4">
<source src="mySong.oga" type="audio/ogg">
<source src="mySong.mp3" type="audio/mp3">
</ audio>
Nó cũng rất quan trọng để xác định các loại thuộc tính khai báo các loại
MIME cho trình duyệt.Bằng cách làm như vậy, trình duyệt công nhận
nếu nó là có thể chơi định dạng đó mà không cần phải tải các tập tin.
24
Tìm hiểu HTML5 – CSS3 và xây dụng ứng dụng minh họa
2.5 APIs vẽ của HTML5
2.5.1 Vẽ với html5 sử dụng APIs vẽ của thành phần canvas
Các thành phần canvas là một khu vực hình chữ nhật mà bạn có thể thêm
vào trang HTML5 của bạn, và nó cung cấp một loạt các khả năng đồ họa
lớn cho phép bạn có thể kiểm soát tất cả các điểm ảnh thông qua API vẽ
2D. Bản thân canvas không có khả năng vẽ, tất cả mọi thứ bạn sẽ tạo ra
trong nó sẽ được rút ra lập trình bằng cách sử dụng ngôn ngữ JavaScript.
Thiết lập cơ sở và nền tảng để có thể rút ra trong HTML5 là khá đơn

giản.Bạn chỉ cần xác định một thẻ canvas, <canvas> </ canvas>. Thẻ
canvas là thực sự đơn giản, và chỉ có ba thuộc tính: chiều rộng, chiều cao
tính bằng pixel, và một ID để xác định canvas mà bạn đang vẽ.
<canvas id="canvasID" width="300" height="200"></canvas>
Bạn có thể vị trí của canvas của bạn trong trang HTML5 và áp dụng CSS
cho nó như là bạn sẽ làm gì với bất kỳ thẻ khác.Thẻ canvas ban đầu chỉ
là vùng trống, trừ khi bạn đặt một biên giới, màu nền trên đó thông qua
CSS. Tuy nhiên, nó sẽ không xuất hiện trên trang cho đến khi bạn vẽ một
cái gì đó bên trong nó.canvas đơn giản chỉ là một hình chữ nhật sẽ tạo
thành môi trường nơi bạn sẽ có thể vẽ đồ họa, làm cho hình ảnh
động,và Để sử dụng vải của bạn và vẽ nó, bạn sẽ cần phải sử dụng
JavaScript. Nếu bạn đã lập trình với các ngôn ngữ như ActionScript 3
hoặc Java, bạn sẽ tìm thấy rất nhiều điểm tương đồng ở đây.
Sau khi canvas được tạo ra, điều đầu tiên bạn cần là phải truy cập vào nó.
Bạn có thể làm điều đó giống như với bất kỳ yếu tố khác của Document
Object Model (DOM):
var myCanvas=document.getElementById("canvasID");
Sau đó, bạn có thể truy cập vào bối cảnh dựng hình canvas, cung cấp
truy cập vào các API vẽ và phương thức của nó. Để lấy bối cảnh các đối
tượng, thành phần canvas sử dụng các phương thức DOM getContext
(),chỉ có một tham số: kiểu của bối cảnh. Tại thời điểm này, bối cảnh 2D
là duy nhất có sẵn.Chúng tôi mong đợi một bối cảnh 3D có sẵn trong
25