Почему мы называем html страницу index html
Перейти к содержимому

Почему мы называем html страницу index html

  • автор:

Начало работы

Если вы абсолютный новичок в работе с HTTP-сервером Apache или в запуске веб-сайтов вообще, вы можете не знать с чего начать или какие вопросы задавать. Этот документ познакомит вас с основами.

  • Клиенты, серверы и URL-адреса
  • Имена хостов и DNS
  • Файлы конфигурации и директивы
  • Контент веб-сайта
  • Файлы журналов и устранение неполадок
  • Что дальше?

См. также

Клиенты, серверы и URL-адреса ¶

Адреса в Интернете записываются с помощью URL — Uniform Resource Locator (унифицированный указатель ресурса), который указывает на используемый протокол (например, http ), имя сервера (например, www.apache.org ), URL-путь (например, /docs/current/getting-started.html ) и, возможно, строку запроса (например, ?arg=value ), используемую для передачи серверу дополнительных аргументов.

Клиент (например, веб-браузер) подключается к серверу (например, вашему HTTP-серверу Apache), используя определённый протокол, и отправляет запрос на ресурс, используя URL-путь.

URL-путь может обозначать множество вещей на сервере. Это может быть файл (как getting-started.html ), обработчик (как server-status) или файл какой-то программы (как index.php ). Мы рассмотрим это подробней ниже, в разделе Контент веб-сайта.

Сервер отправляет ответ, содержащий код состояния и, опционально, тело ответа. Код состояния указывает, был ли запрос успешно обработан, а если нет, то какая ошибка произошла. Это говорит клиенту, что он должен делать с ответом. Вы можете прочитать о возможных кодах ответа на Вики HTTP-сервера Apache.

Детали транзакции и условия возникновения ошибки записываются в файлы журналов. Это описывается более подробно ниже, в разделе Файлы журналов и устранение неполадок.

Имена хостов и DNS ¶

Для того чтобы соединиться с сервером, клиент сначала должен преобразовать имя сервера в IP-адрес — место в Интернете, где находится сервер. Таким образом, чтобы ваш веб-сервер был доступен, необходимо, чтобы имя сервера было в DNS.

Если вы не знаете как это сделать, вам нужно обратиться к сетевому администратору или поставщику услуг Интернета (провайдеру). Они могут сделать это для вас.

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

Если вы тестируете сервер, не имеющий выхода в Интернет, можете поместить имена хостов в файл hosts для того что бы имя разрешалось локально. Например, вы можете добавить запись для отправки запросов к www.example.com на локальный компьютер, для тестирования. Эта запись будет выглядеть так:

Файл hosts, скорее всего, расположен в /etc/hosts или C:\Windows\system32\drivers\etc\hosts .

Вы можете узнать больше о файле hosts и больше о DNS.

Файлы конфигурации и директивы ¶

HTTP-сервер Apache настроен с помощью простых текстовых файлов. Эти файлы могут располагаться в разных местах, в зависимости от того как вы установили сервер. Общие места расположения файлов можно найти в Вики HTTP-сервера Apache. Если вы установили httpd из исходного кода, то расположение файлов конфигурации по умолчанию следующее: /usr/local/apache2/conf . По умолчанию файл конфигурации называется httpd.conf . Это тоже может варьироваться в сторонних дистрибутивах сервера.

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

Сервер настраивается путём размещения директив конфигурации в этих файлах конфигурации. Директива — это ключевое слово с одним или несколькими аргументами, устанавливающими её значение.

На вопрос: «Где я должен прописать эту директиву?» – обычно отвечают, там где ты хочешь использовать её. Если это глобальная настройка, она должна располагаться в конфигурационном файле вне разделов , , или других разделов. Если настройка относится только к конкретному каталогу, значит она должна быть внутри секции , которая описывает этот каталог, и так далее. Смотри документ Разделы конфигурации с подробным описанием вышеуказанных разделов.

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

Контент веб-сайта ¶

Содержимое сайта может принимать различные формы, но в широком смысле разделяется на статический и динамический контент.

