Hướng dẫn lập trình HTML5 - W3schools

Nhưng nếu bạn muốn xác nhận chặt chẽ hơn, hoặc nếu bạn cần làm cho tài liệu của bạn có thể đọc được bằng các trình phân tích cú pháp XML, bạn phải đóng tất cả các phần tử HTML đúng cách.

Trang 1

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

Tiêu đề HTML được định nghĩa với <h1>để <h6>thẻ

<h1>xác định tiêu đề quan trọng nhất <h6>xác định tiêu đề quan trọng nhất:

Trang 2

Điểm đến của liên kết được chỉ định trong hrefthuộc tính

Các thuộc tính được sử dụng để cung cấp thông tin bổ sung về các phần tử HTML.Bạn sẽ tìm hiểu thêm về các thuộc tính trong chương sau

Trang 3

Danh sách HTML được định nghĩa với <ul>(danh sách không có thứ tự / dấu đầu dòng) hoặc thẻ (danh sách được <ol>sắp xếp / đánh số), theo sau là <li>các thẻ (các mục danh sách):

< p > Đoạn đầu tiên của tôi < / p >

Các phần tử HTML không có nội dung được gọi là các phần tử rỗng Các phần tử trống không có thẻ kết thúc, chẳng hạn như phần tử <br> (cho biết dấu ngắt dòng)

Trang 4

</body>

</html>

Phần <body>tử xác định phần thân của tài liệu

Nó có thẻ bắt đầu <body> và thẻ kết thúc </ body>.

Nội dung phần tử là hai phần tử HTML khác ( <h1>và <p>).

<body>

</body>

Phần <h1>tử định nghĩa một tiêu đề

Nó có thẻ bắt đầu <h1> và thẻ kết thúc </ h1>.

Trang 5

Nội dung phần tử là: Tiêu đề đầu tiên của tôi.

Phần <p>tử định nghĩa một đoạn

Nó có một sự khởi đầu tag <p> và cuối thẻ </ p>.

Nội dung phần tử là: Đoạn đầu tiên của tôi.

Ví dụ trên hoạt động trong tất cả các trình duyệt, vì thẻ đóng được coi là tùy chọn

Không bao giờ dựa vào điều này Nó có thể tạo ra kết quả không mong muốn và / hoặc lỗi nếu bạn quên thẻ kết thúc.

Trang 6

HTML5 không yêu cầu phải đóng các phần tử rỗng Nhưng nếu bạn muốn xác nhận chặt chẽ hơn, hoặc nếu bạn cần làm cho tài liệu của bạn có thể đọc được bằng các trình phân tích cú pháp XML, bạn phải đóng tất cả các phần tử HTML đúng cách.

Các thẻ HTML không phân biệt chữ hoa chữ thường: <P> có nghĩa là <p>

Tiêu chuẩn HTML5 không yêu cầu thẻ chữ thường, nhưng W3C đề xuất chữ thường trong HTML và yêu cầu chữ thường cho các loại tài liệu chặt chẽ hơn như XHTML.III) Thuộc tính HTML

Các liên kết HTML được xác định bằng <a>thẻ Địa chỉ liên kết được chỉ định

trong hrefthuộc tính:

Thí dụ

Bạn sẽ tìm hiểu thêm về các liên kết và <a>thẻ sau trong hướng dẫn này

Hình ảnh HTML được xác định bằng <img>thẻ

Tên tệp của nguồn hình ảnh được chỉ định trong srcthuộc tính:

Trang 7

Thí dụ

Hình ảnh trong HTML có một tập hợp các thuộc tính kích thước , chỉ định chiều rộng và

chiều cao của hình ảnh:

Thí dụ

Kích thước hình ảnh được chỉ định bằng pixel: width = "500" có nghĩa là rộng 500 pixel

Trang 8

Ngôn ngữ của tài liệu có thể được khai báo trong <html>thẻ.

Ngôn ngữ được khai báo với langthuộc tính

Tuyên bố ngôn ngữ là quan trọng đối với các ứng dụng trợ năng (trình đọc màn hình) và các công cụ tìm kiếm:

Trang 9

Headings được định nghĩa với <h1>để <h6>thẻ.

<h1>xác định tiêu đề quan trọng nhất <h6>định nghĩa tiêu đề ít quan trọng nhất

Trang 10

Phần <head>tử HTML không liên quan gì đến các tiêu đề HTML.

Phần <head>tử là vùng chứa siêu dữ liệu Siêu dữ liệu HTML là dữ liệu về tài liệu HTML Siêu dữ liệu không được hiển thị

Phần <head>tử được đặt giữa <html>thẻ và <body>thẻ:

