it-swarm-vi.com

Có gì mới trong HTML5 / CSS3?

Tôi đã thấy trang nàytrang này , nhưng đó là rất nhiều thứ để tiêu hóa. Những điều chính về HTML5 làm cho nó khác biệt/tốt hơn so với HTML/CSS cũ (X) thông thường là gì?

23
Jason

HTML5 là rất lớn , nhưng cũng tuyệt vời .

Theo quan điểm của tôi, chủ yếu là về khả năng tương tác . Thông số kỹ thuật đi và chỉ định các trường hợp Edge ngay cả để thử và đảm bảo rằng tất cả các trình duyệt đọc đánh dấu theo cùng một cách .

Ở vị trí thứ hai, HTML5 có video và âm thanh, thực hiện chính xác những gì tên nói. Nếu bạn muốn bao gồm video hoặc âm thanh, HTML5 nên giảm nhu cầu plugin của bạn.

Ở vị trí thứ ba, HTML5 bao gồm rất nhiều khả năng truy cập và trợ giúp về ngữ nghĩa. Chẳng hạn, các yếu tố như <section><article> giúp máy móc tìm ra nội dung nào được cho là. Các loại đầu vào mới như <input type=email> cũng có thể hữu ích vì những lý do tương tự, mặc dù các loại đầu vào mới bao gồm các UI tùy chỉnh giúp chúng hữu ích ngay cả đối với các trình đọc "thông thường" của con người.

Lưu ý rằng các tính năng Biểu mẫu mới nhiều hơn các loại đầu vào mới. Nó cũng bao gồm hỗ trợ cho văn bản giữ chỗ và một số thuộc tính khác.

HTML5 bao gồm <canvas>, cho phép vẽ các hình dạng 2D (và, với WebGL, 3D) như biểu đồ hoặc thậm chí kết xuất trò chơi.

Hành vi cũ hiện đã được chuẩn hóa, chẳng hạn như cổ xưa của Internet Explorer contentEditable.

DOCTYPE cuối cùng là phong nha! Bây giờ bạn có thể thực sự ghi nhớ nó! <!DOCTYPE html>

Việc chỉ định mã hóa cũng dễ dàng hơn, với <meta charset=utf-8>.

Nếu bạn muốn gửi dữ liệu đến máy khách và liên kết nó với các phần tử, bây giờ bạn có thể thực hiện nó với các thuộc tính tùy chỉnh. Chẳng hạn, <div data-status=open>Open</div> cuối cùng đã được cho phép. Lưu ý rằng tên thuộc tính tùy chỉnh phải được bắt đầu bằng data-.

Bây giờ bạn có thể bao gồm SVG và MathML trong các tài liệu HTML. Trước đây, bạn chỉ có thể làm điều đó với các tài liệu XHTML.

Trong số nhiều hàm và trường mới mà HTML5 định nghĩa, một trong những điều ấn tượng nhất là classList, cho phép bạn thao tác thuộc tính lớp dễ dàng hơn. Thay vì phải getAttribution/setAttribution và sử dụng các bản hack phức tạp để tìm ra lớp nào mà một phần tử có và loại bỏ một lớp cụ thể khỏi phần tử đó, classList làm cho các tình huống khó khăn đó trở nên rất đơn giản.

Ngoài ra còn có nhiều thông số kỹ thuật liên quan, chẳng hạn như Công nhân web, Ổ cắm web và IndexedDB, không thực sự là một phần của HTML5 nhưng mọi người đều nói về chúng như thể chúng là như vậy. Chúng rất hữu ích cho việc tận dụng các máy tính đa lõi, giao tiếp với máy chủ và lưu trữ dữ liệu cục bộ.

Đối với CSS3, nó bao gồm hỗ trợ cho hình ảnh động , chuyển tiếp , viền tròn mô hình hộp linh hoạt .

Điểm mới trong CSS3 là các bộ chọn mới, giúp đơn giản hơn để khớp các phần tử cụ thể trên một trang (chẳng hạn như chỉ các hàng lẻ hoặc chẵn trong một bảng).

Opacity, đơn vị mới, Marquee và Ruby cũng là một phần của CSS3.

Tôi nghĩ rằng khá nhiều bao gồm tất cả các phần quan trọng.

33
luiscubal

