: встраивает код JavaScript для добавления интерактивности на веб-страницу.
  • : содержит контент, который будет виден пользователям на веб-странице.

    • Часто используемые HTML-элементы

    Вот некоторые основные элементы HTML, которые вы будете часто использовать:

    Создание вашего первого HTML-файла

    Чтобы создать HTML-файл, вы можете использовать любой текстовый редактор, например Блокнот или VS Code. Вот простой пример:

    1. Откройте текстовый редактор и введите следующий код:
      HTML Tutorial  
    Example Number 1
      
    Hello, world!
    1. Сохраните файл с расширением .html (например, index.html)
    2. Откройте файл в веб-браузере, чтобы увидеть свою первую HTML-страницу в действии!
    3. Чтобы проверить свой код, нажмите Ctrl Shift C в Google Chrome, чтобы открыть инструменты разработчика и изучить структуру DOM.
    4. Перейдите на вкладку «Сеть» в инструментах разработчика и обновите вкладку браузера.

    Вы можете обнаружить, что на имя, которое вы сохранили, есть запрос, как показано на этом рисунке.
    \\\"Develop

    На вкладке ответа вы найдете написанный вами код, как показано на следующем рисунке
    \\\"Develop

    Теперь произошло следующее: как только вы открыли файл, сохраненный в формате html, компьютер начал запускать его в браузере. Браузер хотел что-то показать, поэтому он сделал запрос к файлу, из которого он был запущен. Файл предоставил браузеру ваш код, который был найден в разделе ответов. Поскольку это был html-файл, браузер начинает читать HTML-код сверху вниз. Этот процесс известен как синтаксический анализ. Во время анализа браузер встречает различные теги HTML (например, , , и т. д.) и начинает строить структуру под названием DOM на основе этих тегов. Пока браузер создает DOM, он одновременно отображает контент на вашем экране.

    Создание таблицы

    Давайте пойдем дальше и создадим простую таблицу в HTML:

    1. Откройте тот же HTML-файл и добавьте в тег следующий код:
    Table Example
      
        Name    Power    Is Kurama Present  
      
        Naruto    Rasengan    Yes  
      
        Sasuke    Sharingan    No
    1. Сохраните файл и обновите браузер, чтобы увидеть отображаемую таблицу.

    Обратите внимание, что заголовок отображается с помощью тега абзаца. Альтернативно вы также можете использовать тег , который центрирует заголовок таблицы. Поэкспериментируйте с тегом подписи и обновите его, чтобы увидеть изменения.

    Обратите внимание, что тег следует использовать только сразу после открывающего тега

    .

    Теперь вы успешно создали базовую таблицу в HTML. Не стесняйтесь экспериментировать с дополнительными строками и столбцами, чтобы освоиться с синтаксисом HTML.

    Заключение

    Поздравляем с первыми шагами в веб-разработке с помощью HTML! Ключом к освоению HTML является практика. Экспериментируйте с различными элементами, создавайте свои собственные веб-страницы и не бойтесь совершать ошибки — каждая ошибка — это возможность для обучения.

    Помните, это только начало. Продолжая развивать этот фундамент, вы вскоре сможете создавать более сложные и динамичные веб-сайты. Давайте сделаем Интернет лучше, по одной строке кода за раз.

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

    ","image":"http://www.luping.net/uploads/20240820/172415124366c475cb37fe7.png","datePublished":"2024-08-20T18:54:03+08:00","dateModified":"2024-08-20T18:54:03+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
    «Если рабочий хочет хорошо выполнять свою работу, он должен сначала заточить свои инструменты» — Конфуций, «Аналитики Конфуция. Лу Лингун»
    Онлайн-инструменты
    Учебник по программному обеспечению
    Навигация по сайту
    программирование
    титульная страница > программирование > Научитесь создавать веб-интерфейсы: часть понимания HTML

    Научитесь создавать веб-интерфейсы: часть понимания HTML

    Опубликовано 20 августа 2024 г.
    Просматривать:859

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

    Develop yourself to build Web UIs: Part Understanding HTML

    HTML (Язык разметки гипертекста) — это основа любой веб-страницы. Это стандартный язык, используемый для структурирования веб-страницы, определяющий, как контент отображается в браузере. Хотя внешний вид страницы определяется CSS (Каскадные таблицы стилей), а ее функциональность — JS (Javascript), HTML отвечает за фундаментальный скелет или структуру.

    Прежде чем погрузиться в эту часть курса, важно понять известные и повторяющиеся жаргоны, которые будут использоваться в вашем путешествии. Это поможет вам понять концепции по мере нашего продвижения (а также облегчит автору объяснение ;-) ).

    Понимание жаргона

    1. Язык программирования: набор инструкций, написанных с использованием определенного синтаксиса (способа языка программирования), которые может выполнять компьютер. Помните, что компьютер понимает только двоичный код (1 или 0), теперь, чтобы заставить компьютер понимать логику, а также найти компромисс, мы (люди) создали язык программирования, такой, что его легко использовать. нам кодировать, а также компьютеру его понимать.
    2. Компилятор: инструмент, который переводит код, написанный на языке программирования, в машинный язык, понятный и выполняемый компьютером.
    3. Синтаксис: правила, определяющие структуру языка программирования. Думайте об этом как о том, как слова располагаются в предложении, чтобы иметь смысл.
    4. Комментарии: примечания в коде, объясняющие, что делают определенные части кода. Комментарии помогают другим разработчикам (или вам самому в будущем) понять логику вашего кода.
    5. DOM (объектная модель документа): DOM — это древовидное представление HTML-документа. Каждый тег в вашем HTML становится узлом этого дерева. Например, если в вашем HTML есть тег с

      (абзацем) внутри него, браузер создает узел body с узлом абзаца в качестве его дочернего элемента.

    6. Дети: Вы поймете это по мере продвижения. Элементы, вложенные в другой элемент. Например, в HTML тег абзаца (

      ) внутри тега div (

      ) будет считаться дочерним элементом тега div.
    7. Элемент уровня блока: по мере продвижения вы будете знакомиться с этим жаргоном. Этот термин обычно описывает особенность элемента, заключающуюся в том, что он будет занимать всю доступную ширину.

      8. Начинаем работу с HTML

      HTML означает Язык разметки гипертекста

      • Гипертекст: относится к способности HTML связывать различные документы вместе.

      • Язык разметки: использует теги для аннотирования текста, определяя, как он должен отображаться в браузере.

      Вот базовая структура HTML-документа:

      
  
    HTML Tutorial
      Hello, world!

      • Теги: в HTML теги используются для определения элементов. Теги заключаются в угловые скобки, например или

        .

      • Элементы: состоят из открывающего и закрывающего тегов, которые могут содержать контент. Например,

        Привет, мир!

        — это элемент абзаца.

      Структура HTML-документа

      Каждый HTML-документ имеет базовую структуру:

      1. : объявляет тип документа и версию HTML.
      2. : корневой элемент, заключающий в себе все остальные элементы HTML.
      3. : содержит метаинформацию о документе, такую ​​как заголовок и ссылки на таблицы стилей.
      4. : устанавливает заголовок веб-страницы, отображаемый в строке заголовка или на вкладке браузера.
      5. : предоставляет метаданные о HTML-документе, такие как набор символов, автор и настройки области просмотра. Это самозакрывающийся тег.
      6. : встраивает код CSS для стилизации HTML-элементов.
      7. : встраивает код JavaScript для добавления интерактивности на веб-страницу.
      8. : содержит контент, который будет виден пользователям на веб-странице.

      Часто используемые HTML-элементы

      Вот некоторые основные элементы HTML, которые вы будете часто использовать:

      • : определяет абзац.
      • : элемент уровня блока, используемый для группировки других элементов.
      • : встроенный элемент, используемый для группировки текста в целях стилизации.
      • : представляет вводный контент или навигационные ссылки раздела.
      • От

        до
        : заголовки, где

        — самый высокий уровень, а

        — самый низкий.

      • : вставляет разрыв строки (самозакрывающийся тег — означает, что тег закрывать нет необходимости).
      • : используется для создания HTML-формы для ввода данных пользователем.
      • : создает поле ввода, обычно используемое в форме.
      • : создает раскрывающийся список.
      • : связывает текстовую метку с элементом формы.
    : определяет таблицу.
  • : определяет строку в таблице.
  • : определяет ячейку в строке таблицы.
  • : определяет ячейку заголовка в строке таблицы.
  • : определяет неупорядоченный (маркированный) список.
    • : определяет упорядоченный (нумерованный) список.
    2. : определяет элемент списка.

      Создание вашего первого HTML-файла

      Чтобы создать HTML-файл, вы можете использовать любой текстовый редактор, например Блокнот или VS Code. Вот простой пример:

      1. Откройте текстовый редактор и введите следующий код: 
      

  HTML Tutorial
      Example Number 1
      
  
      Hello, world!
      1. Сохраните файл с расширением .html (например, index.html)
      2. Откройте файл в веб-браузере, чтобы увидеть свою первую HTML-страницу в действии!
      3. Чтобы проверить свой код, нажмите Ctrl Shift C в Google Chrome, чтобы открыть инструменты разработчика и изучить структуру DOM.
      4. Перейдите на вкладку «Сеть» в инструментах разработчика и обновите вкладку браузера.

      Вы можете обнаружить, что на имя, которое вы сохранили, есть запрос, как показано на этом рисунке.
      Develop yourself to build Web UIs: Part Understanding HTML

      На вкладке ответа вы найдете написанный вами код, как показано на следующем рисунке
      Develop yourself to build Web UIs: Part Understanding HTML

      Теперь произошло следующее: как только вы открыли файл, сохраненный в формате html, компьютер начал запускать его в браузере. Браузер хотел что-то показать, поэтому он сделал запрос к файлу, из которого он был запущен. Файл предоставил браузеру ваш код, который был найден в разделе ответов. Поскольку это был html-файл, браузер начинает читать HTML-код сверху вниз. Этот процесс известен как синтаксический анализ. Во время анализа браузер встречает различные теги HTML (например, ,

      , и т. д.) и начинает строить структуру под названием DOM на основе этих тегов. Пока браузер создает DOM, он одновременно отображает контент на вашем экране.

      Создание таблицы

      Давайте пойдем дальше и создадим простую таблицу в HTML:

      1. Откройте тот же HTML-файл и добавьте в тег следующий код: 
      Table Example
      Name Power Is Kurama Present
      Naruto Rasengan Yes
      Sasuke Sharingan No
      1. Сохраните файл и обновите браузер, чтобы увидеть отображаемую таблицу.

      Обратите внимание, что заголовок отображается с помощью тега абзаца. Альтернативно вы также можете использовать тег

      , который центрирует заголовок таблицы. Поэкспериментируйте с тегом подписи и обновите его, чтобы увидеть изменения.

      Обратите внимание, что тег

      следует использовать только сразу после открывающего тега .

      Теперь вы успешно создали базовую таблицу в HTML. Не стесняйтесь экспериментировать с дополнительными строками и столбцами, чтобы освоиться с синтаксисом HTML.

      Заключение

      Поздравляем с первыми шагами в веб-разработке с помощью HTML! Ключом к освоению HTML является практика. Экспериментируйте с различными элементами, создавайте свои собственные веб-страницы и не бойтесь совершать ошибки — каждая ошибка — это возможность для обучения.

      Помните, это только начало. Продолжая развивать этот фундамент, вы вскоре сможете создавать более сложные и динамичные веб-сайты. Давайте сделаем Интернет лучше, по одной строке кода за раз.

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

      3. Заявление о выпуске Эта статья воспроизведена по адресу: https://dev.to/marina_labs/develop-yourself-to-build-web-uis-part-1-understanding-html-4of9?1. В случае нарушения прав обращайтесь по адресу Study_golang@163. .com, чтобы удалить его
      Последний учебник Более>
      КлассификацияБолее>
      изучать японский учить корейский учить китайский учить иностранный язык игра Общая проблема Технологическая периферия ИИ Учебник по программному обеспечению программирование статья

      Изучайте китайский

      инструментБолее>
      Декодирование изображения в формате base64
      Китайский Пиньинь
      Кодировка Юникод
      JS-обфускация, шифрование, сжатие
      Инструмент шестнадцатеричного шифрования URL-адресов
      Инструмент преобразования кодировки UTF-8
      Онлайн-инструменты кодирования и декодирования Ascii
      Инструмент шифрования MD5
      Онлайн-инструмент для шифрования и дешифрования хеша/хеш-текста
      Онлайн-шифрование SHA

      Отказ от ответственности: Все предоставленные ресурсы частично взяты из Интернета. В случае нарушения ваших авторских прав или других прав и интересов, пожалуйста, объясните подробные причины и предоставьте доказательства авторских прав или прав и интересов, а затем отправьте их по электронной почте: [email protected]. Мы сделаем это за вас как можно скорее.

      Copyright© 2022 湘ICP备2022001581号-3