Bài 7. Các yếu tố cấp khối, nội tuyến và tổ chức/vi/basic-html/interactive-elements-in-html/content/ Show Bài học này là một phần của loạt bài về lập trình máy tính. Bạn có thể chuyển đến Giới thiệu về lập trình nếu muốn bắt đầu từ đầu Khi bạn tải một trang web trong trình duyệt của mình, tất cả các phần tử HTML trên trang đều có cách tự tổ chức trực quan mặc định. Ví dụ, tất cả các phần tử xếp chồng lên nhau một cách độc đáo trên các dòng riêng của chúng, trong khi các phần tử  Các yếu tố cấp khối Phần tử cấp khối là phần tử HTML chiếm toàn bộ chiều rộng của phần tử chứa nó. Bạn đã nhìn thấy một vài trong số họ, chẳng hạn như lấy một phần tử, ví dụ. Ngay cả khi bạn chỉ đặt một từ trong một phần tử, nó chiếm toàn bộ chiều rộng có sẵn cho nó. Dưới đây là một phần tử đã được tô màu; Vì các phần tử cấp khối chiếm toàn bộ chiều rộng có sẵn cho chúng nên chúng xếp chồng lên nhau, thay vì xếp thành hàng Yếu tố nội tuyếnPhần tử nội tuyến là phần tử HTML chỉ chiếm chiều rộng mà nội dung của nó chiếm. Bạn cũng đã thấy một vài trong số này Để minh họa, hãy lấy chồng các phần tử từ phần cuối cùng và thay vào đó biến chúng thành tất cả các phần tử Lưu ý rằng các phần tử này không vượt ra ngoài văn bản mà chúng chứa. Đổi lại, họ có chỗ để xếp hàng trên một hàng và họ sẽ không chuyển sang hàng mới cho đến khi hết chỗ. Hành vi này làm cho các phần tử nội tuyến phù hợp để sử dụng bên trong các phần tử cấp khối. Trong nhiều trường hợp, nên sử dụng các phần tử cấp khối bên trong các phần tử cấp khối khác. Tuy nhiên, bạn không bao giờ nên sử dụng các phần tử cấp khối bên trong các phần tử nội tuyến. Trong hầu hết các trường hợp, trình duyệt của bạn sẽ vẫn hiển thị chính xác phần này—hầu hết các trình duyệt đã nỗ lực rất nhiều để làm cho HTML trông ổn ngay cả khi nó sai về mặt kỹ thuật—nhưng vì đó không phải là cách sử dụng các phần tử nội tuyến và cấp độ khối được mong đợi hoặc dự kiến, nên nó Đừng lo lắng về việc ghi nhớ phần tử nào là khối và phần tử nào là nội tuyến hoặc cảm thấy như có quá nhiều thông tin để tiếp nhận. Điều quan trọng là chỉ cần nhớ khái niệm về các phần tử cấp độ khối và nội tuyến, cũng như sự khác biệt chung giữa hai phần tử này. Mọi lập trình viên đôi khi sẽ quên phần tử nào là gì, nhưng nếu bạn nhớ khái niệm này, bạn sẽ biết bắt đầu từ đâu khi nội dung nào đó trên trang web của bạn không hiển thị theo cách bạn mong đợi. Yếu tố tổ chứcHình thức thuần túy nhất của các phần tử cấp độ khối và nội tuyến là hai phần tử HTML được sử dụng chủ yếu để tổ chức các phần tử khác và divCác phần tử là phần tử cấp khối được sử dụng hầu như chỉ để nhóm các phần tử khác. Ví dụ, bạn có thể nhóm một vài đoạn văn với một phần tử, và nó sẽ trông như thế này.
Các mặc dù vậy, phần tử trông không giống bất cứ thứ gì. Nếu bạn tải HTML ở trên vào trình duyệt của mình, thì sẽ không rõ ràng là có một phần tử ở đó; . Nó chỉ ở đó để giữ các yếu tố khác Mục đích của phần tử sẽ trở nên rõ ràng hơn nhiều khi bạn bắt đầu học CSS và JavaScript. Bằng cách nhóm các phần tử lại với nhau, phần tử giúp việc nhắm mục tiêu chỉ một số phần nhất định trên trang web của bạn dễ dàng hơn khi bạn muốn thay đổi giao diện của chúng hoặc làm điều gì đó với chúng kéo dàiPhần tử phần tử, nhưng đối với các phần tử nội tuyến, thay vì cấp khối. Ví dụ, hãy tưởng tượng rằng bạn muốn nhóm một số từ trong một trong những các yếu tố, nhưng không phải tất cả chúng. Vì một phần tử ở cấp độ khối, nó sẽ không phù hợp với nhiệm vụ đó, nhưng một
giống như yếu tố này sẽ không khác gì so với thông thường phần tử của chính nó; . Tuy nhiên, việc chỉ nhắm mục tiêu những từ đó bằng CSS hoặc JavaScript sẽ giúp dễ dàng hơn Tự làmMở chỉ mục. html của dự án Hướng dẫn lập trình GCF trong trình soạn thảo văn bản của bạn và hãy thêm một thành phần tổ chức. Trước khi bạn tìm hiểu về CSS và JavaScript, nó có vẻ không cần thiết, nhưng sau này, bạn sẽ rất vui khi có nó. Bây giờ, hãy thêm một yếu tố xung quanh nội dung đánh giá phim của bạn
và các thẻ hiện nằm trong phần tử đó, vì vậy bạn cũng nên thụt lề mọi thứ giữa chúng để giữ cho HTML của bạn có thể đọc đượcKhi bạn đã hoàn thành tất cả những điều này, mã đầy đủ của bạn sẽ trông như thế này Cinema Classics Movie Reviews Show Next Review Mở File Explorer hoặc Finder và điều hướng đến dự án Hướng dẫn lập trình GCF của bạn, sau đó nhấp đúp vào chỉ mục của bạn. tệp html. Trang web của bạn sẽ mở trong trình duyệt mặc định của bạn, nhưng hãy nhớ rằng Thẻ HTML nào là một ví dụ về phần tử nội tuyến?Inline Element:
Some of the inline elements are , ,
, , Những yếu tố nào là khối nội tuyến?Danh sách các phần tử nội tuyến . b, to, i, nhỏ, tt abbr, từ viết tắt, trích dẫn, mã, dfn, em, kbd, mạnh, samp, var a, bdo, br, img, map, object, q, script, span, sub, sup nút, đầu vào, nhãn, chọn, vùng văn bản Div có phải là phần tử nội tuyến không?Inline and Block Elements
The element is a block-level element. Inline elements (,
Là khối h1 hoặc nội tuyến?Chúng là phần tử khối . |
