Создание кнопки с переходом в HTML

Введение

HTML-элемент <button> используется для создания кнопки на веб-странице, которую можно использовать для выполнения определенных действий. В этом руководстве мы узнаем, как создать кнопку с использованием HTML.

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Нажмите на кнопку "Go Live" в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 86%. Он получил 100% положительных отзывов от учащихся.

Создайте HTML-файл

Создайте HTML-файл с именем index.html. В этом файле мы создадим базовую структуру HTML.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Creating a Button in HTML</title>
  </head>
  <body></body>
</html>

Создайте кнопку

Для создания кнопки мы используем HTML-элемент <button>. Между открывающим и закрывающим тегами элемента кнопки мы можем добавить текст, изображения или多媒体-контент (multimedia content).

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Creating a Button in HTML</title>
  </head>
  <body>
    <button>Click Me!</button>
  </body>
</html>

Добавьте атрибут onclick

Мы можем добавить атрибут onclick к элементу кнопки, чтобы выполнить функцию JavaScript при нажатии на кнопку.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Creating a Button in HTML</title>
  </head>
  <body>
    <button onclick="alert('Hello World!')">Click Me!</button>
  </body>
</html>

Добавьте стилизацию CSS

Мы можем использовать CSS для стилизации кнопки в соответствии с нашими требованиями. Здесь мы добавим некоторые базовые стили CSS, чтобы изменить цвет текста, цвет фона и отступы кнопки.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Creating a Button in HTML</title>
    <style>
      button {
        background-color: #4caf50; /* Green */
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <button onclick="alert('Hello World!')">Click Me!</button>
  </body>
</html>

Резюме

В этом уроке мы узнали, как создавать кнопку с использованием HTML. Мы также узнали, как добавить функцию JavaScript к элементу кнопки и применить стилизацию CSS к кнопке. Освоив элемент кнопки, вы можете легко создавать кнопки для выполнения действий на вашем веб-странице.

HTML кнопка с переходом