| Chứa thông tin chung của trang. Thường có </code>, ngoài ra có <code><meta></code>, <code><style></code>, <code><script></code>.</td></tr><tr><td><code><body></code></td><td>Chứa toàn bộ nội dung hiển thị của trang web.</td></tr><tr><td><code><meta></code></td><td>Mô tả thông tin bổ sung: mã hoá ký tự, từ khoá, tác giả. Ví dụ <code><meta charset="utf-8"></code> khai báo mã UTF-8.</td></tr><tr><td><code><title></code></td><td>Tên trang web (hiện trên tab và kết quả tìm kiếm). Chỉ chứa văn bản thường, không chứa phần tử con.</td></tr><tr><td><code><h1></code>...<code><h6></code>, <code><p></code></td><td>Các thẻ định dạng văn bản. <code><h1></code>–<code><h6></code> là tiêu đề giảm cấp dần; <code><p></code> là một đoạn văn.</td></tr></tbody></table></div>
<p>Ý chính cần nhớ:</p>
<ul><li>Các phần tử HTML có thể lồng nhau, tạo quan hệ cha – con như một cây.</li><li>Gốc của cây HTML luôn là phần tử <code><html></code>.</li><li>HTML không hiểu ký tự xuống dòng (Enter) để kết thúc đoạn như Word; muốn ngắt đoạn phải dùng thẻ.</li></ul>
<p>Phần mềm soạn thảo HTML: có thể dùng Notepad (đơn giản, có sẵn trên Windows; MacOS có TextEdit), Notepad++ (miễn phí, mã nguồn mở, đa ngôn ngữ) hoặc Sublime Text (có bản miễn phí). Với Notepad++ chọn ngôn ngữ qua Language → H → HTML; với Sublime Text chọn qua View → Syntax → HTML.</p>
<h3>Câu hỏi 1: Vẽ sơ đồ cây của đoạn HTML</h3>
<p>Đề bài:</p>
<pre><code><p>Thông tin này in <b>đậm</b>, in <i>nghiêng</i> in <u>gạch dưới</u>, in bình thường.</p></code></pre>
<p>Lời giải từng bước:</p>
<p>Trước hết ta xác định các phần tử và quan hệ lồng nhau:</p>
<ul><li>Phần tử ngoài cùng là <code><p></code> (một đoạn văn).</li><li>Bên trong <code><p></code> có 3 phần tử con: <code><b></code> (in đậm), <code><i></code> (in nghiêng), <code><u></code> (gạch dưới).</li><li>Các đoạn chữ "Thông tin này in", ", in", " in", ", in bình thường." là văn bản nằm trực tiếp trong <code><p></code> (không phải thẻ).</li></ul>
<p>Sơ đồ cây (lấy <code><p></code> làm gốc của đoạn này):</p>
<pre><code> p
┌────────┼────────┐
b i u
(đậm) (nghiêng) (gạch dưới)</code></pre>
<p>Diễn giải: <code><p></code> là nút cha, có 3 nút con cùng cấp là <code><b></code>, <code><i></code>, <code><u></code>. Mỗi thẻ con chỉ chứa văn bản thường nên không có nút con tiếp theo. Phần văn bản in bình thường là nội dung text trực tiếp của <code><p></code>, không tạo thành nút thẻ riêng.</p>
<h3>Câu hỏi 2: Cây HTML có bao nhiêu phần tử gốc?</h3>
<p>Đáp án: 1 phần tử gốc.</p>
<p>Giải thích: Một cây luôn có duy nhất một nút gốc (root). Trong cây HTML, nút gốc đó chính là phần tử <code><html></code> — phần tử bao bọc toàn bộ các phần tử khác của trang. Vì mọi phần tử còn lại đều nằm bên trong <code><html></code> nên không thể có hai phần tử gốc. Đây cũng là lý do mỗi tệp HTML chỉ có một cặp thẻ <code><html>...</html></code>.</p>
<p>Nếu bạn gửi đúng ảnh trang 44–45, mình giải tiếp phần đó cho bạn nhé.</p></div><a class="sol-cta" href="https://hockha.com/reader?id=lop12-tin-hoc-khmt&p=21"><svg class="ico-book" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg> Chế độ đọc sách →</a><nav class="sol-nav" aria-label="Trang trước/sau"><a href="/giai/lop12-tin-hoc-khmt/20">← Trang trước</a><a href="/giai/lop12-tin-hoc-khmt/22">Trang sau →</a></nav></article></main><footer class="site-footer"><div class="container"><p class="disclaimer"><a href="/legal" style="text-decoration: underline;">Điều khoản sử dụng</a></p></div></footer><button class="to-top" id="toTop" aria-label="Lên đầu trang">↑</button><nav class="mobile-nav" aria-label="Điều hướng di động"><div class="mobile-nav-inner"><a class="mobile-nav-item active" href="/" aria-label="Thư viện"><span class="mobile-nav-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4 5.5A2.5 2.5 0 0 1 6.5 3H20v16H6.5A2.5 2.5 0 0 0 4 21.5v-16Z"></path><path d="M4 5.5A2.5 2.5 0 0 1 6.5 8H20"></path></svg></span><span class="mobile-nav-label">Thư viện</span></a><a class="mobile-nav-item" href="/review" aria-label="Ôn tập"><span class="mobile-nav-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 20h9"></path><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5Z"></path></svg></span><span class="mobile-nav-label">Ôn tập</span></a><a class="mobile-nav-item" href="/cong-thuc" aria-label="Công thức"><span class="mobile-nav-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4 19h16"></path><path d="M7 16 13 4l6 12"></path><path d="M9 12h8"></path></svg></span><span class="mobile-nav-label">Công thức</span></a><a class="mobile-nav-item" href="/features" aria-label="Tính năng"><span class="mobile-nav-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 3l1.7 5.3L19 10l-5.3 1.7L12 17l-1.7-5.3L5 10l5.3-1.7L12 3Z"></path><path d="M19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8L19 15Z"></path></svg></span><span class="mobile-nav-label">Tính năng</span></a></div></nav><script>
// Nút lên đầu trang
(function() {
var btn = document.getElementById('toTop');
if (!btn) return;
function onScroll() { btn.classList.toggle('show', window.scrollY > 360); }
window.addEventListener('scroll', onScroll, { passive: true });
btn.addEventListener('click', function() { window.scrollTo({ top: 0, behavior: 'smooth' }); });
onScroll();
})();
</script></body></html> |
