Mặc dù các trang web hiện đại thường được xây dựng với giao diện thân thiện với người dùng, nhưng sẽ rất hữu ích nếu bạn biết một số HTML cơ bản. Nếu bạn biết 17 thẻ mẫu HTML sau đây (và một số thẻ bổ sung), bạn sẽ có thể tạo một trang web cơ bản từ đầu hoặc chỉnh sửa mã được tạo bởi một ứng dụng như WordPress.
Chúng tôi đã cung cấp các ví dụ về mã HTML với đầu ra cho hầu hết các thẻ. Nếu bạn muốn tự mình kiểm tra chúng, hãy sao chép các mẫu HTML vào tài liệu của riêng bạn. Bạn có thể thử với chúng trong trình soạn thảo văn bản và tải tệp của mình lên trình duyệt để xem những thay đổi của bạn có tác dụng gì.
1.
Bạn sẽ cần thẻ này ở đầu mỗi tài liệu HTML mà bạn tạo. Nó đảm bảo rằng một trình duyệt biết rằng nó đang đọc HTML và nó mong đợi HTML5, phiên bản mới nhất. Mặc dù đây thực sự không phải là một thẻ HTML, nó vẫn là một thẻ tốt cần biết.
2.
Đây là một thẻ khác cho trình duyệt biết rằng nó đang đọc HTML. Thẻ nằm ngay sau thẻ DOCTYPE và bạn đóng nó bằng thẻ ngay ở cuối tệp của mình. Mọi thứ khác trong tài liệu của bạn nằm giữa các thẻ này.
3.
Thẻ
bắt đầu phần tiêu đề của tệp của bạn. Nội dung ở đây không xuất hiện trên trang web của bạn. Thay vào đó, nó chứa siêu dữ liệu cho các công cụ tìm kiếm và thông tin cho trình duyệt của bạn.
Đối với các trang cơ bản, thẻ
sẽ chứa tiêu đề của bạn và đó là về nó. Nhưng có một số thứ khác mà bạn có thể bao gồm, chúng ta sẽ xem xét kỹ hơn trong giây lát.
4. <span class="ez-toc-section-end"></span></h2>
<div class="body-img landscape">
<div class="responsive-img expandable img-article-item" style="padding-bottom:32.607215793056%" data-img-url="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/06/title-tag.png" data-modal-id="single-image-modal" data-modal-container-id="single-image-modal-container" data-img-caption="""">
<figure><picture> <!--[if IE 9]> <video style="display: none;"><![endif]--><source media="(min-width: 1024px)" sizes="1500px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/06/title-tag.png?q=50&fit=crop&w=1500&dpr=1.5"/><source media="(min-width: 768px)" sizes="943px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/06/title-tag.png?q=50&fit=crop&w=943&dpr=1.5"/><source media="(min-width: 481px)" sizes="767px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/06/title-tag.png?q=50&fit=crop&w=767&dpr=1.5"/><source media="(min-width: 0px)" sizes="480px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/06/title-tag.png?q=50&fit=crop&w=480&dpr=1.5"/><!--[if IE 9]></video><![endif]--><img width="1469" height="479" class="lazyload" alt="thẻ tiêu đề html" data-img-url="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/06/title-tag.png"/> </picture> </figure>
</p></div>
</p></div>
<p>Thẻ này đặt tiêu đề cho trang của bạn. Tất cả những gì bạn cần làm là đặt tiêu đề của bạn vào thẻ và đóng nó, như thế này (chúng tôi cũng đã bao gồm các thẻ tiêu đề, để hiển thị ngữ cảnh):</p>
<pre><code class="hljs html"><span class="hljs-symbol"><</span>head<span class="hljs-symbol">></span><br/><span class="hljs-symbol"><</span>title<span class="hljs-symbol">></span>My Website<span class="hljs-symbol"><</span>/title<span class="hljs-symbol">></span><br/><span class="hljs-symbol"><</span>/head<span class="hljs-symbol">></span></code></pre>
<p><!-- Zone: character count repeatable. --></p>
<p>Đó là tên sẽ được hiển thị dưới dạng tiêu đề tab khi nó được mở trong trình duyệt.</p>
<p>Giống như thẻ tiêu đề, siêu dữ liệu được đưa vào vùng tiêu đề của trang của bạn. Siêu dữ liệu chủ yếu được sử dụng bởi các công cụ tìm kiếm và là thông tin về những gì trên trang của bạn. Có một số trường meta khác nhau, nhưng đây là một số trường được sử dụng phổ biến nhất:</p>
<p> <!-- No winning ad found for zone: word count #3! --> </p>
<ul>
<li> <strong>sự mô tả:</strong> Mô tả cơ bản về trang của bạn. </li>
<li> <strong>từ khóa:</strong> Một lựa chọn các từ khóa áp dụng cho trang của bạn. </li>
<li> <strong>tác giả:</strong> Tác giả của trang của bạn. </li>
<li> <strong>khung nhìn:</strong> Một thẻ để đảm bảo rằng trang của bạn trông đẹp trên tất cả các thiết bị. </li>
</ul>
<p>Đây là một ví dụ có thể áp dụng cho trang này:</p>
<pre><code class="hljs html"><span class="hljs-symbol"><</span>meta name=<span class="hljs-symbol">"</span>description<span class="hljs-symbol">"</span> content=<span class="hljs-symbol">"</span>A basic HTML tutorial<span class="hljs-symbol">"</span><span class="hljs-symbol">></span><br/><span class="hljs-symbol"><</span>meta name=<span class="hljs-symbol">"</span>keywords<span class="hljs-symbol">"</span> content=<span class="hljs-symbol">"</span>HTML,code,tags<span class="hljs-symbol">"</span><span class="hljs-symbol">></span><br/><span class="hljs-symbol"><</span>meta name=<span class="hljs-symbol">"</span>author<span class="hljs-symbol">"</span> content=<span class="hljs-symbol">"</span>MUO<span class="hljs-symbol">"</span><span class="hljs-symbol">></span><br/><span class="hljs-symbol"><</span>meta name=<span class="hljs-symbol">"</span>viewport<span class="hljs-symbol">"</span> content=<span class="hljs-symbol">"</span>width=device-width, initial-scale=1.0<span class="hljs-symbol">"</span><span class="hljs-symbol">></span></code></pre>
<p><!-- Zone: character count repeatable. --></p>
<p>Thẻ “viewport” phải luôn có “width = device-width, initial-scale = 1.0” làm nội dung để đảm bảo trang của bạn hiển thị tốt trên thiết bị di động và máy tính để bàn.</p>
<h2 id="lt-body-gt"><span class="ez-toc-section" id="6"></span> 6. <body><span class="ez-toc-section-end"></span></h2>
<p>Sau khi bạn đóng phần tiêu đề, bạn sẽ đến phần nội dung. Bạn mở nó bằng thẻ <body> và đóng nó bằng thẻ </body>. Điều đó nằm ngay cuối tệp của bạn, ngay trước thẻ </html>.</p>
<p> <!-- No winning ad found for zone: word count #4! --> </p>
<p>Tất cả nội dung trang web của bạn nằm giữa các thẻ này. Nó đơn giản như âm thanh:</p>
<pre><code class="hljs html"><span class="hljs-symbol"><</span>body<span class="hljs-symbol">></span><br/>Everything you want displayed on your page.<br/><span class="hljs-symbol"><</span>/body<span class="hljs-symbol">></span></code></pre>
<p><!-- Zone: character count repeatable. --></p>
<h2 id="lt-h1-gt"><span class="ez-toc-section" id="7"></span> 7. </p>
<h1><span class="ez-toc-section-end"></span></h2>
<p>Thẻ </p>
<h1> xác định tiêu đề cấp một trên trang của bạn. Đây thường sẽ là tiêu đề và lý tưởng là chỉ có một trên mỗi trang.</p>
<p><h2><span class="ez-toc-section" id="xac_dinh_tieu_de_cap_hai_chang_han_nhu_tieu_de_phan_tieu_de_phu_cap_ba_vv_cho_den_Vi_du_ten_cua_cac_the_trong_bai_viet_nay_la_tieu_de_cap_hai_Big_and_Important_Header_Slightly_Less_Big_Header_Sub-Header_Ket_qua_Nhu_ban_co_the_thay_chung_nho_dan_o_moi_cap_do_8"></span> xác định tiêu đề cấp hai chẳng hạn như tiêu đề phần, tiêu đề phụ </p>
<h3> cấp ba, v.v., cho đến </p>
<h6>. Ví dụ: tên của các thẻ trong bài viết này là tiêu đề cấp hai.</p>
<pre><code class="hljs html"><span class="hljs-symbol"><</span>h1<span class="hljs-symbol">></span>Big and Important Header<span class="hljs-symbol"><</span>/h1<span class="hljs-symbol">></span><br/><span class="hljs-symbol"><</span>h2<span class="hljs-symbol">></span>Slightly Less Big Header<span class="hljs-symbol"><</span>/h2<span class="hljs-symbol">></span><br/><span class="hljs-symbol"><</span>h3<span class="hljs-symbol">></span>Sub-Header<span class="hljs-symbol"><</span>/h3<span class="hljs-symbol">></span></code></pre>
<p><strong>Kết quả:</strong></p>
<div class="body-img landscape">
<div class="responsive-img expandable img-article-item" style="padding-bottom:48.733333333333%" data-img-url="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/06/header-tags.jpg" data-modal-id="single-image-modal" data-modal-container-id="single-image-modal-container" data-img-caption="""">
<figure><picture> <!--[if IE 9]> <video style="display: none;"><![endif]--><source media="(min-width: 1024px)" sizes="1500px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/06/header-tags.jpg?q=50&fit=crop&w=1500&dpr=1.5"/><source media="(min-width: 768px)" sizes="943px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/06/header-tags.jpg?q=50&fit=crop&w=943&dpr=1.5"/><source media="(min-width: 481px)" sizes="767px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/06/header-tags.jpg?q=50&fit=crop&w=767&dpr=1.5"/><source media="(min-width: 0px)" sizes="480px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/06/header-tags.jpg?q=50&fit=crop&w=480&dpr=1.5"/><!--[if IE 9]></video><![endif]--><img width="1500" height="731" class="lazyload" alt="thẻ tiêu đề html" data-img-url="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/06/header-tags.jpg"/> </picture> </figure>
</p></div>
</p></div>
<p>Như bạn có thể thấy, chúng nhỏ dần ở mỗi cấp độ.</p>
<h2 id="lt-p-gt"> 8. </p>
<span class="ez-toc-section-end"></span></h2>
<p>Thẻ đoạn văn bắt đầu một đoạn văn mới. Điều này thường chèn hai ngắt dòng.</p>
<p>Ví dụ, hãy nhìn vào dấu ngắt giữa dòng trước và dòng này. Đó là những gì thẻ </p>
<p> sẽ làm.</p>
<p><!-- Zone: character count repeatable. --><br />
<!-- No winning ad found for zone: word count #5! --> </p>
<pre><code class="hljs html"><span class="hljs-symbol"><</span>p<span class="hljs-symbol">></span>Your first paragraph.<span class="hljs-symbol"><</span>/p<span class="hljs-symbol">></span><br/><span class="hljs-symbol"><</span>p<span class="hljs-symbol">></span>Your second paragraph.<span class="hljs-symbol"><</span>/p<span class="hljs-symbol">></span></code></pre>
<p><strong>Kết quả:</strong></p>
<p>Đoạn đầu tiên của bạn.</p>
<p>Đoạn văn thứ hai của bạn.</p>
<p>Bạn cũng có thể sử dụng các kiểu CSS trong các thẻ đoạn văn của mình, như kiểu này thay đổi kích thước văn bản:</p>
<pre><code class="hljs html"><span class="hljs-symbol"><</span>p style=<span class="hljs-symbol">"</span>font-size: 150%;<span class="hljs-symbol">"</span><span class="hljs-symbol">></span>This is 50% larger text.<span class="hljs-symbol"><</span>/p<span class="hljs-symbol">></span></code></pre>
<p><strong>Kết quả:</strong></p>
<div class="body-img landscape">
<div class="responsive-img expandable img-article-item" style="padding-bottom:32.436260623229%" data-img-url="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/06/p-tag.jpg" data-modal-id="single-image-modal" data-modal-container-id="single-image-modal-container" data-img-caption="""">
<figure><picture> <!--[if IE 9]> <video style="display: none;"><![endif]--><source media="(min-width: 1024px)" sizes="1500px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/06/p-tag.jpg?q=50&fit=crop&w=1500&dpr=1.5"/><source media="(min-width: 768px)" sizes="943px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/06/p-tag.jpg?q=50&fit=crop&w=943&dpr=1.5"/><source media="(min-width: 481px)" sizes="767px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/06/p-tag.jpg?q=50&fit=crop&w=767&dpr=1.5"/><source media="(min-width: 0px)" sizes="480px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/06/p-tag.jpg?q=50&fit=crop&w=480&dpr=1.5"/><!--[if IE 9]></video><![endif]--><img width="1412" height="458" class="lazyload" alt="làm cho văn bản lớn hơn trong html" data-img-url="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/06/p-tag.jpg"/> </picture> </figure>
</p></div>
</p></div>
<h2 id="lt-br-gt"><span class="ez-toc-section" id="9"></span> 9. <br /><span class="ez-toc-section-end"></span></h2>
<p>Thẻ ngắt dòng chèn một ngắt dòng:</p>
<pre><code class="hljs html"><span class="hljs-symbol"><</span>p<span class="hljs-symbol">></span>The first line.<span class="hljs-symbol"><</span>br<span class="hljs-symbol">></span><br/>The second line (close to the first one).<span class="hljs-symbol"><</span>/p<span class="hljs-symbol">></span></code></pre>
<p><!-- Zone: character count repeatable. --></p>
<p><strong>Kết quả:</strong></p>
<div class="body-img landscape">
<div class="responsive-img expandable img-article-item" style="padding-bottom:15.575916230366%" data-img-url="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/06/br-tag.jpg" data-modal-id="single-image-modal" data-modal-container-id="single-image-modal-container" data-img-caption="""">
<figure><picture> <!--[if IE 9]> <video style="display: none;"><![endif]--><source media="(min-width: 1024px)" sizes="1500px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/06/br-tag.jpg?q=50&fit=crop&w=1500&dpr=1.5"/><source media="(min-width: 768px)" sizes="943px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/06/br-tag.jpg?q=50&fit=crop&w=943&dpr=1.5"/><source media="(min-width: 481px)" sizes="767px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/06/br-tag.jpg?q=50&fit=crop&w=767&dpr=1.5"/><source media="(min-width: 0px)" sizes="480px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/06/br-tag.jpg?q=50&fit=crop&w=480&dpr=1.5"/><!--[if IE 9]></video><![endif]--><img width="1528" height="238" class="lazyload" alt="ngắt dòng trong html" data-img-url="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/06/br-tag.jpg"/> </picture> </figure>
</p></div>
</p></div>
<p>Làm việc theo cách tương tự là thẻ </p>
<hr>
<p>. Thao tác này vẽ một đường ngang trên trang của bạn và rất tốt để tách các phần văn bản.</p>
<h2 id="lt-strong-gt"><span class="ez-toc-section" id="10"></span> 10. <strong><span class="ez-toc-section-end"></span></h2>
<p>Thẻ này xác định văn bản quan trọng. Nói chung, điều đó có nghĩa là nó sẽ được in đậm. Tuy nhiên, có thể sử dụng CSS để làm cho <strong> văn bản hiển thị theo cách khác.</p>
<p>Tuy nhiên, bạn có thể yên tâm sử dụng <strong> để in đậm văn bản.</p>
<p> <!-- No winning ad found for zone: word count #6! --> </p>
<pre><code class="hljs html"><span class="hljs-symbol"><</span>strong<span class="hljs-symbol">></span>Very important things you want to say.<span class="hljs-symbol"><</span>/strong<span class="hljs-symbol">></span></code></pre>
<p><strong>Kết quả:</strong></p>
<p><strong>Những điều rất quan trọng bạn muốn nói.</strong></p>
<p>Nếu bạn đã quen với thẻ <b> để in đậm văn bản, bạn vẫn có thể sử dụng nó. Không có gì đảm bảo rằng nó sẽ tiếp tục hoạt động trong các phiên bản HTML trong tương lai, nhưng hiện tại, nó đã hoạt động.</p>
<h2 id="lt-em-gt"><span class="ez-toc-section" id="11"></span> 11. <em><span class="ez-toc-section-end"></span></h2>
<p>Giống như <b> và <strong>, <em> và <i> có liên quan với nhau. Thẻ <em> xác định văn bản được nhấn mạnh, thường có nghĩa là nó sẽ được in nghiêng. Một lần nữa, có khả năng CSS sẽ hiển thị văn bản được nhấn mạnh theo cách khác.</p>
<pre><code class="hljs html"><span class="hljs-symbol"><</span>em<span class="hljs-symbol">></span>An emphasized line.<span class="hljs-symbol"><</span>/em<span class="hljs-symbol">></span></code></pre>
<p><!-- Zone: character count repeatable. --></p>
<p><strong>Kết quả:</strong></p>
<p><em>Một dòng nhấn mạnh.</em></p>
<p>Thẻ <i> vẫn hoạt động, nhưng một lần nữa, có thể thẻ sẽ không được dùng nữa trong các phiên bản HTML trong tương lai.</p>
<h2 id="lt-a-gt"><span class="ez-toc-section" id="12"></span> 12. <a><span class="ez-toc-section-end"></span></h2>
<p>Thẻ <a> hoặc anchor, cho phép bạn tạo liên kết. Một liên kết đơn giản trông như thế này:</p>
<p> <!-- No winning ad found for zone: word count #7! --> </p>
<pre><code class="hljs html"><span class="hljs-symbol"><</span>a href=<span class="hljs-symbol">"</span>https://www.muo.com/<span class="hljs-symbol">></span>Go to MUO<span class="hljs-symbol"><</span>/a<span class="hljs-symbol">></span></code></pre>
<p><strong>Kết quả:</strong></p>
<p>Đi tới MUO</p>
<p>Thuộc tính “href” xác định đích của liên kết. Trong nhiều trường hợp, đây sẽ là một trang web khác. Nó cũng có thể là một tệp, như hình ảnh hoặc PDF.</p>
<p>Các thuộc tính hữu ích khác bao gồm “target” và “title”. Thuộc tính target hầu như chỉ được sử dụng để mở một liên kết trong tab hoặc cửa sổ mới, như sau:</p>
<pre><code class="hljs html"><span class="hljs-symbol"><</span>a href=<span class="hljs-symbol">"</span>https://www.muo.com/<span class="hljs-symbol">"</span> target=<span class="hljs-symbol">"</span>_blank<span class="hljs-symbol">"</span><span class="hljs-symbol">></span>Go to MUO in a new tab<span class="hljs-symbol"><</span>/a<span class="hljs-symbol">></span></code></pre>
<p><!-- Zone: character count repeatable. --></p>
<p><strong>Kết quả:</strong></p>
<p>Chuyển đến MUO trong tab mới</p>
<p>Thuộc tính “title” tạo một chú giải công cụ. Di chuột qua liên kết bên dưới để xem nó hoạt động như thế nào:</p>
<pre><code class="hljs html"><span class="hljs-symbol"><</span>a href=<span class="hljs-symbol">"</span>https://www.muo.com/<span class="hljs-symbol">"</span> title=<span class="hljs-symbol">"</span>This is a tool tip<span class="hljs-symbol">"</span><span class="hljs-symbol">></span>Hover over this to see the tool tip<span class="hljs-symbol"><</span>/a<span class="hljs-symbol">></span></code></pre>
<p><strong>Kết quả:</strong></p>
<p>Di chuột qua phần này để xem mẹo công cụ</p>
<p> <!-- No winning ad found for zone: word count #8! --></p>
<h2 id="lt-img-gt"><span class="ez-toc-section" id="13"></span> 13. <img><span class="ez-toc-section-end"></span></h2>
<p>Nếu bạn muốn nhúng hình ảnh vào trang của mình, bạn sẽ cần sử dụng thẻ hình ảnh. Thông thường, bạn sẽ sử dụng nó cùng với thuộc tính “src”. Điều này chỉ định nguồn của hình ảnh, như sau:</p>
<pre><code class="hljs html"><span class="hljs-symbol"><</span>img src=<span class="hljs-symbol">"</span>wp-content/uploads/2019/04/sunlit-birds.jpg<span class="hljs-symbol">"</span><span class="hljs-symbol">></span></code></pre>
<p><strong>Kết quả:</strong></p>
<div class="body-img landscape">
<div class="responsive-img expandable img-article-item" style="padding-bottom:59.6%" data-img-url="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/06/sunlit-birds.png" data-modal-id="single-image-modal" data-modal-container-id="single-image-modal-container" data-img-caption="""">
<figure><picture> <!--[if IE 9]> <video style="display: none;"><![endif]--><source media="(min-width: 1024px)" sizes="1500px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/06/sunlit-birds.png?q=50&fit=crop&w=1500&dpr=1.5"/><source media="(min-width: 768px)" sizes="943px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/06/sunlit-birds.png?q=50&fit=crop&w=943&dpr=1.5"/><source media="(min-width: 481px)" sizes="767px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/06/sunlit-birds.png?q=50&fit=crop&w=767&dpr=1.5"/><source media="(min-width: 0px)" sizes="480px" data-srcset="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/06/sunlit-birds.png?q=50&fit=crop&w=480&dpr=1.5"/><!--[if IE 9]></video><![endif]--><img width="750" height="447" class="lazyload" alt="Bóng chim trên mặt trời lặn" data-img-url="https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/06/sunlit-birds.png"/> </picture> </figure>
</p></div>
</p></div>
<p>Các thuộc tính khác có sẵn, chẳng hạn như “chiều cao”, “chiều rộng” và “alt”. Đây là cách nó có thể trông như thế nào:</p>
<p><!-- Zone: character count repeatable. --></p>
<pre><code class="hljs html"><span class="hljs-symbol"><</span>img src=<span class="hljs-symbol">"</span>wp-content/uploads/2019/04/sunlit-birds.jpg<span class="hljs-symbol">"</span> alt=<span class="hljs-symbol">"</span>the name of your image<span class="hljs-symbol">"</span><span class="hljs-symbol">></span></code></pre>
<p>Như bạn có thể mong đợi, thuộc tính “height” và “width” đặt chiều cao và chiều rộng của hình ảnh. Nói chung, bạn chỉ nên đặt một trong số chúng để hình ảnh chia tỷ lệ chính xác. Nếu bạn sử dụng cả hai, bạn có thể kết thúc với một hình ảnh bị kéo căng hoặc nhăn nheo.</p>
<p> <!-- No winning ad found for zone: word count #9! --> </p>
<p>Thẻ “alt” cho trình duyệt biết văn bản nào sẽ hiển thị nếu không thể hiển thị hình ảnh và bạn nên đưa vào bất kỳ hình ảnh nào. Nếu ai đó có kết nối đặc biệt chậm hoặc trình duyệt cũ, họ vẫn có thể biết những gì sẽ có trên trang của bạn.</p>
<p>Để tiến thêm một bước và cải thiện hiệu suất trên trang web của bạn, hãy xem hướng dẫn của chúng tôi về cách bạn có thể tạo hình ảnh đáp ứng trong HTML.</p>
<h2 id="lt-ol-gt"><span class="ez-toc-section" id="14"></span> 14. </p>
<ol><span class="ez-toc-section-end"></span></h2>
<p>Thẻ danh sách có thứ tự cho phép bạn tạo một danh sách có thứ tự. Nói chung, điều đó có nghĩa là bạn sẽ nhận được một danh sách được đánh số. Mỗi mục trong danh sách cần một thẻ mục danh sách (</p>
<li>), vì vậy danh sách của bạn sẽ giống như sau:</p>
<p><!-- Zone: character count repeatable. --></p>
<pre><code class="hljs html"><span class="hljs-symbol"><</span>ol<span class="hljs-symbol">></span><br/><span class="hljs-symbol"><</span>li<span class="hljs-symbol">></span>First thing<span class="hljs-symbol"><</span>/li<span class="hljs-symbol">></span><br/><span class="hljs-symbol"><</span>li<span class="hljs-symbol">></span>Second thing<span class="hljs-symbol"><</span>/li<span class="hljs-symbol">></span><br/><span class="hljs-symbol"><</span>li<span class="hljs-symbol">></span>Third thing<span class="hljs-symbol"><</span>/li<span class="hljs-symbol">></span><br/><span class="hljs-symbol"><</span>/ol<span class="hljs-symbol">></span></code></pre>
<p><strong>Kết quả:</strong></p>
<ol>
<li> Điều đầu tiên </li>
<li> Điều thứ hai </li>
<li> Điều thứ ba </li>
</ol>
<p>Trong HTML5, bạn có thể sử dụng </p>
<ol reverseed> để đảo ngược thứ tự của các số. Và bạn có thể đặt giá trị bắt đầu bằng thuộc tính bắt đầu.</p>
<p> <!-- No winning ad found for zone: word count #10! --> </p>
<p>Thuộc tính “type” cho phép bạn cho trình duyệt biết loại ký hiệu nào sẽ sử dụng cho các mục trong danh sách. Nó có thể được đặt thành “1,” “A,” “a,” “I” hoặc “i”, đặt danh sách hiển thị với biểu tượng được chỉ định như sau:</p>
<p><!-- Zone: character count repeatable. --></p>
<pre><code class="hljs html"><span class="hljs-symbol"><</span>ol type=<span class="hljs-symbol">"</span>A<span class="hljs-symbol">"</span><span class="hljs-symbol">></span></code></pre>
<h2 id="lt-ul-gt"><span class="ez-toc-section" id="15"></span> 15. </p>
<ul><span class="ez-toc-section-end"></span></h2>
<p>Danh sách không có thứ tự đơn giản hơn nhiều so với bản sao có thứ tự của nó. Nó chỉ đơn giản là một danh sách được đánh dấu đầu dòng.</p>
<pre><code class="hljs html"><span class="hljs-symbol"><</span>ul<span class="hljs-symbol">></span><br/><span class="hljs-symbol"><</span>li<span class="hljs-symbol">></span>First item<span class="hljs-symbol"><</span>/li<span class="hljs-symbol">></span><br/><span class="hljs-symbol"><</span>li<span class="hljs-symbol">></span>Second item<span class="hljs-symbol"><</span>/li<span class="hljs-symbol">></span><br/><span class="hljs-symbol"><</span>li<span class="hljs-symbol">></span>Third item<span class="hljs-symbol"><</span>/li<span class="hljs-symbol">></span><br/><span class="hljs-symbol"><</span>/ul<span class="hljs-symbol">></span></code></pre>
<p><strong>Kết quả:</strong></p>
<ul>
<li> Mục đầu tiên </li>
<li> Mặt hàng thứ hai </li>
<li> Mặt hàng thứ ba </li>
</ul>
<p>Danh sách không có thứ tự cũng có thuộc tính “loại” và bạn có thể đặt nó thành “đĩa”, “hình tròn” hoặc “hình vuông”.</p>
<p><!-- Zone: character count repeatable. --></p>
<h2 id="lt-table-gt"><span class="ez-toc-section" id="16"></span> 16. <bàn><span class="ez-toc-section-end"></span></h2>
<p>Mặc dù việc sử dụng bảng để định dạng còn nhiều khó khăn, nhưng có nhiều lúc bạn sẽ muốn sử dụng các hàng và cột để phân đoạn thông tin trên trang của mình. Cần có một số thẻ để bảng hoạt động. Đây là mã HTML mẫu:</p>
<p> <!-- No winning ad found for zone: word count #11! --> </p>
<pre><code class="hljs html"><span class="hljs-symbol"><</span>table<span class="hljs-symbol">></span><br/><span class="hljs-symbol"><</span>tbody<span class="hljs-symbol">></span><br/><span class="hljs-symbol"><</span>tr<span class="hljs-symbol">></span><br/><span class="hljs-symbol"><</span>th<span class="hljs-symbol">></span>1st column<span class="hljs-symbol"><</span>/th<span class="hljs-symbol">></span><br/><span class="hljs-symbol"><</span>th<span class="hljs-symbol">></span>2nd column<span class="hljs-symbol"><</span>/th<span class="hljs-symbol">></span><br/><span class="hljs-symbol"><</span>/tr<span class="hljs-symbol">></span><br/><span class="hljs-symbol"><</span>tr<span class="hljs-symbol">></span><br/><span class="hljs-symbol"><</span>td<span class="hljs-symbol">></span>Row 1, column 1<span class="hljs-symbol"><</span>/td<span class="hljs-symbol">></span><br/><span class="hljs-symbol"><</span>td<span class="hljs-symbol">></span>Row 1, column 2<span class="hljs-symbol"><</span>/td<span class="hljs-symbol">></span><br/><span class="hljs-symbol"><</span>/tr<span class="hljs-symbol">></span><br/><span class="hljs-symbol"><</span>td<span class="hljs-symbol">></span>Row 2, column 1<span class="hljs-symbol"><</span>/td<span class="hljs-symbol">></span><br/><span class="hljs-symbol"><</span>td<span class="hljs-symbol">></span>Row 2, column 2<span class="hljs-symbol"><</span>/td<span class="hljs-symbol">></span><br/><span class="hljs-symbol"><</span>/tbody<span class="hljs-symbol">></span><br/><span class="hljs-symbol"><</span>/table<span class="hljs-symbol">></span></code></pre>
<p><!-- Zone: character count repeatable. --></p>
<p>Các thẻ </p>
<table> và </table>
<p> chỉ định phần đầu và phần cuối của bảng. Thẻ </p>
<tbody> chứa tất cả nội dung bảng.</p>
<p>Mỗi hàng của bảng được bao trong một thẻ </p>
<tr>. Mỗi ô trong mỗi hàng được bao bọc trong thẻ </p>
<th> cho tiêu đề cột hoặc thẻ </p>
<td> cho dữ liệu cột. Bạn cần một trong những thứ này cho mỗi cột trên mỗi hàng.</p>
<p><strong>Kết quả:</strong></p>
<div class="table-container">
<table>
<thead> </thead>
<tbody>
<tr>
<th>Cột đầu tiên</th>
<th>Cột thứ 2</th>
</tr>
<tr>
<td>Hàng 1, cột 1</td>
<td>Hàng 1, cột 2</td>
</tr>
<tr>
<td>Hàng 2, cột 1</td>
<td>Hàng 2, cột 2</td>
</tr>
</tbody>
</table>
</div>
<h2 id="lt-blockquote-gt"><span class="ez-toc-section" id="17"></span> 17. </p>
<blockquote><span class="ez-toc-section-end"></span></h2>
<p>Khi bạn đang trích dẫn một trang web hoặc một người khác và bạn muốn đặt câu trích dẫn khác với phần còn lại của tài liệu, hãy sử dụng thẻ blockquote. Tất cả những gì bạn cần làm là đặt đoạn trích dẫn vào mở và đóng các thẻ blockquote:</p>
<p> <!-- No winning ad found for zone: word count #12! --> </p>
<pre><code class="hljs html"><span class="hljs-symbol"><</span>blockquote<span class="hljs-symbol">></span>The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.<span class="hljs-symbol"><</span>/blockquote<span class="hljs-symbol">></span></code></pre>
<p><strong>Kết quả:</strong></p>
<blockquote>
<p>Web như tôi đã hình dung, chúng tôi vẫn chưa nhìn thấy nó. Tương lai vẫn lớn hơn quá khứ rất nhiều.</p>
</blockquote>
<p>Định dạng chính xác được sử dụng có thể phụ thuộc vào trình duyệt bạn đang sử dụng hoặc CSS của trang web của bạn. Nhưng thẻ vẫn giữ nguyên.</p>
<p><!-- Zone: character count repeatable. --></p>
<h2 id="html-code-samples"><span class="ez-toc-section" id="Mau_ma_HTML"></span> Mẫu mã HTML<span class="ez-toc-section-end"></span></h2>
<p>Với 17 ví dụ viết mã HTML này, bạn sẽ có thể tạo một trang web đơn giản. Bạn có thể kiểm tra tất cả chúng ngay bây giờ trong một trình soạn thảo văn bản trực tuyến để cảm nhận cách chúng hoạt động.</p>
<p>Để có các bài học ngắn gọn hơn về HTML, hãy thử một số ứng dụng microlearning để viết mã. Họ sẽ giúp bạn bắt kịp tốc độ ngay lập tức.</p>
</div>
<div class='yarpp yarpp-related yarpp-related-website yarpp-template-list'>
<!-- YARPP List -->
<h4>Bài viết liên quan:</h4><ol>
<li><a href="https://smartreviewaz.com/huong-dan-ve-cac-plugin-vst-cua-audio-damage-va-cach-su-dung-chung/" rel="bookmark" title="Hướng dẫn về các plugin VST của Audio Damage và Cách sử dụng chúng">Hướng dẫn về các plugin VST của Audio Damage và Cách sử dụng chúng </a></li>
<li><a href="https://smartreviewaz.com/8-cong-dong-truc-tuyen-cho-nguoi-cao-nien-tham-gia/" rel="bookmark" title="8 cộng đồng trực tuyến cho người cao niên tham gia">8 cộng đồng trực tuyến cho người cao niên tham gia </a></li>
<li><a href="https://smartreviewaz.com/microsoft-edge-khong-phat-video-hay-thu-7-ban-sua-loi-nay/" rel="bookmark" title="Microsoft Edge không phát video? Hãy thử 7 bản sửa lỗi này">Microsoft Edge không phát video? Hãy thử 7 bản sửa lỗi này </a></li>
<li><a href="https://smartreviewaz.com/cach-ngan-chan-cac-ung-dung-android-theo-doi-ban-voi-duckduckgo/" rel="bookmark" title="Cách ngăn chặn các ứng dụng Android theo dõi bạn với DuckDuckGo">Cách ngăn chặn các ứng dụng Android theo dõi bạn với DuckDuckGo </a></li>
</ol>
</div>
</div><!-- .entry-content -->
</div>
</article><!-- #post-36262 -->
<nav class="navigation post-navigation" aria-label="Posts">
<h2 class="screen-reader-text">Post navigation</h2>
<div class="nav-links"><div class="nav-previous"><a href="https://smartreviewaz.com/6-tro-choi-su-dung-permadeath-theo-cac-cach-khac-nhau/" rel="prev"><div class="post-navigation-sub"><small><span class="kadence-svg-iconset svg-baseline"><svg aria-hidden="true" class="kadence-svg-icon kadence-arrow-left-alt-svg" fill="currentColor" version="1.1" xmlns="https://www.w3.org/2000/svg" width="29" height="28" viewBox="0 0 29 28"><title>Previous
Previous