Статический контент — это, например, HTML-файлы, файлы изображений, CSS-файлы и другие файлы, которые просто лежат на диске. Директива DocumentRoot указывает где в вашей файловой системе, вы должны разместить эти файлы. Эта директива устанавливается глобально или отдельно для каждого виртуального хоста. Посмотрите в своём файле(ах) конфигурации, чтобы узнать, как именно эта директива используется на вашем сервере.

Обычно, когда запрашивается каталог, без указания имени файла, то будет отдан документ с именем index.html . Например, если для директивы DocumentRoot установлено значение /var/www/html и приходит запрос на адрес http://www.example.com/work/ , то файл расположенный по пути /var/www/html/work/index.html будет отдан клиенту.

Динамический контент — это всё что генерируется во время запроса и может изменяться от запроса к запросу. Существует множество способов создания динамического контента. Различные обработчики доступны для генерации содержимого. Могут быть написаны специальные CGI программы для генерации контента на сайте.

Для написания кода с разнообразным функционалом могут использоваться сторонние модули, такие как mod_php. Множество сторонних приложений, написанных на различных языках программирования, и утилит доступны для скачивания и установки на ваш HTTP-сервер Apache. Поддержка сторонних продуктов выходит за рамки этой документации. При необходимости вы должны самостоятельно найти их документацию или форумы поддержки, где вы сможете получить ответы на свои вопросы.

Файлы журналов и устранение неполадок ¶

Для вас, как администратора HTTP-сервера Apache, самые ценные активы — это файлы журналов (лог-файлы), в частности, журнал ошибок. Исправление любой проблемы без журнала ошибок можно сравнить с вождением автомобиля с закрытыми глазами.

Расположение журнала ошибок задаётся директивой ErrorLog , которая может быть установлена глобально или для каждого виртуального хоста. Записи в журнале ошибок расскажут вам, что и когда пошло не так. Зачастую они также смогут подсказать, как что-то исправить. Каждая запись в журнале ошибок содержит код ошибки, по которому вы можете поискать в Интернете более подробное описание того, как решить проблему. Вы также можете настроить журнал ошибок так, чтобы в него записывался идентификатор журнала, который можно сопоставить с записями в журнале доступа — это поможет определить, какой запрос какую ошибку вызвал.

Больше о логирование вы можете узнать в документации о журналах.

Что дальше? ¶

Теперь, когда вы знакомы с основами, пора двигаться дальше.

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

Comments

Notice:
This is not a Q&A section. Comments placed here should be pointed towards suggestions on improving the documentation or server, and may be removed by our moderators if they are either implemented or considered invalid/off-topic. Questions on how to manage the Apache HTTP Server should be directed at either our IRC channel, #httpd, on Libera.chat, or sent to our mailing lists.

Copyright 2023 The Apache Software Foundation.
Licensed under the Apache License, Version 2.0.

Вопрос / ответ

Панель управления хостингом

E-Mail

  • Управление E-mail аккаунтами
  • MX-записи
  • Почтовый веб-клиент: Roundcube
  • Перенаправления
  • Автоответчики
  • Списки рассылок
  • Черный список E-Mail
  • Сообщения об отсутствии
  • Универсальный почтовый адрес

Базы данных MySQL

  • phpMyAdmin
  • Создание базы данных
  • Удаление базы данных
  • Добавление пользователей
  • Изменение пароля базы данных

SSL защита сайта

  • Установка сертификата Let’s Encrypt
  • Установка купленного сертификата
  • Использование сертификатов сервера
  • Создание самоподписанного сертификата
  • Загрузка файлов на защищенный сайт

Управление DNS

  • DNS записи
  • Изменение параметров DNS
  • Информация для новичков

FTP аккаунты

  • Создание FTP аккаунта
  • Изменение и удаление FTP аккаунтов
  • Создание FTP аккаунта с доступом к конкретному поддомену

Поддомены

  • Создание поддоменов
  • Удаление поддоменов
  • Статистика поддоменов
  • Лог использования и лог ошибок
  • Создание FTP аккаунта с доступом к конкретному поддомену

