Thực hành html và css

Với phần giới thiệu về HTML và CSS đã hoàn tất, đã đến lúc tìm hiểu sâu hơn một chút về HTML và kiểm tra các thành phần khác nhau tạo nên ngôn ngữ này

Để bắt đầu xây dựng trang web, chúng ta cần tìm hiểu một chút về phần tử HTML nào được sử dụng tốt nhất để hiển thị các loại nội dung khác nhau. Điều quan trọng là phải hiểu cách các phần tử được hiển thị trực quan trên một trang web, cũng như ý nghĩa của các phần tử khác nhau về mặt ngữ nghĩa

Sử dụng yếu tố thích hợp cho công việc sẽ đi một chặng đường dài và chúng tôi muốn đưa ra quyết định sáng suốt trong quá trình này

Tổng quan về ngữ nghĩa

Vậy chính xác ngữ nghĩa là gì? . Mã ngữ nghĩa mô tả giá trị của nội dung trên một trang, bất kể phong cách hoặc hình thức của nội dung đó. Có một số lợi ích khi sử dụng các yếu tố ngữ nghĩa, bao gồm cho phép máy tính, trình đọc màn hình, công cụ tìm kiếm và các thiết bị khác đọc và hiểu đầy đủ nội dung trên trang web. Ngoài ra, HTML ngữ nghĩa dễ quản lý và làm việc hơn vì nó hiển thị rõ ràng nội dung của từng phần nội dung.

Trong tương lai, khi các yếu tố mới được giới thiệu, chúng ta sẽ nói về ý nghĩa thực sự của những yếu tố đó và loại nội dung mà chúng thể hiện tốt nhất. Tuy nhiên, trước khi làm điều đó, chúng ta hãy xem xét hai yếu tố—

<p>Steve Jobs was a co-founder and longtime chief executive officer at Apple. On June 12, 2005, Steve gave the commencement address at Stanford University.</p>

<p>In his address Steve urged graduates to follow their dreams and, despite any setbacks, to never give up&ndash;advice which he sincerely took to heart.</p>

<p>Steve Jobs was a co-founder and longtime chief executive officer at Apple. On June 12, 2005, Steve gave the commencement address at Stanford University.</p>

<p>In his address Steve urged graduates to follow their dreams and, despite any setbacks, to never give up&ndash;advice which he sincerely took to heart.</p>

Xác định các bộ phận & kéo dài

Các bộ phận, hoặc

<p>Steve Jobs was a co-founder and longtime chief executive officer at Apple. On June 12, 2005, Steve gave the commencement address at Stanford University.</p>

<p>In his address Steve urged graduates to follow their dreams and, despite any setbacks, to never give up&ndash;advice which he sincerely took to heart.</p>

<p>Steve Jobs was a co-founder and longtime chief executive officer at Apple. On June 12, 2005, Steve gave the commencement address at Stanford University.</p>

<p>In his address Steve urged graduates to follow their dreams and, despite any setbacks, to never give up&ndash;advice which he sincerely took to heart.</p>

<p>Steve Jobs was a co-founder and longtime chief executive officer at Apple. On June 12, 2005, Steve gave the commencement address at Stanford University.</p>

<p>In his address Steve urged graduates to follow their dreams and, despite any setbacks, to never give up&ndash;advice which he sincerely took to heart.</p>

<p>Steve Jobs was a co-founder and longtime chief executive officer at Apple. On June 12, 2005, Steve gave the commencement address at Stanford University.</p>

<p>In his address Steve urged graduates to follow their dreams and, despite any setbacks, to never give up&ndash;advice which he sincerely took to heart.</p>

<p>Steve Jobs was a co-founder and longtime chief executive officer at Apple. On June 12, 2005, Steve gave the commencement address at Stanford University.</p>

<p>In his address Steve urged graduates to follow their dreams and, despite any setbacks, to never give up&ndash;advice which he sincerely took to heart.</p>

chặn so với. Yếu tố nội tuyến

Hầu hết các phần tử là phần tử cấp khối hoặc cấp nội tuyến. Có gì khác biệt?

Các phần tử cấp khối bắt đầu trên một dòng mới, xếp chồng lên nhau và chiếm bất kỳ chiều rộng có sẵn nào. Các phần tử cấp độ khối có thể được lồng vào nhau và có thể bọc các phần tử cấp độ nội tuyến. Hầu hết chúng ta sẽ thấy các phần tử cấp khối được sử dụng cho các phần nội dung lớn hơn, chẳng hạn như các đoạn văn

Các phần tử cấp độ nội tuyến không bắt đầu trên một dòng mới. Chúng rơi vào dòng chảy bình thường của một tài liệu, xếp hàng lần lượt và chỉ duy trì chiều rộng của nội dung của chúng. Các phần tử cấp độ nội tuyến có thể được lồng vào nhau; . Chúng ta thường thấy các phần tử cấp độ nội tuyến với các phần nội dung nhỏ hơn, chẳng hạn như một vài từ

Tuy nhiên, cả

<p>Steve Jobs was a co-founder and longtime chief executive officer at Apple. On June 12, 2005, Steve gave the commencement address at Stanford University.</p>

<p>In his address Steve urged graduates to follow their dreams and, despite any setbacks, to never give up&ndash;advice which he sincerely took to heart.</p>

<p>Steve Jobs was a co-founder and longtime chief executive officer at Apple. On June 12, 2005, Steve gave the commencement address at Stanford University.</p>

<p>In his address Steve urged graduates to follow their dreams and, despite any setbacks, to never give up&ndash;advice which he sincerely took to heart.</p>

