HTML format complete guide: beautification, insatiable labels and entities

1. What does beautification and compression mean in HTML

Blank sensitivity: (a) Under most block layouts, the break between labels does not affect rendering; But... <pre>、<textarea>Part of the report display:inline scene, spaces in text nodes are part of the content. The logic of this station is to try to be as beautiful as possible. pre/code/script/style/textarea Reduced usage as preforming areas; The compression also protects the internals of the labels before leaving blanks.

Back and forth.

The following is a line of footage:

<div class="card"><h2>Title</h2><p>PositiveMan <strong>Emphasizing</strong></p><img src="/a.png" alt="示Meaning"></div>

After beautification (2 spaces):

<div class="card">
  <h2>
    Title
  </h2>
  <p>
    PositiveMan
    <strong>
      Emphasizing
    </strong>
  </p>
  <img src="/a.png" alt="示Meaning">
</div>

The hierarchy is clear:img As a void element, it is not available in the sky. </img>。 If a deep “silent” level is to be glorified, it is often the lower-integral labels.

2. Labels, entities and attributes: what really should be understood when miscalculated

Void Elements (no closed tags required)

Common void (empty elements) include:area base br col embed hr img input link meta param source track wbr。

• Written <br>、<br/> or <br /> It is common in the serialization of HTML.
• don't want Write </br> Or give it to me. img Add </img> When "more regular" -- that's the XHTML brain disability, modern HTML solvers don't depend on it.

This tool is beautiful by identifying the void list and avoiding an erroneous indentation level.

Optional Close and Browser Perception

For example: li、p、td The label can be omitted from the given context. Source code "run" does not mean that the structure is as you think: the browser will automatically fill the nodes, as DevTools saw in the DOM Could not be a byte of the source。 Other Organiser

1. Format first Source String(interface/file).
2. Whether or not to rewrite the page with the Elements panel.
3. Fix bugs with DOM and templates with source documents.

Entity

Common accidents: (a) Scramble user input as a current HTML untransferable XSS; Or a double-hatting. < Displays the volume of the text. Formatting Won't Automatically transacts with a security change, only sorting blanks and tabs. The shift to the rich text before its entry into the library is a business-level responsibility.

Properties Line Breaks & & Quotes

Tools provide "Replacement break": multiple properties can be used to indent each attribute in the next row and allow for review class、data-*Long srcset。 Properties may be standardized in the form of double quotation marks during a beautification process - confirmation before writing back does not conflict with the template engine quote rules (e.g., some engines are already double quotes).

script / style Inner association

Inline JS/CSS is safer to process in preform blocks when it's beautified, and avoids </script> String break. Depth format JS/CSS please use Script Tool and CSS Format。

3. Gradual description using KiloCell

tools page:HTML Format。

1. Open the page. Enter /tools/dev/html-formatter。 Toolbars can be found: Indent type (space/Tab), indent size (default 2), Properties Breaking, "Blank Rows " .
2. Paste HTML. The left side of the "Input HTML Code" You can also read "paint" from the clipboard (require browser privileges).
3. bar.

• Consistent with repository: Space + 2 or 4.
• Long Properties: Check out the Properties Break.
• A sense of paragraph needs to be maintained: "Reserve empty lines" (default tick).

1. Beautify。 The blog is a bit of a "Beautify Code" (Beauty). Success; Right output indentation. Enter the option to change the logic and ultimately confirm the output by clicking on the beautification/compression.
2. The government has been trying to find out whether the indentation is "not going back." If a section continues to be deeper than the surrounding area, look up for unclosed labels.
3. Minify。 One-key compression (Miniffy) removes the gap between comments and labels in the safe range and protects pre/script/style/textarea Internal; The statistical area displays the input/output characters and compression rate.
4. Copy。 The results are copied and the output is taken away.
5. Clear。 Clears the editing status of the input output and the local cache (if the page allows for the state protracted).

Capacity boundaries

• Support: beautification indents, void recognition, property line breaks, retention of blank line options, compression and character statistics, theme.
• Do not declare: Complete HTML5 verification, auto-recovering of all missing documents, by-the-syll, execution or purification of scripts (no DOM XSS protection package) with Prettier plugins.
• Local: Processing completed in browser; User privacy in mail, unpublished active page source code, still keep your desktop shared.

When a "pressure-only" fixed entrance is required, it is available. HTML Minify。 Generate HTML from Markdown Markdown Turn HTML or format after preview.

4. Common errors and treatments

Suggested order of reference

1. Is it a source or a CSS problem (but can hide the sylesheet comparison first).
2. Formats the source code to see if the label is closed.
3. Compare DevTools Dom.
4. Check if the entity code and script changes innerHTML.

5. Real work landscape

Scenario A: Activity page "Flows the right column to the bottom"

The product screenshot shows the layout crashing. Get the template HTML beautification, find one section Keep it closed. Back there. aside Eat into the main column. Adding a label does not require doubting Grid's error.

scene B: Mail HTML pre-delivery check

Mail HTML is often pressed by the generator into a row. Check for misuse after beautification <script>, too big base64, unreconciled user nicknames. Compress back the delivery version. Note that the mail CSS supports the alternative.

C:CMS "View-edited" source code

Multiple saves make no sense span and  。 Delete empty span, put   Replaces the style spacing. Press again to see volume before submitting.

scene D: Markdown transferred HTML to the site shell

Use Markdown Turn HTML or the previewer copys HTML, and you insert the indentation of the tool and then embed the layout component. If the source is MD, the MD should be maintained for the long term, not just the generator.

Scene E: Security Audit Checks "Is the user plugged in the attribute?"

Search after beautification onclick=, properties without quotation marks,javascript:。 Formatting increases the speed of audits and does not replace professional scanning.

F: Making a "class" with CSS

List of Class after HTML beautification, CSS side CSS Format # Search after. Spelling btn-primary vs btn_primary It's a high frequency problem.

7. How to select the relevant tools

Selection tips:See structure formatted with HTML; Only for the minifirer; The content is transferred from MD to HTML; Style questions with CSS tools.

FAQ

Continue reading

Paste a little part of it img、div Embedded source code, pitiful "replacement line" and deliberately delete one. </div> See the indentation changes. Move to Markdown tool when MD workflow is required.