Резервные копии

  • Создание резервной копии
  • Хранение резервных копий
  • Выбор того, что необходимо сохранить в резервной копии
  • Восстановление из резервной копии

Менеджер файлов

  • Навигация
  • Загрузка файлов
  • Создание новых папок и файлов
  • Копирование и перемещение файлов
  • Редактирование файлов
  • Переименование файлов
  • Изменение прав доступа к файлам
  • Удаление файлов и папок

Загрузка файлов сайта на сервер

  • Структура директорий
  • Загрузка через FTP
  • Загрузка с помощью файлового менеджера
  • Основной файл сайта (index)

Статистика сайта

  • Дисковое пространство
  • Системные логи
  • Статистика Webalizer
  • Информация об аккаунте

Выполнение скриптов

  • Программные пути
  • PHP скрипты
  • CGI скрипты
  • Установленные модули Perl
  • Общие сведения о правах доступа

С чего начать

  • Вход в панель управления
  • Выход из панели управления

Разное

  • Дополнительные домены
  • Перенаправление сайта
  • Доменные указатели
  • Cron задачи
  • Страницы ошибок
  • Запароленные папки
  • Mime-типы
  • Обработчики Apache
  • Ключи входа

Технические вопросы

SSH, FTP, SFTP

  • Подключение по SSH
  • Подключение по FTP
  • Подключение по SFTP
  • Установка composer

Базы данных MySQL

  • Хост для подключения к MySQL
  • Подключение к MySQL извне
  • Подключение на внешний сервер Mysql
  • Логин/пароль для входа в PhpMyAdmin

Почта

  • Настройка отправки писем с сайта
  • Пересылка почты
  • Адрес авторизации в почте
  • Сайт рассылает спам
  • Лимит на отправку писем
  • Статистика отправки писем
  • Настройка почтового клиента
  • Настройка заголовка From

Memcached

  • Как заказать Memcached сервер
  • Использование Memcached
  • Memcached и WordPress
  • Memcached и Joomla
  • Memcached и Bitrix

Почтовый хостинг

SSL-сертификаты

  • Подтверждение сертификата

Домены

  • NS сервера

Оплата услуг, тарифы

  • Изменение тарифного плана

CMS хостинг

  • WordPress хостинг
  • 1С хостинг

Партнерская программа

Бухгалтерия, документы

  • Заключение бумажного договора
  • Акты выполненных работ
  • Отказ от услуг

БелГИЭ

  • Регистрация сайта в БелГИЭ
  • Изменение данных о сайте
  • Удаление сайта из БелГИЭ
  • Регистрация субдоменов

Другие вопросы

  • Чем открыть файл PDF

Основной файл сайта (index)

index.html — файл по умолчанию для любой веб-папки. Это означает, что когда посетитель переходит по адресу http://site.by, в действительности сервер открывает файл http://site.by/index.html. Это актуально для любой общедоступной папки, включая поддомены.

При загрузке основного файла веб-сайта, не забудьте назвать его index.html. Могут использоваться и другие расширения для главного файла index (index.php, index.shtml и др.), в зависимости от того какой язык используется.

Понимание страницы Index.html на веб-сайте

Человек, просматривающий страницу индекса / acme

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

Человек, просматривающий страницу индекса / acme

Домашняя страница по умолчанию

Страница index.html — это наиболее распространенное имя, используемое для страницы по умолчанию, отображаемой на веб-сайте, если никакая другая страница не указана, когда посетитель запрашивает сайт. Другими словами, index.html — это имя, используемое для домашней страницы сайта.

Архитектура сайта и Index.html

Веб-сайты создаются внутри каталогов на веб-сервере. Для вашего сайта вы должны сохранить каждую веб-страницу в виде отдельного файла. Например, ваша страница «О нас» может быть сохранена как about.html, а ваша страница «Контакты» может быть contact.html . Ваш сайт будет состоять из этих .html документов.

