Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Java Script and React New > HTML5 > Flashcards

HTML5 Flashcards

1
Q

Какво е HTML5?

A

HTML5 е последния проект на HyperText Markup Language, в който са добавени няколко нови HTML семантични елементи и правила, подобряват достъпност и индексиране на съдържанието на уеб страницата, от търсачките. HTML5 е най-новата версия на HTML – Интернет стандарт, на базата на който се осъществява изработването на всеки уеб сайт.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Ползата на HTML5 за SEO?

A

Всеки от HTML семантичните елементи има свое специфично предназначение. Например тагът <h1> е семантичен елемент, който съобщава на ботовете на Google и други търсачки, че затвореното съдържание в маркера е най-значимото заглавие, съдържащо се в HTML документа или в съответната секция от сайта. Тагът <div>, от друга страна, е несемантичен елемент, тъй като той само указва разделяне в HTML документа и не дава информация на търсачаката, за значението и определянето на съдържанието в рамките на маркера.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Нови семантични маркери в HTML5

A

Предоставят още по-точна информация за ботовете на търсачките, по отношение на съдържанието в уеб страницата.
article , section, header, footer, nav, video, figure, aside

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

article

A

article : Този елемент улеснява маркирането на нови публикации и статии в блогове или новинарски уеб сайтове. Този маркер може да придаде по-голяма тежест за търсачките, на съдържанието в него. Също така спомага за по-добър и изчистен HTML код, като намалява необходимостта от използването на маркерите div.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

aside

A

Тагът <aside> може да послужи като маркер на раздел, в който е поместено вторично съдържание от сайта. Този елемент е подходящ за маркиране на странична лента или секция под основната статия

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

figure

A

figure : Този елемент може да съдържа изображение, илюстрация, диаграма или кодов фрагмент и е самостоятелен, което означава, че може да бъде преместен, без това да засегне главния поток на документа. Маркерът figure може съдържа и figcaption в себе си, ако е необходимо да се добави надпис към изображението.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

video

A

video : Този маркер е един от най-полезните нови маркери, тъй като позволява съвместимост между различни браузъри, по отношение на визуализиране на видеоклипове, без да се налага използването на Flash. HTML5 също така дава възможност за включване на допълнителна информация за видеоклипа.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

nav

A

nav Навигацията несъмнено е един от най-важните аспекти на даден уеб сайт. Маркерът nav може да се използва, за да се уточнят вътрешните връзки в сайта, както тези от главната навигация, така и други връзки за странициране на публикации.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

footer

A

footer Въпреки че не е толкова полезен, маркерът footer също предлага някои SEO предимства, тъй като може да бъде използван за определяне на съдържанието в долната част на уеб сайта, като например име на автор, информация за авторски права, декларация за поверителност, контактна информация, полезни връзки и др.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

header

A

header : Маркерът header може да се използва за определяне и фиксиране на заглавката в уеб страницата, да съдържа лого, навигационно меню и други елементи. Също така, този маркер може да се използва и за обозначаване на заглавната част на страница и да съдържа h1 маркер, навигационни връзки и друг подходящ текст.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

section

A

section : Съдържанието в сайта обикновено е разделено на различни секции, като по този начин потребителите, най-вече тези с увреждания, ще намират по-лесно това, което търсят. Маркерът section може да бъде използван в случаите, когато е необходимо уточняване на тези раздели и подраздели със съдържание.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

HTML таговете и елементите едно и също нещо ли са?

A

Не. HTML елементите се определят от начален таг, може да съдържат малко съдържание и затварящ таг. Например h1Heading 1/h1 е HTML елемент, но само h1 е начален таг и /h1 е затварящ таг.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Какво представляват таговете и атрибутите в HTML?

A

Таговете са основният компонент на HTML, който определя как съдържанието ще бъде структурирано/форматирано, докато атрибутите се използват заедно с HTML таговете за определяне на характеристиките на елемента. Например p align=” center” (/p, в това ‘align’ е атрибутът, чрез който ще подравним абзаца, за да се покаже в центъра на изгледа.)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Какво представляват празните елементи в HTML?

A

HTML елементи, които нямат затварящи тагове или не трябва да бъдат затворени, са Void елементи. Например br /, img /, hr /

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Какво е предимството на свиването на бялото пространство?

A

В HTML празна последователност от знаци за интервали се третира като един знак за интервал, тъй като браузърът свива множество интервали в един знак за интервал и това помага на разработчика да прави отстъпи на редове от текст, без да се притеснява от множество интервали и да поддържа четимост и разбираемост на HTML кодове.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Какво представляват HTML обектите?

A

В HTML някои знаци са запазени като ‘<’, ‘>’, ‘/’ и т.н. За да използваме тези знаци в нашата уеб страница, трябва да използваме символни обекти, наречени HTML обекти.
Характер Име на обекта Номер на обекта
< < <
> > >
и & &
  напр. p_10&nbsp&nbspPM/p_  
(неразделен интервал) Напр. 10 ВЕЧЕРТА

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