<p>Steve Jobs was a co-founder and longtime chief executive officer at Apple. On June 12, 2005, Steve gave the commencement address at Stanford University.</p>

<p>In his address Steve urged graduates to follow their dreams and, despite any setbacks, to never give up&ndash;advice which he sincerely took to heart.</p>

<p>Steve Jobs was a co-founder and longtime chief executive officer at Apple. On June 12, 2005, Steve gave the commencement address at Stanford University.</p>

<p>In his address Steve urged graduates to follow their dreams and, despite any setbacks, to never give up&ndash;advice which he sincerely took to heart.</p>

Chúng ta thường thấy các thuộc tính

<p>Steve Jobs was a co-founder and longtime chief executive officer at Apple. On June 12, 2005, Steve gave the commencement address at Stanford University.</p>

<p>In his address Steve urged graduates to follow their dreams and, despite any setbacks, to never give up&ndash;advice which he sincerely took to heart.</p>

<p>Steve Jobs was a co-founder and longtime chief executive officer at Apple. On June 12, 2005, Steve gave the commencement address at Stanford University.</p>

<p>In his address Steve urged graduates to follow their dreams and, despite any setbacks, to never give up&ndash;advice which he sincerely took to heart.</p>

1
2
3
4
5
6
3 hoặc 
1
2
3
4
5
6
4 cho mục đích tạo kiểu. Chọn một giá trị hoặc tên thuộc tính 
1
2
3
4
5
6
3 hoặc 
1
2
3
4
5
6
4, cần cẩn thận một chút. Chúng tôi muốn chọn một giá trị đề cập đến nội dung của một phần tử, không nhất thiết phải là sự xuất hiện của một phần tử
Ví dụ: nếu chúng tôi có một 
<p>Steve Jobs was a co-founder and longtime chief executive officer at Apple. On June 12, 2005, Steve gave the commencement address at Stanford University.</p>

<p>In his address Steve urged graduates to follow their dreams and, despite any setbacks, to never give up&ndash;advice which he sincerely took to heart.</p>
0 với nền màu cam chứa các liên kết mạng xã hội, suy nghĩ đầu tiên của chúng tôi có thể là cung cấp cho 
<p>Steve Jobs was a co-founder and longtime chief executive officer at Apple. On June 12, 2005, Steve gave the commencement address at Stanford University.</p>

<p>In his address Steve urged graduates to follow their dreams and, despite any setbacks, to never give up&ndash;advice which he sincerely took to heart.</p>
0 một giá trị 
1
2
3
4
5
6
3 là 
<!-- Strong importance -->
<p><strong>Caution:</strong> Falling rocks.</p>

<!-- Stylistically offset -->
<p>This recipe calls for <b>bacon</b> and <b>baconnaise</b>.</p>
0. Điều gì xảy ra nếu nền màu cam đó sau đó được đổi thành màu xanh lam? . Lựa chọn hợp lý hơn cho giá trị 
1
2
3
4
5
6
3 sẽ là 
<!-- Strong importance -->
<p><strong>Caution:</strong> Falling rocks.</p>

<!-- Stylistically offset -->
<p>This recipe calls for <b>bacon</b> and <b>baconnaise</b>.</p>
4, vì nó liên quan đến nội dung của 
<p>Steve Jobs was a co-founder and longtime chief executive officer at Apple. On June 12, 2005, Steve gave the commencement address at Stanford University.</p>

<p>In his address Steve urged graduates to follow their dreams and, despite any setbacks, to never give up&ndash;advice which he sincerely took to heart.</p>
0, không phải kiểu
1
2
3
4
5
6
7
8
9
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
Nhận xét trong HTML & CSS
Đoạn mã trước bao gồm các dấu chấm than trong HTML và không sao cả. Đó không phải là yếu tố, đó là nhận xét
HTML và CSS cung cấp cho chúng tôi khả năng để lại nhận xét trong mã của chúng tôi và mọi nội dung được bao bọc trong nhận xét sẽ không được hiển thị trên trang web. Nhận xét giúp sắp xếp các tệp của chúng tôi, cho phép chúng tôi đặt lời nhắc và cung cấp cách để chúng tôi quản lý mã của mình hiệu quả hơn. Nhận xét trở nên đặc biệt hữu ích khi có nhiều người làm việc trên cùng một tệp
Nhận xét HTML bắt đầu bằng 
<!-- Strong importance -->
<p><strong>Caution:</strong> Falling rocks.</p>

<!-- Stylistically offset -->
<p>This recipe calls for <b>bacon</b> and <b>baconnaise</b>.</p>
6. Nhận xét CSS bắt đầu bằng 
<!-- Strong importance -->
<p><strong>Caution:</strong> Falling rocks.</p>

<!-- Stylistically offset -->
<p>This recipe calls for <b>bacon</b> and <b>baconnaise</b>.</p>
7 và kết thúc bằng 
<!-- Strong importance -->
<p><strong>Caution:</strong> Falling rocks.</p>

<!-- Stylistically offset -->
<p>This recipe calls for <b>bacon</b> and <b>baconnaise</b>.</p>
8
Sử dụng các yếu tố dựa trên văn bản
Nhiều hình thức truyền thông và nội dung khác nhau tồn tại trực tuyến; . Theo đó, có một số yếu tố khác nhau để hiển thị văn bản trên trang web. Hiện tại, chúng tôi sẽ tập trung vào các yếu tố phổ biến hơn, bao gồm tiêu đề, đoạn văn, văn bản in đậm để thể hiện tầm quan trọng và chữ nghiêng để nhấn mạnh. Sau đó, trong Bài học 6, “Làm việc với kiểu chữ”, chúng ta sẽ xem xét kỹ hơn cách tạo kiểu cho văn bản
tiêu đề
Tiêu đề là các yếu tố cấp độ khối và chúng có sáu thứ hạng khác nhau, 
<!-- Strong importance -->
<p><strong>Caution:</strong> Falling rocks.</p>

