HTML5 – CSS – Tutorial – Step 6

Phần tử nội dung (content) của HTML5

content-img-6
. Hỗ trợ sự tương thích trên các trình duyệt cho thành phần HTML5
. Sử dụng file reset.css: khai báo để buộc các phần tử mới của HTML5 hiển thịnhưmột khối (block) thay vì hiển thị inline

header, section, aside, nav, footer, figure, figcaption{ 
   display:block;
}

. Sử dụng javascript (đối với phiên bản IE 6,7,8)

<link rel="stylesheet" href="reset.css" type="text/css" />
<link rel="stylesheet" href="base.css" type="text/css" />
<script src="modernizr-1.7.js” type="text/javascript"></script> 


– Phần tử <header>:
. Đại diện cho một nhóm hỗ trợ giới thiệu hoặc định hướng
. Có thể chứa: phần tử tiêu đề(h1 -> h6), <hgroup>, bảng chứa nội dung, form tìm kiếm, …
. Trong HTML5 có thể sử dụng phần tử này nhiều lần

<header> 
    <h1> The web's #1 resource for smoothie recipes </h1> 
    <img src="images/smoothieworld_logo.jpg”width="200" height="150”alt="smoothieworld_logo" /> 
</header> 


– Phần tử <nav>:
. Thường được sử dụng để chứa các thành phần điều hướng cho web
nav điều hướng
nav-img


– Thành phần <section> :
. Biểu diễn một vùng chung của tài liệu hoặc ứng dụng
. Nên sử dụng một section khi muốn phân chia nội dung quan trọng như văn bản và hình ảnh, thành các vùng

<sectionid="introduction-content"> 
   <p><small>&copy; copyright 2038 </small></p> 
</section> 

section


– Thành phần <article>:
. Là thành phần tự chứa trong một tài liệu, trang, ứng dụng hoặc site
. Có thể lồng phần tử <article> vào trong phần tử <section>
. Là lựa chọn tối ưu để chứa nội dung sẽ được đăng tải trong những ngữ cảnh khác nhau hay thậm chí trên các thiết bị riêng biệt
. Phần tử article có thể có một <header>, <footer>

<article> 
   <header> 
      <h2>A review of the Blend-o-Matic3000</h2> 
   </header> 
</article>


– Thành phần <aside>:
. Cách sửdụng:
  •Sử dụng cho vùng sidebar của website
  •Sử dụng cho một vùng nội dung liên quan bên trong phần tử <section>.

aside


– Thành phần <footer>:
. Không thuộc lớp các phần tử chia đoạn; có thể có nhiều footer trên một trang web

footer

Copyright © 2018. Powered by WordPress & Romangie Theme.