HTML Optimization Methods

I recently read some HTML books and summarized some HTML optimization methods.
I. First, I would like to explain why we need to optimize HTML?
The increase in the number of bytes on the webpage may result in a decrease in the webpage display speed. Usually some web page creation software will be added

Some redundant htmlCode. In this regard, the most "prominent" number is word. You can try it.

Save the words as a web page and viewSource code.
Ii. introduce some basic optimization methods:
1. delete some content that can be left blank
Redundant spaces, tabs, blank lines, double quotation marks, single quotation marks, and comments.
Example:
Original:

< Table >
  < Tr >
< TD > A </ TD >
  </ Tr >
  < Tr >
< TD > B </ TD >
  </ Tr >
  < Tr >
< TD > C </ TD >
  </ Tr >
</ Table >

Optimized (mainly Remove extra spaces caused by indentation)
<Table>
<Tr>
<TD> A </TD>
</Tr>

<Tr>
<TD> B </TD>
</Tr>

<Tr>
<TD> C </TD>
</Tr>
</Table>
Other details are not described in detail due to space limitations.
2. delete an empty statement from the webpage code
For example

< Span Style = 'Font-family: '>
Hello <SPAN lang = En-US> <O: P> </span>
</Span >

Obviously, the statements behind "hello" have no effect. We can delete them.
3. delete default HTML attributes
HTML has many default attributes, such as alignment, Font, color ......, But the web page creation software will

Add useless code.
For example, the align attribute is left aligned by default, so we do not need to write "align = left" when the Left Align attribute is left aligned ".
(Other cases are not described in detail)
4. Optimization <option>
We all know that in HTML, <SELECT> <option> ?? </Option> </SELECT> used to generate

ListBox, but the practice tells us that the terminator </option> can be omitted.
In addition, if some statements such as <option value = x> x </option> (Value and statement content)

Value can be omitted.
Example:

< Select Name = Province>
<Option value = Beijing> Beijing </option>
<Option value = Tianjin> Tianjin </option>
<Option value = Hebei> Hebei </option>
<Option value = Shanxi> Shanxi </option>
<Option value = Henan> Henan </option>
</Select >

Optimized:

< Select Name = Provice>
<Option > Beijing
< Option > Tianjin
< Option > Hebei
< Option > Shanxi
< Option > Henan
</ Select >

Obviously, if there is a large amount of ListBox content, the optimization effect is very obvious, and the amount of code can be reduced.

Less than 50%.
However, this method is not applicable if the value is different from the content.
5. replace a group of <font> statements with a <basefont> statement
The web page creation software adds <font> statements in each Chinese section to prevent garbled characters.
For example:

< P > < Font Face = _ Gb2312 Size = 5 Color = Blue> sky, </font>
<P > < Font Face = _ Gb2312 Size = 5 Color = Blue> wild, </font>
<P > < Font Face = _ Gb2312 Size = 5 Color = Blue> the wind blows grass down to see cattle and sheep. </Font>

To optimize these statements, you can use <basefont>.

< Basefont Face = _ Gb2312 Size = 5 Color = Blue>
<P > Vast Sky,
< P > Wild,
< P > The wind blows grass down to see cattle and sheep.

The optimization result is also obvious.
6. Use a <ul> simplified <li>
<Li> Generate a list of projects with the type attribute. You can add the modifier before each project.

.
For example:
 

< Li Type = Square>
<Li type = Circle>
<Li type = Disc>

The following describes how to use <ul> simplified <li>
Here is an example:
 

< Li Type = Circle>
  <Li type = Circle> B
  <Li type = Circle> C
  <Li type = Circle> d
  <Li type = Circle> E
  <Li type = Circle> F
  <Li type = Circle> G
  <Li type = Circle> H

Simplify with <ul>
 

< Ul Type = Circle>
  <Li > A
  < Li > B
  < Li > C
  < Li > D
  < Li > E
  < Li > F
  < Li > G
  < Li > H
  </ Ul >