Какви са различните видове списъци в HTML?

A

<body>
<div>
<p>Unordered list</p>
<ul>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
</ul>
</div>
<div>
<p>Ordered list</p>
<ol>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
</ol>
</div>
<div>
<p>Definition/Description list</p>
<dl>
<dt>div element</dt>
<dd> -This is the block level element</dd>
<dt>span element</dt>
<dd>-This is an inline level element</dd>
</dl>
</div>
</body>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

Какво представлява атрибутът ‘class’ в HTML?

A

Атрибутът клас се използва за указване на името на класа за HTML елемент. Няколко елемента в HTML могат да имат една и съща стойност на класа. Използва за свързване на стиловете, в таблицата със стилове, с HTML елементите.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Каква е разликата между атрибута ‘id’ и атрибута ‘class’ на HTML елементите?

A

Множество елементи в HTML могат да имат една и съща стойност на класа, докато стойността на атрибута id на един елемент не може да бъде свързана с друг HTML елемент.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

Дефиниране на данни за формуляр от много части?

A

Многочастните данни на формуляра са една от стойностите на атрибута enctype. Използва се за изпращане на файловите данни до страната на сървъра за обработка. Другите валидни стойности на атрибута enctype са text/plain и application/x-www-form-urlencoded.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

Опишете структурата на HTML оформлението.

A

Всяка уеб страница има различни компоненти за показване на предвиденото съдържание и специфичен потребителски интерфейс. Шаблонна е за структуриране на уеб страницата, като например:
header : Съхранява началната информация за уеб страницата.
footer : Представлява последния раздел на страницата.
nav : Менюто за навигация на HTML страницата.
article : Това е набор от информация.
section : Използва се вътре в блока на статията, за да дефинира основната структура на страница.
aside : Съдържание на страничната лента на страницата.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

Как да оптимизираме зареждането на активите на уебсайта?

A

 CDN hosting/ CDN хостинг - CDN или мрежа за доставка на съдържание са географски разпределени сървъри, които спомагат за намаляване на забавянето.
File compression/Компресиране на файлове - Това е метод, който помага да се намали размера на актив, за да се намали трансферът на данни
File concatenation/ Конкатенация на файлове - Това намалява броя на HTTP извикванията
Minify scripts/ Минимизиране на скриптове - Това намалява общия файлов размер на js и CSS файловете
Parallel downloads / Паралелни изтегляния – Хостингът на активи в множество поддомейни може да помогне за заобикаляне на ограничението за изтегляне от 6 актива на домейн на всички съвременни браузъри. Това може да се конфигурира, но повечето обикновени потребители никога не променят тези настройки.
Lazy Loading / Мързеливо зареждане – Вместо да се зареждат всички активи наведнъж, некритичните активи могат да се зареждат при нужда.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

Какви са различните тагове за форматиране в HTML?

A

b - прави текста удебелен
i - прави текста курсив
em - прави текста курсив, но с добавена семантична важност
big - увеличава размера на шрифта на текста с една единица
small - намалява размера на шрифта на текста с една единица
sub - прави текста долен индекс
sup - прави текста горен индекс
del - показва се като зачеркнат текст
strong - маркира текста като важен
mark - маркира текста
ins - показва се като добавен текст

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

Какви са различните видове налични Doctypes?

A

Строг тип на документа / Strict Doctype
Преходен тип документ / Transitional DoctypeTransitional DoctypeTransitional DoctypeTransitional Doctype
Frameset Doctype

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

Oбяснете как да посочите набора от символи, използван от документ в HTML?

A

<!DOCTYPE html><html>

<head>
<meta></meta>
...
...
</head>

…</html>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

Каква е разликата между тагове strong, b и тагове em, i?

A

Ефектът на етикетите strong, b и em, i е същият. Таговете b и i означават удебелен шрифт и курсив. Тези два тага прилагат само стилизиране на шрифта и удебелен таг b, просто добавят повече мастило към текста, тези тагове не казват нищо за текста.
Tаговете strong и em означават, че обхватът на текста е от по-голямо значение от останалата част от текста. Те имат семантично значение.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

Какво е значението на тага head и body в HTML?

A

Тагът head предоставя информация за документа. Той винаги трябва да бъде ограден в тага html. Той съдържа метаданните за уеб страницата и таговете, които са оградени от заглавен таг като link, meta, style, script не се показват на уеб страницата. Може да има само 1 таг head в целия Html документ и винаги ще бъде преди тага body.
Тагът body дефинира тялото на HTML документа. Той винаги трябва да бъде ограден в тага html. Цялото съдържание, което трябва да бъде показано на уеб страницата като изображения, текст, аудио, видео, съдържание, използвайки елементи като p, img, audio, heading, video, div, ще са оградени от етикета body. Може да има само 1 елемент body в HTML документ и винаги ще бъде след тага head.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

Възможно ли е влагане на уеб страници?

A

Да, можем да покажем уеб страница в друга HTML уеб страница. HTML предоставя таг iframe, чрез който можем да постигнем тази функционалност.
iframe src=”url of the web page to embed” /

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

