search

Làm cách nào để kết nối python với html?

Ngày đăng: 06/02/2023
Trả lời: 0
Lượt xem: 140
Tôi là nhà nghiên cứu và phát triển web tự do đến từ Malawi. Tôi thích học những điều mới và việc viết lách giúp tôi hiểu và củng cố các khái niệm. Tôi hy vọng bằng cách chia sẻ kinh nghiệm của mình, những người khác có thể học được điều gì đó từ họ

Dự án PyScript mới cho phép bạn nhúng trực tiếp các chương trình Python vào các trang HTML và thực thi chúng trong trình duyệt mà không cần bất kỳ yêu cầu dựa trên máy chủ nào

Show

Dự án đã được công bố vào cuối tuần này tại PyCon US 2022 và hoạt động như một trình bao bọc xung quanh dự án Pyodide, tải trình thông dịch CPython dưới dạng mô-đun trình duyệt WebAssembly

"PyScript là một khung cho phép người dùng tạo các ứng dụng Python phong phú trong trình duyệt bằng cách sử dụng kết hợp Python với HTML tiêu chuẩn. " Anaconda giải thích trong một bài đăng gần đây trên blog

"PyScript nhằm mục đích cung cấp cho người dùng ngôn ngữ lập trình hạng nhất có quy tắc tạo kiểu nhất quán, biểu cảm hơn và dễ học hơn. "

Mặc dù dự án Pyodide trước đây cho phép bạn chạy Python trong trình duyệt, nhưng phải mất một thời gian để làm quen với cú pháp và không thanh lịch bằng việc chỉ viết một chương trình Python và dán nó vào trang HTML của bạn

Tuy nhiên, PyScript hoạt động như một trình bao bọc, cho phép bạn nhúng trực tiếp mã Python vào giữa các thẻ py-script và để mã này tự động thực thi bởi Pyodide

Ví dụ: phần sau đây minh họa một ví dụ Hello World nhỏ sử dụng PyScript và việc thực thi nó trực tiếp trong trình duyệt. Lưu ý cách hàm pyscript.write() cho phép bạn xuất dữ liệu trực tiếp sang phần tử HTML

Làm cách nào để kết nối python với html?
Ứng dụng Python Hello World Python sử dụng PyScript

Nhà phát triển cũng có thể mở rộng các trang PyScript thông qua các gói Python bổ sung được tích hợp trong Pyodide hoặc thông qua các gói được lưu trữ trên hệ thống tệp cục bộ. PyScript BẮT ĐẦU. md cung cấp tài liệu về cách nhập các gói vào mã của bạn

Ngoài việc thực thi mã được nhúng trong HTML, bạn cũng có thể thêm trình chỉnh sửa mã trực tiếp vào trang HTML bằng cách sử dụng thẻ py-repl để bạn có thể nhập mã và thực thi mã, như minh họa bên dưới

Làm cách nào để kết nối python với html?
Sử dụng trình chỉnh sửa của PyScript

Sử dụng trình chỉnh sửa giúp dễ dàng kiểm tra mã một cách nhanh chóng và xem những gì sẽ và không hoạt động với PyScript

Mặc dù JavaScript đã có thể thực hiện hầu hết mọi thứ bạn muốn tạo bằng PyScript, với Python được coi là ngôn ngữ lập trình phổ biến nhất, PyScript mở ra cơ hội cho nhiều dự án thú vị trong tương lai

Để bắt đầu với PyScript, bạn có thể truy cập trang dự án GitHub của họ, trang này cũng bao gồm nhiều ví dụ về mã

Khi bạn muốn xây dựng trang web với tư cách là một lập trình viên Python, không có cách nào khác ngoài HTML và CSS. Hầu hết mọi trang web trên Internet đều được xây dựng bằng mã HTML để cấu trúc trang. Để làm cho trang web trông đẹp mắt, bạn có thể tạo kiểu HTML bằng 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 rõ hơn về các khung web như Django và Flask. Nhưng ngay cả khi bạn mới bắt đầu với Python, HTML và CSS có thể cho phép bạn tạo các trang web nhỏ để gây ấn tượng với bạn bè của mình

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ản
  • Xem và kiểm tra HTML trong trình duyệt của bạn
  • Chèn hình ảnh và liên kết trang
  • Tạo kiểu trang web bằng CSS
  • Định dạng HTML có tính đến khả năng truy cập
  • Sử dụng Python để viết và phân tích mã HTML

Bạn sẽ nhận được phần giới thiệu về HTML và CSS mà bạn có thể làm theo cùng với. Xuyên 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 một tài liệu HTML soạn sẵn 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ẽ hữu ích khi bạn làm việc với các dự án trong tương lai. Bạn có thể tải về tại đây

Tiền thưởng miễn phí. Nhấp vào đây để tải xuống các tài liệu bổ sung cho hướng dẫn này, bao gồm tệp mẫu HTML tiết kiệm thời gian

Sau khi tìm hiểu kiến ​​thức cơ bản về HTML và CSS, bạn sẽ tìm thấy các ý 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ạn

Hã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ể đó là loại trang web nào, bạn có thể đặt cược rằng mã nguồn của nó có thẻ 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 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
33body>
34html>
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 ra bởi Tim Berners-Lee, cái tên của ông cũng có thể rung chuông cho bạn với tư cách là người phát minh ra World Wide Web

Phần siêu văn bản của HTML đề cập đến việc xây dựng 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ể chuyển giữa các trang và lướt Web

Bạn sử dụng đánh dấu để cấu trúc nội dung trong tài liệu. Ngược lại 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 phần tử HTML và vai trò của chúng

Viết mã HTML ngữ nghĩa sẽ làm cho tài liệu của bạn có thể truy cập được đối với nhiều khách truy cập. Rốt cuộc, bạn muốn cho phép mọi người sử dụng nội dung của bạn, cho dù họ đang truy cập trang của bạn bằng trình duyệt hay sử dụng các công cụ đọc màn hình

Đố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 Công tác Công nghệ Ứng dụng Siêu văn bản Web (WHATWG). WHATWG đóng vai trò tương tự đối với HTML như Hội đồng chỉ đạo Python đóng vai trò đối với Python

Khoảng 95 phần trăm trang web sử dụng HTML, vì vậy bạn sẽ khó tránh khỏi nó nếu muốn thực hiện bất kỳ công việc phát triển web nào bằng 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ẽ tìm hiểu cách cấu trúc mã HTML của mình để trình duyệt và con người có thể đọc được mã đó

Loại bỏ các quảng cáo

Tài liệu HTML

Trong 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ằng

Để bắt đầu, hãy tạo một tệp có tên 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 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
33body>
34html>
1 với một số văn bản

 1
 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
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 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
33body>
34html>
1. Bạn có thể coi trang 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 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
33body>
34html>
1 giống như tệp 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 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
33body>
34html>
4 hoặc 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 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
33body>
34html>
5 trong một dự án Python

Ghi chú. Trừ khi máy chủ của bạn được định cấu hình khác, 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 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
33body>
34html>
1 là tệp mà máy chủ cố tải khi bạn truy cập URL gốc. Đó là lý do tại sao bạn có thể truy cập https. //www. ví dụ. com/ thay vì gõ đầy đủ https. //www. ví dụ. com/chỉ mục. địa chỉ html

Cho đến nay, nội dung duy nhất của 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 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
33body>
34html>
1 là một chuỗi 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 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
33body>
34html>
8 đơn giản. Bạn chưa 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 thi nhận xét trong mã Python của bạn, trình duyệt sẽ không hiển thị nội dung nhận xét HTML của bạn. Tuy nhiên, hãy tiếp tục và mở 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 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
33body>
34html>
1 trong trình duyệt của bạn

Làm cách nào để kết nối python với html?

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 gợi ý duy nhất của nó là phần mở rộng. Điều đó thật tốt khi biết, nhưng hành vi này cũng có mặt trái

Các trình duyệt sẽ luôn cố gắng hiển thị 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ẽ hiển thị cho bạn một cái gì đó giống như Lỗi cú pháp, tương tự như những gì Python làm khi bạn cố 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 gửi 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

Ghi chú. Nếu bạn muốn xác thực mã HTML mà bạn viết, thì bạn có thể tải tệp HTML của mình lên Dịch vụ xác thực đánh dấu W3C. Điều này phân tích mã của bạn và chỉ ra lỗi

Cập nhật 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 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
33body>
34html>
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
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>

Mã này là tài liệu HTML hợp lệ tối thiểu nhất mà bạn có thể sử dụng. Nói một cách chính xác, bạn thậm chí có thể bỏ thuộc tính 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10<h1>Hello, World Wide Web!h1>
11<p>This is my first website.p>
12
13<h2>About meh2>
14<p>I'm a Python programmer and a bug collector.p>
15
16<h3>Random factsh3>
17<p>I don't just <em>likeem> emoji,<br>
18I <strong>lovestrong> emoji!p>
19<p>My most-used emoji are:p>
20<ol>
21    <li>🐞li>
22    <li>🐍li>
23    <li>👍li>
24ol>
25
26<h2>Linksh2>
27<p>My favorite websites are:p>
28<ul>
29    <li>realpython.comli>
30    <li>python.orgli>
31    <li>pypi.orgli>
32ul>
33body>
34html>
1 ở dòng 4. Nhưng nên thêm thẻ phụ ngôn ngữ phù hợp để khai báo ngôn ngữ tự nhiên mà tài liệu của bạn chứa

Ghi chú. Trong hướng dẫn này, bạn sẽ gắn bó với tiếng Anh và sử dụng thẻ ngôn ngữ 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10<h1>Hello, World Wide Web!h1>
11<p>This is my first website.p>
12
13<h2>About meh2>
14<p>I'm a Python programmer and a bug collector.p>
15
16<h3>Random factsh3>
17<p>I don't just <em>likeem> emoji,<br>
18I <strong>lovestrong> emoji!p>
19<p>My most-used emoji are:p>
20<ol>
21    <li>🐞li>
22    <li>🐍li>
23    <li>👍li>
24ol>
25
26<h2>Linksh2>
27<p>My favorite websites are:p>
28<ul>
29    <li>realpython.comli>
30    <li>python.orgli>
31    <li>pypi.orgli>
32ul>
33body>
34html>
2. Bạn có thể truy cập sổ đăng ký thẻ phụ ngôn ngữ chính thức để tìm tất cả các thẻ ngôn ngữ khác

Thuộc tính ngôn ngữ giúp các công cụ dịch thuật làm việc với trang web của bạn dễ dàng hơn và sẽ giúp trang web của bạn dễ truy cập hơn. Trình đọc màn hình đặc biệt phụ thuộc rất nhiều vào khai báo ngôn ngữ của tài liệu HTML để chọn chế độ ngôn ngữ phù hợp để tổng hợp nội dung

