I. Các thẻ html

1. Các thẻ hiển thị nội dung

Các thẻ heading:

Thẻ	Mã html ví dụ	Hiển thị
h1	<h1>Heading 1</h1>	Heading 1
h2	<h1>Heading 2</h2>	Heading 2
h3	<h3>Heading 3</h3>	Heading 3
h4	<h4>Heading 4</h4>	Heading 4

Các thẻ text:

Thẻ	Chức năng	Mã html ví dụ	Hiển thị
span	Một đoạn văn bản	<span>Lorem ipsum dolor</span>	Lorem ipsum dolor
label	Một đoạn văn bản, thường dùng làm tiêu đề chú giải cho các nội dung khác	<label>Enter your name:</label>	Enter your name:
div	Một đoạn văn bản, tự phân dòng với các nội dung xung quanh	<div>Div 1</div> <div>Div 2</div>	Div 1 Div 2
p	Một đoạn văn bản, tự phân dòng với các nội dung xung quanh. Gần giống với div, nhưng p thường dùng cho đoạn văn bản dài.	<p>Lorem ipsum dolor sit ...</p> <p>Excepteur sint occaecat ...</p>	Lorem ipsum dolor sit ... Excepteur sint occaecat ...
a	Link đến một trang web/phần trang web khác	<a href="https://google.com"> Tìm kiếm </a>	Tìm kiếm

Các thẻ ảnh, frame:

Thẻ	Chức năng	Mã html ví dụ	Hiển thị
img	Hiện thị một ảnh	<img src="https://bit.ly/3J8DX46" alt="Camel" />
iframe	Nhúng một trang web khác vào trang hiện tại	<iframe src="./iframe.html"></ifame>

Các thẻ của danh sách (list):

Thẻ	Chức năng
ul	Thẻ bao của danh sách không gắn số thứ tự
ol	Thẻ bao của danh sách có gắn số thứ tự
li	Thẻ chứa nội dung một thành phần trong danh sách

Mã html ví dụ	Hiển thị
<ul> <li>Item 1</li> <li>Item 2</li> </ul>	Item 1 Item 2
<ol> <li>Item 1</li> <li>Item 2</li> </ol>	Item 1 Item 2

Các thẻ của bảng (table):

Thẻ	Chức năng
table	Thẻ bao của bảng
thead	Thẻ bao phần tiêu đề của bảng
tbody	Thẻ bao phần nội dung của bảng
tr	Thẻ bao của một dòng
th	The bao của một cột trong phần tiều đề
td	Thẻ bao của một cột trong phần nội dung

Mã html ví dụ

Hiển thị

<table>
  <thead>
    <tr>
      <th>Mã</th>
      <th>Tên</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>IPX</td>
      <td>IPhone X</td>
    </tr>
    <tr>
      <td>IP11</td>
      <td>IPhone 11</td>
    </tr>
  </tbody>
</table>

Mã	Tên
IPX	IPhone X
IP11	IPhone 11

Hình bên dưới thể hiện các phần trong bảng tương ứng với các thẻ:

2. Các thẻ điều khiển:

Thẻ input:

Các thẻ input dùng để lấy dữ liệu từ người dùng

Loại input	Chức năng	Mã html ví dụ	Hiển thị
text (hoặc không có type)	Nhập vào dữ liệu text	<input type="text"> <input placeholder="Your name">
checkbox	Lựa chọn yes/no	<input type="checkbox">
radio	Lựa chọn một trong nhiều giá trị. Lưu ý : dùng thuộc tính name để gộp các input thành một nhóm	<input name="gender" type="radio"> Male <input name="gender" type="radio"> Female <input name="gender" type="radio"> Other	Male Female Other
file	Dùng để tải file	<input type="file">

Thẻ textarea:

Dùng để nhập vào một đoạn text nhiều dòng.

Mã html ví dụ	Hiển thị
<textarea rows="5" cols="50"></textarea>

Thẻ select:

Dùng để chọn một/nhiều giá trị từ một danh sách.

Loại select	Mã html ví dụ	Hiển thị
Lựa chọn một giá trị	<select> <option value="M">Male</option> <option value="F">Female</option> <option value="O">Other</option> </select>
Lựa chọn nhiều giá trị	<select multiple> <option value="ORANGE">Orange</option> <option value="APPLE">Apple</option> <option value="BANANA">Banana</option> <option value="MANGO">Melon</option> </select>