Как Cell Padding се различава от Cell Spacing?

A

Cell Spacing - Разстоянието между клетките е пространството или празнината между две последователни клетки. Докато Cell Padding е пространството или празнината между текста/съдържанието на клетката и ръба/границата на клетката.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

Как можем да обединим два или повече реда или колони в един ред или колона в HTML таблица?

A

HTML предоставя два атрибута на таблицата „rowspan“ и „colspan“, за да се създаде обхват на клетка съответно в множество редове и колони.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

Възможно ли е да промените вграден елемент в елемент на ниво блок?

A

Да, възможно е да използвате свойството “display” със стойността му като “block”, за да промените вградения елемент в елемент на ниво блок.

32
Q

По колко начина можем да позиционираме HTML елемент? Или какви са допустимите стойности на атрибута позиция?

A

1.static : Стойност по подразбиране. Тук елементът е позициониран според нормалния поток на документа.
2.absolute : Тук елементът е позициониран спрямо неговия родителски елемент. Крайната позиция се определя от стойностите на ляво, дясно, горе, долу.
3.fixed : Това е подобно на absolute, но тук елементите са позиционирани спрямо елемента html.
4.relative: Тук елементът се позиционира според нормалния поток на документа и се позиционира спрямо оригиналната/нормална позиция.
5.initial: Това нулира свойството до стойността му по подразбиране.
6.inherit : Тук елементът наследява или взема свойството на своя родител.

33
Q

По колко начина можете да показвате HTML елементи?

A

1.inline : С помощта на това можем да покажем всеки елемент на ниво блок като вграден елемент. Стойностите на атрибутите за височина и ширина на елемента няма да повлияят.
2.block : използвайки това, можем да покажем всеки вграден елемент като елемент на ниво блок.
3.inline-block : Това свойство е подобно на inline, с изключение на това, че използвайки дисплея като inline-block, можем действително да форматираме елемента, използвайки стойности за височина и ширина.
4.flex : Показва контейнера и елемента като гъвкава структура. Следва свойството flexbox.
5.inline-flex : Показва flex контейнера като вграден елемент, докато съдържанието му следва свойствата на flexbox.
6.grid : Показва HTML елементите като мрежов контейнер.
7.none : С помощта на това свойство можем да скрием HTML елемента.
Видовете дисплеи, които се използват рядко:
1.table
2.inline-table
3.table-cell
4.table-column
5.table-row
6.inline-grid
7.list-item
8.inherit
9.initial
10.table-caption

34
Q

Каква е разликата между “display: none” и “visibility: hidden”, когато се използват като атрибути към HTML елемента.

A

Когато използваме атрибута „visibility: hidden“ за HTML елемент, тогава този елемент ще бъде скрит от уеб страницата, но все още заема място. Докато, ако използваме атрибута “display: none” за HTML елемент, тогава елементът ще бъде скрит и също така няма да заема място на уеб страницата.

35
Q

Как да посочите връзката в HTML и да обясните целевия атрибут?

A

HTML предоставя хипервръзка - a таг за указване на връзките в уеб страница. Атрибутът ‘href’ се използва за указване на връзката, а атрибутът ‘target’ се използва за указване къде искаме да отворим свързания документ. Атрибутът „target“ може да има следните стойности:
1._self : Това е стойност по подразбиране. Той отваря документа в същия прозорец или раздел, в който е щракнато.
2._blank : Отваря документа в нов прозорец или раздел.
3._parent : Отваря документа в родителска рамка.
4._top : Отваря документа в прозорец с цяло тяло.

36
Q

По колко начина можем да посочим CSS стиловете за HTML елемента?

A

Има три начина, по които можем да определим стиловете за HTML елементи:
Inline : Тук използваме атрибута ‘style’ вътре в HTML елемента.
Internal: Тук използваме тага style вътре в тага head. За да приложим стила, ние свързваме елементите с помощта на атрибути ‘id’ или ‘class’.
External: Тук използваме link тага вътре в head тага, за да посочим CSS файла в нашия HTML код. Отново обвързването между елементи и стилове се извършва с помощта на атрибути ‘id’ или ‘class’.

37
Q

Разлика между етикета за връзка link и етикета anchor tag <a>?</a>

A

Тагът anchor tag a се използва за създаване на хипервръзка към друга уеб страница или към определена част от уеб страницата и върху тези връзки може да се кликне, докато етикетът за връзка link дефинира връзка между документ и външен ресурс и те не са с възможност за кликване.

38
Q

Как да включите javascript код в HTML?

A

HTML предоставя таг script, чрез който можем да стартираме кода на javascript и да направим нашата HTML страница по-динамична.

<!DOCTYPE html><html>

<body>
<h1>
<span>This is a demo for </span>
<u><span></span></u>
</h1>

<script>
document.getElementById("demo").innerHTML = "script Tag"
</script>

</body>

</html>

39
Q

Кога да използваме script в head и кога да използваме скриптове в body?

A

