13.6.21

HTML là gì? Danh sách các thẻ thường dùng trong HTML

HTML LÀ GÌ?
DANH SÁCH CÁC THẺ THƯỜNG DÙNG TRONG HTML

* HTML LÀ GÌ? 

    HTML là chữ viết tắt của Hypertext Markup Language. Nó giúp người dùng tạo và cấu trúc các thành phần trong trang web, blog hoặc ứng dụng, phân chia các đoạn văn, heading, links, blockquotes, ...

    HTML không phải là ngôn ngữ lập trình, đồng nghĩa với việc nó không thể tạo ra các chức năng “động” được. Nó chỉ giống như Microsoft Word, dùng để bố cục và định dạng trang web.

    Khi làm việc với HTML, chúng ta sẽ sử dụng cấu trúc code đơn giản (tags và attributes) để đánh dấu lên trang web. Ví dụ, chúng ta có thể tạo một đoạn văn bằng cách đặt văn bản vào trong cặp tag mở và đóng văn bản <p> và </p>

<p>Đây là cách bạn thêm đoạn văn trong HTML.</p>
<p>Bạn có thể thêm nhiều đoạn văn!</p>

    HTML documents là files kết thúc với đuôi .html hay .htm. Bạn có thể xem chúng bằng cách sử dụng bất kỳ trình duyệt web nào (như Google Chrome, Safari, hay Mozilla Firefox). Trình duyệt đọc các files HTML này và xuất bản nội dung lên internet sao cho người đọc có thể xem được nó.

    Thông thường, trung bình một web chứa nhiều trang web HTML, ví dụ như: trang chủ, trang about, trang liên hệ, tất cả đều cần các trang HTML riêng.

    Mỗi trang HTML chứa một bộ các tag (cũng được gọi là elements), bạn có thể xem như là việc xây dựng từng khối của một trang web. Nó tạo thành cấu trúc cây thư mục bao gồm section, paragraph, heading, và những khối nội dung khác.

    Hầu hết các HTML elements đều có tag mở và tag đóng với cấu trúc như <tag></tag>.

    Bên dưới, bạn có thể xem code ví dụ của một trang HTML được cấu trúc như thế nào:

<div>
<h1>The Main Heading</h1>
<h2>A catchy subheading</h2>
<p>Paragraph one</p>
<img src="/" alt="Image">
<p>Paragraph two with a <a href="https://example.com">hyperlink</a></p>
</div>
  • Element ngoài cùng là bộ tag division (<div></div>), dùng để mark up cho phần nội dung lớn.
  • Nó bao gồm một tag tiêu đề (<h1></h1>), một tag subheading (<h2></h2>), 2 văn bản (<p></p>), và một bước hình (<img>).
  • Đoạn văn thứ 2 chứa tag chứa link (<a></a>) với attribute href chứa địa chỉ URL đích.
  • Tag hình ảnh cũng có 2 attribute: src cho ảnh, và alt cho mô tả của hình.

    Tổng quan, HTML là ngôn ngữ markup, nó rất trực tiếp dễ hiểu, dễ học, và tất cả mọi người mới đều có thể bắt đầu học nó để xây dựng website, blog, ...

DANH SÁCH CÁC THẺ THƯỜNG DÙNG TRONG HTML

ThẻMô tả chức năng
<!-- -->

Xác định một đoạn chú thích

<!DOCTYPE>

Xác định cho trình duyệt biết phiên bản HTML mà bạn đang sử dụng

<a>

Tạo một liên kết đến một tài liệu nào đó (khi người dùng bấm vào liên kết thì sẽ được chuyển đến tài liệu đó)

<abbr>

Định nghĩa một từ viết tắt

<address>

Xác định thông tin liên hệ của tác giả (hoặc chủ sở hữu) trang web

<audio>

Tạo một "trình phát nhạc" cho trang web

<b>

<center>

Xác định đoạn văn bản được in đậm

<center>Văn bản được canh giữa</center>

<base>

Xác định "đường dẫn cơ sở" trong trang web và kiểu mở liên kết mặc định

<bdo>

Điều hướng một đoạn văn bản được chỉ định

<big>

Xác định một đoạn văn bản có kích thước chữ to hơn văn bản bình thường

<blockquote>

Xác định một "đoạn trích dẫn" từ một website khác

<body>

Xác định phần thân của tài liệu HTML
(chứa những phần tử sẽ được hiển thị lên màn hình trình duyệt)

<br>

Chèn một ngắt xuống dòng

<caption>

Tạo tiêu đề cho bảng

<code>

Xác định một đoạn văn bản mang ý nghĩa là các mã lệnh

<del>

Tạo một đường kẻ ngang lên văn bản

<summary>
&
<details>

Tạo phần tử có dạng:

"chỉ hiển thị tiêu đề còn chi tiết bị ẩn, khi bấm vào tiêu đề thì chi tiết mới hiển thị"

<dialog>

