Hãy nói về việc viết mã sạch.
Khi tôi đang nói về mã sạch, tôi đang nói về việc học cách
viết mã đó sẽ làm việc trên càng nhiều thiết bị càng tốt.
Để làm được điều đó,
bạn cần phải biết một chút về mô hình đối tượng tài liệu,
còn được gọi là DOM.
Khi HTML5 được
phát triển, loại mục tiêu lái xe chính là họ muốn tuân thủ tiêu chuẩn.
Đó là bất kỳ tính năng mới nên được dựa trên HTML,
CSS, DOM và JavaScript,
và bạn có thể có một cơ hội để tìm hiểu về mỗi một trong số đó.
Nhưng tôi muốn nói về DOM chỉ một chút
bởi vì nó sẽ giúp bạn hiểu HTML tốt hơn một chút.
Một trong những điều về các nhà khoa học máy tính kỳ quái như tôi là chúng ta yêu thích cây cối.
Không giống như cây ngoài trời xanh và đẹp vào mùa thu.
Chúng tôi thích cây toán học.
Những cấu trúc giống cây mà chúng ta có thể chứng minh là hợp lệ hoặc không hợp lệ.
Vì vậy, khi chúng ta nói về HTML như một cây chúng ta đang nói về
ý tưởng này rằng ở gốc rễ của cây chúng ta sẽ được tạo ra HTML.
Sau đó, từ cây đó khi chúng ta nói,
“Tôi sẽ tạo một tài liệu HTML.”
Chúng tôi muốn chia tay.
Chúng tôi muốn cái đầu ở đây, và chúng tôi muốn cái xác.
Trong đầu chúng ta sẽ giữ tất cả các loại
thông tin mà người dùng sẽ không nhìn thấy cho hầu hết các phần.
Một điểm khác biệt là chúng ta có thể nói về tiêu đề,
nhưng chúng ta sẽ có tất cả những thứ ẩn giấu mà không ai thực sự quan tâm đến.
Trong cơ thể là nơi chúng ta sẽ tìm hiểu để đặt tất cả các HTML của chúng tôi năm thẻ.
Vì vậy, chúng ta hãy nói về HTML như một cái cây.
Trong trường hợp này, tôi đang cho bạn thấy ý tưởng này rằng ở thư mục gốc của
mỗi trang HTML nên là những gì được gọi là thẻ HTML.
Đó là loại điều mà nói,
cho phép trình duyệt biết.
Tôi sẽ cung cấp cho bạn một số loại thẻ và đây là cách tôi muốn chúng hoạt động.
Nếu chúng ta không xem nó như một bức tranh,
tôi cũng có thể nói với bạn rằng
mỗi cây có ba phần cho một tài liệu được hình thành tốt.
Doctype, là phiên bản HTML mà bạn sẽ sử dụng.
Người đứng đầu, đó là tất cả các siêu dữ liệu hoặc loại thông tin bổ sung, và cơ thể.
Cơ thể là nội dung có thể hiển thị được.
Điều mà hầu hết mọi người sẽ lấy lại khi họ thực hiện chu kỳ đáp ứng yêu cầu.
Vì vậy, hãy nói doctype.
Anh thật may mắn.
Khi tôi tạo ra các trang web lúc đầu và chúng tôi đang ở trong HTML4,
chúng tôi đã phải nghĩ ra tất cả những cách khác nhau để giải thích xem
HTML4 của chúng tôi là những tiêu chuẩn rất nghiêm ngặt hay liệu đó là chuyển tiếp.
Trong HTML5, nó rất đơn giản để nói,
“Không có chỉ có một điều và nó được gọi là DOCTYPE HTML”, và bạn đang thiết lập tất cả.
Đối với người đứng đầu bên trong thẻ đầu,
chúng tôi sẽ có tất cả các thông tin bổ sung này được sử dụng bởi trình duyệt.
Vì vậy, ví dụ, bạn có thể muốn nói ngôn ngữ mà bạn đang tạo trang của mình.
Bạn cũng có thể bao gồm,
và bạn thực sự muốn bao gồm những gì tiêu đề của các trang của bạn.
Khi tôi đang nói về tiêu đề tôi không nói về loại tiêu đề lớn mà bạn thấy.
Tôi đang nói về những điều nhỏ bé mà bạn nhìn thấy trong tab của trình duyệt của bạn.
Sau đó, bạn cũng có thể muốn thêm các tệp hỗ trợ.
Bạn có thể muốn có các tập tin CSS sẽ tạo kiểu trang của bạn,
hoặc JavaScript có thể thêm vào tương tác khác nhau,
hoặc thực sự bất kỳ loại tiện ích sẽ
thay đổi cách mọi người xem và tương tác với trang web của bạn.
Ngoài tiêu đề, siêu dữ liệu không được hiển thị,
mọi người sẽ không nhìn thấy nó.
Những gì mọi người nhìn thấy là thông tin có trong thẻ cơ thể của bạn.
Thẻ cơ thể đó là phần lớn trang của bạn.
Vì vậy, nó rất quan trọng để viết
mã định dạng tốt hoặc giống như cây mà bạn đang đảm bảo rằng mỗi thẻ có một kết thúc.
Rằng anh không đặt thẻ vào những mệnh lệnh kỳ lạ.
Vì vậy, hầu hết nội dung trong cơ thể được hiển thị bởi trình duyệt nhưng
mỗi lần trong một thời gian có một chút siêu dữ liệu trong đó quá.
Nhưng chúng ta sẽ không đạt được điều đó trong lớp học này.
Vì vậy, chúng ta hãy nhìn vào một ví dụ.
Ngay tại đây, tôi có một tập tin được gọi là template.html,
và tôi đang hiển thị mã ở đây trên màn hình cho bạn.
Bạn có thể tìm thấy ba phần của một tài liệu được hình thành tốt?
Điều đầu tiên bạn muốn tìm kiếm là Doctype.
Chúng ta có cái đó ngay đây.
Cho bạn biết rằng đây là một tài liệu HTML5.
Sau đó chúng tôi có thẻ HTML là gốc rễ của cây khoa học thực sự của chúng
tôi, và tôi cho mọi người biết tôi thích ngôn ngữ mà nó được hiển thị bằng tiếng Anh.
Trong phần đầu chúng tôi có siêu dữ liệu đó.
Nơi mà nó nói với chúng ta những thứ như, “Này,
tôi biết rằng có rất nhiều bàn phím
và cách khác nhau trên khắp thế giới để đại diện cho các chữ cái.
Tôi muốn bạn sử dụng những gì được gọi là UTF-8.”
Đừng lo lắng rằng chỉ cần sử dụng nó mỗi lần.
Sau đó, phần tiếp theo của siêu dữ liệu của tôi là tiêu đề mà chúng tôi muốn thấy nó nói,
“Trang đầu tiên của tôi.” Đó là nó.
Đó là hai trong số ba phần.
Phần cuối cùng là thẻ cơ thể và nó
hiển thị nội dung mà chúng ta muốn xem trên màn hình.
Vì vậy, chúng ta hãy nhìn vào điều này trong một trình duyệt. Tôi có gì đây?
Tôi có tiêu đề của tôi ở đây,
và nội dung hiển thị của tôi ngay dưới đó.
Tôi đã viết mã,
bước tiếp theo bạn nên luôn luôn làm là xác nhận mã.
Nói, “Tôi đã viết mã nó có vẻ tốt,
nhưng tôi biết rằng các trình duyệt rất đẹp và họ
làm cho mọi thứ hiển thị độc đáo ngay cả khi tôi chưa viết mã tốt.”
Vì vậy, nếu bạn đi đến validator, w3.org đó,
bạn có thể kiểm tra bất kỳ trang web để xem nếu mã là hợp lệ và bạn có ba lựa chọn.
Bạn có thể tải lên URL,
bạn có thể tải lên một tập tin,
hoặc bạn thực sự có thể sao chép và dán mã của bạn và đặt nó ngay trong đó.
Trong trường hợp này, tôi đã đặt trong URL để template.HTML chạy Kiểm tra,
và yay, không đáng ngạc nhiên bởi vì tôi biết tôi
sẽ được taping này, nó kiểm tra thành công.
Đừng lo về cảnh báo.
Cảnh báo thường ở trong để che đậy bản thân.
Điều gì sẽ xảy ra nếu bạn muốn xác thực
tệp của mình nhưng tệp của bạn vẫn chưa thực sự trên Internet?
Hãy đi qua thực sự nhanh chóng một ví dụ về cách bạn có thể làm điều đó.
Hãy nói rằng tôi có tập tin template.HTML của tôi và tôi muốn kiểm tra nó.
Tôi muốn chỉ ra rằng tôi đã vào và tôi đã thay đổi
hồ sơ và tôi đặt vào một lỗi đánh máy có chủ ý.
Tôi đã đánh vần thẻ đóng cho tiêu đề không chính xác.
Hãy xem điều gì sẽ xảy ra.
Và nếu trình duyệt hoặc trình xác nhận có thể tìm thấy điều này.
Những gì tôi sẽ làm là tôi đã đi đến validator.w3.org,
và bây giờ tôi sẽ chọn tùy chọn thứ ba xác nhận bằng cách đầu vào trực tiếp.
Tôi quay trở lại lệnh tập tin của tôi A hoặc điều khiển A,
nếu bạn đang ở trên một PC Command C,
tôi đã sao chép tất cả các mã và bây giờ tôi muốn đặt nó trong validator.
Kiểm tra, lên, và nếu chúng ta di chuyển xuống đây, tôi có thể làm cho nó lớn hơn rất nhiều cho bạn.
Bạn có thể thấy rằng tôi đã nhận được hai lỗi.
Tại sao tôi nhận được hai lỗi khi tôi chỉ nhập một lỗi trong?
Well, validators không bao giờ hoàn hảo.
Vì vậy, lỗi gì nó tìm thấy là nó nói,
“Tôi tìm thấy kết thúc của một tập tin và tôi đã không mong đợi điều đó.”
Lý do xảy ra là hãy kiểm tra lỗi số 2,
nó nói với chúng tôi, “Ồ, bạn quên đóng thẻ tiêu đề.”
Vì vậy, đôi khi một lỗi có thể gây ra rất nhiều thông báo lỗi.
Vì vậy, đừng lo.
Tôi đã nhìn thấy nhiều đến 50 hoặc 60 lỗi mà một khi
tôi sửa chữa một dòng mã nó đã sửa chữa hơn 80 phần trăm của những lỗi đó.
Vì vậy, tôi sẽ quay trở lại mã của tôi,
tôi sẽ sửa chữa nó và đặt tiêu đề đó vào và lưu nó.
Sao chép lại lần nữa, đặt nó vào và tôi sẽ kiểm tra lại.
Thời gian này kiểm tra hoàn thành không có lỗi.
Vì vậy, chỉ để xem xét,
bạn thực sự muốn làm theo cấu trúc DOM nếu bạn muốn có một trang được hình thành tốt.
Theo cấu trúc đó có nghĩa là bạn luôn sử dụng thẻ bắt đầu và kết thúc.
Ngoài ra bạn đóng các thẻ bên trong trước khi các thẻ bên ngoài.
Điều đó có nghĩa là nếu bạn bắt đầu
một thẻ tiêu đề Bạn phải kết thúc nó trước khi bạn kết thúc thẻ cơ thể.
Bạn cũng sẽ muốn sử dụng các
thuộc tính hợp lệ đó là một trong những điều chúng ta sẽ nói về một chút
sau đó khi chúng ta nói về hình ảnh và về
cơ bản các phần của trang của bạn cần thêm thông tin.
Vấn đề với các trình duyệt là họ sẽ thực sự sửa lỗi mã xấu cho bạn.
Tôi luôn gọi họ là cha mẹ trực thăng của mã hóa.
Nó giống như, “Tôi biết bạn muốn nó trông như thế nào,
đó là cách tôi sẽ làm cho nó trông trên màn hình.”
Vấn đề là điều đó không phải lúc nào cũng có tác dụng cho tất cả mọi người.
Vì vậy, chỉ vì trang web của bạn có vẻ tốt với bạn khi bạn đang xem nó trên trình duyệt của bạn,
không có nghĩa là trang web đó là đúng.
Bạn phải sử dụng một validator để kiểm tra mã của bạn.