Tips code HTML hay khi học lập trình front end
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
### 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)
Hình ảnh nổi bật
Hình ảnh nổi bật trong bài viết.