Ví dụ về cú pháp trong HTML
|
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 Ví dụ Thuộc tính Thêm thuộc tínhví 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 ảnhThí dụThí dụVí dụ về mục tiêu AThuộc tính ví 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ể Ví 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 cú pháp Thuộc tính Thí dụ thuộ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ẻ Có 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 cú pháp Để thêm màu nền cho trang web, bạn có thể sử dụng thuộc tính Ví dụ Bạ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 Ghi chú
Ví dụ về thuộc tính Div AlignThuộc tính Ví dụ Quan 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 **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 được đặt trong thẻ Quan 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ụ
Thuộc tính mã hex Thuộc tính RGB Ví 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ừ cú pháp Thí dụ Ghi chú. Ví 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ụ Chúng tôi cũng có thể căn chỉnh bên phải nếu chúng tôi muốn Xin 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 tới hình ảnh qua thuộc tính Trong đoạn mã trên có một thẻ hình ảnh và hình ảnh được đặt ở chiều rộng 100 pixel. Ví dụ về thuộc tính Img SrcThuộc tính Có một hình ảnh của Biểu trưng freeCodeCamp tại Bạn có thể đặt nó làm hình ảnh bằng thuộc tính Đoạn mã trên hiển thị như thế này Thuộc tính Bạ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ụ: Tổ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 Hoặc Hướ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. nơ Ví 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 bao quanh các thẻ ________ 1106, như ________ 1107, có thể có các loại như
Ví dụ về mã Cá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 Nế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 ví dụ 1ví dụ 2Thuộc tính Phần tử Thuộ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 https. // caniuse. com/#search=âm thanh 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ư Lị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 Danh 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ư Mộ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 Trong khi khối mã thứ hai này sử dụng các phần tử phi ngữ nghĩa Đầ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à Kể 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.
freeCodeCampfreeCodeCamp |