<!-- Stylistically offset -->
<p>This recipe calls for <b>bacon</b> and <b>baconnaise</b>.</p>
9 đến 
1
2
3
4
5
6
0. Các tiêu đề giúp nhanh chóng chia nhỏ nội dung và thiết lập hệ thống phân cấp và chúng là các định danh chính cho người dùng đang đọc một trang. Chúng cũng giúp các công cụ tìm kiếm lập chỉ mục và xác định nội dung trên một trang
Các tiêu đề nên được sử dụng theo thứ tự có liên quan đến nội dung của trang. Tiêu đề chính của một trang hoặc phần phải được đánh dấu bằng phần tử 
<!-- Strong importance -->
<p><strong>Caution:</strong> Falling rocks.</p>

<!-- Stylistically offset -->
<p>This recipe calls for <b>bacon</b> and <b>baconnaise</b>.</p>
9 và các tiêu đề tiếp theo nên sử dụng các phần tử 
1
2
3
4
5
6
2, 
1
2
3
4
5
6
3, 
1
2
3
4
5
6
4, 
1
2
3
4
5
6
5 và 
1
2
3
4
5
6
0 nếu cần
Mỗi cấp tiêu đề nên được sử dụng khi nó có giá trị về mặt ngữ nghĩa và không nên được sử dụng để in đậm hoặc làm to văn bản—có nhiều cách khác tốt hơn để làm điều đó
Dưới đây là một ví dụ về HTML cho tất cả các cấp tiêu đề khác nhau và hiển thị kết quả trên một trang web
1
2
3
4
5
6
7
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
Trình diễn tiêu đề
Xem Tiêu đề bút của Shay Howe (@shayhowe) trên CodePen
đoạn văn
Các tiêu đề thường được theo sau bởi các đoạn hỗ trợ. Các đoạn được xác định bằng cách sử dụng phần tử cấp khối 
<p>Steve Jobs was a co-founder and longtime chief executive officer at Apple. On June 12, 2005, Steve gave the commencement address at Stanford University.</p>

<p>In his address Steve urged graduates to follow their dreams and, despite any setbacks, to never give up&ndash;advice which he sincerely took to heart.</p>
4. Các đoạn có thể xuất hiện nối tiếp nhau, thêm thông tin vào trang theo ý muốn. Dưới đây là một ví dụ về cách thiết lập các đoạn văn
1
2
3
4
<p>Steve Jobs was a co-founder and longtime chief executive officer at Apple. On June 12, 2005, Steve gave the commencement address at Stanford University.</p>

<p>In his address Steve urged graduates to follow their dreams and, despite any setbacks, to never give up&ndash;advice which he sincerely took to heart.</p>
đoạn Demo
Xem Đoạn văn bằng bút của Shay Howe (@shayhowe) trên CodePen
Văn bản đậm với Mạnh
Để làm cho văn bản được in đậm và nhấn mạnh tầm quan trọng của nó, chúng ta sẽ sử dụng thành phần cấp độ nội tuyến 
1
2
3
4
5
6
8. Có hai yếu tố sẽ in đậm văn bản cho chúng tôi. các phần tử 
1
2
3
4
5
6
8 và 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
0. Điều quan trọng là phải hiểu sự khác biệt về ngữ nghĩa giữa hai
Phần tử 
1
2
3
4
5
6
8 được sử dụng về mặt ngữ nghĩa để nhấn mạnh tầm quan trọng của văn bản và do đó là tùy chọn phổ biến nhất để in đậm văn bản. Mặt khác, phần tử 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
0, về mặt ngữ nghĩa, có nghĩa là văn bản bù đắp theo phong cách, không phải lúc nào cũng là lựa chọn tốt nhất cho văn bản đáng được chú ý. Chúng tôi phải đánh giá tầm quan trọng của văn bản mà chúng tôi muốn đặt là in đậm và chọn một thành phần phù hợp
Dưới đây là hai tùy chọn HTML để tạo văn bản in đậm đang hoạt động
1
2
3
4
5
6
<!-- Strong importance -->
<p><strong>Caution:</strong> Falling rocks.</p>

