5 điều bạn không biết bạn có thể làm với HTML

Sep 11, 2025

Cách

Hãy đối mặt với nó, sự phát triển web có thể dễ dàng trở thành một mớ hỗn độn. Html, css và JavaScript. Tất cả đã phát triển từ nguồn gốc khiêm tốn trong nhiều năm, và phần lớn không rõ ràng về cách bạn nên sử dụng chúng. Kết quả là, tất cả đều quá dễ dàng để xây dựng một mớ hỗn độn có thể xác định. Tuân thủ các tiêu chuẩn và tận dụng các cải tiến mới nhất trong thông số kỹ thuật không đảm bảo mã tốt, nhưng nó chắc chắn có thể giúp ích.

Trong bất kỳ loại phát triển phần mềm, mô-đun là vua khi nói đến việc xây dựng mã duy trì. Kết quả là, bạn sẽ muốn giữ một mắt nhắm vào các thành phần web. Hỗ trợ trình duyệt không tuyệt vời, nhưng nếu bạn nắm lấy một số polyfills. , bạn có thể vượt qua đường cong và bắt đầu tận dụng các yếu tố tùy chỉnh để cấu trúc mã của bạn ngay lập tức. Phong cách phát triển này là tương lai, vì vậy nó đáng để làm quen với nó bây giờ.

Keep code streamlined for clearer understanding — Giữ mã được sắp xếp hợp lý để hiểu rõ hơn

Bản thân HTML5 đã giới thiệu một số yếu tố mới (và một số ít) để giúp khuyến khích các thực hành mã hóa tốt. Bạn có thể đã nghe nói về đánh dấu ngữ nghĩa, đề cập đến việc sử dụng các yếu tố mô tả của HTML5 như & lt; bài viết & gt; và & lt; Hình & gt; để chỉ ra loại nội dung chúng chứa.

Điều này thực sự có thể giúp ích với sự sạch sẽ của mã của bạn, vì các phần tử HTML sẽ nhận dạng ngay lập tức, ví dụ, phần nào đại diện cho thanh menu, các phần nội dung của bạn, chân trang, v.v.

Nó cũng sẽ giúp nếu bạn tận dụng các tiêu chuẩn JavaScript mới nhất. JavaScript cũng có thể trở nên lộn xộn, nhưng nó trở nên dễ dàng hơn nhiều để làm việc trong những năm gần đây. Cú pháp ES6 được hỗ trợ rộng rãi trong các trình duyệt và các trình duyệt như các chức năng và lớp mũi tên có thể giúp cuộc sống của bạn dễ dàng hơn nhiều - nhưng nhiều nhà phát triển đều không quen thuộc hoặc cảnh giác khi sử dụng chúng.

Tiếp tục chủ đề phát triển mô-đun, JavaScript cũng hỗ trợ tải mô-đun, có thể giúp bạn quản lý các phụ thuộc sạch sẽ.

01. Công nhận và tổng hợp bài phát biểu

The sound of things to come — Âm thanh của những thứ sắp tới (Tín dụng hình ảnh: Ảnh của Jason Rosewell trên UNLAST)

Chúng sẽ từng là các chức năng phức tạp yêu cầu phần mềm chuyên dụng, nhưng hiện tại chúng đang được xây dựng trực tiếp vào các trình duyệt. API Speech Web có các thành phần hỗ trợ văn bản thành giọng nói và lời nói. Sau này sẽ sử dụng dịch vụ trực tuyến (Chrome sử dụng API phát biểu của Google Cloud) hoặc dịch vụ nhận dạng giọng nói gốc của thiết bị. Hy vọng sẽ thấy điều này được sử dụng rộng rãi trên các thiết bị di động trong tương lai.

02. Hiển thị một bộ chọn màu

Choosing the right colour — Chọn màu phù hợp (Tín dụng hình ảnh: Ảnh của Scott Webb trên unlash)