Ако script съдържат някои функции, задействани от събитие, или библиотека jquery, тогава трябва да ги използваме в секцията head. Ако script записва съдържанието на страницата или не е вътре във функция, тогава той трябва да бъде поставен в основната част в долната част. Накратко, следвайте следните три точки:
1.Поставете библиотечни script или script за събития в секцията head.
2.Поставете нормални script, които не пишат нищо на страницата, в секцията head, докато не възникне проблем с производителността.
3.Поставете script, които изобразяват нещо на уеб страницата в долната част на основния раздел.

40
Q

Какво представляват forms и как се създават forms в HTML?

A

HTML forms се използва за събиране на въведените от потребителя данни. HTML предоставя таг form за създаване на forms . За да вземем въведени данни от потребителя, ние използваме тага input във forms , така че всички събрани потребителски данни да могат да бъдат изпратени на сървъра за обработка. Има различни типове въвеждане като ‘button’, ‘checkbox’, ‘number’, ‘text’, ‘password’, ‘submit’ и др.

<form>
<label>Enter your name: </label>
<input></input>
<label>Enter Mobile number </label>
<input></input>
<input></input></form>

41
Q

Как да обработваме събития в HTML?

A

HTML позволява действия за задействане на събития в браузъри, използващи javascript или JQuery. Има много събития като ‘onclick’, ‘ondrag’, ‘onchange’ и т.н.
<!DOCTYPE html>

<html>
<head>
<meta></meta>
<meta></meta>
<meta></meta>
<title>Handle events</title>
</head>
<body>
<h3>0</h3>
<input></input>
<input></input>

</body>

<script>
function myFunction() {
        let value = document.getElementById('event_demo').innerHTML
        value = parseInt(value) + 1
        document.getElementById('event_demo').innerHTML =value;
    }
    function reset() {
        document.getElementById('event_demo').innerHTML = 0
    }
</script>

</html>
42
Q

Какви са някои от предимствата на HTML5 пред предишните му версии?

A

Има мултимедийна поддръжка.
Той има възможностите да съхранява офлайн данни, използвайки SQL бази данни и кеш на приложения.
Javascript може да се изпълнява във фонов режим.
HTML5 също така позволява на потребителите да рисуват различни форми като правоъгълници, кръгове, триъгълници и др.
Включени са нови семантични тагове и тагове за контрол на формата.

43
Q

Как можем да включим аудио или видео в уеб страница?

A

HTML5 предоставя два тагове: audio и video тагове, чрез които можем да добавим аудио или видео директно в уеб страницата.

44
Q

Inline and block елементи в HTML5?

A

Inline
Inline elements just take up the space that is absolutely necessary for the content and does not start from a new line.
Example:- <span>, <a>, <strong>, <img></img>, <button>, <em>, <select>, <abbr>, <label>, , <cite>, <abbr>, 

, <label>, <i>, <input></input>, <output>, <q>, etc.</q></output></i></label>
</abbr></cite></label></abbr></select></em></button></strong></a></span>

Block
Block elements start on a new line and consume the full width of the page available.
Example:- <div>, <p>, <header>, <footer>, <h1>…<h6>, <form>, <table>, <canvas>, <video>, <blockquote>, <pre>, <ul>, <ol>, <figcaption>, <figure>, <hr>, <article>, <section>, etc.</figure></video></canvas>

<div>
<span>
'span is inline element.'
</span>
<span>
'span is inline element.'
</span>
<p>
'p is block element.'
</p>
</div>

45
Q

Каква е разликата между figure таг и img таг?

A

Тагът figure указва самостоятелното съдържание, като диаграми, изображения, кодови фрагменти и т.н. Тагът figure се използва за семантично организиране на съдържанието на изображение като изображение, надпис на изображение и т.н., докато img се използва за вграждане на картината в HTML5 документа.

46
Q

Как да зададете метаданните в HTML5?

A

Iзползваме meta таг, който е празен таг, т.е. няма затварящ таг. Някои от атрибутите, използвани с мета тагове, са име, съдържание, http-equiv и т.н. Изображението по-долу показва как да посочите метаданните.

<meta></meta>

<meta name="description
content='Meta tag description'"/>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="'cookie"
content="key1=Value1 key2=Value2">
47
Q

Тагът datalist и тагът select еднакви ли са?

A

Не. Тагът datalist и тагът select са различни. В случай на select таг, потребителят ще трябва да избере от списък с опции, докато datalist, когато се използва заедно с input таг, дава предложение потребителят да избере една от дадените опции или да въведе някои изцяло различна стойност.

<h2>
<label>
Enter your favorite Fruit:-
</label>
<input></input>

<datalist>
<option></option>
<option></option>
<option></option>
<option></option>
</datalist>
</h2>

48
Q

Дефиниране на карта на изображението?

A

Image Map картографира/свърже различни части от изображения с различните уеб страници. Тага map в HTML5, чрез който можем да свързваме изображения с области, върху които може да се кликва.
<img></img>

    _map name="workmap"_
      _area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm"_
      _area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm"_
      _area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm"_
    _/map_