<!-- Stylistically offset -->
<p>This recipe calls for <b>bacon</b> and <b>baconnaise</b>.</p>
Văn bản đậm với Bản trình diễn mạnh mẽ
Xem Văn bản in đậm bằng bút của Shay Howe (@shayhowe) trên CodePen
In nghiêng văn bản với nhấn mạnh
Để in nghiêng văn bản, do đó nhấn mạnh vào nó, chúng tôi sẽ sử dụng phần tử cấp độ nội tuyến 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
3. Cũng như các phần tử dành cho văn bản in đậm, có hai phần tử khác nhau sẽ in nghiêng văn bản, mỗi phần tử có một ý nghĩa ngữ nghĩa hơi khác nhau
Yếu tố 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
3 được sử dụng theo ngữ nghĩa để nhấn mạnh vào văn bản; . Tùy chọn khác, phần tử 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
5, được sử dụng về mặt ngữ nghĩa để truyền tải văn bản bằng giọng nói hoặc giọng điệu thay thế, gần giống như thể nó được đặt trong dấu ngoặc kép. Một lần nữa, chúng ta sẽ cần đánh giá tầm quan trọng của văn bản mà chúng ta muốn in nghiêng và chọn một yếu tố phù hợp
Đây là mã HTML để in nghiêng
1
2
3
4
5
6
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
In nghiêng văn bản với Emphasis Demo
Xem Văn bản in nghiêng bằng bút của Shay Howe (@shayhowe) trên CodePen
Các yếu tố cấp văn bản này khá tiện dụng để đưa nội dung của chúng ta vào cuộc sống. Ngoài ra, còn có các yếu tố dựa trên cấu trúc. Trong khi các phần tử dựa trên văn bản xác định tiêu đề và đoạn văn, thì các phần tử cấu trúc xác định các nhóm nội dung như đầu trang, bài viết, chân trang, v.v. Hãy cùng xem
Cấu trúc xây dựng
Trong thời gian dài nhất, cấu trúc của một trang web được xây dựng bằng cách chia. Vấn đề là sự phân chia không mang lại giá trị ngữ nghĩa và khá khó để xác định ý định của những sự phân chia này. May mắn thay, HTML5 đã giới thiệu các phần tử dựa trên cấu trúc mới, bao gồm các phần tử 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
6, 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
7, 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
8, 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
9, 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
00 và 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
01
Tất cả những yếu tố mới này nhằm mang lại ý nghĩa cho việc tổ chức các trang của chúng tôi và cải thiện ngữ nghĩa cấu trúc của chúng tôi. Chúng là tất cả các phần tử cấp khối và không có bất kỳ vị trí hoặc kiểu ngụ ý nào. Ngoài ra, tất cả các yếu tố này có thể được sử dụng nhiều lần trên mỗi trang, miễn là mỗi lần sử dụng phản ánh ý nghĩa ngữ nghĩa phù hợp
Hãy xắn tay áo lên và xem xét kỹ hơn
Hình 2
Một ví dụ khả thi về các thành phần cấu trúc HTML5 mang lại ý nghĩa cho việc tổ chức các trang của chúng tôi
tiêu đề
Phần tử 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
6, giống như âm thanh của nó, được sử dụng để xác định đầu trang, bài viết, phần hoặc phân đoạn khác của trang. Nói chung, phần tử 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
6 có thể bao gồm tiêu đề, văn bản giới thiệu và thậm chí cả điều hướng
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
0____27_______1
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
6 so với. 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
05 so với. 
<!-- Strong importance -->
<p><strong>Caution:</strong> Falling rocks.</p>

<!-- Stylistically offset -->
<p>This recipe calls for <b>bacon</b> and <b>baconnaise</b>.</p>
9 đến 
1
2
3
4
5
6
0 Phần tử
Rất dễ nhầm lẫn phần tử 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
6 với phần tử 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
05 hoặc các phần tử tiêu đề, 
<!-- Strong importance -->
<p><strong>Caution:</strong> Falling rocks.</p>

<!-- Stylistically offset -->
<p>This recipe calls for <b>bacon</b> and <b>baconnaise</b>.</p>
9 đến 
1
2
3
4
5
6
0. Tất cả chúng đều có ý nghĩa ngữ nghĩa khác nhau và nên được sử dụng theo ý nghĩa của chúng. Để tham khảo…
Phần tử 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
6 là phần tử cấu trúc phác thảo tiêu đề của một phân đoạn của trang. Nó nằm trong phần tử 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
13
Phần tử 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
05 không được hiển thị trên một trang và được sử dụng để phác thảo siêu dữ liệu, bao gồm tiêu đề tài liệu và liên kết đến các tệp bên ngoài. Nó nằm trực tiếp trong phần tử 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
15
Các thành phần tiêu đề, từ 
<!-- Strong importance -->
<p><strong>Caution:</strong> Falling rocks.</p>

<!-- Stylistically offset -->
<p>This recipe calls for <b>bacon</b> and <b>baconnaise</b>.</p>
9 đến 
1
2
3
4
5
6
0, được sử dụng để chỉ định nhiều cấp độ tiêu đề văn bản trong toàn bộ trang
dẫn đường
Phần tử 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
7 xác định một phần của các liên kết điều hướng chính trên một trang. Phần tử 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
7 chỉ nên dành riêng cho các phần điều hướng chính, chẳng hạn như điều hướng toàn cầu, mục lục, liên kết trước/tiếp theo hoặc các nhóm liên kết điều hướng đáng chú ý khác
Thông thường nhất, các liên kết có trong phần tử 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
7 sẽ liên kết đến các trang khác trong cùng một trang web hoặc đến các phần của cùng một trang web. Các liên kết một lần khác không nên được bao bọc trong phần tử 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
7; 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
0____27_______3
Bài báo
Phần tử 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
8 được sử dụng để xác định một phần nội dung độc lập, khép kín có thể được phân phối hoặc sử dụng lại một cách độc lập. Chúng tôi thường sử dụng phần tử 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
8 để đánh dấu các bài đăng trên blog, bài báo, nội dung do người dùng gửi và những nội dung tương tự
Khi quyết định có sử dụng phần tử 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
8 hay không, chúng tôi phải xác định xem nội dung bên trong phần tử có thể được sao chép ở nơi khác mà không có bất kỳ sự nhầm lẫn nào không. Nếu nội dung trong phần tử 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
8 bị xóa khỏi ngữ cảnh của trang và được đặt, chẳng hạn như trong email hoặc tác phẩm in, thì nội dung đó vẫn có ý nghĩa
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
0____27_______5
Tiết diện
Phần tử 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
9 được sử dụng để xác định một nhóm nội dung theo chủ đề, nhìn chung, nhưng không phải lúc nào cũng bao gồm một tiêu đề. Việc nhóm nội dung trong phần tử 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
9 có thể mang tính chất chung chung, nhưng sẽ hữu ích khi xác định tất cả nội dung có liên quan
Phần tử 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
9 thường được sử dụng để chia nhỏ và cung cấp phân cấp cho một trang
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
0____27_______7
Quyết định giữa các yếu tố 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
8, 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
9 hoặc 
<p>Steve Jobs was a co-founder and longtime chief executive officer at Apple. On June 12, 2005, Steve gave the commencement address at Stanford University.</p>

