Gần đây tôi thấy mình đang khám phá xung quanh https. //www. cố vấn giao diện người dùng. io/thử thách. Đây là một trang web trình bày một loạt các thử thách nhắc người dùng theo dõi các tệp thiết kế mô phỏng của thử thách. Sau đó, người dùng cố gắng sao chép các trang web sao chép pixel hoàn hảo. Tôi quyết định tham gia một thử thách có tên là phần tính năng bốn thẻ dành cho người mới 😎. Có vẻ như đây là một nhiệm vụ khá dễ dàng cho đến khi tôi nhìn thấy điều đầu tiên mà tôi muốn xây dựng. tiêu đề của nó

Thử thách 👊

Quên đoạn màu xám và tập trung vào tiêu đề. Bạn có thể thấy rằng nó trải dài trên hai dòng thay vì một dòng truyền thống và các dòng có hình thức khác nhau

Chia thành các vấn đề nhỏ hơn 🔡

Cách tiếp cận Không. 1

Trực giác ngây thơ của tôi là tạo ra hai phần tử

Reliable, efficient delivery 
Powered by Technology

1, một phần tử cho mỗi dòng như thế này

Reliable, efficient delivery
Powered by Technology

Nó xuất hiện như một giải pháp khả thi vì các phần tử

Reliable, efficient delivery 
Powered by Technology

1 là các phần tử cấp khối và chúng sẽ chiếm toàn bộ chiều rộng của vùng chứa của nó và chia thành một dòng mới. Tuy nhiên, điều đó sẽ ảnh hưởng đến điểm SEO của trang web.

Reliable, efficient delivery 
Powered by Technology

1 cho biết tiêu đề quan trọng nhất và chỉ nên có một tiêu đề cho toàn bộ trang web. Nếu trình thu thập dữ liệu của trình duyệt web của bạn nhìn thấy nhiều hơn một tiêu đề h1, nó sẽ trừ một số điểm SEO

Cách tiếp cận Không. 2

Có lẽ chúng ta nên bọc toàn bộ tiêu đề trong một

Reliable, efficient delivery 
Powered by Technology

1 duy nhất nhưng làm thế nào chúng ta có thể xử lý việc ngắt dòng dọc theo các dòng? . Nó được gọi theo nghĩa đen là đường ngắt và là thẻ tự đóng. Vì vậy, bây giờ chúng ta có thể làm một cái gì đó như thế này

Reliable, efficient delivery 
Powered by Technology

Nhược điểm là chúng tôi không thể thực sự kiểm soát chiều cao của khoảng cách giữa ngắt dòng nhưng điều này là đủ cho nhu cầu của chúng tôi. ]

Cách tiếp cận Không. 3

Bây giờ việc ngắt dòng đã được xử lý, hãy xử lý các kiểu dáng khác nhau trên mỗi dòng. Những gì tôi muốn làm là tạo kiểu mặc định cho tiêu đề h1 và tạo phần tử bao quanh dòng thứ 2 để áp dụng các kiểu riêng biệt. Điều này đặt ra câu hỏi. phần tử bao bọc nào?
Tôi sẽ sử dụng

Reliable, efficient delivery 
Powered by Technology

0.

Reliable, efficient delivery 
Powered by Technology

0 là một phần tử HTML chung bao quanh các phần tử nội tuyến trong khi

Reliable, efficient delivery 
Powered by Technology

2 là một trình bao bọc chung cho bất kỳ thứ gì khác ngoài các phần tử nội tuyến. Bây giờ, nó trông như thế này.

Reliable, efficient delivery 
Powered by Technology

Sau đó, bạn có thể nhắm mục tiêu khoảng bên trong h1 để có trọng lượng phông chữ nặng hơn và màu khác

h1 span {
  font-weight: 700;
  color: hsl[234, 12%, 34%];
}

Giải pháp này không tệ vì nó thực hiện được những gì chúng tôi mong đợi và người ta thường thấy việc sử dụng

Reliable, efficient delivery 
Powered by Technology

0 để đạt được kết quả tương tự ở những nơi khác. Nhưng tôi không phải là một fan hâm mộ lớn vì span quá chung chung do đó không có ý nghĩa ngữ nghĩa nào liên quan đến nó

Cách tiếp cận Không. 4

Chúng tôi đã biết rằng chúng tôi sẽ làm cho dòng thứ 2 của tiêu đề đậm hơn, vậy tại sao chúng tôi không thực sự sử dụng một phần tử HTML để giải quyết vấn đề đó? . [Về mặt kỹ thuật, chúng ta có thể sử dụng thẻ

Reliable, efficient delivery 
Powered by Technology

5 để xem kết quả tương tự nhưng nó có ý nghĩa ngữ nghĩa khác]

Reliable, efficient delivery 
Powered by Technology

0

Sau đó, trong css, bạn chỉ cần thay đổi màu của nó vì kiểu in đậm đã được đánh dấu áp dụng

Món ăn vặt 💡

Có rất nhiều lợi ích đi kèm với việc sử dụng các yếu tố ngữ nghĩa. Nó giúp ích cho điểm SEO, cung cấp cấu trúc HTML rõ ràng và dễ hiểu hơn, có thể giúp bạn tiết kiệm các dòng css, giúp trang web dễ truy cập hơn, v.v. Tôi khuyên bạn nên tìm hiểu một số yếu tố ngữ nghĩa có trong HTML5. https. //html5-tài liệu. hiện nay. sh/