Về gốc, bất kỳ tài liệu HTML nào mà bạn xây dựng đều có thể 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
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 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
33body>
34html>
1 và thêm 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10<h1>Hello, World Wide Web!h1>
11<p>This is my first website.p>
12
13<h2>About meh2>
14<p>I'm a Python programmer and a bug collector.p>
15
16<h3>Random factsh3>
17<p>I don't just <em>likeem> emoji,<br>
18I <strong>lovestrong> emoji!p>
19<p>My most-used emoji are:p>
20<ol>
21    <li>🐞li>
22    <li>🐍li>
23    <li>👍li>
24ol>
25
26<h2>Linksh2>
27<p>My favorite websites are:p>
28<ul>
29    <li>realpython.comli>
30    <li>python.orgli>
31    <li>pypi.orgli>
32ul>
33body>
34html>
4 bên dưới 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10<h1>Hello, World Wide Web!h1>
11<p>This is my first website.p>
12
13<h2>About meh2>
14<p>I'm a Python programmer and a bug collector.p>
15
16<h3>Random factsh3>
17<p>I don't just <em>likeem> emoji,<br>
18I <strong>lovestrong> emoji!p>
19<p>My most-used emoji are:p>
20<ol>
21    <li>🐞li>
22    <li>🐍li>
23    <li>👍li>
24ol>
25
26<h2>Linksh2>
27<p>My favorite websites are:p>
28<ul>
29    <li>realpython.comli>
30    <li>python.orgli>
31    <li>pypi.orgli>
32ul>
33body>
34html>
5

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>

Mọi tệp HTML hợp lệ phải bắt đầu bằng khai báo doctype. Trong hướng dẫn này, bạn sẽ sử dụng 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10<h1>Hello, World Wide Web!h1>
11<p>This is my first website.p>
12
13<h2>About meh2>
14<p>I'm a Python programmer and a bug collector.p>
15
16<h3>Random factsh3>
17<p>I don't just <em>likeem> emoji,<br>
18I <strong>lovestrong> emoji!p>
19<p>My most-used emoji are:p>
20<ol>
21    <li>🐞li>
22    <li>🐍li>
23    <li>👍li>
24ol>
25
26<h2>Linksh2>
27<p>My favorite websites are:p>
28<ul>
29    <li>realpython.comli>
30    <li>python.orgli>
31    <li>pypi.orgli>
32ul>
33body>
34html>
6, cho trình duyệt biế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

Nếu một trình duyệt tìm thấy một loại tài liệu lỗi thời, không đầy đủ hoặc bị thiếu ở đầu trang, thì họ sẽ sử dụng “chế độ quirks”, chế độ này tương thích ngược hơn với các phương pháp cũ và trình duyệt cũ. (Nguồn)

Sau khi khai báo doctype, bạn có một thẻ mở 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 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
33body>
34html>
0. Ở dòng 12, bạn có thể tìm thấy thẻ đóng tương ứng 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10<h1>Hello, World Wide Web!h1>
11<p>This is my first website.p>
12
13<h2>About meh2>
14<p>I'm a Python programmer and a bug collector.p>
15
16<h3>Random factsh3>
17<p>I don't just <em>likeem> emoji,<br>
18I <strong>lovestrong> emoji!p>
19<p>My most-used emoji are:p>
20<ol>
21    <li>🐞li>
22    <li>🐍li>
23    <li>👍li>
24ol>
25
26<h2>Linksh2>
27<p>My favorite websites are:p>
28<ul>
29    <li>realpython.comli>
30    <li>python.orgli>
31    <li>pypi.orgli>
32ul>
33body>
34html>
8. Hầu hết các phần 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
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10<h1>Hello, World Wide Web!h1>
11<p>This is my first website.p>
12
13<h2>About meh2>
14<p>I'm a Python programmer and a bug collector.p>
15
16<h3>Random factsh3>
17<p>I don't just <em>likeem> emoji,<br>
18I <strong>lovestrong> emoji!p>
19<p>My most-used emoji are:p>
20<ol>
21    <li>🐞li>
22    <li>🐍li>
23    <li>👍li>
24ol>
25
26<h2>Linksh2>
27<p>My favorite websites are:p>
28<ul>
29    <li>realpython.comli>
30    <li>python.orgli>
31    <li>pypi.orgli>
32ul>
33body>
34html>
9 ở dòng 7

Các phần tử khác, như 




<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Am I HTML already?title>
head>
<body>
<nav>
    <a href="emoji.html">Emojia>
nav>

body>
html>
0 ở dòng 6, khô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 phần tử rỗng này được gọi là. 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à 



<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Am I HTML already?title>
head>
<body>
<nav>
    <a href="emoji.html">Emojia>
nav>

body>
html>
1 ở dòng 10, tạo ngắt dòng

Các thẻ HTML bắt đầu bằng dấu ngoặc nhọn (_______23_______2) và kết thúc bằng dấu ngoặc nhọn (




<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Am I HTML already?title>
head>
<body>
<nav>
    <a href="emoji.html">Emojia>
nav>

body>
html>
3). Các tên thẻ ở giữa các dấu ngoặc nhọn thường mang tính mô tả và nêu rõ ý nghĩa của phần tử HTML. Một ví dụ điển hình là 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10<h1>Hello, World Wide Web!h1>
11<p>This is my first website.p>
12
13<h2>About meh2>
14<p>I'm a Python programmer and a bug collector.p>
15
16<h3>Random factsh3>
17<p>I don't just <em>likeem> emoji,<br>
18I <strong>lovestrong> emoji!p>
19<p>My most-used emoji are:p>
20<ol>
21    <li>🐞li>
22    <li>🐍li>
23    <li>👍li>
24ol>
25
26<h2>Linksh2>
27<p>My favorite websites are:p>
28<ul>
29    <li>realpython.comli>
30    <li>python.orgli>
31    <li>pypi.orgli>
32ul>
33body>
34html>
9 ở dòng 7, trong đó nội dung xác định tiêu đề trang của bạn

Khối 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10<h1>Hello, World Wide Web!h1>
11<p>This is my first website.p>
12
13<h2>About meh2>
14<p>I'm a Python programmer and a bug collector.p>
15
16<h3>Random factsh3>
17<p>I don't just <em>likeem> emoji,<br>
18I <strong>lovestrong> emoji!p>
19<p>My most-used emoji are:p>
20<ol>
21    <li>🐞li>
22    <li>🐍li>
23    <li>👍li>
24ol>
25
26<h2>Linksh2>
27<p>My favorite websites are:p>
28<ul>
29    <li>realpython.comli>
30    <li>python.orgli>
31    <li>pypi.orgli>
32ul>
33body>
34html>
4 chứa khối lượng nội dung của bạn. Bạn có thể coi 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10<h1>Hello, World Wide Web!h1>
11<p>This is my first website.p>
12
13<h2>About meh2>
14<p>I'm a Python programmer and a bug collector.p>
15
16<h3>Random factsh3>
17<p>I don't just <em>likeem> emoji,<br>
18I <strong>lovestrong> emoji!p>
19<p>My most-used emoji are:p>
20<ol>
21    <li>🐞li>
22    <li>🐍li>
23    <li>👍li>
24ol>
25
26<h2>Linksh2>
27<p>My favorite websites are:p>
28<ul>
29    <li>realpython.comli>
30    <li>python.orgli>
31    <li>pypi.orgli>
32ul>
33body>
34html>
4 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 tên thẻ được viết tắt, như phần tử ngắt dòng 




<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Am I HTML already?title>
head>
<body>
<nav>
    <a href="emoji.html">Emojia>
nav>

body>
html>
1 ở dòng 10. Để 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 phần tử HTML của Mozilla

Khi bạn đã tự làm quen với cấu trúc tài liệu HTML của mình, hãy tải lại 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 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
33body>
34html>
1 trong trình duyệt của bạn và xem trang web của bạn trông như thế nào

Làm cách nào để kết nối python với html?

Tuyệt vời, bạn hiện đang hiển thị nội dung của trang web phù hợp đầu tiên của mình

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 giống như cấu trúc mà bạn đã xây dựng trong phần này. Để tiết kiệm cho mình một số công việc trong tương lai, bạn có thể tải xuống mã soạn sẵn HTML bằng cách nhấp vào liên kết bên dưới

Tiền thưởng miễn phí. Nhấp vào đây để tải xuống các tài liệu bổ sung cho hướng dẫn này, bao gồm tệp mẫu HTML tiết kiệm thời gian

Trong phần tiếp theo, bạn sẽ cải thiện cấu trúc cơ sở mà bạn đã tạo 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

Loại bỏ các quảng cáo

Khoảng trắng và định dạng 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à khung cơ sở của trang web của bạn. Bây giờ là lúc tìm hiểu sâu hơn và cấu trúc một số nội dung thực sự. Để có thứ gì đó để làm việc, hãy thêm văn bản bên dưới vào khối 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10<h1>Hello, World Wide Web!h1>
11<p>This is my first website.p>
12
13<h2>About meh2>
14<p>I'm a Python programmer and a bug collector.p>
15
16<h3>Random factsh3>
17<p>I don't just <em>likeem> emoji,<br>
18I <strong>lovestrong> emoji!p>
19<p>My most-used emoji are:p>
20<ol>
21    <li>🐞li>
22    <li>🐍li>
23    <li>👍li>
24ol>
25
26<h2>Linksh2>
27<p>My favorite websites are:p>
28<ul>
29    <li>realpython.comli>
30    <li>python.orgli>
31    <li>pypi.orgli>
32ul>
33body>
34html>
4 của 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 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
33body>
34html>
1

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 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
33body>
34html>

Khi bạn mở trang web trong trình duyệt của mình, có vẻ như trình duyệt hoàn toàn 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
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10<h1>Hello, World Wide Web!h1>
11<p>This is my first website.p>
12
13<h2>About meh2>
14<p>I'm a Python programmer and a bug collector.p>
15
16<h3>Random factsh3>
17<p>I don't just <em>likeem> emoji,<br>
18I <strong>lovestrong> emoji!p>
19<p>My most-used emoji are:p>
20<ol>
21    <li>🐞li>
22    <li>🐍li>
23    <li>👍li>
24ol>
25
26<h2>Linksh2>
27<p>My favorite websites are:p>
28<ul>
29    <li>realpython.comli>
30    <li>python.orgli>
31    <li>pypi.orgli>
32ul>
33body>
34html>
4, nhưng trình duyệt sẽ hiển thị mọi thứ dưới dạng một dòng liên tục

Làm cách nào để kết nối python với html?

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 đẹp. Việc thụt lề 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

