HTML5 là gì và nó hoạt động như thế nào?

Hướng dẫn này cung cấp tổng quan giới thiệu về HTML5. Nếu bạn chưa nghe nhiều về nó hoặc chỉ muốn hiểu sự liên quan của nó, bạn đã đến đúng nơi

HTML5 là tiêu chuẩn mới nhất để trình duyệt hiển thị và tương tác với các trang web. Được phê duyệt vào năm 2014, đây là bản cập nhật đầu tiên cho HTML sau 14 năm. Trong thời đại ngày nay, đó là cả cuộc đời giữa các lần cập nhật

Mục đích của HTML5 chủ yếu là giúp các nhà phát triển web và người tạo trình duyệt dễ dàng tuân theo các tiêu chuẩn dựa trên sự đồng thuận giúp tuân thủ hiệu quả hơn và trao quyền hơn. Nó cũng được thiết kế để cung cấp trải nghiệm người dùng tốt hơn, nhanh hơn, nhất quán hơn cho khách truy cập trên máy tính để bàn và thiết bị di động

Dưới đây là một vài cải tiến chính trong HTML5

  • Có một cấu trúc phần tử đơn giản hơn, dễ hiểu hơn cho các trang, giúp chúng dễ dàng xây dựng, điều chỉnh và gỡ lỗi hơn—đồng thời xây dựng các dịch vụ tự động giúp bạn tìm các tài nguyên quan trọng trên web
  • Nó cung cấp các yếu tố tiêu chuẩn cho các đối tượng phương tiện phổ biến mà trước đây yêu cầu các plugin gây phiền nhiễu cho âm thanh, video, v.v. Các plugin này cần được cập nhật thường xuyên, tôi. e. tải xuống nhiều lần để quản lý bảo mật
  • Có tích hợp riêng với các giao diện để tận dụng các nhu cầu di động và web hiện đại. Một trong những ví dụ yêu thích của tôi về điều này là định vị địa lý, cho phép bạn xác định tọa độ GPS của khách truy cập web thông qua trình duyệt của họ. Tính năng này trước đây bị hạn chế đối với các ứng dụng điện thoại được trang bị GPS

Ví dụ: bên dưới là ví dụ về vị trí địa lý HTML5 từ Xây dựng công ty khởi nghiệp của bạn với PHP. Định vị địa lý và Google Địa điểm

HTML5 là gì và nó hoạt động như thế nào?
HTML5 là gì và nó hoạt động như thế nào?
HTML5 là gì và nó hoạt động như thế nào?

HTML5 quan trọng với ai?

Bạn Chỉ Là Người Dùng Web hay Người hâm mộ YouTube?

HTML5 cải thiện tốc độ, tính dễ sử dụng và tính nhất quán trên web. Có, trải nghiệm YouTube của bạn sẽ dần trở nên tuyệt vời nhất quán. Sẽ có ít bản cập nhật trình duyệt và plugin hơn, ít mối đe dọa bảo mật hơn và các trang web nhanh hơn, dễ đọc hơn và trang nhã hơn

Bạn có phải là nhà phát triển web?

HTML5 làm cho cuộc sống của bạn dễ dàng hơn rất nhiều và mở rộng đáng kể những gì có thể. Điều đó cũng có nghĩa là bạn sẽ có thể xây dựng nội dung và dựa nhiều hơn vào trình tạo trình duyệt để đảm bảo tính nhất quán. Điều này có nghĩa là mã bố cục có điều kiện ít hơn rất nhiều

Bạn có muốn xây dựng một trình duyệt web?

Một mặt, bạn sẽ có một lộ trình tuyệt vời trong đặc tả HTML5 nêu chi tiết cách thức và những gì bạn nên xây dựng. Mặt khác, còn nhiều việc phải làm và làm đúng. Sẽ không dễ để phân biệt trình duyệt của bạn với. các nhà sản xuất trình duyệt lớn

Bối cảnh của HTML5

HTML5 đến từ đâu?

HTML5 là tiêu chuẩn lập trình trình duyệt mới nhất trong hơn 20 năm kể từ khi ra mắt web vào năm 1991

Lịch sử của HTML

HTML lần đầu tiên xuất hiện như một tiêu chuẩn vào năm 1993 và đây là tiêu chuẩn được các ủy ban tiêu chuẩn chấp nhận

  • HTML2. 0. 1995
  • HTML4. 0. 1997
  • HTML4. 01. 2000
  • HTML5. 2014

Mục tiêu của HTML5

Theo Wikipedia, HTML5 nhằm hợp nhất các phiên bản trước đó và các loại tài liệu khác biệt như XHTML 1 và DOM Cấp 2 HTML