<p>In his address Steve urged graduates to follow their dreams and, despite any setbacks, to never give up&ndash;advice which he sincerely took to heart.</p>
0
Đôi khi, việc quyết định yếu tố nào—
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
8, 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
9 hoặc 
<p>Steve Jobs was a co-founder and longtime chief executive officer at Apple. On June 12, 2005, Steve gave the commencement address at Stanford University.</p>

<p>In his address Steve urged graduates to follow their dreams and, despite any setbacks, to never give up&ndash;advice which he sincerely took to heart.</p>
0 trở nên khá khó khăn—là yếu tố tốt nhất cho công việc dựa trên ý nghĩa ngữ nghĩa của nó. Mẹo ở đây, cũng như mọi quyết định ngữ nghĩa, là xem xét nội dung
Cả hai yếu tố 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
8 và 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
9 đều góp phần tạo nên cấu trúc của tài liệu và giúp phác thảo tài liệu. Nếu nội dung được nhóm chỉ vì mục đích tạo kiểu và không cung cấp giá trị cho đường viền của tài liệu, hãy sử dụng phần tử 
<p>Steve Jobs was a co-founder and longtime chief executive officer at Apple. On June 12, 2005, Steve gave the commencement address at Stanford University.</p>

<p>In his address Steve urged graduates to follow their dreams and, despite any setbacks, to never give up&ndash;advice which he sincerely took to heart.</p>
0
Nếu nội dung bổ sung vào dàn bài tài liệu và nội dung đó có thể được phân phối lại hoặc cung cấp thông tin độc lập, hãy sử dụng phần tử 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
8
Nếu nội dung bổ sung vào dàn ý của tài liệu và đại diện cho một nhóm nội dung theo chủ đề, hãy sử dụng phần tử 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
9
Qua một bên
Phần tử 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
00 chứa nội dung, chẳng hạn như thanh bên, phần chèn hoặc giải thích ngắn gọn, có liên quan tiếp tuyến với nội dung xung quanh nó. Ví dụ, khi được sử dụng trong phần tử 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
8, phần tử 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
00 có thể xác định nội dung liên quan đến tác giả của bài viết
Theo bản năng, chúng ta có thể nghĩ về phần tử 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
00 như một phần tử xuất hiện ở bên trái hoặc bên phải của trang. Tuy nhiên, chúng ta phải nhớ rằng tất cả các phần tử cấu trúc, bao gồm phần tử 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
00, là các phần tử cấp khối và như vậy sẽ xuất hiện trên một dòng mới, chiếm toàn bộ chiều rộng có sẵn của trang hoặc của phần tử mà chúng được lồng vào trong 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
0_______27_______9
Chúng ta sẽ thảo luận cách thay đổi vị trí của một thành phần, có thể đặt nó ở bên phải hoặc bên trái của một nhóm nội dung, trong Bài 5, “Định vị Nội dung. ”
chân trang
Phần tử 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
01 xác định phần cuối hoặc phần cuối của trang, bài viết, phần hoặc phân đoạn khác của trang. Nói chung, phần tử 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
01 được tìm thấy ở cuối phần tử gốc của nó. Nội dung trong phần tử 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
01 phải là thông tin tương đối và không được khác biệt với tài liệu hoặc phần mà nó được bao gồm trong đó
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
0____39_______1
Với các yếu tố cấu trúc và yếu tố dựa trên văn bản, kiến ​​thức HTML của chúng ta đang thực sự bắt đầu kết hợp với nhau. Bây giờ là thời điểm tốt để truy cập lại trang web Hội nghị Phong cách của chúng tôi và xem liệu chúng tôi có thể cung cấp cho trang web cấu trúc tốt hơn một chút hay không
Trong thực tế
Hiện tại, trang web Styles Conference của chúng tôi thiếu cấu trúc thực sự—và nội dung cho vấn đề đó. Hãy dành chút thời gian để hoàn thiện trang chủ của chúng tôi một chút
Sử dụng chỉ mục hiện tại của chúng tôi. html, hãy thêm vào phần tử 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
6. Phần tử 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
6 của chúng tôi phải bao gồm phần tử 
<!-- Strong importance -->
<p><strong>Caution:</strong> Falling rocks.</p>