Nếu không có bất kỳ điều chỉnh bổ sung nào, trình duyệt sẽ thu gọn nhiều khoảng trắng, ngắt dòng hoặc thụt lề thành một ký tự khoảng trắng. Để định dạng nội dung của bạn theo cách khác, bạn phải cung cấp thêm thông tin cho trình duyệt. Hãy tiếp tục và cấu trúc 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 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
33body>
34html>
1 bằng cách thêm các thẻ HTML vào nội dung của bạn

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10<h1>Hello, World Wide Web!h1>
11<p>This is my first website.p>
12
13<h2>About meh2>
14<p>I'm a Python programmer and a bug collector.p>
15
16<h3>Random factsh3>
17<p>I don't just <em>likeem> emoji,<br>
18I <strong>lovestrong> emoji!p>
19<p>My most-used emoji are:p>
20<ol>
21    <li>🐞li>
22    <li>🐍li>
23    <li>👍li>
24ol>
25
26<h2>Linksh2>
27<p>My favorite websites are:p>
28<ul>
29    <li>realpython.comli>
30    <li>python.orgli>
31    <li>pypi.orgli>
32ul>
33body>
34html>

Bằng cách bọc 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 đối với nội dung. Trước tiên, hãy xem các thành phần HTML bọc các đoạn văn bản lớn hơn

Dòng Phần tử HTMLMô tả10




<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My favorite emojititle>
head>
<body>
<nav>
    <a href="index.html">Homea>
nav>
<h1>My favorite emojih1>
<p>I don't just <em>likeem> emoji,<br>
I <strong>lovestrong> emoji!p>
<p>Here's a list of my most-used emoji:p>
<ol>
    <li>🐞li>
    <li>🐍li>
    <li>👍li>
ol>
body>
html>
3Dòng tiêu đề chính của trang web của bạn11



<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My favorite emojititle>
head>
<body>
<nav>
    <a href="index.html">Homea>
nav>
<h1>My favorite emojih1>
<p>I don't just <em>likeem> emoji,<br>
I <strong>lovestrong> emoji!p>
<p>Here's a list of my most-used emoji:p>
<ol>
    <li>🐞li>
    <li>🐍li>
    <li>👍li>
ol>
body>
html>
4Đoạn văn, để cấu trúc văn bản và nội dung liên quan13



<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My favorite emojititle>
head>
<body>
<nav>
    <a href="index.html">Homea>
nav>
<h1>My favorite emojih1>
<p>I don't just <em>likeem> emoji,<br>
I <strong>lovestrong> emoji!p>
<p>Here's a list of my most-used emoji:p>
<ol>
    <li>🐞li>
    <li>🐍li>
    <li>👍li>
ol>
body>
html>
5Dòng tiêu đề cấp hai, được lồng bên dưới 



<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My favorite emojititle>
head>
<body>
<nav>
    <a href="index.html">Homea>
nav>
<h1>My favorite emojih1>
<p>I don't just <em>likeem> emoji,<br>
I <strong>lovestrong> emoji!p>
<p>Here's a list of my most-used emoji:p>
<ol>
    <li>🐞li>
    <li>🐍li>
    <li>👍li>
ol>
body>
html>
316



<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My favorite emojititle>
head>
<body>
<nav>
    <a href="index.html">Homea>
nav>
<h1>My favorite emojih1>
<p>I don't just <em>likeem> emoji,<br>
I <strong>lovestrong> emoji!p>
<p>Here's a list of my most-used emoji:p>
<ol>
    <li>🐞li>
    <li>🐍li>
    <li>👍li>
ol>
body>
html>
7Dòng tiêu đề cấp ba, được lồng bên dưới 



<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My favorite emojititle>
head>
<body>
<nav>
    <a href="index.html">Homea>
nav>
<h1>My favorite emojih1>
<p>I don't just <em>likeem> emoji,<br>
I <strong>lovestrong> emoji!p>
<p>Here's a list of my most-used emoji:p>
<ol>
    <li>🐞li>
    <li>🐍li>
    <li>👍li>
ol>
body>
html>
520



<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My favorite emojititle>
head>
<body>
<nav>
    <a href="index.html">Homea>
nav>
<h1>My favorite emojih1>
<p>I don't just <em>likeem> emoji,<br>
I <strong>lovestrong> emoji!p>
<p>Here's a list of my most-used emoji:p>
<ol>
    <li>🐞li>
    <li>🐍li>
    <li>👍li>
ol>
body>
html>
9Danh sách có thứ tự, thường được hiển thị dưới dạng danh sách được đánh số28_______45_______0Danh sách không có thứ tự, _______ thường được hiển thị dưới dạng danh sách đánh số (_______)

Bạn có thể lồng các phần tử tiêu đề sâu sáu cấp độ. Mặc dù bạn thường chỉ có một phần tử 




<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My favorite emojititle>
head>
<body>
<nav>
    <a href="index.html">Homea>
nav>
<h1>My favorite emojih1>
<p>I don't just <em>likeem> emoji,<br>
I <strong>lovestrong> emoji!p>
<p>Here's a list of my most-used emoji:p>
<ol>
    <li>🐞li>
    <li>🐍li>
    <li>👍li>
ol>
body>
html>
3, nhưng bạn có thể có nhiều thẻ 



<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My favorite emojititle>
head>
<body>
<nav>
    <a href="index.html">Homea>
nav>
<h1>My favorite emojih1>
<p>I don't just <em>likeem> emoji,<br>
I <strong>lovestrong> emoji!p>
<p>Here's a list of my most-used emoji:p>
<ol>
    <li>🐞li>
    <li>🐍li>
    <li>👍li>
ol>
body>
html>
5 đến 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Image gallerytitle>
 8head>
 9<body>
10<nav>
11    <a href="../index.html">Homea>
12    <a href="../emoji.html">Emojia>
13nav>
14<h1>Image galleryh1>
15body>
16html>
4. Phần tử tiêu đề phần tài liệu HTML của bạn và cực kỳ quan trọng đối với trình đọc màn hình. Ví dụ: người đọc có thể muốn chuyển từ tiêu đề này sang tiêu đề khác để điều hướng nội dung của bạn

Để viết HTML hợp lệ và có thể truy cập, bạn phải đảm bảo rằng bạn không bỏ qua cấp tiêu đề trong mã của mình. Bạn có thể nghĩ về các thẻ tiêu đề giống như những cánh cửa mở ra các tầng khác nhau của một tòa nhà. Một tầng có thể có nhiều lối ra các tầng khác. Nhưng hãy nhớ rằng, bạn không thể xây dựng tầng ba nếu bạn chưa có tầng hai. Nói cách khác, không bao giờ có thể có phần tử 




<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My favorite emojititle>
head>
<body>
<nav>
    <a href="index.html">Homea>
nav>
<h1>My favorite emojih1>
<p>I don't just <em>likeem> emoji,<br>
I <strong>lovestrong> emoji!p>
<p>Here's a list of my most-used emoji:p>
<ol>
    <li>🐞li>
    <li>🐍li>
    <li>👍li>
ol>
body>
html>
7 trên trang của bạn trừ khi bạn khai báo đầu tiên 



<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My favorite emojititle>
head>
<body>
<nav>
    <a href="index.html">Homea>
nav>
<h1>My favorite emojih1>
<p>I don't just <em>likeem> emoji,<br>
I <strong>lovestrong> emoji!p>
<p>Here's a list of my most-used emoji:p>
<ol>
    <li>🐞li>
    <li>🐍li>
    <li>👍li>
ol>
body>
html>
5

Một số phần 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 phần tử HTML bổ sung cấu trúc nội dung hơn nữa

Dòng Phần tử HTMLMô tả17________45 _______7Nhấn mạnh nội dung18________45 _______8Cho biết nội dung quan trọng21

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Image gallerytitle>
 8head>
 9<body>
10<nav>
11    <a href="../index.html">Homea>
12    <a href="../emoji.html">Emojia>
13nav>
14<h1>Image galleryh1>
15body>
16html>
9 Mục danh sách, phải được chứa trong phần tử danh sách

Tất cả các thẻ HTML truyền đạt ý nghĩa. Do đó, điều cực kỳ quan trọng là phải cẩn thận chọn đánh dấu nào bạn sử dụng cho các phần nội dung của mình. Khi bạn sử dụng đúng ngữ nghĩa, thì bạn cho phép mọi người sử dụng nội dung của bạn 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ả

Về cơ bản, Web được thiết kế để 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 được mục tiêu này, thì những người có khả năng nghe, vận động, nhìn và nhận thức khác nhau đều có thể truy cập được. (Nguồn)

Một số phần tử HTML khá đơn giản. Đối với đoạn văn, bạn sử dụng 




<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My favorite emojititle>
head>
<body>
<nav>
    <a href="index.html">Homea>
nav>
<h1>My favorite emojih1>
<p>I don't just <em>likeem> emoji,<br>
I <strong>lovestrong> emoji!p>
<p>Here's a list of my most-used emoji:p>
<ol>
    <li>🐞li>
    <li>🐍li>
    <li>👍li>
ol>
body>
html>
4. Các yếu tố khác khó nắm bắt hơn một chút

Ví dụ. Khi nào nên sử dụng 




<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Am I HTML already?title>
head>
<body>
<nav>
    <a href="emoji.html">Emojia>
    <a href="images/gallery.html">Gallerya>
nav>
1 thay vì 



<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Am I HTML already?title>
head>
<body>
<nav>
    <a href="emoji.html">Emojia>
    <a href="images/gallery.html">Gallerya>
nav>
2Hiển thị/Ẩn

Kushagra Gour cung cấp một bản tóm tắt tuyệt vời trong mục blog Strong vs Em của anh ấy

Nếu đó chỉ là tầm quan trọng về mặt hình ảnh, bạn muốn 




<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Am I HTML already?title>
head>
<body>
<nav>
    <a href="emoji.html">Emojia>
    <a href="images/gallery.html">Gallerya>
nav>
1. Nếu nó làm thay đổi ý nghĩa của câu, hãy sử dụng 



<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Am I HTML already?title>
head>
<body>
<nav>
    <a href="emoji.html">Emojia>
    <a href="images/gallery.html">Gallerya>
nav>
2

Nói cách khác, 




<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Am I HTML already?title>
head>
<body>
<nav>
    <a href="emoji.html">Emojia>
    <a href="images/gallery.html">Gallerya>
nav>
2 có nghĩa là bạn sẽ nhấn mạnh từ đó khi nói. Ví dụ, nếu ai đó nói, “Trông bạn không tệ,” bạn có thể thắc mắc, “Nhưng tôi có mùi khó chịu sao?”

Ví dụ: nếu bạn chỉ muốn thu hút sự chú ý của người đọc vào một đoạn từ vựng, thì bạn có thể muốn sử dụng 




<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Am I HTML already?title>
head>
<body>
<nav>
    <a href="emoji.html">Emojia>
    <a href="images/gallery.html">Gallerya>
nav>
1 để thay thế

Khi nghi ngờ, đừ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ỳ phần tử HTML nào

Ngoài ra, kiểu 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 thành phần khác nhau

Làm cách nào để kết nối python với html?

Với đánh dấu, bạn thêm ý nghĩa cho nội dung trang web của mình. Viết HTML đúng ngữ nghĩa là điều quan trọng để hiểu nội dung của bạn