49
Q

Какво представляват семантичните елементи?

A

Семантичните елементи са тези, които описват конкретното значение за браузъра и разработчика. Елементи като form, table, article, figure и др., са семантични елементи.

50
Q

Конвертиране на данните по-долу в табличен формат в HTML5?
1, HTML, FrontEnd
2, CSS, FrontEnd
3, Python, BackEnd

A

<table>
<tr>
<th>S.no</th>
<th>Language</th>
<th>Mostly used for</th>
</tr>
<tr>
<td>1</td>
<td>HTML</td>
<td>FrontEnd</td>
</tr>
<tr>
<td>2</td>
<td>CSS</td>
<td>FrontEnd</td>
</tr>
<tr>
<td>3</td>
<td>Python</td>
<td>BackEnd</td>
</tr>
</table>

51
Q

Каква е разликата между meter таг и progress таг?

A

Тагът progress трябва да се използва, когато показваме напредъка на изпълнение на задача, където скаларно измерваме в рамките на известен диапазон или дробна стойност. Множество допълнителни атрибути за тагове meter като ‘form’, ‘low’, ‘high’, ‘min’.

52
Q

Възможно ли е плъзгане и пускане с помощта на HTML5 и как

A

Да, в HTML5 можем да плъзгаме и пускаме елемент. Това може да се постигне с помощта на свързаните с drag and drop-related events, които да се използват с елемента, който искаме да плъзгаме и пускаме.

53
Q

Разлика между SVG и Canvas HTML5 елемент?

A

SVG
SVG е векторно базиран, т.е. съставен от форми.
SVG работи по-добре с по-голяма повърхност.
SVG може да се променя с помощта на CSS и скриптове.
SVG е силно мащабируем. Печатаме с високо качество и висока разделителна способност.
Canvas
Той е растерно базиран,- съставен от пиксели.
Canvas работи по-добре с по-малка повърхност.
Canvas може да се променя само с помощта на скриптове.
Canvas е по-малко мащабируем.

54
Q

Какъв тип аудио файлове могат да се възпроизвеждат с помощта на HTML5?

A

1.Mp3
2.WAV
3.Ogg

55
Q

Какви са важните цели на спецификацията HTML5?

A

Въвеждане на нови елементни тагове за по-добро структуриране на уеб страницата, като header таг.
Формиране на стандарт в кросбраузърното поведение и поддръжка за различни устройства и платформи
Обратно съвместим с по-старата версия HTML уеб страници
Въвеждане на основни интерактивни елементи без зависимост от плъгини като video таг вместо флаш плъгина.

56
Q

Обяснете концепцията за web storage in HTML5

A

Web storage помага за съхраняването на статичните данни в локалното хранилище на браузъра, така че да не е необходимо да ги извличаме от сървъра всеки път, когато имаме нужда от тях. Има ограничение на размера, базирано на различните браузъри. Това помага за намаляване на времето за зареждане и гладко user experience. Два типа Web storage, за локално съхраняване на данни в HTML5:
Local Storage - Помага при съхраняването на данни, които ще бъдат запазени, дори ако потребителят отвори отново браузъра. Той се съхранява за всяко уеб приложение в различни браузъри.
Session Storage - Това се използва само за една сесия. След като потребителят затвори браузъра, това се изтрива.

57
Q

Какво представляват микроданните в HTML5?

A

Използва се за подпомагане на извличането на данни за роботи на сайтове и търсачки. Това е основно група от двойки име-стойност. Групите се наричат елементи и всяка двойка име-стойност е свойство. Повечето търсачки като Google, Microsoft, Yandex и т.н. следват речника на schema.org, за да извлекат тези микроданни.

REQUIRES <span>ANDROID</span><br></br>

<link></link>

<div>
RATING:<span>4.6</span> (<span>8864</span> ratings )
</div>

<div>
Price: Rs.<span>1.00</span><meta></meta>
</div>

</div>

itemid – Уникалният глобален идентификатор на елемент.
itemprop – Използва се за добавяне на свойства към елемент.
itemref – Предоставя списък с идентификатори на елементи с допълнителни свойства.
itemscope – Дефинира обхвата на типа елемент, свързан с него.
itemtype – Указва URL адреса на речника, който ще се използва за дефиниране на itemprop.

58
Q

Кой tag се използва за представяне на резултата от изчисление? Обяснете неговите свойства.

A

Тагът output се използва за представяне на резултата от изчисление. Той има следните атрибути:
for- Определя връзката между елементите, използвани в изчислението, и резултата.
form - Това се използва за определяне на формата, към която принадлежи изходният елемент.
name - Името на изходния елемент.

<form>
<input></input>+
<input></input></br>
The output is: <output></output>
</form>

59
Q

Какво е новото във връзката между таговете header и h1 в HTML5?

A