<!-- Stylistically offset -->
<p>This recipe calls for <b>bacon</b> and <b>baconnaise</b>.</p>
9 hiện có của chúng tôi; 
1
2
3
4
5
6
7
2______39_______3
Sau phần tử 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
6 của chúng ta, hãy thêm một nhóm nội dung mới, sử dụng phần tử 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
9, giới thiệu hội nghị của chúng ta. Chúng ta sẽ bắt đầu phần này với một yếu tố 
1
2
3
4
5
6
2 mới và kết thúc nó bằng đoạn văn hiện có của chúng ta
1
2
3
4
5
6
7
2______39_______5
Sau phần giới thiệu về hội nghị của chúng ta, hãy thêm một nhóm nội dung khác giới thiệu một vài trang mà chúng ta sẽ thêm, cụ thể là các trang Diễn giả, Lịch biểu và Địa điểm. Mỗi trang mà chúng tôi giới thiệu cũng phải nằm trong phần riêng của nó và bao gồm văn bản hỗ trợ
Chúng tôi sẽ nhóm tất cả các đoạn giới thiệu bên trong một phần tử 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
9 và mỗi đoạn giới thiệu riêng lẻ cũng sẽ được bao bọc trong một phần tử 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
9. Tổng cộng, chúng ta sẽ có ba phần tử 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
9 bên trong một phần tử 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
9 khác, không sao cả
1
2
3
4
5
6
7
6
1
2
3
4
5
6
7
7
Cuối cùng, hãy thêm bản quyền của chúng tôi trong phần tử 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
01 ở cuối trang của chúng tôi. Để làm như vậy, hãy sử dụng phần tử 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
62, đại diện về mặt ngữ nghĩa cho các nhận xét bên lề và bản in nhỏ—hoàn hảo cho bản quyền của chúng tôi
Nói chung, nội dung trong phần tử 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
62 cũng sẽ được hiển thị nhỏ, nhưng việc đặt lại CSS của chúng tôi sẽ ngăn điều đó xảy ra
1
2
3
4
1
2
3
4
5
6
7
9
Bây giờ chúng ta có thể thấy trang chủ của mình bắt đầu hoạt động
Hình 2
Trang chủ của chúng tôi sau khi bổ sung thêm nội dung và cấu trúc
Mã hóa ký tự đặc biệt
Phần tử 
1
2
3
4
5
6
3 trong phần tử 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
6 của chúng tôi, cũng như phần tử 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
62 trong phần tử 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
01 của chúng tôi, có một số điều thú vị đang diễn ra. Cụ thể, một vài ký tự đặc biệt trong các phần tử này đang được mã hóa
Các ký tự đặc biệt bao gồm nhiều dấu chấm câu, chữ cái có dấu và ký hiệu. Khi gõ trực tiếp vào HTML, chúng có thể bị hiểu sai hoặc gõ nhầm ký tự; 
Mỗi ký tự được mã hóa sẽ bắt đầu bằng dấu và, 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
68 và kết thúc bằng dấu chấm phẩy, 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
69. Phần nằm giữa dấu và và dấu chấm phẩy là mã hóa duy nhất của một ký tự, có thể là mã hóa tên hoặc số
Ví dụ: chúng tôi sẽ mã hóa từ “sơ yếu lý lịch” thành 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
70. Trong tiêu đề của chúng tôi, chúng tôi đã mã hóa cả dấu gạch ngang và dấu gạch ngang, và trong phần chân trang, chúng tôi đã mã hóa ký hiệu bản quyền. Để tham khảo, có thể tìm thấy một danh sách dài các mã hóa ký tự tại Copy Paste Character
Khi trang chủ của chúng tôi đang hình thành, chúng ta hãy xem việc tạo siêu liên kết để chúng tôi có thể thêm các trang bổ sung và xây dựng phần còn lại của trang web của chúng tôi
Tạo siêu liên kết
Cùng với văn bản, một trong những thành phần cốt lõi của Internet là siêu liên kết, cung cấp khả năng liên kết từ trang web này hoặc tài nguyên này sang trang web hoặc tài nguyên khác. Các siêu liên kết được thiết lập bằng cách sử dụng phần tử neo, 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
22, cấp độ nội tuyến. Để tạo một liên kết từ một trang (hoặc tài nguyên) đến một trang khác, thuộc tính 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
72, được gọi là tham chiếu siêu liên kết, là bắt buộc. Giá trị thuộc tính 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
72 xác định đích của liên kết
Ví dụ: nhấp vào văn bản “Shay,” được bao bọc bên trong phần tử neo có giá trị thuộc tính 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
72 là 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
75, sẽ đưa người dùng đến trang web của tôi
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
0
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
1
Tạo siêu liên kết Demo
Xem Bút tạo siêu liên kết của Shay Howe (@shayhowe) trên CodePen
Bao bọc các phần tử cấp khối bằng các neo
Về bản chất, phần tử neo, 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
22, là một phần tử nội tuyến và theo tiêu chuẩn web, các phần tử cấp độ nội tuyến không được bao bọc các phần tử cấp độ khối. Tuy nhiên, với sự ra đời của HTML5, các phần tử neo đặc biệt có quyền bao bọc các phần tử khối, nội tuyến hoặc bất kỳ phần tử cấp nào khác. Đây là một sự khác biệt so với quy ước tiêu chuẩn, nhưng được phép để cho phép toàn bộ khối nội dung trên một trang trở thành liên kết
Đường dẫn tương đối & tuyệt đối
Hai loại liên kết phổ biến nhất là liên kết đến các trang khác của cùng một trang web và liên kết đến các trang web khác. Các liên kết này được xác định bởi các giá trị thuộc tính 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
72 của chúng, còn được gọi là đường dẫn của chúng
Các liên kết trỏ đến các trang khác của cùng một trang web sẽ có đường dẫn tương đối, không bao gồm tên miền (. com,. tổ chức,. giáo dục, v.v. ) trong giá trị thuộc tính 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
72. Vì liên kết đang trỏ đến một trang khác trên cùng một trang web nên giá trị thuộc tính 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
72 chỉ cần bao gồm tên tệp của trang được liên kết đến. 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
80 chẳng hạn
Nếu trang được liên kết nằm trong một thư mục hoặc thư mục khác, thì giá trị thuộc tính 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
72 cũng cần phản ánh điều này. Giả sử trang 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
80 nằm trong thư mục 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
83; 
Liên kết đến các trang web khác bên ngoài trang web hiện tại yêu cầu một đường dẫn tuyệt đối, trong đó giá trị thuộc tính 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
72 phải bao gồm tên miền đầy đủ. Một liên kết tới Google sẽ cần giá trị thuộc tính 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
72 là 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
87, bắt đầu bằng http và bao gồm tên miền, trong trường hợp này là 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
88
Tại đây, nhấp vào văn bản “Giới thiệu” sẽ mở trang 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
80 bên trong trình duyệt của chúng tôi. Mặt khác, nhấp vào văn bản “Google” sẽ mở 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
90 trong trình duyệt của chúng tôi
1
2
3
4
5
6
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
3
Liên kết đến một địa chỉ email
Đôi khi, chúng tôi có thể muốn tạo siêu kết nối đến địa chỉ email của mình—ví dụ: văn bản siêu kết nối có nội dung “Gửi email cho tôi”, khi được nhấp vào, siêu kết nối này sẽ mở ứng dụng email khách mặc định của người dùng và điền trước một phần email. Ở mức tối thiểu, địa chỉ email mà email được gửi đến phải được điền; 
Để tạo liên kết email, giá trị thuộc tính 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
72 cần bắt đầu bằng 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
92 theo sau là địa chỉ email mà email sẽ được gửi đến. Ví dụ, để tạo một liên kết email đến 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
93, giá trị thuộc tính 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
72 sẽ là 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
95
Ngoài ra, chủ đề, văn bản nội dung và thông tin khác cho email có thể được điền. Để thêm dòng chủ đề, chúng tôi sẽ bao gồm tham số 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
96 sau địa chỉ email. Tham số đầu tiên sau địa chỉ email phải bắt đầu bằng dấu chấm hỏi, 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
97, để liên kết tham số đó với đường dẫn siêu liên kết. Nhiều từ trong một dòng chủ đề yêu cầu khoảng trắng được mã hóa bằng cách sử dụng 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
98
Thêm văn bản nội dung hoạt động giống như cách thêm chủ đề, lần này sử dụng tham số 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
99 trong giá trị thuộc tính 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
72. Bởi vì chúng ta đang ràng buộc một tham số với một tham số khác nên chúng ta cần sử dụng dấu và, 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
68, để phân tách hai tham số. Đối với chủ đề, khoảng trắng phải được mã hóa bằng cách sử dụng 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
98 và ngắt dòng phải được mã hóa bằng cách sử dụng 
1
2
3
4
5
6
7
03
Nhìn chung, một liên kết đến 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
93 với chủ đề “Vươn ra ngoài” và phần nội dung là “Bạn có khỏe không” sẽ yêu cầu giá trị thuộc tính 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
72 là 
1
2
3
4
5
6
7
06
Đây là sự cố đầy đủ
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
0_______40_______5
Mở Liên kết trong Cửa sổ Mới
Một tính năng có sẵn với các siêu liên kết là khả năng xác định nơi một liên kết mở ra khi được nhấp vào. Thông thường, các liên kết mở trong cùng một cửa sổ mà từ đó chúng được nhấp vào; 
Để kích hoạt hành động mở một liên kết trong một cửa sổ mới, hãy sử dụng thuộc tính 
1
2
3
4
5
6
7
07 với giá trị là 
1
2
3
4
5
6
7
08. Thuộc tính 
1
2
3
4
5
6
7
07 xác định chính xác nơi liên kết sẽ được hiển thị và giá trị 
1
2
3
4
5
6
7
08 chỉ định một cửa sổ mới
Để mở 
1
2
3
4
5
6
7
11 trong một cửa sổ mới, mã sẽ như thế này
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
0_______40_______7
Liên kết đến các phần của cùng một trang
Theo định kỳ, chúng tôi sẽ thấy các siêu liên kết liên kết đến một phần của cùng một trang mà liên kết xuất hiện trên đó. Một ví dụ phổ biến về các liên kết cùng trang này là các liên kết “Trở lại đầu trang” đưa người dùng trở lại đầu trang
Chúng tôi có thể tạo liên kết trên trang bằng cách đặt thuộc tính 
1
2
3
4
5
6
4 trước tiên cho phần tử chúng tôi muốn liên kết đến, sau đó sử dụng giá trị của thuộc tính 
1
2
3
4
5
6
4 đó trong thuộc tính 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
72 của phần tử neo
Sử dụng liên kết “Trở lại đầu trang” làm ví dụ, chúng ta có thể đặt giá trị thuộc tính 
1
2
3
4
5
6
4 của top trên phần tử 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
13. Bây giờ chúng ta có thể tạo một phần tử neo với giá trị thuộc tính 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
72 là 
1
2
3
4
5
6
7
18, dấu thăng và tất cả, để liên kết đến phần đầu của phần tử 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
13
Mã của chúng tôi cho liên kết cùng trang này sẽ giống như sau
1
2
3
4
5
6
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
9
Các siêu liên kết cực kỳ hữu ích và đã cách mạng hóa cách chúng ta sử dụng Internet. Cho đến nay, chúng tôi đã giới thiệu cách liên kết đến các trang hoặc trang web khác, cũng như cách tạo liên kết email và liên kết đến các phần của cùng một trang. Trước khi chúng ta tiến xa hơn, hãy tạo một số liên kết của riêng chúng ta
Trong thực tế
Đã đến lúc đưa Styles Conference từ một trang web một trang thành một trang web đầy đủ với nhiều trang, tất cả sẽ được liên kết với nhau bằng siêu liên kết
Chúng ta sẽ bắt đầu bằng cách tạo văn bản “Hội nghị phong cách” bên trong phần tử 
<!-- Strong importance -->
<p><strong>Caution:</strong> Falling rocks.</p>

