HTML Cheat Sheet

2021-05-04 • 1211 từ • 6 phút

Nội dung

HTML có nhiều thẻ và để nhớ hết các thẻ đó cũng cần một thời gian dài học hỏi và trải nghiệm cho những dự án thực tế. Nhưng đôi khi chuyện ta quên tên, hay đôi khi ta muốn tìm hiểu rõ hơn về công dụng về thẻ đó thì cũng phải nhờ anh Google tra cứu và tìm kiếm.

Vậy nên bài viết này chém về tổng hợp những thẻ hay dùng trong HTML với phong cách ghi chú lại ngắn gọn và có tính áp dụng thực tế

Bookmark nào

Bạn có thể Bookmark lại trang này để có gì sau này tham khảo nha

HTML5 cơ bản

Vài lưu ý thuật ngữ

Đầu tiên là từ HTML là từ viết tắt các chữ cái đầu của cụm từ Hyper Text 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, ứng dụng. Phân chia đoạn văn
HTML không phải là ngôn ngữ lập trình nên nó không tạo ra chức năng động được. Nó giống như Microsoft Word chỉ dùng bố cục và định dạng trang web.
Khi làm việc với HTML thì ta sẽ dùng các cấu trúc đơn giản với thẻ (tags) và thuộc tính (attributes) để đánh dấu lên trang web
HTML được sáng tạo bởi Tim Berners-Lee. Xuất bản lần đầu năm 1991 bao gồm 18 tags. Và cứ thế phát triển nhiều hơn về sau. Hiện tại thì HTML có hơn 140 tag theo trang Dev Mozilla trong đó thì có nhiều tag không còn được sử dụng.

HTML hoạt động sao?

Văn bản HTML là tập tin có phần mở rộng là .html hoặc .htm và có thể được mở bằng trình duyệt như Google Chrome, Firefox, Safari, Opera… Thông thường một trang web sẽ có nhiều trang html như

Trang chủ
Trang giới thiệu
Trang dịch vụ hoặc sản phẩm cung cấp
Trang liên hệ

Mỗi trang html sẽ chứa nhiều tag khác nhau để bố cục, dánh dấu trang web lại và các tag thường có thẻ đóng/mở như <tag> nội dung ở giữa thẻ mở/đóng </tag>. Cũng có nhiều thẻ không có thẻ đóng mà nó tự đóng ví dụ <img />.

Hiện tại HTML đã được phát triển lên HTML5 và chúng ta sẽ đi tìm hiểu về nó nhé

HTML5 semantic tag

Cấu trúc trang cơ bản của một trang web theo chuẩn HTML5 với thẻ ngữ nghĩa (semantic tag). Dùng thẻ ngữ nghĩa sẽ giúp một phần tối ưu hóa bộ máy tìm kiếm (SEO - Search Engine Optimization)

Tìm hiểu thêm về tối ưu bộ máy tìm kiếm - SEO

Bạn nào muốn tìm hiểu thêm về SEO thì có thể đọc thêm bài này nhé

Bên dưới đây là ví dụ một trang web được viết với chuẩn HTML5 dựa trên thẻ ngữ nghĩa semantic. Mời bạn tham khảo nhé

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


<header>
   <div id="logo">LOGO</div>
   <nav>
      <ul>
         <li><a href="/">Home</a></li>
         <li><a href="/link">Blog</a></li>
         <li><a href="/link">Contact</a></li>
      </ul>
   </nav>
</header>
<article>
   <h2>HTML Cơ bản</h2>
   <p>Nội dung chém gió ở đây</p>
</article>
<article>
   <h2>HTML nâng cao</h2>
   <p>Chém gió mạnh hơn nữa vào</p>
</article>
<section>Phần này là nhóm một số nội dung liên quan tới nhau</section>
<aside>Sidebar</aside>
<footer>
   <p>&copy; HTML CheatSheet</p>
   <address>Email <a href="mailto:[email protected]">me</a></address>
</footer>

Hiển thị cho ví dụ HTML5 semantic

LOGO

HTML Cơ bản

Nội dung chém gió ở đây

HTML nâng cao

Chém gió mạnh hơn nữa vào

Phần này là nhóm một số nội dung liên quan tới nhau

Head Tags

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


