Bài viết so với phần HTML
|
Hãy nghĩ về các bài viết như một đoạn thông tin có thể tự đứng vững nếu cần. Ví dụ: một bài báo hoặc câu chuyện trên một tờ báo hoặc trang web tin tức. Trong mỗi trong số này, bạn sẽ tìm thấy nhiều bài báo Show
Sau đây là những ví dụ về một bài viết Phần là một nhóm thông tin có liên quan với nhau, thường bắt đầu bằng tiêu đề (h1-h6). Đây có thể là phần chứa các bài viết liên quan, phần nội dung bên trong bài viết hoặc phần nội dung không liên quan gì đến bài viết cả. Một phần không phải là một nhóm nội dung có thể tự đứng vững mà thường là một phần của tổng thể lớn hơn
Sau đây là một ví dụ về thẻ phần
Hoạt động Tại đây, bạn có thể kiểm tra những gì mình đã đọc và đạt được các huy hiệu. Hướng dẫn hoạt độngHãy thử sử dụng thẻ bài viết và phần. Lưu ý rằng các thẻ này không có chất lượng hiển thị sẽ hiển thị trong cửa sổ trình duyệt theo mặc định Đôi khi rất khó để thấy sự khác biệt giữa các yếu tố mạo từ và phần, vì vậy hãy tiếp tục đọc bài viết này khi chúng tôi khám phá và giải thích sự khác biệt chính của chúng nội dung Phần tử bài viết HTMLTrước khi chúng tôi giải thích và minh họa sự khác biệt chính giữa các phần tử HTML của bài viết và phần, chúng ta phải thảo luận về các chức năng chính của chúng. Phần tử HTML được sử dụng khi nó có nội dung độc lập và khép kín. Bất kỳ bài viết cụ thể nào trên trang web của bạn phải truyền đạt ý nghĩa mà không bị phụ thuộc vào các bài viết khác trên cùng một trang web. Để làm như vậy, bạn sẽ sử dụng thẻ HTML của bài viết và bọc nội dung giữa thẻ mở và thẻ đóng. Bạn nên sử dụng phần tử bài viết HTML trong các trường hợp sau
Phần tử này không có bất kỳ giá trị kiểu dáng nào và chỉ đơn giản là sẽ phân chia nội dung của bạn. Tuy nhiên, bạn có thể sử dụng các thuộc tính tạo kiểu CSS cụ thể để thay đổi kết quả trực quan. Chúng tôi sẽ cung cấp cho bạn hai cú pháp để bạn có thể thấy việc triển khai chúng đơn giản như thế nào – Tạo cú pháp HTML cơ bảnViết đúng cú pháp khi sử dụng phần tử bài viết HTML không cần tốn nhiều công sức. Bạn thường phải thêm tiêu đề và đoạn văn bên trong thẻ mở và thẻ đóng. Hơn nữa, bạn có thể tạo nhiều khối bài viết HTML trên trang web của mình và sau đó tạo kiểu cho chúng bằng các thuộc tính CSS cụ thể. Ví dụ của chúng tôi sẽ chứa ba bài viết HTML và mỗi bài viết sẽ được gán cho một lớp cụ thể Chúng ta hãy quan sát ví dụ cú pháp HTML sau đây Các Trình Duyệt Web Phổ Biến NhấtGoogle ChromeGoogle Chrome là một trong những trình duyệt được sử dụng rộng rãi nhất hiện nay. Nó được phát hành vào năm 2008 bởi Google. Mozilla FirefoxMozilla Firefox gần đây đã trở thành trình duyệt phổ biến nhất. Nó được thiết kế bởi Mozilla. Microsoft EdgeMicrosoft Edge thay thế Internet Explorer. Microsoft đã thiết kế và phát hành nó vào năm 2015. Ba bài viết được bao bọc bên trong một bài viết HTML duy nhất. Các nhà phát triển web khuyên bạn nên làm điều này để tạo cú pháp HTML chính xác và chuyên nghiệp hơn. Chúng tôi đã bao gồm các lớp trong các thành phần này để bạn có thể tạo kiểu cho chúng bằng các thuộc tính tạo kiểu CSS cụ thể – Tạo cú pháp CSSCách dễ nhất để thay đổi kết quả trực quan của bất kỳ thành phần HTML nào là sử dụng các thuộc tính kiểu dáng CSS cụ thể. Các chuyên gia khuyên bạn nên viết cú pháp này trên một tài liệu riêng để điều hướng dễ dàng và mượt mà hơn. Các thuộc tính CSS mà chúng tôi đã đưa vào sẽ thay đổi lề và màu nền. Tuy nhiên, bạn có thể thêm các thuộc tính khác nếu muốn thay đổi các giá trị mặc định khác Hãy để chúng tôi quan sát cú pháp CSS sau đây tất cả các trình duyệt { lề. 0; đệm. 7px; màu nền. màu xanh da trời; } tất cả trình duyệt > h1,. trình duyệt { lề. 9px; đệm. 4px; } trình duyệt { lai lịch. xám; } trình duyệt > h2, p { lề. 5px; cỡ chữ. 85%; } Nếu bạn bao gồm cú pháp CSS trong cùng một tài liệu HTML, bạn phải bọc chúng trong phần tử kiểu HTML. Có một số lớp CSS trong ví dụ này và mỗi lớp chứa các thuộc tính tạo kiểu khác nhau. Hơn nữa, đây là tất cả những gì cần thiết để tìm hiểu về phần tử bài viết HTML, vì vậy bây giờ chúng ta có thể chuyển sang phần tử phần HTML Phần tử phần HTMLPhần tử phần HTML đại diện cho một phần tử phân chia chung vì nó chia tài liệu thành các phần được xác định theo chủ đề. Như với bài viết HTML, phần tử này cũng được theo sau bởi một tiêu đề và một đoạn văn. Các nhà phát triển web thường sử dụng phần tử này để chia các tài liệu dài thành các chương, tạo các tab khác nhau và chia các chủ đề khác nhau trên trang web của bạn. Hơn nữa, bạn phải sử dụng các thẻ sau bên trong phần tử phần HTML
Đây là một số thẻ phổ biến nhất được sử dụng khi tạo một phần riêng trên trang web của bạn. Phần tử này sẽ không chia nội dung thành các khối cụ thể cho mục đích tạo kiểu vì nó chỉ tạo các nhóm theo chủ đề. Nếu bạn muốn tạo các khối riêng biệt, bạn nên sử dụng phần tử div HTML. Bây giờ, chúng ta hãy xem xét một số ví dụ – Tạo cú pháp HTML cơ bảnKhá dễ dàng để tạo một cú pháp phần HTML đầy đủ chức năng vì phương pháp này tương tự như phần tử bài viết. Bạn chỉ cần bọc nội dung bên trong thẻ mở và thẻ đóng Chúng tôi sẽ cung cấp cho bạn một ví dụ cũng sẽ có các phần tử khác, để bạn có thể thấy chức năng của phần tử phần HTML dễ dàng hơn. Phần tử này thường không yêu cầu bất kỳ thuộc tính tạo kiểu CSS nào Quảng cáoMáy định hình ếch 5000 mới. Mọi thứ bạn cần để giữ dáng trong mùa đông này. Làm sao để giữ dáng trong mùa dịch?Trong đại dịch toàn cầu, điều rất quan trọng là phải có một lối sống lành mạnh… Bài viết khácBạn có thể bọc các phần tử khác nhau bên trong phần tử phần HTML của mình, như bạn có thể thấy. Trong phần tử phần đầu tiên, chúng tôi đã bao gồm các phần tử HTML tiêu đề và đoạn văn chung. Tuy nhiên, trong phần tử phần thứ hai, chúng tôi đã tạo một danh sách không có thứ tự bao gồm hai mục danh sách Điều này sẽ tạo ra hai phần khác nhau trên trang web của bạn, bao gồm phần chính giữa – Tạo cú pháp CSSNhư chúng tôi đã nói trước đây, phần tử này không yêu cầu nhiều thuộc tính kiểu dáng. Tuy nhiên, chúng tôi sẽ cung cấp cho bạn một cú pháp CSS đơn giản sẽ ẩn nội dung cụ thể để cải thiện công nghệ hỗ trợ. Điều này sẽ giúp những người sử dụng trình đọc màn hình Vui lòng quan sát ví dụ CSS sau đây, có chứa ba thuộc tính kiểu dáng ẩn giấu {Chức vụ. tuyệt đối; đứng đầu. -9999px; bên trái. -9999px; } Mặc dù bạn có thể bao gồm các thuộc tính kiểu dáng khác cho các thành phần cụ thể trong ví dụ trước, nhưng điều đó là không bắt buộc. Cú pháp CSS đơn giản này là đủ, không chỉ để hỗ trợ những người sử dụng trình đọc màn hình mà còn để cải thiện SEO trang web của bạn (Tối ưu hóa Công cụ Tìm kiếm) Phần HTML vs Các yếu tố bài viết. Nhận thấy sự khác biệt của họBây giờ bạn đã quen thuộc với phần HTML và các thành phần bài viết, chúng ta sẵn sàng bắt đầu thảo luận về sự khác biệt của chúng Trên một lưu ý chung, các nhà phát triển web khuyên bạn nên sử dụng phần tử bài viết HTML trên phần tử phần. Một lý do đơn giản hỗ trợ cho ý kiến này là phần tử bài viết xây dựng màn hình tối ưu cho người dùng có màn hình nhỏ hơn. Mặt khác, nếu bạn muốn làm điều tương tự với phần tử phần HTML, bạn sẽ sử dụng các thuộc tính tạo kiểu CSS cụ thể Cách dễ nhất để nhận thấy chúng khác nhau như thế nào là xem một ví dụ có chứa cả hai yếu tố. Chúng ta sẽ tạo các lớp cụ thể trong một số phần tử HTML, vì vậy sau này chúng ta có thể áp dụng các thuộc tính kiểu dáng CSS cụ thể. Phần tử bài viết sẽ chứa nội dung độc lập, trong khi phần tử phần sẽ chia phần cụ thể trên trang web của bạn – Nhìn vào một ví dụ hoàn chỉnh chứa cả hai yếu tốVì hai phần tử này được sử dụng để bọc nội dung cụ thể trên trang web của bạn nên chúng phải được đưa vào phần nội dung của tài liệu HTML của bạn. Hơn nữa, chúng tôi sẽ bao gồm ba phần tử div HTML. ở phần sau của bài viết này, chúng tôi sẽ giải thích lý do tại sao bạn cũng nên làm điều này trong tài liệu HTML của mình Chúng ta hãy quan sát ví dụ HTML sau <. LOẠI TÀI LIỆU html><đầu> Sử dụng cả hai thẻ trong một tài liệu HTML Mọi thứ về máy tính của bạnCổng thông tin khoa học máy tính tốt nhất Đây là nơi chúng tôi bao gồm thẻ bài viếtThe article tag is placed above the element Phần này không chứa thẻ bài viết HTMLTiêu đề trong phần này sẽ xuất hiện lớn hơn trước Đây là nơi chúng tôi bao gồm thẻ phầnThe section tag is placed above the element Phần này không chứa thẻ phần HTMLTiêu đề trong phần này sẽ xuất hiện lớn hơn trước |