Tài liệu HTML bao gồm phần khai báo loại tài liệu và phần tử gốc <html>. Phần tử <html> được lồng trong phần đầu và phần nội dung của tài liệu. Mặc dù khách truy cập có thể không nhìn thấy phần đầu của tài liệu, nhưng điều quan trọng là bạn phải đảm bảo trang web của mình hoạt động được. Trang này chứa toàn bộ thông tin meta, bao gồm cả thông tin về các công cụ tìm kiếm và kết quả trên mạng xã hội, biểu tượng của thẻ trình duyệt và lối tắt trên màn hình chính của thiết bị di động, cũng như hành vi và cách trình bày nội dung của bạn. Trong phần này, bạn sẽ khám phá các thành phần có mặt trên hầu hết mọi trang web mặc dù không hiển thị.
Để tạo trang web MachineMLML
Thêm vào mọi tài liệu HTML
Có một số tính năng cần được xem là cần thiết đối với mọi trang web. Các trình duyệt sẽ vẫn hiển thị nội dung nếu thiếu các thành phần này, nhưng bạn vẫn hiển thị nội dung. Luôn luôn.
<!DOCTYPE html>
Nội dung đầu tiên trong mọi tài liệu HTML là phần mở đầu. Đối với HTML, bạn chỉ cần <!DOCTYPE html>. Quảng cáo này có thể trông giống như một phần tử HTML, nhưng thực tế không phải vậy. Đó là một loại nút đặc biệt có tên là "doctype". Loại tài liệu yêu cầu trình duyệt sử dụng chế độ tiêu chuẩn. Nếu bị bỏ qua, các trình duyệt sẽ sử dụng một chế độ hiển thị khác được gọi là chế độ tương thích ngược. Việc thêm loại tài liệu sẽ giúp ngăn chặn chế độ tương thích ngược.
<html>
Phần tử <html> là thành phần gốc của một tài liệu HTML. Đây là thành phần mẹ của <head> và <body>, chứa mọi nội dung trong tài liệu HTML ngoại trừ loại tài liệu. Nếu bạn bỏ qua, thì văn bản sẽ được ngụ ý nhưng bạn cần đưa vào vì đây là yếu tố dùng để khai báo ngôn ngữ của nội dung tài liệu.
Ngôn ngữ nội dung
Thuộc tính ngôn ngữ lang được thêm vào thẻ <html> sẽ xác định ngôn ngữ chính của tài liệu. Giá trị của thuộc tính lang là mã ngôn ngữ gồm 2 hoặc 3 chữ cái theo tiêu chuẩn ISO và theo sau là khu vực. Khu vực là không bắt buộc nhưng bạn nên dùng vì ngôn ngữ có thể khác nhau đáng kể giữa các khu vực. Ví dụ: tiếng Pháp ở Canada (fr-CA) rất khác với ở Burkina Faso (fr-BF). Việc khai báo ngôn ngữ này cho phép trình đọc màn hình, công cụ tìm kiếm và dịch vụ dịch thuật biết ngôn ngữ của tài liệu.
Thuộc tính lang không bị giới hạn ở thẻ <html>. Nếu trên trang có văn bản bằng ngôn ngữ khác với ngôn ngữ chính của tài liệu, bạn phải sử dụng thuộc tính lang để xác định các trường hợp ngoại lệ đối với ngôn ngữ chính trong tài liệu. Tương tự như khi được đưa vào phần đầu, thuộc tính lang trong phần nội dung không có hiệu ứng hình ảnh. Thông tin này chỉ bổ sung ngữ nghĩa, giúp các công nghệ hỗ trợ và dịch vụ tự động biết ngôn ngữ của nội dung bị ảnh hưởng.
Ngoài việc đặt ngôn ngữ cho tài liệu và các trường hợp ngoại lệ cho ngôn ngữ cơ sở đó, bạn còn có thể sử dụng thuộc tính này trong bộ chọn CSS. Bạn có thể nhắm mục tiêu <span lang="fr-fr">Ceci n'est pas une pipe.</span> bằng bộ chọn thuộc tính và ngôn ngữ [lang|="fr"] và :lang(fr).
<head>
Lồng giữa các thẻ <html> mở và đóng, chúng ta sẽ thấy 2 thẻ con: <head> và <body>:
<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>
</body>
</html>
<head>, hay tiêu đề siêu dữ liệu của tài liệu, chứa tất cả siêu dữ liệu của một trang web hoặc ứng dụng. Phần thân chứa nội dung hiển thị. Phần còn lại của phần này tập trung vào các thành phần được lồng bên trong <head></head> mở và đóng
Các thành phần bắt buộc bên trong <head>
Bạn có thể tìm thấy siêu dữ liệu của tài liệu, bao gồm tiêu đề tài liệu, bộ ký tự, chế độ cài đặt khung nhìn, nội dung mô tả, URL cơ sở, đường liên kết trong biểu định kiểu và biểu tượng trong phần tử <head>. Mặc dù bạn có thể không cần tất cả các tính năng này, nhưng hãy luôn bao gồm các chế độ cài đặt bộ ký tự, tiêu đề và khung nhìn.
Mã hoá ký tự
Phần tử đầu tiên trong <head> phải là phần khai báo mã hoá ký tự charset. Tiêu đề xuất hiện trước tiêu đề để đảm bảo trình duyệt có thể hiển thị các ký tự trong tiêu đề đó và tất cả các ký tự trong phần còn lại của tài liệu.
Chế độ mã hoá mặc định trong hầu hết các trình duyệt là windows-1252, tuỳ thuộc vào ngôn ngữ. Tuy nhiên, bạn nên sử dụng UTF-8, vì hàm này bật chế độ mã hoá từ 1 đến 4 byte cho tất cả ký tự, ngay cả những ký tự mà bạn thậm chí không biết. Ngoài ra, đây là loại mã hoá được HTML5 yêu cầu.
Để đặt phương thức mã hoá ký tự thành UTF-8, hãy thêm:
<meta charset="utf-8" />
Bằng cách khai báo UTF-8 (không phân biệt chữ hoa chữ thường), bạn thậm chí có thể thêm biểu tượng cảm xúc vào tiêu đề của mình (nhưng vui lòng không nên).
Hệ thống mã hoá ký tự được kế thừa cho mọi nội dung trong tài liệu, kể cả <style> và <script>. Thông tin khai báo nhỏ này có nghĩa là bạn có thể thêm biểu tượng cảm xúc vào tên lớp và selectorAPI (xin nhắc lại, vui lòng không cung cấp). Nếu bạn có sử dụng biểu tượng cảm xúc, hãy nhớ sử dụng theo cách vừa cải thiện khả năng hữu dụng mà không ảnh hưởng đến khả năng tiếp cận.
Tên tài liệu
Trang chủ và tất cả các trang bổ sung của bạn phải có một tiêu đề riêng biệt. Nội dung của tiêu đề tài liệu, văn bản giữa thẻ mở và đóng <title> sẽ xuất hiện trong thẻ trình duyệt, danh sách cửa sổ đang mở, nhật ký, kết quả tìm kiếm và các thẻ mạng xã hội (trừ phi được xác định lại bằng thẻ <meta>).
<title>Machine Learning Workshop</title>
Siêu dữ liệu khung nhìn
Một thẻ meta khác cần được xem là cần thiết là thẻ meta viewport, giúp trang web thích ứng, cho phép nội dung hiển thị tốt theo mặc định, bất kể chiều rộng khung nhìn. Mặc dù thẻ meta viewport đã có từ tháng 6 năm 2007 nhưng khi chiếc iPhone đầu tiên ra mắt, chiếc iPhone đầu tiên chỉ mới được ghi lại trong một thông số kỹ thuật. Vì nó cho phép kiểm soát kích thước và tỷ lệ của khung nhìn và ngăn giảm kích thước nội dung của trang web cho phù hợp với trang web 960px trên màn hình 320px, bạn chắc chắn nên làm như vậy.
<meta name="viewport" content="width=device-width" />
Đoạn mã ở trên có nghĩa là "làm cho trang web thích ứng, bắt đầu bằng cách đặt chiều rộng của nội dung bằng chiều rộng của màn hình". Ngoài width, bạn còn có thể đặt mức thu phóng và khả năng có thể mở rộng, nhưng cả hai đều mặc định là các giá trị có thể truy cập. Nếu bạn muốn trình bày rõ ràng, hãy cung cấp những thông tin sau:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
Khung nhìn nằm trong bài kiểm tra khả năng tiếp cận của Lighthouse; trang web của bạn sẽ vượt qua nếu có thể mở rộng và không đặt kích thước tối đa.
Đến thời điểm này, đường viền cho tệp HTML của chúng ta là:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
</head>
<body>
</body>
</html>
Nội dung <head> khác
Còn nhiều nội dung khác nữa trong <head>. Tất cả các siêu dữ liệu đều đúng. Hầu hết các phần tử bạn sẽ thấy trong <head> đều được đề cập ở đây, đồng thời lưu nhiều tuỳ chọn <meta> cho chương tiếp theo.
Bạn đã thấy bộ ký tự meta và tiêu đề tài liệu, nhưng bạn cũng cần đưa vào nhiều siêu dữ liệu khác ngoài các thẻ <meta>.
CSS
<head> là nơi bạn thêm các kiểu cho HTML của mình. Có đường dẫn học tập dành riêng cho CSS nếu bạn muốn tìm hiểu về kiểu nhưng bạn cần biết cách đưa kiểu vào tài liệu HTML.
Có 3 cách để thêm CSS: <link>, <style> và thuộc tính style.
Hai cách chính để thêm kiểu vào tệp HTML là thêm tài nguyên bên ngoài bằng phần tử <link> có thuộc tính rel được đặt thành stylesheet, hoặc đưa CSS trực tiếp vào phần đầu tài liệu trong thẻ mở và đóng <style>.
Thẻ <link> là phương thức ưu tiên để thêm biểu định kiểu. Việc liên kết một hoặc một vài biểu định kiểu bên ngoài tốt cho cả trải nghiệm của nhà phát triển và hiệu suất trang web: bạn có thể duy trì CSS ở một nơi thay vì phân phối ở khắp mọi nơi, và trình duyệt có thể lưu tệp bên ngoài vào bộ nhớ đệm, nghĩa là bạn không cần phải tải xuống lại mỗi lần điều hướng trang.
Cú pháp là <link rel="stylesheet" href="styles.css">, trong đóStyle.css là URL biểu định kiểu của bạn. Bạn thường sẽ thấy type="text/css". Không cần thiết! Nếu bạn đang thêm các kiểu được viết bằng văn bản nào đó không phải CSS, thì bạn cần dùng type, nhưng vì không có loại nào khác nên thuộc tính này không cần thiết. Thuộc tính rel xác định mối quan hệ: trong trường hợp này là stylesheet. Nếu bạn bỏ qua mục này, CSS của bạn sẽ không được liên kết.
Bạn sẽ sớm thấy một vài giá trị rel khác, nhưng trước tiên hãy thảo luận những cách khác để thêm CSS.
Nếu bạn muốn các kiểu biểu định kiểu bên ngoài nằm trong một lớp tầng nhưng không có quyền truy cập để chỉnh sửa tệp CSS để đưa thông tin lớp vào đó, bạn cần thêm CSS có @import bên trong <style>:
<style>
@import "styles.css" layer(firstLayer);
</style>
Khi sử dụng @import để nhập biểu định kiểu vào tài liệu của bạn (không bắt buộc) vào các lớp tầng, câu lệnh @import phải là câu lệnh đầu tiên trong <style> hoặc biểu định kiểu được liên kết, bên ngoài phần khai báo bộ ký tự.
Mặc dù các lớp tầng vẫn còn khá mới và bạn có thể không phát hiện được @import trong phần đầu <style>, nhưng bạn thường sẽ thấy các thuộc tính tuỳ chỉnh được khai báo trong một khối kiểu giao diện người dùng:
<style>
:root {
--theme-color: #226DAA;
}
</style>
Các kiểu, thông qua <link> hoặc <style> hoặc cả hai, sẽ xuất hiện trong phần đầu. Kiểu chữ sẽ hoạt động nếu được đưa vào phần nội dung của tài liệu, nhưng bạn muốn kiểu của mình xuất hiện trong phần đầu vì lý do hiệu suất. Điều này nghe có vẻ khác thường vì bạn có thể cho rằng mình muốn nội dung của mình tải trước, nhưng thực ra bạn muốn trình duyệt biết cách hiển thị nội dung khi được tải. Trước tiên, việc thêm kiểu sẽ ngăn việc vẽ lại không cần thiết xảy ra nếu một phần tử được tạo kiểu sau khi kết xuất lần đầu.
Ngoài ra, có một cách để thêm các kiểu mà bạn sẽ không bao giờ sử dụng trong <head> của tài liệu, đó là: kiểu cùng dòng. Có thể bạn sẽ không bao giờ sử dụng kiểu cùng dòng trong phần đầu vì biểu định kiểu của tác nhân người dùng sẽ ẩn phần đầu theo mặc định. Nhưng nếu bạn muốn tạo trình chỉnh sửa CSS mà không cần JavaScript chẳng hạn, để bạn có thể kiểm tra các phần tử tùy chỉnh của trang, bạn có thể hiển thị phần đầu bằng display: block, sau đó ẩn mọi nội dung trong phần đầu và sau đó với thuộc tính style cùng dòng, hiển thị khối kiểu nội dung có thể chỉnh sửa.
<style contenteditable style="display: block; font-family: monospace; white-space: pre;">
head { display: block; }
head * { display: none; }
:root {
--theme-color: #226DAA;
}
</style>
Mặc dù bạn có thể thêm kiểu cùng dòng trên <style>, nhưng việc tạo kiểu cho <style> trong style sẽ thú vị hơn. Tôi lạc lõng.
Các cách dùng phần tử <link> khác
Phần tử link được dùng để tạo mối quan hệ giữa tài liệu HTML và tài nguyên bên ngoài. Một số tài nguyên trong số này có thể được tải xuống, một số tài nguyên khác là thông tin. Loại mối quan hệ được xác định bằng giá trị của thuộc tính rel. Hiện tại, có 25 giá trị cho thuộc tính rel có thể dùng được với <link>, <a> và <area> hoặc <form>. Một số giá trị có thể dùng với tất cả. Bạn nên đưa những dữ liệu liên quan đến thông tin siêu dữ liệu vào phần đầu và những dữ liệu liên quan đến hiệu suất trong <body>.
Bây giờ, bạn sẽ thêm ba loại khác vào tiêu đề: icon, alternate và canonical. (Bạn sẽ thêm loại thứ tư, rel="manifest", trong học phần tiếp theo).
Biểu tượng trang web
Sử dụng thẻ <link> cùng với cặp giá trị/thuộc tính rel="icon" để xác định biểu tượng trang web sẽ dùng cho tài liệu của bạn. Biểu tượng trang web là một biểu tượng rất nhỏ xuất hiện trên thẻ trình duyệt, thường ở bên trái của tiêu đề tài liệu. Khi bạn mở quá nhiều thẻ, các thẻ sẽ thu nhỏ và tiêu đề có thể biến mất hoàn toàn nhưng biểu tượng của thẻ vẫn luôn xuất hiện. Hầu hết biểu tượng trang web là biểu trưng của công ty hoặc ứng dụng.
Nếu bạn không khai báo biểu tượng trang web, trình duyệt sẽ tìm tệp có tên favicon.ico trong thư mục cấp cao nhất (thư mục gốc của trang web). Với <link>, bạn có thể sử dụng tên và vị trí tệp khác:
<link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/mlwicon.png" />
Đoạn mã trên cho biết "hãy sử dụng mlwicon.png làm biểu tượng cho các trường hợp 16px, 32px hoặc 48px là hợp lý". Thuộc tính kích thước chấp nhận giá trị any đối với các biểu tượng có thể mở rộng hoặc danh sách các giá trị widthXheight hình vuông được phân tách bằng dấu cách; trong đó giá trị chiều rộng và chiều cao là 16, 32, 48 hoặc lớn hơn trong dãy hình học đó, đơn vị pixel bị bỏ qua và X không phân biệt chữ hoa chữ thường.
<link rel="apple-touch-icon" sizes="180x180" href="/images/mlwicon.png" />
<link rel="mask-icon" href="/images/mlwicon.svg" color="#226DAA" />
Có hai loại biểu tượng đặc biệt không theo chuẩn trên trình duyệt Safari: apple-touch-icon đối với thiết bị iOS và mask-icon đối với thẻ được ghim trên macOS. apple-touch-icon chỉ được áp dụng khi người dùng thêm một trang web vào màn hình chính: bạn có thể chỉ định nhiều biểu tượng bằng sizes khác nhau cho các thiết bị khác nhau. mask-icon sẽ chỉ được dùng nếu người dùng ghim thẻ trong Safari dành cho máy tính: biểu tượng phải là SVG đơn sắc và thuộc tính color sẽ điền màu cần thiết vào biểu tượng.
Mặc dù bạn có thể sử dụng <link> để xác định một hình ảnh hoàn toàn khác trên mỗi trang hoặc thậm chí trong mỗi lần tải trang, nhưng không thực hiện việc này. Để đảm bảo tính nhất quán và trải nghiệm tốt cho người dùng, hãy sử dụng một hình ảnh duy nhất! Twitter sử dụng biểu tượng chú chim màu xanh dương: khi bạn nhìn thấy biểu tượng con chim màu xanh dương trong thẻ trình duyệt, tức là bạn biết rằng thẻ đang mở trên một trang Twitter mà không cần nhấp vào thẻ đó. Google sử dụng các biểu tượng trang web khác nhau cho từng ứng dụng khác nhau: chẳng hạn như biểu tượng thư, biểu tượng lịch. Tuy nhiên, tất cả biểu tượng Google đều sử dụng cùng một bảng phối màu. Xin nhắc lại, bạn đã biết chính xác nội dung của thẻ đang mở chỉ từ biểu tượng đó.
Các phiên bản thay thế của trang web
Chúng tôi sử dụng giá trị alternate của thuộc tính rel để xác định bản dịch hoặc cách thể hiện thay thế của trang web.
Giả sử chúng tôi có các phiên bản của trang web này được dịch sang tiếng Pháp và tiếng Bồ Đào Nha Brazil:
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
Khi sử dụng alternate để dịch, bạn phải đặt thuộc tính hreflang.
Giá trị thay thế không chỉ dành cho bản dịch. Ví dụ: thuộc tính type có thể xác định URI thay thế cho một nguồn cấp dữ liệu RSS khi thuộc tính type được đặt thành application/rss+xml hoặc application/atom+xml. Hãy liên kết đến một phiên bản PDF giả mạo của trang web.
<link rel="alternate" type="application/x-pdf" href="https://machinelearningworkshop.com/mlw.pdf" />
Nếu giá trị rel là alternate stylesheet, thì giá trị đó sẽ xác định biểu định kiểu thay thế và thuộc tính title phải được đặt tên cho kiểu thay thế đó.
Chuẩn
Nếu bạn tạo nhiều bản dịch hoặc nhiều phiên bản của Hội thảo học máy, các công cụ tìm kiếm có thể bị nhầm lẫn về việc phiên bản nào là nguồn đáng tin cậy. Đối với trường hợp này, hãy sử dụng rel="canonical" để xác định URL ưu tiên cho trang web hoặc ứng dụng.
Đưa URL chính tắc vào tất cả các trang đã dịch và trên trang chủ, cho biết URL chính tắc mà chúng tôi ưu tiên sử dụng:
<link rel="canonical" href="https://www.machinelearning.com" />
Đường liên kết chính tắc rel="canonical" thường được dùng trong quá trình đăng chéo với các ấn phẩm và nền tảng viết blog để ghi nhận nguồn ban đầu. Khi một trang web phân phối nội dung, trang web đó phải bao gồm cả đường liên kết chính tắc đến nguồn ban đầu.
Tập lệnh
Thẻ <script> được dùng để bao gồm tập lệnh. Loại mặc định là JavaScript. Nếu bạn thêm bất kỳ ngôn ngữ tập lệnh nào khác, hãy thêm thuộc tính type với loại MIME hoặc type="module" nếu đó là mô-đun JavaScript. Chỉ các mô-đun JavaScript và JavaScript mới được phân tích cú pháp và thực thi.
Bạn có thể sử dụng thẻ <script> để đóng gói mã hoặc tải tệp bên ngoài xuống. Trong MLW, không có tệp tập lệnh bên ngoài nào vì trái với niềm tin phổ biến, bạn không cần JavaScript cho trang web chức năng, và, đây là đường dẫn học tập HTML, không phải là đường dẫn JavaScript.
Bạn sẽ thêm một đoạn JavaScript nhỏ để tạo Trứng phục sinh sau này:
<script>
document.getElementById('switch').addEventListener('click', function() {
document.body.classList.toggle('black');
});
</script>
Đoạn mã này tạo một trình xử lý sự kiện cho một phần tử có mã nhận dạng là switch. Với JavaScript, bạn không muốn tham chiếu đến một thành phần trước khi thành phần đó tồn tại. Nó chưa tồn tại, vì vậy chúng tôi sẽ không đưa vào nó. Khi thêm phần tử công tắc đèn, chúng ta sẽ thêm <script> ở cuối <body> thay vì trong <head>. Tại sao? Có 2 lý do. Chúng tôi muốn đảm bảo các phần tử tồn tại trước khi gặp phải tập lệnh tham chiếu đến chúng vì chúng tôi không dựa vào tập lệnh này dựa trên sự kiện DOMContentLoaded. Và chủ yếu, JavaScript không chỉ chặn hiển thị mà trình duyệt sẽ ngừng tải xuống tất cả nội dung khi tập lệnh được tải xuống và không tiếp tục tải xuống các nội dung khác cho đến khi JavaScript hoàn tất thực thi. Vì lý do này, bạn thường thấy các yêu cầu JavaScript ở cuối tài liệu thay vì trong phần đầu tài liệu.
Có hai thuộc tính có thể làm giảm tính chất chặn của việc tải xuống và thực thi JavaScript: defer và async. Với defer, quá trình hiển thị HTML không bị chặn trong quá trình tải xuống và JavaScript chỉ thực thi sau khi tài liệu đã kết thúc hiển thị. Với async, quá trình kết xuất cũng không bị chặn trong quá trình tải xuống, nhưng sau khi tập lệnh đã được tải xuống, quá trình kết xuất sẽ tạm dừng trong khi JavaScript được thực thi.
Để đưa JavaScript của MLW vào một tệp bên ngoài, bạn có thể viết:
<script src="js/switch.js" defer></script>
Việc thêm thuộc tính defer sẽ trì hoãn việc thực thi tập lệnh cho đến khi mọi thứ hiển thị, điều này ngăn tập lệnh làm tổn hại đến hiệu suất. Các thuộc tính async và defer chỉ hợp lệ trên các tập lệnh bên ngoài.
Cơ sở
Có một phần tử khác chỉ có trong phần tử <head>. Không được sử dụng quá thường xuyên, phần tử <base> cho phép thiết lập URL liên kết và mục tiêu mặc định. Thuộc tính href xác định URL cơ sở cho tất cả đường liên kết tương đối.
Thuộc tính target, có hiệu lực trên <base> cũng như trên các đường liên kết và biểu mẫu, giúp đặt vị trí mở các đường liên kết đó. Theo mặc định, _self sẽ mở các tệp được liên kết trong cùng ngữ cảnh với tài liệu hiện tại. Các tuỳ chọn khác bao gồm _blank (mở mọi đường liên kết trong một cửa sổ mới), _parent của nội dung hiện tại (có thể giống với trình tự mở nếu trình mở không phải là iframe), hoặc _top nằm trong cùng một thẻ trình duyệt, nhưng được kéo ra khỏi mọi ngữ cảnh để chiếm toàn bộ thẻ.
Hầu hết các nhà phát triển đều thêm thuộc tính target vào một số ít đường liên kết (nếu có) mà họ muốn mở trong một cửa sổ mới trên các đường liên kết hoặc tự tạo các đường liên kết đó, thay vì sử dụng <base>.
<base target="_top" href="https://machinelearningworkshop.com" />
Nếu trang web của chúng tôi bị lồng trong một iframe trên một trang web như Yummly, việc bao gồm cả phần tử <base> sẽ có nghĩa là khi người dùng nhấp vào bất kỳ đường liên kết nào trong tài liệu của chúng tôi, đường liên kết đó sẽ bật ra khỏi iframe và chiếm toàn bộ cửa sổ trình duyệt.
Một trong những hạn chế của phần tử này là đường liên kết neo được giải quyết bằng <base>. <base> chuyển đổi hiệu quả đường liên kết <a href="#ref"> thành <a target="_top" href="https://machinelearningworkshop.com#ref">, kích hoạt yêu cầu HTTP đến URL cơ sở có đính kèm mảnh.
Một vài điều khác cần lưu ý về <base>: chỉ có thể có một phần tử <base> trong một tài liệu và phần tử này phải xuất hiện trước khi sử dụng mọi URL tương đối, bao gồm cả các phần tử tham chiếu tập lệnh hoặc biểu định kiểu.
Mã bây giờ sẽ có dạng như sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" src="css/styles.css" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
<link rel="canonical" href="https://www.machinelearning.com" />
</head>
<body>
<!-- <script defer src="scripts/lightswitch.js"></script>-->
</body>
</html>
Nhận xét HTML
Lưu ý rằng tập lệnh được bao bọc giữa một số dấu ngoặc nhọn, dấu gạch ngang và tiếng nổ. Đây là cách bạn nhận xét trong HTML. Chúng tôi sẽ để nguyên nhận xét trong tập lệnh cho đến khi có nội dung thực tế trên trang. Mọi nội dung trong khoảng từ <!-- đến --> sẽ không hiển thị hoặc được phân tích cú pháp. Bạn có thể đặt nhận xét HTML ở bất kỳ vị trí nào trên trang, bao gồm cả phần tiêu đề hoặc nội dung, ngoại trừ khối tập lệnh hoặc khối kiểu, trong đó bạn nên sử dụng nhận xét JavaScript và CSS tương ứng.
Bạn đã tìm hiểu các thông tin cơ bản về <head>. Tuy nhiên, bạn muốn tìm hiểu thêm các thông tin cơ bản. Trong phần tiếp theo, chúng ta sẽ tìm hiểu về thẻ meta và cách kiểm soát nội dung xuất hiện khi trang web của bạn được liên kết đến trên mạng xã hội.
Kiểm tra kiến thức
Kiểm tra kiến thức của bạn về cấu trúc tài liệu.
Làm cách nào để xác định ngôn ngữ của giấy tờ?
language vào thẻ HTML.lang vào thẻ HTML.Add the <lang> vào <head>.Chọn các phần tử có thể đưa vào <head>.
<p><title><meta>