🔗 Bài 3: Links & Media

<a href="https://www.google.com">Đi đến Google</a>
<a href="mailto:email@example.com">Gửi email</a>
<a href="tel:+84123456789">Gọi điện thoại</a>

<!-- Liên kết bên ngoài - mở tab mới + bảo mật -->
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
  Trang web bên ngoài
</a>

<!-- Liên kết download -->
<a href="document.pdf" download="TaiLieu.pdf" title="Tải xuống tài liệu">
  Tải tài liệu PDF
</a>

<!-- Liên kết nội bộ -->
<a href="about.html" target="_self" title="Trang giới thiệu">
  Giới thiệu
</a>

<!-- Tạo liên kết anchor -->
<a href="#section1">Đi đến phần 1</a>
<a href="#top">Về đầu trang</a>

<!-- Phần tử đích -->
<section id="section1">
  <h2>Nội dung phần 1</h2>
</section>

<nav class="table-of-contents">
  <h3>📚 Mục lục</h3>
  <ul>
    <li><a href="#gioi-thieu">Giới thiệu</a></li>
    <li><a href="#noi-dung">Nội dung chính</a></li>
    <li><a href="#ket-luan">Kết luận</a></li>
  </ul>
</nav>

<img src="duong-dan-hinh-anh.jpg" alt="Mô tả hình ảnh">

<!-- Với kích thước cụ thể -->
<img src="logo.png" alt="Logo công ty" width="200" height="100">

<!-- Từ URL bên ngoài -->
<img src="https://images.unsplash.com/photo-1461988320302-91bde64fc8e4?w=300&h=200&fit=crop&auto=format" alt="Hình ảnh demo">

<!-- Ảnh hero với priority cao -->
<img src="hero-banner.jpg" 
     alt="Khóa học lập trình web 2024 - Từ cơ bản đến nâng cao"
     width="1200" 
     height="600"
     title="Banner khóa học - Click để tìm hiểu thêm"
     fetchpriority="high"
     decoding="sync">

<!-- Ảnh trong content với lazy loading -->
<img src="tutorial-step1.png"
     alt="Bước 1: Tạo file HTML cơ bản với thẻ DOCTYPE"
     loading="lazy"
     decoding="async"
     title="Hướng dẫn chi tiết từng bước">

<!-- Ảnh trang trí (không cần alt) -->
<img src="decoration.svg" 
     alt=""
     role="presentation"
     loading="lazy">

<a href="https://www.example.com">
  <img src="https://images.unsplash.com/photo-1557804506-669a67965ba0?w=400&h=200&fit=crop&auto=format" alt="Banner quảng cáo">
</a>

<video width="400" height="300" controls>
  <source src="https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_1mb.mp4" type="video/mp4">
  <source src="https://sample-videos.com/zip/10/webm/SampleVideo_1280x720_1mb.webm" type="video/webm">
  Trình duyệt của bạn không hỗ trợ video.
</video>

<!-- Video giới thiệu sản phẩm -->
<video width="800" height="450" 
       controls 
       poster="https://images.unsplash.com/photo-1536240478700-b869070f9279?w=800&h=450&fit=crop&auto=format"
       preload="metadata"
       playsinline>
  <source src="https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_2mb.mp4" type="video/mp4">
  <source src="https://sample-videos.com/zip/10/webm/SampleVideo_1280x720_1mb.webm" type="video/webm">
  <p>Trình duyệt của bạn không hỗ trợ video HTML5. 
     <a href="https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_2mb.mp4">Tải video</a>
  </p>
</video>

<!-- Background video tự động phát -->
<video width="100%" height="400"
       autoplay 
       muted 
       loop 
       playsinline
       preload="auto">
  <source src="background-video.mp4" type="video/mp4">
  <source src="background-video.webm" type="video/webm">
  <!-- Fallback image cho trường hợp không hỗ trợ video -->
  <img src="fallback-image.jpg" alt="Background image">
</video>

<!-- Video bài giảng với track subtitle -->
<video controls preload="metadata">
  <source src="lesson-video.mp4" type="video/mp4">
  <track kind="subtitles" src="subtitles-vi.vtt" srclang="vi" label="Tiếng Việt">
  <track kind="subtitles" src="subtitles-en.vtt" srclang="en" label="English">
</video>

<!-- Audio player cơ bản -->
<audio controls preload="metadata">
  <source src="https://file-examples.com/storage/fe68c8606b6515ad79b2a56/2017/11/file_example_MP3_700KB.mp3" type="audio/mpeg">
  <source src="https://file-examples.com/storage/fe68c8606b6515ad79b2a56/2017/11/file_example_OGG_700KB.ogg" type="audio/ogg">
  <p>Trình duyệt của bạn không hỗ trợ audio HTML5. 
     <a href="https://file-examples.com/storage/fe68c8606b6515ad79b2a56/2017/11/file_example_MP3_700KB.mp3">Tải file audio</a>
  </p>