Tạo một hộp thoại

<div>

Nhóm các phần tử lại với nhau để tiện cho việc định dạng cũng như thiết kế bố cục của trang web

<em>

Xác định một đoạn văn bản được định dạng kiểu chữ in nghiêng

<embed>

Dùng để nhúng một "tài liệu" nào đó vào trang web

<figcaption>

Tạo một tiêu đề cho nội dung được đặt bên trong phần tử <figure>

<figure>

Xác định một nội dung cần được tách biệt rõ ràng

<footer>

Xác định phần chân của trang web

<frame>

Xác định một khung trong một bộ khung

<frameset>

Xác định một bộ khung

<h1> - <h6>

Tạo những đề mục quan trọng trong trang web

<head>

Xác định phần head của tài liệu HTML
(chứa các thẻ cung cấp thông tin cho trang web)

<header>

Xác định phần đầu của trang web

<hr>

Tạo một đường kẻ phân cách nằm ngang

<html>

Xác định một tài liệu HTML

<i>

Xác định một đoạn văn bản được định dạng kiểu chữ in nghiêng

<iframe>

Nhúng một trang web khác vào trang web hiện tại

<img>

Chèn hình ảnh vào trang web

<ins>

Tạo một đường gạch chân lên văn bản

<kbd>

Xác định một từ (hoặc cụm từ) mang ý nghĩa là một phím hoặc tổ hợp phím

<li>

Xác định một "danh mục" trong danh sách

<main>

Xác định phần thân của trang web

<map>
&
<area>

Tạo một bản đồ ảnh

<mark>

Đánh dấu màu nền nổi bật cho văn bản

<meta>

Cung cấp thêm "thông tin về trang web" cho trình duyệt và các công cụ tìm kiếm

<meter>

Tạo phần tử có ý nghĩa giống như: thước đo, ổ đĩa, ....

<nav>

Xác định một tập hợp các liên kết & thường được sử dụng kết hợp với CSS để tạo một thanh menu

<noframes>

Xác định một nội dung sẽ được hiển thị khi trình duyệt không hỗ trợ thẻ <frame>

<noscript>

Xác định một nội dung HTML sẽ được hiển thị khi trình duyệt không hỗ trợ JavaScript hoặc đã tắt JavaScript

<object>

Dùng để nhúng một "tài liệu" nào đó vào trang web

<ol>

Xác định một danh sách có thứ tự

<p>

Xác định một đoạn văn bản

<pre>

Giúp cho nội dung mà bạn muốn hiển thị lên màn hình được giữ nguyên định dạng giống như trong lúc soạn thảo

<progress>

Tạo một thanh tiến trình

<q>

Xác định một câu trích dẫn ngắn

<s>

Tạo một đường kẻ ngang lên văn bản

<script>

Dùng để làm thùng chứa cho các câu lệnh JavaScript

<small>

Xác định một đoạn văn bản có kích thước chữ nhỏ hơn văn bản bình thường

<source>

Chỉ định tài nguyên cho trình nghe nhạc hoặc trình xem phim

<span>

Nhóm các phần tử nội tuyến lại với nhau để tiện cho việc định dạng CSS

<strong>

Xác định đoạn văn bản được in đậm

<style>

Dùng để làm thùng chứa cho các đoạn mã CSS

<sub>

Tạo văn bản có kích thước nhỏ, nằm ở khoảng nửa dưới văn bản bình thường

<sup>

Tạo văn bản có kích thước nhỏ, nằm ở khoảng nửa trên văn bản bình thường

<table>

Xác định phần tử là một cái bảng

<tbody>

Xác định những dòng nào thuộc "phần thân" của bảng

<td>

Xác định phần tử là một ô trong hàng

<tfoot>

Xác định những dòng nào thuộc "phần chân" của bảng

<th>

Xác định phần tử là một ô tiêu đề trong hàng

<thead>

Xác định những dòng nào thuộc "phần đầu" của bảng

<time>

Đánh dấu những phần văn bản là: thời gian, ngày tháng, ngày lễ, ....

<title>

Xác định tiêu đề của trang web

<tr>

Xác định phần tử là một hàng trong bảng

<track>

Chèn một bản phụ đề vào video

<u>

Tạo một đường gạch chân lên văn bản

<ul>

Xác định một danh sách không có thứ tự

<video>

Tạo một "trình xem phim" cho trang web

<wbr>

Ngắt bớt ký tự của một từ xuống dòng.

(trong trường hợp chiều rộng của phần tử không đủ để chứa hết từ đó)

Không có nhận xét nào:

Đăng nhận xét

Nếu bạn muốn góp ý, gửi bài viết hoặc câu hỏi,... vui lòng liên hệ qua mail hoặc để lại nhận xét. Cảm ơn bạn đã ghé thăm blog!
(Thắc mắc, yêu cầu của bạn sẽ được giải đáp trong thời gian sớm nhất có thể.)