Tầm thường như nó có thể phát ra âm thanh, đây là một ví dụ tuyệt vời về cách HTML5 đơn giản hóa các tác vụ phổ biến mà trước đây đã yêu cầu mã hóa tùy chỉnh của một thành phần UI khá phức tạp. & lt; loại đầu vào = "màu" & gt; Sẽ hiển thị một bộ chọn màu trực quan khi nhấp vào, sử dụng bộ chọn màu có nguồn gốc từ thiết bị. Điều này có thể đặc biệt hữu ích với vải HTML. Nó được hỗ trợ rộng rãi với ngoại lệ của Safari trên điện thoại di động.

03. Recolour UI trình duyệt

Colour themes for browsers — Chủ đề màu cho trình duyệt (Tín dụng hình ảnh: Ảnh của Marko Blažević trên unlash)

Điều này có thể cung cấp một liên lạc thẩm mỹ đẹp trên nền tảng di động. & lt; meta name = "nội dung" màu chủ đề "=" # ffffff "/ & gt; được thiết kế để hướng dẫn trình duyệt reColour thanh công cụ khi xem trang web của bạn. Thật không may, nó hơi không được chuẩn hóa, vì vậy trong khi "Màu chủ đề" Hoạt động với Chrome, Firefox và Opera, trên iOS bạn sẽ cần "Apple-Mobile-Web-App-Status-Bar-Style" (chỉ hoạt động ở chế độ toàn màn hình).

04. Hình ảnh khác nhau cho các màn hình khác nhau

Specifying the image and the resolution — Chỉ định hình ảnh và độ phân giải (Tín dụng hình ảnh: Ảnh của Trần Mau Tri Tâm trên Unsl gash)

Hy vọng rằng bạn đã thực hiện thiết kế đáp ứng, trong trường hợp đó, hình ảnh của bạn sẽ thay đổi kích thước để phù hợp với chế độ xem. Điều này không hoàn hảo, vì bạn sẽ buộc người dùng phải tải xuống phiên bản lớn nhất của hình ảnh sau đó hạ thấp nó. Nhập HTML5. & lt; hình ảnh & gt; Yếu tố, cho phép bạn chỉ định các hình ảnh khác nhau sẽ được hiển thị tùy thuộc vào độ phân giải màn hình, trang web đang được xem trên.

05. Rung điện thoại của bạn

Shakin' all over — Shakin 'tất cả hơn (Tín dụng hình ảnh: Ảnh của Gilles Lambert trên unlash)

API rung không rõ ràng được đặt tên rõ ràng cho thấy một chức năng duy nhất, rung (), sẽ thực hiện chính xác những gì nó nói trên các thiết bị hỗ trợ nó. Hàm lấy một danh sách mô tả một mô hình rung như đối số của nó. Nó sẽ hoạt động trên Chrome, Firefox và Opera, mặc dù bạn đã hết may mắn trên Edge hoặc Safari. Được biết, một số quảng cáo đang sử dụng điều này để thu hút sự chú ý của người dùng, vì vậy bồi thẩm đoàn về việc nó thực sự là một ý tưởng hay.

Bài viết này ban đầu xuất hiện trong Nhà thiết kế web Vấn đề 266. Mua nó ở đây .

Những bài viết liên quan:

10 thiết kế mẫu HTML5 tốt nhất
20 mẫu HTML để cung cấp cho các dự án thiết kế web của bạn một Headstart
Nail HTML của bạn với bảng cheat này

5 điều bạn không biết bạn có thể làm với HTML

01. Công nhận và tổng hợp bài phát biểu

02. Hiển thị một bộ chọn màu

03. Recolour UI trình duyệt

04. Hình ảnh khác nhau cho các màn hình khác nhau

05. Rung điện thoại của bạn

Cách - Các bài báo phổ biến nhất

Sử dụng Adobe XD để tạo tương tác vi mô

Hướng dẫn sinh sản: Cách vẽ như các bậc thầy cũ

Cách cải thiện nghệ thuật nhân vật của bạn

Vẽ một chú thỏ tinh nghịch trong màu nước

Xây dựng trò chơi vật lý WebGL của riêng bạn

Học hoạt hình cho trẻ em

Làm thế nào để điêu khắc kỹ thuật số trong zbrushcore

Tạo các bản sao kỹ thuật số chất lượng của nghệ thuật của bạn

Thể loại