</audio>

<!-- Playlist audio với controls đầy đủ -->
<audio controls loop preload="metadata" volume="0.8">
  <source src="https://file-examples.com/storage/fe68c8606b6515ad79b2a56/2017/11/file_example_MP3_1MG.mp3" type="audio/mpeg">
  <source src="https://file-examples.com/storage/fe68c8606b6515ad79b2a56/2017/11/file_example_WAV_1MG.wav" type="audio/wav">
  <p>Trình duyệt không hỗ trợ phát audio.</p>
</audio>

<!-- Background music (ít dùng) -->
<audio autoplay muted loop preload="auto" volume="0.3">
  <source src="background-music.mp3" type="audio/mpeg">
  <source src="background-music.ogg" type="audio/ogg">
</audio>

<!-- Audio với JavaScript control -->
<audio id="myAudio" preload="none">
  <source src="notification.mp3" type="audio/mpeg">
</audio>
<button onclick="document.getElementById('myAudio').play()">
  Phát âm thanh thông báo
</button>

<!-- Iframe cơ bản với bảo mật tối thiểu -->
<iframe src="https://www.google.com/maps/embed?..."
        width="600" 
        height="400"
        style="border:0;"
        sandbox="allow-scripts allow-same-origin"
        loading="lazy"
        title="Bản đồ Google Maps">
</iframe>

<iframe width="560" 
        height="315"
        src="https://www.youtube.com/embed/VIDEO_ID"
        title="Tiêu đề video YouTube"
        frameborder="0"
        sandbox="allow-scripts allow-same-origin allow-presentation"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen
        loading="lazy"
        referrerpolicy="no-referrer-when-downgrade">
</iframe>

<iframe
  src="https://www.google.com/maps/embed?pb=!1m18!1m12..."
  width="100%"
  height="300"
  style="border:0;"
  sandbox="allow-scripts allow-same-origin"
  allowfullscreen=""
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
  title="Vị trí địa điểm trên Google Maps">
</iframe>

<!-- Iframe với bảo mật cao nhất -->
<iframe src="https://trusted-site.com/content"
        width="800"
        height="600"
        sandbox=""
        loading="lazy"
        referrerpolicy="no-referrer"
        title="Nội dung được nhúng an toàn">
  <p>Trình duyệt của bạn không hỗ trợ iframe.</p>
</iframe>

<!-- Iframe cho phép form nhưng không có script -->
<iframe src="https://survey.com/form"
        sandbox="allow-forms"
        title="Form khảo sát">
</iframe>

<figure>
  <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&h=400&fit=crop&auto=format" 
       alt="Phong cảnh núi non hùng vĩ với những đỉnh cao phủ đầy tuyết trắng"
       loading="lazy">
  <figcaption>
    <strong>Dãy núi Alps, Thụy Sĩ</strong> - 
    Chụp vào lúc hoàng hôn từ đỉnh Matterhorn. 
    <em>Ảnh: John Smith, 2023</em>
  </figcaption>
</figure>

<!-- Figure với video -->
<figure>
  <video controls width="500" loading="lazy">
    <source src="https://sample-videos.com/zip/10/mp4/SampleVideo_640x360_1mb.mp4" type="video/mp4">
    <p>Trình duyệt không hỗ trợ video.</p>
  </video>
  <figcaption>
    Video hướng dẫn: <cite>"Cách tạo website responsive"</cite> - 
    Phần 1: Thiết lập HTML cơ bản
  </figcaption>
</figure>

<!-- Figure với code snippet -->
<figure>
  <pre><code>
function calculateSum(a, b) {
  return a + b;
}
  </code></pre>
  <figcaption>
    <strong>Listing 1.1:</strong> Hàm tính tổng cơ bản trong JavaScript
  </figcaption>
</figure>

<!-- Figure với quote -->
<figure>
  <blockquote>
    "Học lập trình không chỉ là học syntax, mà là học cách tư duy logic."
  </blockquote>
  <figcaption>
    — <cite>Linus Torvalds</cite>, Tạo ra Linux kernel
  </figcaption>
</figure>

<!-- Figure với table/chart -->
<figure>
  <table>
    <thead>
      <tr><th>Năm</th><th>Doanh số</th></tr>
    </thead>
    <tbody>
      <tr><td>2022</td><td>100M</td></tr>
      <tr><td>2023</td><td>150M</td></tr>
    </tbody>
  </table>
  <figcaption>
    <strong>Bảng 2.1:</strong> Tăng trường doanh số công ty qua các năm
  </figcaption>
</figure>