1.代理delegate

一、嵌入的简介

<iframe>: 用于嵌入其他网页；

<embed>和<object>允许嵌入PDF、SVG、Flash

发展：框架集、小模块–>嵌入Flash等（<embed>和<object>） –><iframe>嵌入（<canvas>和<video>）

二、嵌入类型的使用

1
2

<iframe width="420" height="315" src="https://www.baidu.com" frameborder="0" allowfullscreen>
</iframe>

1.<iframe>基本要素：

1.allowfullscreen:如果设置，则可以使用全屏API放置在全屏模式

2.frameborder:如果设置为1，则会告诉浏览器在此框架和其他框架之间绘制边框，这是默认行为。0删除边框。不推荐这样设置，因为在CSS中可以更好地实现相同的效果。border: none;

3.src：该属性与<video>/<img>一样包含指向要嵌入的文档的URL的路径。

4.width和height：这些属性指定您想要的iframe的宽度和高度。


5.备选内容：与<video>等其他类似元素相同，您可以在打开和关闭<iframe></iframe>标签之间包含备选内容，如果浏览器不支持，将会显示<iframe>。在这种情况下，我们已经添加了一个链接到页面。您几乎不可能遇到任何不支持<iframe>的浏览器。

6.sandbox：该属性比其他<iframe>功能（例如IE 10及更高版本）稍微更现代的浏览器工作，要求提高安全性设置;

tips：为了提高速度，在主内容完成加载后，使用JavaScript设置iframe的src属性是个好主意。这使您的页面可以更快地使用，并减少您的官方页面加载时间（重要的SEO指标）。

2.安全隐患

单击劫持是一种常见的iframe攻击，黑客将隐藏的iframe嵌入到您的文档中（或将您的文档嵌入自己的恶意网站），并使用它来捕获用户的交互。这是误导用户或窃取敏感数据的常见方式。

a.只有在必要时嵌入

b.使用https：HTTPS减少了远程内容在传输过程中被篡改的机会；HTTPS防止嵌入式内容访问您的父文档中的内容，反之亦然。

c.始终使用sandbox属性：一个代码可以适当使用或用于测试的容器，但不能对其他代码库（意外或恶意）造成任何损害称为沙箱；
未沙盒化(Unsandboxed)内容可以做得太多（执行JavaScript，提交表单，弹出窗口等）默认情况下，您应该使用没有参数的sandbox属性来强制执行所有可用的限制。
永远不应该同时添加allow-scripts和allow-same-origin到你的sandbox属性中-在这种情况下，嵌入的内容可以绕过，从执行脚本停止网站同源安全策略，并使用JavaScript来关闭完全沙箱。

d.配置CSP指令：CSP代表内容安全策略，它提供一组HTTP标头（由web服务器发送时与元数据一起发送的元数据），旨在提高HTML文档的安全性。在<iframe>s安全性方面，您可以将服务器配置为发送适当的X-Frame-Options  标题。
这样做可以防止其他网站在其网页中嵌入您的内容（这将导致点击和一系列其他攻击），正如我们之前看到的那样，MDN开发人员已经做了这些工作

三、<embed>和<object>元素

这些元素是用来嵌入多种类型的外部内容的通用嵌入工具，其中包括像Java小程序和Flash，PDF（可在浏览器中显示为一个PDF插件）这样的插件技术，甚至像视频，SVG和图像的内容！

tips：插件是一种对浏览器原生无法读取的内容提供访问权限的软件。

它们在一些圈子中仍然受欢迎，我们最好是用链接指向它们，而不是将其嵌入到网页中，以便它们可以在单独的页面上被下载或被阅读。

<canvas>用于JavaScript生成的2D和3D图形；

<svg>用于嵌入矢量图形；

四、网页中添加矢量图形

1.矢量图形概念

位图使用像素网格来定义 — 一个位图文件精确得包含了每个像素的位置和它的色彩信息。流行的位图格式包括 Bitmap (.bmp), PNG (.png), JPEG (.jpg), and GIF (.gif.)

矢量图使用算法来定义 — 一个矢量图文件包含了图形和路径的定义，电脑可以根据这些定义计算出当它们在屏幕上渲染时应该呈现的样子。 SVG 格式可以让我们创造用于 Web 的精彩的矢量图形。

放大网页上的矢量图和位图：位图会出现马赛克的感觉（图形像素化了），矢量图不会变化（算法计算出来的形状）

矢量图形相较于同样的位图，通常拥有更小的体积，因为它们仅需储存少量的算法，而不是逐个储存每个像素的信息。

2.SVG的概念

SVG是用来描述矢量图像的XML语言.用于标记 图形而不是内容。

eg:创建一个圆和一个矩形

1
2
3
4
5
6
7

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="black" />
  <circle cx="150" cy="100" r="90" fill="blue" />
</svg>

<circle>和<rect>创建简单的图形
<feColorMatrix>使用变换矩阵变换颜色
<animate>矢量图形的动画部分
<mask> 图像顶部应用蒙版

矢量图像编辑器:inkscape或Illustrator

3.SVG优缺点：

优：
矢量图像中的文本仍然可以访问(有利于SEO)；
SVG可以很好的适应样式/脚本(因为图像的每个组件都是可以通过CSS或通过JavaScript编写的样式的元素);

缺：
SVG非常容易变得复杂，文件大小会增加，复杂的SVG会在浏览器中占用很长处理时间；
SVG可能比栅格图像更难创建，具体取决于你尝试创建哪种图像；
旧版浏览器不支持SVG；（IE9开始支持）

光栅图像更适合照片那样复杂精密的图像。

4.将SVG添加到网页的方法

4.1快捷方式<img>:

1
2
3
4
5

<img 
src="equilateral.svg" 
alt="triangle with all three sides equal"
height="87px"
width="100px" />

优点

快速，熟悉的图像语法与alt属性中提供的内置文本等效。
可以通过在<a>元素嵌套<img>，使图像轻松地成为超链接。

缺点

无法使用JavaScript操作图像。
如果要使用CSS控制SVG内容，则必须在SVG代码中包含内联CSS样式。 （从SVG文件调用的外部样式表不起作用）
不能用CSS伪类来重设图像样式（如:focus）。

4.2疑难解答和跨浏览器支持

对于不支持SVG的浏览器(IE8及以下，Android 2.3及以下)，可以从src属性引用PNG或JPG，并使用srcset属性来引用SVG，在此情况下，仅支持浏览器将加载SVG-较旧的浏览器将加载PNG：

1

<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">

还可以使用SVG作为CSS背景图像,旧版浏览器会理解PNG，较新的浏览器将加载SVG：

1
2
3

background: url("fallback.png") no-repeat center;
background-image: url("image.svg");
background-size: contain;

缺：

像上面描述的<img>方法一样，使用 CSS 背景图像插入SVG 意味着它不能被 JavaScript 操作，并且也受到相同的 CSS 限制。
如果 SVG 根本没有显示，可能是因为你的服务器设置不正确。 如果是这个问题，这篇文章将告诉你正确方向。

