HTML-Первые шаги. Значения атрибутов.

Valli03 · 29 Мар 2025

Приветик, в этой теме будем разбирать значения атрибутов.(!!ЛОГИЧЕСКИЕ АТРИБУТЫ НЕ ИМЕЮТ ЗНАЧЕНИЯ!!)
Значения бывают нескольких типов:
Ключевое слово,строка,число,код языка Адреса* (Это не все,их дохуя и больше,я буду объяснить значения выше перечисленных,ибо они более популярные.)
И так начнем с Ключевых Слов.
Ключевые слова
У некоторых атрибутов есть зарезервированные значения,которые называются <<Ключевые Слова>>. Как пример возьмем значение атрибута

HTML:

Type

элемента

HTML:

<input>

определяет тип элемента формы.Рассмотрим пример использования элемента <input>

HTML:

<input type="button" value="Кнопушкa">

В данном примере элемент <input> создает кнопушку.

Ключевые слова подчиняются спецификации, список их значений ограничен и не может быть произвольно изменён.

Строка

Строка представляет собой текст, заключённый в двойные или одинарные кавычки.

HTML:

<div tittle="Строчка"></div>

<div tittle='Строчка'></div>

Кавычка определяет начало и конец строки, поэтому внутри строки нельзя дополнительно ставить такие же кавычки. К примеру, следующая строка использует неправильное сочетание кавычек.

HTML:

<div tittle="Новый 30" монитор"></div>

Чтобы корректно написать строку с внутренними кавычками есть несколько вариантов.

1. Экранировать внутреннюю кавычку вот таким образом \". В таком случае она уже не будет восприниматься браузером как кавычка, а считается символом.

HTML:

<div tittle="Новый 30\" монитор"></div>

2. Использовать сочетание одинарных и двойных кавычек.

HTML:

<div tittle='Новый 30" монитор'></div>

Здесь строка у атрибута тітіе взята в одинарные кавычки, поэтому мы спокойно можем писать внутри двойную кавычку.

Всё это аналогичным образом работает и для одинарных кавычек.

Числа.
Числа состоят из цифр от 0 до 9; для отрицательных чисел, если они необходимы, впереди ставится знак минус (-45). В примере показано использование чисел в качестве значений атрибутов.

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Числа</title>
</head>
<body>
  <p>Температура воды</p>
  <meter value="0" max="100" low="10" high="60">Низкая</meter>
  <meter value="30" max="100" low="10" high="60">Нормальная</meter>
  <meter value="80" max="100" low="10" high="60">Горячая</meter>
  <meter value="100" max="100">Кипяток</meter>
</body>
</html>

(Результат на 1 скриншоте)
Кроме целых чисел,можно юзать дробные(например х целых у сотых[х,0у] ) для этого используется атрибут value.Пример:

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>input, атрибут max</title>
</head>
<body>
<form>
<p>Укажите вашу температуру в градусах</p>
<p><input type="number" min="35" max="41" value="36.6" step="0.1"></p>
</form>
</body>
</html>

(Результат на 2 скрине)

Код Языка.

Код языка используется, чтобы показать поисковым системам, на каком языке написан текст и задать свои настройки для разных языков (типы кавычек, и т.п) и указывается язык текста в виде кода. Для задания языка применяется атрибут lang (для систем торможения

trollface

:lang от слова language)
Пример:

HTML:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>lang</title>
</head>
<body>
<p>Фраза на французском</p>
<p lang="fr">Je n'ai pas mangé depuis six jours <!--Я не кушаль шесть дней--> </p>
</body>
</html>

Результат на 3 скрине.
В данном примере для всей страницы указан русский язык с помощью атрибута langа со значением ru. Чтобы показать, что язык относится ко всей странице, атрибут добавлен к элементу <html>. Для текста на французском атрибут lang со значением fr добавлен а элементу <p>.

Допустимые значения атрибута lang моня посмотреть тут.

Адрес.
Адресом называется путь к документу, например к текстовому документу.
Как я уже написал, Адрес нужен всегда и везде, ибо через адреса можно получить путь к какому-то файлу (инфе,и т.п) . Адреса быаают 2 типов: Абсолютные и Относительные.
Начнем с Абсолютных адресов.
Абсолютные адреса работают везде и всегда, независимости от того,находитесь Вы на каком-то сайте или нет.Перед такими адресами ВСЕГДА указывается HTTP /HTTPS (если не знаете,ч то это такое, то можете закрывать эту тему, оно вам не нужно) ) следовательно, любые абсолютные ссылки начинаются ч вставки http:// , https:// .
Пример абсолютного адреса:

HTML:

<a href="https/kmfh.net">KMFH</a>

(https=http+s = HyperText Transfer Protocol+ Secure)
Иногда, когда нет информации про протокол, в таких случаях код выглядит так

HTML:

<a href="//kmfh.net">KMFH</a>

Абсолютные адреса в основном используются тогда,когда есть нужда перейти на другой сайт(ресурс).
Относительные адреса
Относительные адреса используются БЕЗ протокола, такие адреса указывают на документы, которые находятся в корне сайта, пример адреса:

HTML:

<img src="gavGavsuka.jpg">

Такой адрес указывает на картинку, который находится в той же папке, что и веб-страничка. Если файл находится в другой папке, используем такой код:

HTML:

../image/gavgavsuka.jpg

Если находится в самом корне сайта, используем такой код :

HTML:

/image/gavgavsuka.jpg

А если файл находиться в какой-то папке,которая лежит с веб-страничкой используем такой код:

Код:

Papka/gavgavsuka.jpg

Иногда можно встретить адреса в виде

HTML:

./file/index.html

Точка впереди означает, что отсчёт ведётся от текущей папки. Подобная запись избыточна и её можно сократить до

HTML:

File/index.html

Спасибо, что прочли.

Дополнение:
Обычно используются либо абсолютные пути(//somesite.com/static/all.css || https:/.somesite.com/static/all.css) либо пути, следующие от корня сайта(/static/all.css).

Концепция должна быть такая, чтобы переместив файл(разметку, HTML) в любое место на сервере - он имел доступ к статике. Этой концепции не обязательно следовать - но желательно. А так - все даже более менее подробно расписано.

Поиск

Theme colors

HTML-Первые шаги. Значения атрибутов.

Вложения