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 characterCharacter 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.

  1. 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> -->
  1. 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>
  1. 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:nowhere@mozilla.org">Send email to nowhere</a>

Send email to nowhere

  1. Description lists
TITLETAG
description list<dl>
description term<dt>
description definition<dd>
<dl>
  <dt></dt>
  <dd></dd>
  <dt></dt>
  <dd></dd>
</dl>
  1. Quotations
<code>&lt;blockquote&gt;</code>

Result:
<blockquote>

Something still not clear.

  1. 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.

  1. 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 25th of May 2001.

Caffeine's chemical formula is C8H10N4O2.

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

  1. 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.

  1. 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.">
  1. 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">
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值