Trang 11

Lưu ý: Siêu dữ liệu thường xác định tiêu đề tài liệu, bộ ký tự, kiểu, liên kết, tập lệnh và

thông tin meta khác

Bạn không thể chắc chắn cách HTML sẽ được hiển thị

Màn hình lớn hoặc nhỏ và các cửa sổ đã được thay đổi kích thước sẽ tạo ra các kết quả khác nhau

Với HTML, bạn không thể thay đổi đầu ra bằng cách thêm các khoảng trống thừa hoặc các dòng thừa trong mã HTML của bạn

Trình duyệt sẽ xóa mọi khoảng trắng thừa và các dòng thừa khi trang được hiển thị:Thí dụ

Trang 12

Phần <pre>tử HTML định nghĩa văn bản được định dạng sẵn.

Văn bản bên trong một <pre>phần tử được hiển thị trong một phông chữ có chiều rộng cố định (thường là Courier), và nó bảo toàn cả khoảng trắng và dấu ngắt dòng:

Thí dụ

<pre>

My Bonnie lies over the ocean

My Bonnie lies over the sea

My Bonnie lies over the ocean

Oh, bring back my Bonnie to me

</pre>

Trang 13

Các bất động sản là một tài sản CSS Các giá trị là một giá trị CSS.

Bạn sẽ tìm hiểu thêm về CSS sau trong hướng dẫn này

Các background-colorbất động sản xác định màu nền cho một phần tử HTML

Ví dụ này đặt màu nền cho trang thành bột màu:

Trang 14

Các font-familybất động sản xác định phông chữ được sử dụng cho một phần tử HTML:Thí dụ

Trong chương trước, bạn đã tìm hiểu về thuộc tính kiểu HTML

HTML cũng định nghĩa các phần tử đặc biệt để xác định văn bản có ý nghĩa đặc biệt

HTML sử dụng các phần tử như <b>và <i>cho định dạng đầu ra, như chữ in đậm hoặc in

nghiêng

Các yếu tố định dạng được thiết kế để hiển thị các loại văn bản đặc biệt:

 <b> - Chữ in đậm

Trang 15

 <strong> - Văn bản quan trọng

 <i> - Văn bản in nghiêng

 <em> - Đoạn văn bản được nhân mạnh

 <mark> - Văn bản được đánh dấu

 <small> - Văn bản nhỏ

 <del> - Văn bản đã xóa

 <ins> - Văn bản được chèn

 <sub> - Văn bản đăng ký

 <sup> - Văn bản siêu văn bản

Phần <b>tử HTML xác định văn bản in đậm , không có bất kỳ tầm quan trọng nào

Thí dụ

Phần <strong>tử HTML xác định văn bản mạnh mẽ , với tầm quan trọng "mạnh mẽ" ngữ nghĩa bổ sung

Trang 16

Thí dụ

<i>This text is italic</i>

Phần <em>tử HTML xác định văn bản được nhấn mạnh , với tầm quan trọng ngữ nghĩa

bổ sung

Thí dụ

<em>This text is emphasized</em>

Lưu ý: Các trình duyệt hiển thị <strong>dưới dạng <b>và <em>như <i> Tuy nhiên, có

một sự khác biệt trong ý nghĩa của các thẻ: <b>và <i>định nghĩa chữ in đậm và in nghiêng, nhưng <strong>và <em>có nghĩa là văn bản là "quan trọng"

Trang 17

Phần <ins>tử HTML xác địnhđã chèn (đã thêm) văn bản.

Phần <q>tử HTML định nghĩa một báo giá ngắn

Các trình duyệt thường chèn dấu ngoặc kép xung quanh <q>phần tử

Thí dụ

<p>WWF's goal is to: <q>Build a future where people live in harmony with

nature.</q></p>

Phần <blockquote>tử HTML định nghĩa một phần được trích dẫn từ một nguồn khác.Trình duyệt thường thụt lề <blockquote>các phần tử

Trang 18

Thí dụ

<p>Here is a quote from WWF's website:</p>

For 50 years, WWF has been protecting the future of nature

The world's leading conservation organization,

WWF works in 100 countries and is supported by

1.2 million members in the United States and

close to 5 million globally

</blockquote>

Phần <abbr>tử HTML định nghĩa một từ viết tắt hoặc một từ viết tắt

Đánh dấu chữ viết tắt có thể cung cấp thông tin hữu ích cho các trình duyệt, hệ thống dịch

và công cụ tìm kiếm

Thí dụ

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in

1948.</p>

Phần <address>tử HTML định nghĩa thông tin liên hệ (tác giả / chủ sở hữu) của tài liệu hoặc bài viết