[HTML5] mở rộng, cải thiện và hợp lý hóa đánh dấu có sẵn cho tài liệu, đồng thời giới thiệu đánh dấu và. (API) cho các ứng dụng web phức tạp. HTML5 cũng là một ứng cử viên tiềm năng cho các ứng dụng di động đa nền tảng. Nhiều tính năng đã được thiết kế với các thiết bị có công suất thấp như điện thoại thông minh và máy tính bảng được xem xét

Dưới đây là tóm tắt về cách MakeUseOf giải thích các mục tiêu của HTML5

  • Loại bỏ các plugin như Flash để có các tính năng phổ biến mà mọi người cần. Xây dựng hỗ trợ riêng cho những thứ như âm thanh và video
  • Giảm nhu cầu về JavaScript và mã bổ sung với các phần tử gốc mới
  • Cung cấp tính nhất quán trên các trình duyệt và thiết bị
  • Làm tất cả những điều này một cách minh bạch nhất có thể
HTML5 là gì và nó hoạt động như thế nào?
HTML5 là gì và nó hoạt động như thế nào?
HTML5 là gì và nó hoạt động như thế nào?

Tín dụng hình ảnh. chủ đề đơn giản

HTML5 cung cấp những tính năng mới nào?

Rất nhiều, hóa ra. HTML5 cung cấp một danh sách ấn tượng về các khả năng mới hiện được phần lớn các trình duyệt hỗ trợ

Các yếu tố mới của HTML5

Các phần tử mới cơ bản nhất của HTML5 giúp dễ dàng sắp xếp các trang web và gỡ lỗi mã của bạn hoặc mã của người khác. Nó cũng giúp các dịch vụ tự động quét web dễ dàng hơn và hiểu tầm quan trọng của các thành phần trang khác nhau

Đối với bố cục trang và các tính năng chính, hiện có các yếu tố cụ thể như

  • <html lang="en">
    
    0 và
    <html lang="en">
    
    1
  • <html lang="en">
    
    2 cho các loại menu
  • <html lang="en">
    
    3 cho thanh bên hoặc nội dung liên quan lân cận
  • <html lang="en">
    
    4 nơi nội dung đi, chẳng hạn như một bài đăng trên blog
  • <html lang="en">
    
    5 tương tự như
    <html lang="en">
    
    6 nhưng thiên về nội dung hơn
  • Các thẻ
    <html lang="en">
    
    7 và
    <html lang="en">
    
    8 để các trình duyệt gốc quản lý việc phát lại từng thẻ. Không có thêm plugin và bản cập nhật bảo mật nào cho việc này
  • <html lang="en">
    
    9 đặc biệt để cho phép bạn vẽ đồ họa bằng ngôn ngữ kịch bản riêng
  • <html lang="en">
    
    00 để đặt nội dung hoặc ứng dụng bên ngoài vào trang

Đây là một phác thảo trực quan đẹp về những điều này bởi Tạp chí Smashing

HTML5 là gì và nó hoạt động như thế nào?
HTML5 là gì và nó hoạt động như thế nào?
HTML5 là gì và nó hoạt động như thế nào?

Dưới đây là một số tính năng nâng cao hơn của HTML5, bao gồm tích hợp API, giúp viết mã JavaScript cho các hành động phức tạp dễ dàng hơn và nhất quán hơn trên các trình duyệt

  • Phát lại âm thanh và video. cung cấp phát lại phương tiện trên các trình duyệt mà không cần plugin
  • định vị địa lý. xác định vị trí của khách truy cập
  • Kéo và thả. để tải tệp lên từ trình duyệt bằng các cử chỉ đơn giản
  • nhân viên web. chạy JavaScript ở chế độ nền (không chặn)
  • Sự kiện do máy chủ gửi. cho phép máy chủ cập nhật các trang web trong trình duyệt sau khi chúng được tải, đơn giản và hiệu quả hơn AJAX và JavaScript
  • Lưu trữ dữ liệu ngoại tuyến. cung cấp một cách để lưu trữ dữ liệu cục bộ trong trình duyệt độc lập với cookie

Cần xem những tính năng nào được hỗ trợ trong trình duyệt nào?

HTML5 là gì và nó hoạt động như thế nào?
HTML5 là gì và nó hoạt động như thế nào?
HTML5 là gì và nó hoạt động như thế nào?

Có rất nhiều tính năng mới không thể liệt kê tất cả chúng ở đây. Hãy kiểm tra các liên kết tài nguyên ở cuối hướng dẫn này để biết các tài nguyên sâu hơn mà tôi khuyên dùng

Một vài ví dụ về HTML5 đang hoạt động

Chúng ta hãy xem một vài ví dụ thú vị về HTML5 đang hoạt động

Trang HTML5 soạn sẵn

