, header tags like h1, h2, h3, .., Thẻ này được gọi là thẻ tiêu đề. Chữ h trong tên thẻ cho phép chúng tôi và trình duyệt biết rằng chúng tôi đang làm việc với thẻ tiêu đề. Cái theo sau h cho biết kích thước của tiêu đề đang được sử dụng. Trong trường hợp này, 1 là văn bản mặc định lớn nhất mà bạn có thể hiển thị trong trình duyệt. Đầu ra của thẻ này trong trình duyệt sẽ hiển thị Hello World
Gói phát triển phần mềm tất cả trong một[hơn 600 khóa học, hơn 50 dự án]
Giá
Xem khóa học
600+ Khóa học trực tuyến. hơn 50 dự án. Hơn 3000 giờ. Giấy chứng nhận có thể kiểm chứng. Truy cập Trọn đời
4. 6 [84.897 xếp hạng]
Thuộc tính là gì?
Thuộc tính là giá trị bổ sung có thể định cấu hình thẻ hoặc điều chỉnh hành vi của thẻ. Đây là một ví dụ hoàn hảo về giao diện của một thẻ với một thuộc tính được thêm vào
Add Pizza
Giá trị của thuộc tính id có thể là bất cứ thứ gì bạn muốn, mặc dù nó không được có bất kỳ khoảng trống nào trong đó. Thuộc tính thứ hai là thuộc tính lớp. Thuộc tính lớp có thể nhận nhiều giá trị, có thể là bất kỳ giá trị nào bạn muốn
Thuộc tính toàn cầu
Thuộc tính toàn cầu có thể được đặt trên tất cả các thẻ. Hãy xem xét bốn thuộc tính toàn cầu được sử dụng phổ biến nhất
- Tôi. Đầu tiên là thuộc tính id. Điều này không thêm thay đổi trực quan nào vào chính thẻ đó. Nó được sử dụng chủ yếu cho JavaScript và tạo kiểu, với CSS [Cascading Style Sheets]. Giá trị thuộc tính id phải là duy nhất trên một trang nhất định. Điều đó có nghĩa là không có hai thẻ nào có cùng giá trị trong một id
- tầng lớp. thuộc tính lớp tương tự như thẻ id, ngoại trừ giá trị của thuộc tính có thể được lặp lại nhiều lần trên một trang nhất định. Bạn sẽ thấy chúng được sử dụng chủ yếu với CSS và đôi khi với JavaScript
- Phong cách. thuộc tính style được sử dụng cho Inline CSS. Nên tránh nếu có thể
- chức vụ. tiêu đề cung cấp một mã định danh hoặc một loại chú giải công cụ cho thẻ. Khi chuột đã di chuột qua một thẻ, nơi tiêu đề đã hiển thị
Ví dụ
Welcome!
Phần tử cấp khối so với phần tử nội tuyến
Sau đây là các thuộc tính của Block level element và Inline element
Phần tử cấp độ khối. Chiếm toàn bộ chiều rộng của vùng chứa chính của chúng
Phần tử nội tuyến. Chiếm không gian hiện tại tồn tại trong
Đây là một minh họa cơ bản
Vùng màu xanh lá cây này đại diện cho vùng chứa chính. Trong trường hợp của chúng tôi, đó là cửa sổ trình duyệt. Chiều rộng của trình duyệt, thẻ cha của chúng tôi, sẽ là chiều rộng của phần tử cấp khối
Các khu vực màu hồng này đại diện cho các yếu tố hoặc thẻ cấp khối của chúng tôi. Như bạn có thể thấy, chúng chiếm toàn bộ chiều rộng của vùng chứa chính. Điều này có nghĩa là bất kỳ thẻ nào cũng phải bắt đầu ở dòng tiếp theo
Ba khu vực màu xanh lam tiếp theo này là các thẻ Nội tuyến. Như bạn có thể thấy, chúng được đặt cạnh nhau, chỉ chiếm chiều rộng cần thiết cho nội dung mà chúng chứa. Điều này sẽ có ý nghĩa hơn khi chúng ta thấy các thẻ này hoạt động
Các thẻ HTML cơ bản khác nhau
Bây giờ chúng ta hãy thảo luận về các thẻ HTML khác nhau
1. Thẻ – LOẠI TÀI LIỆU
DOCTYPE cho trình duyệt biết loại tệp nào sẽ được mở. Vì chúng tôi đang mã hóa trong HTML5. HTML5 là phiên bản mới nhất của ngôn ngữ Đánh dấu HTML; . Chú ý, không có thẻ đóng. DOCTYPE giống như một thẻ thông thường và bắt đầu bằng dấu ngoặc vuông, sau đó chúng tôi đặt dấu chấm than, rồi chúng tôi nhập DOCTYPE. Chúng tôi có không gian, và sau đó chúng tôi gõ html. Về cơ bản, thẻ này nói với trình duyệt rằng, này, những tài liệu này cần được cung cấp dưới dạng HTML
2. Thẻ – html
Thẻ HTML, còn được gọi là phần tử gốc, theo sau thẻ DOCTYPE. Thẻ này có thể có các thuộc tính chung bình thường cộng với một thuộc tính được gọi là bảng kê khai. Thẻ HTML chỉ có thể được sử dụng một lần trên trang HTML
Mọi thứ liên quan đến HTML được lồng vào bên trong thẻ này. Điều này có nghĩa là tất cả các thẻ của chúng ta sẽ nằm giữa phần mở và phần đóng của các thẻ HTML
3. Thẻ - đầu
Thẻ head cung cấp thông tin chung về trang web đang được hiển thị. Một thẻ riêng lẻ được thêm vào bên trong thẻ đầu, thẻ này cho phép trình duyệt biết một số chi tiết cụ thể, chẳng hạn như tiêu đề của trang, tác giả của trang và các thông tin khác như vậy
Không có gì trong thẻ đầu này sẽ được hiển thị trên trang web. Tuy nhiên, một số thông tin được hiển thị trong ứng dụng trình duyệt thực tế, chẳng hạn như tiêu đề tab. Đó là thuộc tính toàn cầu tiêu chuẩn có sẵn cho thẻ này
4. Thẻ – cơ thể
Thẻ body cho phép trình duyệt biết những gì sẽ hiển thị trên trang. Bên trong nội dung, thẻ là nơi chúng tôi sẽ đặt tất cả nội dung của mình, chẳng hạn như thẻ và văn bản. Mọi thứ được đặt bên trong thẻ body sẽ được hiển thị trên trang web
Thẻ body được đặt sau thẻ head bên trong thẻ HTML. Chỉ có một thẻ cơ thể trên mỗi trang. Thẻ body có thể có các thuộc tính toàn cầu tiêu chuẩn
5. Thẻ – nhịp
Thẻ đầu tiên của chúng tôi là thẻ span. Thẻ này là một vùng chứa chung, Nội tuyến. Điều đó có nghĩa là nó không có kiểu mặc định được liên kết với nó. Bạn sẽ muốn sử dụng thẻ này nếu bạn cần nhóm các văn bản mà bạn muốn giữ nội tuyến cùng nhau
6. Thẻ – p
Thẻ đoạn hoặc thẻ p được sử dụng khi bạn muốn giữ một đoạn văn bản lại với nhau. Phần tử này là phần tử cấp khối, nghĩa là phần tử này chiếm chiều rộng của vùng chứa chính của nó. Việc sử dụng lý tưởng sẽ là khi bạn có nhiều văn bản để hiển thị. Chỉ các thuộc tính toàn cầu được phép cho phần tử cụ thể này
7. Thẻ – div
________số 8
Thẻ chia, hay thường được gọi là thẻ div, là một bộ chứa khối chung. Điều này có nghĩa là bạn có thể nhóm nhiều thẻ lại với nhau để tạo thành một phần trên trang web của mình. Thẻ này là thuộc tính toàn cầu
8. Thẻ – phụ
Thẻ chỉ số dưới, hoặc thẻ phụ, cho phép phần tiếp theo ở bên dưới dòng văn bản thông thường. Đó là một phần tử nội tuyến vì nó sử dụng các thuộc tính toàn cầu. Một ví dụ hoàn hảo về cách sử dụng là làm cho 2, trong H2O, xuất hiện ít. Thí dụ. H2O9. Thẻ – hỗ trợ
Welcome!
0Thẻ chỉ số trên hoặc thẻ sup, là một phần tử nội tuyến, cho phép văn bản nằm trên dòng văn bản bình thường. Một ví dụ sẽ là khi xử lý một phương trình toán học. Lưu ý rằng 2 cao hơn phần còn lại của văn bản trong phương trình này. Thí dụ. E = mc2 Đây là thuộc tính toàn cầu10. Thẻ – bạn
Welcome!
1- U là viết tắt của gạch chân. Điều này sẽ gạch dưới bất kỳ văn bản nào trong các thẻ mở và đóng. Đó là một phần tử nội tuyến và thuộc tính toàn cầu
11. Gắn thẻ-em
Welcome!
2Thẻ em là viết tắt của sự nhấn mạnh. Trong trường hợp này, ý tưởng nhấn mạnh bất kỳ văn bản nào sẽ làm cho văn bản trông nghiêng hoặc nghiêng. Phần tử nội tuyến này được sử dụng khi bạn muốn thể hiện sự nhấn mạnh nhất định vào các phần của văn bản của mình. Đây là một thuộc tính toàn cầu
12. Thẻ – mạnh mẽ
Welcome!
3Nếu bạn muốn in đậm bất kỳ văn bản nào, bạn sẽ sử dụng thẻ Strong. Thẻ nội tuyến này được đặt xung quanh văn bản bạn muốn in đậm, giống như thẻ nhấn mạnh. Thẻ mạnh làm tăng thêm tầm quan trọng cho văn bản trên trang web của bạn
13. Thẻ – anh
Welcome!
4Thẻ BR đang tạm dừng. Có một số thẻ không cần thẻ đóng. Nó không phải là phần tử khối và nội tuyến. Nó là một thuộc tính toàn cầu14. Thẻ – giờ
Thẻ giờ cũng không cần thẻ đóng để hoàn thành. Thẻ hr viết tắt của thước kẻ ngang sẽ tạo thành một dòng trên trang web. Đó là một yếu tố cấp khối. Đó là một thuộc tính toàn cầu15. Các phần tử/thẻ lồng nhau
- Thẻ lồng nhau
- Trường hợp một thẻ nằm trong một thẻ khác
Thí dụ
16. Thẻ – li
Welcome!
5Thẻ li đại diện cho một mục danh sách là thẻ sẽ được lồng vào nhau. Bên trong thẻ li, bạn sẽ đặt bất kỳ loại nội dung nào là danh sách
17. Thẻ – ol
Welcome!
6Thẻ ol, đại diện cho danh sách có thứ tự, là nơi chứa thẻ li lồng nhau. Bạn sẽ không bao giờ nhìn thấy hai thẻ này, thẻ li hoặc thẻ ol. Vì đây là danh sách các đơn đặt hàng, nghĩa là bên cạnh mỗi mục trong danh sách, sẽ có một giá trị. Theo mặc định, danh sách sẽ sử dụng số. Thuộc tính Toàn cầu, đảo ngược, bắt đầu, loại [a, A, I, i]
18. Thẻ – ul
Welcome!
7Thẻ ul, hay danh sách không có thứ tự, là nơi chứa thẻ li lồng nhau, giống như thẻ ol. Nhưng không giống như thẻ ol, hiển thị một giá trị số bên cạnh mỗi mục trong danh sách, thẻ ul này chỉ cung cấp các dấu đầu dòng bên cạnh các mục trong danh sách
19. Thẻ – h1, h2, h3, h4, h5, h6
Có tổng cộng sáu thẻ tiêu đề. Mỗi trong số này có số riêng, bắt đầu từ 1 đến 6. Thẻ h1 và tất cả các thẻ tiêu đề khác cung cấp mô tả ngắn gọn cho một phần văn bản hoặc nội dung. Các thẻ này là thuộc tính toàn cầu
20. Thẻ - một
Thẻ hoặc thẻ neo là một thẻ phổ biến vì nó tạo liên kết đến các trang khác trên trang web và nó có thể tạo liên kết đến các trang web bên ngoài. Thẻ là một phần tử nội tuyến và có rất nhiều thuộc tính bên cạnh các thuộc tính chung được liên kết với nó
Welcome!
8Một thuộc tính bổ sung mà chúng tôi sẽ đề cập là a href. Đây là viết tắt của Tham khảo siêu văn bản. Điều chính cần nhớ là href là thuộc tính nơi chúng tôi cung cấp đường dẫn để chúng tôi có thể liên kết đến một trang khác hoặc một trang web khác. Thuộc tính href. Và chúng tôi luôn muốn đặt thẻ đóng của chúng tôi. Liên kết lại với Google. trang web com.
Đầu ra 21. Thẻ – hình ảnh
Thẻ img hoặc thẻ hình ảnh cung cấp cho chúng tôi khả năng hiển thị hình ảnh trên trang của chúng tôi
Welcome!
9Bây giờ bạn sẽ nhận thấy trong ví dụ ở đây rằng thẻ hình ảnh không có thẻ đóng. Đây là một trong số ít các thẻ. Nhưng không giống như thẻ br và thẻ hr, chúng tôi biểu thị phần cuối của thẻ này bằng dấu gạch chéo về phía trước. Một số người thực sự có thể coi đây là cách viết tốc ký để viết thẻ đóng.
Thuộc tính src và thuộc tính alt. Thuộc tính src hoặc thuộc tính nguồn, như bạn thấy trong ví dụ, là bắt buộc
Bây giờ giá trị của thuộc tính này là đường dẫn đến ảnh chúng tôi muốn hiển thị. Đường dẫn có thể là đường dẫn tuyệt đối hoặc đường dẫn tương đối. Thuộc tính khác là thuộc tính alt. Điều này là viết tắt của một sự thay thế. Giá trị alt sẽ mô tả ảnh. Văn bản thay thế sẽ được hiển thị trong trình duyệt như bên dưới
Kết luận – Thẻ HTML cơ bản
HTML thực sự là lĩnh vực chủ đề lớn đáng kinh ngạc, được cho là sở hữu. Khi bạn đã xoay sở để có được nhiều như vậy, mặc dù bạn còn hơn cả khả năng hoàn hảo đối với sức mạnh tiến hóa từ phía trước. Bạn cần phải an toàn hơn rất nhiều, chia trang web thành các phần tử của nó và sau đó là mã được liên kết với HTML và CSS
Bài viết được đề xuất
Đây là hướng dẫn về Thẻ HTML cơ bản. Ở đây chúng ta cũng thảo luận về Tag là gì? . Bạn cũng có thể xem các bài viết sau để tìm hiểu thêm –
4 tính năng của HTML là gì?
Tính năng HTML hàng đầu .
Người dùng thân thiện & đơn giản
SEO – Tối ưu hóa công cụ tìm kiếm
localStorage & IndexedDB – Lưu trữ dữ liệu phía máy khách
Khả năng ngoại tuyến [PWA] với Cache API & Service worker
Các thẻ quan trọng trong HTML là gì?
3 loại thẻ HTML là gì?
Thẻ HTML cơ bản .
Head Tag. The head tag contains all the elements describing the document..
Title Tag. The title tag specifies the HTML page title, which is shown in the browser's title bar..
Body Tag. The body tag is where you insert your web page's content..
Thẻ đoạn văn. .
Thẻ tiêu đề
6 thẻ HTML là gì?
Đây là danh sách các thẻ HTML cơ bản của chúng tôi. .
để in đậm văn bản. cho văn bản in đậm với dấu nhấn mạnh
phần HTML chính
để giải lao
nó là một bộ phận hoặc một phần của tài liệu HTML
. cho tiêu đề
để tạo một văn bản in nghiêng
cho hình ảnh trong tài liệu