### Hãy thử tạo 1 file html và gõ thử nhé!


#### Khởi tạo tài liệu với HTML.
>html:5
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
```
#### Gõ tên thẻ

>a
```
<a href=""></a>
```
#### Element có kèm theo class

>div.ten-lop 
>
>div.ten-lop-1.ten-lop-2

```
<div class="ten-lop"></div>
<div class="ten-lop-1 ten-lop-2"></div>
```
#### Element có id

>h1#ten-id
>p#ten-id.ten-lop
```
<h1 id="ten-id"></h1>
<p id="ten-id" class="ten-lop"></p>
```
#### Tạo nhiều element giống nhau
>li*3
```
<li></li>
<li></li>
<li></li>
```
#### Tạo các element lồng nhau
> ul>il
```
<ul>
	<li></li>
</ul>
```
>ul>li*3
```
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>
```
>ul>li*3.lop
```
<ul>
  <li class="lop"></li>
  <li class="lop"></li>
  <li class="lop"></li>
</ul>
```
>ul>li*3#item$
```
<ul>
  <li id="item1"></li>
  <li id="item2"></li>
  <li id="item3"></li>
</ul>
```
>div>h1+p
```
<div>
  <h1></h1>
  <p></p>
</div>
```
>form>input:text[name="username"]+input:password[name="pass"]
```
<form action="">
  <input type="text" name="username" id="">
  <input type="password" name="pass" id="">
</form>
```
>div>p{text here}
```
<div>
	<p>text here</p>
</div>
```
#### Thẻ link
>link:css

**Tham khảo: Cheat Sheet**

Tham khảo lộ trình học Front-end [tại đây](/routes/11--lo-trinh-front-end-chuyen-nghiep)


9.jpg

Sử dụng các thẻ HTML một cách nhanh chóng thông qua cú pháp viết tắt. Hy vọng sẽ giúp các bạn có thêm 1 số típ nho nhỏ bỏ túi, nhất là mấy bạn newbie nhé.

#Tips
#Học_lập_trình
#Front_end

Tips code HTML hay khi học lập trình front end

Hãy thử tạo 1 file html và gõ thử nhé!

Khởi tạo tài liệu với HTML.

Gõ tên thẻ

Element có kèm theo class

Element có id

Tạo nhiều element giống nhau

Tạo các element lồng nhau

Thẻ link