Sử dụng đúng ngữ nghĩa 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 đối với những người dùng sử dụng nội dung của bạn bằng phần mềm chuyển 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ì HTML5 Doctor 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ể xem khóa học của Google về cách giúp tất cả mọi người có thể truy cập Web

Loại bỏ các quảng cáo

Liên kết, Hình ảnh và Bảng

Nhảy từ trang web này sang trang web khác là một phần thiết yếu của Internet. Những tham chiếu 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

Ngoài ra, bạn sẽ không 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




<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Am I HTML already?title>
head>
<body>
<nav>
    <a href="emoji.html">Emojia>
nav>

body>
html>

Với phần tử 




<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Am I HTML already?title>
head>
<body>
<nav>
    <a href="emoji.html">Emojia>
    <a href="images/gallery.html">Gallerya>
nav>
7, bạn khai báo một phần cung cấp điều hướng. Bên trong 



<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Am I HTML already?title>
head>
<body>
<nav>
    <a href="emoji.html">Emojia>
    <a href="images/gallery.html">Gallerya>
nav>
7, bạn thêm một liên kết có thẻ 



<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Am I HTML already?title>
head>
<body>
<nav>
    <a href="emoji.html">Emojia>
    <a href="images/gallery.html">Gallerya>
nav>
9, viết tắt của anchor. Thuộc tính 



<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My favorite emojititle>
head>
<body>
<nav>
    <a href="index.html">Homea>
    <a href="images/gallery.html">Gallerya>
nav>
0 là viết tắt của Hypertext Reference, chứa đích của liên kết

Với các liên kết tương đối, bạn có thể tham khảo các tệp trong cây thư mục của mình. Bạn có thể muốn thấy một URL bất cứ khi nào bạn có một liên kết, nhưng đó không phải là trường hợp với các liên kết tương đối

Trong trường hợp này, bạn liên kết đến một tệp có tên 




<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My favorite emojititle>
head>
<body>
<nav>
    <a href="index.html">Homea>
    <a href="images/gallery.html">Gallerya>
nav>
1. Trình duyệt hiểu rằng nó có thể tìm thấy 



<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My favorite emojititle>
head>
<body>
<nav>
    <a href="index.html">Homea>
    <a href="images/gallery.html">Gallerya>
nav>
1 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 quyết định triển khai dự án web của mình tại một thời điểm nào đó

Cho đến nay, 




<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My favorite emojititle>
head>
<body>
<nav>
    <a href="index.html">Homea>
    <a href="images/gallery.html">Gallerya>
nav>
1 không tồn tại. Để khắc phục điều này, hãy tạo một tệp mới có tên 



<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My favorite emojititle>
head>
<body>
<nav>
    <a href="index.html">Homea>
    <a href="images/gallery.html">Gallerya>
nav>
1 bên cạnh 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 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
33body>
34html>
1




<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My favorite emojititle>
head>
<body>
<nav>
    <a href="index.html">Homea>
nav>
<h1>My favorite emojih1>
<p>I don't just <em>likeem> emoji,<br>
I <strong>lovestrong> 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 




<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My favorite emojititle>
head>
<body>
<nav>
    <a href="index.html">Homea>
    <a href="images/gallery.html">Gallerya>
nav>
1 tương tự như của 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 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
33body>
34html>
1. Nội dung của 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10<h1>Hello, World Wide Web!h1>
11<p>This is my first website.p>
12
13<h2>About meh2>
14<p>I'm a Python programmer and a bug collector.p>
15
16<h3>Random factsh3>
17<p>I don't just <em>likeem> emoji,<br>
18I <strong>lovestrong> emoji!p>
19<p>My most-used emoji are:p>
20<ol>
21    <li>🐞li>
22    <li>🐍li>
23    <li>👍li>
24ol>
25
26<h2>Linksh2>
27<p>My favorite websites are:p>
28<ul>
29    <li>realpython.comli>
30    <li>python.orgli>
31    <li>pypi.orgli>
32ul>
33body>
34html>
4 trong 



<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My favorite emojititle>
head>
<body>
<nav>
    <a href="index.html">Homea>
    <a href="images/gallery.html">Gallerya>
nav>
1 gần giống với phần sự thật ngẫu nhiên của 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 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
33body>
34html>
1, ngoại trừ việc bạn đã thay đổi tiêu đề và chuyển nó lên một cấp thành 



<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My favorite emojititle>
head>
<body>
<nav>
    <a href="index.html">Homea>
nav>
<h1>My favorite emojih1>
<p>I don't just <em>likeem> emoji,<br>
I <strong>lovestrong> emoji!p>
<p>Here's a list of my most-used emoji:p>
<ol>
    <li>🐞li>
    <li>🐍li>
    <li>👍li>
ol>
body>
html>
3

Ở đầu 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10<h1>Hello, World Wide Web!h1>
11<p>This is my first website.p>
12
13<h2>About meh2>
14<p>I'm a Python programmer and a bug collector.p>
15
16<h3>Random factsh3>
17<p>I don't just <em>likeem> emoji,<br>
18I <strong>lovestrong> emoji!p>
19<p>My most-used emoji are:p>
20<ol>
21    <li>🐞li>
22    <li>🐍li>
23    <li>👍li>
24ol>
25
26<h2>Linksh2>
27<p>My favorite websites are:p>
28<ul>
29    <li>realpython.comli>
30    <li>python.orgli>
31    <li>pypi.orgli>
32ul>
33body>
34html>
4, bạn cũng có phần tử 



<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Am I HTML already?title>
head>
<body>
<nav>
    <a href="emoji.html">Emojia>
    <a href="images/gallery.html">Gallerya>
nav>
7. Tuy nhiên, lần này, bạn đang liên kết đến 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 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
33body>
34html>
1

Tiếp theo, tạo một thư mục mới có tên là 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
05 bên trong thư mục dự án của bạn và thêm một tệp có tên là 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
06

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Image gallerytitle>
 8head>
 9<body>
10<nav>
11    <a href="../index.html">Homea>
12    <a href="../emoji.html">Emojia>
13nav>
14<h1>Image galleryh1>
15body>
16html>

Bạn sẽ thêm một số hình ảnh vào 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
06 trong giây lát. Nhưng trước tiên, hãy xem dòng 11 và 12, nơi bạn liên kết đến các trang khác của mình

Bởi vì 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 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
33body>
34html>
1 và 



<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My favorite emojititle>
head>
<body>
<nav>
    <a href="index.html">Homea>
    <a href="images/gallery.html">Gallerya>
nav>
1 là một thư mục phía trên 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
06, bạn phải đặt trước mục tiêu liên kết hai dấu chấm (
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
11) và dấu gạch chéo (
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
12)

Để truy cập thuận tiện hơn, bạn cũng có thể thêm liên kết đến thư viện của mình trong menu điều hướng của 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 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
33body>
34html>
1




<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Am I HTML already?title>
head>
<body>
<nav>
    <a href="emoji.html">Emojia>
    <a href="images/gallery.html">Gallerya>
nav>

Bạn cũng có thể liên kết đến thư viện của mình trong 




<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My favorite emojititle>
head>
<body>
<nav>
    <a href="index.html">Homea>
    <a href="images/gallery.html">Gallerya>
nav>
1




<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My favorite emojititle>
head>
<body>
<nav>
    <a href="index.html">Homea>
    <a href="images/gallery.html">Gallerya>
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 đến đó từ tệp mà bạn đang ở ngay bây giờ. Tệp 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
06 là một thư mục bên dưới 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 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
33body>
34html>
1 trong thư mục có tên 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
05. Vì vậy, khi bạn đang liên kết đến 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
06, thì bạn cần đưa thư mục con vào liên kết mà bạn đã thực hiện ở trên

Liên kết tương đối hữu ích để liên kết các trang trên 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

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
0

Thay vì liên kết đến các tệp HTML, bạn đang liên kết đến các địa chỉ web tuyệt đối trong danh sách các trang web yêu thích của mình. Các liên kết này giống với các liên kết mà bạn nhập vào thanh địa chỉ của trình duyệt

Truy cập trình duyệt và điều hướng xung quanh trang web của bạn bằng các liên kết mà bạn vừa thêm

Liên kết không chỉ tiện dụng để kết nối các trang trên trang web của bạn—chúng là một phần quan trọng trong cơ sở hạ tầng của Internet. Nếu bạn muốn tìm hiểu thêm về các liên kết, hãy xem hướng dẫn về 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à ảnh GIF về mèo, Internet sẽ trở nên buồn tẻ

Bạn đính kèm hình ảnh vào tài liệu HTML của mình bằng phần tử 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
19 có chứa thuộc tính 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
20. Cũng giống như với 



<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My favorite emojititle>
head>
<body>
<nav>
    <a href="index.html">Homea>
    <a href="images/gallery.html">Gallerya>
nav>
0 trong một liên kết, bạn tham khảo nguồn hình ảnh trong 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
20. Ngoài ra, bạn phải luôn sử dụng thuộc tính 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
23 để 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 mình có thể truy cập được đối với những người sử dụng trình đọc màn hình

Cập nhật 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
06 và liên kết tới ba hình ảnh

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
1

Bạn sẽ tìm thấy các hình ảnh bầu trời bên trong thư mục 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
05 sau khi tải xuống tài liệu bằng cách nhấp vào mã bên dưới

Tiền thưởng miễn phí. Nhấp vào đây để tải xuống các tài liệu bổ sung cho hướng dẫn này, bao gồm tệp mẫu HTML tiết kiệm thời gian

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 cho phù hợp. Đừng quên cập nhật thêm văn bản 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
23 để mô tả nội dung của hình ảnh để hình ảnh của bạn có thể truy cập được

Văn bản 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
23 có thể so sánh rộng rãi với. Trong khi một chuỗi tài liệu có thể mô tả mục đích của một đối tượng, văn bản 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
23 mô tả nội dung của một hình ảnh. Giống như một chuỗi tài liệu, một văn bản 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
23 phải kết thúc bằng dấu chấm (
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
30)

Việc thêm thông tin bổ sung vào hình ảnh của bạn là công việc phụ nhưng rất đáng làm. Nếu có một chú chó dễ thương trong bức ảnh, mọi người đều xứng đáng được biết rằng có một chú chó dễ thương trong bức ảnh. Trong trường hợp bạn cần bất kỳ sự thuyết phục nào, hãy chuyển đến Văn bản thay thế. Hướng dẫn cơ bản về phòng thí nghiệm trục

Khi bạn mở 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
06 trong trình duyệt, trang của bạn sẽ trông giống như thế này

Làm cách nào để kết nối python với html?

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 hơn về mặt hình ảnh. Tuy nhiên, bộ sưu tập hình ảnh hơi lộn xộn và không có bất kỳ kiểu dáng bổ sung nào, trang web trông khá cũ kỹ. Đã đến lúc thay đổi điều đó

Trong phần tiếp theo, bạn sẽ thêm các quy tắc tạo kiểu vào HTML của mình và kiểm soát tốt hơn giao diện của các phần tử trên trang web của bạn

Loại bỏ các quảng cáo

