Код элемента сочетание клавиш. Как быстро открыть код страницы в браузере, даже если копирование запрещено
Необходимо быстро посмотреть все изменения на самом сайте, не затрагивая файлы и код сайта, выложенного в Интернет. Например, изменить цветовую гамму какого-либо блока, пододвинуть съехавший элемент и т.д.
Для этого многие вебмастера используют локальные серверы Denwer или OpenServer, запуская полную копия сайта у себя на компьютере. Этот способ универсальный и подойдет для профессионалов, с помощью него можно проверить работу различных скриптов и плагинов, поэкспериментировать с изменением дизайна и отредактировать все файлы сайта, а после теста перенести подходящие изменения непосредственно на сайт.
Пользователям далеким от вебмастерского искусства рекомендую для этих целей использовать браузер. Так как я использую Сhrome, приведу инструкцию со скриншотами именно по этому браузеру. По аналогии можно работать с Opera, Яндекс.Браузер, Mozilla Firefox и другими браузерами, принцип их инструментов схож.
Инструкция 1: как просмотреть весь HTML код сайта в браузере
Открываем необходимую веб-страницу вашего сайта. Кликаем правой кнопкой мыши по необходимому элементу, появится контекстное выпадающее меню браузера с доступными командами:
Рисунок 1. Просмотр всего HTML кода веб-страницы в браузере Chrome
Важно: Команды в выпадающем меню могут отличаться, например, для активных элементов (ссылки, картинки, видео) и неактивных (текст, фон, дивы):
Рисунок 2. Выпадающее меню браузера Chrome
Поэтому если вы не нашли необходимой команды, просто нажмите правую кнопку мыши в другом месте или воспользуйтесь горячими клавишами браузера.
Вернемся к рисунку 1, на нем показана необходимая команда для просмотра всего HTML кода исходной веб-страницы, она называется «Просмотр кода страницы «. Кликаем по команде, откроется новая вкладка с полным кодом исходной веб-страницы, большой плюс ко всему — просмотр доступен с подсветкой синтаксиса:
Рисунок 3. Фрагмент кода данного сайта
Данный инструмент очень полезен для нахождения и правки искомых элементов.
Альтернативные способы просмотра всего HTML кода веб-страницы
Для более быстрого доступа, можно использовать другие способы вызова данного инструмента
- На рисунке 1 мы также видим, что данная команда доступна по сочетанию клавиш + ;
- Вставить в адресную строку браузера view-source:сайт вместо моего домена вставляем свой адрес;
Оба способа универсальны и должны работать во всех браузерах.
Кому-то поначалу покажется, что это совсем не нужный инструмент, но просмотр всего HTML кода сайта отлично подходит для поиска в коде необходимых элементов, это могут быть ссылки, теги, мета-теги, атрибуты и другие элементы.
Сочетанием горячих клавиш + открываем окно поиска, в браузере Chrome оно появляется верху справа:
Рисунок 3. Поиск по коду сайту
После того, как вы ведете запрос в поисковую форму экран переместится к первому найденному элементу, с помощью стрелок можно перемещаться между ними и выбрать необходимый:
Рисунок 4. Поиск по HTML коду сайта
Инструкция 2: как просмотреть и отредактировать HTML и CSS код сайта в браузере Google Chrome
Теперь самая важная часть, в которой я покажу, как можно редактировать HTML и CSS код сайта в браузере. после чего переносить изменения в браузер.
Вот такой полезный инструмент всегда доступен в вашем браузере, экспериментируйте с другими командами, которые вам облегчат редактирование сайта.
Вы конечно же вид
Код элемента горячие клавиши. Как быстро открыть код страницы в браузере, даже если копирование запрещено
Долгое время для меня опция «показать исходный код страницы» была бесполезна и неинтересна. Пока изучение HTML на Codecademy и верстках собственных сайтов не переросло в мое новое увлечение. Тут и возник вопрос: где найти реальные кейсы и позаимствовать интересные решения для своей «копилки»? Ответ был неожиданно прост, как все гениальное: посмотреть исходный код страницы в Google Chrome! Делюсь с вами своими скромными находками.
Что такое исходный код страницы
Если вы, как и я, только делаете первые шаги в HTML-программировании, не лишним будет узнать что такое исходный код страницы.
Исходный код, он же HTML код страницы – текст на языке Hyper Text Markup Language (HTML). Он включает в себя собственно контент страницы (текст, таблицы) и тэги. Последние играют роль инструкции для браузера: как отображать контент, какой вид форматирования использовать, куда вставить гиперссылку или медиафайл. Ну а для нас, начинающих программистов исходный код – лучший полигон для обучения: находим интересный сайт и подсматриваем, сохраняем, используем удачные фрагменты. Как?Как посмотреть исходный код в странице браузера Google Chrome
Находим понравившуюся страницу. Например, меня заинтересовало оформление меню сайта. Открыть исходный код в браузере Google Chrome можно тремя способами:
- Щелкаем по иконке меню в правом верхнем углу браузера и выбираем пункт «Дополнительные инструменты». Среди прочих есть опция «Посмотреть исходный код». Признаться, редко использую данный способ: много лишних движений. Можно сделать еще проще.
- Нажимаем комбинацию клавиш Ctrl+U – открывается новое окно с исходным кодом;
- Для фанатов контекстного меню: щелчок правой кнопкой мыши по странице и выбираем опцию «Просмотр кода страницы».
С задачей посмотреть HTML код страницы в браузере справились. Переходим к самому интересному этапу.
Как отредактировать и сохранить исходный код
Чтобы научиться создавать сайты, недостаточно читать чужой HTML код. Нужно играть с ним, экспериментировать, вносить изменения и проверять результат. Начать можно даже с компиляции нескольких удачных образцов. Как отредактировать и сохранить исходный код?
Вариант 1. «Вручную»
После того, как мы открыли исходный код страницы, вызываем контекстное меню и выбираем опцию «Сохранить как» и сохраняем файл на жесткий диск. Редактируем файл в блокноте или Notepad, сохраняем изменения и открываем через браузер. Результаты наших изменений (удачные и не очень) отразятся в окне браузера.
Вариант 2. Для профи
Когда «играешь» с исходным кодом каждый день, процесс «сохранить – открыть – изменить – сохранить – проверить» утомляет. Для себя я нашла решение в виде установки плагина для Google Chrome – Firebug Lite . Он позволяет отредактировать и сохранить исходный код, не покидая окно браузера.
Разработчики браузеров позаботились об удобстве тех, кто создает сайты, открываемые в этих самых браузерах, а именно – о вебмастерах. Они добавили в стандартные функции инструменты разработчика, с помощью которых можно легко открыть и посмотреть исходный код страницы сайта в браузере : HTML, CSS, JavaScript (JS), получить различные полезные данные о структуре сайта, провести его технический анализ. В общем, увидеть много полезного.
Конечно же, данными инструментами пользуются не только создатели сайтов для работы, но и простые пользователи, которым исходный код позволяет посмотреть различные полезных данных.
Из этой стать вы узнаете, как в браузере посмотреть исходный код страницы сайта (как открыть HTML, CSS, JavaScript код сайта).
Как открыть исходный код страницы в браузере
Открыть исходный код веб страницы в браузере можно двумя способами:
- С помощью горячих клавиш;
- Открыть из контекстного меню.
Ctrl + U – комбинация горячих клавиш для просмотра исходного кода всей страницы сайта в отдельном новом окне. Стандартные для всех браузеров: Google Chrome, Opera, Mozilla Firefox, Яндекс браузера, IE.
Также в инструменты разработчика можно войти следующим образом:
Для того чтобы быстро найти нужный код, слово или текст на странице можно использовать стандартное для всех браузеров сочетание горячих клавиш поиска: Ctrl + G.
Видео-инструкция:
Просмотр кода элемента | исследовать элемент | проинспектировать элемент
Если вдруг нужно просмотреть не весь исходный код, а вывести на экран лишь отдельную его часть, какой-то участок на странице, то предыдущий инструмент не подойдет. Для этого в инструментах разработчика есть другая функция, о которой пойдет речь ниже.
Как просмотреть код элемента на странице:
Кроме того, можно использовать комбинации клавиш на клавиатуре для быстрого доступа к инспектированию
| Описание | Windows | Mac OS |
|---|---|---|
| Перемещение курсора | ||
| Перейти вправо или к началу следующей строки break | Стрелка Вправо | Стрелка Вправо |
| Перейти влево или к концу предыдущего разрыва строки | Стрелка Влево | Стрелка Влево |
| Один ряд вверх | стрелка вверх | стрелка вверх |
| Спуститесь вниз на один ряд | Стрелка Вниз | Стрелка Вниз |
| Перейти к началу текущей строки | Home | Cmd + Стрелка Влево |
| Перейти к концу текущей строки | End | Cmd + Стрелка Вправо |
| Перейти к началу документа | Ctrl + Home | Cmd + Стрелка Вверх |
| Перейти к концу документа | Ctrl + End | Cmd + Стрелка Вниз |
| Один кадр вверх | Page Up | Fn + Стрелка Вверх |
| Переместить вниз на один кадр | Page Down | Fn + Стрелка Вниз |
| Перейти к началу предыдущего слова | Ctrl + Стрелка Влево | Опция + Стрелка Влево |
| Перейти к началу следующего слова | Ctrl + Стрелка Вправо | Опция + Стрелка Вправо |
| Перейти к началу разрыва строки | Ctrl + Стрелка Вверх | Cmd + Стрелка Влево |
| Перейти к концу разрыва строки | Ctrl + Стрелка Вниз | Cmd + Стрелка Вправо |
| Выделение текста | ||
| Выбор символов слева | Shift + Стрелка Влево | Shift + Стрелка Влево |
| Выбор символов справа | Shift + Стрелка Вправо | Shift + Стрелка Вправо |
| Выбор линии вверх | Shift + Стрелка Вверх | Shift + Стрелка Вверх |
| Выбор линии вниз | Shift + Стрелка Вниз | Shift + Стрелка Вниз |
| Выбор слова слева | Shift + Ctrl + Left | Shift + Opt + Left |
| Выбор слова справа | Shift + Ctrl + Right | Shift + Opt + Right |
| Выделить абзацы слева | Shift + Ctrl + Up | Shift + Opt + Up |
| Выделить абзацы справа | Shift + Ctrl + Down | Shift + Opt + Down |
| Выделить текст между курсором и началом текущей строки | Shift + Главная | Cmd + Shift + Стрелка Влево |
| Выделить текст между курсором и концом текущей строки | Shift + End | Cmd + Shift + Стрелка Вправо |
| Выделить текст между курсором и началом документа | Shift + Ctrl + Home | Cmd + Shift + стрелка вверх или Cmd + Shift + Fn + стрелка влево |
| Выделить текст между курсором и концом документа | Shift + Ctrl + End | Cmd + Shift + стрелка вниз или Cmd + Shift + Fn + стрелка вправо |
| Выделить один кадр в момент текста над курсором | Shift + Page Up | Shift + Fn + Стрелка Вверх |
| Выделить один кадр в момент текста под курсором | Shift + Page Down | Shift + Fn + Стрелка Вниз |
| Выделить весь текст | Ctrl + A | Cmd + A |
| Найденный текст | Ctrl + F | Cmd + F |
| Форматирование Текста | ||
| Сделать выделенный текст полужирным | Ctrl + B | Cmd + B |
| Сделать выделенный текст курсивом | Ctrl + I | Cmd + I |
| Подчеркнуть выделенный текст | Ctrl + U | Cmd + U |
| Сделать выделенный текст надстрочным | Ctrl + Shift + = | Cmd + Shift + = |
| Сделать выделенный текст подстрочным | сочетание клавиш Ctrl= + | УМК= + |
| Редактирование текста | ||
| Удаление символов слева | клавиша Backspace | клавиша Backspace |
| Удаление символов справа | Удалить | Fn + Backspace |
| Удалить слова справа | Ctrl + Del | Cmd + Backspace |
| Удалить слова слева | Ctrl + Backspace | Cmd + Fn + Backspace |
| Табуляция | Tab | Tab |
| Выступ | Shift + Tab | Shift + Tab |
| Скопировать текст | Ctrl + C | Cmd + C |
| Найти и заменить текст | Ctrl + H | Cmd + F |
| Вставка текста | Ctrl + V | Cmd + V |
| Вырезать текст | Ctrl + X | Cmd + X |
| Повторить текст | Ctrl + Y | Shift + Cmd + Z |
| Отменить текст | Ctrl + Z | Cmd + Z |
Полный список комбинаций клавиш на клавиатуре
Часто читая статьи в интернете или инструкцию по установке какой-либо программы, Вы можете встретить комбинации клавиш (Ctrl-C, Ctrl-V, Win-R, Alt-Tab, Alt-F4 и т.д.). И если Вы, до сих пор не знаете, что они значат, тогда Вы можете ознакомиться с ними в нашей статьёй.
В данной статье представлен, полный список комбинаций клавиш на клавиатуре, используемые не только в операционной системе Windows.
Разделы по работе с комбинациями клавиш:
- Основные комбинации клавиш на клавиатуре
- Горячие клавиши общего назначения
- Комбинации клавиш предназначенные для работы с текстом
- Комбинации клавиш для работы с файлами
- Комбинации клавиш для работы в проводнике
- Комбинации клавиш для работы с окнами
- Комбинации клавиш для работы с диалоговыми окнами
- Комбинации клавиш для работы в браузерах (Internet Explorer, Google Chrome, Mozilla)
- Специальные возможности
Основные комбинации клавиш на клавиатуре
Alt+Tab — Переключение между окнами
Win+Tab — Переключение между окнами в режиме Flip 3D
Win+Up — Развернуть окноWin+Down — Восстановить / Минимизировать окно
Win+Left — Прикрепить окно к левому краю экрана
Win+Right — Прикрепить окно к правому краю экрана
Win+Shift+Left — Переключиться на левый монитор
Win+Shift+Right — Переключиться на правый монитор
Win+Home — Минимизировать / Восстановить все неактивные окна
Win+Break(или Pause) — Запустить элемент Система из Панели Управления (пункт Свойства при нажатии правой кнопкой мыши на Компьютер в меню Пуск)
Win+Space — Показать рабочий стол
Win+B — Переход в область уведомлений(трей)
Win+D — Свернуть окна или восстановить все окна
Win+E — Запустить Проводник(Explorer)
Win+F — Запустить встроенный диалог поиска Windows
Win+Ctrl+F — Запустить Поиск по компьютеру из домена
Win+F1 — Запустить встроенный диалог Windows: Справка и Поддержка
Win+G — Отобразить гаджеты поверх всех окон
Win+L — Блокировка рабочей станции(текущего сеанса пользователя)
Win+M — Минимизировать все окна
Win+P — Отобразить дополнительные опции дисплея (расширить рабочий стол на 2 монитор и т.п.)
Win+R — Запустить диалоговое окно Выполнить
Win+Т — Выбрать первый элемент в панели задач (Повторное нажатие переключает на следующий элемент, Win+Shift+T — прокручивает в обратном порядке)
Win+U — Запустить Центр специальных возможностей (Ease of Access Center)
Win+X — Запустить Mobility Center
Win+цифра— Запустить приложение с панели задач (Win+1 запускает первое приложения слева, Win+2, второе, и т.к.)
Win + «+» — Увеличить масштаб
Win + «-« — Уменьшить масштаб
Ctrl + колесо мыши (вверх\вниз) на рабочем столе — увеличить\уменьшить иконки рабочего стола.
В Проводнике (Explorer):
Alt+P — Показать / Скрыть Область предпросмотра
Панель задач:
Shift + щелчок на иконке — Открыть новое окно приложения
Ctrl + Shift + щелчок по иконке — Открыть новое окно приложения с привилегиями администратора
Shift + щелчок правой кнопкой на иконке — Показать меню приложения
Shift + щелчок правой кнопкой на группе иконок — Показать меню, восстановить все / cвернуть все / Закрыть все
Ctrl + щелчок по группе икнонок — Развернуть все окна группы
Примечание
Клавиша Win находится между клавишами Ctrl и Alt с левой стороны (на ней нарисована эмблема Windows).
Клавиша Menu находится слева от правого Ctrl.
Комбинация «клавиша» + «клавиша» означает, что сначала надо нажать первую клавишу, а затем, удерживая ее, вторую.
Горячие клавиши общего назначения
| Сочетание клавиш | Описание |
|---|---|
| Ctrl + Esc Win | Открыть меню «Пуск» (Start) |
| Ctrl + Shift + Esc Ctrl + Alt + Delete | Вызов «Диспетчера задач» |
| Win + E | Запуск «Проводника» (Explore) |
| Win + R | Отображение диалога «Запуск программы» (Run), аналог «Пуск» — «Выполнить» |
| Win + D | Свернуть все окна или вернуться в исходное состояние (переключатель) |
| Win + L | Блокировка рабочей станции |
| Win + F1 | Вызов справки Windows |
| Win + Pause | Вызов окна «Свойства системы» (System Properties) |
| Win + F | Открыть окно поиска файлов |
| Win + Сtrl + F | Открыть окно поиска компьютеров |
| Printscreen | Сделать скриншот всего экрана |
| Alt + Printscreen | Сделать скриншот текущего активного окна |
| Win + Tab Win + Shift + Tab | Выполняет переключение между кнопками на панели задач |
| F6 Tab | Перемещение между панелями. Например, между рабочим столом и панелью «Быстрый запуск» |
| Ctrl + A | Выделить всё (объекты, текст) |
| Ctrl + C Ctrl + Insert | Копировать в буфер обмена (объекты, текст) |
| Ctrl + X Shift + Delete | Вырезать в буфер обмена (объекты, текст) |
| Ctrl + V Shift + Insert | Вставить из буфера обмена (объекты, текст) |
| Ctrl + N | Создать новый документ, проект или подобное действие. В Internet Explorer это приводит к открытию нового окна с копией содержимого текущего окна. |
| Ctrl + S | Сохранить текущий документ, проект и т.п. |
| Ctrl + O | Вызвать диалог выбора файла для открытия документа, проекта и т.п. |
| Ctrl + P | Печать |
| Ctrl + Z | Отменить последнее действие |
| Shift | Блокировка автозапуска CD-ROM (удерживать, пока привод читает только что вставленный диск) |
| Alt + Enter | Переход в полноэкранный режим и обратно (переключатель; например, в Windows Media Player или в окне командного интерпретатора). |
Комбинации клавиш предназначенные для работы с текстом
| Сочетание клавиш | Описание |
|---|---|
| Ctrl + A | Выделить всё |
| Ctrl + C Ctrl + Insert | Копировать |
| Ctrl + X Shift + Delete | Вырезать |
| Ctrl + V Shift + Insert | Вставить |
| Ctrl + ← Ctrl + → | Переход по словам в тексте. Работает не только в текстовых редакторах. Например, очень удобно использовать в адресной строке браузера |
| Shift + ← Shift + → Shift + ↑ Shift + ↓ | Выделение текста |
| Ctrl + Shift + ← Ctrl + Shift + → | Выделение текста по словам |
| Home End Ctrl + Home Ctrl + End | Перемещение в начало-конец строки текста |
| Ctrl + Home Ctrl + End | Перемещение в начало-конец документа |
Комбинации клавиш для работы с файлами
| Сочетание клавиш | Описание |
|---|---|
| Shift + F10 Menu | Отображение контекстного меню текущего объекта (аналогично нажатию правой кнопкой мыши). |
| Alt + Enter | Вызов «Свойств объекта» |
| F2 | Переименование объекта |
| Перетаскивание с Ctrl | Копирование объекта |
| Перетаскивание с Shift | Перемещение объекта |
| Перетаскивание с Ctrl + Shift | Создание ярлыка объекта |
| Щелчки с Ctrl | Выделение нескольких объектов в произвольном порядке |
| Щелчки с Shift | Выделение нескольких смежных объектов |
| Enter | То же, что и двойной щелчок по объекту |
| Delete | Удаление объекта |
| Shift + Delete | Безвозвратное удаление объекта, не помещая его в корзину |
Комбинации клавиш для работы в проводнике Windows
| Сочетание клавиш | Описание |
|---|---|
| F3 или Ctrl + F | Отобразить или спрятать панель поиска в проводнике (переключатель). |
| ← → + (на цифровой клавиатуре) − (на цифровой клавиатуре) | Навигация по дереву проводника, свёртка-развёртка вложенных каталогов. |
| * (звездочка) на цифровой клавиатуре | Отображение всех папок, вложенных в выделенную папку |
| F5 | Обновить окно проводника или Internet Explorer. |
| Backspace | Перейти на уровень вверх в окне проводника или Internet Explorer. |
| F4 | Перейти к адресной строке проводника или Internet Explorer. |
Комбинации клавиш для работы с окнами
| Сочетание клавиш | Описание |
|---|---|
| Alt + Tab Alt + Shift + Tab | Вызов меню перехода между окнами и переход по нему |
| Alt + Esc Alt + Shift + Esc | Переход между окнами (в том порядке, в котором они были запущены) |
| Alt + F6 | Переключение между несколькими окнами одной программы (например, между открытыми окнами WinWord) |
| Alt + F4 | Закрытие активного окна (запущенного приложения). На рабочем столе — вызов диалога завершения работы Windows |
| Ctrl + F4 | Закрытие активного документа в программах, допускающих одновременное открытие нескольких документов |
| Alt F10 | Вызов меню окна |
| Alt + − (минус) | Вызов системного меню дочернего окна (например, окна документа) |
| Esc | Выйти из меню окна или закрыть открытый диалог |
| Alt + буква | Вызов команды меню или открытие колонки меню. Соответствующие буквы в меню обычно подчёркнуты (или изначально, или становятся подчёркнутыми после нажатия Alt). Если колонка меню уже открыта, то для вызова нужной команды необходимо нажать клавишу с буквой, которая подчёркнута в этой команде |
| Alt + Space | Вызов системного меню окна |
| F1 | Вызов справки приложения. |
| Ctrl + Up Ctrl + Down | Вертикальная прокрутка текста или переход вверх-вниз по абзацам текста. |
Комбинации клавиш для работы с диалоговыми окнами
| Сочетание клавиш | Описание |
|---|---|
| Ctrl + Tab | Перемещение вперед по вкладкам |
| Ctrl + Shift + Tab | Перемещение назад по вкладкам |
| Tab | Перемещение вперед по опциям |
| Alt + подчеркнутая буква | Выполнение соответствующей команды или выбор соответствующей опции |
| Enter | Выполнение команды для текущей опции или кнопки |
| Клавиши со стрелками | Выбор кнопки, если активная опция входит в группу переключателей |
| Shift + Tab | Перемещение назад по опциям |
| Shift + Tab | Перемещение назад по опциям |
Комбинации клавиш для работы в браузерах (Internet Explorer, Google Chrome, Mozilla Firefox)
| Сочетание клавиш | Описание |
|---|---|
| F4 | Отображение списка поля «Адрес» |
| Ctrl + N F5 | Запуск еще одного экземпляра обозревателя с аналогичным веб-адресом |
| Ctrl + R | Обновление текущей веб-страницы |
| Ctrl + B | Открывает диалоговое окно «Упорядочить избранное» |
| Ctrl + E | Открывает панель «Поиск» |
| Ctrl + F | Запуск служебной программы поиска |
| Ctrl + I | Открывает панель «Избранное» |
| Ctrl + L | Открывает диалоговое окно «Открыть» |
| Ctrl + O | Открывает диалоговое окно «Открыть», подобно действию CtrL+L |
| Ctrl + P | Открывает диалоговое окно «Печать» |
| Ctrl + W | Закрытие текущего окна |
| F11 | Переход в полноэкранный режим и обратно (работает и в некоторых других приложениях). |
Специальные возможности
- Нажмите клавишу SHIFT пять раз: включение и отключение залипания клавиш
- Удерживайте нажатой правую клавишу SHIFT восемь секунд: включение и отключение фильтрации ввода
- Удерживайте нажатой клавишу Num Lock пять секунд: включение и отключение озвучивания переключения
- Alt слева + Shift слева + Num Lock: включение и отключение управления указателем с клавиатуры
- Alt слева + Shift слева + PRINT SCREEN: включение и отключение высокой контрастности