第二天学习笔记：(MDN HTML学习、web安全策略与常见攻击、语义化)-CSDN博客

本文全面介绍了Web开发的基础知识，包括HTML、CSS和JavaScript的使用技巧，以及如何构建语义化网站。深入探讨了HTML表单的创建、调试、图片处理、音视频集成和表单数据验证。同时，讲解了如何确保Web安全，处理表单数据，以及在旧浏览器中的兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一：Web入门

1:web文件命名

在文件名中应使用连字符(-)。搜索引擎把连字符当作一个词的分隔符，但不会以这种方式处理下划线。

养成在文件夹和文件名中使用小写，并且使用短横线而不是空格来分隔的习惯。

2:居中图像

img {
  display: block;
  margin: 0 auto;
}

二：HTML

head

1:许多<meta> 元素包含了name 和 content 特性:

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

2:为文档设定主语言：

 <html lang="en-US">

超链接

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

2:块级链接

将块状元素放在a标签之间，例如：img，即可实现一个块状链接。

3:锚点

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

1）必须首先分配一个属性给目标元素，作为锚点

2）然后在a标签的链接末尾，加上 #目标id 即可实现在点击超链接时，直接跳转到目标位置而不仅仅是打开网页。

4:链接到规范写法

1）在链接文本中包含关键词以有效地描述与之相关的信息。

2）不要重复URL作为链接文本的一部分；不要在链接文本中说“link”或“links to”，看起来很傻；链接标签尽可能短；

3）站内跳转使用相对链接；站外跳转使用绝对链接；

4）链接到非html资源时留下清晰的指示，当链接到一个需要下载的资源（如PDF或Word文档）或流媒体（如视频或音频）或有另一个潜在的意想不到的效果（打开一个弹出窗口，或加载Flash电影），你应该添加明确的提示。

5）当您链接到要下载的资源而不是在浏览器中打开时，您可以使用下载属性来提供一个默认的保存文件名。

<a href="链接"
   download="下载时的默认文件名">
  
</a>

6）电子邮件链接：点击一个链接或按钮时，打开一个新的电子邮件发送信息而不是连接到一个资源或页面。

语法；使用<a>元素和mailto：URL。

<a href="mailto:邮箱">Send email to here</a>

任何标准的邮件头字段可以被添加到邮件链接的URL。其中最常用的是主题(subject)、抄送(cc)和主体(body)，只需按照邮件传输时的URL格式即可。

应用：自动发送、抄送邮件的实现。动态拼接URL，使用键值对传递邮件的内容、发送地址等信息。

高级文本排版

1:描述列表

这种列表的目的是标记一组项目及其相关描述，例如术语和定义，或者是问题和答案等。

<dl>
  <dt>项</dt>
  <dd>描述</dd>
</dl>

引用

1:块引用

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

浏览器在渲染块引用时默认会增加缩进，作为引用的一个指示符。

2:行内引用

使用<q>元素，在cite属性里用URL来指向引用的资源。

3:缩略语

<abbr>——它常被用来包裹一个缩略语或缩写，并且提供缩写的解释（包含在title属性中），当光标移动到项目上时会出现title内容作为提示。

还有另一个元素<acronym>，它基本上与<abbr>相同，专门用于首字母缩略词而不是缩略语。然而，这已经被废弃了 - 它在浏览器的支持中不如<abbr>，并且具有类似的功能，所以没有意义。只需使用<abbr>。

结构化网站

1:文档的基本部分

2:语义化的HTML布局元素

<main> 每一个页面上只能使用一次<main>，直接把它放到<body>中。
<article> 闭合一块与自身相关的内容，这块内容能够解释它自身而不是页面上其他的内容（例如一篇单独的博客）。
<section> 近似于<article>，但是它更多的是伴随着由一个单独功能构成的页面（例如一个小型的地图，或者是一组文章的标题和摘要）。它被认为最好的实际应用是用标题作为每一部分（section）的开头；也要注意的是你可以把不同的<article>分到不同的<section>中，或者把不同的<section>分到不同的<article>中，这要取决于内容。
<aside> 包含的内容并不与主要内容有直接的联系，但是它可以提供额外的不直接有联系的信息（术语表条目，作者简介，相关链接等等），在屏幕的右侧边栏。
<header> 展现了一系列的介绍性内容。如果它是<body> 的子元素,它就定义了网站的全局页眉。但是如果它是 <article> 或<section> 的子元素，它就定义了这些部分的特定的页眉(不要把这些与titles and headings混淆)。
<nav> 包含了页面主要的导航功能。
<footer> 包含了页面的页脚部分。

