Разница между HTML, CSS и JavaScript

В этой статье я хочу объяснить разницу между HTML, CSS и JavaScript на аналогии. Я надеюсь, что это поможет вам понять, что это за языки и что они делают.

Начнем с HTML.

HTML

HTML означает Язык гипертекстовой разметки. Он создает структуру веб-сайта.

Возьмем в качестве аналогии дом. Подумайте о доме, в котором вы сейчас живете. Сколько в нем комнат? В моем доме есть:

  • Одна гостиная
  • Одна кухня
  • Две спальни

Если я запишу эту структуру в код, она может выглядеть примерно так:

<house>
  <living-room></living-room>
  <kitchen></kitchen>
  <bedroom></bedroom>
  <bedroom></bedroom>
</house>

Каждый набор пункт в угловых скобках (< а также >) называется тегом. Здесь, <house> является тегом. У него есть один <living-room>один <kitchen>и два <bedroom>с в нем.

HTML похож на код выше. Но HTML требует, чтобы вы использовали предопределенный список тегов вместо <house> а также <living-room>. Вы можете найти список всех возможных тегов на МДН. Примеры этих тегов включают в себя:

  1. <div>, <section>, <article>
  2. <h1>, <h2>, <h3>, <h4>, <h5>, <h6>,
  3. <p>,
  4. <a>
  5. <span>
  6. …

Самым основным из всех тегов в HTML является <div>. Для этой статьи я буду использовать <div> чтобы показать вам, что такое базовый HTML.

В HTML мы не можем написать <house> потому что <house> не является допустимым тегом HTML. Мы можем использовать <div> в качестве замены для <house> ярлык. Но нам нужен какой-то способ идентифицировать «дом».

Чтобы определить «дом», мы используем класс. HTML-версия дома выглядит так:

<div class="house">
  <div class="living-room"></div>
  <div class="kitchen"></div>
  <div class="bedroom"></div>
  <div class="bedroom"></div>
</div>

Мы можем погрузиться глубже.

Рассмотрите комнату, в которой вы находитесь. Какая мебель у вас есть в комнате? В моей комнате есть стул, стол, шкаф и кровать.

HTML-версия этого будет:

<div class="house">
  <div class="living-room"></div>
  <div class="kitchen"></div>
  <div class="bedroom">
    <!-- Items in the bedroom -->
    <div class="chair"></div>
    <div class="table"></div>
    <div class="wardrobe"></div>
    <div class="bed"></div>
  </div>
  <div class="bedroom"></div>
</div>

Слова между <-- а также --> называются комментариями. Это слова, предназначенные для вас и меня, чтобы прочитать. Браузеры не будут пытаться понять, что они из себя представляют. Мы используем комментарии, чтобы записывать мысли для себя и других разработчиков.

Можно еще глубже нырнуть.

У меня на кровати:

<div class="house">
  <div class="living-room"></div>
  <div class="kitchen"></div>
  <div class="bedroom">
    <!-- Items in the bedroom -->
    <div class="chair"></div>
    <div class="table"></div>
    <div class="wardrobe"></div>
    <div class="bed">
      <!-- Items on my bed --> 
      <div class="pillow"></div>
      <div class="pillow"></div>
      <div class="bolster"></div>
    </div>
  </div>
  <div class="bedroom"></div>
</div>

Если ты продолжишь, вы можете создать всю структуру вашего дома в HTML. Вот что я имею в виду, когда говорю HTML — это структура веб-сайта.

<div class="house">
  <div class="living-room"><!-- ... --> </div>
  <div class="kitchen"><!-- ... --> </div>
  <div class="bedroom"><!-- ... --> </div>
  <div class="bedroom"><!-- ... --> </div>
</div>

CSS

CSS означает Каскадные таблицы стилей. Это позволяет вам сделать сайт красивее. Говоря отраслевыми терминами, мы говорим, что вы «стилизуете» веб-сайт с помощью CSS.

Вы можете стилизовать элемент, написав следующее:

selector {
  property: value;
}

