Web前端知识点查漏补缺（更新中）

Web前端知识点查漏补缺（更新中）

1. Entity references: Including special characters in HTML

In HTML, the characters <, >,",’ and & are special characters. They are parts of the HTML syntax itself, so how do you include one of these characters in your text, for example if you really want to use an ampersand or less-than sign, and not have it interpreted as code as some browsers may do?

We have to use character references — special codes that represent characters, and can be used in these exact circumstances. Each character reference is started with an ampersand &, and ended by a semicolon ;.

Literal character	Character reference equivalent
<	< ;
>	> ;
"	" ;
’	&apos ;
&	& ;

The character reference equivalent could be easily remembered because the words it uses can be seen as less than for ‘<’ , quotation for ’ " ’ and similarly for each. Do checkout the link to the wikipedia page to find more about entity reference. In the below example, you can see two paragraphs, which are talking about web technologies:

In HTML, you define a paragraph using the 
 element.

In HTML, you define a paragraph using the

element.

In HTML, you define a paragraph using the <p> element.

In HTML, you define a paragraph using the

element.

In the live output below, you can see that the first paragraph has gone wrong, because the browser thinks that the second instance of

is starting a new paragraph. The second paragraph looks fine, because we have replaced the angle brackets with character references.

2. HTML comments

To turn a section of content inside HTML file into a comment, we need to wrap it in the special markers < !-- and -->

3. Document fragments: link to a specific part of an HTML document

Mailing address

link to the specific part of different document:

Want to write us a letter? Use our mailing address.

link to another part of the same document:

The company mailing address can be found at the bottom of this page.

4. Download link & email link

  Download Latest Firefox for Windows (64-bit) (English, US)

Download Latest Firefox for Windows (64-bit) (English, US)

Send email to nowhere

Send email to nowhere

5. Description lists

TITLE	TAG
description list
description term
description definition

6. Quotations

<blockquote>

Result:

Something still not clear.

7. Abbreviation element

We use HTML to structure our web documents.

We use HTML to structure our web documents.

8. Superscript ^{and subscript}

My birthday is on the 25th of May 2001.

Caffeine's chemical formula is C8H10N4O2.

If x2 is 9, x must equal 3 or -3.

My birthday is on the 25^th of May 2001.

Caffeine's chemical formula is C₈H₁₀N₄O₂.

If x² is 9, x must equal 3 or -3.

9. Special code output tags

var para = document.querySelector('p');

para.onclick = function() {
  alert('Owww, stop poking me!');
}

You shouldn't use presentational elements like <font> and <center>.

In the above JavaScript example, para represents a paragraph element.

Select all the text with Ctrl/Cmd + A.

$ ping mozilla.org
PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms

Result:

var para = document.querySelector('p');

para.onclick = function() {
  alert('Owww, stop poking me!');
}

You shouldn't use presentational elements like and

.

In the above JavaScript example, para represents a paragraph element.

Select all the text with Ctrl/Cmd + A.

$ ping mozilla.org
PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms

: For computer code.


 : For retaining whitespace as the same as computer code.
  : For specifically marking up variable names.
  : For marking up keyboard
  : For marking up the output of a computer program.
 
  
 
   
Adding an author and description in header
 
  
 
  


 
  
 
   
Images in HTML