Thẻ button:

Dùng để thực hiện một hành động.

Mã html ví dụ	Hiển thị
<button>Next</button>

Thẻ form:

Dùng để nhóm nhiều thẻ dữ liệu thành một form.

Mã html ví dụ	Hiển thị
<form action="login" method="POST"> <p><input placeholder="username"></p> <p> <input type="password" placeholder="password"> </p> <button>Log in</button> </form>

II. Style & CSS

1. Các cách gắn style cho các thẻ html

Inline style

Sử dụng thuộc tính style của các thẻ html.

Mã html ví dụ	Hiển thị
<div style="color:red">Text in red</div>	Text in red

Khai báo style ở đầu file html

Trong phần style thuộc phần head của file html, khai báo thuộc tính cho các nhóm thẻ (thông qua các selector). Trong phần body của file html, thẻ nào tương ứng với các selector ở phần trên sẽ được gắn style của nhóm đó.

Ví du:

<head>

<style>

.highlight

{

color: red

}

</style>

</head>

<body>

Lorem ipsum

</p>

</body>

Các dạng selector thường dùng:

Loại selector	Phạm vi tác động	Ví dụ	Giải thích
Theo loại thẻ	Toàn bộ các thẻ thuộc loại chỉ định	p{ color: red; }	Tác động lên toàn bộ các thẻ <p></p>
Theo CSS class	Toàn bộ các element có chứa class chỉ định	.highlight{ color: yellow; }	Tác động lên các element có chứa class highlight, ví dụ: <p class="highlight">Text</p> <div class="highlight">Text</div>
Theo id của element	Duy nhất element có id được chỉ định	#title{ color: red; }	Tác động thẻ có id bằng title, ví dụ: <p id="title">Text</p>
Kết hợp and nhiều selector: Các selector được viết liên tiếp và sát nhau	Tác động lên các element thoả mãn tất cả các selector.	p.header.bold { font-size: 20px; font-weight: bold; }	Tác động lên các thẻ p có chứa cả 2 class header và bold, ví dụ: <p class="header bold">Text</p>
Kết hợp or nhiều selector: Các selector được viết cách nhau bởi dấu phảy	Tác động lên các element thoả mãn một trong các selector.	p.header,.bold { font-weight: bold; }	Tác động lên các thẻ p có class header hoặc các thẻ có chứa class bold, ví dụ: <p class="header">Text</p> <div class="bold">Text</div>
Descendant Selector: Lựa chọn các element con/cháu. Selector cha và selector con/cháu được viết ngăn cách nhau bởi dấu cách	Các element là con/cháu (tất cả cấp) của một/một nhóm element	div p{ color: black; }	Tác động thẻ có p bên trong các thẻ div, giữa thẻ div và thẻ p có thể có các thẻ trung gian, ví dụ: <div> <p>Paragraph 1</p> <ul> <li><p>Paragraph 2</p></li> </ul> </div>
Child Selector: Lựa chọn các element con gần nhất (1 cấp) Selector cha và selector con được viết ngăn cách nhau bởi dấu lớn hơn	Các element là con (cấp 1) của một/một nhóm element	div>p{ color: black; }	Tác động thẻ có p có thẻ cha là div, giữa thẻ div và thẻ p không được có các thẻ trung gian, ví dụ: <div> <p>Paragraph 1</p> </div>

Khai báo stylesheet riêng

Tạo một file stylesheet (tên mở rộng .css) để khai báo các selector. Trong phần head của file html, dùng thẻ <link> để nhúng file css đã tạo

Ví dụ:

main.css	index.html
p.header,.bold { font-weight: bold; }	<head> <link rel="stylesheet" href="main.css"> </head> <body> <p class="header">Text</p> <div class="bold">Text</div> </body>

main.css

index.html

p.header,.bold {
font-weight: bold;
}

<head>

<link rel="stylesheet" href="main.css">

</head>

<body>

</body>

2. Các style hay sử dụng