3:没有语义化的布局元素

1）<span> 是一个行内无语义元素，你应该仅仅当无法找到更好的语义元素包含内容时使用，或者不想增加特定的含义。

2）<div> 是一个块级无语义元素，你应该仅仅当找不到更好的块级元素时使用，或者不想增加特定的意义。

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

HTML调试

1:浏览器的开发者工具、审查元素

2:借助标准验证平台：Markup Validation Service

HTML图片

1:图片元素的替换性

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

不应该使用HTML属性来改变图片的大小。如果你把尺寸设定的太大，最终图片看起来会模糊；如果太小，会在下载远远大于你需要的图片时浪费带宽。如果你没有保持正确的宽高比，图片可能看起来会扭曲。在把图片放到你的网站页面之前，你应该使用图形编辑器使图片的尺寸正确。

如果你实在需要改变图片的尺寸，你应该使用CSS而不是HTML。

2:为图片搭配说明文字的方式来解说图片

使用 HTML5 的 <figure> 和 <figcaption> 元素：为图片提供一个语义容器，在标题和图片之间建立清晰的关联。

<figure>
  <img src="images/xxx.jpg"
       alt="替换文本">
  <figcaption>描述性文字</figcaption>
</figure>

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

3使用img还是background-image

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

HTML音视频

1:video

<video controls width="400" height="400"
       autoplay //自动播放
       loop//循环播放
       muted//静音
       preload="none"//缓冲
       poster="poster.png">//这个属性指向了一个图像的URL，这个图像会在视频播放前显示。通常用于粗略的预览或者广告

  <source src="rabbit320.mp4" type="video/mp4">//优先播放mp4
  <source src="rabbit320.webm" type="video/webm">//如果第一个格式不支持，则播放此格式
  <p>如果上面格式都不支持，则显示替换文本</p>
  <track kind="subtitles" src="subtitles_en.vtt" srclang="en">//音轨文本：subtitle(翻译字幕)\captions(同步翻译对白)\timed descriptions(将文字转换为音频，用于服务那些有视觉障碍的人)
</video>

2：audio

<audio controls >
   <source src="viper.mp3" type="audio/mp3">>//首选格式
   <source src="viper.ogg" type="audio/ogg">//备用格式
  <p>如果上面格式都不支持，则显示替换文本</p>
</audio>

HTML嵌入技术

1:<iframe>元素旨在允许您将其他Web文档嵌入到当前文档中

2:安全隐患

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

3:防范

使用 HTTPS来打开iframe的内容：HTTPS减少了远程内容在传输过程中被篡改的机会；HTTPS防止嵌入式内容访问您的父文档中的内容；

始终使用sandbox属性：只给嵌入式内容工作所需的权限，使用没有参数的sandbox属性来强制执行所有可用的限制。重要的一点是，你永远不应该同时添加allow-scripts和allow-same-origin到你的sandbox属性中-在这种情况下，嵌入的内容可以绕过，从执行脚本停止网站同源安全策略，并使用JavaScript来关闭完全沙盒。

配置CSP指令：CSP代表内容安全策略，它提供一组HTTP标头（由web服务器发送时与元数据一起发送的元数据），旨在提高HTML文档的安全性。

HTML矢量图

1:位图与矢量图

位图使用像素网格来定义：一个位图文件精确包含了每个像素的位置和它的色彩信息。流行的位图格式包括 Bitmap (.bmp), PNG (.png), JPEG (.jpg), and GIF (.gif.)
矢量图使用算法来定义：一个矢量图文件包含了图形和路径的定义，电脑可以根据这些定义计算出当它们在屏幕上渲染时应该呈现的样子。

2:SVG

SVG 是用于描述矢量图像的XML语言。

3:使用SVG

<img srcset="equilateral.svg" src="equilateral.png" alt="triangle with equal sides" >//支持svg的浏览器将加载SVG - 较旧的浏览器将加载PNG

自适应的图片：一种可以在不同的屏幕尺寸和分辨率的设备上都能良好工作以及其他特性的图片

1:使用不同的尺寸

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

2:相同尺寸，使用不同的分辨率

<img srcset="elva-fairy-320w.jpg,
             elva-fairy-480w.jpg 1.5x,
             elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">

3:不同设备上，显示经过不同程度裁剪过的内容(艺术方向)

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

4:HTML自适应图片与css自适应图片的区别

当浏览器开始加载一个页面, 它会先下载 (预加载) 任意的图片，这是发生在主解析器开始加载和解析页面的 CSS 和 JavaScript 之前的。

你不能先加载好 <img> 元素后, 再用 JavaScript 检测视图的宽度，如果觉得大小不合适，就动态地加载小的图片替换已经加载好的图片，这样的话, 原始的图像已经被加载了, 然后你也加载了小的图像,这是很糟糕的做法。

HTML表单基础

1:使用label来为input添加标签

<label for="input的id">名称:</label>
<input type="text" id="id" />

正确设置标签的另一个好处是可以在所有浏览器中单击标签来激活相应的小部件：点击标签改变可用性；获取焦点；弹出下拉列表；适当放大或高亮显示等。

2:input与textarea的默认值

<input/> 标签是一个空元素，这意味着它不需要关闭标签，使用value 属性指定默认值。

<textarea></textarea>只需在元素的开始和结束标记之间放置默认值即可。

3:button

<button>元素也接受一个 type属性，它接受三个值中的一个:submit, reset或者 button。

使用相应类型的 <input>元素来生成一个按钮，如 <input type="submit">：<input>元素只允许纯文本作为其标签，而<button>元素允许设置文本、图片等。

4:提交数据

1）<form> 元素将定义如何通过action 属性和 method属性来发送数据的位置和方式。

2）还需要为我们的数据提供一个名称：需要在每个表单小部件上使用 name 属性来收集特定的数据。

5:严格禁止在一个表单内嵌套另一个表单。嵌套会使表单的行为不可预知。

6:不建议在<form>元素之外使用表单小部件，跨浏览器对这个特性的实现还不足以使用。

7:使用<fieldset> 和 <legend> 元素分组管理表单字段

<fieldset>元素用于创建具有相同目的的小部件组的方式，可以在<fieldset>标签后加上一个 <legend>元素来给<fieldset>进行描述备注。

<form>
  <fieldset>
    <legend>描述</legend>
    <p>
      <input type="radio" name="size" id="size_1" value="small">
      <label for="size_1">Small</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_2" value="medium">
      <label for="size_2">Medium</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_3" value="large">
      <label for="size_3">Large</label>
    </p>
  </fieldset>
</form>

8: 表单原生部件的通用属性

`autofocus`	(false)	这个布尔属性允许您指定当页面加载时元素应该自动具有输入焦点，除非用户覆盖它，例如通过键入不同的控件。文档中只有一个与表单相关的元素可以指定这个属性。
`disabled`	(false)	这个布尔属性表示用户不能与元素交互。如果没有指定这个属性，元素将从包含的元素继承它的设置，例如`<fieldset>`;如果没有包含`disabled`属性集的元素，那么就启用了元素。
`form`		小部件与之相关联的表单元素。属性值必需是同个文档中的`<form>` 属性的 `id`属性。理论上，它允许您在`<form>`元素之外设置一个表单小部件。然而，在实践中，没有任何支持该特性的浏览器。
`name`		元素的名称;这是用于表单数据提交的。
`value`		元素的初始值。

9:input标签

1）善用input标签的type属性！

input标签的type属性已经指明了该输入域的内容类型，自带格式校验！

最常见的：电话输入域、email输入、url输入等等。

10：select标签

1）默认选中项：使用selected属性在所需的<option>元素上设置选择框的默认值。

2）选项分组：<option>元素也可以嵌套在<optgroup>元素中，以创建视觉相关的选项组。

3）多选：将multiple属性添加到<select>元素，您可以允许用户通过操作系统提供的默认机制来选择几个值。

11:单选按钮

1）几个单选按钮可以连接在一起。如果它们的name属性共享相同的值，那么它们将被认为属于同一组的按钮。同一组中只有一个按钮可以同时被选；这意味着当其中一个被选中时，所有其他的都将自动未选中。

12:高级input部件

通过type属性即可使用各种高级部件！例如：数字、滑块、日期选择器、本地时间、年月日星期、拾色器、文件上传、隐藏内容、进度条等。

13：仪表盘(米尺)部件（在Internet Explorer中没有支持，但是其他浏览器支持它）

<meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>

如果当前值位于该范围的优先部分，则该条是绿色的。
如果当前值位于该范围的平均部分，则该条是黄色的。
如果当前值处于最糟糕的范围，则该条是红色的。

14:表单数据提交

1）action的URL

可以指定使用HTTPS(安全HTTP)协议的URL。当这样做时，数据将与请求的其余部分一起加密，即使表单本身是托管在使用HTTP访问的不安全页面上。

另一方面，如果表单是在安全页面上托管的，但是您指定了一个不安全的HTTP URL，它带有action属性，所有的浏览器都会在每次尝试发送数据时向用户显示一个安全警告，因为数据不会被加密。

2）method

如果您需要发送一个密码(或其他敏感数据)，永远不要使用GET方法否则数据会在URL栏中显示，这将非常不安全。
如果您需要发送大量的数据，那么POST方法是首选的，因为一些浏览器限制了URL的大小。此外，许多服务器限制它们接受的URL的长度。

3）发送文件

由于HTTP是一种文本协议，所以处理文件等二进制数据有特殊的要求。

如果你想要发送文件，你需要额外的三个步骤：

将method属性设置为POST，因为文件内容不能放入URL参数中。
将enctype的值设置为multipart/form-data，因为数据将被分成多个部分，每个文件分别对应一个文件以及表单正文中包含的文本数据(如果文本也输入到表单中)。
包含一个或多个File picker小部件，允许用户选择将要上传的文件。

15:Web安全

1）web安全策略

内容安全策略(CSP):白名单的机制对网站加载或执行的资源起作用，通过 HTTP 头信息或者 meta 元素定义网站只接受我们指定的请求资源。

同源策略：同源是指域名，协议，端口相同。执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。

2）XSS 、CSRF、SSRF

跨站脚本攻击(XSS)：XSS允许攻击者将客户端脚本注入到其他用户查看的Web页面中。攻击者可以使用跨站点脚本攻击的漏洞来绕过诸如同源策略之类的访问控制。

跨站请求伪造(CSRF）：CSRF攻击类似于XSS攻击，向Web页面中注入客户端脚本。但它们的目标是不同的，CSRF攻击者试图升级到特权用户(比如站点管理员)的权限，以执行他们不应该执行的操作。

【XSS攻击利用用户对web站点的信任，而CSRF攻击则利用网站为其用户提供的信任。】

服务器端请求伪造(SSRF)：由攻击者构造形成由服务器端发起请求的一个安全漏洞。SSRF攻击的目标是从外网无法访问的内部系统(正是因为它是由服务端发起的，所以它能够请求到与它相连而与外网隔离的内部系统)。

SSRF形成的原因大都是由于服务端提供了从其他服务器应用获取数据的功能且没有对目标地址做过滤与限制。

如何防御：
1.过滤返回信息，验证远程服务器对请求的响应。如果web应用是去获取某一种类型的文件。那么在把返回结果展示给用户之前先验证返回的信息是否符合标准。
2.统一错误信息，避免用户可以根据错误信息来判断远程服务器的端口状态。
3.限制请求的端口为http常用的端口，比如，80，443，8080，8090
4.黑名单内网ip。避免应用被用来获取内网数据，攻击内网。
5.禁用不需要的协议。仅仅允许http和https请求。可以防止类似于file://, gopher://, ftp://等引起的问题。

3）SQL 注入

试图在目标web站点使用的数据库上执行操作的攻击类型。

4）HTTP头注入和电子邮件注入

基于表单上用户的数据输入构建HTTP头部或电子邮件时，就会出现这种类型的攻击。

5）表单安全原则：永远不要相信你的用户

所有到达服务器的数据都必须经过检查和消毒。

有潜在危险的字符转义。
限制输入的数据量，只允许有必要的数据。
沙箱上传文件(将它们存储在不同的服务器上，只允许通过不同的子域访问文件，或者通过完全不同的域名访问文件更好)。

16:表单数据校验

1）客户端校验

JavaScript 校验，这是可以完全自定义的实现方式；
HTML5 内置的校验，这不需要 JavaScript ，而且性能更好，但是不能自定义校验过程。

2）服务器端校验则是发生在浏览器提交数据并被服务器端程序接收之后 —— 通常服务器端校验都是发生在将数据写入数据库之前，如果数据有错误，则会直接从服务器端返回错误消息，并且告诉浏览器端发生错误的具体位置和原因。

3）使用H5的表单数据校验属性

1.最简单的HTML5验证功能是 required属性 — 如果要使输入成为必需的，则可以使用此属性标记元素。

2. 使用pattern 属性-它们是理想的表单验证器 (以及 JavaScript 中其它许多的用途)，通过正则表达式校验输入。

3.限制输入长度-所有文本框 (<input> 或 <textarea>) 可以强制使用minlength 和 maxlength 属性. 如果值小于该字段 minlength 的值或大于 maxlength 值则无效.

4）使用H5内建的校验API

`validationMessage`	一个本地化消息，描述元素不满足验证条件时（如果有的话）的文本信息。如果元素无需验证（`willValidate` 为 `false`），或元素的值满足验证条件时，为空字符串。
`validity`	一个 `ValidityState` 对象，描述元素的验证状态。
`validity.customError`	如果元素设置了自定义错误，返回 `true` ；否则返回`false`。
`validity.patternMismatch`	如果元素的值不匹配所设置的正则表达式，返回 `true`，否则返回 `false`。当此属性为 `true` 时，元素将命中 `:invalid` CSS 伪类。
`validity.rangeOverflow`	如果元素的值高于所设置的最大值，返回 `true`，否则返回 `false`。当此属性为 `true` 时，元素将命中 `:invalid` CSS 伪类。
`validity.rangeUnderflow`	如果元素的值低于所设置的最小值，返回 `true`，否则返回 `false`。当此属性为 `true` 时，元素将命中 `:invalid` CSS 伪类。
`validity.stepMismatch`	如果元素的值不符合 step 属性的规则，返回 `true`，否则返回 `false`。当此属性为 `true` 时，元素将命中 `:invalid` CSS 伪类。
`validity.tooLong`	如果元素的值超过所设置的最大长度，返回 `true`，否则返回 `false`。当此属性为 `true` 时，元素将命中 `:invalid` CSS 伪类。
`validity.typeMismatch`	如果元素的值出现语法错误，返回 `true`，否则返回 `false`。当此属性为 `true` 时，元素将命中 `:invalid` CSS 伪类。
`validity.valid`	如果元素的值不存在验证问题，返回 `true`，否则返回 `false`。当此属性为 `true` 时，元素将命中 `:valid` CSS 伪类，否则命中 `:invalid` CSS 伪类。
`validity.valueMissing`	如果元素设置了 required 属性且值为空，返回 `true`，否则返回 `false`。当此属性为 true 时，元素将命中 `:invalid` CSS 伪类。
`willValidate`	如果元素在表单提交时将被验证，返回 `true`，否则返回 `false`。

`checkValidity()`	如果元素的值不存在验证问题，返回 `true`，否则返回 `false`。如果元素验证失败，此方法会触发`invalid`事件。
`setCustomValidity(message)`	为元素添加一个自定义的错误消息；如果设置了自定义错误消息，则该元素被认为是无效的，并显示指定的错误。这允许你使用 JavaScript 代码来建立验证失败，而不是用标准约束验证 API 所提供的。在报告问题时，将向用户显示自定义消息。如果参数为空，则清空自定义错误。

5）使用伪类进行校验反馈

当一个元素校验通过时：

该元素将可以通过 CSS 伪类 :valid 进行特殊的样式化；
如果用户尝试提交表单，如果没有其它的控制来阻止该操作（比如JavaScript即可阻止提交），那么该表单的数据会被提交。

如果一个元素未校验通过：

该元素将可以通过 CSS 伪类 :invalid 进行样式化；
如果用户尝试提交表单，浏览器会展示出错误消息，并停止表单的提交。

17:基于原生部件实现自定义的风格

1）设计：要改造哪种部件、有哪些状态、各个状态分别是什么效果

2）创建：定义语义化的html元素

3）改造：通过css实现各个状态下的样式

4）生动：通过js使部件添加更多响应与特性

18:使用js发送表单数据——Ajax

1）使用 XMLHttpRequest 和 the FormData object（表单对象）

使用 FormData 对象来构建用于传输的表单数据，然后通过ajax发送数据。

function sendData(data) {
  var XHR = new XMLHttpRequest();
  var FD  = new FormData();

  // 把我们的数据添加到这个FormData对象中
  for(name in data) {
    FD.append(name, data[name]);//注：可以创建一个form对象，直接把一个表单的输入数据作为参数绑定到formData
  }

  // 定义数据成功发送并返回后执行的操作
  XHR.addEventListener('load', function(event) {
    alert('Yeah! Data sent and response loaded.');
  });

  // 定义发生错误时执行的操作
  XHR.addEventListener('error', function(event) {
    alert('Oups! Something goes wrong.');
  });

  // 设置请求地址和方法
  XHR.open('POST', 'http://ucommbieber.unl.edu/CORS/cors.php');

  // 发送这个formData对象,HTTP请求头会自动设置
  XHR.send(FD);
}

【使用XMLHttpRequest会受到同源策略的影响】

2）发送文件

使用了FileReader API来访问二进制数据；调用append方法将你需要发送的File对象或者Blob对象添加到formData；然后发送这个请求。

// 我们在页面加载时初始化我们的脚本.
window.addEventListener('load', function () {

  // 这些变量用于存储表单数据
  var text = document.getElementById("i1");
  var file = {
        dom    : document.getElementById("i2"),
        binary : null
      };
 
  // 使用 FileReader API 获取文件内容
  var reader = new FileReader();

  // 因为 FileReader 是异步的, 会在完成读取文件时存储结果
  reader.addEventListener("load", function () {
    file.binary = reader.result;
  });

  // 页面加载时, 如果一个文件已经被选择, 那么读取该文件.
  if(file.dom.files[0]) {
    reader.readAsBinaryString(file.dom.files[0]);
  }

  // 如果没有，一旦用户选择了它，就读取文件。
  file.dom.addEventListener("change", function () {
    if(reader.readyState === FileReader.LOADING) {
      reader.abort();
    }
    
    reader.readAsBinaryString(file.dom.files[0]);
  });

  // 在我们的主函数中发送数据
  function sendData() {
    // 如果存在被选择的文件，等待它读取完成
    // 如果没有, 延迟函数的执行
    if(!file.binary && file.dom.files.length > 0) {
      setTimeout(sendData, 10);
      return;
    }

    // 要构建我们的多部分表单数据请求,
    // 我们需要一个XMLHttpRequest 实例
    var XHR = new XMLHttpRequest();

    // 我们需要一个分隔符来定义请求的每一部分。
    var boundary = "blob";

    // 将我们的请求主体存储于一个字符串中
    var data = "";

    // 所以，如果用户已经选择了一个文件
    if (file.dom.files[0]) {
      // 在请求体中开始新的一部分
      data += "--" + boundary + "\r\n";

      // 把它描述成表单数据
      data += 'content-disposition: form-data; '
      // 定义表单数据的名称
            + 'name="'         + file.dom.name          + '"; '
      // 提供文件的真实名字
            + 'filename="'     + file.dom.files[0].name + '"\r\n';
      // 和文件的MIME类型
      data += 'Content-Type: ' + file.dom.files[0].type + '\r\n';

      // 元数据和数据之间有一条空行。
      data += '\r\n';
      
      // 添加二进制数据到请求体中
      data += file.binary + '\r\n';
    }

    // 文本数据是简单的
    // 开始一个新的部分在请求体中
    data += "--" + boundary + "\r\n";

    // 说它是表单数据，并命名它
    data += 'content-disposition: form-data; name="' + text.name + '"\r\n';
    // 元数据和数据之间有一条空行。
    data += '\r\n';

    // 添加文本数据到请求体中
    data += text.value + "\r\n";

    // 一旦完成，关闭请求体
    data += "--" + boundary + "--";

    // 定义成功提交数据执行的语句
    XHR.addEventListener('load', function(event) {
      alert('✌！数据已发送且响应已加载。');
    });

    // 定义发生错误时做的事
    XHR.addEventListener('error', function(event) {
      alert('哎呀！出了问题。');
    });

    // 建立请求
    XHR.open('POST', 'https://example.com/cors.php');

    // 添加需要的HTTP报头来处理多部分表单数据POST请求
    XHR.setRequestHeader('Content-Type','multipart/form-data; boundary=' + boundary);

    // 最后，发送数据。
    XHR.send(data);
  }

  // 访问表单…
  var form = document.getElementById("myForm");

  // ……接管提交事件
  form.addEventListener('submit', function (event) {
    event.preventDefault();
    sendData();
  });
});

使用formData发送文件

19:旧浏览器的表单兼容性问题

1）在许多情况下，HTML表单是否支持CSS是最大的问题

只需要检查你想用的元素或接口是否支持CSS即可。

2）优雅地降级(Graceful degradation)是web开发者最好的朋友

通过同时支持多种浏览器来构建优秀内容：如果一个浏览器不能理解高级特性，那么就执行后面的替代方案。