Khi bạn muốn xây dựng các trang web như một lập trình viên Python, thì không có cách nào xung quanh HTML và CSS. Hầu như mọi trang web trên internet đều được xây dựng với đánh dấu HTML để cấu trúc trang. Để làm cho một trang web trông đẹp, bạn có thể tạo kiểu HTML với CSS.HTML markup to structure the page. To make a website look nice, you can style HTML with CSS. Nếu bạn quan tâm đến việc phát triển web với Python, thì việc biết HTML và CSS sẽ giúp bạn hiểu các khung web như Django và Flask tốt hơn. Nhưng ngay cả khi bạn chỉ bắt đầu với Python, HTML và CSS cũng có thể cho phép bạn tạo các trang web nhỏ để gây ấn tượng với bạn bè.Django and Flask better. But even if you’re just getting
started with Python, HTML and CSS can enable you to create small websites to impress your friends. Trong hướng dẫn này, bạn sẽ học cách: - Cấu trúc một tệp html cơ bảnHTML file
- Xem và kiểm tra HTML trong trình duyệt của bạnbrowser
- Chèn hình ảnh và liên kết trangimages and page links
- Kiểu một trang web với CSSCSS
- Định dạng HTML có khả năng truy cập trong tâm tríaccessibility in mind
- Sử dụng Python để viết và phân tích mã HTMLwrite
and parse HTML code
Bạn sẽ nhận được lời giới thiệu về HTML và CSS mà bạn có thể theo dõi cùng với. Trong suốt hướng dẫn này, bạn sẽ xây dựng một trang web với ba trang và kiểu dáng CSS: Trong khi tạo dự án web, bạn sẽ tạo ra một tài liệu HTML Boilerplate mà bạn có thể sử dụng trong các dự án web sắp tới của mình. Bạn có thể thấy rằng mã nguồn sẽ có ích khi bạn làm việc trong các dự án trong tương lai. Bạn có thể tải xuống tại đây: Sau khi tìm hiểu những điều cơ bản của HTML và CSS, bạn sẽ tìm thấy ý tưởng về cách tiếp tục hành trình của mình ở cuối hướng dẫn. Tạo tệp HTML đầu tiên của bạnHãy nghĩ về bất kỳ trang web nào mà bạn đã truy cập gần đây. Có thể bạn đọc một số tin tức, trò chuyện với bạn bè hoặc xem video. Bất kể loại trang web nào, bạn có thể đặt cược rằng mã nguồn của nó có thẻ 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Hello, World Wide Web!
11This is my first website.
12
13About me
14
15I'm a Python programmer and a bug collector.
16
17Random facts
18
19I don't just like emoji,
20I love emoji!
21
22My most-used emoji are:
23 1. 🐞
24 2. 🐍
25 3. 👍
26
27Links
28
29My favorite websites are:
30 * realpython.com
31 * python.org
32 * pypi.org
33</body>
34</html>
0 cơ bản ngay từ đầu.HTML là viết tắt của ngôn ngữ đánh dấu siêu văn bản. HTML được tạo bởi Tim Berners-Lee, người có tên cũng có thể vang lên tiếng chuông cho bạn với tư cách là người phát minh ra thế giới trên toàn thế giới.HyperText Markup Language. HTML was created by Tim Berners-Lee, whose name might also ring a bell for you as the inventor of the World Wide Web.
Phần siêu văn bản của HTML đề cập đến việc xây dựng các kết nối giữa các trang HTML khác nhau. Với các siêu liên kết, bạn có thể nhảy giữa các trang và lướt web.hypertext part of HTML refers to building connections between different HTML pages. With hyperlinks, you can jump between pages and surf the Web. Bạn sử dụng đánh dấu để cấu trúc nội dung trong một tài liệu. Trái ngược với định dạng, đánh dấu xác định ý nghĩa của nội dung chứ không phải nó trông như thế nào. Trong phần này, bạn sẽ tìm hiểu về các yếu tố HTML và vai trò của chúng.markup to structure content in a document. In contrast to formatting, the markup defines the meaning of content and not how it looks. In this section, you’ll learn about HTML elements and their roles. Viết mã HTML ngữ nghĩa sẽ giúp tài liệu của bạn có thể truy cập được cho nhiều khách truy cập. Rốt cuộc, bạn muốn cho phép mọi người tiêu thụ nội dung của bạn, cho dù họ có truy cập trang của bạn bằng trình duyệt hoặc sử dụng các công cụ đọc màn hình.semantic HTML code will make your documents
accessible for a wide range of visitors. After all, you want to enable everybody to consume your content, whether they’re visiting your page with a browser or using screen reading tools. Đối với mỗi phần tử HTML, có một tiêu chuẩn xác định mục đích sử dụng của nó. Ngày nay, các tiêu chuẩn của HTML được xác định bởi Nhóm làm việc công nghệ ứng dụng siêu văn bản Web (Whatwg). Whatwg đóng vai trò tương tự cho HTML như Hội đồng lái Python làm cho Python. Khoảng 95 phần trăm các trang web sử dụng HTML, vì vậy bạn sẽ khó có thể tránh được nếu bạn muốn thực hiện bất kỳ công việc phát triển web nào trong Python. Trong phần này, bạn sẽ bắt đầu bằng cách tạo tệp HTML đầu tiên của mình. Bạn sẽ học cách cấu trúc mã HTML của mình để làm cho nó có thể đọc được cho trình duyệt của bạn và cho con người. Tài liệu HTMLTrong phần này, bạn sẽ tạo một tệp HTML cơ bản. Tệp HTML sẽ chứa cấu trúc cơ sở mà hầu hết các trang web được xây dựng. Để bắt đầu mọi thứ, hãy tạo một tệp có tên 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Hello, World Wide Web!
11This is my first website.
12
13About me
14
15I'm a Python programmer and a bug collector.
16
17Random facts
18
19I don't just like emoji,
20I love emoji!
21
22My most-used emoji are:
23 1. 🐞
24 2. 🐍
25 3. 👍
26
27Links
28
29My favorite websites are:
30 * realpython.com
31 * python.org
32 * pypi.org
33</body>
34</html>
1 bằng một số văn bản: 1<!-- index.html -->
2
3Am I HTML already?
Theo truyền thống, tệp đầu tiên của trang web của bạn được gọi là 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Hello, World Wide Web!
11This is my first website.
12
13About me
14
15I'm a Python programmer and a bug collector.
16
17Random facts
18
19I don't just like emoji,
20I love emoji!
21
22My most-used emoji are:
23 1. 🐞
24 2. 🐍
25 3. 👍
26
27Links
28
29My favorite websites are:
30 * realpython.com
31 * python.org
32 * pypi.org
33</body>
34</html>
1. Bạn có thể nghĩ về trang 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Hello, World Wide Web!
11This is my first website.
12
13About me
14
15I'm a Python programmer and a bug collector.
16
17Random facts
18
19I don't just like emoji,
20I love emoji!
21
22My most-used emoji are:
23 1. 🐞
24 2. 🐍
25 3. 👍
26
27Links
28
29My favorite websites are:
30 * realpython.com
31 * python.org
32 * pypi.org
33</body>
34</html>
1 giống như tệp 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Hello, World Wide Web!
11This is my first website.
12
13About me
14
15I'm a Python programmer and a bug collector.
16
17Random facts
18
19I don't just like emoji,
20I love emoji!
21
22My most-used emoji are:
23 1. 🐞
24 2. 🐍
25 3. 👍
26
27Links
28
29My favorite websites are:
30 * realpython.com
31 * python.org
32 * pypi.org
33</body>
34</html>
4 hoặc 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Hello, World Wide Web!
11This is my first website.
12
13About me
14
15I'm a Python programmer and a bug collector.
16
17Random facts
18
19I don't just like emoji,
20I love emoji!
21
22My most-used emoji are:
23 1. 🐞
24 2. 🐍
25 3. 👍
26
27Links
28
29My favorite websites are:
30 * realpython.com
31 * python.org
32 * pypi.org
33</body>
34</html>
5 trong một dự án Python.Cho đến nay, nội dung duy nhất của 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Hello, World Wide Web!
11This is my first website.
12
13About me
14
15I'm a Python programmer and a bug collector.
16
17Random facts
18
19I don't just like emoji,
20I love emoji!
21
22My most-used emoji are:
23 1. 🐞
24 2. 🐍
25 3. 👍
26
27Links
28
29My favorite websites are:
30 * realpython.com
31 * python.org
32 * pypi.org
33</body>
34</html>
1 là chuỗi 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Hello, World Wide Web!
11This is my first website.
12
13About me
14
15I'm a Python programmer and a bug collector.
16
17Random facts
18
19I don't just like emoji,
20I love emoji!
21
22My most-used emoji are:
23 1. 🐞
24 2. 🐍
25 3. 👍
26
27Links
28
29My favorite websites are:
30 * realpython.com
31 * python.org
32 * pypi.org
33</body>
34</html>
7 đơn giản. Bạn đã thêm bất kỳ cú pháp HTML nào, ngoại trừ nhận xét HTML trên dòng 1. Tương tự như trình thông dịch Python không thực hiện nhận xét trong mã Python của bạn, trình duyệt đã giành được nội dung của các bình luận HTML của bạn. Tuy nhiên, hãy tiếp tục và mở 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Hello, World Wide Web!
11This is my first website.
12
13About me
14
15I'm a Python programmer and a bug collector.
16
17Random facts
18
19I don't just like emoji,
20I love emoji!
21
22My most-used emoji are:
23 1. 🐞
24 2. 🐍
25 3. 👍
26
27Links
28
29My favorite websites are:
30 * realpython.com
31 * python.org
32 * pypi.org
33</body>
34</html>
1 trong trình duyệt của bạn:HTML comment on line 1. Similar to the Python interpreter not executing comments in your Python code, the browser won’t render the contents of your HTML
comments. Still, go ahead and open 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Hello, World Wide Web!
11This is my first website.
12
13About me
14
15I'm a Python programmer and a bug collector.
16
17Random facts
18
19I don't just like emoji,
20I love emoji!
21
22My most-used emoji are:
23 1. 🐞
24 2. 🐍
25 3. 👍
26
27Links
28
29My favorite websites are:
30 * realpython.com
31 * python.org
32 * pypi.org
33</body>
34</html>
1 in your browser:Trình duyệt của bạn hiển thị văn bản mà không phàn nàn. Có vẻ như trình duyệt có thể xử lý một tệp HTML, ngay cả khi dấu hiệu duy nhất của nó là phần mở rộng. Điều đó tốt để biết, nhưng hành vi này cũng có một nhược điểm. Các trình duyệt sẽ luôn cố gắng hiển thị các tài liệu HTML, ngay cả khi cú pháp HTML của tài liệu của bạn không hợp lệ. Rất hiếm khi, bản thân trình duyệt sẽ cho bạn thấy một cái gì đó giống như một cú pháp, tương tự như những gì Python làm khi bạn cố gắng chạy mã không hợp lệ. Điều này có nghĩa là bạn có thể không nhận thấy nếu bạn đã vận chuyển mã không hợp lệ, điều này có thể gây ra sự cố cho khách truy cập trang web của bạn. Cập nhật 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Hello, World Wide Web!
11This is my first website.
12
13About me
14
15I'm a Python programmer and a bug collector.
16
17Random facts
18
19I don't just like emoji,
20I love emoji!
21
22My most-used emoji are:
23 1. 🐞
24 2. 🐍
25 3. 👍
26
27Links
28
29My favorite websites are:
30 * realpython.com
31 * python.org
32 * pypi.org
33</body>
34</html>
1 và tạo tài liệu HTML hợp lệ tối thiểu bằng cách thêm mã bên dưới: 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
Mã này là tài liệu HTML hợp lệ tối thiểu nhất mà bạn có thể nhận được. Nói đúng ra, bạn thậm chí có thể bỏ thuộc tính 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10<h2>Hello, World Wide Web!</h2>
11<p>This is my first website.</p>
12
13<h2>About me</h2>
14<p>I'm a Python programmer and a bug collector.</p>
15
16<h3>Random facts</h3>
17<p>I don't just <em>like</em> emoji,<br>
18I <strong>love</strong> emoji!</p>
19<p>My most-used emoji are:</p>
20<ol>
21 <li>🐞</li>
22 <li>🐍</li>
23 <li>👍</li>
24</ol>
25
26<h2>Links</h2>
27<p>My favorite websites are:</p>
28<ul>
29 <li>realpython.com</li>
30 <li>python.org</li>
31 <li>pypi.org</li>
32</ul>
33</body>
34</html>
0 trong dòng 4. Nhưng việc thêm phần phụ ngôn ngữ phù hợp được khuyến nghị để khai báo ngôn ngữ tự nhiên mà tài liệu của bạn chứa.attribute in line 4. But adding the right language subtag is recommended to declare which natural language your document contains.Tại gốc của nó, bất kỳ tài liệu HTML nào mà bạn xây dựng có thể sẽ tuân theo cấu trúc của ví dụ trên. Nhưng có một yếu tố HTML quan trọng bị thiếu. Mở 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Hello, World Wide Web!
11This is my first website.
12
13About me
14
15I'm a Python programmer and a bug collector.
16
17Random facts
18
19I don't just like emoji,
20I love emoji!
21
22My most-used emoji are:
23 1. 🐞
24 2. 🐍
25 3. 👍
26
27Links
28
29My favorite websites are:
30 * realpython.com
31 * python.org
32 * pypi.org
33</body>
34</html>
1 và thêm 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10<h2>Hello, World Wide Web!</h2>
11<p>This is my first website.</p>
12
13<h2>About me</h2>
14<p>I'm a Python programmer and a bug collector.</p>
15
16<h3>Random facts</h3>
17<p>I don't just <em>like</em> emoji,<br>
18I <strong>love</strong> emoji!</p>
19<p>My most-used emoji are:</p>
20<ol>
21 <li>🐞</li>
22 <li>🐍</li>
23 <li>👍</li>
24</ol>
25
26<h2>Links</h2>
27<p>My favorite websites are:</p>
28<ul>
29 <li>realpython.com</li>
30 <li>python.org</li>
31 <li>pypi.org</li>
32</ul>
33</body>
34</html>
2 bên dưới 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10<h2>Hello, World Wide Web!</h2>
11<p>This is my first website.</p>
12
13<h2>About me</h2>
14<p>I'm a Python programmer and a bug collector.</p>
15
16<h3>Random facts</h3>
17<p>I don't just <em>like</em> emoji,<br>
18I <strong>love</strong> emoji!</p>
19<p>My most-used emoji are:</p>
20<ol>
21 <li>🐞</li>
22 <li>🐍</li>
23 <li>👍</li>
24</ol>
25
26<h2>Links</h2>
27<p>My favorite websites are:</p>
28<ul>
29 <li>realpython.com</li>
30 <li>python.org</li>
31 <li>pypi.org</li>
32</ul>
33</body>
34</html>
3: 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
Bất kỳ tệp HTML hợp lệ nào cũng phải bắt đầu với khai báo doctype. Trong hướng dẫn này, bạn sẽ sử dụng 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10<h2>Hello, World Wide Web!</h2>
11<p>This is my first website.</p>
12
13<h2>About me</h2>
14<p>I'm a Python programmer and a bug collector.</p>
15
16<h3>Random facts</h3>
17<p>I don't just <em>like</em> emoji,<br>
18I <strong>love</strong> emoji!</p>
19<p>My most-used emoji are:</p>
20<ol>
21 <li>🐞</li>
22 <li>🐍</li>
23 <li>👍</li>
24</ol>
25
26<h2>Links</h2>
27<p>My favorite websites are:</p>
28<ul>
29 <li>realpython.com</li>
30 <li>python.org</li>
31 <li>pypi.org</li>
32</ul>
33</body>
34</html>
4, cho biết trình duyệt rằng tài liệu chứa mã HTML5 và sẽ hiển thị trang của bạn ở chế độ tiêu chuẩn:doctype declaration. In this tutorial, you’ll be using 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10<h2>Hello, World Wide Web!</h2>
11<p>This is my first website.</p>
12
13<h2>About me</h2>
14<p>I'm a Python programmer and a bug collector.</p>
15
16<h3>Random facts</h3>
17<p>I don't just <em>like</em> emoji,<br>
18I <strong>love</strong> emoji!</p>
19<p>My most-used emoji are:</p>
20<ol>
21 <li>🐞</li>
22 <li>🐍</li>
23 <li>👍</li>
24</ol>
25
26<h2>Links</h2>
27<p>My favorite websites are:</p>
28<ul>
29 <li>realpython.com</li>
30 <li>python.org</li>
31 <li>pypi.org</li>
32</ul>
33</body>
34</html>
4, which tells the browser that the document contains HTML5 code and should render your page in standard mode:Nếu một trình duyệt tìm thấy một docType đã lỗi thời, không đầy đủ hoặc thiếu ở đầu trang, họ sẽ sử dụng chế độ Quirks, điều này tương thích ngược với các thực tiễn cũ và trình duyệt cũ. (Nguồn)
Sau khi tuyên bố doctype, bạn có thẻ 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Hello, World Wide Web!
11This is my first website.
12
13About me
14
15I'm a Python programmer and a bug collector.
16
17Random facts
18
19I don't just like emoji,
20I love emoji!
21
22My most-used emoji are:
23 1. 🐞
24 2. 🐍
25 3. 👍
26
27Links
28
29My favorite websites are:
30 * realpython.com
31 * python.org
32 * pypi.org
33</body>
34</html>
0 mở. Trong dòng 12, bạn có thể tìm thấy thẻ 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10<h2>Hello, World Wide Web!</h2>
11<p>This is my first website.</p>
12
13<h2>About me</h2>
14<p>I'm a Python programmer and a bug collector.</p>
15
16<h3>Random facts</h3>
17<p>I don't just <em>like</em> emoji,<br>
18I <strong>love</strong> emoji!</p>
19<p>My most-used emoji are:</p>
20<ol>
21 <li>🐞</li>
22 <li>🐍</li>
23 <li>👍</li>
24</ol>
25
26<h2>Links</h2>
27<p>My favorite websites are:</p>
28<ul>
29 <li>realpython.com</li>
30 <li>python.org</li>
31 <li>pypi.org</li>
32</ul>
33</body>
34</html>
6 đóng tương ứng. Hầu hết các yếu tố trong HTML đều có thẻ mở, một số nội dung ở giữa và thẻ đóng ở cuối. Những phần này thậm chí có thể nằm trên cùng một dòng, như phần tử 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10<h2>Hello, World Wide Web!</h2>
11<p>This is my first website.</p>
12
13<h2>About me</h2>
14<p>I'm a Python programmer and a bug collector.</p>
15
16<h3>Random facts</h3>
17<p>I don't just <em>like</em> emoji,<br>
18I <strong>love</strong> emoji!</p>
19<p>My most-used emoji are:</p>
20<ol>
21 <li>🐞</li>
22 <li>🐍</li>
23 <li>👍</li>
24</ol>
25
26<h2>Links</h2>
27<p>My favorite websites are:</p>
28<ul>
29 <li>realpython.com</li>
30 <li>python.org</li>
31 <li>pypi.org</li>
32</ul>
33</body>
34</html>
7 trong dòng 7.opening tag, some content in between, and a closing tag at the end. These parts can even be on the same line, like the 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10<h2>Hello, World Wide Web!</h2>
11<p>This is my first website.</p>
12
13<h2>About me</h2>
14<p>I'm a Python programmer and a bug collector.</p>
15
16<h3>Random facts</h3>
17<p>I don't just <em>like</em> emoji,<br>
18I <strong>love</strong> emoji!</p>
19<p>My most-used emoji are:</p>
20<ol>
21 <li>🐞</li>
22 <li>🐍</li>
23 <li>👍</li>
24</ol>
25
26<h2>Links</h2>
27<p>My favorite websites are:</p>
28<ul>
29 <li>realpython.com</li>
30 <li>python.org</li>
31 <li>pypi.org</li>
32</ul>
33</body>
34</html>
7 element in line 7.Các yếu tố khác, như 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10<h2>Hello, World Wide Web!</h2>
11<p>This is my first website.</p>
12
13<h2>About me</h2>
14<p>I'm a Python programmer and a bug collector.</p>
15
16<h3>Random facts</h3>
17<p>I don't just <em>like</em> emoji,<br>
18I <strong>love</strong> emoji!</p>
19<p>My most-used emoji are:</p>
20<ol>
21 <li>🐞</li>
22 <li>🐍</li>
23 <li>👍</li>
24</ol>
25
26<h2>Links</h2>
27<p>My favorite websites are:</p>
28<ul>
29 <li>realpython.com</li>
30 <li>python.org</li>
31 <li>pypi.org</li>
32</ul>
33</body>
34</html>
8 trong dòng 6, don lồng có thẻ đóng phù hợp, vì vậy chúng không chứa bất kỳ nội dung nào. Những yếu tố trống này là các yếu tố khoảng trống. Chúng đứng độc lập và thậm chí có thể không chứa các thuộc tính. Một ví dụ như vậy là 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10<h2>Hello, World Wide Web!</h2>
11<p>This is my first website.</p>
12
13<h2>About me</h2>
14<p>I'm a Python programmer and a bug collector.</p>
15
16<h3>Random facts</h3>
17<p>I don't just <em>like</em> emoji,<br>
18I <strong>love</strong> emoji!</p>
19<p>My most-used emoji are:</p>
20<ol>
21 <li>🐞</li>
22 <li>🐍</li>
23 <li>👍</li>
24</ol>
25
26<h2>Links</h2>
27<p>My favorite websites are:</p>
28<ul>
29 <li>realpython.com</li>
30 <li>python.org</li>
31 <li>pypi.org</li>
32</ul>
33</body>
34</html>
9 trong dòng 10, tạo ra một ngắt dòng.empty
elements are so-called void elements. They stand independently and may not even contain attributes. One such example is 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10<h2>Hello, World Wide Web!</h2>
11<p>This is my first website.</p>
12
13<h2>About me</h2>
14<p>I'm a Python programmer and a bug collector.</p>
15
16<h3>Random facts</h3>
17<p>I don't just <em>like</em> emoji,<br>
18I <strong>love</strong> emoji!</p>
19<p>My most-used emoji are:</p>
20<ol>
21 <li>🐞</li>
22 <li>🐍</li>
23 <li>👍</li>
24</ol>
25
26<h2>Links</h2>
27<p>My favorite websites are:</p>
28<ul>
29 <li>realpython.com</li>
30 <li>python.org</li>
31 <li>pypi.org</li>
32</ul>
33</body>
34</html>
9 in line 10, which creates a line break.Thẻ HTML bắt đầu bằng khung góc ( <!-- index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Am I HTML already?</title>
</head>
<body>
<nav>
<a href="emoji.html">Emoji</a>
</nav>
<!-- ... -->
</body>
</html>
0) và kết thúc bằng khung góc (<!-- index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Am I HTML already?</title>
</head>
<body>
<nav>
<a href="emoji.html">Emoji</a>
</nav>
<!-- ... -->
</body>
</html>
1). Các tên thẻ ở giữa các khung góc thường khá mô tả và nêu phần tử HTML có nghĩa là gì. Một ví dụ điển hình là 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10<h2>Hello, World Wide Web!</h2>
11<p>This is my first website.</p>
12
13<h2>About me</h2>
14<p>I'm a Python programmer and a bug collector.</p>
15
16<h3>Random facts</h3>
17<p>I don't just <em>like</em> emoji,<br>
18I <strong>love</strong> emoji!</p>
19<p>My most-used emoji are:</p>
20<ol>
21 <li>🐞</li>
22 <li>🐍</li>
23 <li>👍</li>
24</ol>
25
26<h2>Links</h2>
27<p>My favorite websites are:</p>
28<ul>
29 <li>realpython.com</li>
30 <li>python.org</li>
31 <li>pypi.org</li>
32</ul>
33</body>
34</html>
7 trong dòng 7, trong đó nội dung xác định tiêu đề của trang của bạn.Khối 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10<h2>Hello, World Wide Web!</h2>
11<p>This is my first website.</p>
12
13<h2>About me</h2>
14<p>I'm a Python programmer and a bug collector.</p>
15
16<h3>Random facts</h3>
17<p>I don't just <em>like</em> emoji,<br>
18I <strong>love</strong> emoji!</p>
19<p>My most-used emoji are:</p>
20<ol>
21 <li>🐞</li>
22 <li>🐍</li>
23 <li>👍</li>
24</ol>
25
26<h2>Links</h2>
27<p>My favorite websites are:</p>
28<ul>
29 <li>realpython.com</li>
30 <li>python.org</li>
31 <li>pypi.org</li>
32</ul>
33</body>
34</html>
2 chứa khối lượng nội dung của bạn. Bạn có thể nghĩ 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10<h2>Hello, World Wide Web!</h2>
11<p>This is my first website.</p>
12
13<h2>About me</h2>
14<p>I'm a Python programmer and a bug collector.</p>
15
16<h3>Random facts</h3>
17<p>I don't just <em>like</em> emoji,<br>
18I <strong>love</strong> emoji!</p>
19<p>My most-used emoji are:</p>
20<ol>
21 <li>🐞</li>
22 <li>🐍</li>
23 <li>👍</li>
24</ol>
25
26<h2>Links</h2>
27<p>My favorite websites are:</p>
28<ul>
29 <li>realpython.com</li>
30 <li>python.org</li>
31 <li>pypi.org</li>
32</ul>
33</body>
34</html>
2 là một phần của tài liệu HTML mà bạn có thể tương tác trong trình duyệt của mình.Đôi khi các tên thẻ được viết tắt, giống như phần tử ngắt dòng 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10<h2>Hello, World Wide Web!</h2>
11<p>This is my first website.</p>
12
13<h2>About me</h2>
14<p>I'm a Python programmer and a bug collector.</p>
15
16<h3>Random facts</h3>
17<p>I don't just <em>like</em> emoji,<br>
18I <strong>love</strong> emoji!</p>
19<p>My most-used emoji are:</p>
20<ol>
21 <li>🐞</li>
22 <li>🐍</li>
23 <li>👍</li>
24</ol>
25
26<h2>Links</h2>
27<p>My favorite websites are:</p>
28<ul>
29 <li>realpython.com</li>
30 <li>python.org</li>
31 <li>pypi.org</li>
32</ul>
33</body>
34</html>
9 trong dòng 10. Để có được cái nhìn tổng quan về các tên thẻ HTML khác, hãy truy cập tham chiếu các phần tử HTML Mozilla.Khi bạn đã làm quen với cấu trúc của tài liệu HTML của mình, hãy tải lại 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Hello, World Wide Web!
11This is my first website.
12
13About me
14
15I'm a Python programmer and a bug collector.
16
17Random facts
18
19I don't just like emoji,
20I love emoji!
21
22My most-used emoji are:
23 1. 🐞
24 2. 🐍
25 3. 👍
26
27Links
28
29My favorite websites are:
30 * realpython.com
31 * python.org
32 * pypi.org
33</body>
34</html>
1 trong trình duyệt của bạn và xem trang web của bạn trông như thế nào:Tuyệt vời, bạn hiện đang hiển thị nội dung của trang web thích hợp đầu tiên của bạn! Có một cơ hội tốt là bạn sẽ bắt đầu bất kỳ dự án web nào với cấu trúc như dự án mà bạn đã xây dựng trong phần này. Để lưu cho mình một số công việc trong tương lai, bạn có thể tải xuống mã Boilerplate HTML bằng cách nhấp vào liên kết bên dưới: Trong phần tiếp theo, bạn sẽ cải thiện cấu trúc cơ sở mà bạn đã tạo ra cho đến nay. Để khám phá lý do tại sao HTML được gọi là ngôn ngữ đánh dấu, bạn sẽ thêm nội dung và cấu trúc vào trang web của mình. Định dạng khoảng trắng và văn bảnĐánh dấu duy nhất mà tài liệu HTML của bạn có cho đến nay là bộ xương cơ sở của trang web của bạn. Bây giờ, thời gian để lặn sâu hơn và cấu trúc một số nội dung thực sự. Để có một cái gì đó để làm việc, hãy thêm văn bản bên dưới vào khối 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10<h2>Hello, World Wide Web!</h2>
11<p>This is my first website.</p>
12
13<h2>About me</h2>
14<p>I'm a Python programmer and a bug collector.</p>
15
16<h3>Random facts</h3>
17<p>I don't just <em>like</em> emoji,<br>
18I <strong>love</strong> emoji!</p>
19<p>My most-used emoji are:</p>
20<ol>
21 <li>🐞</li>
22 <li>🐍</li>
23 <li>👍</li>
24</ol>
25
26<h2>Links</h2>
27<p>My favorite websites are:</p>
28<ul>
29 <li>realpython.com</li>
30 <li>python.org</li>
31 <li>pypi.org</li>
32</ul>
33</body>
34</html>
2 của 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Hello, World Wide Web!
11This is my first website.
12
13About me
14
15I'm a Python programmer and a bug collector.
16
17Random facts
18
19I don't just like emoji,
20I love emoji!
21
22My most-used emoji are:
23 1. 🐞
24 2. 🐍
25 3. 👍
26
27Links
28
29My favorite websites are:
30 * realpython.com
31 * python.org
32 * pypi.org
33</body>
34</html>
1: 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Hello, World Wide Web!
11This is my first website.
12
13About me
14
15I'm a Python programmer and a bug collector.
16
17Random facts
18
19I don't just like emoji,
20I love emoji!
21
22My most-used emoji are:
23 1. 🐞
24 2. 🐍
25 3. 👍
26
27Links
28
29My favorite websites are:
30 * realpython.com
31 * python.org
32 * pypi.org
33</body>
34</html>
Khi bạn mở trang web trong trình duyệt của mình, có vẻ như trình duyệt đã không nhận ra bất kỳ khoảng trắng nào. Mặc dù bạn đã phân phối nội dung của mình trên nhiều dòng bên trong 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10<h2>Hello, World Wide Web!</h2>
11<p>This is my first website.</p>
12
13<h2>About me</h2>
14<p>I'm a Python programmer and a bug collector.</p>
15
16<h3>Random facts</h3>
17<p>I don't just <em>like</em> emoji,<br>
18I <strong>love</strong> emoji!</p>
19<p>My most-used emoji are:</p>
20<ol>
21 <li>🐞</li>
22 <li>🐍</li>
23 <li>👍</li>
24</ol>
25
26<h2>Links</h2>
27<p>My favorite websites are:</p>
28<ul>
29 <li>realpython.com</li>
30 <li>python.org</li>
31 <li>pypi.org</li>
32</ul>
33</body>
34</html>
2, trình duyệt hiển thị mọi thứ như một dòng liên tục:Là một nhà phát triển Python, bạn biết rằng khoảng trắng là một thành phần quan trọng để viết mã Python tuyệt đẹp. Việc thụt mã mã Python của bạn tạo ra sự khác biệt trong cách Python thực thi mã của bạn. Không có bất kỳ điều chỉnh bổ sung nào, các trình duyệt sụp đổ nhiều không gian, ngắt dòng hoặc thụt vào một ký tự không gian. Để định dạng nội dung của bạn khác nhau, bạn phải cung cấp thêm thông tin cho trình duyệt. Đi trước và cấu trúc 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Hello, World Wide Web!
11This is my first website.
12
13About me
14
15I'm a Python programmer and a bug collector.
16
17Random facts
18
19I don't just like emoji,
20I love emoji!
21
22My most-used emoji are:
23 1. 🐞
24 2. 🐍
25 3. 👍
26
27Links
28
29My favorite websites are:
30 * realpython.com
31 * python.org
32 * pypi.org
33</body>
34</html>
1 bằng cách thêm thẻ HTML vào nội dung của bạn: 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10<h2>Hello, World Wide Web!</h2>
11<p>This is my first website.</p>
12
13<h2>About me</h2>
14<p>I'm a Python programmer and a bug collector.</p>
15
16<h3>Random facts</h3>
17<p>I don't just <em>like</em> emoji,<br>
18I <strong>love</strong> emoji!</p>
19<p>My most-used emoji are:</p>
20<ol>
21 <li>🐞</li>
22 <li>🐍</li>
23 <li>👍</li>
24</ol>
25
26<h2>Links</h2>
27<p>My favorite websites are:</p>
28<ul>
29 <li>realpython.com</li>
30 <li>python.org</li>
31 <li>pypi.org</li>
32</ul>
33</body>
34</html>
Bằng cách gói văn bản của bạn trong các khối HTML, bạn cung cấp cho trình duyệt thông tin bổ sung về ý định của bạn cho nội dung. Đầu tiên, hãy xem các yếu tố HTML bao bọc các khối văn bản lớn hơn:
| Hàng | Phần tử HTML | Sự mô tả |
|---|
| 10 | <!-- emoji.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My favorite emoji</title>
</head>
<body>
<nav>
<a href="index.html">Home</a>
</nav>
<h2>My favorite emoji</h2>
<p>I don't just <em>like</em> emoji,<br>
I <strong>love</strong> emoji!</p>
<p>Here's a list of my most-used emoji:</p>
<ol>
<li>🐞</li>
<li>🐍</li>
<li>👍</li>
</ol>
</body>
</html>
1 | Tiêu đề chính của trang web của bạn | | 11 | <!-- emoji.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My favorite emoji</title>
</head>
<body>
<nav>
<a href="index.html">Home</a>
</nav>
<h2>My favorite emoji</h2>
<p>I don't just <em>like</em> emoji,<br>
I <strong>love</strong> emoji!</p>
<p>Here's a list of my most-used emoji:</p>
<ol>
<li>🐞</li>
<li>🐍</li>
<li>👍</li>
</ol>
</body>
</html>
2 | Đoạn văn, cấu trúc văn bản và nội dung liên quan | | 13 | <!-- emoji.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My favorite emoji</title>
</head>
<body>
<nav>
<a href="index.html">Home</a>
</nav>
<h2>My favorite emoji</h2>
<p>I don't just <em>like</em> emoji,<br>
I <strong>love</strong> emoji!</p>
<p>Here's a list of my most-used emoji:</p>
<ol>
<li>🐞</li>
<li>🐍</li>
<li>👍</li>
</ol>
</body>
</html>
1 | Tiêu đề chính của trang web của bạn | | 16 | <!-- emoji.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My favorite emoji</title>
</head>
<body>
<nav>
<a href="index.html">Home</a>
</nav>
<h2>My favorite emoji</h2>
<p>I don't just <em>like</em> emoji,<br>
I <strong>love</strong> emoji!</p>
<p>Here's a list of my most-used emoji:</p>
<ol>
<li>🐞</li>
<li>🐍</li>
<li>👍</li>
</ol>
</body>
</html>
2 | Đoạn văn, cấu trúc văn bản và nội dung liên quan | | 20 | Tiêu đề cấp hai, lồng bên dưới <!-- emoji.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My favorite emoji</title>
</head>
<body>
<nav>
<a href="index.html">Home</a>
</nav>
<h2>My favorite emoji</h2>
<p>I don't just <em>like</em> emoji,<br>
I <strong>love</strong> emoji!</p>
<p>Here's a list of my most-used emoji:</p>
<ol>
<li>🐞</li>
<li>🐍</li>
<li>👍</li>
</ol>
</body>
</html>
1 | <!-- emoji.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My favorite emoji</title>
</head>
<body>
<nav>
<a href="index.html">Home</a>
</nav>
<h2>My favorite emoji</h2>
<p>I don't just <em>like</em> emoji,<br>
I <strong>love</strong> emoji!</p>
<p>Here's a list of my most-used emoji:</p>
<ol>
<li>🐞</li>
<li>🐍</li>
<li>👍</li>
</ol>
</body>
</html>
5 | | 28 | Tiêu đề cấp ba, lồng bên dưới <!-- emoji.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My favorite emoji</title>
</head>
<body>
<nav>
<a href="index.html">Home</a>
</nav>
<h2>My favorite emoji</h2>
<p>I don't just <em>like</em> emoji,<br>
I <strong>love</strong> emoji!</p>
<p>Here's a list of my most-used emoji:</p>
<ol>
<li>🐞</li>
<li>🐍</li>
<li>👍</li>
</ol>
</body>
</html>
1 | <!-- emoji.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My favorite emoji</title>
</head>
<body>
<nav>
<a href="index.html">Home</a>
</nav>
<h2>My favorite emoji</h2>
<p>I don't just <em>like</em> emoji,<br>
I <strong>love</strong> emoji!</p>
<p>Here's a list of my most-used emoji:</p>
<ol>
<li>🐞</li>
<li>🐍</li>
<li>👍</li>
</ol>
</body>
</html>
7 |
Danh sách được đặt hàng, thường được hiển thị dưới dạng danh sách được đánh số <!-- emoji.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My favorite emoji</title>
</head>
<body>
<nav>
<a href="index.html">Home</a>
</nav>
<h2>My favorite emoji</h2>
<p>I don't just <em>like</em> emoji,<br>
I <strong>love</strong> emoji!</p>
<p>Here's a list of my most-used emoji:</p>
<ol>
<li>🐞</li>
<li>🐍</li>
<li>👍</li>
</ol>
</body>
</html>
8Một số yếu tố HTML mà bạn đã sử dụng ở trên chỉ chứa văn bản. Những người khác chứa các yếu tố HTML bổ sung cấu trúc nội dung hơn nữa:
| Hàng | Phần tử HTML | Sự mô tả |
|---|
| 17 | 1<!-- images/gallery.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Image gallery</title>
8</head>
9<body>
10<nav>
11 <a href="../index.html">Home</a>
12 <a href="../emoji.html">Emoji</a>
13</nav>
14<h2>Image gallery</h2>
15</body>
16</html>
5 | Nhấn mạnh nội dung | | 18 | 1<!-- images/gallery.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Image gallery</title>
8</head>
9<body>
10<nav>
11 <a href="../index.html">Home</a>
12 <a href="../emoji.html">Emoji</a>
13</nav>
14<h2>Image gallery</h2>
15</body>
16</html>
6 | Chỉ ra nội dung quan trọng | | 21 | 1<!-- images/gallery.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Image gallery</title>
8</head>
9<body>
10<nav>
11 <a href="../index.html">Home</a>
12 <a href="../emoji.html">Emoji</a>
13</nav>
14<h2>Image gallery</h2>
15</body>
16</html>
7 | Mục danh sách, phải được chứa trong một phần tử danh sách |
Tất cả các thẻ HTML truyền đạt ý nghĩa. Do đó, nó cực kỳ quan trọng để chọn cẩn thận đánh dấu nào bạn sử dụng cho các phần nội dung của bạn. Khi bạn sử dụng ngữ nghĩa phù hợp, thì bạn sẽ cho phép mọi người tiêu thụ nội dung của mình theo cách mà bạn dự định. Bạn làm cho trang web của bạn có thể truy cập được cho tất cả: Web được thiết kế cơ bản để hoạt động cho tất cả mọi người, bất kể phần cứng, phần mềm, ngôn ngữ, vị trí hoặc khả năng của họ. Khi web đáp ứng mục tiêu này, những người có nhiều thính giác, chuyển động, thị giác và khả năng nhận thức đa dạng. (Nguồn)
Một số yếu tố HTML khá đơn giản. Đối với các đoạn văn, bạn sử dụng <!-- emoji.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My favorite emoji</title>
</head>
<body>
<nav>
<a href="index.html">Home</a>
</nav>
<h2>My favorite emoji</h2>
<p>I don't just <em>like</em> emoji,<br>
I <strong>love</strong> emoji!</p>
<p>Here's a list of my most-used emoji:</p>
<ol>
<li>🐞</li>
<li>🐍</li>
<li>👍</li>
</ol>
</body>
</html>
2. Các yếu tố khác khó nắm bắt hơn một chút:Kushagra Gour cung cấp một bản tóm tắt tuyệt vời trong mục blog của mình Strong vs em: Nếu nó chỉ là tầm quan trọng trực quan, bạn muốn 1<!-- images/gallery.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Image gallery</title>
8</head>
9<body>
10<nav>
11 <a href="../index.html">Home</a>
12 <a href="../emoji.html">Emoji</a>
13</nav>
14<h2>Image gallery</h2>
15</body>
16</html>
9. Nếu nó thay đổi ý nghĩa câu, hãy sử dụng <!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Am I HTML already?</title>
</head>
<body>
<nav>
<a href="emoji.html">Emoji</a>
<a href="images/gallery.html">Gallery</a>
</nav>
<!-- ... -->
0.
Nói cách khác, <!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Am I HTML already?</title>
</head>
<body>
<nav>
<a href="emoji.html">Emoji</a>
<a href="images/gallery.html">Gallery</a>
</nav>
<!-- ... -->
0 có nghĩa là bạn sẽ nhấn mạnh từ này trong khi nói. Ví dụ, nếu ai đó nói, thì bạn không có vẻ xấu, bạn có thể tự hỏi, nhưng tôi có mùi hôi không? Vị trí của sự nhấn mạnh là chìa khóa cho ý nghĩa của câu.Ví dụ, nếu bạn chỉ muốn thu hút sự chú ý của người đọc vào một phần từ vựng, thì bạn có thể muốn sử dụng 1<!-- images/gallery.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Image gallery</title>
8</head>
9<body>
10<nav>
11 <a href="../index.html">Home</a>
12 <a href="../emoji.html">Emoji</a>
13</nav>
14<h2>Image gallery</h2>
15</body>
16</html>
9 thay thế.Khi nghi ngờ, don lồng ngần ngại tìm kiếm tên HTML trên web. Bạn sẽ tìm thấy các cuộc thảo luận và ghi chú sử dụng về bất kỳ yếu tố HTML nào. Ngoài ra, phong cách HTML mặc định của trình duyệt của bạn có thể tạo ấn tượng tốt bằng cách tạo kiểu các yếu tố khác nhau: Với Markup, bạn thêm ý nghĩa vào nội dung trang web của bạn. Viết HTML chính xác về mặt ngữ nghĩa rất quan trọng để hiểu nội dung của bạn. Sử dụng ngữ nghĩa thích hợp trong tài liệu HTML của bạn không chỉ hữu ích cho trình duyệt. Nó cũng làm cho trang HTML được hiển thị có thể truy cập được cho người dùng tiêu thụ nội dung của bạn bằng phần mềm văn bản thành giọng nói. Nếu bạn muốn tìm hiểu thêm về HTML hiện đại, thì bác sĩ HTML5 là một nguồn tài nguyên tuyệt vời. Để tìm hiểu thêm về khả năng truy cập, bạn có thể kiểm tra khóa học của Google về việc làm cho tất cả mọi người có thể truy cập được. Liên kết, hình ảnh và bảngNhảy từ trang web này sang trang khác là một phần thiết yếu của internet. Các tài liệu tham khảo này được gọi là siêu liên kết, thường được gọi là liên kết. Không có liên kết, các trang web sẽ tồn tại trong một silo và bạn chỉ có thể truy cập chúng nếu bạn biết địa chỉ web.hyperlinks, commonly referred to as links. Without links, websites would exist in a silo, and you could only access them if you knew the web address. Ngoài ra, bạn sẽ có thể điều hướng giữa nhiều trang của một trang web nếu bạn không có liên kết kết nối các trang. Để kết nối các tài liệu HTML mà bạn đã tạo cho đến nay, hãy thêm menu điều hướng vào mã nguồn HTML của bạn: <!-- index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Am I HTML already?</title>
</head>
<body>
<nav>
<a href="emoji.html">Emoji</a>
</nav>
<!-- ... -->
</body>
</html>
Với yếu tố <!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Am I HTML already?</title>
</head>
<body>
<nav>
<a href="emoji.html">Emoji</a>
<a href="images/gallery.html">Gallery</a>
</nav>
<!-- ... -->
3, bạn khai báo một phần cung cấp điều hướng. Bên trong <!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Am I HTML already?</title>
</head>
<body>
<nav>
<a href="emoji.html">Emoji</a>
<a href="images/gallery.html">Gallery</a>
</nav>
<!-- ... -->
3, bạn thêm một liên kết với thẻ <!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Am I HTML already?</title>
</head>
<body>
<nav>
<a href="emoji.html">Emoji</a>
<a href="images/gallery.html">Gallery</a>
</nav>
<!-- ... -->
5, viết tắt cho neo. Thuộc tính <!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Am I HTML already?</title>
</head>
<body>
<nav>
<a href="emoji.html">Emoji</a>
<a href="images/gallery.html">Gallery</a>
</nav>
<!-- ... -->
6 là viết tắt của tham chiếu siêu văn bản, chứa mục tiêu liên kết.Hypertext Reference, containing the link’s target. Với các liên kết tương đối, bạn có thể tham chiếu các tệp trong cây thư mục của mình. Bạn có thể mong đợi được xem một URL bất cứ khi nào bạn có một liên kết, nhưng điều đó không phải là trường hợp có liên kết tương đối.relative links, you can
reference files in your directory tree. You may expect to see a URL whenever you have a link, but that’s not the case with relative links. Trong trường hợp này, bạn liên kết đến một tệp có tên <!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Am I HTML already?</title>
</head>
<body>
<nav>
<a href="emoji.html">Emoji</a>
<a href="images/gallery.html">Gallery</a>
</nav>
<!-- ... -->
7. Trình duyệt hiểu rằng nó có thể tìm thấy <!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Am I HTML already?</title>
</head>
<body>
<nav>
<a href="emoji.html">Emoji</a>
<a href="images/gallery.html">Gallery</a>
</nav>
<!-- ... -->
7 trong cùng một thư mục và hoàn thành URL đầy đủ cho bạn. Bằng cách đó, bạn không cần phải lo lắng về việc thay đổi bất kỳ đường dẫn tuyệt đối nào khi bạn quyết định triển khai dự án web của mình tại một số điểm.Cho đến nay, <!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Am I HTML already?</title>
</head>
<body>
<nav>
<a href="emoji.html">Emoji</a>
<a href="images/gallery.html">Gallery</a>
</nav>
<!-- ... -->
7 không tồn tại. Để sửa lỗi này, hãy tạo một tệp mới có tên <!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Am I HTML already?</title>
</head>
<body>
<nav>
<a href="emoji.html">Emoji</a>
<a href="images/gallery.html">Gallery</a>
</nav>
<!-- ... -->
7 bên cạnh 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Hello, World Wide Web!
11This is my first website.
12
13About me
14
15I'm a Python programmer and a bug collector.
16
17Random facts
18
19I don't just like emoji,
20I love emoji!
21
22My most-used emoji are:
23 1. 🐞
24 2. 🐍
25 3. 👍
26
27Links
28
29My favorite websites are:
30 * realpython.com
31 * python.org
32 * pypi.org
33</body>
34</html>
1:<!-- emoji.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My favorite emoji</title>
</head>
<body>
<nav>
<a href="index.html">Home</a>
</nav>
<h2>My favorite emoji</h2>
<p>I don't just <em>like</em> emoji,<br>
I <strong>love</strong> emoji!</p>
<p>Here's a list of my most-used emoji:</p>
<ol>
<li>🐞</li>
<li>🐍</li>
<li>👍</li>
</ol>
</body>
</html>
Cấu trúc của <!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Am I HTML already?</title>
</head>
<body>
<nav>
<a href="emoji.html">Emoji</a>
<a href="images/gallery.html">Gallery</a>
</nav>
<!-- ... -->
7 tương tự như 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Hello, World Wide Web!
11This is my first website.
12
13About me
14
15I'm a Python programmer and a bug collector.
16
17Random facts
18
19I don't just like emoji,
20I love emoji!
21
22My most-used emoji are:
23 1. 🐞
24 2. 🐍
25 3. 👍
26
27Links
28
29My favorite websites are:
30 * realpython.com
31 * python.org
32 * pypi.org
33</body>
34</html>
1. Nội dung của 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10<h2>Hello, World Wide Web!</h2>
11<p>This is my first website.</p>
12
13<h2>About me</h2>
14<p>I'm a Python programmer and a bug collector.</p>
15
16<h3>Random facts</h3>
17<p>I don't just <em>like</em> emoji,<br>
18I <strong>love</strong> emoji!</p>
19<p>My most-used emoji are:</p>
20<ol>
21 <li>🐞</li>
22 <li>🐍</li>
23 <li>👍</li>
24</ol>
25
26<h2>Links</h2>
27<p>My favorite websites are:</p>
28<ul>
29 <li>realpython.com</li>
30 <li>python.org</li>
31 <li>pypi.org</li>
32</ul>
33</body>
34</html>
2 trong <!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Am I HTML already?</title>
</head>
<body>
<nav>
<a href="emoji.html">Emoji</a>
<a href="images/gallery.html">Gallery</a>
</nav>
<!-- ... -->
7 gần như giống hệt với phần thực tế ngẫu nhiên của 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Hello, World Wide Web!
11This is my first website.
12
13About me
14
15I'm a Python programmer and a bug collector.
16
17Random facts
18
19I don't just like emoji,
20I love emoji!
21
22My most-used emoji are:
23 1. 🐞
24 2. 🐍
25 3. 👍
26
27Links
28
29My favorite websites are:
30 * realpython.com
31 * python.org
32 * pypi.org
33</body>
34</html>
1, ngoại trừ việc bạn đã thay đổi tiêu đề và di chuyển nó lên một cấp độ là <!-- emoji.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My favorite emoji</title>
</head>
<body>
<nav>
<a href="index.html">Home</a>
</nav>
<h2>My favorite emoji</h2>
<p>I don't just <em>like</em> emoji,<br>
I <strong>love</strong> emoji!</p>
<p>Here's a list of my most-used emoji:</p>
<ol>
<li>🐞</li>
<li>🐍</li>
<li>👍</li>
</ol>
</body>
</html>
1.Ở đầu 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10<h2>Hello, World Wide Web!</h2>
11<p>This is my first website.</p>
12
13<h2>About me</h2>
14<p>I'm a Python programmer and a bug collector.</p>
15
16<h3>Random facts</h3>
17<p>I don't just <em>like</em> emoji,<br>
18I <strong>love</strong> emoji!</p>
19<p>My most-used emoji are:</p>
20<ol>
21 <li>🐞</li>
22 <li>🐍</li>
23 <li>👍</li>
24</ol>
25
26<h2>Links</h2>
27<p>My favorite websites are:</p>
28<ul>
29 <li>realpython.com</li>
30 <li>python.org</li>
31 <li>pypi.org</li>
32</ul>
33</body>
34</html>
2, bạn cũng có một yếu tố <!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Am I HTML already?</title>
</head>
<body>
<nav>
<a href="emoji.html">Emoji</a>
<a href="images/gallery.html">Gallery</a>
</nav>
<!-- ... -->
3. Tuy nhiên, lần này, bạn có liên kết đến 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Hello, World Wide Web!
11This is my first website.
12
13About me
14
15I'm a Python programmer and a bug collector.
16
17Random facts
18
19I don't just like emoji,
20I love emoji!
21
22My most-used emoji are:
23 1. 🐞
24 2. 🐍
25 3. 👍
26
27Links
28
29My favorite websites are:
30 * realpython.com
31 * python.org
32 * pypi.org
33</body>
34</html>
1.Tiếp theo, hãy tạo một thư mục mới có tên 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
01 bên trong thư mục dự án của bạn và thêm một tệp có tên 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
02: 1<!-- images/gallery.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Image gallery</title>
8</head>
9<body>
10<nav>
11 <a href="../index.html">Home</a>
12 <a href="../emoji.html">Emoji</a>
13</nav>
14<h2>Image gallery</h2>
15</body>
16</html>
Bạn sẽ thêm một số hình ảnh vào 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
02 trong một khoảnh khắc. Nhưng trước tiên, hãy xem các dòng 11 và 12, nơi bạn liên kết đến các trang khác của mình.Vì 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Hello, World Wide Web!
11This is my first website.
12
13About me
14
15I'm a Python programmer and a bug collector.
16
17Random facts
18
19I don't just like emoji,
20I love emoji!
21
22My most-used emoji are:
23 1. 🐞
24 2. 🐍
25 3. 👍
26
27Links
28
29My favorite websites are:
30 * realpython.com
31 * python.org
32 * pypi.org
33</body>
34</html>
1 và <!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Am I HTML already?</title>
</head>
<body>
<nav>
<a href="emoji.html">Emoji</a>
<a href="images/gallery.html">Gallery</a>
</nav>
<!-- ... -->
7 là một thư mục trên 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
02, bạn phải tiền tố mục tiêu liên kết với hai dấu chấm ( 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
07) và một dấu gạch chéo (____108).Để có quyền truy cập thuận tiện hơn, bạn cũng có thể thêm một liên kết vào bộ sưu tập của mình trong menu điều hướng là 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Hello, World Wide Web!
11This is my first website.
12
13About me
14
15I'm a Python programmer and a bug collector.
16
17Random facts
18
19I don't just like emoji,
20I love emoji!
21
22My most-used emoji are:
23 1. 🐞
24 2. 🐍
25 3. 👍
26
27Links
28
29My favorite websites are:
30 * realpython.com
31 * python.org
32 * pypi.org
33</body>
34</html>
1:<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Am I HTML already?</title>
</head>
<body>
<nav>
<a href="emoji.html">Emoji</a>
<a href="images/gallery.html">Gallery</a>
</nav>
<!-- ... -->
Bạn cũng có thể liên kết đến bộ sưu tập của mình trong <!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Am I HTML already?</title>
</head>
<body>
<nav>
<a href="emoji.html">Emoji</a>
<a href="images/gallery.html">Gallery</a>
</nav>
<!-- ... -->
7:<!-- emoji.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My favorite emoji</title>
</head>
<body>
<nav>
<a href="index.html">Home</a>
<a href="images/gallery.html">Gallery</a>
</nav>
<!-- ... -->
Nếu bạn thêm một liên kết vào một trang HTML, thì bạn luôn phải suy nghĩ về việc điều hướng ở đó từ tệp mà bạn có thể ở ngay bây giờ. Tệp 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
02 là một thư mục dưới 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Hello, World Wide Web!
11This is my first website.
12
13About me
14
15I'm a Python programmer and a bug collector.
16
17Random facts
18
19I don't just like emoji,
20I love emoji!
21
22My most-used emoji are:
23 1. 🐞
24 2. 🐍
25 3. 👍
26
27Links
28
29My favorite websites are:
30 * realpython.com
31 * python.org
32 * pypi.org
33</body>
34</html>
1 trong một thư mục có tên 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
01. Vì vậy, khi bạn liên kết đến 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
02, thì bạn cần đưa thư mục con vào liên kết, mà bạn đã làm ở trên.Liên kết tương đối rất hữu ích cho việc liên kết các trang trang web của bạn. Khi bạn muốn thêm các liên kết bên ngoài, thì bạn sử dụng các liên kết tuyệt đối:absolute links: 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
0Thay vì liên kết với các tệp HTML, bạn sẽ liên kết với các địa chỉ web tuyệt đối trong danh sách các trang web yêu thích của bạn. Các liên kết này là cùng một liên kết mà bạn đã nhập vào thanh địa chỉ trình duyệt của bạn. Nhảy vào trình duyệt và điều hướng xung quanh trang web của bạn với các liên kết mà bạn vừa thêm vào: Các liên kết aren chỉ hữu ích cho việc kết nối các trang của trang web của bạn, họ là một phần quan trọng của cơ sở hạ tầng Internet. Nếu bạn muốn tìm hiểu thêm về các liên kết, thì hãy xem hướng dẫn neo HTML này. Một yếu tố quan trọng khác của web là hình ảnh. Nếu không có khả năng chia sẻ hình ảnh kỳ nghỉ và gif mèo, internet sẽ buồn tẻ. Bạn đính kèm hình ảnh vào tài liệu HTML của mình với phần tử 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
15 chứa thuộc tính 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
16. Giống như với <!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Am I HTML already?</title>
</head>
<body>
<nav>
<a href="emoji.html">Emoji</a>
<a href="images/gallery.html">Gallery</a>
</nav>
<!-- ... -->
6 trong một liên kết, bạn tham chiếu nguồn hình ảnh trong 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
16. Ngoài ra, bạn phải luôn luôn sử dụng thuộc tính 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
19 để thêm văn bản thay thế mô tả hình ảnh. Bằng cách đó, bạn làm cho trang web của bạn có thể truy cập được cho những người sử dụng đầu đọc màn hình.Cập nhật 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
02 và liên kết đến ba hình ảnh: 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
1Bạn sẽ tìm thấy hình ảnh bầu trời bên trong thư mục 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
01 sau khi tải xuống các tài liệu bằng cách nhấp vào mã bên dưới:Nếu bạn sử dụng hình ảnh của riêng mình, thì bạn cần điều chỉnh tên tệp phù hợp. Đừng quên cập nhật văn bản 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
19 để mô tả nội dung của hình ảnh để làm cho hình ảnh của bạn có thể truy cập được.Văn bản 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
19 có thể so sánh rộng rãi với các tài liệu trong Python. Trong khi một tài liệu có thể mô tả mục đích của một đối tượng, văn bản 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
19 mô tả nội dung của một hình ảnh. Giống như một tài liệu, một văn bản 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
19 sẽ kết thúc bằng một dấu chấm ( 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
26).Thêm thông tin bổ sung vào hình ảnh của bạn là công việc thêm, nhưng nó đáng để làm. Nếu có một con chó dễ thương trong một bức tranh, mọi người đều xứng đáng được biết rằng có một con chó dễ thương trong hình. Trong trường hợp bạn cần bất kỳ sự thuyết phục nào, hãy truy cập các văn bản alt: Hướng dẫn cuối cùng trên Axess Lab. Khi bạn mở 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
02 trong trình duyệt, trang của bạn sẽ trông tương tự như thế này:Hình ảnh là một cách tuyệt vời để làm cho trang web của bạn hấp dẫn trực quan hơn. Tuy nhiên, bộ sưu tập hình ảnh là một chút ở khắp mọi nơi và không có bất kỳ kiểu dáng bổ sung nào, trang web trông khá cũ. Nó thời gian để thay đổi điều đó! Trong phần tiếp theo, bạn sẽ thêm các quy tắc kiểu dáng vào HTML của mình và kiểm soát tốt hơn cách các yếu tố trên trang web của bạn trông. Kiểu nội dung của bạn với CSSKhi bạn mở một tệp HTML đơn giản trong trình duyệt, trình duyệt sẽ thêm một số kiểu dáng theo mặc định. Đó là lý do tại sao bạn có thể phân biệt các yếu tố trong phần trước mặc dù bạn đã không thêm bất kỳ kiểu dáng nào. Đó về cơ bản là một dịch vụ từ trình duyệt đến bạn như một con người. Nhưng nói đúng ra, khi bạn viết HTML, bạn chỉ xác định đánh dấu của trang web của mình. Pure HTML không cung cấp bất kỳ kiểu dáng nào cho các yếu tố trên trang của bạn. Để các yếu tố phong cách, bạn cần thêm CSS. CSS là viết tắt của các bảng phong cách xếp tầng. Như bạn sẽ thấy sau này, bạn có thể kết hợp và làm tổ các quy tắc kiểu CSS của mình, do đó tên là bảng kiểu xếp tầng.Cascading Style Sheets. As you’ll see later, you can combine and nest your CSS styling rules, hence the name cascading style sheets. Giống như HTML, nó là một công nghệ nền tảng của Internet. Nó giúp bạn phân tách giao diện trang web của bạn khỏi nội dung thực tế: Ngoài việc có ngữ nghĩa tốt và bố cục hấp dẫn, nội dung của bạn sẽ có ý nghĩa logic theo thứ tự nguồn của nó - bạn luôn có thể đặt nó ở nơi bạn muốn sử dụng CSS sau này, nhưng bạn nên bắt đầu thứ tự nguồn để bắt đầu Người dùng đọc được đọc ra cho họ sẽ có ý nghĩa. (Nguồn)
Trong phần này, bạn sẽ học cách kiểm soát kiểu dáng trang web của bạn bằng cách thêm CSS.
Thêm màu vào trang web của bạnCho đến nay, bạn chỉ sử dụng trình duyệt để tải tệp HTML của mình. Nhưng trình duyệt web là công cụ mạnh mẽ và chúng có thể giúp bạn rất nhiều khi bạn phát triển một trang web. Bạn có thể điều tra bất kỳ trang web nào với ngăn công cụ nhà phát triển của trình duyệt của bạn. Đặc biệt là khi bạn làm việc với CSS, các công cụ nhà phát triển trình duyệt của bạn có ích: Lưu ý rằng những thay đổi trong các công cụ nhà phát triển của bạn không còn tồn tại. Khi bạn tải lại trang của mình, tất cả các thay đổi đã biến mất. Vì vậy, một khi bạn hài lòng với các điều chỉnh kiểu của mình, bạn cần sao chép và dán mã vào thẻ 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
28 trong tệp HTML của bạn.Mở 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Hello, World Wide Web!
11This is my first website.
12
13About me
14
15I'm a Python programmer and a bug collector.
16
17Random facts
18
19I don't just like emoji,
20I love emoji!
21
22My most-used emoji are:
23 1. 🐞
24 2. 🐍
25 3. 👍
26
27Links
28
29My favorite websites are:
30 * realpython.com
31 * python.org
32 * pypi.org
33</body>
34</html>
1 và thêm phần tử 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
28 bên trong 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10<h2>Hello, World Wide Web!</h2>
11<p>This is my first website.</p>
12
13<h2>About me</h2>
14<p>I'm a Python programmer and a bug collector.</p>
15
16<h3>Random facts</h3>
17<p>I don't just <em>like</em> emoji,<br>
18I <strong>love</strong> emoji!</p>
19<p>My most-used emoji are:</p>
20<ol>
21 <li>🐞</li>
22 <li>🐍</li>
23 <li>👍</li>
24</ol>
25
26<h2>Links</h2>
27<p>My favorite websites are:</p>
28<ul>
29 <li>realpython.com</li>
30 <li>python.org</li>
31 <li>pypi.org</li>
32</ul>
33</body>
34</html>
3: 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
2Với phần tử 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
28, bạn có thể thêm mã CSS vào tài liệu HTML của mình. Mặc dù các trình duyệt không nghiêm ngặt về nó, nhưng bạn chỉ nên đặt phần tử 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
28 bên trong 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10<h2>Hello, World Wide Web!</h2>
11<p>This is my first website.</p>
12
13<h2>About me</h2>
14<p>I'm a Python programmer and a bug collector.</p>
15
16<h3>Random facts</h3>
17<p>I don't just <em>like</em> emoji,<br>
18I <strong>love</strong> emoji!</p>
19<p>My most-used emoji are:</p>
20<ol>
21 <li>🐞</li>
22 <li>🐍</li>
23 <li>👍</li>
24</ol>
25
26<h2>Links</h2>
27<p>My favorite websites are:</p>
28<ul>
29 <li>realpython.com</li>
30 <li>python.org</li>
31 <li>pypi.org</li>
32</ul>
33</body>
34</html>
3. Mặt khác, trình duyệt có thể cố gắng hiển thị các phần tử trước khi áp dụng bất kỳ quy tắc CSS nào, điều này có thể gây ra đèn flash của nội dung không được định hướng.Nội dung của 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
28 là mã HTML, nhưng CSS. Với CSS, bạn xác định các quy tắc về cách tạo kiểu các yếu tố trên trang.Với các bộ chọn, bạn xác định những yếu tố bạn muốn nhắm mục tiêu, theo sau là một khối khai báo. Trong mã CSS ở trên, bạn đã sử dụng các bộ chọn loại để nhắm mục tiêu 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10<h2>Hello, World Wide Web!</h2>
11<p>This is my first website.</p>
12
13<h2>About me</h2>
14<p>I'm a Python programmer and a bug collector.</p>
15
16<h3>Random facts</h3>
17<p>I don't just <em>like</em> emoji,<br>
18I <strong>love</strong> emoji!</p>
19<p>My most-used emoji are:</p>
20<ol>
21 <li>🐞</li>
22 <li>🐍</li>
23 <li>👍</li>
24</ol>
25
26<h2>Links</h2>
27<p>My favorite websites are:</p>
28<ul>
29 <li>realpython.com</li>
30 <li>python.org</li>
31 <li>pypi.org</li>
32</ul>
33</body>
34</html>
2 và tất cả các yếu tố <!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Am I HTML already?</title>
</head>
<body>
<nav>
<a href="emoji.html">Emoji</a>
<a href="images/gallery.html">Gallery</a>
</nav>
<!-- ... -->
5. Bạn sẽ sử dụng một số loại bộ chọn CSS khác sau này trong hướng dẫn. Nếu bạn muốn tìm hiểu thêm về các bộ chọn CSS, thì hãy truy cập trang của Mozilla CSS CSS.selectors, you define which elements you want to target, followed by a declaration block. In the CSS code above, you’re using
type selectors to target 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10<h2>Hello, World Wide Web!</h2>
11<p>This is my first website.</p>
12
13<h2>About me</h2>
14<p>I'm a Python programmer and a bug collector.</p>
15
16<h3>Random facts</h3>
17<p>I don't just <em>like</em> emoji,<br>
18I <strong>love</strong> emoji!</p>
19<p>My most-used emoji are:</p>
20<ol>
21 <li>🐞</li>
22 <li>🐍</li>
23 <li>👍</li>
24</ol>
25
26<h2>Links</h2>
27<p>My favorite websites are:</p>
28<ul>
29 <li>realpython.com</li>
30 <li>python.org</li>
31 <li>pypi.org</li>
32</ul>
33</body>
34</html>
2 and all <!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Am I HTML already?</title>
</head>
<body>
<nav>
<a href="emoji.html">Emoji</a>
<a href="images/gallery.html">Gallery</a>
</nav>
<!-- ... -->
5 elements. You’ll use some other kinds of CSS selectors later in the tutorial. If you want to learn more about CSS selectors already, then head over to Mozilla’s CSS selectors page.Khối khai báo được phân định bằng một nẹp mở ( 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
38) và nẹp đóng ( 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
39). Bạn phân tách các khai báo bên trong một khối với dấu chấm phẩy ( 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
40). Bản thân tuyên bố được cấu trúc thành hai phần:- Thuộc tính: Mã định danh xác định tính năng The identifier defining the feature
- Giá trị: Mô tả về cách xử lý tính năng The description of how the feature should be handled
Tài sản và giá trị được phân tách bằng một dấu hai chấm ( 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
41). Trong ví dụ trên, bạn đã thay đổi màu nền của 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10<h2>Hello, World Wide Web!</h2>
11<p>This is my first website.</p>
12
13<h2>About me</h2>
14<p>I'm a Python programmer and a bug collector.</p>
15
16<h3>Random facts</h3>
17<p>I don't just <em>like</em> emoji,<br>
18I <strong>love</strong> emoji!</p>
19<p>My most-used emoji are:</p>
20<ol>
21 <li>🐞</li>
22 <li>🐍</li>
23 <li>👍</li>
24</ol>
25
26<h2>Links</h2>
27<p>My favorite websites are:</p>
28<ul>
29 <li>realpython.com</li>
30 <li>python.org</li>
31 <li>pypi.org</li>
32</ul>
33</body>
34</html>
2 thành màu xanh đậm và văn bản thành màu xám rất nhạt bằng cách chỉ định các giá trị RGB của chúng. Trong quy tắc CSS thứ hai, bạn đã tô màu tất cả các liên kết trong một màu cá hồi hiện đại.Màu sắc là một phần quan trọng của việc kiểm soát giao diện của trang web của bạn. Trong CSS, bạn có nhiều cách mô tả một màu. Bạn có thể kiểm tra Smashing Magazine Hướng dẫn về màu sắc CSS hiện đại để mở rộng kiến thức của bạn về việc sử dụng màu sắc trong CSS. Bên cạnh việc lựa chọn màu sắc, bạn có thể thay đổi bộ mặt trang web của mình bằng phông chữ. Bạn đã thay đổi màu sắc của văn bản. Tiếp theo, điều chỉnh kích thước văn bản của 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
43 với thuộc tính 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
44: 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
3Với 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
45, bạn bảo trình duyệt hiển thị văn bản lớn hơn 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
46 lần so với kích thước phông chữ của phần tử cha. Phần tử cha của 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10<h2>Hello, World Wide Web!</h2>
11<p>This is my first website.</p>
12
13<h2>About me</h2>
14<p>I'm a Python programmer and a bug collector.</p>
15
16<h3>Random facts</h3>
17<p>I don't just <em>like</em> emoji,<br>
18I <strong>love</strong> emoji!</p>
19<p>My most-used emoji are:</p>
20<ol>
21 <li>🐞</li>
22 <li>🐍</li>
23 <li>👍</li>
24</ol>
25
26<h2>Links</h2>
27<p>My favorite websites are:</p>
28<ul>
29 <li>realpython.com</li>
30 <li>python.org</li>
31 <li>pypi.org</li>
32</ul>
33</body>
34</html>
2 là 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Hello, World Wide Web!
11This is my first website.
12
13About me
14
15I'm a Python programmer and a bug collector.
16
17Random facts
18
19I don't just like emoji,
20I love emoji!
21
22My most-used emoji are:
23 1. 🐞
24 2. 🐍
25 3. 👍
26
27Links
28
29My favorite websites are:
30 * realpython.com
31 * python.org
32 * pypi.org
33</body>
34</html>
0, do đó, văn bản sẽ được hiển thị lớn hơn 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
46 lần so với kích thước phông chữ mặc định trong trình duyệt. Kích thước phông chữ mặc định thường là mười sáu pixel, vì vậy văn bản sẽ được hiển thị ở kích thước khoảng hai mươi mốt pixel.Bạn có thể xác định kích thước phông chữ trực tiếp với pixel. Tuy nhiên, nó phổ biến để sử dụng tỷ lệ phần trăm hoặc <!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Am I HTML already?</title>
</head>
<body>
<nav>
<a href="emoji.html">Emoji</a>
<a href="images/gallery.html">Gallery</a>
</nav>
<!-- ... -->
0 cho kích thước văn bản:Được đặt tên theo chữ cái M M, đơn vị EM có một truyền thống lâu đời trong kiểu chữ, nơi nó đã được sử dụng để đo chiều rộng ngang. (Nguồn)
Quay lại khi bạn phải đúc các chữ cái vào các khối kim loại, chữ M thường lấy toàn bộ chiều rộng ngang của khối đúc. Trong CSS, bạn cũng có thể sử dụng <!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Am I HTML already?</title>
</head>
<body>
<nav>
<a href="emoji.html">Emoji</a>
<a href="images/gallery.html">Gallery</a>
</nav>
<!-- ... -->
0 cho độ dài dọc và nó là một đơn vị tốt để tạo ra các thiết kế có thể mở rộng. Điều đó có nghĩa là người dùng của bạn có thể phóng to trên trang web của bạn mà không phá vỡ thiết kế. Điều này rất quan trọng khi người dùng muốn tăng kích thước phông chữ để đọc nội dung của bạn tốt hơn hoặc khi họ truy cập trang web của bạn từ thiết bị di động.Pixels và <!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Am I HTML already?</title>
</head>
<body>
<nav>
<a href="emoji.html">Emoji</a>
<a href="images/gallery.html">Gallery</a>
</nav>
<!-- ... -->
0 chỉ là hai trong số nhiều đơn vị chiều dài trong CSS mà bạn có thể sử dụng. Khi bạn bắt đầu tập trung vào việc thiết kế trang web của mình, nó đáng để xem các đơn vị này và chơi xung quanh với các loại đơn vị khác nhau.Bên cạnh kích thước của văn bản, phông chữ mà bạn hiển thị văn bản là một nền tảng khác tác động đến thiết kế trang web của bạn rất nhiều. Thay đổi phông chữPhông chữ là một công cụ phi thường để thay đổi đặc tính của tài liệu của bạn. Khi sử dụng phông chữ trên trang web của bạn, bạn có hai tùy chọn:
- Dựa vào phông chữ mà khách truy cập của bạn đã cài đặt trên hệ thống của họ.
- Tải các phông chữ Web tùy chỉnh từ máy chủ hoặc tài nguyên bên ngoài của bạn.
Với một trong hai tùy chọn, đó là một ý tưởng tốt để xác định một ngăn xếp phông chữ. Khi bạn liệt kê nhiều phông chữ cho 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
53, trình duyệt sau đó cố gắng tải các phông chữ từ trái sang phải:font stack. When you list more than one font for 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
53, the browser then tries to load the fonts from left to right: 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
4Khi bạn khai báo một ngăn xếp phông chữ như được hiển thị ở trên, đầu tiên trình duyệt cố gắng tải kiểu chữ Helvetica. Nếu trình duyệt có thể tìm thấy một phông chữ trong ngăn xếp phông chữ, thì nó tiếp tục bằng cách cố gắng tải phông chữ dự phòng tiếp theo. Trong trường hợp này, trình duyệt sẽ tải bất kỳ phông chữ Sans-serif nào nếu không có Helvetica và Arial có mặt.fallback font. In this case, the browser will load any sans-serif font if neither Helvetica nor Arial is present. Chọn phông chữ phù hợp với dự án của bạn là một khởi đầu tốt để làm cho nội dung của bạn trở nên dễ hiểu. Nhưng hãy nhớ rằng bên cạnh phông chữ, có những yếu tố khác ảnh hưởng đến mức độ dễ đọc của các văn bản của bạn. Bạn có thể chơi xung quanh với giao diện và cảm nhận của kiểu chữ web của bạn bằng cách điều chỉnh kích thước phông chữ, chiều cao dòng và màu sắc. Các văn bản của bạn càng dễ đọc, chúng càng dễ tiếp cận cho mọi người! Mở 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Hello, World Wide Web!
11This is my first website.
12
13About me
14
15I'm a Python programmer and a bug collector.
16
17Random facts
18
19I don't just like emoji,
20I love emoji!
21
22My most-used emoji are:
23 1. 🐞
24 2. 🐍
25 3. 👍
26
27Links
28
29My favorite websites are:
30 * realpython.com
31 * python.org
32 * pypi.org
33</body>
34</html>
1 trong trình duyệt của bạn và xem phông chữ nào hiển thị cho bạn:Bạn có thể sử dụng các công cụ phát triển trình duyệt của bạn để điều tra phông chữ nào đã được tải. Điều gì sẽ xảy ra nếu nó không Helvetica hay Arial? Hy vọng các ý kiến dưới đây và cho cộng đồng Python thực sự biết phông chữ nào của bạn tải!
Nếu bạn muốn có nhiều quyền kiểm soát hơn đối với phông chữ được hiển thị, thì bạn cần tải các phông chữ Web tùy chỉnh. Cách sử dụng @font-face trong CSS là một hướng dẫn tuyệt vời về việc triển khai các phông chữ Web tùy chỉnh trên trang web của bạn. Với CSS mà bạn đã thêm vào HTML của mình, bạn chỉ làm trầy xước bề mặt thiết kế trang web của mình. Có những cách gần như vô hạn để tạo kiểu cho nội dung của bạn với CSS. Nếu bạn muốn lặn sâu hơn, thì bạn có thể kiểm tra tài liệu tham khảo của Mozilla CSS. Tách biệt mối quan tâm của bạnBạn đã thêm mã CSS từ phần trước trực tiếp vào 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Hello, World Wide Web!
11This is my first website.
12
13About me
14
15I'm a Python programmer and a bug collector.
16
17Random facts
18
19I don't just like emoji,
20I love emoji!
21
22My most-used emoji are:
23 1. 🐞
24 2. 🐍
25 3. 👍
26
27Links
28
29My favorite websites are:
30 * realpython.com
31 * python.org
32 * pypi.org
33</body>
34</html>
1 với sự trợ giúp của phần tử 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
28. Nếu bạn muốn tạo kiểu <!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Am I HTML already?</title>
</head>
<body>
<nav>
<a href="emoji.html">Emoji</a>
<a href="images/gallery.html">Gallery</a>
</nav>
<!-- ... -->
7 theo cùng một cách, thì bạn sẽ cần sao chép và dán mã.Là một nhà phát triển Python, bạn biết rằng sao chép và dán mã không phải là ý tưởng tốt nhất. Bạn kết thúc với cùng một mã ở hai nơi, điều này làm cho việc cập nhật mã của bạn cồng kềnh. Trong mã Python của bạn, bạn có thể nhập các mô -đun để ngăn chặn việc lặp lại chính mình. HTML cung cấp chức năng tương tự để tải tài nguyên bên ngoài vào mã HTML của bạn. Điều này cho phép bạn tải một tệp CSS bên ngoài và tham khảo bảng kiểu này từ các tệp HTML của bạn.style sheet from your HTML files. Tạo một tệp mới có tên 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
58 bên cạnh 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Hello, World Wide Web!
11This is my first website.
12
13About me
14
15I'm a Python programmer and a bug collector.
16
17Random facts
18
19I don't just like emoji,
20I love emoji!
21
22My most-used emoji are:
23 1. 🐞
24 2. 🐍
25 3. 👍
26
27Links
28
29My favorite websites are:
30 * realpython.com
31 * python.org
32 * pypi.org
33</body>
34</html>
1 và <!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Am I HTML already?</title>
</head>
<body>
<nav>
<a href="emoji.html">Emoji</a>
<a href="images/gallery.html">Gallery</a>
</nav>
<!-- ... -->
7. Sau đó, cắt nội dung của 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
28 từ 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Hello, World Wide Web!
11This is my first website.
12
13About me
14
15I'm a Python programmer and a bug collector.
16
17Random facts
18
19I don't just like emoji,
20I love emoji!
21
22My most-used emoji are:
23 1. 🐞
24 2. 🐍
25 3. 👍
26
27Links
28
29My favorite websites are:
30 * realpython.com
31 * python.org
32 * pypi.org
33</body>
34</html>
1 và dán nó vào 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
58: 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
5Lưu ý rằng tệp CSS của bạn chỉ chứa các khai báo CSS. Trong một tệp CSS, bạn không cần thẻ 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
28 mà bạn đã sử dụng để bọc mã CSS của mình trong 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Hello, World Wide Web!
11This is my first website.
12
13About me
14
15I'm a Python programmer and a bug collector.
16
17Random facts
18
19I don't just like emoji,
20I love emoji!
21
22My most-used emoji are:
23 1. 🐞
24 2. 🐍
25 3. 👍
26
27Links
28
29My favorite websites are:
30 * realpython.com
31 * python.org
32 * pypi.org
33</body>
34</html>
1.Ngoài ra, hãy phát hiện cú pháp của các bình luận CSS trong dòng 1. Một dấu gạch chéo phía trước theo sau là dấu hoa thị ( 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
66) cho thấy sự bắt đầu của một bình luận. Bạn có thể phân phối nhận xét CSS trên nhiều dòng. Bạn đóng bình luận với một dấu hoa thị khác, sau đó là một chém về phía trước ( 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
67).CSS comments in line 1. A forward slash followed by an
asterisk ( 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
66) indicates the start of a comment. You can distribute a CSS comment over multiple lines. You close the comment with another asterisk followed by a forward slash ( 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
67).Bây giờ bạn có thể tham khảo 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
58 trong đầu tệp 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Hello, World Wide Web!
11This is my first website.
12
13About me
14
15I'm a Python programmer and a bug collector.
16
17Random facts
18
19I don't just like emoji,
20I love emoji!
21
22My most-used emoji are:
23 1. 🐞
24 2. 🐍
25 3. 👍
26
27Links
28
29My favorite websites are:
30 * realpython.com
31 * python.org
32 * pypi.org
33</body>
34</html>
1 của bạn: 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
6Phần tử 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
70 tương tự như thẻ neo (<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Am I HTML already?</title>
</head>
<body>
<nav>
<a href="emoji.html">Emoji</a>
<a href="images/gallery.html">Gallery</a>
</nav>
<!-- ... -->
5). Nó cũng chứa một thuộc tính <!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Am I HTML already?</title>
</head>
<body>
<nav>
<a href="emoji.html">Emoji</a>
<a href="images/gallery.html">Gallery</a>
</nav>
<!-- ... -->
6 xác định liên kết. Tuy nhiên, nó là một yếu tố trống chỉ chứa các thuộc tính và giành được một siêu liên kết có thể nhấp.Thêm liên kết 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
73 vào <!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Am I HTML already?</title>
</head>
<body>
<nav>
<a href="emoji.html">Emoji</a>
<a href="images/gallery.html">Gallery</a>
</nav>
<!-- ... -->
7: 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
7Để phản ánh những thay đổi trong 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
02, hãy thêm liên kết tương đối vào 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
58: 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
8Hãy nhớ rằng 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
58 là một thư mục trên 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
02, nằm trong thư mục 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
01 của bạn. Vì vậy, thay vì chỉ liên kết với 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
58, bạn phải liên kết đến 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
81.Khi bạn đã cập nhật các tài liệu tham khảo CSS, hãy xem các trang của bạn trong trình duyệt: Tất cả các trang của bạn có chung kiểu dáng. Khi bạn thay đổi mã CSS trong 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
58, bạn có thể thấy các thay đổi xuất hiện trên tất cả các trang.Là một nhà phát triển web Python, bạn có thể cần phải viết một chút HTML tốt trong các dự án web. Tuy nhiên, đối với CSS, nó khá phổ biến khi sử dụng các khung CSS bên ngoài để chăm sóc thiết kế của bạn.CSS
frameworks to take care of your design. Khung CSS cung cấp cho bạn mã CSS làm sẵn. Để sử dụng khung CSS để có toàn bộ lợi thế của mình, bạn có thể cần điều chỉnh mã HTML của mình để tuân thủ quy tắc của nó. Nhưng một khi bạn đã quen với khung CSS, nó có thể giúp bạn tiết kiệm công việc của các yếu tố HTML kiểu dáng rõ ràng trong thời gian dài. Một trong những khung CSS phổ biến nhất là Bootstrap. Bạn cũng sẽ bắt gặp Simple.css hoặc Bulma, bao gồm trong các hướng dẫn thực sự của Python về việc quản lý danh sách việc cần làm của bạn và tạo một ứng dụng Flashcards. Bạn có thể thêm các bảng kiểu CSS bên ngoài, không cục bộ giống như bảng kiểu địa phương của bạn với phần tử 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
70. Nếu bạn tham khảo nhiều hơn một bảng kiểu trên trang web của bạn, đặt hàng có vấn đề. Bạn sẽ điều tra hành vi này trong một khoảnh khắc.Đầu tiên, hãy tiếp tục và thêm một liên kết biểu định kiểu khác vào các trang HTML của bạn. Ở đây, mã ví dụ cho 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Hello, World Wide Web!
11This is my first website.
12
13About me
14
15I'm a Python programmer and a bug collector.
16
17Random facts
18
19I don't just like emoji,
20I love emoji!
21
22My most-used emoji are:
23 1. 🐞
24 2. 🐍
25 3. 👍
26
27Links
28
29My favorite websites are:
30 * realpython.com
31 * python.org
32 * pypi.org
33</body>
34</html>
1: 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
9Như C trong CSS ngụ ý, bạn cũng có thể xếp tầng theo phong cách. Khi bạn mở 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Hello, World Wide Web!
11This is my first website.
12
13About me
14
15I'm a Python programmer and a bug collector.
16
17Random facts
18
19I don't just like emoji,
20I love emoji!
21
22My most-used emoji are:
23 1. 🐞
24 2. 🐍
25 3. 👍
26
27Links
28
29My favorite websites are:
30 * realpython.com
31 * python.org
32 * pypi.org
33</body>
34</html>
1 trong trình duyệt của mình, bạn có thể thấy rằng thiết kế đã thay đổi:Bạn đã kết hợp các quy tắc phong cách của 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
58 địa phương của bạn và 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
87 bên ngoài. Chơi xung quanh với thứ tự của cách bạn tải các bảng kiểu bên ngoài. Khi bạn tải lại các trang của mình, bạn sẽ phát hiện ra rằng sự xuất hiện của trang web của bạn thay đổi.Tương tự như các biến ghi đè trong Python, các thuộc tính CSS ghi đè lên nhau. Nói chung, giá trị cuối cùng mà áp dụng cho một yếu tố chiến thắng. Trong phần này, bạn đã học được rằng bạn có thể sử dụng một bảng kiểu bên ngoài thay vì phần tử 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
28. Thậm chí còn có một cách thứ ba để thêm các quy tắc CSS vào HTML của bạn. Bạn có thể sử dụng thuộc tính 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
89 HTML cho các phần tử HTML kiểu. Điều này được gọi là kiểu CSS Inline.inline CSS styling.Rõ ràng hơn trong việc kết nối các khai báo CSS của bạn với các yếu tố HTML cụ thể có thể cung cấp cho bạn sự kiểm soát mà bạn cần để hoàn thiện thiết kế của mình. Trong phần tiếp theo, bạn sẽ học cách tạo kiểu các yếu tố linh hoạt hơn với các lớp CSS. Sử dụng các lớp để linh hoạt hơnCác quy tắc CSS mà bạn đã đặt cho đến nay chỉ nhắm mục tiêu các yếu tố HTML chung. Nhưng bạn có thể cụ thể hơn nhiều với mã CSS của mình khi đặt quy tắc cho các thuộc tính HTML. Thêm thuộc tính 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
90 vào phần tử HTML cho phép bạn sử dụng các bộ chọn lớp CSS vào các phần tử kiểu dựa trên các giá trị lớp của chúng.CSS class selectors to style elements based on their class values.Một đặc điểm thiết yếu của các lớp CSS là chúng cho phép bạn nhóm các yếu tố chung và áp dụng một bộ quy tắc cho tất cả chúng trong một lần, và sau đó có khả năng cập nhật chúng trong khi vẫn giữ phong cách nhất quán. Ví dụ: bạn có thể xác định một lớp áp dụng góc tròn cho hình ảnh. Nhưng thay vì nhắm mục tiêu tất cả các yếu tố hình ảnh bằng cách sử dụng tên 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
91, bạn có thể gán một lớp chỉ cho những hình ảnh nên có các góc tròn. Điều này cung cấp cho bạn lợi thế bổ sung là có thể thêm các góc tròn vào các yếu tố khác bằng cách cung cấp cho họ cùng một lớp.Để tìm hiểu cách các bộ chọn lớp CSS hoạt động, hãy điều chỉnh mã trong 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
02 để có vẻ như thế này: 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
0Đầu tiên, hãy nhớ thêm một liên kết đến các bảng phong cách bên ngoài của bạn. Don Tiết quên dành hai dấu chấm để liên kết đến 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
81 vì bảng kiểu là một thư mục trên 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
02.Sau đó, bạn sẽ gói các yếu tố 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
15 trong một khối 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
96. Phần tử 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
96 là một yếu tố chung để cấu trúc trang của bạn. Nó không chứa bất kỳ ý nghĩa ngữ nghĩa nào và bạn chỉ nên sử dụng nó khi không có thẻ HTML nào khác phù hợp hơn để sử dụng.Bạn cũng thêm các thuộc tính 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
90 vào các phần tử HTML của bạn. Trong dòng 14, bạn thậm chí còn chuỗi các lớp trong một danh sách phân tách không gian. Điều này có nghĩa là bạn áp dụng hai lớp CSS cho phần tử 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
96. Ngược lại, các phần tử 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
15 trong các dòng 15 đến 17 chỉ chứa một lớp CSS.Để tạo các lớp, hãy đến 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
58 và thêm mã CSS này: 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
1Bạn đề cập đến các lớp CSS trong thuộc tính HTML 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
90 mà không có dấu chấm ( 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
26). Tuy nhiên, trong mã CSS của bạn, bạn phải thêm một dấu chấm ở đầu bộ chọn để chỉ định rằng bạn đang nhắm mục tiêu các thuộc tính 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
90. Nếu bạn muốn đọc thêm về các bộ chọn CSS, thì hãy truy cập tài liệu của Mozilla CS CSS.Trong các dòng 6 và 7, bạn đặt các quy tắc cho 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
05, giống như nền trong suốt một phần và phần đệm 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
06 để thêm không gian vào tất cả các mặt bên trong phần tử phòng trưng bày.Với bộ chọn 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
07, bạn cung cấp cho tất cả các phần tử HTML chứa lớp này một góc tròn với bán kính mười lăm pixel.Bạn thậm chí có thể chuỗi các bộ chọn CSS của mình như bạn làm trong dòng 14. Với danh sách bộ chọn được phân tách không gian 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
08, bạn đã thêm một quy tắc cho tất cả các phần tử 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
91 bên trong phần tử HTML với lớp 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
10. Với các khai báo CSS của bạn trong các dòng 15 và 16, bạn cung cấp cho họ một khoảng trống ở phía bên phải với 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
11 và làm cho hình ảnh phòng trưng bày rộng 150 pixel.Với các thuộc tính 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
12, 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
13 và 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
14, bạn xác định khoảng cách của các yếu tố CSS. Bạn có thể nghĩ về các yếu tố này như các hộp có một không gian nhất định xung quanh chúng và không gian bên trong chúng nơi lưu trữ nội dung. Khái niệm này được gọi là mô hình hộp:box model:Tất cả mọi thứ trong CSS đều có một hộp xung quanh nó và hiểu các hộp này là chìa khóa để có thể tạo ra các bố cục phức tạp hơn với CSS hoặc căn chỉnh các mục với các mục khác. (Nguồn)
Nếu bạn muốn đi sâu hơn vào CSS, thì hãy tìm hiểu về mô hình hộp là chìa khóa. Bạn có thể theo dõi Mozilla, Học cách tạo kiểu HTML bằng cách sử dụng hướng dẫn CSS để hiểu rõ hơn về tất cả các khối xây dựng mà CSS chứa. Bạn có thể cất cánh từ đây và khám phá thế giới đánh dấu và thiết kế mà HTML và CSS cung cấp. Nhưng đặc biệt là với HTML, bạn sẽ sớm nhận thấy rằng đó là một ngôn ngữ rất dài dòng và có thể rất cồng kềnh khi viết nó bằng tay. Đó là nơi mà bạn có thể để các kỹ năng của mình như một nhà phát triển Python tỏa sáng. Trong phần tiếp theo, bạn sẽ tìm hiểu làm thế nào Python có thể giúp bạn làm việc với các tệp HTML hiệu quả hơn. Xử lý HTML với PythonLà một nhà phát triển Python, bạn biết rằng Python có thể là một công cụ tuyệt vời để tự động hóa các nhiệm vụ mà bạn có thể cần phải làm bằng tay. Đặc biệt là khi làm việc với các tệp HTML lớn, sức mạnh của Python có thể giúp bạn tiết kiệm một số công việc. Lập trình viết htmlVới tất cả các thẻ mở và đóng, HTML có thể cồng kềnh để viết. May mắn thay, Python là hoàn hảo để giúp bạn lập trình tạo các tệp HTML lớn. Trong phần này, bạn sẽ mở rộng <!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Am I HTML already?</title>
</head>
<body>
<nav>
<a href="emoji.html">Emoji</a>
<a href="images/gallery.html">Gallery</a>
</nav>
<!-- ... -->
7 để hiển thị thêm thông tin về biểu tượng cảm xúc yêu thích của bạn. Thay thế danh sách đã đặt hàng bằng một bảng: 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
2Bạn xác định một bảng HTML với phần tử 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
16 và các hàng bảng với 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
17. Giống như một cái bàn trong bảng tính, các bảng HTML có thể có đầu bàn và thân bàn. Mặc dù sử dụng 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
18 và 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
19 là bắt buộc đối với một bảng hoạt động, nhưng đó là một thực tế tốt để thêm chúng vào đánh dấu bảng của bạn.Trong đầu bảng của bạn, bạn xác định ba cột bảng bằng cách thêm ba phần tử 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
20 vào hàng đầu tiên.Cơ thể bảng chứa cùng một số cột và một hoặc nhiều hàng. Đối với các ô dữ liệu bảng, bạn sử dụng cùng một phần tử 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
21 như bạn làm trong tiêu đề bảng.Bảng biểu tượng cảm xúc liệt kê ba biểu tượng cảm xúc yêu thích của bạn với các mô tả Unicode của họ. Tất nhiên, không ai chỉ có ba biểu tượng cảm xúc yêu thích! Ngay cả với một số vừa phải như mười hai biểu tượng cảm xúc yêu thích, nó cũng khó chịu khi tạo ra bảng HTML bằng tay. Vì vậy, bạn thêm Python vào hỗn hợp! Tạo một tệp Python mới có tên 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
22 trong thư mục dự án của bạn và để Python thực hiện công việc cho bạn: 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
3Với sự trợ giúp của mô-đun 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
23 tích hợp và 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
24, Python có thể lập trình một bảng biểu tượng cảm xúc cho bạn.Chạy 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
22 trong thiết bị đầu cuối của bạn, sao chép mã HTML và dán nó vào <!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Am I HTML already?</title>
</head>
<body>
<nav>
<a href="emoji.html">Emoji</a>
<a href="images/gallery.html">Gallery</a>
</nav>
<!-- ... -->
7: 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
4Với 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
22, giờ đây bạn có thể mở rộng bảng biểu tượng cảm xúc HTML của mình để bao gồm tất cả các biểu tượng cảm xúc yêu thích của bạn.Nếu bạn muốn làm cho bảng của bạn trông tốt hơn một chút, thì bạn có thể thêm kiểu dáng bổ sung với lớp giả 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
28 trong 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
58: 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
5Các bảng HTML là một cách tuyệt vời để cấu trúc dữ liệu bảng trên trang web của bạn. Bạn có thể xem tài liệu Mozilla, về các bảng HTML và bảng kiểu dáng để tìm hiểu thêm về việc làm việc với các bảng trong HTML. Mặc dù 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
22 giúp bạn xây dựng các bảng lớn hơn, nhưng nó vẫn là một quá trình phức tạp. Hiện tại, bạn cần sao chép đầu ra đầu ra vào tệp HTML của mình. Đó không phải là lý tưởng.Nhưng bây giờ, thời gian để khám phá những cách khác mà Python có thể giúp bạn với mã HTML của bạn. Tạo các thực thể HTML với PythonHTML đi kèm với một danh sách lớn các tài liệu tham khảo ký tự được đặt tên mà bạn có thể sử dụng để mã hóa các văn bản của mình trong HTML. Vì vậy, ví dụ, bạn có thể viết dấu hiệu tiền tệ Euro là thực thể HTML 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
31 thay vì ký tự UTF-8 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
32.HTML entity 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
31 instead of the
UTF-8 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
32 character.Trong quá khứ, các ký tự mã hóa như thế này rất quan trọng vì không có cách nào để gõ chúng trực tiếp. Với sự ra đời của mã hóa ký tự UTF-8, thay vào đó, bạn có thể sử dụng ký tự UTF-8 thực tế. Hầu hết thời gian, điều đó thậm chí còn được đề xuất bởi vì nó dễ đọc hơn. Tuy nhiên, có những tình huống mã hóa HTML là sự lựa chọn tốt hơn. Theo nguyên tắc thông thường, bạn sử dụng các thực thể HTML khi ký tự: - Không thể phân biệt được về mặt trực quan
- Can thiệp vào cú pháp HTML
Lấy các ký tự khoảng trắng, ví dụ. Có hai mươi lăm ký tự khoảng trắng được liệt kê trong cơ sở dữ liệu ký tự Unicode. Một số trong số chúng trông giống hệt nhau, như không gian thông thường ( 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
33) và không gian không phá vỡ ( 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
34). Trực quan, các không gian không thể phân biệt được. Nhưng khi bạn có một cái nhìn vào mã nguồn của trang này, bạn sẽ thấy rằng cái sau được thoát ra như là thực thể HTML của nó, 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
35:Nếu bạn muốn hiển thị thẻ HTML trên tài liệu HTML, bạn cũng cần thoát các ký tự như khung góc mở ( <!-- index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Am I HTML already?</title>
</head>
<body>
<nav>
<a href="emoji.html">Emoji</a>
</nav>
<!-- ... -->
</body>
</html>
0) và khung góc đóng (<!-- index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Am I HTML already?</title>
</head>
<body>
<nav>
<a href="emoji.html">Emoji</a>
</nav>
<!-- ... -->
</body>
</html>
1). Một lần nữa, hãy xem mã nguồn của hướng dẫn này và lưu ý cách thoát khỏi khung góc:Các giá đỡ góc mở được thoát ra là 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
38. Đóng khung góc được thoát ra như 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
39.Để xem danh sách đầy đủ các thực thể HTML, bạn có thể tận dụng mô-đun 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
40 tích hợp của Python:>>> 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
6Mô -đun 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
41 của 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
40 xác định bốn từ điển. Một trong số đó là 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
43, ánh xạ các tham chiếu ký tự có tên HTML cho các đối tác ký tự Unicode của họ.Với 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
44, bạn có thể tìm thấy tên thực thể HTML của một ký tự:>>> 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
7Mô -đun 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
41 của 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
40 xác định bốn từ điển. Một trong số đó là 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
43, ánh xạ các tham chiếu ký tự có tên HTML cho các đối tác ký tự Unicode của họ.Với 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
44, bạn có thể tìm thấy tên thực thể HTML của một ký tự:Codepoint của đồng euro ( 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
32) là 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
46. Đối với 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
46 Từ điển 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
48 trả về 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
49. Để sử dụng tên trong mã HTML của bạn, bạn phải đặt một ampersand ( 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
50) trước tên và dấu chấm phẩy ( 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
40) sau tên để lấy thực thể HTML 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
31 hợp lệ.Thay vì ghi nhớ và viết các thực thể HTML, bạn có thể để Python giúp bạn. Mô -đun Python sườn 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
40 cũng đi kèm với một trình phân tích cú pháp mà tiện dụng khi bạn muốn mổ xẻ các tài liệu HTML.parser using 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
55. The script you’ll write will refer to
the 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
02 file that you created earlier in this tutorial. You can either revisit that part of the tutorial or download all the files by clicking the link below:Bên cạnh 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
02, hãy tạo một tệp Python mới có tên 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
58: 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
8Khi bạn cung cấp một thể hiện của Python từ 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
59 bằng dữ liệu HTML, trường hợp gọi các phương thức xử lý của nó nếu tìm thấy các phần tử đánh dấu. Trong ví dụ trên, bạn tạo một lớp con của 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
59 để tìm kiếm bất kỳ phần tử 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
15 nào với thuộc tính 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
16 trong mã của 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
02.subclass of 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
59 to look for any 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
15 elements with an 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
16 attribute in the code of 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
02.Đối với tệp 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9</html>
02, đầu ra trông như thế này: 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
9Đối với tệp địa phương của bạn, mà bạn chỉ có thể tìm kiếm trong trình soạn thảo của mình, đây có thể không phải là vấn đề lớn. Nhưng hãy tưởng tượng các khả năng nếu bạn điều chỉnh tập lệnh ở trên để đọc mã từ bất kỳ URL nào! Nếu mô -đun Python sườn 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
40 đã thu hút sự quan tâm của bạn, thì việc đọc một phần giới thiệu thực tế về việc quét web trong Python là một bước tiếp theo tốt. Đối với một cách tiếp cận thực hành hơn, bạn cũng có thể xây dựng một cạp web với súp đẹp.Trước khi bạn phân tích, hãy xem một số bước tiếp theo khác trong phần cuối của hướng dẫn này. Tiếp tục với HTML và CSS trong PythonBạn có thể hoàn thành khá nhiều với HTML và CSS cơ bản. Làm việc với HTML và CSS có thể trở nên thú vị hơn khi bạn đưa ngôn ngữ lập trình như Python vào hỗn hợp. Trong phần này, bạn sẽ nhận được một cái nhìn tổng quan về các công nghệ mà bạn có thể khám phá để tận dụng kiến thức của bạn về HTML và CSS. JavaScriptNhư bạn đã học trong hướng dẫn này, HTML cung cấp cấu trúc của một trang web. Với CSS, bạn thêm định dạng và bố cục. Đó là một cơ sở tuyệt vời để tạo trang web. Tuy nhiên, không có lời giới thiệu nào về HTML và CSS sẽ được hoàn thành mà không đề cập đến JavaScript. JavaScript là một ngôn ngữ lập trình được giải thích mà rất quan trọng đối với các trang web hiện đại.JavaScript. JavaScript is an
interpreted programming language that’s crucial for modern websites. Với JavaScript, bạn có thể thêm chức năng vào các dự án web của mình. Ví dụ: bạn có thể tự động cập nhật HTML và CSS khi người dùng tương tác với trang web của bạn. Học JavaScript là một lựa chọn tốt cho bất kỳ lập trình viên nào muốn tham gia phát triển web. Để đi sâu hơn vào JavaScript, hãy đến khu vực học tập của Mozilla, cho JavaScript. Nếu bạn muốn khám phá JavaScript từ quan điểm của lập trình viên Python, thì hãy xem Python vs JavaScript cho Pythonistas. JinjaTrong hướng dẫn này, bạn đã lưu trữ đánh dấu HTML trong các chuỗi Python để tạo mã HTML một cách linh hoạt. Khi dự án web của bạn phát triển, thì sự pha trộn của HTML và Python có thể phát triển phức tạp. Để phân tách mối quan tâm, đó là một ý tưởng tốt để làm việc với các mẫu. Với các mẫu, bạn có thể tạo các khối xây dựng cho các trang web lớn hơn mà không cần sao chép mã mặt trước của bạn. Bằng cách đó, bạn có thể giữ đánh dấu HTML của mình trong các tệp mẫu và điền chúng bằng Python. Động cơ mẫu cho Python là Jinja.templates. With templates, you can create building blocks for larger websites without duplicating your front-end code. That way, you can keep your HTML markup in template files and fill
them with Python. The go-to template engine for Python is Jinja. Với Python và Jinja, bạn có thể tự động tạo mã HTML. Nhưng bạn không phải dừng lại ở đó. Bất cứ khi nào bạn muốn tạo các tệp văn bản với nội dung lập trình, Jinja có thể giúp bạn ra ngoài. Nếu bạn muốn học cách xây dựng các mẫu phong phú với Jinja, thì hãy xem Primer Python thực sự trên khuôn mẫu Jinja. Bình giữ nhiệtVới kiến thức cơ bản về HTML và CSS, bạn đã được trang bị tốt để xây dựng các ứng dụng web thực sự đầu tiên của mình. HTML và CSS chăm sóc mặt trước mà người dùng đang tương tác. Để tải nội dung từ máy chủ, bạn cần một số loại ngược. Đó là nơi mà các khung web phát huy tác dụng. Flask là một khung web Python phổ biến mà tuyệt vời để xây dựng các ứng dụng web từ đầu. Sau khi bạn cài đặt gói 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
66 với 1<!-- index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6 <meta charset="utf-8">
7 <title>Am I HTML already?</title>
8</head>
9<body>
10Yes,<br>I am!
11</body>
12</html>
67, sau đó bạn bắt đầu một dự án bình bằng cách tạo một tệp Python chỉ với một vài dòng mã. Nói cách khác, bạn bắt đầu nhỏ và nâng cao dự án của bạn từng bước theo tốc độ của riêng bạn.Bạn có thể đi theo bình bằng đường dẫn học tập ví dụ để khám phá những điều cơ bản của sự phát triển web Python với bộ vi lỏng bình. DjangoDjango là một khung web Python phổ biến khác. So với Flask, Django cung cấp cho bạn một cấu trúc dự án khi bạn bắt đầu một dự án Django mới. Không cần thêm nhiều mã, bạn có thể làm việc với đầu quản trị viên và cơ sở dữ liệu ngay lập tức. Sức mạnh của Django có thể cung cấp cho bạn một khởi đầu cho các dự án web lớn hơn, nhưng việc điều hướng tất cả các tệp có thể áp đảo cho người mới bắt đầu. May mắn thay, bạn có thể tìm thấy rất nhiều hướng dẫn của Django trên Python thực sự để hướng dẫn bạn. Bạn có thể bắt đầu với Django bằng cách xây dựng một ứng dụng danh mục đầu tư hoặc bằng cách xây dựng một ứng dụng web nhật ký cá nhân. Nếu bạn muốn xây dựng một dự án lớn hơn, thì loạt mạng xã hội Django là hoàn hảo cho bạn. PyscriptPyscript là một khung mới cho phép bạn chạy Python trong trình duyệt web. Nhưng don lồng nhầm lẫn nó với các khung web như Flask hoặc Django: Pyscript chỉ là HTML, chỉ một chút (không sao, có thể mạnh mẽ hơn rất nhiều), nhờ hệ sinh thái phong phú và dễ tiếp cận của các thư viện Python. (Nguồn)
Nếu bạn hấp dẫn, thì hãy xem đầu tiên về Pyscript: Python trong trình duyệt web là đọc. Sự kết luậnBất kể con đường nào để trở thành một nhà phát triển web Python bạn chọn, thì không có cách nào xung quanh HTML và CSS.Cả hai công nghệ là các khối xây dựng cơ bản khi bạn muốn tạo các trang web. Trong suốt hướng dẫn này, bạn đã xây dựng một tài liệu HTML Boilerplate để cung cấp cho bạn một khởi đầu trong các dự án web sắp tới của bạn. Trên đường đi, bạn đã học được cách: - Cấu trúc một tệp html cơ bảnHTML file
- Hiển thị hình ảnh và liên kết đến các trangimages and link to pages
- Kiểu một trang web với CSSCSS
- Định dạng HTML có khả năng truy cập trong tâm tríaccessibility in mind
- Sử dụng Python để viết và phân tích mã HTMLwrite and parse HTML code
Python, HTML và CSS là một bộ ba mạnh mẽ cho phép bạn tạo các tài liệu HTML nhỏ và các dự án web lớn.Nhưng ngay cả khi bạn không nhắm đến sự nghiệp như một nhà phát triển web, việc biết một hoặc hai điều về HTML và CSS sẽ giúp bạn hiểu rõ hơn về web. |