Phần <address>tử thường được hiển thị bằng chữ in nghiêng Hầu hết các trình duyệt sẽ thêm ngắt dòng trước và sau phần tử

Trang 19

5 HTML <cite> cho tiêu đề công việc

Phần <cite>tử HTML xác định tiêu đề của một tác phẩm

Trình duyệt thường hiển thị <cite>các phần tử in nghiêng

Thí dụ

<p><cite>The Scream</cite> by Edvard Munch Painted in 1893.</p>

Phần <bdo>tử HTML định nghĩa ghi đè hai hướng

Phần <bdo>tử được sử dụng để ghi đè hướng văn bản hiện tại:

Thí dụ

<bdo dir="rtl">This text will be written from right to left</bdo>

IX) Nhận xét HTML

Thẻ nhận xét HTML

Bạn có thể thêm nhận xét vào nguồn HTML của mình bằng cách sử dụng cú pháp sau:

<! Write your comments here >

Lưu ý rằng có một dấu chấm than (!) Trong thẻ mở, nhưng không có trong thẻ đóng

Lưu ý: Nhận xét không được trình duyệt hiển thị, nhưng chúng có thể giúp tài liệu mã

Trang 20

<! Remember to add more information here >

Nhận xét cũng tuyệt vời để gỡ lỗi HTML, bởi vì bạn có thể nhận xét các dòng mã HTML, mỗi lần một, để tìm kiếm các lỗi:

Thí dụ

<! Do not display this at the moment

Màu đường viền

Bạn có thể đặt màu của đường viền:

Thí dụ

<h1 style="border:2px solid Tomato;">Hello World</h1>

Giá trị màu

Trang 21

Trong HTML, màu sắc cũng có thể được chỉ định bằng cách sử dụng giá trị RGB, giá trị HEX, giá trị HSL, giá trị RGBA và giá trị HSLA:

XI) Kiểu HTML – CSS

CSS là viết tắt của C ascading S tyle S heets.

CSS mô tả cách các phần tử HTML được hiển thị trên màn hình, giấy hoặc trong các phương tiện khác

CSS tiết kiệm rất nhiều công sức Nó có thể kiểm soát bố trí của nhiều trang web cùng

một lúc

Có thể thêm CSS vào các phần tử HTML theo 3 cách:

 Inline - bằng cách sử dụng thuộc tính style trong các phần tử HTML

 Nội bộ - bằng cách sử dụng <style>phần tử trong <head>phần

 Bên ngoài - bằng cách sử dụng tệp CSS bên ngoài

Cách phổ biến nhất để thêm CSS là giữ các kiểu trong các tệp CSS riêng biệt Tuy nhiên,

ở đây chúng tôi sẽ sử dụng kiểu nội tuyến và kiểu nội bộ, vì điều này dễ dàng hơn để chứng minh và bạn dễ dàng tự mình thử nó hơn

Mẹo: Bạn có thể tìm hiểu thêm về CSS trong Hướng dẫn CSS của chúng tôi

Một CSS nội tuyến được sử dụng để áp dụng một kiểu duy nhất cho một phần tử HTML duy nhất

CSS nội tuyến sử dụng thuộc tính kiểu của phần tử HTML

Ví dụ này đặt màu văn bản của <h1>phần tử thành màu xanh:

Trang 22

Thí dụ

<h1 style="color:blue;">This is a Blue Heading</h1>

Một CSS nội bộ được sử dụng để xác định một kiểu cho một trang HTML duy nhất

Một CSS nội bộ được định nghĩa trong <head>phần của một trang HTML, bên trong một <style>phần tử:

Một bảng định kiểu bên ngoài được sử dụng để xác định kiểu cho nhiều trang HTML

Với một bảng định kiểu bên ngoài, bạn có thể thay đổi giao diện của toàn bộ trang web bằng cách thay đổi một tệp!

Để sử dụng một biểu định kiểu bên ngoài, hãy thêm nối kết vào nó trong <head>phần của trang HTML:

Trang 23

Một bảng định kiểu bên ngoài có thể được viết trong bất kỳ trình soạn thảo văn bản

nào Tệp không được chứa bất kỳ mã HTML nào và phải được lưu với phần mở rộng css.Dưới đây là cách giao diện "styles.css":

colorThuộc tính CSS định nghĩa màu văn bản sẽ được sử dụng

font-familyThuộc tính CSS định nghĩa phông chữ sẽ được sử dụng

font-size Thuộc tính CSS xác định kích thước văn bản sẽ được sử dụng

Trang 26

 Sử dụng <style>phần tử HTML để xác định CSS nội bộ