Sự đơn giản của HTML5 thể hiện rõ ràng trong bố cục trang mới của nó. Các yếu tố hướng nội dung hơn làm cho mã trang dễ hiểu và gỡ lỗi hơn. Đây là một ví dụ soạn sẵn đơn giản

<html lang="en">
1
<html lang="en">
2
<html lang="en">
3
<html lang="en">
<html lang="en">
0
<html lang="en">
6
<html lang="en">
7
<html lang="en">
8
<html lang="en">
9
<html lang="en">
0
<html lang="en">
20
<html lang="en">
21
<html lang="en">
22
<html lang="en">
23
<html lang="en">
24
<html lang="en">
25
<html lang="en">
26
<html lang="en">
27
<html lang="en">
28
<html lang="en">
29
<html lang="en">
30
<html lang="en">
31
<html lang="en">
32
<html lang="en">
33
<html lang="en">
34
<html lang="en">
35

Lưu ý rằng có một thẻ doctype, thẻ liên kết và thẻ tập lệnh đơn giản hơn. Nếu bạn muốn xem một số cách tiếp cận khác, hãy xem HTML5 Boilerplate, một trang HTML5 mặc định nguồn mở rộng hơn

Phần tử video và trình phát

Đây là bản trình diễn CodePen cho thấy việc thêm trình phát video vào trang web của bạn dễ dàng như thế nào với phần tử

<html lang="en">
8

Không cần plugin và không cần cập nhật. Tất cả những gì tôi cần làm để thêm trình phát video là chèn các dòng HTML sau

<html lang="en">
1
<html lang="en">
37
<html lang="en">
3
<html lang="en">
39

Các hình thức

HTML5 có rất nhiều cải tiến đối với các biểu mẫu và thành phần đầu vào để giúp lập trình web dễ dàng hơn và trải nghiệm người dùng tốt hơn nhiều. Ví dụ: các yếu tố đầu vào hiện hỗ trợ nhiều loại xác thực tích hợp sẵn. Dưới đây là ví dụ xác thực cho tên, số, địa chỉ email và URL trang web

Bản trình diễn ở trên là từ một trong những hướng dẫn ở đây trên Envato Tuts+ hướng dẫn bạn cách thực hiện xác thực biểu mẫu với HTML5

Dưới đây là một số hướng dẫn khác trên Tuts+ liên quan đến biểu mẫu HTML5 và xác thực của chúng

  • HTML5 là gì và nó hoạt động như thế nào?
    HTML5 là gì và nó hoạt động như thế nào?
    HTML5 là gì và nó hoạt động như thế nào?

    Hơn 20 biểu mẫu HTML Các phương pháp hay nhất dành cho người mới bắt đầu

    HTML5 là gì và nó hoạt động như thế nào?
    HTML5 là gì và nó hoạt động như thế nào?
    HTML5 là gì và nó hoạt động như thế nào?

    Andrew Burgess

    31 Thg 12 2021

  • HTML5 là gì và nó hoạt động như thế nào?
    HTML5 là gì và nó hoạt động như thế nào?
    HTML5 là gì và nó hoạt động như thế nào?

    Tạo biểu mẫu liên hệ trong PHP

    HTML5 là gì và nó hoạt động như thế nào?
    HTML5 là gì và nó hoạt động như thế nào?
    HTML5 là gì và nó hoạt động như thế nào?

    Monty Shokeen

    15 Th04 2021

  • HTML5 là gì và nó hoạt động như thế nào?
    HTML5 là gì và nó hoạt động như thế nào?
    HTML5 là gì và nó hoạt động như thế nào?

    Tạo biểu mẫu JavaScript và HTML5 miễn phí

    HTML5 là gì và nó hoạt động như thế nào?
    HTML5 là gì và nó hoạt động như thế nào?
    HTML5 là gì và nó hoạt động như thế nào?

    Monty Shokeen

    24 Thg 11 2022

  • HTML5 là gì và nó hoạt động như thế nào?
    HTML5 là gì và nó hoạt động như thế nào?
    HTML5 là gì và nó hoạt động như thế nào?

    Xác thực biểu mẫu dễ dàng với jQuery

    HTML5 là gì và nó hoạt động như thế nào?
    HTML5 là gì và nó hoạt động như thế nào?
    HTML5 là gì và nó hoạt động như thế nào?

    Monty Shokeen

    09 Th07 2021

Đồ họa vectơ có thể mở rộng (SVG)

Trong HTML5, bạn có thể dễ dàng tạo hiệu ứng động cho các phần tử bằng JavaScript. Bản demo CodePen sau đây cho thấy sự phát triển của cây từ chậu hoa với sự trợ giúp của hoạt hình SVG

Cái gì tiếp theo?

