HAML LÀ GÌ

Nếu chúng ta đã từng biết đến ngôn từ lập trình sẵn LESS, Styles… Chúng rất nhiều tạo ra các phương pháp viết CSS nkhô hanh, tác dụng rộng với nếu khách hàng đã từng có lần áp dụng, các bạn sẽ Review cao sự linh hoạt mà lại bọn chúng mang về mang đến dự án của khách hàng.Quý Khách đã xem: Haml là gì

Với HTML bạn sẽ tự hỏi vì sao này lại thừa dài mẫu nlỗi vậy? Tại sao không có bất kì ai đó đơn giản hóa nó ? Hôm ni, chúng ta vẫn cùng khám phá phương pháp thực hiện Haml để buổi tối ưu hóa HTLM. Về cơ bản, Haml là ngữ điệu markup thu gọn gàng giúp Việc viết HTML thuận tiện hơn có thể thực hiện đến nhiều ngôn ngữ PHPhường, ASP, ERB...được áp dụng các tốt nhất là Ruby on Rails.

Bạn đang xem: Haml là gì

1.Sự biệt lập giữa HTLM và Haml.

Bây tiếng, bạn đã có một định nghĩa cơ bạn dạng về Haml, đã tới khi coi nó chuyển động như thế nào?

VớiHTML:

Hello World

Chú ý đầy đủ cấu trúc đơn giản tốt nhất của HTML đều phải có sự tái diễn. Trong Haml ta gắng điều này bằng thẻ %p.

VớiHaml:

%p Hello WorldHaml dựa vào khoảng white để khẳng định đầu ra output, bên dưới đây là một vật chứng.

Haml:

%h3.title Halloween%p.date Tuesday, October 31, 2006%div %ul %li %a:href => "#devices-tab" Devices %li %a:href => "#options-tab" System Options %li %a:href => "#reports-tab" Reports %li %a:href => "#notes-tab" NotesLần đầu đối với bạn có thể khá trở ngại tuy vậy đoạn code sống bên trên đó là đoạn code làm việc bên dưới, tức là bọn chúng trọn vẹn tương tự cùng nhau. Nếu họ viết đoạn Haml sinh hoạt trên cùng đưa vào trình thông ngôn, nó vẫn đã cho ra HTML dưới.

HTML:

Halloween

Tuesday, October 31, 2006

Nlỗi bạn cũng có thể thấy, phiên bản HTML hưởng thụ tương đối nhiều ký kết tự. Sử dụng Haml, bọn họ đã tiết kiệm rộng 30 tổ hợp phím vào một đoạn code bé dại. Nhân lên cùng với tổng thể website, bạn sẽ thấy đó là 1 trong số lượng lớn lao.

Xem thêm: Cách Viết Đơn Chuyển Trường, Mẫu Đơn Xin Chuyển Trường Thpt Trong Tỉnh

Classes và IDs

Haml:

%div %ul.tabs %li#vật phẩm %a:href => "#devices-tab" Devices %li#item %a:href => "#options-tab" System Options %li#thắng lợi %a:href => "#reports-tab" Reports %li#thắng lợi %a:href => "#notes-tab" NotesNhư chúng ta thấy symbol “.” Và “#” được áp dụng để biểu hiện classes với IDs tương ứng. Thật tuyệt vời và hoàn hảo nhất bởi các bạn vẫn thân quen cùng với phương pháp này trong CSS. Một khi bạn đã có lần thực hiện CSS, bạn trọn vẹn có thể áp dụng với Haml. Đây là bí quyết tiến hành đoạn code.

HTML:

Divs

Hãy trung thực rằng trong cả những nguyên tố mớ lạ và độc đáo độc nhất vô nhị của HTML5, chúng ta cũng chỉ thích thú divs. Cho rằng đấy là nhân tố phổ cập, Haml đang tất cả một cú pháp đặc trưng đơn giản và dễ dàng. Hãy quan tâm đến triển khai với Haml.

HTML:

Với hầu hết gì bọn họ vẫn học tập được, các bạn sẽ ko nghi hoặc cú pháp “%div” là quan trọng tại chỗ này. Tuy nhiên, Haml chất nhận được các bạn bỏ qua toàn bộ cú pháp div. Để gồm đoạn HTML nlỗi trên vào Haml, toàn bộ bạn cần chỉ là:

Haml:

#someDivChỉ đề xuất điều này là đủ. Đoạn code này là div hoàn hảo với 1 ID của “someDiv”. ngay khi khi bạn thiếu tín nhiệm rằng nó hơi nđính gọn gàng. Một lần tiếp nữa, họ lại thấy được tác dụng cụ thể của vấn đề viết markup nlỗi lúc họ viết CSS.

khi cần chắc chắn rằng rằng bạn thiệt sự vắt được biện pháp chuyển động, sau đó là một ví dụ lớn hơn. Lần này chúng ta sẽ áp dụng div bao gồm với nhì div bên phía trong cùng với các nhân tố khác.

Haml:

#container .box %h2 Some Headline %p Lorem ipsum doller your mom... %ul.mainList %li One %li Two %li Three .box %h2 Some Headline %p Lorem ipsum doller your mom... %ul.mainList %li One %li Two %li ThreeHTML:

Some Headline

Lorem ipsum doller your mom...

One Two Three

Some Headline

Lorem ipsum doller your mom...

One Two Three

Vậy HTML5 thì như thế nào?

Chỉ trong ngôi trường đúng theo các bạn trường đoản cú hỏi rằng Haml tất cả vận động tốt cùng với các tag mới vào HTML5 hay không. Điều đó là trọn vẹn được, chúng ta cũng có thể coi đoạn code dưới.