Tạo kiểu cho nội dung của bạn bằng CSS

Khi 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 tự 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 cho bạn với tư cách là một con người. Nhưng nói đúng ra, khi bạn viết HTML, bạn chỉ xác định phần đánh dấu của trang web của mình. HTML thuần túy không cung cấp bất kỳ kiểu dáng nào cho các phần tử trên trang của bạn. Để tạo kiểu cho các phần tử, bạn cần thêm CSS

CSS là viết tắt của Cascading Style Sheets. Như bạn sẽ thấy sau này, bạn có thể kết hợp và lồng ghép các quy tắc tạo kiểu CSS của mình, do đó có tên biểu định kiểu xếp tầng

Cũng giống như HTML, đó là công nghệ nền tảng của Internet. Nó giúp bạ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 phải có ý nghĩa hợp lý theo thứ tự nguồn của nó — bạn luôn có thể đặt nó ở nơi bạn muốn bằng cách sử dụng CSS sau này, nhưng bạn nên lấy thứ tự nguồn ngay từ đầu, vậy màn hình nào . ()

Trong phần này, bạn sẽ tìm hiểu cách kiểm soát kiểu trang web của mình bằng cách thêm CSS

Thêm màu sắc cho trang web của bạn

Cho đến nay, bạn chỉ sử dụng trình duyệt để tải tệp HTML của mình. Nhưng các trình duyệt web là những 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 bằng ngăn công cụ dành cho 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ụ dành cho nhà phát triển của trình duyệt sẽ rất hữu ích

Lưu ý rằng những thay đổi trong công cụ dành cho nhà phát triển của bạn không 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, khi bạn hài lòng với các điều chỉnh về phong cách của mình, bạn cần sao chép và dán mã vào thẻ 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
32 trong tệp HTML của mình

Mở 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 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
33body>
34html>
1 và thêm phần tử 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
32 vào bên trong của 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10<h1>Hello, World Wide Web!h1>
11<p>This is my first website.p>
12
13<h2>About meh2>
14<p>I'm a Python programmer and a bug collector.p>
15
16<h3>Random factsh3>
17<p>I don't just <em>likeem> emoji,<br>
18I <strong>lovestrong> emoji!p>
19<p>My most-used emoji are:p>
20<ol>
21    <li>🐞li>
22    <li>🐍li>
23    <li>👍li>
24ol>
25
26<h2>Linksh2>
27<p>My favorite websites are:p>
28<ul>
29    <li>realpython.comli>
30    <li>python.orgli>
31    <li>pypi.orgli>
32ul>
33body>
34html>
5

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
2

Với phần tử 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
32, 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
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
32 bên trong 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10<h1>Hello, World Wide Web!h1>
11<p>This is my first website.p>
12
13<h2>About meh2>
14<p>I'm a Python programmer and a bug collector.p>
15
16<h3>Random factsh3>
17<p>I don't just <em>likeem> emoji,<br>
18I <strong>lovestrong> emoji!p>
19<p>My most-used emoji are:p>
20<ol>
21    <li>🐞li>
22    <li>🐍li>
23    <li>👍li>
24ol>
25
26<h2>Linksh2>
27<p>My favorite websites are:p>
28<ul>
29    <li>realpython.comli>
30    <li>python.orgli>
31    <li>pypi.orgli>
32ul>
33body>
34html>
5. Nếu không, trình duyệt có thể thử 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 hiện tượng nhấp nháy của nội dung chưa được tạo kiểu

Nội dung của 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
32 không phải là mã HTML mà là CSS. Với CSS, bạn xác định các quy tắc về cách tạo kiểu cho các thành phần trên trang

Với bộ chọn, bạn xác định phần tử nào bạn muốn nhắm mục tiêu, theo sau là khối khai báo. Trong mã CSS ở trên, bạn đang sử dụng bộ chọn loại để nhắm mục tiêu các phần tử 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10<h1>Hello, World Wide Web!h1>
11<p>This is my first website.p>
12
13<h2>About meh2>
14<p>I'm a Python programmer and a bug collector.p>
15
16<h3>Random factsh3>
17<p>I don't just <em>likeem> emoji,<br>
18I <strong>lovestrong> emoji!p>
19<p>My most-used emoji are:p>
20<ol>
21    <li>🐞li>
22    <li>🐍li>
23    <li>👍li>
24ol>
25
26<h2>Linksh2>
27<p>My favorite websites are:p>
28<ul>
29    <li>realpython.comli>
30    <li>python.orgli>
31    <li>pypi.orgli>
32ul>
33body>
34html>
4 và tất cả các phần tử 



<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Am I HTML already?title>
head>
<body>
<nav>
    <a href="emoji.html">Emojia>
    <a href="images/gallery.html">Gallerya>
nav>
9. Bạn sẽ sử dụng một số loại bộ chọn CSS khác sau trong hướng dẫn này. Nếu bạn muốn tìm hiểu thêm về bộ chọn CSS, hãy truy cập trang bộ chọn CSS của Mozilla

Khối khai báo được phân định bởi dấu ngoặc mở (_______12_______42) và dấu ngoặc đóng (

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
43). Bạn tách các phần khai báo bên trong một khối bằng dấu chấm phẩy (
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
44). Bản thân tuyên bố được cấu trúc thành hai phần

  1. Tài sản. Mã định danh xác định tính năng
  2. Giá trị. Mô tả về cách xử lý tính năng

Thuộc tính và giá trị được phân tách bằng dấu hai chấm (

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
45). Trong ví dụ trên, bạn đang thay đổi màu nền của 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10<h1>Hello, World Wide Web!h1>
11<p>This is my first website.p>
12
13<h2>About meh2>
14<p>I'm a Python programmer and a bug collector.p>
15
16<h3>Random factsh3>
17<p>I don't just <em>likeem> emoji,<br>
18I <strong>lovestrong> emoji!p>
19<p>My most-used emoji are:p>
20<ol>
21    <li>🐞li>
22    <li>🐍li>
23    <li>👍li>
24ol>
25
26<h2>Linksh2>
27<p>My favorite websites are:p>
28<ul>
29    <li>realpython.comli>
30    <li>python.orgli>
31    <li>pypi.orgli>
32ul>
33body>
34html>
4 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. Trong bộ quy tắc CSS thứ hai, bạn đang tô màu tất cả các liên kết theo màu cá hồi hiện đại

Màu sắc là một phần quan trọng trong việc kiểm soát giao diện trang web của bạn. Trong CSS, bạn có nhiều cách mô tả màu sắc. Bạn có thể xem hướng dẫn của Tạp chí Smashing về các màu CSS hiện đại để mở rộng kiến ​​thức của bạn về việc sử dụng các màu trong CSS

Ghi chú. Có hơn một trăm thuộc tính khác nhau mà bạn có thể sử dụng và nhiều giá trị mà bạn có thể gán cho chúng. Nhưng cũng giống như Python, bạn càng viết nhiều CSS, bạn càng tìm hiểu nhiều hơn về các khả năng, đặc điểm và cú pháp chung của nó

Bên cạnh việc lựa chọn màu sắc, bạn có thể thay đổi giao diện trang web của mình bằng phông chữ. Bạn đã thay đổi màu của văn bản. Tiếp theo, điều chỉnh kích thước văn bản của 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
47 với thuộc tính 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
48

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
3

Với 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
49, bạn yêu cầu trình duyệt hiển thị văn bản 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
50 lần lớn hơn kích thước phông chữ của phần tử gốc. Phần tử cha của 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10<h1>Hello, World Wide Web!h1>
11<p>This is my first website.p>
12
13<h2>About meh2>
14<p>I'm a Python programmer and a bug collector.p>
15
16<h3>Random factsh3>
17<p>I don't just <em>likeem> emoji,<br>
18I <strong>lovestrong> emoji!p>
19<p>My most-used emoji are:p>
20<ol>
21    <li>🐞li>
22    <li>🐍li>
23    <li>👍li>
24ol>
25
26<h2>Linksh2>
27<p>My favorite websites are:p>
28<ul>
29    <li>realpython.comli>
30    <li>python.orgli>
31    <li>pypi.orgli>
32ul>
33body>
34html>
4 là 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 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
33body>
34html>
0, vì vậy văn bản sẽ được hiển thị lớn hơn 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
50 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 21 pixel

Bạn có thể xác định trực tiếp kích thước phông chữ bằng pixel. Tuy nhiên, người ta thường sử dụng tỷ lệ phần trăm hoặc 




<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Am I HTML already?title>
head>
<body>
<nav>
    <a href="emoji.html">Emojia>
    <a href="images/gallery.html">Gallerya>
nav>
2 cho kích thước văn bản

Được đặt tên theo chữ cái “M”, đơn vị em có truyền thống lâu đời trong kiểu chữ, nơi nó được sử dụng để đo chiều rộng theo chiều ngang. (Nguồn)

Hồi trước phải đúc chữ vào khối kim loại, chữ M thường chiếm hết chiều ngang của khối đúc. Trong CSS, bạn cũng có thể sử dụng 




<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Am I HTML already?title>
head>
<body>
<nav>
    <a href="emoji.html">Emojia>
    <a href="images/gallery.html">Gallerya>
nav>
2 cho chiều dài theo chiều dọc và đó là một đơn vị tốt để tạo 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 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

Pixel và 




<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Am I HTML already?title>
head>
<body>
<nav>
    <a href="emoji.html">Emojia>
    <a href="images/gallery.html">Gallerya>
nav>
2 chỉ là hai trong số nhiều đơn vị độ 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, bạn nên xem qua các đơn vị này và thử nghiệm 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 đang hiển thị văn bản là một nền tảng khác ảnh hưởng rất lớn đến thiết kế trang web của bạn

Loại bỏ các quảng cáo

Thay đổi phông chữ

Phông chữ là một công cụ phi thường để thay đổi ký tự 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

  1. 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ọ
  2. Tải phông chữ web tùy chỉnh từ máy chủ của bạn hoặc tài nguyên bên ngoài

Với một trong hai tùy chọn, bạn nên xác định ngăn xếp phông chữ. Khi bạn liệt kê nhiều phông chữ cho 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
57, trình duyệt sẽ cố tải các phông chữ từ trái sang phải

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
4

Khi bạn khai báo một ngăn xếp phông chữ như hình trên, trước tiên trình duyệt sẽ thử tải kiểu chữ Helvetica. Nếu trình duyệt không thể tìm thấy phông chữ trong ngăn xếp phông chữ, trình duyệt sẽ tiếp tục bằng cách 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 cả Helvetica và Arial đều không có mặt

Chọn phông chữ phù hợp cho dự án của bạn là một khởi đầu tốt để làm cho nội dung của bạn dễ hiểu. Nhưng hãy nhớ rằng bên cạnh phông chữ, còn có những yếu tố khác ảnh hưởng đến mức độ dễ đọc của văn bản của bạn. Bạn có thể thử với giao diện kiểu chữ trên web của mình bằng cách điều chỉnh kích thước phông chữ, chiều cao của dòng và màu sắc. Văn bản của bạn càng dễ đọc thì mọi người càng dễ tiếp cận

