search

Làm cách nào để thêm tệp html vào python?

Ngày đăng: 28/01/2023
Trả lời: 0
Lượt xem: 52

Bằng cách tận dụng cả hai Mô-đun. digiweb và phiên bản PythonInsideHTML được sửa đổi một chút. zip từ máy chủ web Karrigell Python của dự án được cấp phép BSD để biến nó thành một thư viện độc lập. Có thể chạy nhúng Python trong tài liệu HTML có thể được thực thi trong thời gian chạy

Show

Bên trong HTML

cú pháp

By enclosing Python statements within a <% %> tag the Python interpreter will execute said statements. In the following example a "stored_time" variable will be created and will save the time on the local scope.

<% import time %>
<% stored_time = time.strftime("%d:%m:%y",time.localtime(time.time())) %>

If enclosed with <%= %> it will evaluate the statement and replace the tag with the result of the executed statement. In the following example the HTML created will contain the day:month:year from the devices internal clock.

<% import time %>
<%= time.strftime("%d:%m:%y",time.localtime(time.time())) %>

thụt đầu dòng

Khai báo thụt đầu dòng

Một tệp được chuyển đổi thành mã Python, mã này phải được thụt lề theo quy tắc Python;

Vì vậy, hãy cẩn thận nếu bạn kết hợp Python và HTML

    1 <% for i in range(10): %>
    2 <%= i %>*<%= i %> :  <%= i*i %>

Điều này sẽ hoạt động vì sau một vòng lặp hoặc một điều kiện, HTML sau sẽ được PIH tự động thụt vào

To decrement indentation, use <% end %> :

    1 <% for i in range(10): %>
    2 <%= i %>*<%= i %> :  <%= i*i %> 
    3 <% end %>
    4 
done

trong ví dụ này, "xong" sẽ được viết sau khi vòng lặp for kết thúc

Một ví dụ khác cho một nếu. khác. 

    1 <% if i: %>
    2   output someting
    3 <% end %>
    4 <% else: %>
    5   output someting else
    6 <% end %>
    7 
done