4.3在HTML引入SVG代码

在文本编辑器中打开SVG文件，复制SVG代码，粘贴到HTML文档中 - SVG内联或内联SVG

1
2
3

<svg width="300" height="200">
    <rect width="100%" height="100%" fill="green" />
</svg>

1
2
3
4
5
6
7
8
9

<svg width="100%" height="100%">
    <rect width="100%" height="100%" fill="red" />
    <circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" />
    <polygon points="120,0 240,225 0,225" fill="green"/>
    <text x="50" y="100" font-family="Verdana" font-size="55"
          fill="white" stroke="black" stroke-width="2">
      Hello!
    </text>
  </svg>

优点:

将 SVG 内联减少 HTTP 请求，可以减少加载时间。
您可以为 SVG 元素分配class和id，并使用 CSS 修改样式，无论是在SVG中，还是 HTML 文档中的 CSS 样式规则。 实际上，您可以使用任何 SVG外观属性 作为CSS属性。
内联SVG是唯一可以让您在SVG图像上使用CSS交互（如:focus）和CSS动画的方法（即使在常规样式表中）。
您可以通过将 SVG 标记包在<a>元素中，使其成为超链接。

缺点

这种方法只适用于在一个地方使用的SVG。多次使用会导致资源密集型维护（resource-intensive maintenance）。
额外的 SVG 代码会增加HTML文件的大小。
浏览器不能像缓存普通图片一样缓存内联SVG。
您可能会在<foreignObject> 元素中包含回退，但支持 SVG 的浏览器仍然会下载任何后备图像。你需要考虑仅仅为支持过时的浏览器，而增加额外开销是否真的值得。

4.4使用<ifrmae>嵌入SVG - 这不是最好的方法

1
2
3

<iframe src="triangle.svg" width="500" height="500" sandbox>
    <img src="triangle.png" alt="Triangle with three unequal sides" />
</iframe>

缺点:

如你所知， iframe有一个回退机制，如果浏览器不支持iframe，则只会显示回退。
此外，除非 SVG 和您当前的网页具有相同的 origin，否则你不能在主页面上使用 JavaScript 来操纵 SVG。

五、响应式图片

CSS是比HTML更好的响应式设计工具

0.为什么要用自适应图片

艺术方向问题
分辨率切换问题

最近应用的响应式图像技术，通过让浏览器提供多个图像文件来解决上述问题，比如使用相同显示效果的图片但包含多个不同的分辨率（分辨率切换），或者使用不同的图片以适应不同的空间分配（艺术方向）。

创建自适应图片

1.分辨率切换：不同尺寸

标准的元素传统上仅仅让你给浏览器指定唯一的资源文件：

<img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

可以使用两个新的属性——srcset 和 sizes——来提供更多额外的资源图像和提示，帮助浏览器选择正确的一个资源：

<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">

srcset定义了我们允许浏览器选择的图像集，以及每个图像的大小。在每个逗号之前，我们写：

一个文件名 (elva-fairy-480w.jpg.)
一个空格
图像的固有宽度（以像素为单位）（480w）——注意到这里使用w单位，而不是你预计的px。这是图像的真实大小，可以通过检查你电脑上的图片文件找到（例如，在Mac上，你可以在Finder上选择这个图像，然后按 Cmd + I 来显示信息）。

sizes定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择—我们在之前已经讨论了一些提示。在这种情况下，在每个逗号之前，我们写：

一个媒体条件（(max-width:480px)）——你会在 CSS topic中学到更多的。但是现在我们仅仅讨论的是媒体条件描述了屏幕可能处于的状态。在这里，我们说“当视窗的宽度是480像素或更少”。
一个空格
当媒体条件为真时，图像将填充的槽的宽度（440px）

tips：对于槽的宽度，你也许会提供一个固定值 (px, em) 或者是一个相对值（比如百分比）你也许以及注意到最后一个槽的宽度是没有媒体条件的，它是默认的，当没有任何一个媒体条件为真时，它就会生效。 当浏览器成功匹配第一个媒体条件的时候，剩下所有的东西都会被忽略，所以要注意媒体条件的顺序。

有了上述属性，浏览器会：

查看设备宽度
检查sizes列表中哪个媒体条件是第一个为真
查看给予该媒体查询的槽大小
加载srcset列表中引用的最接近所选的槽大小的图像

老旧的浏览器不支持这些特性，会忽略这些特性，并继续正常加载src属性引用的图像文件。

tips:在HTML文件中的 <head> 标签里，你将会找到这一行代码 <meta name="viewport" content="width=device-width">: 这行代码会强制地让手机浏览器采用它们真实视图的宽度来加载网页（有些手机浏览器会提供不真实的视图宽度, 然后加载比浏览器真实视图的宽度大的宽度的网页，然后再缩小加载的页面，这样的做法对响应式图片或其他设计，没有任何帮助.

2.艺术方向问题

涉及要更改显示的图像以适应不同的图像显示尺寸。<picture>

1

<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">

1
2
3
4
5

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

<source>元素包含一个media属性，这个属性包含一个媒体条件（这个条件决定哪张图片会显示--第一个条件返回真，那么就会显示这张图）
srcset属性包含要显示图片的路径，请注意，正如我们在<img>上面看到的那样，<source>可以使用引用多个图像的srcset属性，还有sizes属性。所以你可以通过一个 <picture>元素提供多个图片，不过也可以给每个图片提供多分辨率的图片。
在任何情况下，你都必须在 </picture>之前正确提供一个<img>元素以及它的src和alt属性，否则不会有图片显示。当媒体条件都不返回真的时候（你可以在这个例子中删除第二个<source> 元素），它会提供图片；如果浏览器不支持 <picture>元素时，它可以作为后备方案。

tips:你应该仅仅当在艺术方向场景下使用media属性；当你使用media时，不要在sizes属性中也提供媒体条件。

3.为什么不用CSS或JavaScript来做自适应图片

当浏览器开始加载一个页面, 它会先下载 (预加载) 任意的图片，这是发生在主解析器开始加载和解析页面的 CSS 和 JavaScript 之前的。
平均来说，页面加载的时间少了 20%。但是, 这对响应式图片一点帮助都没有, 所以需要实现类似 srcset的方法。
因为你不能先加载好 <img> 元素后, 再用 JavaScript 检测视图的宽度，如果觉得大小不合适，就动态地加载小的图片替换已经加载好的图片，这样的话, 原始的图像已经被加载了, 然后你也加载了小的图像, 这样的做法对于响应式图像的理念来说，是很糟糕的。

4.Webp和JPEG-2000

1
2
3
4
5

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp"> 
  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>

不要使用media属性，除非你也需要艺术方向。
在<source> 元素中，你只可以引用在type中声明的文件类型。
像之前一样，如果必要，你可以在srcset和sizes中使用逗号分割的列表。

5.小结

艺术方向：当你想为不同布局提供不同剪裁的图片——比如在桌面布局上显示完整的、横向图片，而在手机布局上显示一张剪裁过的、突出重点的纵向图片，可以用 元素来实现。

分辨率切换：当你想要为窄屏提供更小的图片时，因为小屏幕不需要像桌面端显示那么大的图片；以及你想为高/低分辨率屏幕提供不同分辨率的图片时，都可以通过 vector graphics (SVG images)、 srcset 以及 sizes 属性来实现。

6.一些有用的开发工具

开发者工具

响应设计视图

DOM检查

参考资料：

1.从对象到iframe - 其他嵌入技术

2.全屏API

3.嵌入矢量图形

4.SVG参考元素

5.响应式图片

6.img

OVPs（在线视频提供商）:YouTube、Dailymotion、Vimeo

在线音频提供商:Soundcloud

一、web中的视频（H5）

1.<video>允许你简单的嵌入一段视频.

1
2
3

<video src="rabbit320.webm" controls>
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> 
</video>

src:同<img>标签使用方式相同，src属性指向你想要嵌入网页当中的视频资源，他们使用方式完全相同。

controls:用户必须能够控制视频和音频的回放功能。可以使用浏览器提供的控制接口，同时也可以在JavaScript当中使用这些控制接口。(这些媒体应该包括开始、停止、音量调节的功能)

<video>标签内的段落 - 后备内容：当浏览器不支持<video>标签的时候，它将会显示出来，它使我们能够对旧的浏览器做一些兼容处理。

2.多格式支持

像 MP3、MP4、WebM这些术语叫做容器格式。他们是用不同的方式来播放音频或者视频的 — 也就是说这些容器是用不同的音频轨道、视频轨道、元数据来呈现媒体文件的。视频和音频都有不同的格式，如下:

WebM 容器通常包括了 Ogg Vorbis 音频和 VP8/VP9 视频。主要在 FireFox 和 Chrome 当中支持。

MP4 容器通常包括 AAC 以及 MP3 音频和 H.264 视频。主要在 Internet Explorer 和 Safari 当中支持。

老式的 Ogg 容器往往支持 Ogg Vorbis  音频和 Ogg Theora 视频。主要在 Firefox 和 Chrome 当中支持，不过这个容器已经被更强大的 WebM 容器所取代。

音频播放器将会直接播放音频文件,，例如 MP3 和 Ogg 文件。这些不需要容器。（主要用于将音频和视频压缩成可管理的文件（原始的音频和视频文件非常大））

浏览器包含了不同的 Codecs,，如 Vorbis 和 H.264,，它们用来将已压缩的音频和视频转化成二进制数字。正如刚才所说，浏览器并不全支持相同的 codecs，所以你得使用几个不同格式的文件来兼容不同的浏览器。

1
2
3
4
5

<video controls>
    <source src="videoandaudio/rabbit320.mp4" type="video/mp4">
    <source src="videoandaudio/rabbit320.webm" type="video/webm">
    <p>Your browser doesn't support HTML5 video. Here is a <a href="videoandaudio/rabbit320.mp4">link to the video</a> instead.</p>
  </video>

视频应当包括 WebM 和 MP4 两种格式，这两种在目前已经足够支持大多数平台和浏览器。
每个 <source> 标签页含有一个 type 属性，这个属性是可选的，但是建议你添加上这个属性 — 它包含了视频文件的 MIME types ，同时浏览器也会通过检查这个属性来迅速的跳过那些不支持的格式。如果你没有添加 type 属性，浏览器会尝试加载每一个文件，直到找到一个能正确播放的格式，这样会消耗掉大量的时间和资源。

3.<video>其他特性

1
2
3
4
5
6
7

<video controls width="400" height="400"
       autoplay loop muted
       poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>

width和height：

可以用属性控制视频的尺寸，也可以用 CSS 来控制视频尺寸。
无论使用哪种方式，视频都会保持它原始的长宽比 — 也叫做纵横比。
如果你设置的尺寸没有保持视频原始长宽比，那么视频边框将会拉伸，而未被视频内容填充的部分，将会显示默认的背景颜色。

autoplay：

自动播放，即使页面其他部分还没加载完全，这个属性会立即播放音视频的内容，建议不添加此属性。

loop：

循环播放音视频文件，不建议使用。

muted：

这个属性会导致媒体播放时，默认关闭声音。

poster：

指向一个图像的URL，这个图像会在视频播放前显示。通常用于粗略的预览或者广告。

preload:

这个属性用来缓冲较大的文件，有三个可选值：
“none”：不缓冲；
“auto”：页面加载后缓存媒体文件；
"metadata":仅缓存文件的元数据

二、web中的音频

1.<audio>和<video>的使用方式几乎完全相同。细微差别：比如边框等

1
2
3
4
5

<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
</audio>

音频播放器所占空间比视频播放器小，没有视觉部分，只需要能控制音频播放的控件：

不支持width/height属性；
不支持poster属性

三、显示音轨文本

1.使用场景：听觉障碍者；不能停音频（嘈杂环境、安静环境）；语言不通，需翻译；

2.<track>标签 - HTML5的<video>中的WebVTT格式

WebVTT 是一个格式，用来编写文本文件，这个文本文件包含了众多的字符串，这些字符串会带有一些元数据，它们可以用来描述这个字符串将会在视频中显示的时间，甚至可以用来描述这些字符串的样式以及定位信息。这些字符串叫做 cues ，你可以根据不同的需求来显示不同的样式，最常见的如下：

subtitle:通过添加翻译字幕，来帮助那些听不懂外国语言的人们理解音频当中的内容。

captions:同步翻译对白，或是描述一些有重要信息的声音，来帮助那些不能听音频的人们理解音频中的内容。

timed descriptions:将文字转换为音频，用于服务那些有视觉障碍的人。

一个典型的WebVTT文件如下：

1
2
3
4
5
6
7
8
9
10
11

WEBVTT

1
00:00:22.230 --> 00:00:24.606
This is the first subtitle.

2
00:00:30.739 --> 00:00:34.074
This is the second.

  ...

3.让WebVTT文件与HTML媒体一起显示的步骤：

1.以.vtt后缀名保存文件；
2.用<track>标签链接.vtt文件，<track>标签需放在<audio>或<video>标签当中，同时需要放所有<source>标签之后。
3.使用 kind 属性来指明是哪一种类型，如 subtitles 、 captions 、 descriptions。然后，使用 srclang 来告诉浏览器你是用什么语言来编写的 subtitles。

1
2
3
4
5

<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>

tips:文本轨道会使你的网站更容易被搜索引擎抓取到 （SEO）， 由于搜索引擎的文本抓取能力非常强大，使用文本轨道甚至可以让搜索引擎通过视频的内容直接链接。

参考资料：

1.JavaScript API

2.WebVTT

3.kind

4.srclang

5.Web中的音视频

6.iframe

7.audio

8.video

9.source

10.track

1.推荐相对路径加载图片；

绝对路径会让浏览器做更多的工作，充新寻找DNS再寻找IP地址。

通常我们都会把图片和HTML放在同一个服务器上。

搜索引擎也能读取图片的文件名并把它们记入SEO。因此给图片取个描述行的名文件名很重要；

2.像<img>和<video>这样的元素有时被称之为替换元素，因为这样的元素的内容和尺寸由外部资源（像是一个图片或视频文件）所定义，而不是元素自身。

3.alt属性:它的值应该对图片的文字描述，用于在图片无法显示或不能被看到的情况。

• 用户有视力障碍，通过屏幕阅读器来浏览网页 。事实上，给图片一个备选的描述文本对大多数用户都是很有用的。
• 就像上面所说的，你也许会把图片的路径或文件名拼错。浏览器不支持该图片类型。某些用户仍在使用纯文本的浏览器，例如 Lynx，这些浏览器会把图片替换为描述文本。
• 你会想提供一些文字描述来给搜索引擎使用，例如搜索引擎可能会将图片的文字描述和查询条件进行匹配。
• 用户关闭的图片显示以减少数据的传输，这在手机上是十分普遍的，并且在一些国家带宽是有限且昂贵。

alt里面写什么：

装饰：如果图片只是用于装饰，而不是内容的一部分，可以写一个空的alt="" 。
内容：如果你的图片提供了重要的信息，就要在alt文本中简要的提供相同的信息，甚至更近一步，把这些信息写在主要的文本内容里，这样所有人都能看见。
链接：如果你把图片嵌套在<a>标签里，来把图片变成链接，那你还必须提供无障碍的链接文本。在这种情况下，你可以写在同一个<a>元素里，或者写在图片的alt属性里，随你喜欢。
文本：你不应该将文本放到图像里。例如，如果你的主标题需要有阴影，你可以用CSS来达到这个目的，而不是把文本放到图片里。如果真的必须这么做，那就把文本也放到alt里。

4.宽度和高度属性

1
2
3
4

<img src="images/dinosaur.jpg"
     alt="it has a large head with long sharp teeth"
     width="400"
     height="341">

图片未加载完成时，浏览器在为图片留下一定的空间。

ps：

如果你需要改变图片的尺寸，你应该使用CSS而不是HTML；
使用HTML属性来改变图片的大小，若太大，图片模糊；若太小，下载远远大于你需要的图片时浪费带宽；长宽比例异常，图片显示扭曲；

5.图片标题

图片标题并不必须要包含有意义的信息，通常来说，将这样的支持信息放到主要文本中而不是附着于图片会更好。

1
2
3
4
5

<img src="images/dinosaur.jpg"
     alt="it has a large head with long sharp teeth"
     width="400"
     height="341"
     title="A T-ester University Museum">

6.解说图片

<figure> 和<figcaption>为图片提供一个容器，在标题和图片之间建立清晰的关联。

1
2
3
4
5
6
7
8

<figure>
          <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
               alt="it has a long sharp teeth"
               width="400"
               height="341"
          >
          <figcaption>text mA T-R.</figcaption>
        </figure>

ps:

从无障碍的角度来说，说明文字和 alt 文本扮演着不同的角色。看得见图片的人们同样可以受益于说明文字，而 alt 文字只有在图片无法显示时才这样。 所以，说明文字和 alt  的内容不应该一样，因为当图片无法显示时，它们会同时出现。

<figure>里面不一定是一张图片，只要是一个独立内容单元：

• 用紧凑、易于掌握的方式表达你的意图。
• 可以放在页面线性流的中几个地方（Could go in several places in the page's linear flow）
• 为主要内容提供重要的补充说明。

<figure> 可以是几张图片、一段代码、音视频、方程、表格或别的。

7.CSS背景图片

也可以使用 CSS 把图片嵌入网站中（JavaScript也行，不过那是另外一个故事了），这个 CSS 属性 background-image 和另其他 background-* 属性是用来放置背景图片的。

eg：页面中的所有段落设置一个背景图片

1
2
3

p{
	background-image:url("https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg")
}

总而言之，如果图像对您的内容里有意义，则应使用HTML图像。 如果图像纯粹是装饰，则应使用CSS背景图片。

参考资料：

1.图片

一、HTML和调试

浏览器是以宽松模式来运行，即使出现语法错误浏览器仍然会运行(浏览器通常都要自己的规则来解析语法错误的标记语言)。

1.宽容模式代码

语法错误：由于拼写错误导致程序无法运行；

逻辑错误：语法正确，代码不是想要的代码导致程序运行不正确；

2.宽容式代码风格

3.工具

浏览器开发工具

开发者模式中的审查器件

4.HTML验证

Markup Validation Service

将HTML文档作为输入并运行，然后给你一个报告(关于你的HTML有哪些错误)

一、文档的基本部分

一个典型的网站可能会这样布局：

1.标题: <header>

通常在顶部有一个大标题和（或）图标。 这是一个网站的主要常见信息，通常存在于每一个网页。

<header>展现一系列介绍性内容。如果它是<body>的子元素，它就定义了网站的全局页眉,如果它是<article>或<section>的子元素,它就定义了这些部分的特定页眉。(不要与title and headings混淆)。

2.导航:<nav>

链接到网站的主要部分；通常由菜单按钮、链接或选项卡表示。与标题一样，这些内容通常在一个网页与另一个网页之间保持一致——在您的网站上导航不一致只会使人疑惑和恼火。许多网页设计师认为导航栏是标题的一部分，而不是独立的组件，但这并不是一个硬性规定；实际上有些人认为，两个独立的会有更好的可访问性，因为如果它们互相独立，屏幕阅读器可以更好地阅读两个功能。

<nav>包含了页面主要的导航功能,二级链接等，不会进入导航功能部分。

3.主要内容:<main>具有代表性的内容段落主题可以使用<article>,<section>,<div>元素。

中心的一个大区域，包含给定网页的大部分独特内容，例如您要观看的视频，或您正在阅读的主要故事，或您要查看的地图，或新闻标题等……这是网站的一部分，绝对会因页面而异。

<main>展现了页面内容的独特性。只可以在每一个页面上使用一次<main>,直接把它放到<body>中，在理想情况下，不应该把它嵌套进其他的元素中。

<article>闭合一块与自身相关的内容，这块内容能够解释它自身而不是页面上其他的内容(eg:一篇单独的博客)。

<section>近似于<article>，但是它更多的是伴随着一个单独功能构成的页面(eg:小型地图或一组文章的标题和摘要)。最好的实际应用是用标题作为每一部分(section)的开头，tips：可以把不同的<article>分到不同的<section>中，或者把不同的<section>分到不同的 <article>中，这取决于内容。

有时候你可能只想仅仅用CSS或JavaScript将一组元素作为一个单独的实体来修饰。为了应对这种情况，HTML提供了<div>和<span>元素:

<div>是一个块级无语义元素，仅仅当找不到更好的块级元素时使用，或者不想增加特定的意义。最好使用class属性来提供一些标签(eg:浏览电商网站，有一个购物车部件一直都可以选择的地方)。

<span>是一个行内无语义元素，仅仅当无法找到更好的语义元素包含内容时使用，或者不想增加特定的含义(最好使用class属性来提供一些标签)。

eg:
<div class="shopping-cart">
  <h2>Shopping cart</h2>
  <ul>
    <li>
      <p><a href=""><strong>Silver earrings</strong></a>: $99.95.</p>
      <img src="../products/3333-0985/" alt="Silver earrings">
    </li>
    <li>
      ...
    </li>
  </ul>
  <p>Total cost: $237.89</p>
</div>

这并不是一个<aside>,因为它和主要内容并没有必要的联系（你想在任何地方都能看到它）。它甚至不能用<section>来特定的指定，因为它不是页面上主要内容的一部分。所以在这种情况下用<div>是合适的。我们已经把它包含进head标签里作为帮助屏幕阅读者找到它的引导.

4.侧栏：<aside> ；经常嵌套在<main>中

一些次要信息、链接、引言、广告等。通常这是与主要内容中包含的内容相关（例如在新闻文章页面上，侧边栏可能包含作者的个人信息或相关文章的链接），但有在一些情况下，你会发现一些重复的元素，如辅助导航系统。

<aside>包含了内容并不与主要内容有直接的联系，但是它可以提供额外的不直接由=有联系的信息(术语条目，作者简介，相关链接等) 。

5.页脚:<footer>

横跨页面底部的条纹，通常包含精美的打印、版权通知或联系信息。 它是一个放置公共信息（如标题）的地方，但通常该信息对网站来说不是特别重要。 通过提供用于快速访问热门内容的链接，页脚有时也用于SEO目的。

<footer>包含了页面的页脚部分。

警告: div用起来非常便利以至于很容易被滥用。因为它们不携带语义值，所以会让你的HTML代码变的混乱。要小心的使用它们，只有当没有更好的语义解决方案才能使用，而且要尽可能把它的使用量降到最低，否则，当你升级和维护你的文档时会非常困难。

二、换行与水平分割线

1.<br>

在一个段落中创建一个换行；在你想要生成一系列的短行的地方，<br>是唯一能够生成这种结构的元素。

eg:一个邮寄地址或一首诗。

1
2
3
4

<p>There once was a girl called Nell<br>
Who loved to write HTML<br>
But her structure was bad, her semantics were sad<br>
and her markup didn't read very well.</p>

2.<hr>

<hr>元素在文档中生成一条水平分割线，表示文本中主题的变化(eg：主题或场景的变化)看起来就是一条水平线。

eg：

1
2
3

<p>Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.</p>
<hr>
<p>Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hasily, and lept to his feet; "better get back to work then", he mused.</p>

三、设计一个网站：

在一个结构庞大、复杂的网站里，大多数设计都可以参照上述的 information architecture（信息架构：一旦你设计好了一个简单网站的所有内容，按照正常的逻辑思维，我们应该尝试制定出你想要放在整个网站上的内容，哪些页面是你需要的，这些页面应该如何排列，以及如何互相链接，带给用户最好的使用体验。）

1.如果在你的设计中，每个页面都有一些内容是重复的，你可以先把这些重复的内容记录下来。

2.接下来，你可以通过画一个草图的方式来说明你希望的每个页面的结构的样子，（或许你画出来的草图和我们上文中提到的示例页面比较像），在空白段落上做上标记，来说明之后要填充在这里的内容。

3.现在，所有的网站设计人员可以一起讨论，还希望网站上显示哪些内容 （不包括每个页面的重复页面）— 以列表的形式写下来。

4.接着，尝试把这些内容进行分组，这样可以让你了解哪些内容可以放在一个相同的页面上。这种做法和 Card sorting 非常相似。

5.现在，尝试着再画一个网站的草图 — 每个气泡代表网站的一个页面，在气泡与气泡之间用连线的方式，来说明它们之间的联系。主页面可能位于中心位置，并且链接到其他的大多数页面；对于一个小型网站，大多数页面都可以从主页的导航栏中链接跳转，虽然也存在例外。你可能也希望记录下内容将如何显示的笔记。

参考资料：

1.标题

2.title and headings

3.文件和网站结构

一、描述列表

1.标记基本列表

2.描述列表(description list)

目的是标记一组项目及其相关描述，例如术语和定义，或者是问题和答案等。
使用与其他列表类型不同的闭合标签— <dl> (描述列表：description list);
每一项都用  <dt> (描述术语：description term)  元素闭合。 
每个描述都用 <dd> (描述部分：description description) 元素闭合。

1
2
3
4
5
6
7
8
9

<dl>
	<dt>question1?</dt>
		<dd>In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)
		</dd>        
	<dt>question2?</dt>
       <dd>In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.</dd>
   <dt>aside</dt>
       <dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information.</dd>
</dl>

tips:

一个术语<dt>可以同时有多个描述<dd>

浏览器的默认样式会在描述列表的描述部分（description description）和描述术语（description terms）之间产生缩进。MDN非常严密地遵循这一惯例，同时也鼓励关于术语的其他更多的定义.

二、标记引文

1.块引用

如果一个块级内容(一个段落、多个段落、一个列表)从其他地方被引用，你应该把它用<blockquote>元素包裹起来表示,并且在<cite>属性里用URL来指向引用的资源。

1
2
3
4
5

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

浏览器在渲染块引用时默认会增加缩进，作为引用的一个指示符；MDN是这样做的，但是也增加了额外的样式：

2.行内引用

行内元素用同样的方式工作，除了使用<q>元素。

1
2

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

浏览器默认将其作为普通文本放入引号内表示引用;
<q>元素旨在用于不需要分段的短引用

3.引文

引文默认的字体样式为斜体。浏览器、屏幕阅读器等等不会真的关心它，如果不使用JavaScript或CSS，浏览器不会显示cite的内容。如果你想要确保引用的资源在页面上是可用的，更好的方法是把元素放到引用元素旁边。这就意味着包含引用资源的名称——即引用的书的名字，或人的名字——但并不表示你不可以用同样的方式把要链接的文本放到元素中：

1
2
3
4
5
6
7

<p>According to the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"> <cite>MDN blockquote page</cite></a>:</p>

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

   <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> -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"><cite>MDN q page</cite></a>.</p>

三、缩略语

<abbr>常常用来包裹一个缩略语或缩写，并提供缩写的解释(包含在title属性中,当光标移动到项目上时会出现提示)：

1
2
3

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

<p>I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with the chainsaw.</p>

四、标记联系方式

HTML有个用于标记联系方式的元素——<address>。它仅仅包含你的联系方式:

1
2
3

<address>
  <p>Chris Mills, Manchester, The Grim North, UK</p>
</address>

<address>元素是为了标记编写HTML文档的人的联系方式，而不是任何其他的内容.

五、上标和下标

当你使用日期、化学方程式、和数学方程式时会偶尔使用上标和下标。 <sup> 和<sub>元素可以解决这样的问题。

1
2
3

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

六、展示计算机代码

有大量的HTML元素可以来标记计算机代码：

<code>: 用于标记计算机通用代码。
<pre>: 用于标记固定宽度的文本块，其中保留空格（通常是代码块）。
<var>: 用于标记具体变量名。
<kbd>: 用于标记输入电脑的键盘（或其他类型）输入。
<samp>: 用于标记计算机程序的输出。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

七、标记事件和日期

HTML 还支持将时间和日期标记为可供机器识别的格式的 <time> 元素：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!-- Standard simple date -->
<time datetime="2016-01-20">20 January 2016</time>
<!-- Just year and month -->
<time datetime="2016-01">January 2016</time>
<!-- Just month and day -->
<time datetime="01-20">20 January</time>
<!-- Just time, hours and minutes -->
<time datetime="19:30">19:30</time>
<!-- You can do seconds and milliseconds too! -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- Date and time -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
<!-- Date and time with timezone offset-->
<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
<!-- Calling out a specific week number-->
<time datetime="2016-W04">The fourth week of 2016</time>

参考资料：

1.HTML高级文本排版

2.Address

一、什么是超链接

是互联网的一个功能，使互联网成为互联的网络。超链接使我们能够将我们的文档链接到任何其他文档（或其他资源），也可以链接到文档的指定部分，我们可以在一个简单的网址上提供应用程序（与必须先安装的本地应用程序或其他东西相比）。几乎任何网络内容都可以转换为链接，点击（或激活）超链接将使网络浏览器转到另一个网址（URL）。

tips:

URL可以指向HTML文件、文本文件、图像、文本文档、视频和音频文件以及可以在网络上保存的任何其他内容。 
如果浏览器不知道如何显示或处理文件，它会询问您是否要打开文件（需要选择合适的本地应用来打开或处理文件）或下载文件（以后处理它）。

二、链接的解析

通过将文本（或其他内容，见块级链接)转换为<a>元素内的链接来创建基本链接， 给它一个href属性（也称为目标），它将包含您希望链接指向的网址。

1.文本链接：

1
2
3

<p>I'm creating a link to 
<a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.
</p>

使用title属性添加支持信息

1
2
3

<p>I'm creating a link to 
<a href="https://www.mozilla.org/en-US/" title="The best place">the Mozilla homepage</a>.
</p>

包含关于链接的补充有用信息;
当链接悬停在其上时，标题将作为工具提示出现;

tips:

连接的标题仅当鼠标悬停在其上时才会显示，这意味着使用键盘来导航网页的人很难获取到标题信息。如果标题信息对于页面非常重要，你应该使用所有用户能都方便获取的方式来呈现，例如放在常规文本中。

2.块级链接：

可以将一些内容转换为链接，甚至是 块级元素。

eg1：如果你想要将一个图像转换为链接，你只需把图像放到<a></a>标签中间.

1
2
3

<a href="https://baidu.com" title="这是百度网站">
           <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1520485528900&di=f29017b61829b0780d22a298835b046a&imgtype=0&src=http%3A%2F%2Fwww.lgstatic.com%2Fthumbnail_160x160%2Fi%2Fimage%2FM00%2F00%2FDE%2FCgqKkVZYK2-AHWKrAAJZ0aVbFEA607.png" alt="网络图片">
           </a>

eg2:多个段落的内容为链接，你只需把该段内容放到<a></a>标签中间.

1
2
3
4
5
6
7

<a href="https://baidu.com" title="这是百度网站">
    <p>It was a dark night. Somewhere, the ...</p>
    
    <h2>Chapter 2: The eternal silence</h2>
    
    <p>Our protagonist out of the shadowy figure ...</p>
</a>

三、统一资源定位器(URL)与路径(path)快速入门

1.统一资源定位器（Uniform Resource Locator,简写URL）是一个定义了在网络上的位置的一个文本字符串。URL使用路径查找文件。路径指定文件系统中您感兴趣的文件所在的位置。

eg:目录结构

此目录结构的根目录称为creation-hyperlinks。当在网站上工作时， 你会有一个包含整个网站的目录。

在根目录，我们有一个index.html和一个contacts.html文件。在真实的网站上，index.html 将会成为我们的主页或登录页面。

根目录还有两个目录—— pdfs 和projects，它们分别包含一个 PDF (project-brief.pdf) 文件和一个index.html 文件。请注意你可以有两个index.html文件，前提是他们在不同的目录下，许多网站就是如此。第二个index.html或许是项目相关信息的主登录界面。

    指向相同目录：
        如果index.html（顶层的index.html）想要包含一个超链接指向contacts.html，你只需要指定想要链接的文件名，因为它与当前文件是在同一个目录的. 所以你应该使用的URL是contacts.html:
        <p>Want to contact a specific staff member?Find details on our <a href="contacts.html">contacts page</a>.</p>

    指向子目录：
        如果你想要包含一个超链接到index.html （顶层index.html)）指向 projects/index.html，您需要进入项目目录，然后指明要链接到的文件。 通过指定目录的名称，然后是正斜杠，然后是文件的名称。因此您要使用的URL是projects / index.html：
        <p>Visit my <a href="projects/index.html">project homepage</a>.</p>

    指向上级目录：
        如果你想在projects/index.html中包含一个指向pdfs/project-brief.pdf的超链接，你必须返回上级目录，然后再回到pdf目录。“返回上一个目录级”使用两个英文点号表示 — .. — 所以你应该使用的URL是 ../pdfs/project-brief.pdf：
        <p>A link to my <a href="../pdfs/project-brief.pdf">project brief</a>.</p>

tips：

如果需要的话，你可以将这些功能的多个例子和复杂的url结合起来。例如：../../../complex/path/to/my/file.html.

2.文档片段

超链接可以链接到html文档的特定部分（被称为文档片段），而不仅仅是文件的顶部。步骤：

1.首先分配一个id属性的元素到链接。通常链接到一个特定的标题是有意义的，所以这看起来像下面的内容：

1

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

2.然后链接到那个特定的id，您可以在URL的结尾包含它，前面是一个井号（#），例如：

1

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

可以用它自己的文档片段参考链接到同一份文件的另一部分:(跳转到指定位置)

1

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

3.绝对链接和相对链接

绝对URL：

指向由其在Web上的绝对位置定义的位置，包括 协议 and 域名.
总是指向相同的位置，不管它在哪里使用；

eg：

如果index.html 页面上传到projects这一个目录 。project位于web服务站点的根目录, web站点的域名为http://www.example.com, 这个页面可以通过http://www.example.com/projects/index.html访问 ( 或者仅仅通过http://www.example.com/projects/来访问, 因为大多数web服务通过访问index.html这样的页面来加载，如果没有特定的URL的话)

相对URL：

指向与您链接的文件相关的位置，更像我们在前面一节中所看到的位置。
eg :
    如果我们想从示例文件链接http://www.example.com/projects/index.html转到相同目录下的一个PDF文件, URL就是文件名URL — 例如 project-brief.pdf —没有其他的信息要求. 如果PDF文件能够在projects的子目录pdfs中访问到, 相对路径就是pdfs/project-brief.pdf (对应的绝对URL就是 http://www.example.com/projects/pdfs/project-brief.pdf.)

一个相对URL将指向不同的位置，这取决于它所在的文件所在的位置。
eg:
    如果我们把index.html 文件 从 projects 目录移动出来并进入Web站点的根目录（最高级别，而不是任何目录中），  pdfs/project-brief.pdf 的相对URL将会指向http://www.example.com/pdfs/project-brief.pdf, 而不是http://www.example.com/projects/pdfs/project-brief.pdf.

4.用清晰的链接措辞

使用屏幕阅读器的用户喜欢从页面上的一个链接跳到另一个链接，并且脱离上下文来阅读链接。
搜索引擎使用链接文本为索引目标文件所以，在链接文本中包含关键词是一个很好的主意，以有效地描述与之相关的信息。
读者往往会浏览页面而不是阅读每一个字，他们的眼睛会被页面的特征所吸引，比如链接。他们会找到描述性的链接。

tips：

不要重复URL作为链接文本的一部分 — URL看起来很丑，当屏幕朗读器一个字母一个字母的读出来的时候听起来就更丑了。
不要在链接文本中说“link”或“links to”——它只是噪音。屏幕阅读器告诉人们有一个链接。可视化用户也会知道有一个链接，因为链接通常是用不同的颜色设计的，并且存在下划线（这个惯例一般不应该被打破，因为用户习惯了它。）
保持你的链接标签尽可能短-长链接尤其惹恼屏幕阅读器用户，他们必须听到整件事读出来。

5.尽可能使用相对链接

当链接到同一网站的其他位置时，你应该使用相关链接（当链接到另一个网站时，你需要使用绝对链接）；

首先，检查代码要容易得多——相对URL通常比绝对URL短得多，这使得阅读代码更容易。
其次，在可能的情况下使用相对URL更有效。当使用绝对URL时，浏览器首先通过查询域名（使用“DNS”）}查找服务器的真实位置，然后再转到该服务器并查找所请求的文件。另一方面，相对URL，浏览器只在同一服务器上查找被请求的文件。因此，如果你使用相对URL做的绝对URL，你就不断地让你的浏览器做额外的工作，这意味着它的效率会降低。

6.链接到非html资源-留下清晰的指示

当链接到一个需要下载的资源（如PDF或Word文档）或流媒体（如视频或音频）或有另一个潜在的意想不到的效果（打开一个弹出窗口，或加载Flash电影），你应该添加明确的措辞，以减少任何混乱。

如果你是在低带宽连接，点击一个链接，然后就开始下载大文件。
如果你没有安装Flash播放器，点击一个链接，然后突然被带到一个需要Flash的页面。

7.下载链接时使用下载属性

当您链接到要下载的资源而不是在浏览器中打开时，您可以使用下载属性来提供一个默认的保存文件名。下面是一个下载链接到Firefox 39 Windows版本的示例：

1
2
3
4

<a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US"
   download="firefox-39-installer.exe">
  Download Firefox 39 for Windows
</a>

四、电子邮件链接

当点击一个链接或按钮时，打开一个新的电子邮件发送信息而不是连接到一个资源或页面，这种情况是可能做到的。这样做是使用<a>元素和mailto：URL的方案。
其最基本和最常用的使用形式为一个mailto:link （链接），链接简单说明收件人的电子邮件地址。

1

<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

邮件地址甚至是可选的。如果你忘记了（也就是说，你的href仅仅只是简单的"mailto:"），一个新的发送电子邮件的窗口也会被用户的邮件客户端打开，只是没有收件人的地址信息，这通常在“分享”链接是很有用的，用户可以发送给他们选择的地址邮件.

1.具体细节

任何标准的邮件头字段可以被添加到邮件的URL你提供。 其中最常用的是主题(subject)、抄送(cc)和主体(body) (这不是一个真正的头字段，但允许您为新邮件指定一个短内容消息)。 每个字段及其值被指定为查询项。

1
2
3
4
5

<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email">
  Send mail with cc, bcc, subject and body
</a>

<a href="mailto:dengtao_dev@163.com?cc=1083683360@qq.com&subject=this is mail&body=hellowrld">email</a>

tips:

每个字段的值必须是URL编码的。 也就是说，不能有非打印字符（不可见字符比如制表符、换行符、分页符）和空格 percent-escaped. 同时注意使用问号（?）来分隔主URL与参数值，以及使用&符来分隔mailto:中的各个参数。 这是标准的URL查询标记方法。

mailto:

mailto:nowhere@mozilla.org

mailto:nowhere@mozilla.org,nobody@mozilla.org

mailto:nowhere@mozilla.org?cc=nobody@mozilla.org

mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject

参考资料：

1.超链接

2.Percent-encoding

3.The GET method

一、标题和段落

1.段落 <p>段落内容</p>

1

<p>I am a paragraph, oh yes I am.</p>

2.标题

每个标题（Heading）是通过“标题标签”进行定义的：

1

<h1>I am the title of the story.</h1>

这里有六个标题元素标签— <h1>, <h2>, <h3>, <h4>, <h5>,<h6>. 
每个元素代表文档中不同级别的内容; <h1>表示主标题（the main heading），<h2>表示二级子标题（subheadings），<h3>表示三级子标题（sub-subheadings），等等。

3.编辑结构层次

eg:

在一个故事中，<h1>表示故事的名字，<h2>表示每个章节的标题， <h3>表示每个章节下的子标题，以此类推。

所涉及的元素具体代表什么，完全取决于作者编辑的内容，只要层次结构是合理的。在创建此类结构时，您只需要记住一些最佳实践：

1.优选地，您应该只对每个页面使用一次<h1> — 这是顶级标题，所有其他标题位于层次结构中的下方。
2.请确保在层次结构中以正确的顺序使用标题。不要使用<h3>来表示副标题，后面跟<h2>来表示副副标题 - 这是没有意义的，会导致奇怪的结果。
3.在可用的六个标题级别中，您应该旨在每页使用不超过三个，除非您认为有必要使用更多。具有许多级别的文档（即，较深的标题层次结构）变得难以操作并且难以导航。在这种情况下，如果可能，建议将内容分散在多个页面上。

二、列表(Lists)

1.无序(Unordered) - <ul>unordered lists</ul>

无序的列表被用来标记每个项目。在这里，项目的顺序并不重要.

1
2
3
4
5

<ul>
<li>牛奶</li>
<li>鸡蛋</li>
<li>面包</li>
</ul>

2.有序(Ordered) - <ol>ordered lists</ol>

有序的列表是根据项目的顺序列出来的.

1
2
3
4
5
6
7

<ol>
  <li>行驶到这条路的尽头</li>
  <li>向右转</li>
  <li>直行穿过第一个双环形交叉路</li>
  <li>在第三个环形交叉路左转</li>
  <li>学校就在你的右边，300米处</li>
</ol>

3.嵌套列表Nesting lists

将一个列表嵌入到另一个列表是完全可以的，

1
2
3
4
5
6
7
8
9
10
11

<ol>
  <li>这是第一步</li>
  <li>这是第二步</li>
  <li>这是第三步</li>
  <li>这是第四步
    <ul>
      <li> AAAAAA</li>
      <li> BBBBBB</li>
    </ul>
  </li>
</ol>

4.重点强调

强调

在HTML中我们用<em>（emphasis）元素来标记这样的情况。这样做既可以让文档读起来更有趣，也可以被屏幕阅读器识别出来，并以不同的语调发出。浏览器默认风格为斜体，但你不应该纯粹使用这个标签来获得斜体风格，为了获得斜体风格，你应该使用<span>元素和一些CSS，或者是<i>元素（见下文）。

1

<p>I am <em>glad</em> you weren't <em>late</em>.</p>

<em>和<i>的区别：

在 默认情况下，视觉效果是一样的 - 这两个标签都把内容呈现为斜体. 
语义是不同的： <em> 标签表示着重强调其内容，而 <i> 标签表示从正常的散文中区分出的文本, 如电影或书籍的名字，一个外来词, 或者当文本指的是一个字的定义，而不是其自身代表的语义。

<span>和<div>的区别：

<span> 元素是行内元素，是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者Id属性），或者这些元素有着共同的属性，比如lang。应该在没有其他合适的语义元素时才使用它。

<div> 是块元素

不允许省略标签（开始，结束都不能省略）

非常重要

在文字方面则是用粗体字来达到强调的效果。<strong>(strong importance) 元素来标记这样的请况。浏览器默认风格为粗体，但你不应该纯粹使用这个标签来获得粗体风格，为了获得粗体风格，你应该使用<span>元素和一些CSS，或者是<b> 元素 (见下文)。

1
2

<p>This liquid is <strong>highly toxic</strong>.</p>
<p>I am counting on you. <strong>Do not</strong> be late!</p>

斜体、粗体、下划线…

这里是最好的经验法则：使用<b>,<i>,<u> 来传达传统意义上的粗体，斜体或下划线是合适的
<i> 被用来传达传统上用斜体表达的意义：外国文字，分类名称，技术术语，一种思想……
<b> 被用来传达传统上用粗体表达的意义：关键字，产品名称，引导句……
<u> 被用来传达传统上用下划线表达的意义：专有名词，拼写错误……
<q>引号 </q>   "引号"

参考资料：

1.文本结构和内容

Head中有什么？HTML中的元数据

在页面加载完成的时候，标签head里的内容，是不会在页面中显示出来的。它的作用是包含一些页面的元数据:页面的<title>(标题) ,CSS(如果你想用CSS来美化页面内容)，图标和其他的元数据(比如 作者，关键词，摘要)。

1.增加一个标题

1
2
3
4
5
6
7

<head>
    <title>My test page</title>
</head>

<body>
    <h1>Mozilla is cool</h1>
</body>

当被加载到浏览器中的时候，元素 <h1>  会出现在页面中 —— 通常它应该在一个页面中只被使用一次, 它被用来标记你的页面内容的标题(故事的标题，新闻标题或者任何适当的方式）

元素 <title> 是用来表示整个HTML文档大致内容的元数据(不是文档的内容.),也被以其他的方式使用着. 比如说，如果你尝试为某个页面添加书签，(Bookmarks > Bookmark This Page, 在火狐浏览器中), 你会看到 <title> 的内容被作为建议的书签名.

2.元数据：<meta>元素

元数据就是描述数据的数据，而HTML有一个“官方的”方式来为一个文档添加元数据，—— 元素. 当然，其他在这篇文章中提到的东西也可以被当作元数据。 有很多不同种类的 元素可以被包含进你的页面的元素。

eg1：指定文档中字符的编码

1

<meta charset="utf-8">

utf-8 是一个通用的字符集，它包含了任何人类语言中的大部分的字符。 这意味着你的web页面可以显示任意的语言; 所以对于你的每一个页面，使用这个设置是很好的! 比如说，你的页面可以很好的处理英语和日语.

eg2:添加作者和描述

1

<meta name="author" content="Chris Mills">

name 特性指定了meta 元素的类型; 说明该元素包含了什么类型的信息。
content 指定了实际的元数据内容。

指定作者在某些情况下是很有用的：如果你需要联系页面的作者，问一些关于页面内容的问题。 一些内容管理系统能够自动获取页面作者的信息，然后用于某种目的。

指定包含关于页面内容的关键字的页面内容的描述是很有用的，因为它可能或让你的页面在搜索引擎的相关的搜索出现得更多 (这些行为术语上被称为 Search Engine Optimization, or SEO.)

3.在站点增加自定义图标

16 x 16 像素是这种图标的第一种类型;这些图标出现在浏览器每一个打开的页面中的标签页中中以及在书签面板中的书签页面中。页面添加图标的方式:

1.将其保存在与网站的索引页面相同的目录中，以.ico格式保存（大多数浏览器将支持更通用的格式，如.gif或.png，但使用ICO格式将确保它能在如Internet Explorer 6一样久远的浏览器显示）

2.将以下行添加到HTML <head>中以引用它:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

4.在HTML中应用CSS和JavaScript

几乎你使用的所有网站都会使用 CSS 让网页更加炫酷, 使用JavaScript让网页有交互功能, 比如视频播放器，地图，游戏以及更多功能。这些应用在网页中很常见，它们分别使用 <link>元素以及 <script>元素。

<link> 元素经常位于文档的头部，它有2个属性， rel=”stylesheet”，表明这是文档的样式表，而 href,包含了样式表文件的路径：

1
2
3
4
5

<head>
...
<link rel="stylesheet" href="my-css-file.css">
...
</head>

<script> 部分没必要非要放在文档头部; 实际上，把它放在文档的尾部（在 标签之前）是一个更好的选择 ，这样可以确保在加载脚本之前浏览器已经解析了HTML内容（如果脚本加载某个不存在的元素，浏览器会报错）。

1
2
3
4

<body>
...
<script src="my-js-file.js"></script>
</body>

tips：<script>元素看起来像一个空元素，但它并不是，因此需要一个结束标记。您还可以选择将脚本放入< script >元素中，而不是指向外部脚本文件

5.为文档设定主语言

为你的站点设定语言， 这个可以通过添加lang属性到HTML开始标签中来实现 (参考 meta-example.html)，如下所示：

1

<html lang="en-US">

还可以将文档的分段设置为不同的语言。例如， 我们可以把日语部分设置为日语， 如下所示：

1

<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>

参考资料：

1.Head包含的元数据