Ghi chú. Bạn có thể sắp xếp các thuộc tính CSS của mình theo bất kỳ cách nào bạn muốn. Thứ tự bảng chữ cái có thể dễ bảo trì hơn trong thời gian dài, trong khi việc nhóm các thuộc tính theo chức năng của chúng có thể dễ viết hơn. Một số nhà phát triển CSS thậm chí còn sắp xếp các thuộc tính CSS của họ theo độ dài

Mở 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 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
33body>
34html>
1 trong trình duyệt của bạn và xem phông chữ nào hiển thị cho bạn

Làm cách nào để kết nối python với html?

Bạn có thể sử dụng các công cụ dành cho nhà phát triển của trình duyệt để điều tra xem phông chữ nào đã được tải. Nếu đó không phải là Helvetica hoặc Arial thì sao?

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 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ề cách triển khai 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ỉ mới bắt đầu thiết kế trang web của mình. Gần như có vô số cách tạo kiểu cho nội dung của bạn bằng CSS. Nếu bạn muốn tìm hiểu sâu hơn, thì bạn có thể xem tài liệu tham khảo CSS của Mozilla

Tách mối quan tâm của bạn

Bạn đã thêm trực tiếp mã CSS từ phần trước vào 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 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
33body>
34html>
1 với sự trợ giúp của phần tử 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
32. Nếu bạn muốn tạo kiểu cho 



<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My favorite emojititle>
head>
<body>
<nav>
    <a href="index.html">Homea>
    <a href="images/gallery.html">Gallerya>
nav>
1 theo cách tương tự, thì bạn 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 trở nên phức tạp

Trong mã Python của bạn, bạn có thể nhập các mô-đun để tránh lặp lại chính mình. HTML cung cấp chức năng tương tự để tải các 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 biểu định kiểu này từ các tệp HTML của bạn

Tạo một tệp mới có tên 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
62 bên cạnh 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 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
33body>
34html>
1 và 



<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My favorite emojititle>
head>
<body>
<nav>
    <a href="index.html">Homea>
    <a href="images/gallery.html">Gallerya>
nav>
1. Sau đó, cắt nội dung của 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
32 từ 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 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
33body>
34html>
1 và dán vào 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
62

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
5

Lưu ý rằng tệp CSS của bạn chỉ chứa các khai báo CSS. Trong tệp CSS, bạn không cần thẻ 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
32 mà bạn đã sử dụng để bọc mã CSS của mình trong 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 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
33body>
34html>
1

Ngoài ra, hãy phát hiện cú pháp của các nhận xét CSS trong dòng 1. Dấu gạch chéo về phía trước, theo sau là dấu hoa thị (

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
70) cho biết phần đầu của nhận xét. Bạn có thể phân phối nhận xét CSS trên nhiều dòng. Bạn đóng nhận xét bằng một dấu hoa thị khác, sau đó là dấu gạch chéo (
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
71)

Bây giờ bạn có thể tham khảo 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
62 trong đầu tệp 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 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
33body>
34html>
1 của mình

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
6

Phần tử 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
74 tương tự như thẻ neo (



<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Am I HTML already?title>
head>
<body>
<nav>
    <a href="emoji.html">Emojia>
    <a href="images/gallery.html">Gallerya>
nav>
9). Nó cũng chứa thuộc tính 



<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My favorite emojititle>
head>
<body>
<nav>
    <a href="index.html">Homea>
    <a href="images/gallery.html">Gallerya>
nav>
0 xác định liên kết. Tuy nhiên, đó là một phần tử trống chỉ chứa các thuộc tính và sẽ không hiển thị siêu liên kết có thể nhấp được

Thêm cả liên kết 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
77 vào 



<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My favorite emojititle>
head>
<body>
<nav>
    <a href="index.html">Homea>
    <a href="images/gallery.html">Gallerya>
nav>
1

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
7

Để phản ánh những thay đổi trong 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
06, hãy thêm liên kết tương đối vào 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
62

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
8

Hãy nhớ rằng 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
62 là một thư mục ở trên 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
06, nằm trong thư mục 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
05 của bạn. Vì vậy, thay vì chỉ liên kết tới 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
62, bạn phải liên kết tới 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
85

Khi bạn đã cập nhật các tham chiếu 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 hiện có cùng kiểu dáng. Khi bạn thay đổi mã CSS trong 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
62, 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, có lẽ bạn sẽ cần tự viết một chút HTML trong các dự án web. Tuy nhiên, đối với CSS, việc sử dụng các khung CSS bên ngoài để chăm sóc thiết kế của bạn là điều khá phổ biến

Khung CSS cung cấp cho bạn mã CSS được tạo sẵn. Để sử dụng khung CSS với toàn bộ lợi thế của nó, bạn có thể cần phải điều chỉnh mã HTML của mình để tuân thủ bộ 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 tạo kiểu rõ ràng cho các phần tử HTML về lâu dài

Một trong những khung CSS phổ biến nhất là Bootstrap. Bạn cũng sẽ gặp Simple. css hoặc Bulma, bao gồm trong các hướng dẫn Real Python về cách quản lý danh sách việc cần làm của bạn và tạo ứng dụng flashcards

Ghi chú. Nếu bạn muốn bắt đầu thiết kế CSS của mình từ đầu, bạn cũng có thể tải biểu định kiểu đặt lại bên ngoài. Bằng cách thêm biểu định kiểu đặt lại trước khi tải kiểu của bạn, bạn đặt lại tất cả các kiểu mặc định của trình duyệt. Điều này cung cấp cho bạn toàn quyền kiểm soát việc tạo kiểu bất kỳ phần tử HTML nào trên trang của bạn

Bạn có thể thêm các biểu định kiểu CSS bên ngoài, không cục bộ giống như biểu định kiểu cục bộ của bạn với phần tử 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
74. Nếu bạn tham khảo nhiều biểu định kiểu trên trang web của mình, thứ tự sẽ quan trọng. Bạn sẽ điều tra hành vi này trong giây lát

Trước 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 là mã ví dụ cho 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 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
33body>
34html>
1

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
9

Như C trong CSS ngụ ý, bạn cũng có thể xếp tầng các biểu định kiểu. Khi bạn mở 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 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
33body>
34html>
1 trong trình duyệt của mình, bạn có thể thấy rằng thiết kế đã thay đổi

Làm cách nào để kết nối python với html?

Bạn đã kết hợp các quy tắc phong cách của 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
62 địa phương và 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
91 bên ngoài. Chơi xung quanh với thứ tự cách bạn tải các biểu định kiểu bên ngoài. Khi bạn tải lại các trang của mình, bạn sẽ thấy rằng giao diện của trang web của bạn thay đổi

Tương tự như ghi đè lên các biến trong Python, các thuộc tính CSS ghi đè lên nhau. Nói chung, giá trị cuối cùng được áp dụng cho một phần tử sẽ thắng

Trong phần này, bạn đã học được rằng bạn có thể sử dụng biểu định kiểu bên ngoài thay vì phần tử 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
32. Thậm chí còn có 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 HTML 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
93 để tạo kiểu trực tiếp cho các phần tử HTML. Đây được gọi là kiểu dáng CSS nội tuyến

Ghi chú. Kiểu CSS nội tuyến có các trường hợp sử dụng của nó. Nhưng khi bạn bắt đầu học HTML và CSS, hãy cố gắng hạn chế sử dụng nó. Nói chung, việc thêm CSS nội tuyến được coi là thông lệ không tốt

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 thành phần HTML cụ thể có thể cung cấp cho bạn quyền 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 phần tử linh hoạt hơn với các lớp CSS

Loại bỏ các quảng cáo

Sử dụng các lớp để linh hoạt hơn

Các quy tắc CSS mà bạn đã đặt cho đến nay chỉ nhắm mục tiêu các phần 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

Việc thêm thuộc tính 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
94 vào phần tử HTML cho phép bạn sử dụng bộ chọn lớp CSS để tạo kiểu cho các phần tử dựa trên giá trị lớp của chúng

Một đặc điểm cơ bản của các lớp CSS là chúng cho phép bạn nhóm các phần tử chung và áp dụng một bộ quy tắc cho tất cả chúng cùng một lúc, 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ể định nghĩa một lớp áp dụng góc bo tròn cho hình ảnh. Nhưng thay vì nhắm mục tiêu tất cả các thành phần hình ảnh bằng cách sử dụng tên 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
95, bạn có thể chỉ định một lớp cho những hình ảnh có góc bo tròn. Điều này mang lại cho bạn lợi thế bổ sung khi có thể thêm các góc bo tròn vào các phần tử khác bằng cách cho chúng cùng một lớp

Để tìm hiểu cách hoạt động của bộ chọn lớp CSS, hãy điều chỉnh mã trong 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
06 để mã trông như thế này

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
0

Trước tiên, hãy nhớ thêm một liên kết đến biểu định kiểu bên ngoài của bạn. Đừng quên thêm vào trước hai dấu chấm để liên kết đến 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
85 vì biểu định kiểu cách là một thư mục phía trên 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
06

Sau đó, bạn đang bọc các phần tử 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
19 trong một khối 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
00. Phần tử 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
00 là phần 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 thuộc tính 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
94 vào phần tử HTML của mình. Ở dòng 14, bạn thậm chí còn xâu chuỗi các lớp trong một danh sách được phân tách bằng dấu cách. Điều này có nghĩa là bạn áp dụng hai lớp CSS cho phần tử 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
00. Ngược lại, các phần tử 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
19 trong dòng 15 đến 17 chỉ chứa một lớp CSS

Để tạo các lớp, hãy truy cập vào 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
62 và thêm mã CSS này

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
1

Bạn tham khảo các lớp CSS trong thuộc tính HTML 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
94 không có dấu chấm (
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
30). 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 để xác định rằng bạn đang nhắm mục tiêu các thuộc tính 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
94. Nếu bạn muốn đọc thêm về bộ chọn CSS, hãy xem tài liệu về bộ chọn CSS của Mozilla

Ở dòng 6 và 7, bạn đặt quy tắc cho 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
09, chẳng hạn như nền trong suốt một phần và phần đệm 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
10 để thêm khoảng trống cho tất cả các mặt bên trong phần tử bộ sưu tập

Với bộ chọn 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
11, bạn cung cấp cho tất cả các thành phần HTML có 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ể xâu chuỗi các bộ chọn CSS của mình như bạn làm ở dòng 14. Với danh sách bộ chọn được phân tách bằng dấu cách 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
12, bạn đang thêm một quy tắc cho tất cả các phần tử 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
95 bên trong một phần tử HTML với lớp 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
14. Với các khai báo CSS của bạn ở dòng 15 và 16, bạn dành cho chúng một khoảng trống ở phía bên phải với 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
15 và làm cho hình ảnh trong bộ sưu tập rộng 150 pixel

