Edit as html что это

Chrome DevTools — Основы современной вёрстки

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

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

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

В этом уроке мы изучим основные моменты при работе в Chrome DevTools, который встроен в браузер Google Chrome. Принципы, которые будут показаны, также применимы и к инспекторам в других браузерах. Они все похожи, поэтому проблем при переходе из браузера в браузер возникнуть не должно.

Чтобы открыть Chrome DevTools, можно воспользоваться одним из двух путей:

После открытия вы изначально попадёте во вкладку Elements. Это самая важная вкладка для новичков. Остальные вкладки также несут огромное количество полезной информации, но в настоящее время они вам скорее помешают, так как достаточно специфичны. Но давайте вкратце опишем назначение каждой из основных вкладок:

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

Вкладка Elements

Вернёмся к вкладке Elements. Условно она делится на две большие группы — работа с HTML и работа с CSS. Область работы с HTML представлена следующим образом:

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

На картинке выше эта вложенность следующая:

html body.min-vh-100 div.mb-n5 div.row.no-gutters div.col-sm.overflow-hidden div.my-4

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

Откройте контекстное меню (правый клик мыши) на любом элементе HTML в веб-инспекторе. Вы увидите все возможные действия с конкретным HTML-элементом.

Давайте взглянем на основные пункты:

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

Вторая область во вкладке Elements относится к CSS.

Это достаточно большая область с различными вкладками. Нас интересуют первые две вкладки:

Вкладка Styles

Вначале рассмотрим основы работы со вкладкой Styles. Внешне она выглядит следующим образом:

И эту часть можно разбить на несколько. Звучит, конечно, уже сложно, но на самом деле всё достаточно интуитивно понятно. В верхней области вы видите стили, которые непосредственно применяются к текущему элементу. В нашем случае это следующие свойства:

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

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

Вкладка Computed

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

И она делится на несколько основных областей. Это в последний раз, честно 🙂

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

Если посмотреть на пример, указанный в этом уроке, то можно увидеть, что у элемента сейчас присутствуют высота и ширина, а также свойство margin по 24 пикселя сверху и снизу.

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

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

Самостоятельная работа

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

Дополнительные материалы

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Источник

знатоки английского языка, нужны ваша помощь

переведите пожалуйста нижеприведенный текст «человечным» языком, а не как гугл переводчик.
First of all u need google chrome to do that

now go to a platoon that are a member and press right click
on «Leave Platoon» and inspect element,now copy as HTML the highlighted code

Then make a notepad file and paste it in(or wherever u want)

WARNING——go to the disabled platoon and copy it’s id and replace the other id on notepad———

now go to the disabled platoon you want to leave and press right click on an empty space on upper left(or wherever u want)and inspect element—now on the upper right it’s says «search element».

and when u find it press Edit as HTML and delete the first line of it
now what u do is paste the code of the disabled platoon,example:

and press anywhere to accept the change—-after that a «leave platoon»
button will appear on the upper left(for me it was upper left)press it and BOOM!

(it was really easy for me,i’m suprised no one else found it earlier)

Прежде всего, для этого тебе нужен Google Chrome
Теперь перейди к взводу, который является участником, и щелкни правой кнопкой мыши
на кнопке Leave Platoon (Оставьте Взвод) и осмотри элемент, теперь скопируй выделенный код в формате HTML

Затем сделай файл при помощи программы Блокнот (текстовый файл без дополнительных данных, как это обычно делает ворд) и вставь его в этот файл (или куда хочешь)

и, когда найдешь его, нажми Edit, as HTML (редактировать как HTML) и удали его первую строку сейчас надо вот что сделать: вставь код деактивированного взвода, например:

Ты свободен теперь!

(это был действительно легко для меня, я удивлен, никто не нашел этот способ раньше)

(Приписка от меня: с тебя триста рублей за перевод)

Источник

Examine and edit HTML

You can examine and edit the page’s HTML in the HTML pane.

Navigating the HTML

HTML breadcrumbs

At the bottom on the HTML pane is a breadcrumbs toolbar. This shows the complete hierarchy through the document for the branch containing the selected element:

Hovering over a breadcrumb highlights that element in the page.

The breadcrumbs bar has its own keyboard shortcuts.

Searching

The Page Inspector’s search box matches all markup in the current document and in any frames.

Full text search

The full text search will always be executed, independently of what you enter. That allows you to find CSS selectors and XPath expressions occurring within the text.

CSS selector search

You can search elements by entering a CSS selector.

As you type, an autocomplete popup shows any class or ID attributes that match the current search term:

Press Up and Down to cycle through suggestions, Tab to choose the current suggestion, then Enter to select the first node with that attribute.

XPath search

It is also possible to search via XPaths. This allows you to search for specific elements without the conflict of matching words within the text. For example, //a matches all elements but not the letter «a» within the text content. Furthermore it allows for some more advanced searches like finding elements that start with a specific text, for example.

