Ի՞նչ է հատկանիշը – attribute
Чтобы расширить возможности элементов, добавить дополнительные данные или атрибуты используются для изменения их поведения по умолчанию.
Он пишется в открывающем теге, обязательно отделяется от основного тега запятой, после которой следует имя атрибута, значение атрибута. Запрещено злоупотреблять значением & знак.
Есть атрибуты: пустые атрибуты, значение которого соответствует имени. Их синтаксис: <input disabled> - написано только имя. Наличие таких атрибутов соответствует логическому "true - Правда" и отсутствие - логично"false"Это не правильно." В указанном примере есть disabled атрибут: наличие соответствует логическому "true - True", чтобы это поле было заблокировано (disabled - отключено) станет недоступно пользователю.
Примеры,
<input disabled>
<input disabled="">
<input disabled=disabled>
Вышеуказанное эквивалентно.
Перечисляемые атрибуты принимают в качестве значений любые разрешенные ключевые слова. Например:
<p dir = "rtl">В любом случае, клиент будет следовать за клиентом.</p>
dir атрибут принимает 3 ключевых слова: ltr | rtl | auto:
ltr – направление текста слева.
ртл – направление текста справа.
auto - решает программа.
Есть атрибуты, значение которых записано без кавычек. Это означает, что значение не должно содержать պրոբելներ, “, ‘, = , <, > նշանները։ Աзначение также не должно быть пустым. Например:
<input value=Barev>
Значение атрибута заключается в одинарные («…») или двойные («…») кавычки. В одинарных кавычках используется все, кроме одинарных кавычек и &от Двойные кавычки используют все, кроме двойной кавычки и &от
<div class = "barev12"> <div class = "barev12">
Գլոբալ ատրիբուտներ
Доступные атрибуты для всех элементов HTML называются глобальными атрибутами.
accesskey
accesskey = "voreveSimvol"
Указан один из ключевых символов. В сочетании с Alt будет выполнена инструкция, которая активирует данный элемент (Alt+b). Например:
<p><a href="/ru/www.hayti.am/" accesskey="b" data-no-auto-translation=""> մուտք գործել կայք</a></p>
Теперь с помощью команды Alt+b возможно перейти на указанный сайт, не переходя по ссылке.
<p><a href="/ru/www.hayti.am/" accesskey="b" data-no-auto-translation=""> մուտք գործել կայք</a></p>):
class
class = "voreveBar"
Используется для работы с элементом в таблице стилей CSS (например, изменить текста цвет).
<!DOCTYPE html>
<html lang="hy">
<head>
<meta charset="utf-8" />
<title>HyperText Markup Language</title>
<style data-no-auto-translation="">
div.ab1{ color: red}
</style>
</head>
<body>
<h1 data-no-auto-translation="">HyperText Markup Language<h1 data-no-auto-translation="">
<div class = "ab1">Նշագրման լեզու,
որն օգտագործվում է վեբ-էջերի
մեծամասնության նշագրման համար։
HTML լեզուն վերամշակվում է դիտարկչի կողմից
և ցուցադրվում է մարդու կողմից հեշտ
ընթեռնելի փաստաթղթի տեսքով։
</div>
</body>
</html>
contenteditable
contenteditable = "true | false"
Содержимое элемента можно изменить из браузера.
<h1 contenteditable = "true" data-no-auto-translation=""> կարող է փոխվել այս տեքստը </h1>
dir
dir = “ltr | rtl | auto”
Սահմանում է տեքստի ուղղությունը՝ ձախից աջ, կամ աջից ձախ։
Принимает 3 ключевых слова: ltr | rtl | auto:
ltr – направление текста слева.
rtl – направление текста справа.
auto - решает программа.
draggable
draggable = “true | false”
Позволяет выполнить перемещение элемента из браузера. Css и Javascript также использовались, чтобы сделать пример более наглядным.
<!DOCTYPE html>
<html lang="hy">
<head>
<meta charset="utf-8" />
<style data-no-auto-translation="">
.trash {
border: 1px solid #929292;
background: url(/example/image/trash.png) no-repeat 50% 50%;
height: 292px;
padding: 20px;
text-align: center;
margin-bottom: 1rem;
}
img {
cursor: move;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Переместите изображение в прямоугольник</p>
<div class="trash" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img decoding="async" src="html.png" draggable="true" alt=""
ondragstart="drag(event)" id="photo">
</body>
</html>
hidden
hidden
Охватывает содержимое элемента из окна браузера.
<img src = "html.png" hidden>
<img src = "html.png" >
<img src = "html.png" >
id
id = “voreve bar”
элемент идентифицирует Для использования в CSS или Javascript. Аналогично атрибуту класса. В случае с классом допускается устанавливать одно и то же значение для нескольких элементов, но не в случае с id.
<p id = "a1b1"> ... </p>
Itemscope / itemtype / itemprop
Itemscope / itemtype / itemprop
Упомянутые атрибуты относятся к микроданным. которые предоставляют дополнительные данные поисковым системам, например Google. Подобные сайты используют микроданные, чтобы показывать вам больше информации с сайтов, соответствующих тому, что вы ищете.
<!DOCTYPE html>
<head>
<title>Hello world</title>
</head>
<body>
<section itemscope itemtype="http://schema.org/Person">
<h1 itemprop="name" data-no-auto-translation="">Թիմ-Բերներս-Լի</h1>
<img decoding="async" itemprop="image" src="http://www.w3.org/Press/Stock/Berners- Lee/2001-europaeum-eighth.jpg">
<p itemprop="affiliation" itemscope itemtype="http://schema.org/Organization">
<span itemprop="name">Консорциум Всемирной паутины </span>,
<span itemprop="url">http://www.w3.org</span>
</p>
<p itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="addressLocality">Кембридж</span>,
<span itemprop="addressRegion">Оксфорд </span>
</p>
</section>
</body>
</html>
<section itemscope itemtype="http://schema.org/Person">-
itemscope - определяет, что
тип элемента=:"http://schema.org/person" - микроданные будут содержать данные о типе человека, указанном типом элемента.
http://schema.org/Person — на сайте много готовых типов микроданных.
<h1 itemprop="name" data-no-auto-translation=""> Թիմ-Բերներս-Լի </h1>
<img decoding="async" itemprop="image" src="html.png">
<section>в <h1 data-no-auto-translation="">-ի և <img>-ի համար սահմանվել են միկրոտվյալներ itempropчерез
имя: Значением микроданных будет содержимое элемента: Թիմ-Բերներս-Լի ։
image микроданные значением будет содержимое элемента: - html.png.
<p itemprop="affiliation" itemscope itemtype="http://schema.org/Organization">
<span itemprop="name"> Консорциум Всемирной паутины </span>,
<span itemprop="url">http://www.w3.org</span>
</p>
<p> элемент имеет микроданные affiliation по имени. <p>это тоже место для других микроданных(itemscope – данный элемент является местом для указания в нем микроданных). <p> элемент Organization имеет тип.
<span itemprop="name"> Консорциум Всемирной паутины
<span itemprop="url">http://www.w3.org </span>
имя: Значением микроданных будет содержимое элемента: Համաշխարհային ցանցի կոնսորցիում .
URL: микроданные значением будет содержимое элемента: - http://www.w3.org.
<p itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="addressLocality">Кембридж</span>,
<span itemprop="addressRegion">Оксфорд</span>
</p>
- Здесь то же самое, о чем говорилось недавно.
https://search.google.com/structured-data/testing-tool/u/0/ – Կայք միկրոտվյալները թեստավորելու համար։
На этом сайте микроданные проверяются, чтобы увидеть результат их поиска в поисковых системах. Например, если кто-то ищет « Համաշխարհային ցանցի կոնսորցիում "фраза, добавленная в микроданные, вполне возможно, что сайт, содержащий микроданные, также появится в результатах поиска.
lang
lang = “hy | ru | en | ev ayln”
тексты в html-документе могут быть собраны на разных языках.
Каждый язык имеет текстовый формат соответствующие ему правила. Например, кавычки на разных языках выглядят по-разному. Чтобы браузер мог решить, на каком языке ему следует отображать текст по правилам, он определяет атрибут lang.
spellcheck
spellcheck = “true | false”
Позволяет браузеру проверять грамматику текста (обычно это включено). и:
style
style = “color: red”
Определяет стиль элемента (css). Позволительно упомянуть несколько фактов: они отделяются друг от друга знаком «;».
<p style = "color: red; font-size:10px;">Привет, мир!</p>
tabindex
tabindex = “inchvor tiv”
Определяет расположение элементов При нажатии клавиши Tab.
<a href="//msiter.ru/" tabindex="2" data-no-auto-translation="">MSiter.RU</a><br>
<a href="http://www.google.com/" tabindex="1" data-no-auto-translation="">Google</a><br>
<a href="http://www.yandex.ru/" tabindex="3" data-no-auto-translation="">Яндекс</a>
Когда мы нажмем Tab, Google будет указан первым.
title
title = “ինչոր տեքստ”
Описывает содержимое отображаемого элемента. в виде окна при наведении указателя мыши на элемент.
<p title = "Сайт курсов по программированию">www.hayti.am</p>
translate
translate = “yes” | “no”
Разрешено или запрещено перевод текста.
<p translate = "yes">Этот контент доступен для перевода.</p>
<p translate = "no">Этот контент не подлежит переводу.</p>
aria-*
aria-*
Передаёт дополнительные данные в программы, предназначенные для чтения содержимого окна вслух. Среди них: aria-label, aria-labelledby, aria-live и т. д.
<button aria-label = "Pakel" >X</button>
buttonдобавит в документ обычную кнопку, нажатие на которую, например, закроет рекламу на странице.
Если пользователь сайта имеет проблемы со зрением и использует программу для чтения страницы вслух, то при нажатии на кнопку программа прочитает ее как «дубинку» или «кнопку». Если элемент установлен aria-label = “Pakel” атрибут, то робот прочитает «Пакел» и пользователь поймет, что нажатие на него закроет объявление.
aria- Все элементы созданы для подобных случаев. Они передают речевым программам дополнительные данные о том, как будет представлен тот или иной элемент.
role
role = “banali barer”
Это то же самое, что ariaтот roleВ случае с используются предназначенные для этого ключевые слова. Например: role = “banner” - желательно использовать один раз и в элементе, который будет изображать логотип сайта; role = “search” –может использоваться для элемента, который будет отображать окно поиска.
data-meqena
data-meqena = “bmw”
Названия этих типов атрибутов мы решаем сами.. должно быть указано data- за которым следует любое латинское слово. Подобно атрибуту класса, потому что data- value также предназначен для работы с Javascript и CSS.
<!DOCTYPE html>
<html lang="hy">
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<style data-no-auto-translation="">
div[data-guyn="karmir"] {color: red}
</style>
</head>
<body>
<div data-guyn="karmir" >BMW:</div>
</body>
</html>
Javascript attributes
Простые статические страницы создаются с использованием HTML и Css, что не является при условии какого-либо измениться, но отображается как заранее подготовленное, а с помощью Javascript статическая страница может стать более динамичной: можно добавлять различные анимации, ее можно изменять в зависимости от действий клиента и т. д.
"իրադարձության ատրիբուտներ"(события атрибутов) работают только Javascriptс Примеры включают в себя: onload, onfocus, onblur и т. д. это «атрибуты событий», а «обработчик» любого события — это код Javascript, который делает документ более динамичным.
Почему это называется «атрибутами событий»? В примере показано, как простую статическую страницу можно сделать более динамичной с помощью JavaScript:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<input type="text" id="my-input"
onfocus="myFocusFunction()"
onblur="myBlurFunction()">
<script>
function myFocusFunction(){
document.getElementById("my-input").style.backgroundColor = "yellow";
}
function myBlurFunction(){
document.getElementById("my-input").style.backgroundColor = "red";
}
</script>
</body>
</html>
Нажатие на поле активирует его, что является событием onfocus. Для него определен обработчик — Javascript-код, который окрашивает поле в желтый цвет.
Щелчок за пределами поля приводит к потере активности, что онблюр: это событие. Для него определен обработчик — код Javascript, который окрашивает поле в красный цвет.
Russian 
Armenian