Với các thuộc tính 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
16, 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
17 và 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
18, bạn xác định khoảng cách giữa các phần tử CSS. Bạn có thể coi những phần tử này như những chiế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

Mọi thứ trong CSS đều có hộp xung quanh và việc hiểu các hộp này là chìa khóa để có thể tạo các bố cục phức tạp hơn bằng 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 tìm hiểu sâu hơn về CSS, thì việc tìm hiểu về mô hình hộp là chính. Bạn có thể theo dõi hướng dẫn học cách tạo kiểu HTML bằng cách sử dụng CSS của Mozilla để 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ể bắt đầu 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 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 bằng tay. Đó là nơi bạn có thể để các kỹ năng của mình với tư cách là 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 cách Python có thể giúp bạn làm việc với các tệp HTML hiệu quả hơn

Loại bỏ các quảng cáo

Xử lý HTML với Python

Là 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 tác vụ mà bạn cần phải thực hiện thủ công. Đặc biệt 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 HTML

Với tất cả các thẻ mở và thẻ đóng, HTML có thể rất cồng kềnh để viết. May mắn thay, Python hoàn hảo để giúp bạn tạo các tệp HTML lớn theo lập trình

Trong phần này, bạn sẽ mở rộng 




<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My favorite emojititle>
head>
<body>
<nav>
    <a href="index.html">Homea>
    <a href="images/gallery.html">Gallerya>
nav>
1 để hiển thị thêm thông tin về biểu tượng cảm xúc yêu thích của mình. Thay thế danh sách có thứ tự bằng một bảng

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
2

Bạn xác định một bảng HTML với phần tử 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
20 và các hàng của bảng với 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
21. Cũng giống như bảng trong bảng tính, bảng HTML có thể có đầu bảng và thân bảng. Mặc dù không bắt buộc phải sử dụng 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
22 và 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
23 để bảng hoạt động, nhưng bạn nên thêm chúng vào đánh dấu bảng của mình

Trong phần đầu bảng của bạn, bạn xác định ba cột của bảng bằng cách thêm ba phần tử 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
24 vào hàng đầu tiên

Nội dung 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 của bảng, bạn sử dụng phần tử 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
25 giống 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 chúng. 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 số lượng vừa phải như mười hai biểu tượng cảm xúc yêu thích, thật khó chịu khi tạo 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
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
26 trong thư mục dự án của bạn và để Python thực hiện công việc cho bạn

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
3

Với sự trợ giúp của mô-đun tích hợp và 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
28, Python có thể lập trình lập bảng biểu tượng cảm xúc cho bạn

Ghi chú. Các ký hiệu dòng mới (

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
29) trong chuỗi là tùy chọn. Trình duyệt sẽ bỏ qua bất kỳ khoảng trắng nào có nhiều hơn một khoảng trắng. Nhưng sử dụng 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
29 sẽ làm cho mã HTML của bạn đẹp hơn một chút

Chạy 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
26 trong thiết bị đầu cuối của bạn, sao chép mã HTML và dán mã đó vào 



<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My favorite emojititle>
head>
<body>
<nav>
    <a href="index.html">Homea>
    <a href="images/gallery.html">Gallerya>
nav>
1

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
4

Với 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
26, 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ả biểu tượng cảm xúc yêu thích của mình

Nếu bạn muốn làm cho bảng của mình trông đẹp 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
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
34 trong 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
62

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
5

Bảng HTML là một cách tuyệt vời để cấu trúc dữ liệu dạng bảng trên trang web của bạn. Bạn có thể xem tài liệu của Mozilla về bảng HTML và bảng kiểu dáng để tìm hiểu thêm về cách làm việc với bảng trong HTML

Mặc dù 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
26 giúp bạn xây dựng các bảng lớn hơn nhưng đó vẫn là một quy trình phức tạp. Hiện tại, bạn cần sao chép đầu ra của thiết bị đầu cuối vào tệp HTML của mình. Đó không phải là lý tưởng

Nhưng bây giờ là lúc để khám phá những cách khác mà Python có thể giúp bạn với mã HTML của mình

Loại bỏ các quảng cáo

Tạo thực thể HTML với Python

HTML đi kèm với một danh sách lớn mà bạn có thể sử dụng để mã hóa văn bản của mình trong HTML. Vì vậy, ví dụ: bạn có thể viết ký hiệu tiền tệ euro dưới dạng thực thể HTML 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
37 thay vì ký tự UTF-8 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
38

Trước đây, việc mã hóa các ký tự như thế này rất quan trọng vì không có cách nào để nhập chúng trực tiếp. Với sự ra đời của mã hóa ký tự UTF-8, bạn có thể sử dụng ký tự UTF-8 thực tế để thay thế. Hầu hết thời gian, điều đó thậm chí còn được khuyến nghị vì nó dễ đọc hơn

Tuy nhiên, vẫn có những tình huống mã hóa HTML là 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 các ký tự

  • Không thể phân biệt bằng mắt thường
  • Can thiệp vào cú pháp HTML

Lấy các ký tự khoảng trắng, ví dụ. Có 25 ký tự khoảng trắng được liệt kê trong cơ sở dữ liệu ký tự Unicode. Một số trong chúng trông giống hệt nhau, chẳng hạn như dấu cách thông thường () và dấu cách không ngắt (

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
39). Trực quan, không gian không thể phân biệt được. Nhưng khi bạn xem mã nguồn của trang này, bạn sẽ thấy rằng mã sau được thoát dưới dạng thực thể HTML của nó, 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
40

Làm cách nào để kết nối python với html?

Nếu bạn muốn hiển thị các thẻ HTML trên tài liệu HTML, bạn cũng cần thoát khỏi các ký tự như dấu ngoặc nhọn mở (




<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Am I HTML already?title>
head>
<body>
<nav>
    <a href="emoji.html">Emojia>
nav>

body>
html>
2) và dấu ngoặc nhọn đóng (



<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Am I HTML already?title>
head>
<body>
<nav>
    <a href="emoji.html">Emojia>
nav>

body>
html>
3). 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 dấu ngoặc nhọn

Làm cách nào để kết nối python với html?

Các dấu ngoặc góc mở được thoát ra dưới dạng 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
43. Dấu ngoặc góc đóng được thoát dưới dạng 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
44

Để xem danh sách đầy đủ các thực thể HTML, bạn có thể tận dụng mô-đun 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
45 tích hợp sẵn của Python

>>> 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
6

Mô-đun 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
46 của 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
45 xác định bốn từ điển. Một trong số đó là 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
48, ánh xạ các tham chiếu ký tự có tên HTML sang các ký tự tương ứng Unicode của chúng

Với 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
49, bạn có thể tìm thấy tên thực thể HTML của một ký tự

>>> 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
7

Điểm mã của đồng euro (

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
38) là 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
51. Đối với 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
51, từ điển 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
53 trả về 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
54. Để sử dụng tên trong mã HTML của bạn, bạn phải đặt dấu và (
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
55) trước tên và dấu chấm phẩy (
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
44) sau tên để nhận thực thể HTML 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
37 hợp lệ

Thay vì tự ghi nhớ và viết các thực thể HTML, bạn có thể để Python giúp bạn. Mô-đun 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
45 của Python cũng đi kèm với một trình phân tích cú pháp rất hữu ích khi bạn muốn phân tích các tài liệu HTML

Phân tích cú pháp HTML bằng Python

Khi bạn cần đọc dữ liệu từ các tệp HTML, thì Python cũng có thể hỗ trợ bạn với mô-đun 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
45 tích hợp sẵn. Trong phần này, bạn sẽ xây dựng một trình phân tích cú pháp HTML cơ bản bằng cách sử dụng 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
60. Tập lệnh bạn sẽ viết sẽ đề cập đến tệp 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
06 mà bạn đã tạo trước đó trong hướng dẫn này. Bạn có thể xem hướng dẫn hoặc tải xuống tất cả các tệp bằng cách nhấp vào liên kết bên dưới

Tiền thưởng miễn phí. Nhấp vào đây để tải xuống các tài liệu bổ sung cho hướng dẫn này, bao gồm tệp mẫu HTML tiết kiệm thời gian

Bên cạnh 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
06, tạo một tệp Python mới có tên là 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
63

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
8

Khi bạn cung cấp một phiên bản 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
64 của Python bằng dữ liệu HTML, phiên bản đó sẽ 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
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
64 để tìm kiếm bất kỳ phần tử 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
19 nào có thuộc tính 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
20 trong mã của 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
06

Đối với tệp 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9html>
06, đầu ra trông như thế này

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
9

Đối với tệp cục bộ của bạn mà bạn có thể tra cứu trong trình chỉnh sửa 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 cụ thể nào

Nếu mô-đun 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
45 của Python đã thu hút sự quan tâm của bạn, thì đọc phần giới thiệu thực tế về quét web bằng Python là bước tiếp theo tốt. Để có cách tiếp cận thực tế hơn, bạn cũng có thể xây dựng công cụ quét web bằng Beautiful Soup

Trước khi bạn phân tích cú pháp, hãy xem một số bước tiếp theo khác trong phần cuối cùng của hướng dẫn này

Loại bỏ các quảng cáo

Tiếp tục với HTML và CSS trong Python

Bạn có thể hoàn thành khá nhiều việc với HTML và CSS cơ bản. Làm việc với HTML và CSS thậm chí có thể trở nên thú vị hơn khi bạn kết hợp một ngôn ngữ lập trình như Python

Trong phần này, bạn sẽ có 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 về HTML và CSS của mình

JavaScript

Như 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à cơ sở tuyệt vời để tạo trang web

Tuy nhiên, sẽ không có phần giới thiệu nào về HTML và CSS mà không đề cập đến JavaScript. JavaScript là một thứ rất quan trọng đối với các trang web hiện đại

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. Để tìm hiểu sâu hơn về JavaScript, hãy đến khu vực học tập của Mozilla dành cho JavaScript

Nếu bạn muốn khám phá JavaScript từ góc nhìn của một lập trình viên Python, hãy xem Python vs JavaScript dành cho Pythonistas

Jinja

Trong hướng dẫn này, bạn đã lưu mã đánh dấu HTML trong chuỗi Python để tạo mã HTML động. Khi dự án web của bạn phát triển, thì sự kết hợp giữa HTML và Python có thể trở nên phức tạp

Để tách các mối quan tâm, bạn nên 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ã giao diện người dùng của mình. Bằng cách đó, bạn có thể giữ phần đánh dấu HTML của mình trong các tệp mẫu và điền chúng bằng Python. Công cụ tạo mẫu cho Python là 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ứ lúc nào bạn muốn tạo các tệp văn bản có nội dung có lập trình, Jinja đều có thể giúp bạn

Nếu bạn muốn tìm hiểu cách xây dựng các mẫu phong phú với Jinja, hãy xem bài viết cơ bản của Real Python về tạo mẫu Jinja

Bình giữ nhiệt

Vớ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 giao diện người dùng 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 phụ trợ. Đó là nơi các khung web phát huy tác dụng

Flask là một khung web Python phổ biến, rất phù hợp để xây dựng các ứng dụng web từ đầu. Sau khi bạn cài đặt gói 

 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
71 với 
 1
 2
 3
 4<html lang="en">
 5<head>
 6    <meta charset="utf-8">
 7    <title>Am I HTML already?title>
 8head>
 9<body>
10Yes,<br>I am!
11body>
12html>
72, thì bạn bắt đầu một dự án Flask 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 với quy mô nhỏ và nâng cao dự án của mình từng bước theo tốc độ của riêng bạn

Bạn có thể theo lộ trình học tập Flask by Example để khám phá những kiến ​​thức cơ bản về phát triển web Python với vi khung Flask

Django

Django là một khung web Python phổ biến khác. So với Flask, Django cung cấp cho bạn cấu trúc dự án khi bạn bắt đầu một dự án Django mới. Không cần tự thêm nhiều mã, bạn có thể làm việc với quản trị viên phía sau và cơ sở dữ liệu ngay lập tức. Sức mạnh của Django có thể giúp bạn khởi đầu thuận lợi 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ể khiến người mới bắt đầu choáng ngợp

May mắn thay, bạn có thể tìm thấy rất nhiều hướng dẫn về Django trên Real Python để 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 hoàn toàn phù hợp với bạn

Loại bỏ các quảng cáo

PyScript

PyScript là một framework mới cho phép bạn chạy Python trong trình duyệt web. Nhưng đừng nhầm lẫn nó với các web framework như Flask hoặc Django

PyScript chỉ là HTML, chỉ mạnh hơn một chút (không sao, có thể rất nhiều), nhờ vào 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 bị hấp dẫn, thì hãy xem qua PyScript. Python trong Trình duyệt web đã đọc

Phần kết luận

Cho dù bạn chọn con đường nào để trở thành nhà phát triển web Python, không có cách nào xung quanh HTML và CSS. Cả hai công nghệ đều là những khối xây dựng cơ bản khi bạn muốn tạo trang web

Xuyên suốt hướng dẫn này, bạn đã xây dựng một tài liệu HTML soạn sẵn để giúp bạn bắt đầu thuận lợi trong các dự án web sắp tới của mình

Trên đường đi, bạn đã học được cách

  • Cấu trúc một tệp HTML cơ bản
  • Hiển thị hình ảnh và liên kết đến các trang
  • Tạo kiểu trang web bằng CSS
  • Định dạng HTML có tính đến khả năng truy cập
  • Sử dụng Python để viết và phân tích mã HTML

Python, HTML và CSS là 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 hướng tới sự nghiệp là nhà phát triển web, thì 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

Tiền thưởng miễn phí. Nhấp vào đây để tải xuống các tài liệu bổ sung cho hướng dẫn này, bao gồm tệp mẫu HTML tiết kiệm thời gian

Đánh dấu là đã hoàn thành

🐍 Thủ thuật Python 💌

Nhận một Thủ thuật Python ngắn và hấp dẫn được gửi đến hộp thư đến của bạn vài ngày một lần. Không có thư rác bao giờ. Hủy đăng ký bất cứ lúc nào. Được quản lý bởi nhóm Real Python

Làm cách nào để kết nối python với html?

Gửi cho tôi thủ thuật Python »

Giới thiệu về Philipp Accany

Làm cách nào để kết nối python với html?
Làm cách nào để kết nối python với html?

Philipp là một kỹ sư phần mềm có trụ sở tại Berlin với nền tảng thiết kế đồ họa và niềm đam mê phát triển web toàn diện

» Thông tin thêm về Philipp

Mỗi hướng dẫn tại Real Python được tạo bởi một nhóm các nhà phát triển để nó đáp ứng các tiêu chuẩn chất lượng cao của chúng tôi. Các thành viên trong nhóm đã làm việc trong hướng dẫn này là

Làm cách nào để kết nối python với html?

Aldren

Làm cách nào để kết nối python với html?

Bartosz

Làm cách nào để kết nối python với html?

Geir Arne

Làm cách nào để kết nối python với html?

kate

Bậc thầy Kỹ năng Python trong thế giới thực Với quyền truy cập không giới hạn vào Python thực

Tham gia với chúng tôi và có quyền truy cập vào hàng nghìn hướng dẫn, khóa học video thực hành và cộng đồng các Pythonistas chuyên gia

Nâng cao kỹ năng Python của bạn »

Chuyên gia Kỹ năng Python trong thế giới thực
Với quyền truy cập không giới hạn vào Python thực

Tham gia với chúng tôi và có quyền truy cập vào hàng ngàn hướng dẫn, khóa học video thực hành và cộng đồng Pythonistas chuyên gia

Nâng cao kỹ năng Python của bạn »

Bạn nghĩ sao?

Đánh giá bài viết này

Tweet Chia sẻ Chia sẻ Email

Bài học số 1 hoặc điều yêu thích mà bạn đã học được là gì?

Mẹo bình luận. Những nhận xét hữu ích nhất là những nhận xét được viết với mục đích học hỏi hoặc giúp đỡ các sinh viên khác. và nhận câu trả lời cho các câu hỏi phổ biến trong cổng thông tin hỗ trợ của chúng tôi

programming python

Bài Viết Liên Quan

Android 6.0 với 7.0 khác nhau thế nào năm 2024
Android 6.0 với 7.0 khác nhau thế nào năm 2024

mẹo hay Hỏi Đáp Thế nào Công Nghệ Android
Giải bài tập hóa 10 bài 33 trang 143 năm 2024
Giải bài tập hóa 10 bài 33 trang 143 năm 2024

mẹo hay Khỏe Đẹp Bài tập
Html overflow start at the bottom instead of top năm 2024
Html overflow start at the bottom instead of top năm 2024

mẹo hay Top List Top
Cơ giới hóa khâu gieo trồng là gì năm 2024
Cơ giới hóa khâu gieo trồng là gì năm 2024

mẹo hay Hỏi Đáp Là gì
Máy điều hòa nào tốt nhất hiện nay năm 2024
Máy điều hòa nào tốt nhất hiện nay năm 2024

mẹo hay Top List Tốt nhất Công Nghệ Máy Review
Unesco công nhận di sản văn hóa phi vật thể năm 2024
Unesco công nhận di sản văn hóa phi vật thể năm 2024

mẹo hay
Lỗi usb k nhận win 10 máy hp năm 2024
Lỗi usb k nhận win 10 máy hp năm 2024

mẹo hay Công Nghệ Máy
Khác biệt giữa hóa đơn cá nhân và công ty năm 2024
Khác biệt giữa hóa đơn cá nhân và công ty năm 2024

mẹo hay So Sánh Khác biệt
Hóa giải xung khắc chồng 1994 vợ 1997 năm 2024
Hóa giải xung khắc chồng 1994 vợ 1997 năm 2024

mẹo hay
Thiên thần tội lỗi ngôi sao thời trang năm 2024
Thiên thần tội lỗi ngôi sao thời trang năm 2024

mẹo hay
Giấy đề nghị thanh toán có cần bản gốc không năm 2024
Giấy đề nghị thanh toán có cần bản gốc không năm 2024

mẹo hay
Màu đỏ san hô hợp với da nào năm 2024
Màu đỏ san hô hợp với da nào năm 2024

mẹo hay
Bài tập năng cao điền đúng dạng từ năm 2024
Bài tập năng cao điền đúng dạng từ năm 2024

mẹo hay Khỏe Đẹp Bài tập
Loa di động jbl pulse 2 bị lỗi bluetooth năm 2024
Loa di động jbl pulse 2 bị lỗi bluetooth năm 2024

mẹo hay
Cấu tạo của bài văn kể chuyện lớp 4 năm 2024
Cấu tạo của bài văn kể chuyện lớp 4 năm 2024

mẹo hay
Máy phô tô fujixerox s2220 báo lỗi 092910 năm 2024
Máy phô tô fujixerox s2220 báo lỗi 092910 năm 2024

mẹo hay Công Nghệ Máy
Bi thủy tinh và bi thép cái nào nặng hơn năm 2024
Bi thủy tinh và bi thép cái nào nặng hơn năm 2024

mẹo hay
Bài tập phần liệt kê và dấu câu năm 2024
Bài tập phần liệt kê và dấu câu năm 2024

mẹo hay Khỏe Đẹp Bài tập
Cho thuê văn phòng ibm hội nghị theo ngày năm 2024
Cho thuê văn phòng ibm hội nghị theo ngày năm 2024

mẹo hay
Giải toán lớp 8 tập 2 bài 7 năm 2024
Giải toán lớp 8 tập 2 bài 7 năm 2024

mẹo hay

Quảng Cáo

Có thể bạn quan tâm

Bánh rau câu sinh nhật chứa bao nhiêu calo năm 2024
7 tháng trước . bởi ComelyBingo
Họ tiếng nhật của bạn là gì năm 2024
7 tháng trước . bởi UnconvincedManifesto
Ý nghĩa của header from top là gì năm 2024
7 tháng trước . bởi WoolenAversion
Tự học tiếng anh như thế nào hiệu quả năm 2024
7 tháng trước . bởi ColdPharaoh
Cơ thể con người năm hiến máu bao nhiêu lần năm 2024
7 tháng trước . bởi ArtificialRadiance
Tuổi đinh mão xây nhà năm nào tốt năm 2024
7 tháng trước . bởi ProdigiousHomeland
Khoán chi đến sản phẩm cuối cùng là gì năm 2024
7 tháng trước . bởi TallFluke
Các yếu tố cấu thành văn hóa tổ chức năm 2024
7 tháng trước . bởi UprootedInterpretation
Thế nào là số vô tỉ cho ví dụ năm 2024
7 tháng trước . bởi GhastlyDeliverance
Quà trung thu tiếng anh là gì năm 2024
7 tháng trước . bởi ExtinctTractor

Toplist được quan tâm

#1
Top 7 sự tích hồ gươm - ngữ văn lớp 6 2023
1 năm trước
#2
Top 7 gdcd 6 bài 1 kết nối tri thức 2023
1 năm trước
#3
Top 7 ý nghĩa của xây dựng gia đình văn hóa 2023
1 năm trước
#4
Top 6 mẫu hợp đồng mượn đất làm nhà xưởng 2023
1 năm trước
#5
Top 3 tổng tài biến thái tôi yêu anh tập 27 2023
1 năm trước
#6
Top 6 kết thực phim mỹ nhân vô lệ 2023
1 năm trước
#7
Top 9 trong những câu thơ sau câu nào sử dụng thành ngữ 2023
1 năm trước
#8
Top 8 đề tài và chủ de của tác phẩm tắt đèn 2023
1 năm trước
#9
Top 5 tiểu sử của thầy thích pháp hòa 2023
1 năm trước

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

DMCA.com Protection Status
Bản quyền © 2021 Học Tốt Inc.