HTML5 e свързан с по-добра семантика и подреждане на таговете и елементите, тагът header уточнява заглавната част на уеб страницата. За разлика от предишната версия имаше един елемент h1 за цялата уеб страница, сега това е заглавката за един раздел, като article или section. Според спецификацията на HTML5 всеки елемент header трябва да има поне един таг h1.

60
Q

Обяснете графиките на HTML5

A

HTML5 поддържа два вида графики:
Canvas- Това е като рисуване върху бяла хартия или празна уеб страница. Можем да добавяме различни графични дизайни на уеб страници с налични методи за рисуване на различни геометрични форми.

canvas width=”300” height=”100” style=”border: 2px solid”__/canvas

SVG - мащабируема векторна графика се използва предимно за диаграми или икони. Той следва XML формата.
svg width=”400” height=”110”
rect width=”300” height=”100” style=”fill:#FFF;stroke-width:2;stroke:#000” /
/svg
И двата горни примера дават този изход и представляват два различни подхода, предоставени от HTML5 за внедряване на графични аспекти в уеб страницата.

61
Q

Обяснете новите input types предоставени от HTML5 за forms?

A

Date- Изберете дата само чрез type = “date”
Week - Изберете седмица, като използвате type = “week”
Month - Изберете месец само чрез type = “month”
Time - Изберете време само с помощта на type = “time”.
Datetime - Комбинация от дата и час чрез type = “datetime”
Datetime-local - Комбинация от дата и час чрез тип = “datetime-local.” но пренебрегвайки часовата зона
Color - Приема множество цветове, използвайки type = “color”
Email - Приема един или повече имейл адреси, използвайки type = “email”
Number - Приема числова стойност с допълнителни проверки като мин. и макс., използвайки тип = “число”
Search - Позволява търсене на заявки чрез въвеждане на текст чрез тип = “търсене”
Tel - Позволява различни телефонни номера чрез type = “tel”
Placeholder - За показване на кратък съвет в полетата за въвеждане, преди да въведете стойност, използвайки type = “placeholder”
Range - Приема числова стойност в рамките на конкретен диапазон, използвайки type = “range”
Url - Приема уеб адрес, използвайки type = “url”

form
div
label_Date:/label_
input type=”date” id=”date” /
br
label_Week:/label_
input type=”week” id=”week” /
br
label_Month:/label_
input type=”month” id=”month” /
br
label_Time:/label_
input type=”time” id=”time” /
br
label_Datetime:/label_
input type=”datetime” id=”datetime” /
br
label_Datetime Local:/label_
input type=”datetime-local” id=”datetime-local” /
br
label_Color:/label_
input type=”color” id=”color”/
br
label_Email:/label_
input type=”email” id=”email” placeholder=”email address” /
br
label_Number:/label_
input type=”number” id=”number” /
br
label_Search:/label_
input type=”search” id=”search” /
br
label_Phone:/label_
input type=”tel” id=”phone” placeholder=”Phone Number” pattern=”\d{10}$” /
br
label_Range:/label_
input type=”range” id=”range” /
br
label_URL:/label_
input type=”url” id=”url”/
/div
/form

62
Q

Какви са новите тагове в Media Elementsи в HTML5?

A

audio - Използва се за звуци, аудио потоци или музика, вграждане на аудио съдържание без допълнителни добавки.
video - Използва се за видео потоци, вграждане на видео съдържание и др.
source - Използва се за множество медийни ресурси в медийни елементи, като аудио, видео и др.
embed - Използва се за външно приложение или вградено съдържание.
track - Използва се за субтитри в медийни елементи като видео или аудио.

label for=”Viseo”Video:/label
video width=”320” height=”240” controls
source src=”video.mp4” type=”video/mp4”
track src=”subtitles.vtt” kind=”subtitles” srclang=”en” label=”English”
/video
br
label
Embed:
/label
_embed type=”video/webm”
src=”https://www.youtube.com/embed/MpoE6s2psCw” width=”400” height=”300”
_
br
label
Audio:
/label
audio controls
source src=”audio.mp3” type=”audio/mpeg”
/audio

63
Q

Защо смятате, че добавянето на функционалност за плъзгане и пускане drag-and-drop в HTML5 е важно? Как ще направите изображение с възможност за плъзгане draggable в HTML5?

A

Функцията за плъзгане и пускане drag-and-drop е много интуитивен начин за избор на локални файлове. Това е подобно на това, което повечето операционни системи имат функция за копиране, което го прави много лесно за разбиране от потребителя.
За да активирате тази функционалност, в тага img има атрибут с възможност за плъзгане и трябва да зададете атрибут ondrop и ondragover на манипулатор на събития, наличен в скриптове.

div id=”div1” ondrop=”drop(event)” ondragover=”allowDrop(event)”
style=”border: 1px solid #aaaaaa; width:350px; height: 70px;”
br
img src=”img_logo.gif” draggable=”true” ondragstart=”drag(event)” id=”drag1” width=”88” height=”31”
/div

div id=”div2” ondrop=”drop(event)” ondragover=”allowDrop(event)”
style=”border: 1px solid #aaaaaa; width:350px; height: 70px;”__/div