<!-- Stylistically offset -->
<p>This recipe calls for <b>bacon</b> and <b>baconnaise</b>.</p>
9 trong liên kết phần tử 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
6 của chúng tôi đến trang 
1
2
3
4
5
6
7
22
Bởi vì chúng ta đã ở trang 
1
2
3
4
5
6
7
22, điều này có vẻ hơi kỳ lạ—và đúng là như vậy—nhưng khi tiêu đề được sao chép trên các trang khác, liên kết trở lại trang chủ sẽ có ý nghĩa
1
2
3
4
1
2
3
4
1
Để điều hướng trên tất cả các trang khác nhau, chúng tôi sẽ thêm vào menu điều hướng, sử dụng phần tử 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
7, trong phần tử 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
6 của chúng tôi. Chúng tôi sẽ tạo các trang Diễn giả, Lịch trình, Địa điểm và Đăng ký để đi cùng với trang chủ của chúng tôi, vì vậy chúng tôi nên tạo liên kết cho tất cả chúng
1
2
3
4
2______42_______3
Hãy cũng thêm menu điều hướng tương tự từ phần tử 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
6 của chúng tôi vào phần tử 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
01 của chúng tôi để thuận tiện
1
2
3
4
2______42_______5
Trong phần tử 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
9 giới thiệu hội nghị của chúng tôi, ngay bên dưới tiêu đề của chúng tôi, chúng tôi cũng nên bao gồm một liên kết để đăng ký hội nghị. Đặt một liên kết bên dưới đoạn văn sẽ hoạt động hoàn hảo
1
2
3
4
6______42_______7
Chúng tôi không thể quên thêm liên kết đến tất cả các phần giới thiệu các trang khác của chúng tôi. Bên trong mỗi phần, hãy bọc cả hai phần tử 
1
2
3
4
5
6
3 và 
1
2
3
4
5
6
5 trong một phần tử neo liên kết đến trang thích hợp
Chúng tôi muốn đảm bảo rằng chúng tôi làm điều này cho mọi phần phù hợp
1
2
3
4
2______42_______9
Bây giờ chúng ta cần tạo một số trang mới. Hãy tạo các tệp 
1
2
3
4
5
6
7
31, 
1
2
3
4
5
6
7
32, 
1
2
3
4
5
6
7
33 và 
1
2
3
4
5
6
7
34. Các tệp này phải nằm trong cùng một thư mục với tệp 
1
2
3
4
5
6
7
22 và vì chúng tôi đang giữ chúng trong cùng một thư mục nên tất cả các liên kết của chúng tôi sẽ hoạt động như mong đợi
Để đảm bảo rằng tất cả các trang của chúng ta trông giống nhau, hãy đảm bảo rằng tất cả các tệp mới này có cùng cấu trúc tài liệu và các phần tử 
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
6 và 
<!-- Division -->
<div class="social">
  <p>I may be found on...</p>
  <p>Additionally, I have a profile on...</p>