Tôi hy vọng bạn thích phần tổng quan về lợi ích của HTML5 này. Nếu bạn muốn khám phá thêm về HTML5, có hai tài nguyên nữa mà tôi muốn đề xuất

  • Giới thiệu HTML5. Phần giới thiệu tuyệt vời về những tiến bộ của HTML5 dành cho các nhà phát triển muốn xem nhanh tất cả các yếu tố mới
  • Bản trình diễn và ví dụ về HTML5. Hoàn hảo để hiển thị cho bạn một menu có tổ chức gồm nhiều bản trình diễn HTML5, cho bạn thấy những gì có thể

Đây là một ví dụ về các bản trình diễn có thể duyệt được tại Bản trình diễn HTML5

HTML5 là gì và nó hoạt động như thế nào?
HTML5 là gì và nó hoạt động như thế nào?
HTML5 là gì và nó hoạt động như thế nào?

Nếu bạn là người quản lý trang web WordPress, giống như nhiều độc giả của Envato Tuts+, bạn có thể muốn đánh giá các chủ đề trong tương lai về sự tuân thủ của chúng với HTML5. Sự phát triển theo tiêu chuẩn với sự hỗ trợ nhất quán của trình duyệt giúp cho việc phát triển web trở nên dễ dàng hơn rất nhiều đối với rất nhiều người trong chúng ta và sẽ giảm số lượng lỗi mà khách hàng của chúng ta gặp phải, đồng thời ngày càng mang lại trải nghiệm người dùng tốt hơn

Nhìn chung, tôi khá ấn tượng với HTML5 và có vẻ như nó sẽ tiếp tục phát triển

Ngoài ra, nếu bạn đang tìm kiếm các tiện ích khác để giúp bạn phát triển kỹ năng HTML5 của mình, đừng quên xem những gì chúng tôi có trên Envato Market

Liên kết liên quan

Vì có rất nhiều tài nguyên hữu ích dành cho HTML5 nên tôi đã thêm phần trợ giúp bổ sung cho một số tài nguyên mà tôi thấy hữu ích nhất

  • HTML5 (Wikipedia)
  • Bác sĩ HTML5
  • 21 Thử nghiệm Canvas HTML5 Cực kỳ Ấn tượng (Envato Tuts+)
  • Viết mã bố cục HTML 5 từ đầu (Tạp chí Smashing)
  • Ví dụ HTML5. Cộng hòa hướng dẫn
  • Bản trình diễn và ví dụ về HTML5
  • HTML5Test. Trình duyệt của bạn hỗ trợ HTML5 tốt như thế nào

Bài đăng này đã được cập nhật với sự đóng góp từ Nitish Kumar. Nitish là nhà phát triển web có kinh nghiệm tạo trang web Thương mại điện tử trên nhiều nền tảng khác nhau. Anh ấy dành thời gian rảnh của mình để thực hiện các dự án cá nhân giúp cuộc sống hàng ngày của anh ấy dễ dàng hơn hoặc đi dạo buổi tối dài với bạn bè

HTML5 hoạt động như thế nào?

HTML5 cho phép bạn tạo các ứng dụng ngoại tuyến . Các trình duyệt hỗ trợ các ứng dụng ngoại tuyến HTML5 (hầu hết) sẽ tải xuống HTML, CSS, JavaScript, hình ảnh và các tài nguyên khác tạo nên ứng dụng và lưu trữ chúng cục bộ.

HTML5 là gì và tại sao nó được sử dụng?

HTML5 là ngôn ngữ đánh dấu được sử dụng để cấu trúc và trình bày nội dung trên World Wide Web . Đây là phiên bản HTML chính thứ năm và cũng là phiên bản cuối cùng được World Wide Web Consortium (W3C) khuyến nghị. Thông số kỹ thuật hiện tại được gọi là Tiêu chuẩn sống HTML.

Trình duyệt HTML5 là gì?

HTML5 là đặc điểm kỹ thuật mới nhất cho HTML, ngôn ngữ mà trình duyệt web đọc để hiển thị các trang web . HTML5 có nhiều tính năng mới nhằm giúp việc tạo trang web dễ dàng hơn và trải nghiệm của mọi người khi sử dụng các trang web đó tốt hơn. Trong số các tính năng đó có nhiều cải tiến cho các biểu mẫu web.

Giải thích hoạt động của HTML như thế nào?

HTML hoạt động như thế nào? . Đầu tiên, tác giả sử dụng một trình soạn thảo văn bản cơ bản trên máy tính (chẳng hạn như TextEdit cho Mac) để tạo tài liệu HTML của mình. Sau đó, tác giả điền vào tài liệu HTML của họ bằng một loạt các phần tử HTML, sử dụng các thẻ HTML. by telling the internet browser how to display the page. First, the author uses a basic text editor on the computer (such as TextEdit for Mac) to create their HTML document. The author then fills their HTML document with a series of HTML elements, using HTML tags.