[mozilla]web-developer-basics.md

html元素应该从语义方向去考虑使用，而不是样式方向。 比如em、strong其实是为了强调，而不是为了斜体、粗体而添加。

另外，还要考虑非视觉的效果，比如screen reader、SEO等，所以还是尽量使用HTML的各种标记的特征，如h1、p、nav等，不要想当然的用div+CSS就能搞定一切，虽然视觉上看来是没有区别的。

link

原则

• 不要使用诸如点击这里或link这样的短语来代表链接，也不要直接显示链接地址（一般url都很难看），使用有意义的简洁的短语，因为你要提供给搜索引擎、视觉用户、听觉用户。
• 根据你的目标用户选择是使用鼠标悬浮的title还是额外的静态文本来展示链接的信息。
• 尽量使用相对路径，因为绝对路径会太长，更重要是会额外增加DNS解析等过程。

下载

<p><a href="http://www.example.com/large-report.pdf">
  Download the sales report (PDF, 10MB)
</a></p>

<p><a href="http://www.example.com/video-stream/">
  Watch the video (stream opens in separate tab, HD quality)
</a></p>

<p><a href="http://www.example.com/car-game">
  Play the car game (requires Flash)
</a></p>

邮件

<a href="mailto:test@example.com?cc=test1@example.com&bcc=test2@example.com&amp;subject=测试&body=测试内容">mail to test</a>

点击后开启写邮件面板（并写入预置信息）

advanced text formatting

Description lists

<dl>
    <dt>description 1</dt>
    <dd>description details</dd>
    <dt>description 1</dt>
    <dd>description details</dd>
</dl>

description term

description detail

description term

description detail

quotations

• <blockquote>

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>

The HTML <blockquote> Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation.

• inline quote: <q>

<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended for short quotations that don't require paragraph breaks.</q></p>

The quote element — <q> — is intended for short quotations that don't require paragraph breaks.

Abbreviations

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

We use HTML to structure our web documents.

Making up contact detail: <address>

<address>
  <p>Page written by <a href="https://github.com/NoName4Me">Jonge</a>.</p>
</address>

Page written by Jonge.

<sup> and <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.

<time>

<time datetime="2016-01-20">20 January 2016</time>

20 January 2016

<iframe>、<embed>、<object>

为提高网页加载速度，src属性最好在网页加载完毕后使用JS设置。

CSP（content security policy），提供一套可以提高HTML文档安全性的HTTP头（随着网页一起从服务器返回）。比如为了保护<iframe>，你可以配置服务器发送合适的X-Frame-Options头，这样就可以防止其他网站将你的网页内容嵌入它们的网页。

下面的内容Chrome中无法显示（FireFox中会报错），因为Mozilla服务器设置了不允许被嵌入<iframe>中。

<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
        width="100%" height="500" frameborder="0"
        allowfullscreen sandbox>
  <p> <a href="https://developer.mozilla.org/en-US/docs/Glossary">
    Fallback link for browsers that don't support iframes
  </a> </p>
</iframe>

embed、object一般不会用到。

SVG

<svg width="100%" height="100%">
  <rect width="100%" height="100%" fill="cyan" />
  <circle cx="50%" cy="90%" r="40" fill="red" stroke="orange" stroke-width="20" />
  <polygon points="80,100 180,225 0,225" fill="#99ddaa"/>
  <polygon points="180,20 300,225 80,225" fill="green"/>
  <text x="0" y="20" font-family="Verdana" font-size="24"
        fill="white" stroke="black" stroke-width="1">
    sunrise
  </text>
</svg>

responsive <img>

<img>

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

这两个属性都是HTML5引入的。

• srcset
  xxx.jpg 320w: 图片资源 图片真实宽度
xxx.jpg 2x: 图片资源 像素密度

• sizes
  (max-width: 320px) 280px: 媒体查询 设置宽度
  设置宽度可以是百分比、em、px、rem等。

首先媒体查询屏幕宽度，设置显示图片的容器宽度，然后查询资源集，加载宽度最接近的图片资源。

注意：<head>中的<meta name="viewport" content="width=device-width">是为了：强制移动端浏览器使用它们真实的窗口宽度来加载网页（一些移动浏览器伪造它们的窗口宽度，从而加载较大窗口宽度的网页然后缩放显示，这个对响应式图片或设计来说是无用的）。

<picure>

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

自适应屏幕宽度的图片

.img-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 以宽度来计算 */
    height: 0;
    img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
 }