</div>

<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
01 giống như tệp 
1
2
3
4
5
6
7
22
Đó là chính thức, chúng tôi không còn làm việc với một trang duy nhất mà thực sự là một trang web đầy đủ
Hình 2
Trang chủ của chúng tôi sau khi tất cả các liên kết và điều hướng khác nhau đã được thêm vào
Demo và mã nguồn
Bên dưới, bạn có thể xem trang web Styles Conference ở trạng thái hiện tại, cũng như tải xuống mã nguồn cho trang web ở trạng thái hiện tại
Xem Trang web Styles Conference  hoặc Tải xuống Mã nguồn  (Tệp zip)
Tóm lược
Ngữ nghĩa, như đã thảo luận trong bài học này, là điều cần thiết để cung cấp cho HTML của chúng ta cấu trúc và ý nghĩa. Trong tương lai, chúng tôi sẽ định kỳ giới thiệu các yếu tố mới, tất cả đều sẽ có ý nghĩa ngữ nghĩa riêng của chúng. Ý nghĩa của tất cả các yếu tố này sẽ cung cấp cho nội dung của chúng tôi giá trị nhất
Một lần nữa, trong bài học này, chúng tôi đã đề cập đến những điều sau đây
Ngữ nghĩa là gì và tại sao chúng lại quan trọng
<p>Steve Jobs was a co-founder and longtime chief executive officer at Apple. On June 12, 2005, Steve gave the commencement address at Stanford University.</p>

<p>In his address Steve urged graduates to follow their dreams and, despite any setbacks, to never give up&ndash;advice which he sincerely took to heart.</p>
0s và 
1
2
3
4
5
6
7
40s và sự khác biệt giữa các phần tử cấp độ khối và cấp độ nội tuyến
Yếu tố dựa trên văn bản nào thể hiện tốt nhất nội dung của trang
Các thành phần cấu trúc HTML5 và cách xác định cấu trúc cũng như tổ chức nội dung và trang của chúng tôi
Cách sử dụng siêu liên kết để điều hướng giữa các trang web hoặc trang web
Hy vọng rằng bạn đang bắt đầu cảm thấy khá tốt về HTML. Vẫn còn khá nhiều điều để tìm hiểu, nhưng nền tảng đã sẵn sàng. Tiếp theo, chúng ta sẽ tìm hiểu sâu hơn về CSS