top 35 html5 interview questions
Nejčastější dotazy týkající se rozhovorů s HTML5 s odpověďmi a příklady kódu:
HTML5 je nejnovější verze jazyka HTML, HTML znamená Hyper Text Markup Language, je to univerzální značkovací jazyk World Wide Web, který umožňuje vytvářet a navrhovat webové stránky, které lze prohlížet na internetu.
HTML5, který byl oficiálně vydán v roce 2012, podporuje všechny existující webové stránky.
Tento článek pokryje základní i pokročilé otázky týkající se rozhovorů na HTML5 s dokonalými příklady pro začátečníky i zkušené profesionály.
Vlastnosti HTML5
Existuje několik pozoruhodných funkcí HTML5 a několik z nich je pro vaši informaci stručně uvedeno níže.
Mezi nové funkce HTML5 patří:
- Podpora mediálních prvků, jako je video a zvuk.
- Místní úložiště
- Podpora některých nových prvků a vlastních atributů.
- Nové prvky formuláře, jako je adresa URL, datum, rozsah, čas, barva atd.
Doporučené čtení => Top 30 HTML Interview Questions
Nejdůležitější dotazy a odpovědi na rozhovor s HTML5
Níže jsou uvedeny některé z nejčastěji kladených dotazů Otázky HTML5 s příklady kódování pro vaše snadné pochopení.
Připravit se!!
Otázka č. 1) Co je HTML5?
Odpovědět: HTML5 je nejnovější verze značkovacího jazyka HyperText, kterou lze odkázat na primární jazyk WWW (World Wide Web), tento značkovací jazyk vylepšuje textový soubor o kousky kódu a tento kód, který můžeme označit jako „značkovací“, popisuje struktura dokumentu.
HTML5 poskytuje některé standardní funkce, jako jsou CSS, HTML, JavaScript a DOM, což zase sníží požadavky na externí pluginy. Je to více označení, které nahradí skriptování, lepší zpracování chyb atd. HTML5 nezávisí na zařízení.
HTML5 zavádí některé nové funkce, které lze použít ke změně způsobu interakce uživatele s dokumenty, včetně:
- Přidání nových pravidel analýzy pro zvýšení flexibility.
- Přidání nových atributů.
- Povolit úpravy offline.
- Podpora (Web SQL), - Běžný standard pro ukládání dat v databázích SQL.
- Podpora protokolu a registrace obslužné rutiny MIME.
Otázka 2) Jaký je rozdíl mezi HTML a HTML5?
Odpověď: Rozdíl mezi HTML a HTML5 je uveden níže:
HTML5 | HTML |
---|---|
Umožňuje efekt přetažení. | Nepovoluje efekt přetažení. |
HTML5 má vysokou úroveň podpory videa a zvuku. | Podpora videa a zvuku na vysoké úrovni není součástí verze a specifikací v předchozím HTML. |
V HTML5 jsou podporována plátna, SVG a další virtuální vektorová grafika. | Pokud chceme v HTML implementovat vektorovou grafiku, bylo to možné pouze pomocí knihovny třetích stran, jako je VML, Silver-light atd. |
V textu lze použít SVG a MathML. | V HTML to není možné. |
Jako trvalé úložiště se používá webová databáze SQL, mezipaměť aplikací a webové úložiště. | Mezipaměť prohlížeče lze použít jako dočasné úložiště. |
HTML5 je mobilnější. | HTML je méně mobilní. |
Deklarace Doctype je jednoduchá a snadná. | Deklarace Doctype je dlouhá a komplikovaná .. |
K dispozici jsou atributy Async, charset a ping. | Tyto atributy nejsou v HTML k dispozici. |
HTML5 podporuje javascript, který běží na pozadí. | Nepodporuje spuštění JavaScriptu ve webovém prohlížeči. |
V HTML5 můžeme kreslit tvary jako obdélník, kruh a trojúhelník. | Není možné kreslit tvary jako obdélník, kruh, trojúhelník atd. |
Otázka č. 3) Co je to? Jaké jsou různé typy, které jsou k dispozici?
Odpovědět: Deklarace poskytuje webovému prohlížeči instrukce, aby pochopil, jaké informace by se měla zobrazit, a potřebu začít s deklarací. V HTML5 je deklarace DOCTYPE velmi krátká a nerozlišuje velká a malá písmena a je napsána v horní části každé stránky HTML5.
V HTML5 jsou podporovány také následující DOCTYPE:
Níže jsou uvedeny 3 typy DOCTYPŮ:
- Přísný Doctype
- Sada rámců Doctype
- Přechodný Doctype
Otázka č. 4) Jaké jsou nové značky v mediálních prvcích v HTML5?
Odpověď: Nové značky v Media Elements v HTML5 jsou uvedeny níže :
- : Přihlaste se k multimediálnímu obsahu, jako jsou zvuky, zvukové streamy nebo hudba, vložte zvukový obsah bez nutnosti jakéhokoli dalšího doplňku, jako je Flash Player.
- : Použijte pro videoobsah, jako jsou video streamy nebo filmové klipy, vložte videoobsah atd.
- : Požádejte o více mediálních zdrojů v mediálních prvcích, jako jsou audio, video, obrázky atd.
- : Podejte žádost o externí aplikaci nebo vložený obsah (zásuvný modul).
- : Použijte pro textové stopy v mediálních prvcích, jako je video nebo zvuk. Tato značka se používá pro soubory titulků nebo titulků během přehrávání video média.
Otázka č. 5) Co je značka v HTML5?
Odpovědět: Značka je speciální obsah v HTML5, který je ohraničen lomenou závorkou (). Symbol lomítka (/) se používá k uzavření značky po dokončení bloku.
Například
This is my Browser
Značka Html5 je sada znaků, které vyvíjejí formátovaný příkaz pro webovou stránku. Tyto formátované příkazy komunikují a odesílají instrukce do prohlížeče.
Otázka č. 6) Co je minimální počet značek HTML5, které jsou nutné k vytvoření webové stránky?
Odpovědět: K vytvoření webové stránky jsou vyžadovány minimálně 3 značky HTML5, například (,,).
Otázka č. 7) Jaký je význam přetažení v HTML5?
Odpovědět: Drag and Drop je nejdůležitější koncept uživatelského rozhraní, který usnadňuje uchopení objektu a jeho přetažení na požadované místo pomocí kliknutí myší.
Některé běžné funkce, které operace Drag and Drop většinou používá, zahrnují přesun, propojení nebo kopírování.
Můžeme přetáhnout obrázek pomocí prvků, zadejte = , aby byl obrázek přetažitelný a nastavil atribut draggable image na hodnotu true.
Otázka č. 8) Vysvětlete nové typy vstupu formulářů v HTML5.
Odpověď: HTML5 má 14 nových typů vstupu formulářů:
- Datum: Toto je výběr data, můžeme vybrat datum pomocí type = 'datum'.
- Týden: Toto je výběr týdne, můžeme vybrat týden pomocí type = 'týden'.
- Měsíc: Toto je výběr měsíce, můžeme vybrat měsíc pomocí type = 'Měsíc'.
- Čas: Toto je výběr času, můžeme vybrat čas pomocí type = 'čas'.
- Čas schůzky: Toto je kombinované datum a čas, můžeme vybrat kombinaci data a času pomocí type = 'Čas schůzky'.
- Místní čas: Kombinované místní datum a čas, můžeme vybrat kombinaci místního data a času pomocí type = „DateTime-local“.
- E-mailem: Umožňuje jednu nebo více e-mailových adres, můžeme zadat více e-mailových adres pomocí type = 'e-mailem'.
- Telefon: Umožňuje různá telefonní čísla po celém světě. Telefonní číslo je ověřeno na straně klienta. Můžeme zadat telefonní číslo pomocí type = 'Telefon'.
- Vyhledávání: Umožňuje vyhledávat dotazy podle vstupního textu. Můžeme zadat více dotazů pomocí type = 'Vyhledávání'.
- Číslo: Umožňuje vložit číselnou hodnotu s dalšími atributy, jako je min., Max. atd. a můžeme zadat více číselných hodnot pomocí type = 'číslo'.
- URL: Typ vstupu adresy URL, který se používá pro webovou adresu. V jedné adrese URL můžeme použít více atributů pomocí type = „Url“.
- Barva: Umožňuje vybrat více barev, můžeme vybrat více barev pomocí type = 'barva'.
- Rozsah: Umožňuje vložit číselnou hodnotu do konkrétního rozsahu, Rozsah je podobný číslu, ale je velmi specifický. Můžeme zadat číselnou hodnotu v rozsahu pomocí type = 'rozsah'.
- Zástupný symbol: Umožňuje zobrazit ve vstupních polích krátkou nápovědu (obvykle světlou barvou), než zadáme hodnotu. Do vstupního pole můžeme napsat krátkou nápovědu pomocí type = „Zástupný symbol“.
Otázka č. 9) Co je obrazová mapa v html5?
Odpovědět: Obrázkové mapy jsou kombinací URL a obrázků, kde kliknutím na tyto obrázky (klikatelná oblast obrázku) se otevřou různé nové webové stránky.
V HTML5 jsou k dispozici dva typy obrazových map, tj. Na straně klienta a na straně serveru:
Obrazová mapa na straně klienta je vytvořen pomocí dvou prvků a kde mapa obsahuje informace o mapě a prvek oblasti přebírá atributy k definování každé části mapy. Obrazová mapa na straně serveru vytvořený pomocí atributu atribut, atribut usemap je název naší mapy.
Otázka č. 10) Jak napíšete symbol autorských práv na stránku webového prohlížeče?
Odpovědět: Abychom mohli napsat symbol autorských práv, musíme do souboru HTML5 napsat © nebo ©.
Otázka č. 11) Jak optimalizovat aktiva webových stránek?
Odpovědět: Abychom mohli optimalizovat aktiva webových stránek, musíme porozumět některým základním pravidlům optimalizace. Zpočátku bychom měli zmenšit velikost stahování a udělat méně požadavků HTTP.
Při optimalizaci aktiv webových stránek můžeme postupovat podle následujících technik:
- Komprese souborů
- Zřetězení souborů
- Hostování CDN
- Vykládání aktiv
- Reorganizace
- Rafinační kód
Otázka č. 12) Jaké je použití prvku MathML v HTML5?
Odpovědět: Slovo MathML (Mathematical Markup Language) je značkovací jazyk, který se používá k zobrazení vědeckého a matematického výrazu na webu. MathML je forma XML (rozšiřitelný značkovací jazyk) k popisu matematické notace.
Můžeme použít ... tagy uvnitř dokumentů HTML5 pro implementaci prvku MathML.
Příklad: tisk a² + 2b + 5 = 0 pomocí kódu HTML5.
MathMl Example
Poznámka: Pokud je MathML používán aplikací, která odpovídá jmennému prostoru v doporučení XML, měl by být použit následující jmenný prostor:
http://www.w3.org/1998/Math/MathML
Otázka č. 13) Jaké jsou různé značky pro formátování v HTML5?
Odpověď: HTML5 obsahuje některé staré a nové formátovací značky, jak je uvedeno níže:
- Označený text: Představuje zvýrazněný text pro referenční účely. Můžeme použít
> značky pro zvýraznění textu. - Smazaný text: Určuje odstraněný blok textu. Můžeme použít značky k implementaci odstraněného textu.
- Zdůrazněný text: Definuje zvýrazněný text. Můžeme použít značky k implementaci zvýrazněného textu.
- Vložený text: Vloží blok textu do dokumentu. Můžeme použít značky k implementaci vloženého textu.
- Malý text: Zobrazit vložený text v malé velikosti. Můžeme použít značky k implementaci malého textu.
- Horní index: Toto je horní text. Můžeme použít značky pro implementaci horního textu.
- Text dolního indexu: Toto je text v dolní části. Můžeme použít značky pro implementaci horního textu.
Otázka č. 14) Proč používáme HTML5?
Odpovědět: HTML5 podporuje animaci, kreslení, zvuk, video atd. A snadno vloží video na webovou stránku. Pro sledování videa nevyžaduje žádný další software, jako je Flash.
Níže jsou uvedeny některé důležité důvody pro použití HTML5:
- Podpora starších a různých prohlížečů
- Lepší interakce
- Chytřejší skladování
- Čistší kód
Otázka č. 15) Co je to hypertextový odkaz? Vztahuje se to pouze na text?
Odpovědět: Hypertextový odkaz je odkaz, který uživateli umožňuje po kliknutí přejít z jedné webové stránky na jinou webovou stránku. Koncept hypertextových odkazů se používá na text i na obrázek a pomocí něj můžeme převést obrázek na odkaz > značky.
Příkladdo C. níže je uveden hypertextový odkaz v obrázku (klikatelný obrázek).
Image Hyperlink Example Click the following link
Otázka č. 16) Vysvětlete koncept webového úložiště v HTML5.
Odpovědět: Webové úložiště poskytuje možnost lokálního ukládání dat našich webových aplikací do prohlížeče uživatele. Může uložit až 10 MB dat. Webové úložiště pomáhá zvyšovat výkon našich aplikací.
Existují dva typy webového úložiště, které se používají k lokálnímu ukládání dat v HTML5:
- Místní úložiště: To ukládá data, jejichž platnost nevyprší nebo se nevymaže automaticky, když uživatel zavře nebo znovu otevře prohlížeč.
- Úložiště relace: To ukládá data pouze pro jednu relaci (tj. Uživatele, který surfuje na internetu nebo na webu). Po zavření prohlížeče se data relace z webového prohlížeče automaticky vymažou.
Otázka č. 17) Vysvětlete Geolocation API v HTML5.
Odpovědět: Geolokační API se používá k vyhledání zeměpisné polohy uživatele.
Z důvodu ochrany osobních údajů je uživatel požádán o svolení k hlášení informací o poloze. Použijte navigator.geolocation.get aktuální pozice () metoda pro získání polohy uživatele a zeměpisných souřadnic (číslo zeměpisné délky a šířky).
Například pro Vrátit se zobrazí zeměpisná šířka a délka polohy uživatele níže.
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; }
Vysvětlený příklad:
- Zkontrolujte, zda je geolokace podporována nebo ne.
- Pokud je podporována geolokace, spusťte metodu getCurrentPosition (). Pokud geolokace není podporována, zobrazte uživateli chybovou zprávu.
- Pokud je metoda getCurrentPosition () úspěšná, vrátí souřadnice a funkce uvedené v parametru.
- Funkce showPosition () získá výstup - zeměpisná délka a šířka.
Otázka č. 18) Vysvětlete grafiku HTML5.
Odpovědět: HTML5 podporuje dva typy grafiky, tj. Plátno a SVG.
a) Plátno: prvek se používá k návrhu grafiky na webové stránce a má několik dostupných metod pro kreslení kruhů, polí, přidávání obrázků a textu. 300 px X 150 px (šířka X výška) je výchozí velikost pixelu plátna.
Příkladníže nakreslit čtvercový rámeček pomocí prvku plátna.
#mycanvas{border:2px solid pink;}
b) SVG: Škálovatelná vektorová grafika se většinou používá pro grafické aplikace a škálovatelné vektorové typy diagramů, jako je souřadnicový systém X, Y, dvourozměrné a výsečové grafy. Díky tomu je rychlejší a lehčí. SVG sleduje formát XML.
Příkladnakreslit obdélník pomocí prvku SVG je uvedeno níže.
Otázka č. 19) Jaké jsou výhody používání HTML5?
Odpovědět: HTML5 je pokročilá verze HTML. HTML5 umožňuje vytvářet jednodušší nebo interaktivní webové stránky vložením videa, zvuku a grafiky na webovou stránku.
HTML5 podporuje multimediální technologii a grafický obsah na webu bez použití jakýchkoli doplňků třetích stran.
Mezi nejdůležitější funkce přidané HTML5 patří:
- Geolokace
- Mezipaměť aplikací offline
- Databáze na straně klienta
- Vypořádání se s chybou
- Nová struktura a nové multimediální prvky.
- Podpora a kompatibilita prohlížeče.
Podporuje některé nové aplikační programovací rozhraní (API), jako například:
- Správa historie prohlížeče
- Přetažení
- 2D kresba na webové stránce
- Přehrávání časových médií
Mezi podporované aplikace patří:
- Pracovníci webu - JavaScript
- Místní přístup k souborům
- Mezipaměť aplikace
- Místní úložiště dat
- Místní databáze SQL
Otázka č. 20) Jak vytvořit odkaz, který se po kliknutí v HTML5 připojí k jiné stránce webového prohlížeče?
Odpovědět: Pomocí značky můžete vytvořit hypertextové odkazy, které se používají k připojení k jiné webové stránce. Hypertextový odkaz můžeme vytvořit pomocí type = text štítek. Když klikneme na text, otevře se propojená adresa URL webové stránky.
Například , níže uvedený kód je odkaz, který vede na domovskou stránku Yahoo, umístěnou na adrese https://in.yahoo.com
Yahoo link
Visit Yahoo Home Page
Otázka č. 21) Kolik webových prohlížečů podporuje HTML5?
selen s otázkami z rozhovoru v jazyce C #
Odpovědět: Většina nejnovějších verzí Apple Safari, Google Chrome, Opera, Internet Explorer a Mozilla Firefox podporuje HTML5.
Otázka č. 22) Jaká jsou často užitečná rozhraní API v HTML5?
Odpovědět: Seznam nejčastěji užitečných rozhraní API v HTML5 zahrnuje:
- Media API
- Data Transfer API
- Aplikační mezipaměť API
- Interakce uživatele
- History API
- Constraint Validation API
- Command API
- Text Track API
Otázka č. 23) Kolik značek bylo odstraněno v HTML5?
Odpovědět: Seznam značek, které jsou v HTML5 zcela odstraněny, zahrnuje:
Otázka č. 24) Které video a zvukové formáty se používají pro vložení na webovou stránku?
Odpověď: Formáty videa a zvuku, které se používají pro vložení na webovou stránku, jsou uvedeny níže:
- Video: MPEG4, Ogg, WebM.
- Zvuk: WAV, Ogg Vorbis, MP3.
Otázka č. 25) Seznam prvků struktury stránky HTML5.
Odpověď: Níže jsou uvedeny prvky struktury stránky HTML5:
- : Představuje sekci záhlaví a ukládá počáteční informace o webové stránce.
- : Představuje zápatí sekce (poslední část) stránky.
- : Představuje navigační prvky stránky HTML.
- : Je to soubor informací.
- : Jedná se o sadu pokynů, které se používají uvnitř bloku článku k definování základní struktury stránky.
- : Obsah postranního panelu stránky.
Otázka č. 26) Vysvětlete některé běžné seznamy pro návrh webové stránky.
Odpověď: Mezi běžné seznamy pro návrh webové stránky patří:
- Seznam adresářů
- Seznam definic
- Objednaný seznam
- Seznam nabídek
- Neuspořádaný seznam
Odlišný - K sestavení každého seznamu se používají různé značky.
Otázka č. 27) Jaké je použití výstupní značky v HTML5?
Odpovědět: tag se používá k reprezentaci různých typů výstupu a výsledků.
Otázka č. 28) Který prvek poskytuje funkci automatického doplňování v textovém poli?
Odpovědět: V prvku HTML5element poskytuje funkci automatického doplňování v textovém poli.
Otázka č. 29) Jak vložit video a zvuk do HTML5?
Odpovědět:
Video:
Příklad vložení videa do HTML5:
Zvuk:
Příklad vložení zvuku do HTML5:
Otázka 30) Co jsou migrované značky z HTML4 na HTML5?
Odpovědět: Seznam migrovaných značek z HTML4 do HTML5 je uveden níže:
Typický HTML4 Typický HTML5
Otázka č. 31) Co je součástí technologie HTML5?
Odpověď: Seznam je uveden níže:
- Pracovníci webu
- Webové úložiště
- SVG
- CSS3
- Události odeslané serverem (SSE)
- Mikrodata
- Webové záměry
- Webové zásuvky
- Offline aplikace
- Geolokace
- Soubor API
- Webové zprávy
- Přetažení
- Plátno 2D
Otázka č. 32) Jaký je rozdíl mezi prvky SVG a Canvas?
Odpovědět:
SVG | Prvky plátna |
---|---|
SVG není vhodný pro herní grafiku. | Plátno je vhodné pro grafiku her. |
Je založen na objektovém modelu. | Je založen na pixelech. |
Je vhodný pro použití velkých vykreslovacích ploch. | Je vhodný pro použití malých vykreslovacích ploch. |
SVG poskytuje jakoukoli podporu pro obsluhu událostí. | Canvas neposkytuje žádnou možnost pro obsluhu událostí. |
Úpravy jsou povoleny pomocí skriptu a CSS. | Úpravy jsou povoleny pouze prostřednictvím skriptu. |
SVG má lepší škálovatelnost | Plátno má špatnou škálovatelnost. |
SVG je založen na vektorech (skládá se z tvarů). | Plátno je založeno na rastru (skládá se z pixelu). |
SVG nezávisí na rozlišení. | Plátno je zcela závislé na rozlišení. |
SVG je schopen animace API. | Plátno nemá žádné API pro animaci. |
SVG je vhodný pro tisk s vysokou kvalitou a jakýmkoli rozlišením. | Plátno není vhodné pro tisk vysoké kvality a vysokého rozlišení. |
Otázka č. 33) Jaké je použití značky v HTML5?
Odpovědět: Značka obrázku se používá k přidání obrázku do dokumentu na webové stránce.
Otázka č. 34) Co jsou mikrodata v HTML5?
Odpovědět: Mikrodata jsou nová jednoduchá sémantická syntaxe, která se používá k přidání vnořených skupin dvojic jmen a hodnot do dokumentů, které běžně vycházejí z obsahu stránky. Mikrodata se používají pro nové globální atributy.
Otázka č. 35) Vysvětlete metaznačky.
Odpovědět: Meta tagy se používají k poskytování užitečných informací našim webovým stránkám.
Mezi značky patří:
- Titul: Poskytuje název webové stránky.
- Styl: Vloží na webovou stránku některé styly a podrobnosti CSS.
- Odkaz: Definuje vztah mezi jednou stránkou na jinou stránku a externím zdrojem.
Některé užitečné zkratky
- XML: Rozšiřitelný značkovací jazyk
- W3C: World Wide Web Consortium
- SQL: strukturovaný dotazovací jazyk
- JPEG: Společná fotografická expertní skupina
- IP: internetový protokol
- HTTP: Hypertext Transfer Protocol
- href: Hypertextový odkaz
- FTP: Protokol pro přenos souborů
- OHEŇ: Rozhraní pro programování aplikací
- TADY: Integrované vývojové prostředí
- ÚTEK: Nástroj pro vkládání webů
- ROZSUDEK: Model objektu dokumentu
- URL: Jednotný vyhledávač zdrojů
Závěr
HTML5 lze považovat za základ webových technologií, jedná se o primární technologii, která se používá k vytváření webových stránek.
Mnoho profesionálů, kteří mají v úmyslu vybudovat si kariéru ve webových technologiích, se musí naučit HTML5. HTML5 není jen substrukturou webových technologií, ale také se používá k vývoji mobilních aplikací. Terminologicky HTML5 není programovací jazyk, je to spíše značkovací jazyk.
Tento článek bude průvodcem seznamem nejdůležitějších otázek a odpovědí na rozhovory HTML5, protože zahrnuje jak základní, tak pokročilé otázky a odpovědi na pohovory HTML5. Jsme si jisti, že to jsou zase skvělé zdroje, které vám pomohou připravit se na pohovor HTMl5.
Doufám, že vám tento článek pomůže úspěšně prolomit jakýkoli rozhovor ve formátu HTML5.
Doporučené čtení
- Dotazy a odpovědi na pohovor
- ETL Testing Interview Otázky a odpovědi
- 35+ nejlepších otázek a odpovědí na rozhovor s Apache Tomcat
- Některé složité otázky a odpovědi týkající se ručního testování
- 25 nejlepších agilních testovacích otázek a odpovědí na rozhovor
- Top 35 Android Interview Otázky a odpovědi
- Spock Interview Otázky s odpověďmi (nejoblíbenější)
- Některé zajímavé otázky týkající se testování softwaru