<!doctype html>
<html lang="en" class="no-js">
   <head>
      <meta charset="utf-8">
      <meta http-equiv="x-ua-compatible" content="ie=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="canonical" href="https://doidev.com/" />
      <title>HTML CheatSheet</title>
      <meta name="description" content="HTML cheat sheet">
      <meta name="keywords" content="html,cheatsheet" />
      <meta property="fb:admins" content="fbadmin" />
      <meta property="og:title" content="HTML CheatSheet" />
      <meta property="og:type" content="website" />
      <meta property="og:url" content="https://doidev.com/" />
      <meta property="og:image" content="https://doidev.com/html-cheat-sheet/featured-image.png" />
      <meta property="og:description" content="HTML cheat sheet" />
      <link rel="apple-touch-icon" href="apple-touch-icon.png">
      <link rel="alternate" hreflang="en" href="https://doidev.com/en/" />
      <link rel="stylesheet" href="/styles.css">
      <script src="/script.js"></script>
   </head>

Khởi tạo web

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Page Title</title>
      <meta name="description" content="Khoảng giới hạn trong 155 ký tự">
      <link rel="stylesheet" type="text/css" href="mystyle.css">
      <script src="link to javascript file"></script>
      <script src="script.js"></script>
   </head>
   <body>
      <!-- Content -->
   </body>
</html>

Open Graph

Dùng trong thẻ dùng để khai báo thông tin khi chia sẻ đường dẫn qua nền tảng xã hội (Facebook, Twitter…) thì đường dẫn sẽ hiển thị có hình ảnh, tiêu đề, mô tả và trang web

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


<!doctype html>
<html xmlns:og="http://ogp.me/ns#">
   <head>
      <title>Ví dụ</title>
      <meta property="og:title" content="Cheat Sheet" />
      <meta property="og:type" content="website" />
      <meta property="og:url" content="https://doidev.com/" />
      <meta property="og:image" content="https://doidev.com/demo.jpg" />
      ---
      Có thể thiết lập thêm như bên dưới
      ---
      <meta property="og:audio" content="https://doidev.com/track.mp3" />
      <meta property="og:description" content="A brief description" />
      <meta property="og:determiner" content="the" />
      <meta property="og:locale" content="en_US" />
      <meta property="og:locale:alternate" content="es_ES" />
      <meta property="og:site_name" content="HTML CheatSheet" />
      <meta property="og:video" content="https://doidev.com/video.swf" />

Cấu trúc

Tables(bảng)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


<table><caption>Liên hệ</caption>
<thead>
	<tr>
		<th>Tên</th>
		<th colspan="2">Số Điện thoại</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>Chém gió đời Dev</td>
		<td>577854</td>
		<td>577855</td>
	</tr>
	<tr>
		<td>Chém gió Web Dev</td>
		<td>577856</td>
		<td>577857</td>
	</tr>
</tbody>
<tfoot>
	<tr>
		<td>&nbsp;</td>
		<td>Nhà</td>
		<td>Cơ quan</td>
	</tr>
</tfoot>
</table>

Hiển thị cho ví dụ Khởi tạo Trang web

Liên hệ
Tên	Số Điện thoại
Chém gió đời Dev	577854	577855
Chém gió Web Dev	577856	577857
	Nhà	Cơ quan

Danh sách (list)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


  1. Danh sách không có thứ tự
<ul>
  <li>Sáng</li>
   <li>Trưa</li>
   <li>Chiều</li>
</ul>
  2. Danh sách có thứ tự
<ol>
  <li>Một vợ</li>
   <li>Hai con</li>
   <li>Ba lầu</li>
   <li>Bốn bánh</li>
</ol>
3. Danh sách định nghĩa
<dl>
   <dt>HTML</dt>
   <dd>Hypertext Markup Language</dd>
   <dt>CSS</dt>
   <dd>Cascading Style Sheets </dd>
</dl>

Hiển thị cho ví dụ danh sách

Danh sách không có thứ tự

Sáng
Trưa
Chiều

2. Danh sách có thứ tự

Một vợ
Hai con
Ba lầu
Bốn bánh

3. Danh sách định nghĩa

HTML: Hypertext Markup Language
CSS: Cascading Style Sheets

Form (Biểu mẫu)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


<form action="/action.php" method="post">
   Name: <input name="name" type="text" /> <br />
   Age: <input max="99" min="1" name="age" step="1" type="number" value="18" /> <br />
   <select name="gender">
      <option selected="selected" value="male">Male</option>
      <option value="female">Female</option>
   </select>
   <br />
   <input checked="checked" name="newsletter" type="radio" value="daily" /> Daily <input name="newsletter" type="radio" value="weekly" /> Weekly<br />
   <textarea cols="20" name="comments" rows="5">Comment</textarea>
   <br />
   <label><input name="terms" type="checkbox" value="tandc" />Accept terms</label> <br />
   <input type="submit" value="Submit" />
</form>

Hiển thị cho Form biểu mẫu

Bài này tới đây là hết rồi. Nó chỉ là một tóm tắt ngắn gọn và cơ bản về HTML5 thôi