64
Q

Защо се нуждаем от MathML елемента в HTML5?

A

MathML означава Mathematical Markup Language. Използва се за показване на математически изрази на уеб страници. За този math таг се използва.
Това показва уравнението a2 + b2 + 2ab = 0.

math
mrow
mrow
msup
mi a /mi
mn 2 /mn
/msup
mo + /mo
msup
mi b /mi
mn 2 /mn
/msup
mo + /mo
mn 2 /mn
mn a /mn
mn b /mn
/mrow
mo = /mo
mn 0 /mn
/mrow__/math

65
Q

Какви са изпратените от server-sent events вHTML5?

A

Събитията, изпратени от уеб сървъра към браузърите, се наричат събития, изпратени от сървъра. DOM елементите могат да се актуализират непрекъснато с помощта на тези събития. Това има голямо предимство пред директното гласуване This has a major advantage over straight-up polling. In polling there is a lot of overhead since every time it is establishing an HTTP connection and tearing it down whereas, in server-sent events, there is one long-lived HTTP connection. При анкетирането има много режийни разходи, тъй като всеки път, когато установява HTTP връзка и я прекъсва, докато при изпратените от сървъра събития има една дълготрайна HTTP връзка. За да използвате събитие, изпратено от сървъра, се използва елемент eventsource. Атрибутът src на този елемент указва URL адреса, от който се изпраща поток от данни, съдържащ събитията.

eventsource src = “/cgi-bin/myfile.cgi” /

66
Q

Какво представляват Web Workers?

A

Те осигурят възможност за асинхронизация. Той работи във фонов режим, за да изпълнява скъпите задачи, без да се поддава, за да направи страницата отзивчива. Това се постига чрез стартиране на отделна тема за такива задачи. Те не са предназначени за извършване на UI операции. Има три типа уеб работници:
Dedicated Workers - Това са работници, които се използват от един скрипт.
Shared Workers - Това са работници, които се използват от множество скриптове, работещи в различни прозорци, IFrame и т.н.
Service Workers – Те действат като прокси сървъри между уеб приложенията, браузъра и мрежата. Използва се предимно за насочени известия и API за синхронизиране.

p_Count numbers: output id=”result”__/output__/p
button onclick=”startWorker()”_Start Worker/button
button
onclick=”stopWorker()”Stop Worker/button
script
var w; function startWorker() {
if (typeof (Worker) !== “undefined”) {
if (typeof (w) == “undefined”) {
w = new Worker(“1218.js”);
}
w.onmessage = function (event) {
document.getElementById(“result”).innerHTML = event.data;
};
}
} function stopWorker() {
w.terminate();
w = undefined;
}/script

1218.js
let i = 0;

function timedCount() {
i = i + 1;
postMessage(i);
setTimeout(“timedCount()”,500);
}

timedCount();

67
Q

Каква е употребата на novalidate attribute за the form tag който е въведен в HTML5?

A

Стойността му е булев тип, който показва дали данните, подадени от формуляра, ще бъдат валидирани предварително или не. Ako e невярно, формулярите могат да се изпращат без валидиране, което помага на потребителите да възобновят по-късно.

form action=”” method=”get” novalidate
Name: br input type=”name” name=”Sname”__br
Doubt: br input type=”number” name=”doubt”__br
input type=”submit” value=”Submit”
/form

68
Q

Какво представляват растерните изображения и векторните изображения?

A

Растерни изображения - растерното изображение се определя от подреждането на пикселите в решетка с точно какъв цвят трябва да бъде пикселът. Няколко растерни файлови формати включват PNG(.png), JPEG(.jpg) и т.н.
Векторни изображения - Векторното изображение се дефинира с помощта на алгоритми с дефиниции на форма и път, които могат да се използват за изобразяване на изображението на екрана, написано с подобна маркировка мода. Разширението на файла е .svg

69
Q

Как да поддържам SVG в стари браузъри?

A

Вместо да дефинирате ресурса на svg в атрибута src на img тага, той трябва да бъде дефиниран в атрибута srcset, а в src трябва да бъде дефиниран резервният png файл.
img src=”circle.png” alt=”circle” srcset=”circle.svg”

70
Q

Какви са различните подходи, за да направите изображение отзивчивоresponsive?

A

Художествена посока – С помощта на елемента picture пейзажното изображение, напълно показано в оформлението на работния плот, може да бъде увеличено с основния обект на фокус за портретно оформление.

picture
source media=”(min-width: 650px)” srcset=”img_cup.jpg”
img src=”img_marsh.jpg” style=”width: 700px;;”
/picture

Превключване на разделителната способност - Iзображенията се мащабират с помощта на векторна графика. Оптимизиране, за да обслужва и екрани с различна плътност на пикселите.

svg width=”100” height=”100”
circle cx=”50” cy=”50” r=”40” stroke=”green” stroke-width=”4” fill=”yellow” /
/svg

71
Q

Какво е manifest file in HTML5?

A

Файлът на манифеста се използва за списък на ресурсите, които могат да бъдат кеширани. Браузърите използват тази информация, за да заредят уеб страницата по-бързо от първия път. Има 3 раздела във файла на манифеста
CACHE Manifest - Файловете трябва да бъдат кеширани
Network- Файлът никога не трябва да се кешира, винаги се нуждае от мрежова връзка.
Fallback- Резервни файлове в случай, че дадена страница е недостъпна

CACHE MANIFEST
# 2012-06-16 v1.0.0
/style.css
/logo.gif
/main.js
NETWORK:
login.php
FALLBACK:
/html/ /offline.html
!DOCTYPE HTML__html manifest=”tutorial.appcache”
…
…/html

72
Q

Какво представлява API за геолокация в HTML5?

A

API за геолокация се използва за споделяне на физическото местоположение на клиента с уебсайтове. Това помага при обслужването на локално базирано съдържание и уникално изживяване на потребителя въз основа на тяхното местоположение. Това работи с ново свойство на глобалния обект на навигатор и повечето съвременни браузъри го поддържат.
p_Click the button to get your coordinates./p_

button onclick=”getLocation()”Try It/button

p id=”demo”__/p

script src=”./index.js”__/script
index.js
let x = document.getElementById(“demo”);
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = “Geolocation is not supported by this browser.”;
}
}
function showPosition(position) {
x.innerHTML = “Latitude: “ + position.coords.latitude +
“<br></br>Longitude: “ + position.coords.longitude;
}

Изисква потребителско разрешение за достъп до данните за местоположение чрез API за геолокация и след щракване върху бутона се показват координатите на физическото местоположение на клиента

73
Q
  1. Обяснете уеб компонентите и тяхното използване.
A

Те се използват за създаване на потребителски елементи за многократна употреба, които са много трудни в традиционния HTML. Състои се от три технологии:

Персонализирани елементи - Това са API на JavaScript, които помагат при дефинирането на персонализирани елементи и тяхното поведение.

Shadow DOM – Това са API на JavaScript, които прикачват капсулирано shadow DOM дърво към елемент, за да запазят функциите на елемента частни и незасегнати от други части.

HTML шаблони – Шаблоните за маркиране са написани с помощта на елементи template и slot, които могат да се използват многократно като основа на структурата на потребителски елемент.

74
Q

Shadow DOM

A

!DOCTYPE html
html lang=”en”

head
meta charset=”UTF-8”
meta http-equiv=”X-UA-Compatible” content=”IE=edge”
meta name=”viewport” content=”width=device-width, initial-scale=1.0”
title_composed and composedPath/title_
script src=”1221.js” defer__/script
/head

body
h1__code_composed/code_ and code_composedPath/code_ demo_/h1_
open-shadow text=”I have an open shadow root”__/open-shadow
closed-shadow text=”I have a closed shadow root”__/closed-shadow

/body

/html

1221.js

customElements.define(‘open-shadow’,
class extends HTMLElement {constructor() {
super();
const pElem = document.createElement(‘p’);
pElem.textContent = this.getAttribute(‘text’);
const shadowRoot = this.attachShadow({mode: ‘open’});
shadowRoot.appendChild(pElem);
}
}
);
customElements.define(‘closed-shadow’,
class extends HTMLElement {constructor() {
super();
const pElem = document.createElement(‘p’);
pElem.textContent = this.getAttribute(‘text’);
const shadowRoot = this.attachShadow({mode: ‘closed’});
shadowRoot.appendChild(pElem);
}
}
);document.querySelector(‘html’).addEventListener(‘click’, e => {
console.log(e.composed);
console.log(e.composedPath());
});

75
Q

HTML templates

A

!DOCTYPE html
html lang=”en”

head
meta charset=”UTF-8”
meta http-equiv=”X-UA-Compatible” content=”IE=edge”
meta name=”viewport” content=”width=device-width, initial-scale=1.0”
title_HTML template/title_
script src=”./1222.js”__/script

/head

body
h1 style=”color: blueviolet;”Simple template/h1
template id=”my-paragraph”
style

  p {
    color: white;
    background-color: rgb(235, 131, 195);
    padding: 5px;
  }
_/style_
_p_
  _slot name="my-text"_My default text_/slot_
_/p_   _/template_   _my-paragraph\_\_span slot="my-text"_Let's have some different text!_/span_   _/my-paragraph_   _my-paragraph_
_ol slot="my-text"_
  _li_Let's have some different text!_/li_
  _li_In a list!_/li_
_/ol_   _/my-paragraph_ _/body_

/html

1222.js

customElements.define(
‘my-paragraph’,
class extends HTMLElement {
constructor() {
super();
const template = document.getElementById(‘my-paragraph’);
const templateContent = template.content;
this.attachShadow({ mode: ‘open’ }).appendChild(
templateContent.cloneNode(true),
);
}
},
);
const slottedSpan = document.querySelector(‘my-paragraphspan’);
console.log(slottedSpan.assignedSlot);
console.log(slottedSpan.slot);

Java Script and React New (13 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions