Bởi vì HTML thường là trải nghiệm đầu tiên của mọi người với mã hóa, nên có thể có khá nhiều e ngại về việc học nó. Rất may, cú pháp HTML tương đối đơn giản và dễ học. Hầu hết mọi người có thể tìm hiểu kiến thức cơ bản về HTML và bắt đầu viết mã trong cùng một ngày
Một ngôn ngữ đánh dấu
HTML is a markup language. That means that content on the page is “marked up” by tags which identify the content inside of them. A paragraph, for example, can be identified by placing the “
” opening tag prior to the paragraphs content and the “
” closing tag at the end of a paragraph. The full paragraph would look like this:<p>This is a paragraph.</p>Các thẻ bao gồm một dấu ngoặc nhọn bên trái (
Mặc dù hầu hết các phần tử đều yêu cầu phải có thẻ mở và thẻ đóng, nhưng thẻ đóng là tùy chọn đối với một số phần tử và hoàn toàn không bắt buộc đối với các phần tử khác. Mặc dù có những ngoại lệ đối với quy tắc, nhưng phần lớn bất kỳ phần tử nào chứa nội dung bên trong thẻ mở và thẻ đóng cũng yêu cầu thẻ đóng.
Cấu trúc tài liệu cơ bản
The core of all HTML documents revolves around three basic tags. First, an html tag () is required to identify the document as an HTML file. Directly inside the html tag, you’ll find the head element (). The head of a document is where you’ll find the document’s metadata, the document title, and links to external resources such as style sheets and scripts. A good way to think about the document’s head is that it doesn’t contain any of the page’s visual content rather it contains information about the document and the resources that help make the page work. Directly after the document’s head, you’ll find its body (). The body is where you’ll find all of the page’s actual content. Headings, paragraphs, images, lists, tables, and other content will be located here. At its most basic, an HTML file would look like this:
<html> <head> </head> <body> </body> </html>CÁC LOẠI TÀI LIỆU
Nếu bạn đã xem các trang HTML trước đây, có lẽ bạn đã nhận thấy một thẻ dài, hơi đáng sợ ngay trước thẻ HTML mở đầu. Đây là một khai báo loại tài liệu và nó là một thành phần rất quan trọng nhưng thường bị hiểu sai của các trang HTML. Về cơ bản, nó báo cho tác nhân người dùng đang phân tích cú pháp trang của bạn mong đợi phiên bản HTML (hoặc XHTML) nào, để nó biết nên sử dụng quy tắc cú pháp nào khi hiển thị trang của bạn. Loại tài liệu bạn sử dụng phải dựa trên phiên bản HTML mà bạn đang sử dụng để tạo trang. Mặc dù về mặt lý thuyết, điều đó nghe có vẻ tốt, nhưng trên thực tế, hầu hết thời gian một loại tài liệu chỉ đơn giản là kích hoạt “chế độ tiêu chuẩn” chứ không phải “chế độ quirks” (dựa trên cách hiển thị trang không chuẩn của các trình duyệt cũ hơn). Vì lý do đó, tất cả các tài liệu HTML phải được đặt trước một khai báo doctype. Để biết thêm thông tin về các loại tài liệu và lịch sử đằng sau chúng, hãy xem phần xuất sắc của Mark Pilgrim về các loại tài liệu từ cuốn sách của ông. Dưới đây là một số loại tài liệu HTML phổ biến hơn
HTML4. 0 chuyển tiếp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "//www.w3.org/TR/html4/loose.dtd">XHTML 1. 0 chuyển tiếp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">HTML5
<!DOCTYPE HTML>thuộc tính phần tử
Một số yếu tố có thể được tăng cường thông qua việc sử dụng các thuộc tính. Thuộc tính cho phép bạn cung cấp thêm thông tin hoặc chức năng bổ sung cho nội dung. Các thuộc tính được thêm vào thẻ mở của một phần tử và bao gồm hai phần, tên và giá trị. Mặc dù cú pháp thay đổi dựa trên phiên bản HTML bạn đang sử dụng, nhưng thông lệ tiêu chuẩn là đặt các giá trị trong dấu ngoặc kép
<h1 class=”headline”>Article’s main headline</h1>các yếu tố thay thế
Một số phần tử HTML đại diện cho nội dung được thay thế bằng tài nguyên bên ngoài, chẳng hạn như hình ảnh, điều khiển biểu mẫu hoặc tệp video. Các phần tử này được gọi là các phần tử được thay thế và thường có chiều rộng hoặc chiều cao được xác định trước. Trong một số trường hợp, các phần tử sẽ có các thuộc tính cho trình duyệt biết nơi tìm tài nguyên bên ngoài như hình ảnh hoặc video
<img src=“photo.jpg” alt=“my awesome photo”>cấu trúc mã
Các tài liệu HTML tạo cấu trúc bằng cách lồng các phần tử vào bên trong nhau. Ví dụ: bạn có thể nhóm một phần nội dung trang lại với nhau bằng cách gói chúng trong phần tử
Ví dụ, cú pháp này sẽ không chính xác.
Thay vào đó, cú pháp đúng sẽ là
________số 8HTML cũng có các quy tắc cụ thể về những phần tử nào có thể được lồng trong các phần tử khác. Ví dụ: một đoạn văn (
HTML5, mặt khác, mở rộng khái niệm về loại nội dung thành bảy loại nội dung khác nhau, với một số thành phần thuộc nhiều loại. Điều này thay thế khái niệm về các phần tử cấp độ khối và cấp độ nội tuyến và thêm một số quy tắc cú pháp lồng nhau bổ sung. Phần lớn, các quy tắc xung quanh các phần tử lồng nhau đều có ý nghĩa và khá dễ hiểu. Tuy nhiên, bạn nên chuẩn bị tinh thần vì sẽ mất một thời gian trước khi bạn hiểu đầy đủ tất cả các quy tắc xung quanh các phần tử lồng nhau. Một cách để đảm bảo mã của bạn được cấu trúc đúng cách là xác thực mã của bạn thông qua một dịch vụ như dịch vụ Xác thực đánh dấu của W3C.
bình luận mã
Often it is helpful to leave notes to yourself or other developers within your code. Perhaps you want to remind yourself what a certain script does, or remind a co-worker how to properly structure specific content. To do this, you’ll use comments. Comments should appear on their own line, and typically appear directly before or after the code they refer to. Comments begin with a left-angle bracket, an exclamation point, and two hyphens ().
Cú pháp bình luận
<!-- This is a comment -->Sử dụng ký tự đặc biệt
Một số ký tự được dành riêng trong HTML, nghĩa là bạn không nên sử dụng chúng ngoài mục đích cụ thể của chúng. Ví dụ: dấu ngoặc nhọn được dành riêng cho thẻ và việc sử dụng chúng ở bất kỳ đâu bên ngoài thẻ có thể gây ra lỗi phân tích cú pháp trong trình duyệt. Tuy nhiên, bạn vẫn có thể sử dụng các ký tự dành riêng này và các ký tự hoặc ký hiệu đặc biệt khác bằng cách sử dụng cái được gọi là thực thể ký tự được đặt tên. Các mã đặc biệt này yêu cầu tác nhân người dùng thay thế mã thực thể bằng một ký tự cụ thể. Các thực thể này bắt đầu bằng dấu và (&), theo sau là tên thực thể và kết thúc bằng dấu chấm phẩy (;). Ví dụ: để hiển thị dấu và, bạn sẽ nhập & thay cho dấu và thực tế. Bạn có thể tìm thấy danh sách thực thể ký tự được đặt tên trong các thông số kỹ thuật HTML, mặc dù định dạng của chúng có thể hơi khó đọc. Bạn cũng có thể tìm thấy danh sách hữu ích về các thực thể ký tự trên trang Tham khảo HTML và danh sách toàn diện hơn trên Wikipedia