Các lượt nộp
    Danh sách bài
    Trang chủ
    Báo lỗi
    solution
    Đăng nhập
    Đăng nhập

    Đề bài: [Thiết kế Web] Bộ khai triển Emmet tổng hợp

    📖Cần ôn lý thuyết? Đọc bài giảng Buổi 14: Các công cụ hỗ trợ: Emmet, Git/GitHub, SASS, Bootstrap, jQuery — khóa Thiết kế Web

    Hãy viết một bộ khai triển (parser) cho một tập con cú pháp Emmet gồm các quy tắc sau, theo đúng độ ưu tiên đã liệt kê (từ thấp đến cao khi phân tích, tức "+" được xét TRƯỚC ">" ở mức ngoài cùng của mỗi biểu thức):

    • Expr = Term ('+' Term)* : các Term nối bằng "+" là ANH EM cùng cấp, khai triển bằng cách nối chuỗi HTML của từng Term lại.
    • Term = Factor ('>' Factor)* : các Factor nối bằng ">" tạo quan hệ cha-con liên tiếp (Factor sau là con của Factor ngay trước).
    • Factor = Node | Group.
    • Node = tagname('.'class)(''k)? : một thẻ có thể có nhiều class (thêm thuộc tính class="c1 c2 ..." nếu có) và có thể có bội số *k ở cuối.
    • Group = '(' Expr ')' ('*'k)? : một Expr trong ngoặc đơn, CHỈ xuất hiện làm Factor CUỐI CÙNG của một Term (không có Factor nào sau Group trong cùng Term đó), có thể có bội số *k ở cuối.
    • Khi một Node hoặc Group có bội số *k, TOÀN BỘ phần đã khai triển của nó (kể cả các Factor phía sau nó trong Term, vì chúng lồng vào trong nó) được nhân bản y hệt k lần liên tiếp.

    Cho một chuỗi Emmet hợp lệ theo cú pháp trên (không có khoảng trắng, không có id/thuộc tính/text/$, chỉ gồm tagname, class, *, >, +, ( )), hãy khai triển thành HTML rút gọn (một dòng, không khoảng trắng thừa).

    • Định dạng đầu vào:

      Một dòng duy nhất là chuỗi Emmet hợp lệ theo cú pháp đã mô tả.

    • Ràng buộc đầu vào:

      Độ dài chuỗi tối đa 200 ký tự. Độ sâu lồng nhóm tối đa 2. Bội số 1 <= k <= 5.

    • Định dạng đầu ra:

      In ra một dòng duy nhất là chuỗi HTML đã khai triển đầy đủ.

    Ví dụ:

    Đầu vào:

    div.container>(header.top+main.content>p*2+footer.bottom)

    Đầu ra:

    <div class="container"><header class="top"></header><main class="content"><p></p><p></p></main><footer class="bottom"></footer></div>

    Chủ đề

    🌐 Thiết kế WebThiết kế WebThiết kế Web: Công cụ — Emmet & SASSTất cả môn học

    Đang tải editor...