Hướng dẫn how do i start writing in html? - làm cách nào để bắt đầu viết bằng html?
|
Một trình soạn thảo văn bản đơn giản là tất cả những gì bạn cần để học HTML. Show
Tìm hiểu HTML bằng Notepad hoặc TexteditCác trang web có thể được tạo và sửa đổi bằng cách sử dụng các biên tập viên HTML chuyên nghiệp. Tuy nhiên, để học HTML, chúng tôi đề xuất một trình soạn thảo văn bản đơn giản như Notepad (PC) hoặc Textedit (MAC). Chúng tôi tin rằng sử dụng một trình soạn thảo văn bản đơn giản là một cách tốt để học HTML. Thực hiện theo các bước bên dưới để tạo trang web đầu tiên của bạn với Notepad hoặc Textedit. Bước 1: Mở Notepad (PC)Windows 8 trở lên: Mở màn hình bắt đầu (biểu tượng cửa sổ ở phía dưới bên trái trên màn hình của bạn). Loại Notepad.Start Screen (the window symbol at the bottom left on your screen). Type Notepad. Windows 7 trở lên: Mở Bắt đầu> Chương trình> Phụ kiện> NotepadStart > Programs > Accessories > Notepad Bước 1: Mở Textedit (Mac)Open Finder> Ứng dụng> TexteditFinder > Applications > TextEdit Đồng thời thay đổi một số tùy chọn để có được ứng dụng để lưu chính xác các tệp. Trong Tùy chọn> Định dạng> Chọn "Văn bản thuần túy"In Preferences > Format > choose "Plain Text" Sau đó, trong "Mở và lưu", hãy chọn hộp có nội dung "Hiển thị các tệp HTML dưới dạng mã HTML thay vì văn bản được định dạng". Sau đó mở một tài liệu mới để đặt mã. Bước 2: Viết một số HTMLViết hoặc sao chép mã HTML sau vào Notepad: Tiêu đề đầu tiên của tôi Đoạn đầu tiên của tôi.  Bước 3: Lưu trang HTMLLưu tệp trên máy tính của bạn. Chọn Tệp> Lưu như trong menu Notepad.File > Save as in the Notepad menu. Đặt tên cho tệp "index.htm" và đặt mã hóa thành UTF-8 (đây là mã hóa ưa thích cho các tệp HTML)."index.htm" and set the encoding to UTF-8 (which is the preferred encoding for HTML files). Mẹo: Bạn có thể sử dụng .htm hoặc .html làm tiện ích mở rộng tệp. Không có sự khác biệt; điều đó phụ thuộc vào bạn. You can use either .htm or .html as file extension. There is no difference; it is up to you. Bước 4: Xem trang HTML trong trình duyệt của bạnMở tệp HTML đã lưu trong trình duyệt yêu thích của bạn (nhấp đúp vào tệp hoặc nhấp chuột phải - và chọn "Mở bằng"). Kết quả sẽ trông giống như thế này: Biên tập viên trực tuyến W3Schools - "Hãy tự mình thử"Với trình chỉnh sửa trực tuyến miễn phí của chúng tôi, bạn có thể chỉnh sửa mã HTML và xem kết quả trong trình duyệt của bạn. Nó là công cụ hoàn hảo khi bạn muốn kiểm tra mã nhanh. Nó cũng có mã hóa màu và khả năng lưu và chia sẻ mã với những người khác:test code fast. It also has color coding and the ability to save and share code with others: Thí dụ Tiêu đề trang Đây là một tiêu đề này là một đoạn văn. This is a paragraph. Tiêu đề đầu tiên của tôi Đoạn đầu tiên của tôi. W3Schools SpacesBước 3: Lưu trang HTMLfree website builder, called W3schools Spaces: HTML là nền tảng của hầu hết các trang web - đó là cách chúng tôi nói với trình duyệt cấu trúc nội dung thành tiêu đề, tiêu đề, đoạn văn, hình ảnh, liên kết, danh sách, biểu mẫu, bảng, v.v. Trong hướng dẫn này về HTML cho người mới bắt đầu, chúng tôi sẽ tìm hiểu HTML là gì và những gì nó sử dụng cho. Sau đó, chúng tôi sẽ đi qua cách viết HTML và xem xét một số yếu tố và thuộc tính phổ biến nhất trong ngôn ngữ. Cuối cùng, chúng tôi sẽ kết thúc với một cái nhìn ngắn gọn về một số tài nguyên bạn có thể sử dụng để tiếp tục học và sử dụng HTML. Bắt đầu nào. HTML là gì?HTML, viết tắt của ngôn ngữ đánh dấu siêu văn bản, là ngôn ngữ cốt lõi của World Wide Web. Được thiết kế ban đầu như một ngôn ngữ cho các tài liệu khoa học mô tả về mặt ngữ nghĩa, nó đã thích nghi để mô tả cấu trúc cơ bản của các trang web và các ứng dụng trực tuyến. Ví dụ, HTML có thể được sử dụng để chỉ định phần nào của tài liệu là một tiêu đề, là một danh sách và đó là một hình ảnh. Nó cũng có thể được sử dụng để siêu liên kết một từ, nhúng một hình ảnh, in nghiêng phông chữ, và nhiều hơn nữa. Được xuất bản lần đầu tiên bởi Tim Berners-Lee vào năm 1989, HTML hiện được sử dụng bởi 94% tất cả các trang web và có lẽ tất cả những trang web bạn truy cập. Nhưng chính xác thì nó là gì? Kiểm tra video ngắn này để biết định nghĩa nhanh về HTML, sau đó chúng tôi sẽ đi sâu hơn: Như đã đề cập ở trên, HTML là từ viết tắt của ngôn ngữ đánh dấu siêu văn bản. Hãy cùng phá vỡ từng từ này để hiểu rõ hơn về ý nghĩa của HTML. Văn bản của Hypertext là văn bản chứa các tham chiếu đến văn bản hoặc trang khác, còn được gọi là siêu liên kết. Siêu liên kết cho phép bạn đi bất cứ nơi nào trên web chỉ bằng một cú nhấp chuột. Thay vì đọc một trang web theo thứ tự tuyến tính mà tác giả đặt ra, như in, chúng ta có thể sử dụng các siêu liên kết để chuyển sang một phần khác của cùng một trang, một trang khác trên trang web hiện tại hoặc đến một trang web hoàn toàn mới. Ví dụ, ở đây, một siêu liên kết đưa độc giả trở lại đầu bài đăng trên blog này. Hyperlinks cũng có thể mở PDF, email hoặc đa phương tiện, như video hoặc tệp âm thanh. Liên kết thông tin với nhau theo cách này đã cách mạng hóa web. Cùng nhau, HTML và Internet giúp mọi người có thể truy cập tất cả các loại thông tin trên toàn thế giới, theo bất kỳ thứ tự nào họ muốn. Một lần nữa, Mark Markup đề cập đến cách HTML đánh dấu trang trên trang với các chú thích trong tệp HTML. Những chú thích này không được hiển thị trên chính trang web-chúng hoạt động ở phía sau-các cảnh cho các trình duyệt biết cách hiển thị tài liệu cho khách truy cập. Chúng tôi sẽ tìm hiểu thêm về đánh dấu này sớm. Ngôn ngữ của người Viking là phần đơn giản nhất của từ viết tắt để hiểu. Giống như bất kỳ ngôn ngữ nào, HTML được tạo thành từ một cú pháp và bảng chữ cái độc đáo. Nhưng chính xác thì đó là loại ngôn ngữ nào? Hãy để giải quyết câu hỏi này dưới đây. HTML có phải là ngôn ngữ lập trình không?Cho dù HTML là hoặc không phải là ngôn ngữ lập trình về mặt kỹ thuật là một cuộc tranh luận đang diễn ra giữa các nhà phát triển và chuyên gia web. Hãy xem cách chia một serp này về chủ đề: Mặc dù đa số định nghĩa HTML là ngôn ngữ đánh dấu, không phải là ngôn ngữ lập trình, một số người cho rằng hai aren sắt loại trừ lẫn nhau. Để hiểu sự khác biệt này, chúng ta phải biết định nghĩa của ngôn ngữ lập trình. Tất cả các ngôn ngữ lập trình có một số mục đích chức năng - họ cần phải làm một cái gì đó, cho dù đó là đánh giá các biểu thức, khai báo các biến hoặc sửa đổi dữ liệu. Những ngôn ngữ này không chỉ hướng dẫn máy tính những gì cần làm, mà còn làm thế nào để làm điều đó. JavaScript là ngôn ngữ lập trình được sử dụng rộng rãi nhất trong phát triển web. Các ngôn ngữ lập trình phổ biến khác bao gồm Python, Java và C/C ++. HTML, mặt khác, không thực sự làm gì cả. Nó chỉ đơn giản là cung cấp cho các trình duyệt nội dung cần thiết để hiển thị. HTML không quan tâm đến cách trình duyệt hiển thị nội dung, miễn là nó hiển thị. Nói cách khác, HTML có mục đích cấu trúc, không phải là chức năng. Tuy nhiên, một số nhà phát triển sử dụng logic tương tự này để lập luận rằng HTML là ngôn ngữ lập trình - nó chỉ là một ngôn ngữ lập trình khai báo. Theo giáo sư David Brailsford từ Đại học Nottingham, chẳng hạn, các ngôn ngữ tuyên bố bị hạn chế hơn nhiều so với các ngôn ngữ khác vì họ yêu cầu một cái gì đó và không quan tâm nó xảy ra như thế nào, nhưng điều đó không làm cho chúng trở thành một ngôn ngữ lập trình ít hơn . Bạn có thể xem cuộc tranh luận đầy đủ của anh ấy trong video này. Mặc dù đây là một điểm thảo luận thú vị và phong phú, nhưng có lẽ nó đã giành được ảnh hưởng đến cách bạn viết mã trong HTML. Với ý nghĩ đó, hãy để Lừa chuyển sang những gì HTML được sử dụng cho. HTML được sử dụng để làm gì?HTML chủ yếu được sử dụng để tạo các trang web. Bởi vì nó có nguồn mở và được hỗ trợ bởi tất cả các trình duyệt hiện đại, HTML được sử dụng miễn phí và đảm bảo văn bản, hình ảnh và các yếu tố khác của bạn được hiển thị dự định. Không có HTML, tất cả các trang web sẽ là các tệp văn bản đơn giản trông như thế này: Ngay cả sau khi thêm các tiêu đề, hình ảnh và siêu liên kết, bạn vẫn có một trang web rất cơ bản - và đó là thiết kế. HTML được cho là tạo ra một cơ sở đơn giản trên đó có thể thêm các bảng kiểu xếp tầng (CSS) và JavaScript (JS). Với CSS, bạn có thể tùy chỉnh kiểu dáng và bố cục của mình, thay đổi màu sắc, phông chữ và sự liên kết của các yếu tố. Với và JS, bạn có thể thêm chức năng động như cửa sổ bật lên và thanh trượt ảnh. HTML cũng được sử dụng để tạo ra những thứ khác ngoài các trang web. Bạn có thể sử dụng nó để:
Cho dù bạn muốn tạo các trang web, bảng, biểu mẫu hoặc email, bạn sẽ cần biết cách viết HTML. Hãy để phá vỡ quá trình dưới đây. Như đã đề cập, HTML chỉ là văn bản đơn giản được chú thích bằng đánh dấu. Chính xác hơn, đánh dấu này bao gồm các thẻ và thuộc tính. Để giúp bạn trực quan hóa cú pháp này, ở đây, một đồ họa: Chúng ta hãy xem xét kỹ hơn từng thành phần của phần tử HTML bên dưới. Thẻ HTMLCác yếu tố HTML được chỉ định bởi các thẻ. Hầu hết các yếu tố có thẻ mở và đóng. Mở thẻ đi trước văn bản và chứa tên phần tử được đặt bởi dấu ngoặc. Các thẻ đóng giống hệt với các thẻ mở, lưu cho một dấu gạch chéo ngược trước tên phần tử. Giả sử bạn muốn thêm một đoạn văn vào trang web của bạn và văn bản của đoạn văn là một đoạn văn. Bạn sẽ bọc nó với các thẻ đoạn HTML:. Vì vậy, HTML sẽ trông như thế này: Cùng nhau, ba điều này là tất cả những gì bạn cần tạo thành một yếu tố đoạn văn trong HTML. Hầu hết các phần tử HTML đều giống nhau: thẻ mở, thẻ đóng và nội dung ở giữa. Một số phần tử HTML, chẳng hạn như (break), chỉ có thẻ mở - chúng được gọi là thẻ trống. Tên phần tử không nhạy cảm trường hợp. Có nghĩa là, chúng có thể được viết bằng chữ hoa, chữ thường hoặc một số kết hợp của cả hai. Ví dụ, thẻ cũng có thể được viết là. Tuy nhiên, nó được coi là một thực tiễn tốt nhất để luôn viết tên bằng chữ thường. Thuộc tính HTMLTrong khi tất cả các phần tử HTML cần thẻ, chỉ một số thuộc tính cần. Một thuộc tính cung cấp thông tin bổ sung về phần tử HTML và thông tin này có thể là thiết yếu hoặc không cần thiết. Ví dụ: phần tử hình ảnh phải luôn có thuộc tính nguồn có giá trị là URL hoặc đường dẫn tệp hình ảnh. Nếu không, trình duyệt sẽ không biết hình ảnh nào để hiển thị. Điều tương tự cũng xảy ra với phần tử neo, được sử dụng để tạo các siêu liên kết - nó phải chứa thuộc tính HREF có giá trị chỉ định đích liên kết. Mặt khác, nếu một khách truy cập nhấp vào phần tử neo, trình duyệt đã giành được gửi cho họ bất cứ nơi nào. Các thuộc tính khác aren rất cần thiết để bao gồm nhưng được coi là một thực hành tốt. Ví dụ: trình duyệt có thể hiển thị một hình ảnh mà không cần thuộc tính Alt, chứa văn bản ALT hình ảnh. Nhưng, một người đọc bị khiếm thị có thể gặp khó khăn trong việc hiểu những gì hình ảnh truyền tải mà không có mô tả văn bản thay thế. Bây giờ chúng tôi hiểu tầm quan trọng của các thuộc tính, hãy để đảm bảo rằng chúng tôi hiểu cách tìm và viết chúng. Một thuộc tính luôn được tìm thấy trong thẻ mở của phần tử HTML và có cú pháp: name = giá trị giá trị. Nhiều yếu tố có bộ thuộc tính riêng ảnh hưởng đến cách hiển thị nội dung trên trang. Các thuộc tính có thể được viết theo bất kỳ thứ tự nào bên trong thẻ mở. Tuy nhiên, bạn không thể đặt nhiều phiên bản của cùng một thuộc tính bên trong cùng một thẻ HTML. Trước khi chúng tôi đi qua cách tạo tệp HTML, hãy xem xét những công cụ bạn cần. & NBSP; Cách sử dụng HTMLĐể bắt đầu sử dụng HTML, bạn cần một trình soạn thảo văn bản như Notepad ++ hoặc sublimetext. Vì một tệp HTML ở định dạng văn bản tiêu chuẩn, bất kỳ trình soạn thảo văn bản cơ bản nào & nbsp; sẽ hoạt động. Nhưng vì lợi ích của bản demo này và vì Sublimetext hoạt động cho Mac và Windows, chúng tôi sẽ đi qua quy trình bằng trình soạn thảo này. Bước 1: Tải xuống phiên bản mới nhất của văn bản siêu phàm.Chuyển đến trang tải xuống văn bản tuyệt vời & nbsp; và nhấp vào hệ điều hành của bạn. Một tập tin zip sẽ được tải xuống. Bước 2: Mở văn bản siêu phàm.Mở tệp zip và nhấp vào văn bản siêu phàm trong thư mục tải xuống của bạn. Trình chỉnh sửa sẽ tự động mở. Bước 3: Thêm HTML.Sao chép và dán HTML bên dưới vào trình soạn thảo. Chúng tôi sẽ giải thích mỗi yếu tố này có nghĩa là gì trong phần sau. Bước 4: Lưu tệp HTML.Chọn Tệp & nbsp;> Lưu AS & NBSP; trong menu Sublime. Đặt tên cho nó là chỉ mục.html. Lưu nó vào máy tính để bàn của bạn hoặc một thư mục khác.File > Save As in the Sublime menu. Name it “index.html.” Save it to your desktop or another folder. Bước 5: Xem tệp HTML trong trình duyệt của bạn.Bây giờ bạn có thể mở tệp HTML trong trình duyệt của mình. Bạn có thể nhấp đúp vào tệp, nhấp chuột phải và chọn mở hoặc kéo và thả nó trong cửa sổ Trình duyệt mở. Nó sẽ trông giống thế này: Bây giờ bạn đã biết cách sử dụng Trình chỉnh sửa HTML, hãy để xem cách viết mã thực tế. Cách tạo tệp HTMLĐể xây dựng một trang web với HTML, bạn cần tạo tệp HTML trước. Tệp này sẽ chứa tất cả HTML cho trang web của bạn và sẽ được tải lên máy chủ web của bạn. Theo cách đó, khi khách truy cập tìm kiếm trang web của bạn, máy chủ sẽ gửi tệp HTML đến trình duyệt của khách truy cập và trình duyệt sẽ hiển thị trang tương ứng. Dưới đây, chúng tôi sẽ đi qua từng bước quy trình để bạn có thể tạo tệp HTML cho dự án web của mình. Chúng tôi sẽ tạo tệp HTML đơn giản nhất có thể để người mới bắt đầu có thể theo dõi. Bước 1: Thêm khai báo.Để bắt đầu, bạn cần khai báo loại tài liệu là HTML. Để làm như vậy, thêm mã đặc biệt trên dòng đầu tiên của tệp. Bước 2: Thêm một phần tử. & NBSP;Tiếp theo, bạn sẽ muốn xác định phần tử gốc của tài liệu. Vì phần tử này báo hiệu ngôn ngữ mà bạn sẽ viết vào, nên nó sẽ luôn ở trong một tài liệu HTML5. Trên dòng bên dưới Tuyên bố DOCTYPE, thêm một thẻ mở. Dưới đây, thêm một thẻ đóng. Bước 3: Thêm thuộc tính ngôn ngữ.Trong thẻ mở của phần tử HTML, bạn cũng nên bao gồm thuộc tính Lang (ngôn ngữ). Điều này sẽ giúp sàng lọc người đọc xác định ngôn ngữ của tài liệu, làm cho trang web của bạn dễ truy cập hơn. Nếu không có thuộc tính ngôn ngữ, người đọc màn hình sẽ mặc định là ngôn ngữ của hệ điều hành, điều này có thể dẫn đến việc phát sóng sai tiêu đề và nội dung khác trên trang. Vì chúng tôi viết bài đăng này bằng tiếng Anh, chúng tôi sẽ đặt giá trị thuộc tính của tập tin Lang Lang thành Bước 4: Thêm phần đầu và cơ thể. & NBSP;Một tài liệu HTML bao gồm hai phần: phần đầu và phần cơ thể. Đầu chứa thông tin meta về trang cũng như bất kỳ CSS nội bộ nào. Trình duyệt không hiển thị thông tin này cho độc giả. Phần cơ thể chứa tất cả các thông tin sẽ được hiển thị ở mặt trước, như đoạn văn, hình ảnh và liên kết của bạn. Để tạo các phần này, hãy thêm một thẻ và sau đó là một thẻ giữa và trong tài liệu của bạn. Bước 5: Thêm một tiêu đề trong phần đầu.Trong phần đầu, bạn sẽ muốn đặt tên cho tài liệu của mình. Viết một tên (chúng tôi sẽ đi với trang HTML của tôi trong ví dụ này) và sau đó bọc nó trong các thẻ. Bước 6: Thêm thẻ và bất kỳ CS nội bộ nào trong phần đầu.Tôi cũng sẽ thêm các thẻ bên trong phần đầu. Giữa các thẻ này, bạn đã thêm bất kỳ CS nội bộ nào mà bạn sử dụng để tạo kiểu HTML của mình. Thay vì tạo ra một số quy tắc CSS, tôi sẽ chỉ thêm một bình luận trong CSS như một người giữ chỗ. Bạn cũng có thể thêm sự khen ngợi trong HTML cho bất cứ điều gì bạn không muốn trình duyệt hiển thị. Lưu ý: Trong nhiều tài liệu HTML, bạn đã giành được các thẻ kiểu hoặc bất kỳ CSS nào. Điều đó rất có thể có nghĩa là trang đang sử dụng một bảng kiểu bên ngoài, một cách phổ biến để thêm CSS vào HTML. Trong trường hợp biểu định kiểu bên ngoài, bạn sẽ thấy một liên kết trong phần đầu của tài liệu.: In many HTML documents, you won’t see style tags or any CSS. That most likely means the page is using an external style sheet, a common way of adding CSS to HTML. In the case of an external stylesheet, you’ll see a link in the head section of the doc. Bước 7: Thêm các phần tử HTML trong phần cơ thể.Trong phần cơ thể, bây giờ hãy để thêm một tiêu đề và đoạn văn. Bạn sẽ viết tên tiêu đề và quấn nó trong các thẻ, và viết ra đoạn văn và bọc nó trong các thẻ. Cuối cùng, đó là một thực tế phổ biến để thụt các yếu tố HTML lồng nhau. Mặc dù điều này không có sự khác biệt nào đối với trình duyệt xử lý tệp, thụt lề trực quan hóa cấu trúc của tài liệu và giúp đọc dễ dàng hơn. Ví dụ HTMLDưới đây là một ví dụ về tệp HTML cơ bản mà bất kỳ người mới bắt đầu nào cũng có thể tạo. Nó kết hợp mã được viết trong các bước trên. Dưới đây là cách nó sẽ nhìn vào mặt trước. Lưu ý rằng chỉ có tiêu đề và đoạn văn từ phần cơ thể được hiển thị. Nếu bạn muốn xem cách xây dựng tệp HTML phức tạp hơn với hình ảnh, liên kết, biểu mẫu và các yếu tố khác, hãy xem video này: Các yếu tố HTML phổ biếnPhiên bản đầu tiên của HTML chỉ bao gồm 18 thẻ. Kể từ đó, bốn phiên bản đã được phát hành với hàng tá thẻ được thêm vào mỗi phiên bản. Trong phiên bản gần đây nhất, HTML5, có 110 thẻ HTML. Các phần tử HTML thường xuất hiện chữ thường, với thẻ bắt đầu, thẻ kết thúc và một số nội dung ở giữa. Tuy nhiên, có những yếu tố như thế không có nội dung hoặc thẻ cuối. Chúng được gọi là các yếu tố trống. & NBSP; Dưới đây chúng tôi sẽ xem xét các yếu tố phổ biến nhất và thẻ của họ. Đoạn văn ()Phần tử đoạn HTML đại diện cho một đoạn văn. Bằng cách đặt các thẻ xung quanh văn bản, bạn sẽ làm cho văn bản đó bắt đầu trên một dòng mới. Ở đây, một ví dụ về hai đoạn văn: Xem ví dụ P Pen P của Christina Perricone (@HubSpot) trên Codepen. Hình ảnh ()Phần tử hình ảnh HTML nhúng một hình ảnh vào tài liệu. Nó yêu cầu một thuộc tính SRC (nguồn) để kết xuất đúng. Một thuộc tính Alt cũng nên được bao gồm trong trường hợp hình ảnh không tải đúng cách hoặc người đọc bị suy giảm thị giác. Ở đây, một ví dụ về hình ảnh có thuộc tính nguồn và alt: Xem ví dụ Pen IMG của Christina Perricone (@HubSpot) trên Codepen. Tiêu đề (-)Các yếu tố tiêu đề HTML đại diện cho các cấp độ khác nhau của các tiêu đề phần. là cấp độ phần cao nhất và nổi bật nhất, trong khi đó là thấp nhất và do đó ít nổi bật nhất. Xem ví dụ về tiêu đề bút của Christina Perricone (@HubSpot) trên Codepen. Phân công ()Phần tử phân chia nội dung HTML (Div) là một thùng chứa cấp khối chung cho nội dung dòng chảy. Nội dung lưu lượng là một danh mục các phần tử HTML có chứa văn bản hoặc nội dung được nhúng. Neo, báo giá khối và các yếu tố tiêu đề được coi là nội dung dòng chảy. Ở mặt sau, các yếu tố div giúp tổ chức mã thành các phần được đánh dấu rõ ràng. Ở mặt trước, họ thêm các lần ngắt dòng trước và sau nội dung của họ. Mặt khác, chúng không ảnh hưởng đến nội dung hoặc bố cục của trang trừ khi được tạo kiểu với CSS. Ở đây, một ví dụ về div được bao bọc xung quanh một hình ảnh: Xem Bút Div Ví dụ 1 của Christina Perricone (@HubSpot) trên Codepen. Ở đây, hình ảnh trông giống như nó đã làm mà không có phần tử trình bao bọc div. Đó là vì không có thông tin phong cách nào được cung cấp cho yếu tố div này. Để thay đổi sự xuất hiện của container và do đó hình ảnh bên trong container đó, bạn cần thêm thông tin kiểu. Nói, ví dụ, bạn muốn tập trung vào hình ảnh. Sau đó, bạn có thể sử dụng mã sau để tập trung theo chiều ngang hình ảnh trên trang: Xem Bút Div Ví dụ 2 của Christina Perricone (@HubSpot) trên Codepen. Span ()Phần tử HTML Span là một thùng chứa nội tuyến chung cho nội dung Phrasing. "Nội dung Phrasing đề cập đến văn bản và bất kỳ đánh dấu nào mà nó chứa, thích và thẻ. Thẻ Span không đại diện cho bất cứ điều gì, nhưng chúng được sử dụng để nhóm các nội dung phân nhóm vì hai lý do. Đầu tiên là áp dụng thông tin phong cách cho một đoạn văn bản cụ thể. Ví dụ: nếu bạn đang tạo mũ thả, bạn có thể viết chữ cái đầu tiên của các đoạn mở đầu của mỗi phần của bài viết của bạn trong các thẻ Span. Xem ví dụ về nhịp bút của Christina Perricone (@HubSpot) trên Codepen. Lý do thứ hai để sử dụng thẻ nhịp là các yếu tố nhóm đã chia sẻ các giá trị thuộc tính. Ví dụ, có thể bạn có một trang web cho người nói tiếng Anh học tiếng Pháp. Ngôn ngữ mặc định được đặt thành tiếng Anh nhưng trên một số trang, bạn có thể có một bảng với các thuật ngữ tiếng Pháp trong cột đầu tiên và bản dịch tiếng Anh của chúng trong cột thứ hai. Trong trường hợp đó, bạn có thể bọc các thuật ngữ của Pháp trong các thẻ SPAN với thuộc tính ngôn ngữ được đặt thành FR FR. Mỏ neo ()Phần tử neo HTML tạo ra một siêu liên kết. Phần tử neo yêu cầu một thuộc tính href, loài là đích của liên kết. Điểm đến có thể là một phần khác trên cùng một trang web hoặc một trang web khác trên cùng một trang web hoặc các trang web, tệp và địa chỉ email bên ngoài. Ở đây, một ví dụ về một liên kết được lồng trong một đoạn văn: Xem ví dụ neo bút của Christina Perricone (@HubSpot) trên Codepen. Danh sách chưa được đặt hàng ()Phần tử danh sách không theo thứ tự HTML được sử dụng để nhóm các mục khi đơn hàng không quan trọng. Danh sách mua sắm, ví dụ, don lồng cần phải tuân theo một đơn đặt hàng cụ thể. Danh sách các mục phải được xác định bởi thẻ và sau đó được bọc trong phần tử. Ở đây, một ví dụ về một danh sách không có thứ tự. Hãy thử thêm một số mục danh sách và xem danh sách thay đổi như thế nào. Xem ví dụ về bút của Christina Perricone (@HubSpot) trên Codepen. Danh sách được yêu cầu ()Phần tử danh sách theo thứ tự HTML được sử dụng để nhóm các mục khi đơn hàng không quan trọng. Công thức nấu ăn, ví dụ, nên tuân theo một đơn đặt hàng cụ thể. Các bước phải được xác định bởi thẻ và sau đó được bọc trong phần tử. Một danh sách được đặt hàng sẽ bắt đầu ở số 1 theo mặc định. Nếu bạn muốn bắt đầu ở một số khác, chỉ cần thêm thuộc tính bắt đầu và đặt giá trị thành số bạn muốn. Ở đây, một ví dụ về danh sách được đặt hàng bắt đầu tại 1. Hãy thử thêm các bước tại các phần khác nhau của danh sách: Xem ví dụ Pen ol của Christina Perricone (@HubSpot) trên Codepen. Nhấn mạnh ()Phần tử nhấn mạnh HTML nhấn mạnh văn bản mà nó chứa. Các trình duyệt thường hiển thị văn bản in nghiêng. Ở đây, một ví dụ về sự nhấn mạnh xung quanh một đoạn văn và được lồng trong một đoạn văn: Xem ví dụ về bút của Christina Perricone (@HubSpot) trên Codepen. Mạnh ()Phần tử mạnh HTML chỉ ra rằng văn bản nó chứa có tầm quan trọng hoặc cấp bách mạnh mẽ. Các trình duyệt thường hiển thị văn bản in đậm. Ở đây, một ví dụ về yếu tố mạnh: Xem bút ví dụ mạnh mẽ của Christina Perricone (@HubSpot) trên Codepen. Chú thích không được điều chỉnh ()Phần tử chú thích không được điều chỉnh đánh dấu văn bản là có một số hình thức chú thích phi văn bản. Ví dụ: bạn có thể sử dụng yếu tố này để chú thích các lỗi chính tả. & Nbsp; Xem phần tử chú thích không được điều chỉnh bằng bút của HubSpot (@HubSpot) trên Codepen. Nếu bạn muốn nhấn mạnh văn bản cho bất kỳ mục đích nào khác ngoài việc đại diện cho một chú thích phi văn bản, thì hãy sử dụng thuộc tính HTML Element hoặc CSS khác. Ví dụ: nếu bạn muốn nhấn mạnh văn bản để trang trí, bạn sẽ sử dụng thuộc tính trang trí văn bản CSS và thay vào đó, hãy đặt nó thành Nếu bạn muốn nhấn mạnh một tiêu đề sách, thì bạn sẽ sử dụng phần tử trích dẫn. Bàn ()Phần tử tạo ra một bảng để tổ chức nội dung theo cách dễ đọc trong nháy mắt. Nó yêu cầu ba yếu tố HTML khác:, và thẻ.
Đây là một ví dụ về một bảng: Xem bút không có tiêu đề bởi HubSpot (@HubSpot) trên Codepen. Quy tắc ngang ()Phần tử quy tắc ngang xác định một đường ngang trên một trang web. Nó có thể được sử dụng để đánh dấu bất kỳ thay đổi theo chủ đề nào, như cảnh tiếp theo trong một vở kịch, một phần mới của một bài luận hoặc kết luận của một bài báo. Dưới đây là một ví dụ được tạo lại từ Đại Tây Dương của một quy tắc ngang đánh dấu sự kết thúc của một bài báo và sự khởi đầu của tiểu sử của tác giả: Xem phần tử quy tắc ngang bút của HubSpot (@HubSpot) trên Codepen. Lựa chọnPhần tử chọn xác định danh sách các tùy chọn thả xuống, từ đó người dùng có thể chọn một tùy chọn (hoặc nhiều nếu được phép). Phần tử chọn thường được sử dụng trong các biểu mẫu HTML để thu thập các bài nộp của người dùng. Nó tốt nhất để chọn một tùy chọn trong số nhiều trong khi tối đa hóa không gian trên trang web. Xem Bút HTML Dropdown chỉ bằng HubSpot (@HubSpot) trên Codepen. Tiết diệnMột phần tử phần là phần tử HTML ngữ nghĩa đại diện cho các phần độc lập của nội dung liên quan trong một trang web. Ví dụ, một phần tử phần có thể được sử dụng để nhóm thông tin liên hệ. Trong ví dụ dưới đây, các phần tử phần được sử dụng để chia trang web thành các phần "Giới thiệu" và "liên hệ". Xem PEN Ví dụ phần tử phần của HubSpot (@HubSpot) trên CodePen. Ngắt dòng ()Phần tử phá vỡ dòng tạo ra một ngắt dòng nơi nó đặt. Điều đó có nghĩa là bạn có thể thêm nó bất cứ nơi nào bạn muốn văn bản kết thúc trên dòng hiện tại và tiếp tục tiếp theo. Yếu tố này có thể được sử dụng để hiển thị các bài thơ, lời bài hát hoặc các hình thức nội dung khác trong đó sự phân chia các dòng có ý nghĩa. Dưới đây là một ví dụ về một địa chỉ được hiển thị theo hai cách: một cách sử dụng các phần tử phá vỡ dòng và một ví dụ sử dụng các phần tử đoạn văn. Xem phần Ngắt Pen Paragraph vs Line Break của HubSpot (@HubSpot) trên Codepen. Thuộc tính HTML phổ biếnThuộc tính sửa đổi các phần tử HTML theo những cách khác nhau. Họ có thể thay đổi sự xuất hiện của phần tử, áp dụng các định danh duy nhất để các phần tử có thể được nhắm mục tiêu bởi CSS hoặc cung cấp thông tin cần thiết cho độc giả hoặc người đọc màn hình. Các thuộc tính thường xuất hiện chữ thường và dưới dạng các cặp tên/giá trị, với các giá trị của chúng trong trích dẫn. Dưới đây chúng tôi sẽ xem xét các thuộc tính phổ biến nhất. Thuộc tính phong cáchThuộc tính phong cách chứa CSS nội tuyến. CSS này sẽ ghi đè bất kỳ kiểu nào được đặt trong phần đầu của tài liệu hoặc trong bảng kiểu bên ngoài. Nó sẽ chỉ được áp dụng cho phần tử HTML có thuộc tính kiểu trong thẻ mở của nó. Ở đây, một ví dụ về thuộc tính trong HTML: 0Thuộc tính IDThuộc tính ID được sử dụng để xác định một phần tử duy nhất trong tệp HTML. Điều đó có nghĩa là giá trị của thuộc tính ID không nên được lặp lại bên trong cùng một tệp. Sử dụng giá trị duy nhất này, bạn có thể nhắm mục tiêu một phần tử duy nhất với CSS bên trong hoặc bên ngoài. Ở đây, một ví dụ về thuộc tính trong HTML: 1 |