Иногда, когда кто-то посещает веб-сайт, он делает это, не указывая один из этих конкретных файлов в адресе, который он использует для URL. Например:

http://www.lifewire.com

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

index.html

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

Другие имена страниц по умолчанию

Помимо index.html, некоторые сайты по умолчанию используют другие имена страниц, в том числе:

  • index.htm
  • default.htm или default.html
  • home.htm или home.html

Реальность такова, что веб-сервер можно настроить для распознавания любого файла, который вы хотите использовать в качестве файла по умолчанию для этого сайта. В таком случае, все еще хорошая идея придерживаться index.html или index.htm, потому что он сразу распознается на большинстве серверов без какой-либо дополнительной настройки. Хотя default.htm иногда используется на серверах Windows, использование index.html практически гарантирует, что независимо от того, где вы решите разместить свой сайт, в том числе, если вы решите сменить хостинг-провайдеров в будущем, ваша домашняя страница по умолчанию все равно будет распознаваться и отображаться ,

Вы должны иметь страницу index.html во всех ваших каталогах

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

Использование имени файла по умолчанию, например, index.html также является функцией безопасности

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

Если вы не поместите файл index.html в каталог, по умолчанию большинство веб-серверов отобразит список файлов всех файлов в этом каталоге. Хотя это поведение можно отключить на уровне сервера, это означает, что вам нужно привлечь администратора сервера, чтобы заставить его работать. Если вам не хватает времени и вы хотите контролировать это самостоятельно, простой способ — просто написать веб-страницу по умолчанию и назвать ее index.html. Загрузка этого файла в ваш каталог поможет закрыть эту потенциальную дыру в безопасности. Кроме того, рекомендуется также связаться с вашим хостинг-провайдером и попросить отключить просмотр каталога.

Сайты, которые не используют файлы .HTML

Некоторые веб-сайты, например те, которые работают на системе управления контентом или используют более надежные языки программирования, такие как PHP или ASP, могут не использовать HTML-страницы в своей структуре. Для этих сайтов вы все еще хотите убедиться, что задана страница по умолчанию, а для выбранных каталогов на этом сайте наличие страницы index.html (или index.php, index.asp и т. Д.) Все еще желательно по описанным причинам. выше.

Изменение файлов с помощью рабочих областей (вкладка файловой системы)

Используйте вкладку Файловая система в средстве Источники , чтобы определить рабочую область, чтобы сохранить изменения DevTools в файлах исходного кода, а не только в временной копии файлов, возвращаемых веб-сервером.

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