HTML tree

The rest of the pane shows you the page’s HTML as a tree (this UI is also called the Markup View). Just to the left of each node is an arrow: click the arrow to expand the node. If you hold the Alt key while clicking the arrow, it expands the node and all the nodes underneath it.

Moving the mouse over a node in the tree highlights that element in the page.

Nodes that are not visible are shown faded/desaturated. This can happen for different reasons such as using display: none or that the element doesn’t have any dimensions.

There is an ellipsis shown between the opening and closing tag of an element when the node is collapsed if it has larger contents. Now children are indicated in the tree with this icon:

Markers («badges») are displayed to the right of some nodes. The table below explains the meaning of each badge:

event	The element has one or several event listeners attached to it. Clicking the marker opens a tooltip listing the event listeners and allows you for each listener to switch to the line of JavaScript code in the Debugger where the listener is defined.
scroll	The element is a scroll container, i.e. it has either overflow: scroll applied, or overflow: auto and sufficient content to cause scrollable overflow.
grid	The element is a grid container, i.e. it has display: grid applied to it. Clicking the marker enables the grid highlighter.
flex	The element is a flex container, i.e. it has display: flex applied to it. Clicking the marker enables the flexbox highlighter.
inline-grid	The element is an inline grid container, i.e. it has display: inline-grid or display: inline grid applied to it. Clicking the marker enables the grid highlighter.
inline-flex	The element is an inline flex container, i.e. it has display: inline-flex or display: inline flex applied to it. Clicking the marker enables the flexbox highlighter.
custom…	The element is a custom element. Clicking the marker switches to the line of JavaScript code in the Debugger where the custom element got defined.

Note: There are some useful keyboard shortcuts that can be used in the HTML tree — see the HTML pane keyboard shortcuts list.

::before and ::after

You can inspect pseudo-elements added using ::before and ::after :

Custom element definition

When you open the Inspector on a page that includes custom elements, you can view the class definition for the custom element in the Debugger:

The source for the element’s class will be displayed in the Debugger.

Whitespace-only text nodes

Web developers don’t write all their code in just one line of text. They use white space such as spaces, returns, or tabs between their HTML elements because it makes markup more readable.

Usually this white space seems to have no effect and no visual output, but in fact, when a browser parses HTML it will automatically generate anonymous text nodes for elements not contained in a node. This includes white space (which is after all a type of text).

If these auto generated text nodes are inline level, browsers will give them a non-zero width and height. Then you will find strange gaps between elements, even if you haven’t set any margin or padding on them.

Since Firefox 52, the Inspector displays these whitespace nodes, so you can see where the gaps in your markup come from. Whitespace nodes are represented with a dot: and you get an explanatory tooltip when you hover over them:

Shadow roots

Any shadow roots present in the DOM are exposed in the HTML page in the same manner as the regular DOM. The shadow root is signified by a node named #shadow-root — you can click its expansion arrow to see the full contents of the shadow DOM, and then manipulate the contained nodes in a similar way to other part of the page’s DOM (although with a limited featureset — you can’t, for example, drag and drop or delete shadow DOM nodes).

If a shadow DOM contains a «slotted» element (an element with a slot attribute after it has been inserted inside a element — see Adding flexibility with slots for an explanation of how these are used), the «slotted» element will be shown inside its corresponding element, with a «reveal» link alongside it. Clicking the «reveal» link will highlight the element with the slot attribute as it exists outside the shadow DOM

This is very useful when you’ve got a element and you can’t find the source of its content.

Note: Shadow DOM inspection was implemented in Firefox 61, but was hidden behind the dom.webcomponents.shadowdom.enabled pref until Firefox 63. It is now turned on by default.

Element popup context menu

You can perform certain common tasks on a specific node using a popup context menu. To activate this menu, context-click the element. The menu contains the following items — click on the links to find the description of each command in the Context menu reference:

* These options only appear in certain contexts, for example the «Open File in Style-Editor» option only appears when you context-click over the top of a link to a CSS file.

Context menu reference

Copy the outer HTML for the element.

Pressing Ctrl + C (or Cmd + C on a Mac) also performs this action.