XII) HTML Links

Liên kết HTML - Siêu liên kết

Liên kết HTML là siêu liên kết

Bạn có thể nhấp vào liên kết và chuyển đến một tài liệu khác

Khi bạn di chuyển chuột qua một liên kết, mũi tên chuột sẽ biến thành một bàn tay nhỏ

Lưu ý: Liên kết không phải là văn bản Nó có thể là một hình ảnh hoặc bất kỳ phần tử

HTML nào khác

Trong HTML, các liên kết được xác định bằng <a>thẻ:

Trang 27

Thí dụ

<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

Các hrefthuộc tính xác định địa chỉ đích ( https://www.w3schools.com/html/ ) của liên kết

Các văn bản liên kết là phần nhìn thấy được (Thăm hướng dẫn HTML của chúng tôi).

Nhấp vào văn bản liên kết sẽ gửi bạn đến địa chỉ được chỉ định

Lưu ý: Nếu không có dấu gạch chéo ở cuối các địa chỉ thư mục con, bạn có thể tạo hai

yêu cầu tới máy chủ Nhiều máy chủ sẽ tự động thêm dấu gạch chéo chuyển tiếp vào cuốiđịa chỉ và sau đó tạo một yêu cầu mới

Ví dụ trên sử dụng URL tuyệt đối (địa chỉ web đầy đủ)

Liên kết cục bộ (liên kết đến cùng một trang web) được chỉ định bằng một URL tương đối(không có http: // www )

Thí dụ

<a href="html_images.asp">HTML Images</a>

Các targetthuộc tính xác định nơi để mở tài liệu được liên kết

Thuộc tính đích có thể có một trong các giá trị sau:

là mặc định)

Trang 28

 framename - Mở tài liệu được liên kết trong một khung có tên

Ví dụ này sẽ mở tài liệu được liên kết trong cửa sổ / tab trình duyệt mới:

Thí dụ

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

Mẹo: Nếu trang web của bạn bị khóa trong khung, bạn có thể sử dụng target="_top"để

thoát khỏi khung:

Thí dụ

<a href="https://www.w3schools.com/html/" target="_top">HTML5 tutorial!</a>

Thông thường sử dụng hình ảnh làm liên kết:

Thí dụ

</a>

Lưu ý: border:0; được thêm vào để ngăn chặn IE9 (và trước đó) hiển thị đường viền xung

quanh hình ảnh (khi hình ảnh là một liên kết)

Các titlethuộc tính xác định thông tin thêm về một phần tử Thông tin thường được hiển thị dưới dạng văn bản chú giải công cụ khi chuột di chuyển qua phần tử

Thí dụ

<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML

section">Visit our HTML Tutorial</a>

Trang 29

6 Liên kết HTML - Tạo dấu trang

Dấu trang HTML được sử dụng để cho phép người đọc chuyển đến các phần cụ thể của trang Web

Dấu trang có thể hữu ích nếu trang web của bạn rất dài

Để tạo dấu trang, trước tiên bạn phải tạo dấu trang và sau đó thêm liên kết vào đó

Khi liên kết được nhấp, trang sẽ cuộn đến vị trí có dấu trang

Thí dụ

Trước tiên, tạo dấu trang với idthuộc tính:

<h2 id="C4">Chapter 4</h2>

Sau đó, thêm liên kết vào dấu trang ("Chuyển đến Chương 4"), từ trong cùng một trang:

<a href="#C4">Jump to Chapter 4</a>

Hoặc, thêm liên kết vào dấu trang ("Chuyển đến Chương 4"), từ một trang khác:

Thí dụ

<a href="html_demo.html#C4">Jump to Chapter 4</a>

Tóm tắt chương

Trang 30

XIII) Hình ảnh HTML

Trong HTML, hình ảnh được xác định bằng <img>thẻ

Các <img>thẻ trống, nó chỉ chứa các thuộc tính, và không có một thẻ đóng

Các srcthuộc tính xác định URL (địa chỉ web) của hình ảnh:

Các altthuộc tính cung cấp một văn bản thay thế cho hình ảnh, nếu người sử dụng đối với một số lý do không thể xem nó (vì kết nối chậm, một lỗi trong các thuộc tính src, hoặc nếu người dùng sử dụng một trình đọc màn hình)

Giá trị của altthuộc tính phải mô tả hình ảnh:

Thí dụ

Nếu trình duyệt không thể tìm thấy hình ảnh, trình duyệt sẽ hiển thị giá trị của alt thuộc tính:

Thí dụ

Lưu ý: Các altthuộc tính là bắt buộc Một trang web sẽ không xác nhận chính xác mà

