HTML toàn tập cho người mới | Phần 3

Tiếp nối phần 1, trong phần 2 của series về kiến thức HTML cơ bản toàn tập này mình sẽ chia sẻ các kiến thức về các thẻ form trong HTML cơ bản toàn tập nha.

HTML toàn tập cho người mới | Phần 3 của RealDev sẽ giúp Bạn có cái nhìn sâu hơn về các Thẻ HTML khi ở Phần 2 mình đã hướng dẫn cho các bạn các kiến thức về các thẻ trong Form một cách khá chi tiết kèm các hình ảnh minh hoạ cũng như các lưu ý khi làm việc với Form. Tiếp tục ở phần 3 này mình sẽ nói về các thẻ thường được dùng trong cặp thẻ head nhé.

## Thẻ title

Đây là thẻ định nghĩa tiêu đề của trang web, nó sẽ hiển thị trên tab của trình duyệt ví dụ các bạn đang đọc bài này của mình thì trong HTML của nó sẽ là như đoạn code này, các bạn có thể rê chuột vào tab để Chrome hiển thị tooltip lên là thấy nha.

HTML toàn tập cho người mới | Phần 3 | RealDev Blogs</title>

## Thẻ Meta

<meta name="viewport" content="width=device-width, initial-scale=1">

Đoạn code này chắc các bạn sẽ hay thấy ở các trang web, đoạn này giúp web chúng ta hiển thị responsive để các bạn có thể code responsive đấy.

<meta charset="UTF-8">

Đoạn này thì định nghĩa hệ thống kí tự mà sẽ hiển thị trên web thường hay dùng là UTF-8

<meta name="description" content="Đoạn mô tả ngắn cho trang web"/>

Thẻ này dùng để khai báo mô tả ngắn cho trang web khi các bạn tìm kiếm trên Google sẽ thấy ngoài tiêu đề thì có 1 đoạn chữ ở dưới tiêu đề mô tả cho trang web, nếu không có thẻ này thì Google sẽ lấy nội dung trong bài viết

<meta name="robots" content="noindex"/>

Thẻ này là để báo cho Google biết là trang web này có cần được index không(lập chỉ mục khi tìm kiếm), nếu không khai báo thẻ này thì Google sẽ hiểu là có index nha.

<html lang="en">

Thuộc tính lang=”en” dùng để khai báo ngôn ngữ chính mà trang web đang sử dụng để từ đó công cụ tìm kiếm như Google hướng tới người dùng tốt hơn. Nếu website là tiếng Anh thì lang=”en” còn tiếng Việt thì lang=”vi”.

## Thẻ style

Thẻ này dùng để chứa code CSS bên trong trang web luôn, các bạn sẽ hay nghe từ internal CSS đấy

<style type="text/css"> .header { background-color: blue; }</style>

## Thẻ link

Hiểu đơn giản nhất là thẻ này dùng để chèn các link như CSS hay là Google fonts từ local hay là từ bên ngoài vào ví dụ dưới đây là sử dụng file styles.css ở dưới máy tính, và dùng font Roboto từ Google fonts

<link rel="stylesheet" type="text/css" href="./styles.css"><link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">

Trong đó href sẽ truyền vào đường dẫn, còn rel thì có các loại như là stylesheet tức là liên quan tới CSS, icon liên quan tới favicon, author dẫn đến trang tác giả của trang web, preconnect để khởi tạo kết nối mạng sớm hơn và tăng hiệu suất tải trang. Google font hay dùng để tăng tốc độ load font của họ.

<link rel="icon" href="favicon-16x16.png" type="image/x-icon" sizes="16x16">

## Thẻ iframe

Thẻ này dùng để nhúng trang web khác hay video vào trang web của chúng ta như video dưới đây mình dùng thẻ iframe đưa vào.

<iframe width="1168" height="730" src="https://www.youtube.com/embed/LVs6k-N3byE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## Thẻ audio

Đúng như tên gọi của nó thẻ dùng để các bạn chèn nhạc vào trang web của chúng ta, trong đó src là truyền vào đường dẫn tập tin còn controls nghĩa là cho phép hiển thị các công cụ như nút play, nút pause…