(Don't forget the last <% end %> otherwise "done" would have the same indentation as line 5) But this :

    1 <% for i in range(10):
    2    data= '%s * %s' %(i,i) %>
    3     <%= i*i %> 
    4 
done

Sẽ không hoạt động, bởi vì sau câu lệnh in trên dòng 2, thụt đầu dòng trở về 0 (nó bắt đầu bằng HTML thuần túy)

Tag

Nếu bạn có mã phức tạp trong đó Python và HTML được trộn lẫn, hãy nhúng mã đó vào giữa các thẻ và

    1  
    2  <% for i in range(10):
    3    data= '%s * %s' %(i,i) %>
    4     <%= i*i %> 
    5  
    6  
Table

    7  
    8    
    9      
    10   
    11 A cell

có nghĩa. từ giờ trở đi và cho đến khi thẻ phù hợp, hãy sử dụng thụt lề trong nguồn PIH và để nguyên như vậy để tạo mã Python Trong ví dụ trên, thụt lề được sử dụng cho đến dòng 5 và bỏ qua sau đó. Nếu bản thân thẻ được thụt vào, đoạn mã sau sẽ được thụt vào 

    1   
    2     
    3       
    4       
    5     
    6     
    7     <% for i in range(10): %>
    8       
    9       
    10      
    11      
    12    
    13  NumberSquare<%= i %><%= i**2 %>

Trong dòng 7, <% được căn chỉnh nên mã Python sẽ không được thụt vào

Kịch bản kết thúc

Nếu bạn muốn thoát tập lệnh trước khi kết thúc tài liệu, hãy nhấn

________số 8_______

Ghi vào đầu ra HTML

Nếu bạn muốn ghi vào đầu ra HTML mà không sử dụng các thẻ đánh giá, bạn có thể viết trực tiếp vào đầu ra mã Python thông qua

py_code.write( " Heading " )

Ví dụ làm việc từ Python

Trong ví dụ này, chúng tôi sẽ tạo một trình xử lý chung cho một loại tệp cho máy chủ web bằng cách sử dụng Mô-đun. kỹ thuật số

<% import time %>
<%= time.strftime("%d:%m:%y",time.localtime(time.time())) %>
0

Bây giờ bạn chỉ có thể tải lên một tệp kết thúc bằng a thông qua phần quản lý tệp Python của webui, sau đó chỉ cần điều hướng đến http. //device_address/filename

Ví dụ: tải lên phần sau (mẫu. pih) sẽ hiển thị thông tin về yêu cầu HTTP được chuyển đến http_handler. Mã Python được tạo bởi tập lệnh này được chạy trên cùng phạm vi với hàm http_handler để có quyền truy cập vào các đối số (loại, đường dẫn, tiêu đề, đối số)

<% import time %>
<%= time.strftime("%d:%m:%y",time.localtime(time.time())) %>
1

Điều hướng trình duyệt của bạn đến "http. //device_address/template. pih" sẽ cung cấp cho bạn một trang hiển thị thông tin về yêu cầu HTTP

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. thí dụ. com/ thay vì gõ đầy đủ https. //www. thí 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 để thêm tệp html vào python?

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ý 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 thiếu một yếu tố HTML quan trọng. 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 phần 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. Trong 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, chẳng hạn 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 (_______35_______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 để thêm tệp html vào python?

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 để thêm tệp html vào python?

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_______50_______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>
7Tiêu đề cấp ba, 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_
 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>
0Danh sách không có thứ tự, _______5

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

 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>
7Nhấn mạnh nội dung18
 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>
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>
9Mụ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 nó chỉ 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 để thêm tệp html vào python?

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) trước mục tiêu liên kết.

Để 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 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, 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 để thêm tệp html vào python?

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ở (_______24_______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 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 dọc và đây 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 để thêm tệp html vào python?

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 ________ 24 _______ 06 thành, 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 để thêm tệp html vào python?

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 gó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 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 phần tử 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 cùng mộ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>
 9<body>
10Yes,<br>I am!
11body>
12html>
25 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 để thêm tệp html vào python?

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 góc đó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 để thêm tệp html vào python?

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 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 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 để thêm tệp html vào python?

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

Giới thiệu về Philipp Accany

Làm cách nào để thêm tệp html vào python?
Làm cách nào để thêm tệp html vào python?

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 để thêm tệp html vào python?

Aldren

Làm cách nào để thêm tệp html vào python?

Bartosz

Làm cách nào để thêm tệp html vào python?

Geir Arne

Làm cách nào để thêm tệp html vào python?

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

Tôi có thể nhúng HTML vào Python không?

Có thể chạy nhúng Python trong tài liệu HTML có thể được thực thi trong thời gian chạy .

Làm cách nào để hiển thị HTML bằng Python?

Để hiển thị tệp HTML dưới dạng đầu ra python, chúng tôi sẽ sử dụng thư viện codec . Thư viện này được sử dụng để mở các tệp có mã hóa nhất định. Nó nhận một mã hóa tham số làm cho nó khác với hàm open() tích hợp.

programming python

Bài Viết Liên Quan

Kinh nguyệt không đều là dấu hiệu của bệnh gì năm 2024
Kinh nguyệt không đều là dấu hiệu của bệnh gì năm 2024

là ai Mẹo Hay Dấu hiệu Giới Tính Kinh nguyệt
Kiểm tra tài khoản vpbank thuộc chi nhánh nào năm 2024
Kiểm tra tài khoản vpbank thuộc chi nhánh nào năm 2024

mẹo hay
Top 100 thành phố đông khách nhất thế giới năm 2024
Top 100 thành phố đông khách nhất thế giới năm 2024

mẹo hay Top List Top
Chất nhũ hóa nguội tiếng anh là gì năm 2024
Chất nhũ hóa nguội tiếng anh là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Tiếng anh Emulsifiers là gì Emulsifier in food
Cách fix lỗi máy lọc không lọc item trong minecraft năm 2024
Cách fix lỗi máy lọc không lọc item trong minecraft năm 2024

mẹo hay Mẹo Hay Cách Công Nghệ Máy
Chuyển tiền trả trước thuật ngữ là gì năm 2024
Chuyển tiền trả trước thuật ngữ là gì năm 2024

là ai Hỏi Đáp Là gì
Bảng các tính chất hóa học của các hchc năm 2024
Bảng các tính chất hóa học của các hchc năm 2024

mẹo hay Học Tốt Học
Xe air blade đời đầu sản xuất nam nào năm 2024
Xe air blade đời đầu sản xuất nam nào năm 2024

mẹo hay
Hoa bách hợp nở dưới chân núi brokeback là gì năm 2024
Hoa bách hợp nở dưới chân núi brokeback là gì năm 2024

là ai Hỏi Đáp Là gì
Môt số sản phẩm tẩy tế bào chết hóa học năm 2024
Môt số sản phẩm tẩy tế bào chết hóa học năm 2024

mẹo hay Học Tốt Học
Công nghệ 4.0 là như thế nào năm 2024
Công nghệ 4.0 là như thế nào năm 2024

mẹo hay Hỏi Đáp Thế nào Công Nghệ Công nghệ
Anh hùng đạo hòa hảo vương văn thả năm 2024
Anh hùng đạo hòa hảo vương văn thả năm 2024

mẹo hay
Công ty xuất ăn hang fkhoong tiếng anh là gì năm 2024
Công ty xuất ăn hang fkhoong tiếng anh là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Tiếng anh Cổ phiếu CAD
Is in the top 10 of next top model năm 2024
Is in the top 10 of next top model năm 2024

mẹo hay Top List Top Austrias next topmodel ANTM 8
Các loại bất đẳng thức toán nâng cao năm 2024
Các loại bất đẳng thức toán nâng cao năm 2024

mẹo hay
The worlds third most populous city proper là gì năm 2024
The worlds third most populous city proper là gì năm 2024

là ai Hỏi Đáp Là gì
Tai sao rita ora lam hots next top model năm 2024
Tai sao rita ora lam hots next top model năm 2024

mẹo hay Top List Top
Con trai trong tiếng anh là gì năm 2024
Con trai trong tiếng anh là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Tiếng anh Giới Tính Trai
Cách hóa giải hướng nhà tuyệt mệnh như thế nào năm 2024
Cách hóa giải hướng nhà tuyệt mệnh như thế nào năm 2024

mẹo hay Hỏi Đáp Thế nào Mẹo Hay Cách Xây Đựng Nhà
Ký hiệu lh sau ký hiệu ren nghĩa là gì năm 2024
Ký hiệu lh sau ký hiệu ren nghĩa là gì năm 2024

là ai Hỏi Đáp Là gì Ngôn ngữ Nghĩa là gì

Quảng Cáo

Có thể bạn quan tâm

Các lỗi thường gặp trên máy nén khí năm 2024
1 ngày trước . bởi ScatteredLookout
Coông văn yêu cầu cung cấp tiến độ thi công năm 2024
1 ngày trước . bởi PublicRecourse
Bầu trời chia đôi là hiện tượng gì năm 2024
1 ngày trước . bởi WantedSemiconductor
Bài tập về tia lớp 6 có đáp án năm 2024
1 ngày trước . bởi InfuriatingCommander
Thành phố nào có diện tích lớn nhất việt nam năm 2024
1 ngày trước . bởi CheeringPatchwork
Bố tên vũ đặt tên con là gì năm 2024
1 ngày trước . bởi OngoingImmunization
Dấu hiệu doanh nghiệp mất khả năng thanh toán năm 2024
1 ngày trước . bởi IndependentLigament
Lỗi khi mở file excel hiện ra trang trắng năm 2024
1 ngày trước . bởi OdiousSnead
Ngày 8 tháng 7 năm 2023 là ngày gì năm 2024
1 ngày trước . bởi DampDealing
Làm thế nào để nhanh ra kinh nguyệt năm 2024
1 ngày trước . bởi UnfamiliarRepertoire

Toplist được quan tâm

#1
Top 7 tết mậu thân năm 1968 đã diễn ra sự kiện gì ở miền nam nước ta 2023
5 tháng trước
#2
Top 13 luyện từ và câu: dấu gạch ngang lớp 4 trang 45 2023
5 tháng trước
#3
Top 6 trong mặt phẳng oxy ảnh của đường thẳng d 3x y 4=0 2023
5 tháng trước
#4
Top 6 thử thách thần chết thuyết minh phần 2 2023
5 tháng trước
#5
Top 4 vở bài tập tiếng việt lớp 3 tập 2 chính tả trang 15 2023
5 tháng trước
#6
Top 5 áo khoác nam quảng châu cao cấp 2023
5 tháng trước
#7
Top 4 nội dung nào sau đây không phải là trách nhiệm của đơn vị đầu mối cung cấp thông tin 2023
5 tháng trước
#8
Top 9 mẫu đồng phục công sở đẹp 2022 2023
5 tháng trước
#9
Top 5 ốp lưng iphone 13 pro bảo vệ camera 2023
5 tháng trước

Quảng cáo

Xem Nhiều

Bài tập có lời giải tổ chức thi công năm 2024
4 ngày trước . bởi VolubleBrowsing
Giải các bài toán tìm x lớp 4 năm 2024
1 tuần trước . bởi PredominantManga
Cuộc gọi không xác định là gì năm 2024
1 tuần trước . bởi UncontrollableComplexity
Dđiện trở các cặp dây máy nén là bao nhiêu năm 2024
2 ngày trước . bởi TelevisedNarration
Vietnam airline được ký gửi bao nhiêu kg năm 2024
1 ngày trước . bởi ProlongedSeating
Last seen recently nghĩa là gì năm 2024
14 giờ trước . bởi High-levelRelaxation
Đại học tôn đức thắng bao nhiêu 1 tín chỉ năm 2024
1 tuần trước . bởi WashedChina
1 8 ga tương đương bao nhiêu km h năm 2024
1 tuần trước . bởi All-powerfulFrequency
Anh trai gọi em gái là gì trong tiếng hàn năm 2024
6 ngày trước . bởi SpentDeliverance
What have you been up to lately là gì năm 2024
1 tuần trước . bởi Military-industrialTreadmill

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 boxhoidap.com Inc.