không có nó

Bạn có thể sử dụng stylethuộc tính để chỉ định chiều rộng và chiều cao của hình ảnh.Thí dụ

Trang 31

Ngoài ra, bạn có thể sử dụng widthvà heightcác thuộc tính:

Thí dụ

Các thuộc tính widthvà heightthuộc tính luôn xác định chiều rộng và chiều cao của hình ảnh theo pixel

Lưu ý: Luôn chỉ định chiều rộng và chiều cao của hình ảnh Nếu chiều rộng và chiều cao

không được chỉ định, trang có thể nhấp nháy khi hình ảnh tải

Các width, heightvà stylecác thuộc tính hợp lệ trong HTML5

Tuy nhiên, chúng tôi khuyên bạn nên sử dụng stylethuộc tính Nó ngăn cản các bảng định kiểu thay đổi kích thước hình ảnh:

</body>

</html>

Trang 32

Một số trang web lưu trữ hình ảnh của họ trên máy chủ hình ảnh.

Trên thực tế, bạn có thể truy cập hình ảnh từ bất kỳ địa chỉ web nào trên thế giới:

Trang 33

Thí dụ

</a>

Lưu ý: border:0; được thêm vào để ngăn chặn IE9 (và trước đó) hiển thị đường viền xung

quanh hình ảnh (khi hình ảnh là một liên kết)

Trang 35

Mỗi <source>phần tử có các thuộc tính mô tả khi hình ảnh của chúng phù hợp nhất.

Trình duyệt sẽ sử dụng <source>phần tử đầu tiên với các giá trị thuộc tính phù hợp và bỏ qua bất kỳ <source>phần tử nào sau đây

Thí dụ

Hiển thị một hình ảnh nếu cửa sổ trình duyệt (chế độ xem) tối thiểu là 650 pixel và một hình ảnh khác nếu không, nhưng lớn hơn 465 pixel

Trang 36

</picture>

Lưu ý: Luôn chỉ định <img>phần tử làm phần tử con cuối cùng của <picture>phần

tử Phần <img>tử được sử dụng bởi các trình duyệt không hỗ trợ <picture>phần tử hoặc nếu không có <source>thẻ nào phù hợp

Trình đọc màn hình HTML

Trình đọc màn hình là chương trình phần mềm đọc mã HTML, chuyển đổi văn bản và chophép người dùng "nghe" nội dung Trình đọc màn hình rất hữu ích cho những người mù, khiếm thị hoặc học bị vô hiệu hóa

Tóm tắt chương

nó không thể được hiển thị

(cách khác)

Trang 37

 Sử dụng <area>phần tử HTML để xác định các khu vực có thể nhấp trong bản đồ hình ảnh

Một bảng HTML được định nghĩa với <table>thẻ

Mỗi hàng trong bảng được xác định bằng <tr>thẻ Tiêu đề bảng được xác định

bằng <th>thẻ Theo mặc định, các tiêu đề bảng được in đậm và căn giữa Dữ liệu bảng / ôđược xác định bằng <td>thẻ

Trang 38

<td>Jackson</td>

</tr>

</table>

Lưu ý: Các <td>phần tử là các thùng chứa dữ liệu của bảng

Chúng có thể chứa tất cả các loại phần tử HTML; văn bản, hình ảnh, danh sách, các bảng khác, v.v

Nếu bạn không chỉ định đường viền cho bảng, nó sẽ được hiển thị mà không có đường viền

Đường viền được đặt bằng thuộc tính CSS border:

Thí dụ

table, th, td {

border: 1px solid black;

}

Hãy nhớ xác định đường viền cho cả bảng và các ô của bảng

Nếu bạn muốn các đường viền sụp đổ thành một đường viền, hãy thêm thuộc tính

Trang 39

Nếu bạn không chỉ định một padding, các ô bảng sẽ được hiển thị mà không có padding.

Để đặt padding, sử dụng thuộc tính CSS padding:

Thí dụ

th, td {

padding: 15px;

}

Theo mặc định, các tiêu đề bảng được in đậm và căn giữa

Để căn trái các tiêu đề bảng, hãy sử dụng thuộc tính CSS text-align:

Thí dụ

th {

text-align: left;

}

Khoảng cách đường viền chỉ định khoảng cách giữa các ô

Để đặt khoảng cách đường viền cho một bảng, hãy sử dụng thuộc tính CSS spacing:

Trang 40

Để tạo một khoảng thời gian di động nhiều hơn một cột, hãy sử dụng colspanthuộc tính:Thí dụ

Định dạng
Số trang	96
Dung lượng	264,21 KB