Tôi đã thấy trang web này và trang web này , nhưng đó là rất nhiều để 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ì?
Tôi đã thấy trang web này và trang web này , nhưng đó là rất nhiều để 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ì?
Câu trả lời:
HTML5 là rất lớn , nhưng cũng tuyệt vời .
Theo quan điểm của tôi, nó 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 cạnh chẵn để 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 gọi nó làm. 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>và <article>các máy trợ giúp tìm ra nội dung nào được cho là. Các kiểu đầ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 kiểu đầu vào mới bao gồm các UI tùy chỉnh làm cho 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ũ giờ đã được chuẩn hóa, chẳng hạn như Internet Explorer cổ đại contentEditable.
DOCTYPE cuối cùng là phong nha! Bây giờ bạn có thể thực sự ghi nhớ nó!<!DOCTYPE html>
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. Ví dụ, <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 thêm tiền tố 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 , đường viền tròn và 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.
Để theo dõi các tính năng và thông số kỹ thuật hỗ trợ, bạn có thể kiểm tra Khi nào tôi có thể sử dụng . Nó bao gồm các tính năng HTML5 và CSS3 và những thứ như SVG, PNG, CSS2.1 và CSS2. Nó cũng theo dõi tình trạng phê duyệt của họ (Khuyến nghị, Đề xuất được đề xuất, Khuyến nghị của Ứng viên, Dự thảo làm việc, tiêu chuẩn IETF). FindMeByIP chỉ duy trì ma trận các tính năng CSS3 được hỗ trợ.
Một số cách viết lại và đơn giản hóa cú pháp đã diễn ra trong các đai ốc và bu lông:
<!DOCTYPE html>languageThuộc tính được đơn giản hóa cho <html>thẻ: <html lang="en">xmlnsvà xml:langnếu bạn muốn tuân thủ XML)<meta>Thẻ chuyên dụng cho charset:<meta charset="utf-8" />scriptkhông còn chấp nhận typethuộc tính, yêu cầu charsetcho các tập lệnh từ xa: <script src="/media/js/jquery.js" charset="utf-8"></script>(tập lệnh nội tuyến không cần thêm thuộc tính nào)HTML5 mang đến khả năng đánh dấu của bạn có nhiều ngữ nghĩa hơn và nhìn chung dễ đọc / ghi hơn và có kích thước tệp nhỏ hơn. Thay vì có <div id="nav">, bạn chỉ cần có <nav>. Có vẻ như không nhiều nhưng nó cộng lại.
Nhiều yếu tố từ XHTML1 và HTML4 đã không được chấp nhận. Các yếu tố sau đây không được hỗ trợ trong HTML5: <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u>và <xmp>.
Một số yếu tố mới trong HTML5 có nghĩa là chỉ thêm đánh dấu ngữ nghĩa và sẽ không làm gì ngoài việc cung cấp một thay thế có ý nghĩa hơn <div>. Những yếu tố mới bao gồm: <article>, <section>, <aside>, <hgroup>, <header>, <footer>, <nav>, <time>, <mark>, <figure>, và <figcaption>.
Các hình thức HTML5 được cải thiện rất nhiều .
Kiểu đầu vào mới
Thuộc tính mới:
Yếu tố mới
Chúng ta có thể đi vào các hình thức cả ngày, nhưng đây là một số tài nguyên để giải thích tất cả những thứ mới này tốt hơn.
CSS3 mang đến sự tuyệt vời của Truy vấn truyền thông . Truy vấn truyền thông là như vậy, vì vậy, rất tuyệt vời. Không có sẵn trong IE8 trở xuống, nhưng sẽ được IE9 hỗ trợ.
CSS3 có bộ đếm tăng dần . Bạn có thể sử dụng các thành phần này để tự động đánh số mà không có danh sách theo thứ tự bằng cách sử dụng :beforebộ chọn giả và contentkiểu khi danh sách theo thứ tự hoặc đánh số sẽ không chính xác về mặt ngữ nghĩa. (Ví dụ: đánh số các bước điền vào các trường mẫu.)
Nếu bạn là người hâm mộ của Đặt lại CSS, sẽ có sẵn CSS CSS Reset từ HTML5 Doctor. Tôi đã thực hiện ba bổ sung cho thiết lập lại này cho các trang cá nhân của mình:
text-rendering: optimizeLegibility; được thêm vào các kiểu trong định nghĩa cho <body>labelbao gồm trong định nghĩa với inputvà selectvì nó cầnvertical-align: middle;insvà :focustừ CSS Reset của Eric Meyer được thêm lại vàoMột thiết lập lại cạnh tranh được gọi là reset5 có sẵn, nhưng tôi chưa đánh giá nó cá nhân. Nó dựa trên cả hai bộ Eric Meyer và HTML5 Doctor.
Trình bảo mật HTML5 theo dõi các lỗi trong các tính năng HTML5 được triển khai trong các trình duyệt khác nhau và cũng bao gồm các lỗi trong các tính năng hiện có cũng rất tốt để theo dõi.
Tuy nhiên, việc sử dụng các phần tử HTML5 không tự động làm cho mã của bạn thành ngữ nghĩa. WHATWG đã viết một bài báo có tên <phần> không chỉ là một "ngữ nghĩa <div>" giải thích rằng nó không chỉ đơn giản là một yếu tố chứa.
Trong HTML 5, có một thuật toán để xây dựng một khung nhìn phác thảo của các tài liệu. Điều này có thể được sử dụng, ví dụ như AT, để giúp người dùng điều hướng qua một tài liệu. Và <phần> và bạn bè là một phần quan trọng của thuật toán này. Mỗi lần bạn lồng <phần>, bạn tăng độ sâu phác thảo lên 1 (trong trường hợp bạn đang tự hỏi những lợi thế của mô hình này được so sánh với mô hình <h1> - <h6> truyền thống, hãy xem xét một trình đọc nguồn cấp dữ liệu dựa trên web muốn tích hợp cấu trúc tài liệu của nội dung được cung cấp với nội dung của trang xung quanh. Trong HTML 4, điều này có nghĩa là phân tích tất cả nội dung và đánh số lại tất cả các tiêu đề. Trong HTML5, các tiêu đề kết thúc ở độ sâu phù hợp miễn phí).
...
Nếu bạn chỉ chuyển đổi một cách mù quáng tất cả các <div> trên các trang của bạn thành <phần> thì rất có thể trang của bạn sẽ có phác thảo mà bạn mong đợi. Và, ngoài việc là một kẻ giả mạo ngữ nghĩa, điều này sẽ khiến mọi người dựa vào tiêu đề để điều hướng.
Giống như mọi thứ khác trên thế giới này, có một khung cho các ứng dụng web HTML5 có tên SproutCore , được xây dựng bởi một kỹ sư cũ của Apple có tên Charles Jcar.
Ngoài html5rocks.com, bạn có thể theo kịp html5doctor.com và html5gallery.com .
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, bộ nhớ 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.
Tôi thấy các yếu tố HTML mới khá thú vị ... một số trong số chúng là những thay thế ngữ nghĩa đầy hứa hẹn cho divcác s chung . Các yếu tố mới hứa hẹn bao gồm article, section, aside, figure, nav, header, và footer, 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 liên quan: đơn giản hóa nhiều doctype- cuối cùng là thứ tôi có thể gõ từ bộ nhớ!
( Đâ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 )
Các chủ đề của Canvas và Web Worker 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 giới hạn 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 kiểu nhập liệu HTML5 = "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) về mức độ sẵn sàng của HTML5 cho thấy ai sẵn sàng cho việc gì.
Liên quan đến CSS3 - hãy xem tại 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.
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ố.
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 ++
LƯU Ý : bạn có thể phải đợi để có được một bản sao cứng
Điều này không đưa ra ý kiến về tầm quan trọng, nhưng đó là một đồng bằng hữu ích giữa HTML 4 và 5.
2 về những cải tiến chính:
<section>và các thuật toán tiêu đề cương mới (tôi đã nói đó chỉ là tôi 2 ¢)<input type=email>data-* thuộc tính<audio>và<video>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.