Mã html phát triển web
|
Xin chào các bạn đặc biệt là các bạn mới học ngành web này. Đây là series về kiến thức HTML cơ bản toàn tập dành cho người mới mà mình quyết định viết và chia sẻ cách học, cách sử dụng ứng dụng vào thực tế như thế nào, cấu trúc ra sao… thông qua những năm kinh tế . Hi vọng những kiến thức về HTML cơ bản toàn tập mà mình chia sẻ sẽ giúp các bạn hiểu hơn về HTML cơ bản cũng như sử dụng chúng một cách tốt nhất Show Mình thấy nhiều bạn mới học ở nhiều nguồn như w3schools hay MDN là những nguồn học nước ngoài tốt, tuy nhiên đôi khi các bạn đọc tiếng Anh cũng không hiểu như học xong không biết các thẻ trong HTML có những thẻ gì, áp dụng ra . OK bắt đầu thôi nào  5 bước tìm hiểu sơ lược thành phần web HTML động Cách tạo Switch trên iPhone bằng HTML và CSS # Constructor a tag in HTML that you should knowỞ trong HTML thì việc tìm hiểu cấu trúc một thẻ có thể quá dễ dàng tuy nhiên các bạn mới học thì nên biết chúng trông như thế nào và cách sử dụng ra sao để làm cho chuẩn hơn <p>Content</p> Ở trên thì là thẻ p với <img src="" alt=""/>9 là thẻ mở sau đó đến nội dung là chữ <img src="" alt="">content</img>0 rồi đến thẻ đóng là <img src="" alt="">content</img>1 các bạn thấy thẻ đóng nó giống thẻ mở nhưng có dấu <img src="" alt="">content</img>2 phía trước nhé. Ngoài ra sau này các bạn học thêm thì sẽ thấy có một số thẻ người ta gọi là thẻ tự đóng nó như thế này <img src="" alt=""/> Các thẻ có cấu trúc như trên gọi là thẻ tự đóng nghĩa là chúng ta không thể truyền nội dung vào giữa như thẻ đóng mở ở chỗ thẻ p mình nói ở trên, nếu các bạn có mã như dưới đây là sai nhé, vì thế khi <img src="" alt="">content</img> # Các thuộc tính của thẻ trong HTMLCác thẻ trong HTML được tạo ra đều có các thuộc tính đi kèm ví dụ như lớp, id là chung nhất bên ngoài mỗi thẻ sẽ có thêm các thuộc tính riêng ví dụ như thẻ a thì sẽ có <img src="" alt="">content</img>3, <img src="" alt="">content</img>4, đầu vào thì <img src="" alt="">content</img>5, <img src="" alt=""/>2 Còn nếu thẻ đó không có mà các bạn đã đưa nó vào thì nhìn mã của các bạn nó tệ lắm như thế này <img src="" alt=""/>3 Các bạn nhìn vậy có thể sẽ nói sao mà code vậy được chứ mình thấy nhiều bạn mới hay code như này lắm nên mình chia sẻ ở đây nếu các bạn đang đọc blog của mình thì sẽ biết mà né để lấy code của các bạn tốt Thuộc tính thì rất nhiều và thẻ cũng thế, mình sẽ cố gắng liệt kê kèm theo giải thích cho các bạn dễ hiểu nhất trong những phần mình sẽ viết tiếp dưới đây # Sự khác nhau giữa thẻ block và thẻ inlineKhi các bạn học tới các thẻ thì hay bị cái là dùng thẻ này thẻ kia mà không biết chúng khác nhau như thế nào từ đó dẫn tới mã công việc HTML không tốt hoặc sai mục đích…Thì mình sẽ giải thích cho các bạn biết Để nhận biết nhanh nhất đó chính là vào trang web htmltham khảo. io ở trang này nó sẽ tổng hợp toàn bộ các thẻ trong HTML và có mục đánh dấu thẻ nào là thẻ nội tuyến thẻ nào là chặn, thẻ nào là thẻ đóng mở, thẻ nào là thẻ tự động đóng luôn để các bạn biết cách sử dụng cho Quay lại vấn đề chính thì thẻ nội tuyến và thẻ chặn có những điểm gì mà các bạn cần lưu ý
<img src="" alt=""/>4
# Tất tần tật các thẻ trong HTML hay được sử dụng nhiều nhấtỞ những mục trên mình đã nói về cấu trúc cơ bản của một thẻ, các thuộc tính trong HTML, sự khác nhau giữa thẻ nội tuyến và khối thẻ và cách sử dụng đúng rồi đấy. Ở mục này và các bài tiếp theo của series này mình sẽ tập trung nói về các thẻ, các tính năng kèm theo giải thích chi tiết hơn và cách sử dụng cho các bạn để các bạn không biết thông tin hơn về HTML nhé. ## Thẻ pThẻ p là thẻ khối, thẻ p có thuộc tính hay dùng là lớp, id. Thẻ p theo mình nghĩ nó là viết tắt của đoạn là thẻ đại diện cho các đoạn văn bản, ví dụ các bạn đang đọc bài viết của mình các bạn nhấn F12 sẽ thấy các đoạn văn bản đều nằm trong thẻ p, vì thế khi . Tuy nhiên đoạn chữ ngắn vài 3 chữ dùng thẻ p cũng không sao cả, tuy nhiên chữ ngắn thì mình khuyến khích sử dụng thẻ inline hoặc các thẻ tiêu đề hơn <img src="" alt=""/>5 ## Thẻ div Là khối thẻ, thẻ div cũng có các thuộc tính như class, id. Thẻ div là thẻ được sử dụng rộng rãi nhất hiện nay. Nó thường được sử dụng cho bất kỳ khối nào lớn, bên trong khối đó có thể có nhiều khối nhỏ (cũng là thẻ div) hoặc thẻ p, và nhiều thẻ khác. Các bạn sẽ sử dụng nó rất nhiều khi viết mã HTML và nó cũng có thể chứa văn bản như thẻ p nhé, tuy nhiên khi sử dụng thẻ p thì về mặt nghĩa thì thẻ p sẽ rõ ràng hơn cho việc đại diện văn bản <img src="" alt=""/>6 ## Thẻ a Là cái thẻ nội tuyến, thẻ này dùng cho các liên kết, tức là những người bạn muốn cho người dùng nhấn vào một trang web nào đó hoặc chỉ đơn giản là cuộn tới mục nào đó trong nội dung với mục điều kiện phải có id và trong <img src="" alt=""/>7 Trong thẻ các bạn cần biết 3 thuộc tính quan trọng chính là <img src="" alt="">content</img>8, href sẽ truyền vào đường dẫn hoặc như mình nói ở trên dấu #, đích thì có 2 giá trị thông thường được sử dụng nhiều nhất là <img src="" alt="">content</img>9 và <img src="" alt=""/>20, _self thì Còn <img src="" alt=""/>21 thì khi các bạn sử dụng với mục tiêu có giá trị là <img src="" alt=""/>20 thì Google Chrome khuyến khích thêm vào giá trị cho liên quan là <img src="" alt=""/>23 để tăng tính bảo mật. Default value in target is <img src="" alt="">content</img>9 rồi nên các bạn không cần ghi vào cũng được, ví dụ dưới đây <img src="" alt="">content</img>5 Khi làm việc với thẻ các bạn cần lưu ý thêm nữa là thẻ không nên bọc thẻ vì như vậy nó sẽ sai về mã và ý nghĩa sử dụng vì khi được nhấn vào liên kết, nó đã chạy rồi sẽ không có tác dụng cho <img src="" alt=""/>0 Bên trong thẻ a có thể chứa nhiều thẻ khác luôn nhé như thẻ khối khác, thẻ nội tuyến…Sau đây, mã giao diện của bạn mà có cho phép người dùng nhấn vào một khối nào đó thì chắc chắn rằng bạn sẽ sử dụng thẻ a bao lại hết ## Thẻ imgLà thẻ nội tuyến và là tự đóng nên không truyền nội dung vào giữa các thẻ đóng mở khác được. Thẻ này được sử dụng rất nhiều trong trang web để hiển thị hình ảnh, thẻ img có 2 thuộc tính chính mà các bạn cần nắm đó là <img src="" alt=""/>25 và <img src="" alt=""/>26 trong đó src truyền vào đường dẫn hình ảnh để hiển thị hình ảnh lên trang web, <img src="" alt=""/>1 Ngoài ra trong thẻ img còn có thêm thuộc tính <img src="" alt=""/>27 để hiển thị hình ảnh ở nhiều kích thước màn hình khác nhau tuy nhiên thuộc tính này hơi khó sử dụng cho người mới nên mình không thích ở phạm vi dành cho người mới## Các thẻ tiêu đề Các thẻ tiêu đề là những thẻ <img src="" alt=""/>28 là thẻ chặn và thường đại diện cho các tiêu đề từ nhỏ đến nhỏ và có cách sử dụng khác nhau nhé(h1 là to nhất đến h6 là nhỏ nhất). Thẻ h1 là thẻ thường được sử dụng cho một tiêu đề đến trang web nhất và lưu ý trong một trang web thì chỉ có tối đa một thẻ h1 mà thôi, vì nó ảnh hưởng đến SEO cho nên nếu các bạn sử dụng nhiều hơn Thẻ h2 được sử dụng cho một khối lớn, các bạn sẽ thấy khi làm trang đích giao diện thật hạn chế, vậy thẻ h2 này được sử dụng làm tiêu đề cho một khối nào đó để người ta biết được khối đó là gì Thẻ h3 được sử dụng nhỏ hơn ở bên trong các khối lớn sẽ có các bài viết nhỏ, khối nhỏ thì sử dụng h3 và cứ thế khối nhỏ hơn cho đến h4, h5, rồi h6. Các bạn có thể thấy thực tế luôn là bài mà các bạn đang đọc nè tiêu đề trên cùng là h1 đó, trong nội dung sẽ có các tiêu đề nhỏ hơn là h2, h3, h4, h5 hay h6… <img src="" alt=""/>2 Như tên gọi của nó thì nó được dùng cho cấu trúc có tiêu đề ví dụ như tiêu đề khối, tiêu đề bài viết, tiêu đề blog, các bạn xem hình minh hoạ là hiểu ngay đó mà…. Bên trong nó có thể chứa thẻ a, hoặc các thẻ nội tuyến khác, hoặc chặn thẻ… Và các bạn lưu ý đừng mã như bên dưới này nhé <img src="" alt=""/>3 Hoặc các đoạn văn bản dài như ở thẻ p thì nên dùng thẻ p hoặc thẻ div chứ không phải dùng những thẻ tiêu đề này cho đoạn văn bản quá dài nha ## Thẻ danh sáchThẻ danh sách thì có 2 thẻ chính với cấu trúc hoặc sử dụng là <img src="" alt=""/>29 và <img src="" alt=""/>30. Trong đó ul nghĩa là unorderedlist nghĩa là danh sách không có thứ tự, tức là khi sử dụng nó sẽ hiển thị dưới dạng như thế này với các dấu chấm tròn mặc định khung hoặc dựa vào CSS sẽ nói sau điều này
Còn ol là orderedlist nghĩa là danh sách có thứ tự tức thời được đánh số như mục lục vậy 1 2
Cấu trúc ul li được sử dụng rất nhiều khi làm menu như thế này <img src="" alt=""/>4 Lưu ý thêm thẻ li cũng không bọc trực tiếp thẻ li để tránh lỗi nhé nó như dưới đây <img src="" alt=""/>5 Tuy nhiên, nó sẽ được bọc lại khi không phải trực tiếp li li mà là li ul li để làm menu đa cấp trong HTML hoặc được sử dụng như sau <img src="" alt=""/>6 ## Các ngữ nghĩa của thẻ Các ngữ nghĩa của thẻ các bạn có thể sẽ thấy khi kiểm tra mã blog mình hoặc các blog trang web khác… như thẻ header, thẻ footer, thẻ nav, thẻ side, thẻ bài viết, thẻ chính, thẻ phần thì các bạn có thể hiểu như Tuy nhiên như mình nói sử dụng những thẻ này thì nhìn cấu trúc mã nó rõ ràng mạch lạc hơn là vì nhìn vào là biết nó làm gì, ví dụ như bạn sử dụng tiêu đề thẻ thì sẽ biết à nó là tiêu đề nằm ở phía trước của trang web . các bạn có thể kiểm tra mã blog của mình ở trang chủ là sẽ thấy những thẻ này, và nó là thẻ chặn sử dụng y chang thẻ div không có gì khác, có thể thêm lớp hoặc id… Cho nên là nếu bạn sử dụng thẻ không quen mà sử dụng thẻ div không cũng không sao cả nhé <img src="" alt=""/>7 ## Nhịp thẻ, mạnh, b, em i Đây đều là những thẻ nội tuyến, ngược với thẻ p thì những thẻ này thường được sử dụng cho các đoạn chữ rút ngắn, chữ ngắn là như thế nào ví dụ các bạn sẽ thấy một số thiết kế có đoạn chữ như ngày giờ, tên <img src="" alt=""/>8 Thẻ <img src="" alt=""/>31 và thẻ <img src="" alt=""/>32 giống nhau sẽ làm cho chữ in đậm, còn thẻ <img src="" alt=""/>33 và thẻ <img src="" alt=""/>34 giống nhau sẽ làm cho chữ trong nghiêng nha # Tạm dừng phần 1Woww viết ra cũng dài cũng khá nhiều kiến thức tuy cơ bản nhưng rất quan trọng cho các bạn mới học HTML. Ở phần tiếp theo mình sẽ nói đến tất tần tật các thẻ về Form nha. Chúc các bạn học tập tốt và một ngày tốt lành vui vẻ |
