Bộ câu hỏi phỏng vấn HTML phần 2

Mã hóa URL là gì? Tại sao URL được mã hóa bằng HTML?


Mã hóa URL là quá trình mã hóa các ký tự không phải ASCII trong URL sang định dạng được các trình duyệt web chấp nhận rộng rãi. URL được gửi qua Internet bằng cách sử dụng bộ ký tự ASCII. Nếu một URL chứa các ký tự bên ngoài bộ ASCII, thì URL đó phải được chuyển đổi.

URL được mã hóa bằng HTML vì nó chuyển đổi các ký tự không phải ASCII thành một định dạng có thể được truyền qua web. Mã hóa URL thay thế các ký tự không phải ASCII bằng “%” theo sau là các chữ số thập lục phân.

Công dụng của thẻ figure trong HTML5 là gì?


Thẻ <figure> xác định nội dung tự có liên quan đến nội dung chính. Nó được sử dụng để thêm nội dung độc lập như ảnh, sơ đồ, hình minh họa,... Hình, chú thích và nội dung của nó được tham chiếu như một đơn vị duy nhất từ ​​luồng chính của tài liệu. Thẻ <figure> có hai phần tử img srcfigcaption. Img src được sử dụng để thêm nguồn hình ảnh trong tài liệu trong khi hình vẽ đặt chú thích của hình ảnh.

<figure>
  <img
    src="https://kungfutech.edu.vn/thumbnail.png"
    alt="Học lập trình với kungfutech.edu.vn"
  />
  <figcaption>Học lập trình với kungfutech.edu.vn</figcaption>
</figure>

Kết quả:

Học lập trình với kungfutech.edu.vn
Học lập trình với kungfutech.edu.vn

Thẻ datalist trong HTML là gì?


Thẻ <datalist> cung cấp tính năng tự động hoàn thành trong các tệp HTML. Nó cho phép người dùng thêm biểu mẫu tự động hoàn thành dựa trên các tùy chọn được xác định trước. Nó có thể được sử dụng với thẻ đầu vào để người dùng có thể dễ dàng điền dữ liệu vào các biểu mẫu bằng cách sử dụng các tùy chọn được xác định trước.

Nếu bạn nhấn A, nó sẽ hiển thị danh sách các xe bắt đầu bằng chữ A.

<label for="car"> Chọn ô tô của bạn từ danh sách: </label>

<input list="ô tô" name="ô tô" id="ô tô" />

<datalist id="ô tô">
  <option value="Honda"></option>
  <option value="Hyundai"></option>
  <option value="Maruti"></option>
  <option value="Audi"></option>
  <option value="BMW"></option>
</datalist>

Mô tả ngắn gọn các thẻ sau header, article, section, footer?


  • <header> được sử dụng để chứa thông tin giới thiệu và điều hướng về một phần của trang. Điều này có thể bao gồm tiêu đề phần, tên tác giả, ngày giờ xuất bản, mục lục hoặc thông tin điều hướng khác.
  • <article> có nghĩa là chứa một bố cục độc lập có thể được tạo lại một cách hợp lý bên ngoài trang mà không làm mất đi sự phức tạp. Các bài đăng trên blog cá nhân hoặc các câu chuyện tin tức là những ví dụ tốt.
  • <section> là một vùng chứa linh hoạt để chứa nội dung có chung một chủ đề hoặc mục đích thông tin.
  • <footer> được sử dụng để giữ thông tin sẽ xuất hiện ở cuối phần nội dung và chứa thông tin bổ sung về phần đó. Tên tác giả, thông tin bản quyền và các liên kết liên quan là những ví dụ điển hình của nội dung đó.

Character Encoding trong HTML là gì?


Để hiển thị trang HTML một cách chính xác, trình duyệt web phải biết bộ ký tự nào (mã hóa ký tự) sẽ sử dụng. Điều này được chỉ định trong thẻ:

Đối với HTML4

<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />

Đối với HTML5

<meta charset="UTF-8" />

Thẻ tự đóng (self closing tag) trong HTML là gì?


Trong HTML5, không nhất thiết phải đóng các thẻ HTML nhất định. Các thẻ không bắt buộc phải có thẻ đóng được gọi là thẻ "tự đóng". Ví dụ thẻ tự đóng xuống hàng <br/> hoặc thẻ <meta>, nghĩa là HTML chấp nhận 2 kiểu khai báo thẻ như sau:

<meta charset="UTF-8" />

Sự khác biệt giữa "attribute" (thuộc tính) và "property" (đặc tính) trong HTML?


Đầu tiên bạn đọc cần hiểu rõ rằng trong document của HTML chỉ có khái niệm attribute của thẻ và không có khái niệm property của thẻ. Ví dụ với đoạn HTML bên dưới:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <input id="test-id" name="test-name" type="text" value="Test Value" />
  </body>
</html>

Ta nói rằng phần tử input của trang có các thuộc tính id, name, type, value. Ta có đoạn mã bên dưới:

var inputElement = document.getElementById("test-id");

Với ví dụ trên thì biến inputElement là một DOM Object tạo bởi JavaScript và đối tượng này được dùng để gắn với phần tử input trong HTML. Biến inputElement này có cả hai AttributeProperty.

Và sự khác nhau giữa attribute và property nằm ở chỗ:

Attribute của DOM object phản ánh (và liên hệ chặt chẽ với) attribute của phần tử HTML. Ngược lại, property của DOM object được quy định bởi JavaScript và không hẳn liên quan tới phần tử HTML. Ví dụ đối tượng inputElement của JavaScript ở trên còn có các property khác như children, childNodes, childElementCount, baseURI...

Bạn nhớ rằng phần tử HTML không có property mà chỉ có attribute. Ngược lại DOM Object có cả attributeproperty.

Khi nào thì thích hợp để sử dụng thẻ small?


Thẻ <small> làm cho kích thước phông chữ văn bản nhỏ hơn một kích thước (ví dụ: từ large xuống medium, từ small xuống x-small), giảm xuống kích thước phông chữ tối thiểu của trình duyệt.

Trong HTML5, thẻ này được sử dụng để thể hiện các nhận xét bên lề và bản in nhỏ, bao gồm bản quyền và văn bản pháp lý, độc lập với cách trình bày theo kiểu của nó. Ví dụ:

<img src="image.jpg" alt="London by night" /> <small>kungfutech.edu.vn</small>

Giải thích sự khác biệt giữa các thẻ block và các thẻ inline?


Thẻ <block> là những phần tử chiếm toàn bộ chiều rộng có sẵn trên một trang web, ngăn chặn một cách hiệu quả bất kỳ phần tử nào khác ở bên trái hoặc bên phải.

Thẻ <inline> là những phần tử chỉ chiếm tối đa chiều rộng cần thiết để hiển thị nội dung của phần tử, do đó cho phép các phần tử khác được cùng dòng (line) với phần tử inline đó.

Giải thích sự khác biệt giữa các thẻ block và các thẻ inline

Một só phần tử <block> phổ biến như:

  • Đoạn văn <p>
  • Phân khu <div>
  • Tiêu đề <h1> đến <h6>
  • Danh sách <ol>, <ul>, <li>
  • Mẫu nhập <form>

Các phần tử <inline> phổ biến:

  • <span>
  • <img>
  • <a>

Giải thích 3 mode trong html: almost standard, full standard và quirks?


Quay lại thuở khai sơ các trang web thường được viết bằng hai version: Một cho Netscape Navigator và một cho Internet Expoler. Khi W3C khai sáng tạo ra standard thì các trang web không thể sử dụng chúng, vì như vậy sẽ làm vỡ hầu hết các trang web hiện có. Do đó, các trình duyệt đã giới thiệu 2 tiêu chuẩn để phù hợp với trang web mới và cũ. Bây giờ thì nó có 3 chế độ: quirks mode, standards mode, và full standards Đối với HTML, browser sẽ sử dụng DOCTYPE ở đầu page để quyết định xem nên xử lý nó ở chế độ nào. Bạn có thể tham khảo đoạn code ở dưới.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
  </head>
  <body></body>
</html>

Làm thế nào để set mode phù hợp với IE(Internet Explorer)?


  • Sử dụng http-equiv=X-UA-Compatible meta với content IE=edge
  • IE=edge sẽ nói với IE hiển thị nội dung mới mode cao nhất hiện tại.

Ví dụ:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="description" content="I am a web page with description" />
    <title>kungfutech.edu.vn</title>
  </head>
  <body></body>
</html>

Có gì mới trong html5?


HTML5 bổ sung rất nhiều tính năng mới:

Doctype mới

Bạn vẫn đang sử dụng loại tài liệu XHTML khó ghi nhớ đó?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Nếu vậy, tại sao? "Chuyển sang loại tài liệu HTML5 mới. Bạn sẽ sống lâu hơn" – trích từ Douglas Quaid.

<!DOCTYPE html>

Cấu trúc mới

  • <section> - để xác định các phần của trang
  • <header> - xác định tiêu đề của một trang
  • <footer> - xác định chân trang của một trang
  • <nav> - xác định điều hướng trên một trang
  • <article> - xác định bài viết hoặc nội dung chính trên một trang
  • <aside> - xác định nội dung bổ sung như thanh bên trên một trang
  • <figure> - xác định hình ảnh chú thích một bài báo

Các thẻ inline mới

Các thẻ inline này định nghĩa một số khái niệm cơ bản và giữ cho chúng được đánh dấu về mặt ngữ nghĩa, chủ yếu là liên quan đến thời gian:

  • <mark> - để biểu thị nội dung được đánh dấu theo một cách nào đó
  • <time> - để biểu thị nội dung là thời gian hoặc ngày tháng
  • <meter> - để chỉ ra nội dung là một phần nhỏ của phạm vi đã biết - chẳng hạn như việc sử dụng ổ cứng
  • <progress> - để cho biết tiến trình hoàn thành của một tác vụ

Các loại biểu mẫu mới

  • <input type = "datetime">
  • <input type = "datetime-local">
  • <input type = "date">
  • <input type = "month">
  • <input type = "week">
  • <input type = "time">
  • <input type = "number">
  • <input type = "range">
  • <input type = "email">
  • <input type = "url">

Các thẻ mới

  • <canvas>: Cung cấp cho bạn không gian để vẽ lên website. Nó cho phép bạn thêm hình ảnh hoặc đồ thị hoặc tạo đồ thị động trong website của bạn.
  • <video>: dùng để thêm video vào trang web.
  • <audio>: dùng để thêm âm thanh vào trang web.

Ta có thể xóa tất cả thuộc tính type trong thẻ <link> và thẻ <script> như ví dụ sau:

<link real"stylesheet" herf="path/to/stylesheet.css" type="text/css"/> à <link real"stylesheet" herf="path/to/stylesheet.css" />
<script type="text/javascript" src="path/to/script.js></script> à <script  src="path/to/script.js></script>

Làm cho content của bạn có thể chỉnh sửa

Các trình duyệt mới có một thuộc tính mới tiện lợi có thể được áp dụng cho các phần tử, được gọi là contenteditable.

Thuộc tính này cho phép người dùng chỉnh sửa bất kỳ văn bản nào có trong phần tử, bao gồm cả phần tử con của nó. Có thể áp dụng vào ứng dụng như: danh sách việc cần làm, tận dụng lợi thế của bộ nhớ cục bộ.

<h2>To-Do List</h2>
<ul contenteditable="true">
  <li>Break mechanical cab driver.</li>
  <li>Drive to abandoned factory</li>
  <li>Watch video of self</li>
</ul>

Attributes

  • require đề cập đến trường biểu mẫu được yêu cầu.
  • autofocus đặt con trỏ vào trường nhập.

Bạn đã từng sử dụng ngôn ngữ template HTML nào chưa?


Có, đó là:

  • PUG
  • ERB
  • Slim
  • Handlebars
  • Jinja
  • Liquid

Theo tôi, chúng ít nhiều giống nhau và cung cấp chức năng tương tự như nội dung và các bộ lọc hữu ích để thao tác dữ liệu được hiển thị. Hầu hết các công cụ tạo templating cũng sẽ cho phép bạn chèn các bộ lọc của riêng mình trong trường hợp bạn cần xử lý tùy chỉnh trước khi hiển thị.

Làm sao để thực hiện 1 nội dung bằng đa ngôn ngữ trong 1 website?


Khi một yêu cầu HTTP được thực hiện đến một server, Requesting User Agent thường gửi thông tin về ngôn ngữ, chẳng hạn như trong tiêu đề Accept-Language. Sau đó server có thể sử dụng thông tin này để trả về một phiên bản của tài liệu bằng ngôn ngữ thích hợp nếu có sẵn một phiên bản thay thế. Tài liệu HTML trả về cũng phải khai báo thuộc tính lang trong thẻ <html>, chẳng hạn như <html lang="en"> ... </html>.

Ở phần cuối, đánh dấu HTML sẽ chứa trình giữ chỗ i18n và nội dung cho ngôn ngữ cụ thể được lưu trữ ở định dạng YML hoặc JSON. Sau đó, máy chủ sẽ tự động tạo trang HTML với nội dung bằng ngôn ngữ cụ thể đó, thường với sự trợ giúp của người lập trình.

Làm thế nào để bạn thay đổi hướng của văn bản HTML?


Thuộc tính dir dùng để định hướng nội dung văn bản hiển thị. Nó cơ bản cho phép html right-to-left chẳng hạn là Arabic, Hebrew, Syriac, and Thaana.

<!DOCTYPE html>
<html dir="rtl" lang="ar">
  <head>
    <meta charset="utf-8" />
    ...
  </head>
</html>
Avatar Techmely Team
VIẾT BỞI

Techmely Team