<audio src="https://htmlreference.io/assets/Hal.mp3" controls></audio>

## Thẻ video

Thẻ này thì chèn video vào để hiển thị, phù hợp khi các bạn có video của riêng mình chèn vào chứ không phải dùng từ Youtube Iframe

<video src="https://htmlreference.io/assets/HTML%205%20Video.mp4" controls></video>

## Các thẻ khác

Các thẻ inline như sup để làm chữ nằm lên trên khi chúng ta nói về độ C có biểu tượng độ ở phía trên, còn thẻ sub thì ngược lại nó sẽ nằm dưới như khi chúng ta nói về H2O thì số 2 sẽ nằm ở dưới.

Nước là H<sub>2</sub>O
30<sup>o</sup>C

Nếu các bạn muốn chữ có đường line gạch ngang, giống thuộc tính trong CSS text-decoration: line-through thì dùng thẻ del

<p>This text is normal but <del>this text is strike</del></p>

Thẻ blockquote khi bạn muốn trình bày nội dung dạng quote, kiểu như câu nói trích dẫn

<blockquote cite="https://en.wikiquote.org/wiki/Marie_Curie"> Be less curious about people and more curious about ideas.</blockquote>

Thẻ code giúp hiển thị dưới dạng code trong văn bản, các bạn có thể thấy rõ những chữ màu đỏ trong bài của mình mà các bạn đang đọc là mình dùng thẻ code để nó hiển thị như thế.

Type <code>npm install</code> in your terminal to install a project's dependencies.

Thẻ figurefigcaption thường được sử dụng chung với nhau khi muốn hiển thị hình ảnh kèm theo caption ở dưới

<figure> <img src="/images/html-reference-logo.png" alt="HTML Reference logo"> <figcaption>The HTML Reference logo</figcaption></figure>

Tạm kết

Series HTML cơ bản tạm thời kết thúc ở đây, sắp tới mình sẽ chia sẻ một series khác là CSS cơ bản toàn tập để các bạn được củng cố kiến thức tốt và vững chắc hơn. Hi vọng qua series HTML cơ bản sẽ có ích phần nào cho các bạn trong quá trình học tập và cải thiện kiến thức nhe..

5/5 - (1 Yêu thích)
Html-co-ban-toan-tap-2 HTML toàn tập cho người mới | Phần 2Border-gradient-css TOP 3 CSS Border Gradient cực dễ làmTuy-bien-scrollbar-trong-css CSS Scrollbar Tùy biến dễ dàng ai cũng làm đượcBạn đang xem: HTML toàn tập cho người mới | Phần 3Toàn tập với kiến thức CSS cơ bản dành cho người mới | Phần 1 Css-co-ban-p1CSS hiệu quả hơn mà các bạn nên biết với các tuyệt chiêu này Css-tipsCSS Conditional Border Radius Điều kiện hiển thị bo tròn góc Conditional-radius
Trả lời

Click vào Comment nhanh ở dưới để chia sẻ suy nghĩ của Bạn.

Bài học thật sự hữu ích và cung cấp kiến thức giá trị.Tôi đã học được nhiều điều từ bài viết này.Chia sẻ kiến thức bổ ích, cảm ơn bạn.Cảm ơn bạn đã chia sẻ kinh nghiệm học tập này.Bài viết giúp tôi hiểu rõ hơn về chủ đề này.Giá trị của bài học thực sự đáng khen.Tôi đã học hỏi được nhiều từ bài viết của bạn.Cảm ơn bạn đã chia sẻ kiến thức quý báu này.Nội dung bài viết rất phù hợp với tình hình hiện tại.Tôi đánh giá cao sự cố gắng của bạn trong việc chia sẻ.Bài học rất hữu ích cho công việc của tôi.Cảm ơn bạn đã cung cấp kiến thức chất lượng này.Tôi đã học được điều mới mẻ từ bài viết của bạn.Bài học giúp tôi mở rộng kiến thức của mình.Cảm ơn bạn vì bài học thú vị này.

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Đã Copy vào Bộ nhớ tạm