Có những thứ bố cục cơ bản như bán kính đường viền, bóng (hộp/văn bản), hỗ trợ rgba, v.v. Đây là những gì CSS3 được biết đến nhiều nhất. Thú vị hơn là thẻ canvas, thẻ video, lưu trữ cục bộ, websockets, v.v sẽ tạo ra trải nghiệm người dùng phong phú hơn nhiều trong HTML/JS/CSS đơn giản. Các tính năng này có tiềm năng trở thành một sự thay thế tuyệt vời cho Flash trên web mà không cần bổ sung thêm.

4
D4V360

Tôi thấy các phần tử HTML mới khá thú vị ... một số trong số chúng là các thay thế ngữ nghĩa đầy hứa hẹn cho các divs chung. Các yếu tố mới đầy hứa hẹn bao gồm article, section, aside, figure, nav, headerfooter, trong số những người khác. Tôi thực sự thích ý tưởng về các yếu tố ngữ nghĩa thay thế các container vô nghĩa.

Ồ vâng, một mục có liên quan: doctype đơn giản hóa nhiều - cuối cùng là thứ tôi có thể gõ từ bộ nhớ!

4
Grant Palin

( Đây là câu trả lời của tôi cho một câu hỏi tương tự trên webapps.stackexchange.com )

Canvas Canvas Chủ đề công nhân web là các khía cạnh thú vị nhất của HTML5 đối với tôi. Tôi đã viết một số ứng dụng web sử dụng các tính năng đó:

GioAUTHor [sic] sử dụng rộng rãi khung vẽ để cho phép bạn vẽ đường dẫn trên bản đồ và sau đó tìm tuyến đường ngắn nhất từ ​​đầu đến cuối (thông qua thuật toán của Dijkstra trong JavaScript).

JavaScript Thread Demo hạn chế sử dụng canvas nhưng hiển thị việc sử dụng Chủ đề công nhân, hoàn thành với mã trình diễn. Nó cũng sử dụng điều khiển thanh trượt HTML5 input = "phạm vi" .


Hỗ trợ trình duyệt HTML5 cũng đa dạng như chính các trình duyệt. Có một trang web đẹp (trong HTML5, natch) about sẵn sàng HTML5 cho thấy ai đã sẵn sàng cho những gì.

4
Alan

Liên quan đến CSS3 - hãy xem http://css3please.com/ để xem bạn có thể làm gì.

Trình duyệt của bạn càng muộn, bạn càng có khả năng nhìn thấy các hiệu ứng.

2
Sniffer

Điều này không đưa ra một ý kiến ​​về tầm quan trọng, nhưng nó là một đồng bằng hữu ích giữa các HTML 4 và 5.

2 về những cải tiến chính:

  • <section> và thuật toán phác thảo tiêu đề mới (tôi đã nói nó chỉ là my 2)
  • yếu tố hình thức mới, ví dụ: <input type=email>
  • data-* thuộc tính
  • lưu trữ phía khách hàng
  • bản địa <audio><video>
1
Paul D. Waite

Thẻ âm thanh và video cho phép trình bày phương tiện mà không cần plugin như Flash hoặc Silverlight và quan trọng nhất là hoạt động trên trình duyệt iPhone và iPad. Có một số vấn đề cần được giải quyết liên quan đến tiền mã hóa và quản lý quyền kỹ thuật số.

1
Steve Tranby

Jeremy Kieth vừa phát hành một cuốn sách thực sự hay về chủ đề "HTML5 dành cho nhà thiết kế web". bạn có thể muốn kiểm tra xem.

Đây là cuốn sách đầu tiên từ A Book Apart. Rất khuyến khích nó cho các nhà thiết kế trung cấp đến cao cấp. A ++

http://books.alistapart.com/

NOTE: bạn có thể phải đợi để nhận bản sao cứng

1
Kevin

Bởi vì chưa ai đặt điều này cả:

HTML5 là tuyệt vời cho những gì mọi người đã liệt kê, nhưng nó cũng bao gồm định vị địa lý tiêu chuẩn, nhân viên web, ổ cắm web, canvas và localStorage. Tất cả các công cụ này là một phần của thông số HTML5, sử dụng rất nhiều JavaScript phía sau hậu trường để thực hiện.

0
Ilan Biala