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
<	&lt ;
>	&gt ;
"	&quot ;
’	&apos ;
&	&amp ;

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:

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

In HTML, you define a paragraph using the

element.

<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p>

In HTML, you define a paragraph using the <p> 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 -->

<!-- <p>I am!</p> -->

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

<h2 id="Mailing_address">Mailing address</h2>

link to the specific part of different document:

<p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p>

link to another part of the same document:

<p>The <a href="#Mailing_address">company mailing address</a> can be found at the bottom of this page.</p>

4. Download link & email link

<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
  download="firefox-latest-64bit-installer.exe">
  Download Latest Firefox for Windows (64-bit) (English, US)
</a>

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

<a href="mailto:[email protected]">Send email to nowhere</a>

Send email to nowhere

5. Description lists

TITLE	TAG
description list	<dl>
description term	<dt>
description definition	<dd>

<dl>
  <dt></dt>
  <dd></dd>
  <dt></dt>
  <dd></dd>
</dl>

6. Quotations

<code>&lt;blockquote&gt;</code>

Result:
<blockquote>

Something still not clear.

7. Abbreviation element <abbr>

<p>We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our web documents.</p>

We use HTML to structure our web documents.

8. Superscript <sup> and subscript <sub>

<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>

<p>Caffeine's chemical formula is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>

<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>

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

<pre><code>var para = document.querySelector('p');

para.onclick = function() {
  alert('Owww, stop poking me!');
}</code></pre>

<p>You shouldn't use presentational elements like <code>&lt;font&gt;</code> and <code>&lt;center&gt;</code>.</p>

<p>In the above JavaScript example, <var>para</var> represents a paragraph element.</p>

<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>

<pre>$ <kbd>ping mozilla.org</kbd>
<samp>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</samp></pre>

Result:

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

<code> : For computer code.
<pre> : For retaining whitespace as the same as computer code.
<var> : For specifically marking up variable names.
<kbd> : For marking up keyboard
<samp> : For marking up the output of a computer program.

10. Adding an author and description in header

<meta name="author" content="Chris Mills">
<meta name="description" content="The MDN Web Docs Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications.">

11. Images in HTML

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
     width="400"
     height="341"
     title="A T-Rex on display in the Manchester University Museum">