Tiêu đề Html vừa với màn hình

Question

Phần tử HTML <header> đại diện cho nội dung giới thiệu, thường là một nhóm hỗ trợ giới thiệu hoặc điều hướng. Nó có thể chứa một số thành phần tiêu đề nhưng cũng có logo, biểu mẫu tìm kiếm, tên tác giả và các thành phần khác

Nội dung chính Show

ghi chú sử dụng
Sử dụng lịch sử
Thuộc tính
Tiêu đề trang
Tiêu đề bài viết
khả năng tiếp cận
Tóm tắt kỹ thuật

Thử nó

ghi chú sử dụng

Phần tử <header> có ý nghĩa giống hệt với vai trò mốc

<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>
      Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by
      Jane Smith
    </p>
  </header>
  <p>
    We live on a planet that's blue and green, with so many things still unseen.
  </p>
  <p><a href="https://example.com/the-planet-earth/">Continue reading…</a></p>
</article>

0 trên toàn trang web, trừ khi được lồng trong nội dung phân đoạn. Khi đó, phần tử <header> không phải là mốc

Phần tử <header> có thể xác định tiêu đề trang web toàn cầu, được mô tả là

<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>
      Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by
      Jane Smith
    </p>
  </header>
  <p>
    We live on a planet that's blue and green, with so many things still unseen.
  </p>
  <p><a href="https://example.com/the-planet-earth/">Continue reading…</a></p>
</article>

0 trong cây khả năng truy cập. Nó thường bao gồm logo, tên công ty, tính năng tìm kiếm và có thể là điều hướng toàn cầu hoặc khẩu hiệu. Nó thường nằm ở đầu trang

Mặt khác, nó là một

<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>
      Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by
      Jane Smith
    </p>
  </header>
  <p>
    We live on a planet that's blue and green, with so many things still unseen.
  </p>
  <p><a href="https://example.com/the-planet-earth/">Continue reading…</a></p>
</article>

4 trong cây khả năng tiếp cận và thường chứa tiêu đề của phần xung quanh (phần tử

<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>
      Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by
      Jane Smith
    </p>
  </header>
  <p>
    We live on a planet that's blue and green, with so many things still unseen.
  </p>
  <p><a href="https://example.com/the-planet-earth/">Continue reading…</a></p>
</article>

5 –

<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>
      Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by
      Jane Smith
    </p>
  </header>
  <p>
    We live on a planet that's blue and green, with so many things still unseen.
  </p>
  <p><a href="https://example.com/the-planet-earth/">Continue reading…</a></p>
</article>

0) và tiêu đề phụ tùy chọn, nhưng điều này không bắt buộc

Sử dụng lịch sử

Phần tử <header> ban đầu tồn tại ở phần đầu của HTML cho các tiêu đề. Nó được nhìn thấy trong trang web đầu tiên. Tại một số thời điểm, các tiêu đề đã trở thành

<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>
      Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by
      Jane Smith
    </p>
  </header>
  <p>
    We live on a planet that's blue and green, with so many things still unseen.
  </p>
  <p><a href="https://example.com/the-planet-earth/">Continue reading…</a></p>
</article>

2 đến

<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>
      Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by
      Jane Smith
    </p>
  </header>
  <p>
    We live on a planet that's blue and green, with so many things still unseen.
  </p>
  <p><a href="https://example.com/the-planet-earth/">Continue reading…</a></p>
</article>

3, cho phép <header> tự do thực hiện một vai trò khác

Thuộc tính

Phần tử này chỉ bao gồm các thuộc tính toàn cầu

ví dụ

Tiêu đề trang

<header>
  <h1>Main Page Title</h1>
  <img src="mdn-logo-sm.png" alt="MDN logo" />
</header>

Tiêu đề bài viết

<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>
      Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by
      Jane Smith
    </p>
  </header>
  <p>
    We live on a planet that's blue and green, with so many things still unseen.
  </p>
  <p><a href="https://example.com/the-planet-earth/">Continue reading…</a></p>
</article>

khả năng tiếp cận

Phần tử <header> xác định mốc

<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>
      Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by
      Jane Smith
    </p>
  </header>
  <p>
    We live on a planet that's blue and green, with so many things still unseen.
  </p>
  <p><a href="https://example.com/the-planet-earth/">Continue reading…</a></p>
</article>

0 khi ngữ cảnh của nó là phần tử

<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>
      Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by
      Jane Smith
    </p>
  </header>
  <p>
    We live on a planet that's blue and green, with so many things still unseen.
  </p>
  <p><a href="https://example.com/the-planet-earth/">Continue reading…</a></p>
</article>

7. Phần tử tiêu đề HTML không được coi là mốc biểu ngữ khi nó là hậu duệ của phần tử

<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>
      Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by
      Jane Smith
    </p>
  </header>
  <p>
    We live on a planet that's blue and green, with so many things still unseen.
  </p>
  <p><a href="https://example.com/the-planet-earth/">Continue reading…</a></p>
</article>

8,

<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>
      Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by
      Jane Smith
    </p>
  </header>
  <p>
    We live on a planet that's blue and green, with so many things still unseen.
  </p>
  <p><a href="https://example.com/the-planet-earth/">Continue reading…</a></p>
</article>

9, <header>0, <header>1 hoặc <header>2

Tóm tắt kỹ thuật

Danh mục nội dung Nội dung trôi chảy, nội dung có thể sờ thấy. Nội dung được phép Nội dung luồng, nhưng không có hậu duệ <header> hoặc <header>4. Bỏ sót thẻKhông có, cả thẻ bắt đầu và thẻ kết thúc đều bắt buộc. Cha mẹ được phép Bất kỳ phần tử nào chấp nhận nội dung luồng. Lưu ý rằng phần tử <header> không được là hậu duệ của phần tử <header>6, <header>4 hoặc một phần tử <header> khác. Biểu ngữ vai trò ARIA ngầm định hoặc không có vai trò tương ứng nếu là hậu duệ của phần tử <header>9, <header>0, <header>1, <header>2 hoặc <header>3 hoặc phần tử có <header>4, <header>5, <header>6, <header>7 hoặc <header>8 Các vai trò ARIA được phép<header>9,

<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>
      Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by
      Jane Smith
    </p>
  </header>
  <p>
    We live on a planet that's blue and green, with so many things still unseen.
  </p>
  <p><a href="https://example.com/the-planet-earth/">Continue reading…</a></p>
</article>

00 hoặc

<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>
      Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by
      Jane Smith
    </p>
  </header>
  <p>
    We live on a planet that's blue and green, with so many things still unseen.
  </p>
  <p><a href="https://example.com/the-planet-earth/">Continue reading…</a></p>
</article>

01DOM giao diện

<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>
      Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by
      Jane Smith
    </p>
  </header>
  <p>
    We live on a planet that's blue and green, with so many things still unseen.
  </p>
  <p><a href="https://example.com/the-planet-earth/">Continue reading…</a></p>
</article>