Style	Ý nghĩa	Mã html ví dụ	Hiển thị
color	Màu sắc	<style> .p1 {color: red} .p2 {color: rgb(255,99,71)} .p3 {color: #ff00ff} </style> <body> <p class="p1">Paragraph 1</p> <p class="p2">Paragraph 2</p> <p class="p3">Paragraph 3</p> </body>	Paragraph 1 Paragraph 2 Paragraph 3
background-color	Màu nền	<style> .highlight { background-color: yellow } </style> <body> <p class="highlight"> Lorem ipsum </p> </body>	Lorem ipsum
border	Đường viền : độ rộng, màu sắc, loại đường	<style> .container { border: 1px solid red border-radius: 5px } .underlined { border-bottom: 1px solid black } </style> <body> <p class="container">Container</p> <p class="underlined">Underlined</p> </body>	Container Underlined
margin	Khoảng cách so với các phần tử xung quanh	<style> .container { border: 1px solid red margin: 5px } </style> <body> <p class="container">Container 1</p> <p class="container">Container 2</p> <p class="container">Container 3</p> </body>	Container 1 Container 2 Container 3
padding	Khoảng cách so với các phần tử bên trong	<style> div { border: 1px solid blue padding: 5px } span { border: 1px solid red } </style> <body> <div> <span>Lorem ipsum</span> </div> </body>	Lorem ipsum
text-align	Căn lề text: trái, phải, giữa	<style> p{border: 1px solid red} .text-left {text-align: left} .text-right {text-align: right} .text-center {text-align: center} </style> <body> <p class="text-left">Text left</p> <p class="text-right">Text right</p> <p class="text-center">Text center</p> </body>	Text left Text right Text center
font-size	Cỡ chữ	<style> .large-text {font-size: 20px} </style> <body> <p class="large-text">Lorem ipsum</p> </body>	Lorem ipsum
font-weight	Độ đậm/nhạt của chữ	<style> .bold-text {font-weight: 700} </style> <body> <p class="bold-text">Lorem ipsum</p> </body>	Lorem ipsum
width, height	Kích thước các chiều ngang/dọc	<style> .container { width: 200px height: 30px border: 1px solid red } </style> <body> <p class="container">Lorem ipsum</p> </body>	Lorem ipsum
max-width, max-height	Kích thước tối đa các chiều ngang/dọc	<style> .container { max-width: 250px border: 1px solid red } </style> <body> <p class="container"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua </p> </body>	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

III. Thư viện Bootstrap

Bootstrap là thư viện CSS phổ biến (nhất) và dễ sử dụng cho người mới học HTML. Sử dụng bootstrap giúp giảm nhẹ việc phải tự viết CSS cho một số UI cơ bản.

Để sử dụng bootstrap, chỉ cần thêm khai báo stylesheet ở phần đầu file html:

    
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

1. Sử dụng Layout của Bootstrap

Để chia màn hình thành các phần nhỏ cho việc bố trí nội dung (layout),bootstrap cung cấp các class sau:

container: khung bao toàn trang
row: một dòng
column: một cột

Bootstrap nổi tiếng với layout 12 cột, tức 1 dòng được chia thành 12 phần bằng nhau và mỗi cột có thể nhận độ rộng bằng bội số (1,2..12) của 1/12 màn hình. Để thể hiện độ rộng các cột, Bootstrap cung cấp các class col-n trong đó n là các số 1,2...12.

Ví dụ:

Layout	Html	Hiển thị
Chia đôi màn hình tỉ lệ 1:1	<div class="row"> <div class="col-6"> </div> <div class="col-6"> </div> </div>	col-6 col-6
Chia ba màn hình tỉ lệ 1:1:1	<div class="row"> <div class="col-4"> </div> <div class="col-4"> </div> <div class="col-4"> </div> </div>	col-4 col-4 col-4
Chia đôi màn hình tỉ lệ 1:3	<div class="row"> <div class="col-3"> </div> <div class="col-9"> </div> </div>	col-3 col-9

Trong bootstrap, có thể sử dụng nested layout: Trong row có các column, trong column lại có các row, ví dụ:

col-3

row

col-6

2. Màu sắc trong Bootstrap

Bootstrap sử dụng các màu sắc để thể hiện tính chất của thông tin hiển thị:

Nhóm class

Màu

Ví dụ

*-success

Xanh lá cây

<span class="text-success">Success</span>	Success
<button class="btn btn-sm btn-success">Done</button>
<div class="bg-success"> </div>

*-primary

Xanh nước biển

<span class="text-primary">Primary</span>	Primary
<button class="btn btn-sm btn-primary">Continue</button>
<div class="bg-primary"> </div>

*-secondary

Xám

<span class="text-secondary">Secondary</span>	Secondary
<button class="btn btn-sm btn-secondary">Cancel</button>
<div class="bg-secondary"> </div>

*-warning

Vàng

<span class="text-warning">Warning</span>	Warning
<button class="btn btn-sm btn-warning">Ignore</button>
<div class="bg-warning"> </div>

*-danger

Đỏ

<span class="text-danger">Danger</span>	Danger
<button class="btn btn-sm btn-danger">Delete</button>
<div class="bg-danger"> </div>

3. Một số class UI thông dụng

Class

Chức năng

Ví dụ

Hiển thị

form-control

Dùng để chuẩn hoá các thẻ nhập liệu

<option>Female</option>

</select>

form-group

Gộp thẻ nhập liệu và label thành một block

</div>

Name:

btn

Button

</button>

btn-sm

Button nhỏ

</button>

table

Bảng dữ liệu

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

<td>IPhone X</td>

</tr>

<tr>

<td>IPhone 11</td>

</tr>

</tbody>

</table>

Sản phẩm	Giá
IPhone X	10.500.000đ
IPhone 11	11.500.000đ

table-bordered

Bảng dữ liệu có viền bao

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

<td>IPhone X</td>

</tr>

<tr>

<td>IPhone 11</td>

</tr>

</tbody>

</table>

Sản phẩm	Giá
IPhone X	10.500.000đ
IPhone 11	11.500.000đ

4. Các class về margin và padding

Các class về margin được bắt đầu bằng m, các class padding được bắt đầu bằng p

Nếu chỉ padding theo 1 chiều/phương thì phía sau m/p là chiều/phương muốn thực hiện padding, margin:

s (ps-*, ms-*): padding/margin left (start)
e (pe-*, me-*): padding/margin right (end)
t (pt-*, mt-*): padding/margin top
b (pb-*, mb-*): padding/margin bottom
x (px-*, mx-*): padding/margin theo chiều ngang (x)
y (py-*, my-*): padding/margin theo chiều dọc (y)

Phần còn lại trong các class margin/padding (-*) là một con số thể hiện mức độ margin, padding

Mức độ	Kích thước padding/margin	Các class tương ứng
1	0.25 rem	m-1, ms-1, me-1, mt-1, mb-1, mx-1, my-1, p-1, ps-1, pe-1, pt-1, pb-1, px-1, py-1
2	0.5 rem	m-2, ms-2, me-2, mt-2, mb-2, mx-2, my-2, p-2, ps-2, pe-2, pt-2, pb-2, px-2, py-2
3	1.0 rem	m-3, ms-3, me-3, mt-3, mb-3, mx-3, my-3, p-3, ps-3, pe-3, pt-3, pb-3, px-3, py-3
4	1.5 rem	m-4, ms-4, me-4, mt-4, mb-4, mx-4, my-4, p-4, ps-4, pe-4, pt-4, pb-4, px-4, py-4
5	3.0 rem	m-5, ms-5, me-5, mt-5, mb-5, mx-5, my-5, p-5, ps-5, pe-5, pt-5, pb-5, px-5, py-5

5. Các class về căn chỉnh text

Có 3 loại căn chỉnh text: căn trái, căn phải, căn giữa.

Class	Loại căn chỉnh	Ví dụ	Hiển thị
text-start	Căn trái	<div class="text-start">Lorrem ipsum...</div>	Lorrem ipsum...
text-center	Căn giữa	<div class="text-center">Lorrem ipsum...</div>	Lorrem ipsum...
text-end	Căn phải	<div class="text-end">Lorrem ipsum...</div>	Lorrem ipsum...

I. Các thẻ html

1. Các thẻ hiển thị nội dung

Các thẻ heading:

Heading 1

Heading 2

Heading 3

Heading 4

Các thẻ text:

Các thẻ ảnh, frame:

Các thẻ của danh sách (list):

Các thẻ của bảng (table):

2. Các thẻ điều khiển:

Thẻ input:

Thẻ textarea:

Thẻ select:

Thẻ button:

Thẻ form:

II. Style & CSS

1. Các cách gắn style cho các thẻ html

Inline style

Khai báo style ở đầu file html

Các dạng selector thường dùng:

Khai báo stylesheet riêng

2. Các style hay sử dụng

III. Thư viện Bootstrap

1. Sử dụng Layout của Bootstrap

2. Màu sắc trong Bootstrap

3. Một số class UI thông dụng

4. Các class về margin và padding

5. Các class về căn chỉnh text