(Copy) Unique Selector/CSS SelectorCopy a CSS selector that uniquely selects the element.(Copy) CSS PathCopy a CSS selector that represents the full path to the element.(Copy) Image Data-URLCopy image as a data:// URL, if the selected element is an image.(Copy) AttributeCopy the attribute of the element.Show DOM PropertiesOpen the split console and enter the console command » inspect($0) » to inspect the currently selected element.Use in ConsoleAssigns the currently selected node to a variable named temp0 (or temp1 if temp0 is already taken, and so on), then opens the split console, enabling you to interact with that node using the console’s command line.Expand AllIn the tree view, expand the current element and all the elements underneath it. This is equivalent to holding the Alt key and clicking the disclosure triangle next to an element.CollapseIn the tree view, collapse the current element. This is equivalent to clicking the disclosure arrow next to an element that’s expanded.(Paste) Inner HTMLPaste the clipboard contents into the node as its innerHTML.(Paste) Outer HTMLPaste the clipboard contents into the node as its outerHTML.(Paste) BeforePaste the clipboard contents into the document immediately before this node.(Paste) AfterPaste the clipboard contents into the document immediately after this node.(Paste) As First ChildPaste the clipboard contents into the document as the first child of this node.(Paste) As Last ChildPaste the clipboard contents into the document as the last child of this node.Scroll Into View

Scrolls the web page so the selected node is visible.

From Firefox 44, pressing the keyboard shortcut S will also scroll the selected node into view.

Screenshot NodeTakes a screenshot of the selected node, saved to your Downloads directory. See Taking screenshots.Create New NodeCreate a new empty

as the last child of the currently selected element. See Inserting new nodes.Duplicate NodeCreate a copy of this element, and insert the copy immediately after this element.Delete NodeDelete the element from the DOM.Attribute/Add AttributeAdd an attribute to the element.Attribute/Edit Attribute(only when invoked on an attribute) Edit the attribute.Attribute/Remove Attribute(only when invoked on an attribute) Remove the attribute.Open Link in New Tab(only when invoked over a link, such as an href attribute) Opens the linked item in a new tab.Open File in Debugger(only when invoked over a link to a JS source) Opens the linked source in the Debugger.Open File in Style-Editor(only when invoked over a link to a CSS source) Opens the linked source in the Style Editor.Copy Link Address(only when invoked over a URL) Copy the URL.(Change Pseudo-class) hoverSet the :hover CSS pseudo-class.(Change Pseudo-class) activeSet the :active CSS pseudo-class.(Change Pseudo-class) focusSet the :focus CSS pseudo-class.(Change Pseudo-class) focus-visibleSet the :focus-visible CSS pseudo-class.(Change Pseudo-class) focus-withinSet the :focus-within CSS pseudo-class.(Change Pseudo-class) visitedSet the :visited CSS pseudo-class.

Editing HTML

You can edit the HTML — tags, attributes, and content — directly in the HTML pane: double-click the text you want to edit, change it, and press Enter to see the changes reflected immediately.

You can add any HTML in here: changing the element’s tag, changing existing elements, or adding new ones. Once you click outside the box, the changes are applied to the page.

When you’re editing HTML, the context menu you’ll see is the normal one for working with editable text:

Copy and paste

You can use the popup menu to copy nodes in the HTML tree and paste them into the desired location.

Drag and drop

You can reorganize the HTML content of a page by moving nodes in the HTML tree. Just click and hold on any element and drag it up or down in the tree. When you release the mouse button, the element will be inserted at the corresponding position:

You can cancel the drag and drop by pressing the Esc key.

Inserting new nodes

There’s a «+» icon at the top of the markup view:

Click this icon to insert an empty

You can access the same functionality using the «Create New Node» popup menu item.

Note that this button is disabled if the selected element’s type is such that adding a last-child would have no effect (for example, if it is an or element). However, it is enabled in places where it is not valid to insert a

Источник

Online HTML Editor

The best real-time online HTML editor software kit with dynamic instant live visual preview and inline WYSIWYG editor and markup clean-up feature. Includes a HTML viewer, editor, compressor, beautifier and easy formatter. It’s impossible to create invalid code with this tool.

How To Use The HTML Editor?

Before you start composing the content for a live website I advise you to experiment with the features populating the work area with a demo text clicking the Quick Tour menu item.

The visual editor works like a regular text composer program, just use the commands above the text area to adjust the content and in the meantime you’ll notice the source editor changing with it. If you’re familiar with HTML code composing then you can adjust the code on the right.

Being a free demonstration for the pro version, this tool has its limitations and it adds unwanted links to the edited documents. You can remove these manually before publishing the article.

What Can You Do With This Online WYSIWYG Editor

The control panel above the HTML source editor lists the most important commands:

Other important editing features

You can try these HTML editor features to practice and to maximize your coding efficiency.

Never forget:

Div Table Styling

Make sure you apply the CSS code below when you publish tables converted to div elements. Try the interactive online table styler which can generate grids from both div and table elements. These are both supported by this editor.

Please note that the class names used by us are slightly different than the ones used by DivTable.com.

Click and copy the code from the field below:

You can use this website absolutely free but by using this tool you accept to link to this website or our partner sites. If you don’t want this, please subscribe for a pro HTMLG license and you get even more HTML editing features.

Please send us an email to if you have any suggestion or you just want to say hello.

Источник