Danh sách thẻ html5 với các ví dụ
HTML cung cấp cấu trúc của trang web. Dưới đây là một số ví dụ về cách sử dụng cú pháp HTML để xây dựng trang web, bao gồm một số ví dụ về các tính năng HTML5 mới hơn Show
Ví dụ về thuộc tính HrefThuộc tính 3 đề cập đến một đích được cung cấp bởi một liên kết. Thẻ (anchor) 4 đã chết nếu không có thuộc tính 5. Đôi khi trong quy trình làm việc của bạn, bạn không muốn có một liên kết trực tiếp hoặc bạn chưa biết đích đến của liên kết. Trong trường hợp này, sẽ hữu ích khi đặt thuộc tính 6 thành 7 để tạo liên kết chết. Thuộc tính 6 có thể được sử dụng để liên kết đến các tệp cục bộ hoặc tệp trên internetVí dụ
Thuộc tính 3 được hỗ trợ bởi tất cả các trình duyệtThêm thuộc tính 0. Chỉ định ngôn ngữ của tài nguyên được liên kết. 1. Chỉ định ngữ cảnh trong đó tài nguyên được liên kết sẽ mở. 2. Xác định tiêu đề của một liên kết, xuất hiện cho người dùng dưới dạng chú giải công cụví dụ
Neo trong trangCũng có thể đặt một điểm neo ở một vị trí nhất định trên trang. Để làm điều này, trước tiên bạn nên đặt một tab tại vị trí trên trang có thẻ và thuộc tính cần thiết “tên” với bất kỳ mô tả từ khóa nào trong đó, như thế này
Bất kỳ mô tả giữa các thẻ là không bắt buộc. Sau đó, bạn có thể đặt một liên kết dẫn đến neo này ở bất kỳ vị trí nào trên cùng một trang. Để làm điều này, bạn nên sử dụng thẻ có thuộc tính cần thiết “href” với ký hiệu # (sắc nét) và mô tả từ khóa của anchor, như thế này
Liên kết hình ảnh 3 cũng có thể được áp dụng cho hình ảnh và các phần tử HTML khácThí dụ
Thí dụVí dụ về mục tiêu AThuộc tính 4 chỉ định nơi mở tài liệu được liên kết trong thẻ (anchor) 4ví dụ Thuộc tính đích có giá trị “_blank” sẽ mở tài liệu được liên kết trong một cửa sổ hoặc tab mới
Thuộc tính đích có giá trị “_self” sẽ mở tài liệu được liên kết trong cùng một khung khi nó được nhấp (đây là giá trị mặc định và thường không cần chỉ định)
Thuộc tính đích có giá trị “_parent” sẽ mở tài liệu được liên kết trong khung chính
Thuộc tính đích có giá trị “_top” sẽ mở tài liệu được liên kết trong toàn bộ cửa sổ
Thuộc tính đích có giá trị “framename” Mở tài liệu được liên kết trong một khung được đặt tên cụ thể 0Ví dụ về thuộc tính nền cơ thểNếu bạn muốn thêm hình nền thay vì màu, một giải pháp là thuộc tính 6. Nó chỉ định hình nền cho tài liệu HTMLcú pháp 7Thuộc tính 8Thí dụ 1thuộc tính nền cơ thể không được dùng nữathuộc tính body-background không được dùng trong HTML5. Cách chính xác để tạo kiểu cho thẻ 9 là sử dụng CSSCó một số thuộc tính CSS được sử dụng để đặt nền cho phần tử. Chúng có thể được sử dụng để đặt nền cho toàn bộ trang Ví dụ về thuộc tính Body BgcolorThuộc tính 0 chỉ định màu nền cho tài liệu HTMLcú pháp 1 Giá trị màu có thể là tên màu (như, 2) hoặc giá trị hex (như, 3)Để thêm màu nền cho trang web, bạn có thể sử dụng thuộc tính 4. Nó chỉ định một màu cho tài liệu HTML để hiển thịVí dụ 2Bạn có thể thay đổi màu bằng cách thay thế ###### bằng giá trị thập lục phân. Đối với các màu đơn giản, bạn cũng có thể sử dụng từ, chẳng hạn như “đỏ” hoặc “đen” Tất cả các trình duyệt chính đều hỗ trợ thuộc tính 0Ghi chú
Ví dụ về thuộc tính Div AlignThuộc tính 0 được sử dụng để căn chỉnh văn bản trong thẻ div sang Trái, Phải, căn giữa hoặc căn lềVí dụ 3Quan trọngThuộc tính này không còn được hỗ trợ trong html5. css là con đường để đi Thuộc tính Div Align có thể được sử dụng để căn chỉnh nội dung theo chiều ngang trong div. Trong ví dụ dưới đây, văn bản sẽ được căn giữa trong div 4**Thuộc tính này không được hỗ trợ trong HTML5 và CSS Text Align nên được sử dụng thay thế Ví dụ thuộc tính màu phông chữThuộc tính này được sử dụng để đặt màu cho văn bản nằm trong thẻ 1Quan trọngThuộc tính này không được hỗ trợ trong HTML5. Thay vào đó, bài viết freeCodeCamp này chỉ định một phương thức CSS, có thể được sử dụng Ghi chúCũng có thể chỉ định màu bằng cách sử dụng 'mã hex' hoặc 'mã rgb', thay vì sử dụng tên Thí dụ
5Thuộc tính mã hex 6Thuộc tính RGB 7Ví dụ thuộc tính cỡ chữThuộc tính này chỉ định kích thước phông chữ ở dạng số hoặc giá trị tương đối. Các giá trị số nằm trong khoảng từ 2 đến 3 với ____21_______2 là giá trị nhỏ nhất và ____21_______5 là giá trị mặc định. Nó cũng có thể được xác định bằng cách sử dụng một giá trị tương đối, chẳng hạn như 6 hoặc 7, đặt giá trị này tương ứng với giá trị của thuộc tính size của phần tử 8 hoặc tương đối với 5, giá trị mặc định, nếu không tồn tạicú pháp 0Thí dụ 8Ghi chú. 1Ví dụ về thuộc tính Img AlignThuộc tính căn chỉnh của hình ảnh chỉ định nơi hình ảnh sẽ được căn chỉnh theo thành phần xung quanh Giá trị thuộc tính Ví dụ 9Chúng tôi cũng có thể căn chỉnh bên phải nếu chúng tôi muốn 0Xin lưu ý rằng thuộc tính căn chỉnh không được hỗ trợ trong HTML5 và bạn nên sử dụng CSS để thay thế. Tuy nhiên, nó vẫn được hỗ trợ bởi tất cả các trình duyệt chính Thuộc tính chiều rộng ImgThuộc tính 'chiều rộng' của HTML đề cập đến chiều rộng của hình ảnh. Giá trị trong trích dẫn là số lượng pixel Ví dụ: nếu bạn đã thiết lập liên kết đến hình ảnh qua thuộc tính 2, bạn có thể thêm thuộc tính chiều rộng như vậy 1Trong đoạn mã trên có một thẻ hình ảnh và hình ảnh được đặt ở chiều rộng 100 pixel. 3Ví dụ về thuộc tính Img SrcThuộc tính 4 đề cập đến nguồn của hình ảnh bạn muốn hiển thị. Thẻ 5 sẽ không hiển thị hình ảnh nếu không có thuộc tính 2. Tuy nhiên, nếu bạn đặt nguồn vào vị trí của hình ảnh, bạn có thể hiển thị bất kỳ hình ảnh nàoCó một hình ảnh của Logo freeCodeCamp tại 7Bạn có thể đặt nó làm hình ảnh bằng thuộc tính 2 2Đoạn mã trên hiển thị như thế này Thuộc tính 2 được hỗ trợ bởi tất cả các trình duyệtBạn cũng có thể có tệp được lưu trữ cục bộ dưới dạng hình ảnh của mình Ví dụ: 00 sẽ hoạt động nếu bạn có một thư mục tên là 01 có chứa _____11_______02 bên trong, miễn là thư mục 'hình ảnh' ở cùng vị trí với tệp 03 04 05Ví dụ thực thể HTMLTổng quanThực thể HTML là gì?HTML entities are characters that are used to replace reserved characters in HTML or for characters that do not appear on your keyboard. Some characters are reserved in HTML. If you use the less than(<) or greater than(>) signs in your text, the browser might mix them up with tags. Chúng nó được dùng cho cái gì?Như đã đề cập về các thực thể HTML được sử dụng để thay thế các ký tự dành riêng được dành riêng bởi HTML Làm thế nào để bạn sử dụng chúng?Một thực thể nhân vật trông giống như thế này 3Hoặc là 4Hướng dẫn tham khảoĐây không phải là một danh sách đầy đủ nhưng các liên kết bên dưới sẽ có thể cung cấp cho bạn nhiều thực thể hơn nếu những thực thể bên dưới không phù hợp với nhu cầu của bạn. mã hóa hạnh phúc. cà vạt 5Ví dụ biểu mẫu HTMLVề cơ bản, các biểu mẫu được sử dụng để thu thập dữ liệu do người dùng nhập, sau đó được gửi đến máy chủ để xử lý thêm. Chúng có thể được sử dụng cho các loại đầu vào khác nhau của người dùng, chẳng hạn như tên, email, v.v. Biểu mẫu chứa các thành phần điều khiển được bọc quanh các thẻ 06, như 07, có thể có các loại như
Ví dụ về mã 6Các yếu tố khác mà hình thức có thể chứa
THÔNG TIN THÊM VỀ MẪU HTML Biểu mẫu HTML được yêu cầu khi bạn muốn thu thập một số dữ liệu từ khách truy cập trang web. Ví dụ: trong quá trình đăng ký người dùng, bạn muốn thu thập thông tin như tên, địa chỉ email, thẻ tín dụng, v.v. Một biểu mẫu sẽ lấy đầu vào từ khách truy cập trang web và sau đó sẽ đăng nó lên một ứng dụng phụ trợ, chẳng hạn như CGI, ASP Script hoặc PHP script, v.v. Ứng dụng back-end sẽ thực hiện xử lý cần thiết trên dữ liệu đã truyền dựa trên logic nghiệp vụ đã xác định bên trong ứng dụng Có sẵn nhiều thành phần biểu mẫu khác nhau như trường văn bản, trường vùng văn bản, menu thả xuống, nút radio, hộp kiểm, v.v. Thẻ HTML 25 được sử dụng để tạo biểu mẫu HTML và nó có cú pháp sau - 7Nếu phương thức biểu mẫu không được xác định thì nó sẽ mặc định là “GET” Thẻ biểu mẫu cũng có thể có một thuộc tính có tên là “mục tiêu” chỉ định nơi liên kết sẽ mở. Nó có thể mở trong tab trình duyệt, khung hoặc trong cửa sổ hiện tại Thuộc tính hành động xác định hành động sẽ được thực hiện khi biểu mẫu được gửi. Thông thường, dữ liệu biểu mẫu được gửi đến một trang web tại URL tập lệnh khi người dùng nhấp vào nút gửi. Nếu thuộc tính hành động bị bỏ qua, hành động được đặt thành trang hiện tại Ví dụ âm thanh HTML5Trước HTML5, các tệp âm thanh phải được phát trong trình duyệt bằng trình cắm như Adobe Flash. HTML Đoạn mã sau thêm một tệp âm thanh có tên tệp 26 hoặc 27. Phần tử cho biết các tệp âm thanh thay thế mà trình duyệt có thể chọn từ. Trình duyệt sẽ sử dụng định dạng được công nhận đầu tiênví dụ 1 8ví dụ 2 9Thuộc tính 28 bao gồm các điều khiển âm thanh như phát, tạm dừng và âm lượng. Nếu bạn không sử dụng thuộc tính này thì sẽ không có điều khiển nào được hiển thịPhần tử 29 cho phép bạn chỉ ra các tệp âm thanh thay thế mà trình duyệt có thể chọn từ. Trình duyệt sẽ sử dụng định dạng nhận dạng đầu tiên. Văn bản giữa các thẻ 30 và 31 có thể được hiển thị trong trình duyệt không hỗ trợ phần tử 30 của HTML5Thuộc tính autoplay sẽ tự động phát tệp âm thanh của bạn ở chế độ nền. Tốt hơn là cho phép khách truy cập chọn phát âm thanh Thuộc tính tải trước cho biết trình duyệt sẽ làm gì nếu trình phát không được đặt ở chế độ tự động phát Thuộc tính vòng lặp sẽ phát tệp âm thanh của bạn trong một vòng lặp liên tục nếu được đề cập Vì đây là html5 nên một số trình duyệt không hỗ trợ. Bạn có thể kiểm tra nó tại Ví dụ về phần tử ngữ nghĩa HTML5Các phần tử HTML ngữ nghĩa mô tả rõ ràng ý nghĩa của nó theo cách mà con người và máy có thể đọc được. Các phần tử như 33, 34 và 35 đều được coi là có ngữ nghĩa vì chúng mô tả chính xác mục đích của phần tử và loại nội dung bên trong chúngLịch sử nhanhHTML ban đầu được tạo ra như một ngôn ngữ đánh dấu để mô tả các tài liệu trên internet sơ khai. Khi internet phát triển và được nhiều người sử dụng hơn, nhu cầu của nó đã thay đổi. Nơi mà internet ban đầu được dùng để chia sẻ tài liệu khoa học, bây giờ người ta muốn chia sẻ cả những thứ khác nữa. Rất nhanh chóng, mọi người bắt đầu muốn làm cho web trông đẹp hơn. Bởi vì web ban đầu không được xây dựng để thiết kế, các lập trình viên đã sử dụng các cách hack khác nhau để sắp xếp mọi thứ theo những cách khác nhau. Thay vì sử dụng 36 để mô tả thông tin bằng bảng, các lập trình viên sẽ sử dụng chúng để định vị các thành phần khác trên trang. Khi việc sử dụng các bố cục được thiết kế trực quan phát triển, các lập trình viên bắt đầu sử dụng một thẻ "phi ngữ nghĩa" chung chung như 37. Họ thường gán cho những yếu tố này thuộc tính 38 hoặc 39 để mô tả mục đích của chúng. Ví dụ, thay vì 33, điều này thường được viết là 41. Vì HTML5 vẫn còn tương đối mới nên việc sử dụng các phần tử phi ngữ nghĩa này vẫn còn rất phổ biến trên các trang web ngày nayDanh sách các yếu tố ngữ nghĩa mớiCác phần tử ngữ nghĩa được thêm vào trong HTML5 là
Các phần tử như 33, 51, 52, 35, 43 và 34 ít nhiều hành động giống như phần tử 37. Chúng nhóm các phần tử khác lại với nhau thành các phần của trang. Tuy nhiên, khi thẻ 37 có thể chứa bất kỳ loại thông tin nào, thì rất dễ xác định loại thông tin nào sẽ đi vào vùng ngữ nghĩa 33Một ví dụ về bố cục phần tử ngữ nghĩa của w3schools Lợi ích của các yếu tố ngữ nghĩaĐể xem xét lợi ích của các yếu tố ngữ nghĩa, đây là hai đoạn mã HTML. Khối mã đầu tiên này sử dụng các yếu tố ngữ nghĩa 0Trong khi khối mã thứ hai này sử dụng các phần tử phi ngữ nghĩa 1Đầu tiên, nó dễ đọc hơn nhiều. Đây có lẽ là điều đầu tiên bạn sẽ nhận thấy khi nhìn vào khối mã đầu tiên sử dụng các phần tử ngữ nghĩa. Đây là một ví dụ nhỏ, nhưng là một lập trình viên, bạn có thể đọc qua hàng trăm, hàng nghìn dòng mã. Mã đó càng dễ đọc và hiểu thì công việc của bạn càng dễ dàng Nó có khả năng tiếp cận lớn hơn. Bạn không phải là người duy nhất thấy các yếu tố ngữ nghĩa dễ hiểu hơn. Công cụ tìm kiếm và công nghệ hỗ trợ (như trình đọc màn hình dành cho người dùng khiếm thị) cũng có thể hiểu rõ hơn về ngữ cảnh và nội dung trang web của bạn, nghĩa là mang lại trải nghiệm tốt hơn cho người dùng của bạn Nhìn chung, các yếu tố ngữ nghĩa cũng dẫn đến mã nhất quán hơn. Khi tạo tiêu đề bằng các phần tử phi ngữ nghĩa, các lập trình viên khác nhau có thể viết phần này là 41, 65, 66 hoặc đơn giản là 37. Có rất nhiều cách để bạn có thể tạo phần tử tiêu đề và tất cả chúng đều phụ thuộc vào sở thích cá nhân của người lập trình. Bằng cách tạo một yếu tố ngữ nghĩa tiêu chuẩn, nó giúp mọi người dễ dàng hơnKể từ tháng 10 năm 2014, HTML4 đã được nâng cấp lên HTML5, cùng với một số yếu tố “ngữ nghĩa” mới. Cho đến ngày nay, một số người trong chúng ta vẫn có thể bối rối không hiểu tại sao có quá nhiều yếu tố khác nhau mà dường như không có bất kỳ thay đổi lớn nào.
This is a dead link
This is a live link to freeCodeCamp
more with a href attribute This is a dead link
This is a live link to freeCodeCamp
more with a href attribute |