selector относится к тегу или классу (или атрибутам, если вы немного продвинулись), который вы хотите стилизовать. property а также value пары позволяют определить стиль. Это будет иметь больше смысла, если мы снова вернемся к аналогии с нашим домом.

Рассмотрите свою спальню. Как расставлена ​​мебель? Для моей спальни мой:

  • Кровать ставится в северо-восточном углу
  • Гардероб находится в юго-восточном углу.
  • дверь в юго-западном углу

На веб-сайте у нас нет направлений север/восток/юг/запад. Но мы все еще можем сказать, где что находится с верхним/кольцевым/нижним/левым.

Допустим, моя кровать стоит в правом верхнем углу комнаты. Вот что я мог бы написать:

.bed {
  position: absolute;
  top: 0; 
  right: 0;
}

Это означает:

  1. Установлен position к absolute для элементов bed учебный класс
  2. Поднимите его до самого верха
  3. Толкайте его до упора вправо

Помимо местоположения, вы также можете изменить такие вещи, как размер и цвет.

.bed {
  width: 400px; 
  height: 200px; 
  background-color: lightskyblue;
}

См. перо vYBWLwM Зелл Лью (@zellwk) на КодПен.

Вы можете найти список всех свойств CSS здесь.

Примечание: это огромный список. Вы можете быть ошеломлены, если посмотрите на это. Хорошая новость в том, что вам не нужно изучать все сразу. Если вы начинаете с нуля, я настоятельно рекомендую прочитать “Интернет это сложно». Он простым языком объясняет основы HTML и CSS.

(Я буду работать над пошаговым курсом CSS, чтобы в будущем вы прошли путь от новичка до прогресса. Оставьте свой адрес электронной почты здесь если вы хотите задать вопросы/получить обновления об этом курсе).

JavaScript

HTML и CSS статичны. Вы не можете изменить HTML и CSS (изменив файл HTML или CSS) после загрузки веб-сайта. Но JavaScript дает вам возможность изменить HTML и CSS на странице.

Давайте снова воспользуемся аналогией с домом, чтобы объяснить, что такое JavaScript. Кстати, JavaScript и Java — разные вещи. Не путайте их!

Допустим, сейчас темно. Ты заходишь в свою комнату. Что бы вы увидели?

Ничего такого. Потому что внутри кромешная тьма.

Вы подносите руки к выключателю и включаете свет. Это пример взаимодействия. Другие примеры:

  1. Включение телевизора
  2. Открытие крана для проточной воды
  3. Включение кондиционера

На веб-сайте основное взаимодействие похоже на включение света. Вы нажимаете кнопку, и что-то происходит. В этом GIF ниже я нажал кнопку, и появилось меню. Я нажал кнопку еще раз, и меню закрылось.

Меню выскакивает, когда я нажимаю кнопку. Меню закрывается, когда я снова нажимаю кнопку.

Вы можете сделать намного больше с помощью JavaScript. Примеры:

  1. Воспроизведение анимации при прокрутке вниз
  2. Открытие меню при нажатии кнопки на клавиатуре
  3. Создание горячих клавиш для вашего сайта
  4. Создайте карусель, где люди могут переключаться между слайдами
  5. Сделать калькулятор

О JavaScript можно рассказать гораздо больше, чем я могу рассказать в одном сообщении в блоге. Если вы заинтересованы в изучении JavaScript, я написал курс, который научит вас всему ты должен знать о JavaScript. Это называется Изучайте JavaScript. Проверьте это! Вы также увидите некоторые идеи о том, что вы можете построить 😃

Подведение итогов

HTML позволяет вам создать структуру веб-сайта.

CSS позволяет вам сделать сайт красивым.

JavaScript позволяет вам изменить HTML и CSS. Поскольку он позволяет вам изменять HTML и CSS, он может делать массу вещей.

Вот и все! Надеюсь, это поможет вам лучше понять разницу между HTML, CSS и JavaScript!

Спасибо за чтение. Эта статья изначально была размещена на мой блог. Подписаться на моя рассылка если вы хотите больше статей, которые помогут вам стать лучшим разработчиком внешнего интерфейса.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *