top 35 html5 interview questions
Найчастіші запитання щодо інтерв’ю HTML5 із відповідями та прикладами коду:
HTML5 - це остання версія мови HTML, HTML розшифровується як Hyper Text Markup Language, це універсальна мова розмітки в Інтернеті, яка дозволяє створювати та проектувати веб-сторінки для перегляду в Інтернеті.
HTML5, який був офіційно опублікований у 2012 році, підтримує всі існуючі веб-сторінки.
Ця стаття охопить основні, а також розширені запитання щодо інтерв’ю на HTML5, а також ідеальні приклади для початківців та досвідчених професіоналів.
Особливості HTML5
Існує декілька визначних особливостей HTML5, і лише серед них наведено короткі відомості для довідки.
Нові функції HTML5 включають:
- Підтримка медіа-елементів, таких як відео та аудіо.
- Місцеве сховище
- Підтримка деяких нових елементів та спеціальних атрибутів.
- Нові елементи форми, такі як url, дата, діапазон, час, колір тощо.
Рекомендована література => 30 найкращих запитань щодо інтерв’ю у форматі HTML
Найважливіші запитання та відповіді на інтерв’ю HTML5
Нижче наведено деякі найпоширеніші запитання Запитання HTML5 із прикладами кодування для Вашого легкого розуміння.
Готуйся!!
Q # 1) Що таке HTML5?
Відповідь: HTML5 - це остання версія мови розмітки HyperText, яку можна посилатись на основну мову WWW (World Wide Web). Ця мова розмітки покращує текстовий файл із бітами коду, і цей код, який ми можемо назвати 'розміткою', описує структура документа.
HTML5 надає деякі стандартні функції, такі як CSS, HTML, JavaScript та DOM, що, в свою чергу, зменшить потребу у зовнішніх плагінах. Це більша розмітка для заміни сценаріїв, краща обробка помилок тощо. HTML5 не залежить від пристрою.
HTML5 представляє деякі нові функції, які можна використовувати для зміни способу взаємодії користувача з документами, зокрема:
- Додавання нових правил аналізу для підвищення гнучкості.
- Додавання нових атрибутів.
- Дозволити редагування в автономному режимі.
- Підтримка (Web SQL), - загальний стандарт для зберігання даних у базах даних SQL.
- Підтримка протоколу та реєстрація обробника MIME.
Q # 2) Яка різниця між HTML та HTML5?
Відповідь: Різниця між HTML та HTML5 наведена нижче:
HTML5 | HTML |
---|---|
Дозволяє ефект перетягування. | Не дозволяє перетягувати ефект. |
HTML5 має підтримку відео та аудіо високого рівня. | Підтримка відео та аудіо високого рівня не є частиною версії та специфікацій попереднього HTML. |
Полотно, SVG та інша віртуальна векторна графіка підтримуються в HTML5. | У HTML, якщо ми хочемо реалізувати векторну графіку, це було можливо лише за допомогою сторонніх бібліотек, таких як VML, Silver-light тощо. |
SVG і MathML можна використовувати в тексті. | Це неможливо в HTML. |
База даних Web, кеш додатків та веб-сховище використовується як постійне сховище. | Кеш браузера можна використовувати як тимчасове сховище. |
HTML5 більш зручний для мобільних пристроїв. | HTML менш зручний для мобільних пристроїв. |
Декларація типу документа є простою та простою. | Оголошення типу документа є довгим і складним .. |
Доступні атрибути Async, charset та ping. | Ці атрибути недоступні в HTML. |
HTML5 підтримує javascript для роботи у фоновому режимі. | Не підтримує роботу JavaScript у веб-браузері. |
Ми можемо намалювати такі форми, як прямокутник, коло та трикутник у HTML5. | Неможливо намалювати такі форми, як прямокутник, коло, трикутник тощо. |
Q # 3) Що таке? Які різні типи доступні?
Відповідь: Декларація надає інструкції веб-браузеру зрозуміти, яку інформацію вона повинна відображатись, і необхідність почати з декларації. У HTML5 декларація DOCTYPE дуже коротка і не враховує регістр, і вона написана у верхній частині кожної сторінки HTML5.
Наступні DOCTYPE також підтримуються в HTML5:
Існує 3 типи ДОКТИПІВ, як зазначено нижче:
- Строгий тип документа
- Тип фрейму набору кадрів
- Перехідний тип доктрини
Q # 4) Які нові теги в медіа-елементах у HTML5?
Відповідь: Нові теги в медіа-елементах у HTML5 перелічені нижче :
- : Подайте заявку на мультимедійний вміст, такий як звуки, аудіопотоки чи музика, вбудовуйте аудіовміст без потреби будь-яких додаткових плагінів, таких як флеш-плеєр.
- : Подайте заявку на відеовміст, такий як відеопотоки чи відеокліп, вбудований відеовміст тощо.
- : Подайте заявку на кілька медіаресурсів у медіа-елементах, таких як аудіо, відео, зображення тощо.
- : Подайте заявку на зовнішню програму або вбудований вміст (плагін).
- : Подайте заявку на текстові доріжки в елементах мультимедіа, таких як відео чи аудіо. Цей тег використовується для субтитрів або файлів субтитрів під час відтворення відеозапису.
Q # 5) Що таке тег у HTML5?
Відповідь: Тег - це спеціальний вміст у HTML5, який оточений кутовою дужкою (). Символ скісної риски (/) використовується для закриття тегу після завершення блокування.
Наприклад
This is my Browser
Тег Html5 - це набір символів, які розробляють відформатовану команду для веб-сторінки. Ці відформатовані команди обмінюються даними та відправляють інструкцію до браузера.
Q # 6) Що таке мінімальна кількість тегів HTML5, необхідних для створення веб-сторінки?
Відповідь: Для створення веб-сторінки, наприклад (,,), потрібно мінімум 3 теги HTML5.
Q # 7) Яке значення функції Drag and Drop у HTML5?
Відповідь: Drag and Drop - це найважливіша концепція інтерфейсу користувача, яка дозволяє легко захопити об’єкт та перетягнути його в потрібне місце за допомогою клацання миші.
Деякі загальні функції, які в основному використовуються за допомогою перетягування, включають переміщення, посилання або копіювання.
Ми можемо перетягувати зображення за допомогою елементів, type = , щоб зробити зображення перетяжним і встановити атрибут перетягуваного зображення на істинний.
Q # 8) Поясніть нові типи введення форми у HTML5.
Відповідь: HTML5 має 14 нових типів введення форм:
- Дата: Це засіб вибору дати, ми можемо вибрати дату за допомогою type = 'дата'.
- Тиждень: Це програма вибору тижня, ми можемо вибрати тиждень за допомогою type = “Тиждень”.
- Місяць: Це інструмент вибору місяця, ми можемо вибрати місяць за допомогою type = “Місяць”.
- Час: Це вибір часу, ми можемо вибрати час, використовуючи type = “Час”.
- Дата, час: Це комбінована дата та час, ми можемо вибрати комбінацію дати та часу, використовуючи type = 'Дата, час'.
- Місцевий час: Поєднавши місцеву дату та час, ми можемо вибрати комбінацію місцевих дати та часу, використовуючи type = “DateTime-local”.
- Електронна адреса: Дозволяє одну або кілька електронних адрес, ми можемо ввести кілька адрес електронної пошти, використовуючи type = “Електронна пошта”.
- Телефон: Дозволяє різні телефонні номери по всьому світу. Номер телефону перевіряється на стороні клієнта. Ми можемо ввести номер телефону за допомогою type = «Телефон».
- Пошук: Дозволяє шукати запити за введеним текстом. Ми можемо вводити кілька запитів, використовуючи type = “Пошук”.
- Кількість: Дозволяє вставляти числове значення з додатковими атрибутами, такими як min, max. тощо, і ми можемо ввести кілька числових значень, використовуючи type = “Номер”.
- URL: Тип введення URL-адреси, який використовується для веб-адреси. В одній URL-адресі ми можемо використовувати кілька атрибутів, використовуючи type = “Url”.
- Колір: Дозволяє вибрати кілька кольорів, ми можемо вибрати кілька кольорів, використовуючи type = «кольоровий».
- Діапазон: Дозволяє вставити числове значення в межах певного діапазону. Діапазон схожий на число, але є набагато конкретнішим. Ми можемо ввести числове значення в межах діапазону, використовуючи type = “Діапазон”.
- Заповнювач: Дозволяє відображати короткий підказку (як правило, у світлому кольорі) у полях введення, перш ніж ми введемо значення. Ми можемо написати коротке підказку у полі введення, використовуючи type = “Заповнювач”.
Q # 9) Що таке карта зображень у html5?
Відповідь: Карти зображень - це комбінація URL-адрес та зображень, де натискання цих зображень (область зображення, на яку можна натиснути) відкриє різні нові веб-сторінки.
У HTML5 доступні два типи карт зображень, тобто на стороні клієнта та сервера:
Карта зображень на стороні клієнта створюється за допомогою двох елементів і піску, де на карті міститься інформація про карту, а елемент області бере атрибути для визначення кожного розділу карти. Карта зображень на стороні сервера створений за допомогоюattattite, атрибут usemap - це назва нашої карти.
Q # 10) Як ви пишете символ авторського права на сторінці веб-браузера?
Відповідь: Для того, щоб написати символ авторського права, нам потрібно ввести © або © у файл HTML5.
Q # 11) Як оптимізувати активи веб-сайту?
Відповідь: Нам потрібно зрозуміти деякі основні правила оптимізації, щоб оптимізувати активи веб-сайту. Спочатку нам слід зменшити розмір завантаження та зробити менше http-запитів.
Для оптимізації ресурсів веб-сайту ми можемо дотримуватися наведених нижче методів:
- Стиснення файлів
- Об’єднання файлів
- Хостинг CDN
- Розвантаження активів
- Повторна організація
- Уточнення коду
Q # 12) Яка користь елемента MathML у HTML5?
Відповідь: Слово MathML (Mathematical Markup Language) - це мова розмітки, яка використовується для показу наукових та математичних виразів в Інтернеті. MathML - це форма XML (розширювана мова розмітки) для опису нотації Math.
Ми можемо використовувати ... теги в документах HTML5 для реалізації елемента MathML.
Приклад: надрукуйте a² + 2b + 5 = 0 за допомогою коду HTML5.
MathMl Example
Примітка: Якщо MathML використовується додатком, який відповідає простору імен у рекомендації XML, тоді слід використовувати такий простір імен:
http://www.w3.org/1998/Math/MathML
Q # 13) Які різні теги форматування в HTML5?
Відповідь: HTML5 містить деякі старі та нові теги форматування, як зазначено нижче:
- Позначений текст: Представляє виділений текст для довідкових цілей. Ми можемо використовувати
> теги для виділення тексту. - Видалений текст: Визначає видалений блок тексту. Ми можемо використовувати теги для реалізації видаленого тексту.
- Підкреслений текст: Визначає наголошений текст. Ми можемо використовувати теги для реалізації підкресленого тексту.
- Вставлений текст: Вставляє блок тексту в документ. Ми можемо використовувати теги для реалізації вставленого тексту.
- Невеликий текст: Відображати вставлений текст у невеликому розмірі. Ми можемо використовувати теги для реалізації невеликого тексту.
- Надрядковий текст: Це надрядковий текст. Ми можемо використовувати теги для реалізації надрядкового тексту.
- Текст нижнього індексу: Це передплачений текст. Ми можемо використовувати теги для реалізації надрядкового тексту.
Q # 14) Чому ми використовуємо HTML5?
Відповідь: HTML5 підтримує анімацію, малювання, аудіо, відео тощо, і він легко вставляє відео на веб-сторінку. Для перегляду відео не потрібне додаткове програмне забезпечення, таке як Flash.
Нижче наведено деякі важливі причини використання HTML5:
- Підтримка застарілої версії та підтримка між браузерами
- Краща взаємодія
- Розумніше зберігання
- Чистіший код
Q # 15) Що таке гіперпосилання? Чи стосується це лише тексту?
Відповідь: Гіперпосилання - це посилання, яке дозволяє користувачеві переходити з однієї веб-сторінки на іншу при натисканні. Концепція гіперпосилання використовується як для тексту, так і для зображення, і ми можемо перетворити зображення в посилання за допомогою > теги.
Прикладдо С відновити гіперпосилання на зображенні (клікабельне зображення) показано нижче.
Image Hyperlink Example Click the following link
Q # 16) Поясніть поняття веб-сховища в HTML5.
Відповідь: Веб-сховище забезпечує можливість локального зберігання даних наших веб-додатків у браузері користувача. Він може зберігати до 10 Мб даних. Веб-сховище допомагає підвищити продуктивність наших програм.
Існує два типи веб-сховища, які використовуються для локального зберігання даних у HTML5:
- Місцеве сховище: Тут зберігаються дані, термін дії яких не втрачає чи очищається автоматично, коли користувач закриває або відкриває браузер.
- Зберігання сесій: Це зберігає дані лише за один сеанс (тобто, користувач, який переглядає Інтернет або веб-сайт). Після закриття браузера дані сеансу автоматично видаляються з веб-браузера.
Q # 17) Поясніть API геолокації в HTML5.
Відповідь: API геолокації використовується для визначення географічного положення користувача.
З міркувань конфіденційності у користувача просять дозволу повідомляти інформацію про місцезнаходження. Використовувати navigator.geolocation.get поточна позиція () метод отримання позиції та географічних координат користувача (довгота та широта).
Наприклад, для повернення позиції широти та довготи користувача показано нижче.
Click The My Location Button to get your Location.
My Location var x = document.getElementById('location'); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = 'Geolocation is not supported by this browser.'; } } function showPosition(position) { x.innerHTML = 'Latitude: ' + position.coords.latitude + '
Longitude: ' + position.coords.longitude; }
Пояснений приклад:
- Перевірте, чи підтримується геолокація чи ні.
- Якщо підтримується геолокація, запустіть метод getCurrentPosition (). Якщо геолокація не підтримується, покажіть користувачеві повідомлення про помилку.
- Якщо метод getCurrentPosition () успішний, він повертає координати та функції, зазначені в параметрі.
- Функція showPosition () отримує вихідні дані - довготу та широту.
Q # 18) Поясніть графіку HTML5.
Відповідь: HTML5 підтримує два типи графіки, тобто Canvas та SVG.
а) Полотно: Елемент використовується для дизайну графіки на веб-сторінці, і він має кілька способів малювання кіл, вікон, додавання зображень та тексту. 300 пікселів X 150 пікселів (ширина X висота) - розмір пікселя за замовчуванням на полотні.
Прикладнамалювати квадратну коробку за допомогою елемента полотна показано нижче.
#mycanvas{border:2px solid pink;}
б) SVG: Масштабована векторна графіка, в основному використовується для графічного застосування та масштабованих діаграм векторного типу, таких як X, система координат Y, двовимірні та кругові діаграми. Це робить його швидшим і легким. SVG відповідає формату XML.
Прикладнамалювати прямокутник за допомогою елемента SVG показано нижче.
Q # 19) Які переваги використання HTML5?
Відповідь: HTML5 - це вдосконалена версія HTML. HTML5 дозволяє створювати простіші або інтерактивні веб-сайти шляхом вбудовування відео, аудіо та графіки на веб-сторінку.
HTML5 підтримує мультимедійні технології та графічний вміст в Інтернеті без використання сторонніх плагінів.
Деякі найважливіші функції, додані HTML5, включають:
- Геолокація
- Автономний кеш додатків
- База даних на стороні клієнта
- Обробка помилок
- Нова структура та нові мультимедійні елементи.
- Підтримка браузера та сумісність.
Підтримує деякі нові інтерфейси програмування програм (API), такі як:
- Управління історією браузера
- Перетягнути і кинути
- 2D-малюнок на веб-сторінці
- Відтворення мультимедіа за часом
Підтримувані програми включають:
- Веб-співробітники - JavaScript
- Локальний доступ до файлів
- Кеш додатків
- Локальне зберігання даних
- Локальні бази даних SQL
Питання # 20) Як створити посилання, яке підключиться до іншої сторінки веб-браузера при натисканні в HTML5?
Відповідь: Використовуйте тег для створення гіперпосилань, і вони використовуються для підключення до іншої веб-сторінки. Ми можемо створити гіперпосилання, використовуючи type = текст тег. Коли ми натискаємо текст, відкриється посилання на URL-адресу веб-сторінки.
Наприклад , код нижче - це посилання, яке веде на домашню сторінку Yahoo, розташовану за адресою https://in.yahoo.com
Yahoo link
Visit Yahoo Home Page
Питання # 21) Скільки веб-браузерів підтримує HTML5?
найкраще програмне забезпечення для оптимізації Windows 10
Відповідь: Більшість останніх версій Apple Safari, Google Chrome, Opera, Internet Explorer та Mozilla Firefox підтримуються HTML5.
Q # 22) Які часто корисні API в HTML5?
Відповідь: Список найбільш корисних API в HTML5 включає:
- Медіа API
- API передачі даних
- API кешу програм
- Взаємодія з користувачем
- API історії
- API перевірки обмежень
- API команд
- API відстеження тексту
Q # 23) Скільки тегів було видалено в HTML5?
Відповідь: Список тегів, які повністю видаляються в HTML5, включає:
Q # 24) Які відео- та аудіоформати використовуються для вбудовування на веб-сторінку?
Відповідь: Формати відео та аудіо, які використовуються для вбудовування на веб-сторінку, наведені нижче:
- Відео: MPEG4, Ogg, WebM.
- Аудіо: WAV, Ogg Vorbis, MP3.
Q # 25) Перелічіть елементи структури сторінки HTML5.
Відповідь: Елементи структури сторінки HTML5 подані нижче:
- : Представляє розділ заголовка та зберігає початкову інформацію про веб-сторінку.
- : Представляє розділ нижнього колонтитула (остання частина) сторінки.
- : Представляє елементи навігації HTML-сторінки.
- : Це сукупність інформації.
- : Це набір інструкцій, який використовується всередині блоку статей для визначення базової структури сторінки.
- : Вміст бічної панелі сторінки.
Q # 26) Поясніть деякі загальні списки для створення веб-сторінки.
Відповідь: Загальні списки для створення веб-сторінки включають:
- Список каталогів
- Список визначень
- Впорядкований список
- Список меню
- Невпорядкований список
Інший - Для складання кожного списку використовуються різні теги.
Q # 27) Для чого використовується вихідний тег у HTML5?
Відповідь: тег використовується для представлення різних типів результату та результату.
Q # 28) Який елемент забезпечує функцію автозаповнення в текстовому полі?
Відповідь: У HTML5element забезпечує функцію автозаповнення в текстовому полі.
Q # 29) Як вбудувати відео та аудіо у Html5?
Відповідь:
Відео:
Приклад вбудувати відео в HTML5:
Аудіо:
Приклад вбудувати аудіо в HTML5:
Q # 30) Що таке мігровані теги з HTML4 в HTML5?
Відповідь: Список перенесених тегів з HTML4 в HTML5 наведено нижче:
Типовий HTML4 Типовий HTML5
Q # 31) Яка частина технологій HTML5?
Відповідь: Список наведено нижче:
- Веб-працівники
- Веб-сховище
- SVG
- CSS3
- Події, надіслані сервером (SSE)
- Мікродані
- Веб-наміри
- Веб-розетки
- Офлайн-додаток
- Геолокація
- Файл API
- Веб-повідомлення
- Перетягнути і кинути
- Полотно 2D
Q # 32) У чому різниця між елементами SVG і Canvas?
Відповідь:
SVG | Елементи полотна |
---|---|
SVG не підходить для графіки Ігор. | Полотно підходить для ігрової графіки. |
Він базується на об’єктній моделі. | Він базується на пікселях. |
Підходить для використання великих областей візуалізації. | Підходить для використання невеликих областей візуалізації. |
SVG надає будь-яку підтримку для обробників подій. | Canvas не передбачає жодного звернення для обробників подій. |
Модифікація дозволена за допомогою сценарію та CSS. | Модифікація дозволена лише за допомогою сценарію. |
SVG має кращу масштабованість | Полотно має погану масштабованість. |
SVG базується на векторі (складається з фігур). | Полотно базується на растровому зображенні (складається з пікселя). |
SVG не залежить від роздільної здатності. | Полотно повністю залежить від роздільної здатності. |
SVG підходить для анімації API. | Canvas не має жодного API для анімації. |
SVG підходить для друку з високою якістю та будь-якою роздільною здатністю. | Полотно не підходить для друку високої якості та високої роздільної здатності. |
Q # 33) Для чого використовується тег у HTML5?
Відповідь: Тег фігури використовується для додавання зображення в документ на веб-сторінці.
Q # 34) Що таке мікродані в HTML5?
Відповідь: Мікродані - це новий простий семантичний синтаксис, який використовується для додавання вкладених груп імен та значень пари даних до документів, які зазвичай базуються на вмісті сторінки. Мікродані використовуються для нових глобальних атрибутів.
Q # 35) Поясніть мета-теги.
Відповідь: Метатеги використовуються для надання корисної інформації нашим веб-сторінкам.
Деякі теги включають:
- Назва: Надає заголовок веб-сторінки.
- Стиль: Вставляє деякі стилі та деталі CSS на веб-сторінку.
- Посилання: Визначає взаємозв'язок між однією сторінкою та іншою сторінкою та зовнішнім джерелом.
Деякі корисні скорочення
- XML: Розширювана мова розмітки
- W3C: Консорціум Всесвітньої павутини
- SQL: Мова Структурованих Запитів
- JPEG: Спільна фотографська експертна група
- IP: Інтернет-протокол
- HTTP: Протокол передачі гіпертексту
- href: Посилання на гіпертекст
- FTP: Протокол передачі файлів
- ПОЖЕЖ: Інтерфейс програмування програм
- ТУТ: Інтегроване середовище розробки
- WEFT: Інструмент веб-вбудовування шрифтів
- РЕШЕННЯ: Модель об'єкта документа
- URL: Уніфікований покажчик інформаційного ресурсу
Висновок
HTML5 можна розглядати як основу веб-технологій, це основна технологія, яка використовується для створення веб-сторінок.
Багато професіоналів, які мають намір побудувати кар'єру в галузі веб-технологій, повинні вивчати HTML5. HTML5 - це не тільки підструктура веб-технологій, але він також використовується для розробки мобільних додатків. Термінологічно HTML5 не є мовою програмування, скоріше це мова розмітки.
Ця стаття буде керівництвом до списку найпопулярніших запитань та відповідей на співбесіду HTML5, оскільки вона охоплює як основні, так і розширені запитання та відповіді на співбесіди HTML5. Ми впевнені, що це, в свою чергу, чудові ресурси, які допоможуть вам підготуватися до співбесіди HTMl5.
Сподіваюся, ця стаття допоможе вам успішно зламати будь-яке інтерв’ю HTML5.
Рекомендована література
- Запитання та відповіді на інтерв’ю
- Запитання та відповіді на інтерв’ю для тестування ETL
- 35+ Кращі запитання та відповіді на інтерв’ю Apache Tomcat
- Деякі хитрі ручні тестування Питання та відповіді
- 25 найкращих запитань та відповідей на інтерв’ю для спритного тестування
- Найкращі 35 запитань та відповідей на інтерв’ю для Android
- Запитання для інтерв’ю з Spock (найпопулярніші)
- Деякі цікаві питання для тестування програмного забезпечення