Чтобы обновить свои знания об используемых технологиях, ознакомьтесь со следующими статьями:

  • Используйте HTML, CSS и JavaScript для создания веб-страницы. См . статью Приступая к работе с Интернетом.
  • Используйте средства разработки для внесения основных изменений в CSS. См . статью Начало работы с просмотром и изменением CSS.
  • Запустите локальный веб-сервер HTTP. См. раздел:
    • Использование Node.js (используется в этом руководстве). Настройте сервер localhost в разделе Установка расширения DevTools для Visual Studio Code.
    • Использование Python: запуск простого локального HTTP-сервера в статье Как настроить локальный тестовый сервер?

    Введение

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

    • У вас есть исходный код демонстрационного веб-сайта на рабочем столе.
    • Вы запускаете локальный веб-сервер из каталога исходного кода, чтобы сайт был доступен по адресу localhost:8080 . Примечание. Если используется параметр сервера Python, номер порта по умолчанию — 8000 .
    • Вы открыли localhost:8080 в Microsoft Edge и используете средства разработки для изменения исходного кода веб-сайта, который включает файлы CSS, HTML и JavaScript.

    В этом руководстве описаны инструкции по настройке среды.

    Ограничения

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

    DevTools не поддерживает все варианты платформы; Например, функция «Рабочие области» (вкладка «Файловая система«) не работает с платформой «Создание React приложения».

    Если при использовании рабочих областей с выбранной платформой возникают проблемы или вы определяете необходимые шаги для конкретной платформы, запустите поток в списке рассылки Chrome DevTools или задайте вопрос в Stack Overflow , чтобы обменяться информацией с остальной частью сообщества DevTools.

    Связанная функция: переопределения

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

    Функция переопределений позволяет хранить локальную копию файлов веб-страницы на сервере. При обновлении страницы Microsoft Edge загружает локальную копию файлов вместо файлов на сервере. Дополнительные сведения о переопределениях см. в статье Переопределение ресурсов веб-страницы с помощью локальных копий (вкладка Переопределения).

    Создание каталога исходных файлов

    Мы настроим демонстрационные файлы, а затем настроим Средства разработки.

    1. В другом окне или вкладке перейдите к исходному коду демонстрации Рабочих областей.
    2. Создайте app каталог, например ~/Desktop/app или C:\Users\myusername\app\ . Скопируйте index.html , ../shared/img/logo.png , README.md , script.js и styles.css из демонстрационного исходного кода в каталог app . В остальной части руководства этот каталог называется ~/Desktop/app или C:\Users\myusername\app\ , хотя можно использовать другой путь.
    3. Если вы еще этого не сделали, установите Node.js и npm. Дополнительные сведения см. в статье Установка Node.js и диспетчера пакетов узлов (npm)статьи Установка расширения DevTools для Visual Studio Code.
    4. Перейдите в командную строку, например оболочку git bash или панель Терминала в Microsoft Visual Studio Code.
    5. Перейдите в app созданный каталог, например ~/Desktop/app или C:/Users/myusername/app . Если вы используете оболочку git bash, это оболочка UNIX, поэтому даже в Windows необходимо завернуть путь к каталогу с обратными косыми чертами в кавычки или использовать косую черту, а не обратную косую черту.
    6. Выполните одну из следующих команд, чтобы запустить веб-сервер:
      Node.js параметр:

    # Node.js option cd ~/Desktop/app # or: cd C:/Users/myusername/app npx http-server # Node.js 

    Дополнительные сведения и параметры см. в статье Запуск сервера (npx http-server)статьи Установка расширения DevTools для Visual Studio Code.

    # Python 2 option cd ~/Desktop/app # or: cd C:/Users/myusername/app python -m SimpleHTTPServer # Python 2 
    # Python 3 option cd ~/Desktop/app # or: cd C:/Users/myusername/app python -m http.server # Python 3 

    Демонстрация рабочих областей DevTools

  • Откройте вкладку в Microsoft Edge и перейдите к локально размещенной версии сайта. Вы должны иметь доступ к нему с помощью localhost:8080 : Другой распространенный эквивалентный URL-адрес — . http://0.0.0.0:8080 Номер порта по умолчанию для параметра сервера Python — 8000 . Точный номер порта может отличаться.
  • Определение рабочей области в средствах разработки

    1. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS), чтобы открыть консоль DevTools: Консоль DevTools
    2. Перейдите на вкладку Источники (значок инструмента Источники).
    3. В области Навигатор (слева) щелкните вкладку Файловая система (которая сгруппирована по вкладке Страница ): Вкладка Файловая система
    4. Щелкните Добавить папку в рабочую область. откроется проводник или Finder.
    5. Перейдите в /app/ созданный каталог. Например, в текстовом поле Папка: введите путь, например ~/Desktop/app или C:\Users\myusername\app\ . Затем нажмите кнопку Выбрать папку . DevTools предложит предоставить DevTools полный доступ к каталогу app .
    6. Нажмите кнопку Разрешить , чтобы предоставить DevTools разрешение на чтение и запись в каталог. На вкладке Файловая система отображаются значки страниц с зеленой точкой для index.html , script.js и styles.css . Зеленая точка указывает, что DevTools установило сопоставление между сетевым ресурсом страницы, полученной с веб-сервера, и локальным исходным файлом в каталоге app : Вкладка Файловая система содержит зеленую точку, указывающую на сопоставление между ресурсом, полученным с сервера, и локальным исходным файлом.

    Изменение CSS и сохранение изменений в исходном файле

    Чтобы внести изменения в CSS-файл и сохранить его на диске, сделайте следующее:

    1. В средстве Источники на вкладке Файловая система (сгруппированная с вкладкой Страница ) выберите styles.css , чтобы открыть его в области редактора. Свойство color h1 элемента имеет значение fuchsia : Просмотр styles.css в текстовом редакторе
    2. Выберите инструмент Элементы (значок инструмента Элементы), а затем в дереве DOM разверните элемент и выберите элемент. В области Стили отображаются правила CSS, применяемые к элементу . Значок сопоставленного файла (значок сопоставленного файла) рядом styles.css:1 со страницей с зеленой точкой. Зеленая точка означает, что все изменения, внесенные в это правило CSS, сопоставляются с styles.css каталогом app : Значок
    3. Измените значение color свойства элемента на оранжевый . Для этого выберите элемент в дереве DOM. В правиле CSS для h1 щелкните fuchsia , начните вводить оранжевый цвет, а затем выберите оранжевый из списка цветов: Изменение свойства color в styles.css
    4. Откройте копию styles.css в каталоге app в текстовом редакторе, например Visual Studio Code. Теперь color свойству присвоен новый цвет, который в этом примере является оранжевым. Изменение было внесено не только в копию файла, возвращенную с веб-сервера; это изменение также было внесено в сопоставленный файл в каталоге app рабочей области.
    5. Обновите страницу.

    Для цвета элемента по-прежнему задан новый цвет. Это изменение сохраняется при обновлении, так как при его изменении средства разработки сохранили его на диске. При обновлении страницы локальный сервер обслуживал измененную копию файла с диска.

    Совет: Вы также можете изменить цвет, щелкнув образец цвета fucshia, чтобы открыть средство выбора цвета, чтобы выбрать новый цвет. Значение HEX для выбранного цвета — это имя цвета.

    Изменение HTML и сохранение изменений в исходном файле

    В средстве Элементы можно изменить тег html в копии файла, возвращаемого сервером. Тем не менее, чтобы сохранить изменения в локальном исходном файле, необходимо использовать средство «Источники» вместо средства «Элементы «.

    Изменение дерева DOM в инструменте «Элементы» не сохраняет изменения

    Вы можете внести изменения в HTML-содержимое с помощью дерева DOM в инструменте Элементы , но изменения в дереве DOM не сохраняются на диске и влияют только на текущий сеанс браузера.

    Ниже показано, что изменения в дереве DOM не сохраняются при обновлении страниц.

    1. Продолжая ранее, выберите инструмент Элементы .
    2. В дереве DOM в элементе выделите текстовую строку DevTools Workspaces Demo , удалите ее, введите текстовую строку I Love Cake и нажмите клавишу ВВОД. На отрисоченной веб-странице отображается новый текст заголовка: Попытка изменения HTML из дерева DOM в инструменте
    3. index.html Откройте файл, который находится в каталоге app , в текстовом редакторе, например Visual Studio Code. Только что внесенные изменения не отображаются; В заголовке по-прежнему отображается сообщение «DevTools Workspaces Demo».
    4. В браузере обновите демонстрационную страницу. Страница возвращается к исходному заголовку «Демонстрация рабочих областей DevTools», так как дерево DOM с вашим изменением было отменено, а модель DOM была повторно создана из неизмененного index.html файла в каталоге app рабочей области.

    [!NOTE] > This section describes why the workflow from [Try changing html from the Elements panel](#try-changing-html-from-the-elements-panel) doesn’t work. You should skip this section if you don’t care why. * The tree of nodes that are displayed on the **Elements** tool represents the [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) of the page. * To display a page, a browser fetches html over the network, parses the html, and then converts it into a tree of DOM nodes. * If the page has any JavaScript, that JavaScript can add, delete, or change DOM nodes. CSS can change the DOM, too, by using the [`content`](https://developer.mozilla.org/docs/Web/CSS/content) property. * The browser eventually uses the DOM to determine what content it should present to browser users. * Therefore, the final state of the webpage displayed for users may be very different from the HTML that the browser fetched. * This makes it difficult for DevTools to resolve where a change made in the **Elements** tool should be saved, because the DOM is affected by HTML, JavaScript, and CSS. In short, the **DOM Tree** `!==` HTML. —>

    Изменение HTML из средства «Источники» сохраняет изменения

    Если вы хотите сохранить изменения в HTML веб-страницы, измените HTML-код в средстве «Источники » с определенной рабочей областью (на вкладке Файловая система ), а не изменяйте HTML-код в дереве DOM в инструменте Элементы .

    1. Перейдите на вкладку Источники (значок средства )
    2. В области Навигатор слева выберите index.html . Откроется HTML-код страницы.
    3. I Love Cake

      Замените

      DevTools Workspaces Demo

      на , в списке файлов (в отличие от дерева DOM в инструменте Элементы).

    4. Нажмите клавиши CTRL+S (Windows, Linux) или COMMAND+S (macOS), чтобы сохранить изменения.
    5. Обновите страницу. Заголовок на отображаемой странице изменится на «I Love Cake», так как эта строка была сохранена в index.html сопоставленном app каталоге: Изменение HTML из средства
    6. Откройте копию index.html в каталоге app в текстовом редакторе, например Visual Studio Code. Элемент

      содержит новый текст, так как вы внесли изменения с помощью редактора средства «Источники » для изменения index.html , а затем сохранили изменения, и этот файл был сопоставлен в рабочей области (вкладка Файловая система ), обозначенной зеленой точкой на значке файла.

    Изменение JavaScript и сохранение изменений в исходном файле

    Main местом для использования редактора кода DevTools является средство «Источники«. Но иногда при редактировании файлов требуется доступ к другим средствам, таким как элементы или консоль. Средство быстрого источника предоставляет только редактор из средства «Источники «, в то время как любой инструмент открыт.

    Чтобы открыть редактор кода DevTools вместе с другими инструментами, выполните следующие действия:

    1. Далее выберите инструмент Элементы ( значок инструмента
    2. Нажмите клавиши CTRL+SHIFT+P (Windows, Linux) или COMMAND+SHIFT+P (macOS), чтобы открыть меню Command.
    3. В командной строке Выполнить начните вводить быстрый ввод, а затем выберите Показать быстрый источник: Откройте средство В нижней части окна DevTools откроется средство быстрого источника , в котором отображается содержимое index.html , так как это последний файл, который вы редактировали в средстве Источники . При необходимости щелкните Развернуть быстрое представление и убедитесь, что выбран инструмент Элементы .
    4. Нажмите клавиши CTRL+P (Windows, Linux) или COMMAND+P (macOS), чтобы открыть файл в меню Команд: Открытие script.js с помощью диалогового окна
    5. Начните вводить скрипт, а затем выберите script.js , который находится в каталоге app/ . Список файлов отображается в средстве быстрого источника . На отображаемой демонстрационной веб-странице гиперссылка Изменить файлы с помощью рабочих областей не имеет стиля курсивом.
    6. Используйте средство быстрого источника , чтобы добавить следующий код в нижнюю часть script.js:

    document.querySelector('a').style = 'font-style:italic'; 

    Ссылка на странице теперь курсивом

  • Нажмите клавиши CTRL+S (Windows, Linux) или COMMAND+S (macOS), чтобы сохранить изменения.
  • Обновите страницу. При необходимости нажмите и удерживайте кнопку Обновить , а затем выберите Жесткое обновление. Теперь гиперссылка Изменить файлы с помощью рабочих областей на странице курсивом:
  • См. также

    • Откройте демонстрационную папку в средстве «Источники» и измените файл в разделе Пример кода для DevTools.

    Некоторые части этой страницы представляют собой измененные материалы, созданные и предоставленные корпорацией Google. Их использование регулируется условиями, описанными в лицензии Creative Commons Attribution 4.0 International License. Исходная страница находится здесь и автор Kayce Basques (Технический писатель, Chrome DevTools & Lighthouse).

    Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.

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

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