MDN学习笔记

------------------------------web入门学习开始--------------------------------------------------

1、为你的设计画出草图（可以使用原型设计工具xiaopiu     https://www.xiaopiu.com）

2、很多计算机，特别是 Web 服务器，是对大小写敏感的。所以为文件夹和文件命名时最好都保持一致（最好都是小写）

3、文件和文件夹命名时，中间最好不要留有空格，因为浏览器，Web服务器，还有编程语言不能一致处理空格。需要加空格的地方可以使用连接符‘-’来代替，也可以使用下划线‘_’，但是使用连接符会更好。谷歌搜索引擎把连字符当作一个词的分隔符， 但不会以这种方式处理下划线。

4、基于这些原因，至少在你知道自己在做什么之前，最好养成在文件夹和文件名中使用小写，并且使用短横线而不是空格来分隔的习惯。这样可以避免你在以后碰到一些问题。

5、vscode中新建css文件后，系统报错，内容：[Error - 9:48:02 AM] [object Object]，百度搜索无果，不知道什么原因

6、将body的宽度设置为定值，并将其设为水平居中，可以得到一个居中的页面

7、如何利用chromeF12调试功能调试js代码？ 在console控制台输入js代码（换行用shift+enter）然后按回车查看运行结果

8、获得标签属性的时候 .操作和getAttribute函数获取的值不一样，当获取图片的src属性值的时候.操作获取的是绝对路径（file:///C:/Users/liluyuan/Desktop/mdn/test-site/images/firefox.jpg），而getAttribute取得的是相对路径（images/firefox.jpg）

9、我们可以将网站提交到github上并可以预览网页，这是调试网页和交流网页的很好的手段

------------------------------web入门学习结束--------------------------------------------------

------------------------------HTML学习开始-----------------------------------------------------

1、HTML语言不区分大小写，不过从最佳实践来看，最好都使用小写

2、<em></em>标签，使得被强调的标签，默认效果为倾斜

3、<strong></strong>标签，意味着包含在内的文本非常重要，默认效果为加粗

4、一个以block形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。

5、空元素：没有结束标签的标签，用于标记此处插入一个东西（比如图像img标签）

6、元素的属性包括属性名和属性值，中间用空格隔开，属性值有的时候不用引号引起来也会正确显示，但是我们强烈建议所有的属性值都用引号包裹，这样可以避免许多问题。引号使用单引号和双引号根据自己的喜好来定，不过要配对，不要搞混了，如果在引号里面的内容中又出现了不同的引号（比如单引号里面出现双引号，或者双引号里面出现了单引号，可以直接书写，没问题），但是如果引号里面的内容中出现了相同的引号，必须使用实体引用（单引号是&apos;双引号是&quot;）

7、根据目前我的经验，HTML元素的属性值最好使用双引号括起来，js代码中的字符串引用最好使用单引号括起来，而且自己编程的风格要尽量保持一致，不要经常更换，避免引起不必要的麻烦

-------------head中包含的内容-------------------

8、titile元素：title的作用：出现在页面的标题位置；收藏时作为默认推荐收藏标题；被搜索引擎搜索

9、meta元素：元数据就是描述数据的数据。

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

 ---<meta name="author" content="liluyuan">：指定该网页的作者信息

 ---<meat name="description" content="This web is my secend page of practise HTML learning.">：定义该网页的描述信息

 ---许多 <meta> 特性已经不再使用. 例如, keyword <meta> 元素— 提供关键词给搜索引擎，根据不同的搜索词，查找到相关的网站 — 被搜索引擎忽略了， 因为作弊者填充了大量关键词到keyword, 错误地引导搜索结果。

 10、自定义图标（该图标显示在标题的左侧，以更加明显的标识网站）

 ---在index页面同目录下准备好图标

 ---然后利用link标签，语法如下：

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

11、引入层叠样式表（略）

12 、引入外部js文件：<script src="*******.js"></script>

 ----script标签放在哪里比较好？

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

  ----总结：推荐将所有的css样式表文件和js代码写到外部文件然后分别通过link和script标签引入。如果引入语句都放在head标签中，建议先引入样式表再引入js文件

  ----关于script标签放置在什么位置的问题，目前没有一个明确的答案。大型网站放置script的位置也比较混乱。一般会建议放置在</body>之前以不影响页面加载。如果非要放置head标签中，建议加入defer属性或者a'sync属性以避免阻塞页面加载。

-----------------------HTML文字基础--------------------------------

13、文本编辑的最佳实践

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

14、HTML标签更重要的是他们的语义（比如h1代表一级标题，这个语义会被搜索引擎和其他程序所使用），至于他们的外形是什么样子，并没有非常重要，而且通过CSS可以改变他们的外形。

  ---em标签意在强调（emphasis）的缩写，并默认获得倾斜效果加重强调意味，倾斜效果可通过css样式修改

  ---strong标签语义是非常重要，并默认获得加粗效果加重意味。

  ---表象元素（如i、b、u等）没有语义，仅仅为取得样式效果，是被淘汰的元素，因此不应该再被使用，而应该用css替代他们。

-------------超链接-----------------------------------

15、超链接的一些最佳实践

  ---用清晰的链接措辞，避免使用，点击这里，或者links to等作为超链接文本，原因是缺乏阅读性，也不容易被搜索引擎搜索到

  ---保持链接文本尽可能短

  ---尽量在超链接上加下划线，因为人们已经习惯了这一特点（也未必尽然，只要让用户明确知晓这个文本是超链接即可）

  ---尽可能使用相对链接

  ---链接到非HTML资源时要有清晰的指示（比如pdf，jpg，下载文件等等）

  ---在下载链接时使用下载属性，比如：

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

--------------------------高级文本排版------------------------------

16、描述列表（dl)

 ---dl：description list 包含一下项目 ：dt（description term）和dd（description description）

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

 ---q：行内引用，浏览器默认将其作为普通文本放入引号内表示引用------没学会

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

 ---abbr：缩略语

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

 ---address：地址

<address>
  <p>Page written by <a href="../authors/chris-mills/">Chris Mills</a>.</p>
</address>

  ---sup、sub：上标、下标

  ---展示计算机代码：<code>、<pre>、<var>、<kbd>、<samp>

  ---time：时间日期

----------------------------------文档与网站架构---------------------------------

17、下属标签均为html5新增的标签，用时要注意兼容性问题

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

 ---没有特定语义的装饰元素<div>和<span>

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

----------------------调试HTML代码错误---------------------------

----------------------HTML中的图片---------------------------------

18、链接：如果你把图片嵌套在<a>标签里，来把图片变成链接，那你还必须提供无障碍的链接文本。在这种情况下，你可以写在同一个<a>元素里，或者写在图片的alt属性里，随你喜欢。

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

20、使用 HTML5 的 <figure> 和 <figcaption> 元素，它正是为此而被创造出来的：为图片提供一个语义容器，在标题和图片之间建立清晰的关联。

注意 <figure> 里不一定要是一张图片，只要是一个这样的独立内容单元：

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

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

21、CSS在网页中添加图片相对于 HTML 中插入图片的做法，可以更好地控制图片和设置图片的位置，那么为什么我们还要使用 HTML 图片呢？如上所述，CSS 背景图片只是为了装饰 — 如果你只是想要在你的页面上添加一些漂亮的东西，来提升视觉效果，那 CSS 的做法是可以的。但是这样插入的图片完全没有语义上的意义，它们不能有任何备选文本，也不能被屏幕阅读器识别。这就是 HTML 图片有用的地方了。

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

-----------------------------音频和视频内容-----------------------------

22、video标签可以为HTML添加视频

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

 

现在我们将 src 属性从 <video> 标签中移除，转而将它放在几个单独的标签 <source> 当中。在这个例子当中，浏览器将会检查 <source> 标签，并且播放第一个与其自身 codec 向匹配的媒体。你的视频应当包括 WebM 和 MP4 两种格式，这两种在目前已经足够支持大多数平台和浏览器。

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

其他属性：

<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

这个属性被用来缓冲较大的文件，有3个值可选：

• "none" ：不缓冲
• "auto" ：页面加载后缓存媒体文件
• "metadata" ：仅缓冲文件的元数据

23、audio标签可以嵌入一段音频，和视频的方式几乎相同，除了没有width、height和poster属性

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

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

24、框架集（frameset）技术已经落后淘汰，目前几乎无人使用了

25、<object>、<embed>技术也被淘汰了

26、目前比较流行的嵌入技术有：iframe、canvas、video、audio等等

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

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

 ---安全隐患：

浏览器制造商和Web开发人员了解到网络上的坏人（通常被称为黑客，或更准确地说是破解者），如果他们试图恶意修改您的网页或欺骗人们进行不想做的事情时常通过iframe作为共同目标来攻击（官方术语：攻击向量），例如显示用户名和密码等敏感信息。

一个快速的例子 — 尝试在浏览器中加载上面的例子 - 你也可以在Github上找到它（参见源代码）。你将不会看到任何内容，但如果你点击浏览器开发者工具中的控制台，你会看到一条消息，告诉你为什么没有显示内容。在Firefox中，您会被告知：“X-Frame-Options拒绝加载https://developer.mozilla.org/en-US/docs/Glossary”。这是因为构建MDN的开发人员已经在网站页面的服务器上设置了一个不允许被嵌入到<iframe>的设置（请参阅配置CSP指令）这是有必要的 — 整个MDN页面被嵌入在其他页面中没有多大意义，除非您想要将其嵌入到您的网站上并将其声称为自己的内容，或尝试通过单击劫持来窃取数据，这都是非常糟糕的事情。此外，如果每个人都这样做，所有额外的带宽将花费Mozilla很多资金。

HTTPS是HTTP的加密版本。您应该尽可能使用HTTPS为您的网站提供服务：

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

始终使用sandbox属性

你想给攻击者尽可能少的机会在你的网站上做坏事，那么你应该只给嵌入式内容工作所需的权限。当然，这也适用于你自己的内容。一个代码可以适当使用或用于测试的容器，但不能对其他代码库（意外或恶意）造成任何损害称为沙盒。

未沙盒化(Unsandboxed)内容可以做得太多（执行JavaScript，提交表单，弹出窗口等）默认情况下，您应该使用没有参数的sandbox属性来强制执行所有可用的限制，如我们前面的示例所示。

如果绝对需要，您可以逐个添加权限（sandbox=""属性值内） - 请参阅sandbox所有可用选项的参考条目。其中重要的一点是，你永远不应该同时添加allow-scripts和allow-same-origin到你的sandbox属性中-在这种情况下，嵌入的内容可以绕过，从执行脚本停止网站同源安全策略，并使用JavaScript来关闭完全沙盒。

------------------------------在HTML中嵌入矢量图（SVG）-----------------------

在网上，你会和两种类型的图片打交道 — 位图和矢量图:

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

SVG 是用于描述矢量图像的XML语言。 它基本上是像HTML一样的标记，除了你有许多不同的元素来定义你想要出现在图像中的形状，以及你想要应用于这些形状的效果。 SVG用于标记图形，而不是内容。 非常简单，你有一些元素来创建简单图形，如<circle> 和<rect>。更高级的SVG功能包括 <feColorMatrix>（使用变换矩阵转换颜色）<animate> （矢量图形的动画部分）和 <mask>（在图像顶部应用蒙版）

从上面的例子可以看出，SVG很容易手工编码。 是的，您可以在文本编辑器中手动编写简单的SVG，但是对于复杂的图像，这很快就开始变得非常困难。 为了创建SVG图像，大多数人使用矢量图形编辑器，如 Inkscape 或 Illustrator。 这些软件包允许您使用各种图形工具创建各种插图，并创建照片的近似值（例如Inkscape的跟踪位图功能）。

SVG除了迄今为止所描述的以外还有其他优点：

• 矢量图像中的文本仍然可访问（这也有利于 SEO)）。
• SVG 可以很好地适应样式/脚本，因为图像的每个组件都是可以通过CSS或通过JavaScript编写的样式的元素。

那么为什么会有人想使用光栅图形而不是SVG？ 其实 SVG 确实有一些缺点：

• SVG非常容易变得复杂，这意味着文件大小会增加; 复杂的SVG也会在浏览器中占用很长的处理时间。
• SVG可能比栅格图像更难创建，具体取决于您尝试创建哪种图像。
• 旧版浏览器不支持SVG，因此如果您需要在网站上支持旧版本的 IE，则可能不适合（SVG从IE9开始得到支持）。

 ---将SVG添加到页面

   ---使用img标签，像引入jpg或者png图片一样引入svg图片。优点是方便快捷，缺点是不能用外部css与svg文件交互

   ---使用svg标签，将svg代码直接写在svg标签中。优点是交互方便（与css),缺点是增加HTML文件复杂性。

   ---使用iframe标签

 

-----------------------------------自适应图片--------------------------------------

-----------------------------------form表单元素-------------------------------------

form表单元素通用标签：

---autofocus：form中一次只有一个元素可以指定这个属性；

---disabled：表示该元素是否可用；

---form：表示该元素指定与之关联的form表单；理论上可以在form外部通过这种方式包含某个元素，但实际上没有浏览器支持它；

---name：用于表单数据提交后，后台获取数据；

---value：元素的初始值。

form表单部件详解：

---文本输入域（input）：HTML表单文本字段是简单的纯文本输入控件。 这意味着您不能使用它们执行富文本编辑(粗体、斜体等)。

所有文本域都有一些通用规范：

• 它们可以被标记为 readonly (用户不能修改输入值)甚至是 disabled (输入值永远不会与表单数据的其余部分一起发送)。
• 它们可以有一个 placeholder; 这是文本输入框中出现的文本，用来简略描述输入框的目的。
• 它们可以被限制在size (框的物理尺寸) 和 长度 (可以输入的最大字符数)。
• 如果浏览器支持的话，他们可以从拼写检查中获益。

   ---单行文本域：<input type="text">（如果不指定type，默认值就是text）（如果指定的type浏览器不支持，text就是备用的）

       HTML5通过为type属性增加特殊值增强了基本单行文本域。这些值仍然将<input>元素转换为单行文本域，但它们为域（字段）添加了一些额外的约束和特性。这些特殊值有：email（电子邮件格式约束）（multiple属性允许输入多个电子邮箱地址，中间用逗号隔开）、password（密码格式，文本用*代替以保密）（请记住，这只是一个用户界面特性;除非你安全地提交你的表单，否则它会以明文发送，这不利于安全——恶意的一方可能会截获你的数据，窃取你的密码、信用卡信息，或者你提交的其他任何东西。保护用户不受此影响的最佳方式是在安全连接上托管任何涉及表单的页面(例如:https://……地址)，使得数据在发送之前就已加密。现代浏览器认识到在不安全的连接上发送表单数据所带来的安全影响，并且已经实现了警告，以阻止用户使用不安全的表单）、search（搜索格式）（文本域和搜索域之间的主要区别是浏览器的样式——通常，搜索字段以圆角和/或给定一个“x”来清除输入的值。然而，还有另外一个值得注意的特性:它们的值可以自动保存到同一站点上的多个页面上自动完成）、tel（电话号码域，这个域没有任何格式的约束，仅仅带来语义的区分）、url（表示要输入一个域名网址，并有相应的格式约束）

  ---多行文本域：<textarea></textarea>

    *可以通过css设置resize:none;关闭多行文本框的自由调整大小能力；

    *可以通过添加rows和cols属性指定多行文本框的行数和列数。

    *可以通过wrap属性指定文本内容提交到后台的时候包含不包含换行符（soft：不包含换行符；hard：包含换行符）

    *多行文本框只接受文本内容，所以包含在多行文本域之间的内容只能是文本内容，若输入标签，将以纯文本内容原样输出

  ---下拉内容：

       <select><option></option></select>：selected属性可以写在option中用于指定select的默认选中值，optgroup用于分组选项并取得更良好的显示效果。如果一个<option>元素设置了value属性，那么当提交表单时该属性的值就会被发送。如果忽略了value属性，则使用<option>元素的内容作为选择框的值。

        <select mulitple><option></option></select>：多选框。默认情况下，选择框只允许用户选择一个值。通过将multiple属性添加到<select>元素，您可以允许用户通过操作系统提供的默认机制来选择几个值。 (如， 同时按下 Cmd/Ctrl 并点击多个值).在多个选项选择框的情况下，选择框不再显示值为下拉内容——相反，它们都显示在一个列表中。

         自动补全输入框：可以使用<datalist><option></option></datalist>来为某个单行文本框给出提示文本，需要注意datalist兼容性并不是很好。

         数据列表支持和后备

<datalist>元素是HTML表单的最新补充，因此浏览器的支持比我们之前看到的要少一些。最值得注意的是，它在10以下的IE版本中不受支持，Safari在写作时仍然不支持它。

为了处理这个问题，这里有一个小技巧，可以为这些浏览器提供一个不错的备用：

<label for="myFruit">What is your favorite fruit? (With fallback)</label>
<input type="text" id="myFruit" name="fruit" list="fruitList">
    
<datalist id="fruitList">
  <label for="suggestion">or pick a fruit</label>
  <select id="suggestion" name="altFruit">
    <option>Apple</option>
    <option>Banana</option>
    <option>Blackberry</option>
    <option>Blueberry</option>
    <option>Lemon</option>
    <option>Lychee</option>
    <option>Peach</option>
    <option>Pear</option>
  </select>
</datalist>

支持<datalist>元素的浏览器将忽略所有不是<option>元素的元素，并按照预期工作。另一方面，不支持<datalist>元素的浏览器将显示标签和选择框。当然，还有其他方法可以处理<datalist> 元素的不足，但这是最简单的(其他方法往往需要JavaScript)。

   ---单选复选

值得注意的是，这些小部件与其他表单小部件不一样。对于大多数表单部件，一旦表单提交，所有具有name属性的小部件都会被发送，即使没有任何值被填。对于可选中项，只有在勾选时才发送它们的值。如果他们没有被勾选，就不会发送任何东西，甚至连他们的名字也没有。（这里是个大坑，如果你想完整获取复选框的复选内容，就要想办法克服这个特点，即没选中的什么也不发送）

   ---按钮

从技术上讲，使用<button>元素或<input>元素定义的按钮几乎没有区别。唯一值得注意的区别是按钮本身的标签。在<input>元素中，标签只能是字符数据，而在<button>元素中，标签可以是HTML，因此可以相应地进行样式化。

   ---高级表单部件

      ---数字：文本框里只能输入数字 

<input type="number" name="age" id="age" min="1" max="10" step="2">

      ---滑块：另一种选择数字的方法是使用滑块。从视觉上讲，滑块比文本字段更不准确，因此它们被用来选择一个确切值并不重要的数字。滑块是通过把<input>元素的type属性值设置为range来创建的。正确配置滑块是很重要的；为了达到这个目的，我们强烈建议您设置min、max和step属性。

<input type="range" name="beans" id="beans" min="0" max="500" step="10">

 滑块的一个问题是，它们不提供任何形式的视觉反馈，以了解当前的值是什么。您需要使用JavaScript来添加这一点，但这相对来说比较容易。在本例中，我们添加了一个空的<span>元素，其中我们将写入滑块的当前值，并在更改时更新它。

      ---日期选择器：

        ---datetime-local：没有任何特定时区信息，显示年月日 时分

        ---month：显示年份和月份

        ---time：显示几点几分

        ---week：显示年和第几周

警告——日期和时间窗口小部件仍然很不受支持。目前，Chrome、Edge和Opera都支持它们，但IE浏览器没有支持，Firefox和Safari对这些都没有太大的支持。（吐槽：firefox支持不够好也有脸在mdn里说！）

     ---拾色器：颜色总是有点难处理。有很多方式来表达它们:RGB值(十进制或十六进制)、HSL值、关键字等等。颜色小部件允许用户在文本和可视的方式中选择颜色。

警告——颜色小部件支持它目前不是很好。IE中没有支持，Safari目前也不支持它。其他主要的浏览器都支持它。

     ---其他小部件：

         ---file：文件选择器：如果使用图像按钮来提交表单，这个小部件不会提交它的值；相反，在图像上单击的X和Y坐标是被提交的(坐标是相对于图像的，这意味着图像的左上角表示坐标0，0)，坐标被发送为两个键/值对：

• X值键是name属性的值，后面是字符串“.x”。
• Y值键是name属性的值，后面是字符串“.y”。

     ---仪表和进度条：

         ---进度条：<progress max="100" value="80"></progress>

         ---仪表：

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

 ---------------------------------发送表单数据--------------------------------

form标签：action属性：定义form标签提交的目的地（地址）。使用https会更加确保数据的安全（数据传送的时候都会被加密）

method属性：该属性定义了如何发送数据。HTTP协议提供了几种执行请求的方法；HTML表单数据可以通过许多不同的数据传输，其中最常见的是GET方法和POST方法。为了理解这两种方法之间的区别，让我们回过头来看看HTTP是如何工作的。
每当您想要访问Web上的资源时，浏览器都会向URL发送一个请求。HTTP请求由两个部分组成：一个包含关于浏览器功能的全局元数据集的数据头，一个包含服务器处理特定请求所需信息的主体。

GET方法是浏览器使用的方法，请求服务器返回给定的资源:“嘿，服务器，我想要得到这个资源。在这种情况下，浏览器发送一个空的主体。因为主体是空的，如果使用该方法发送一个表单，那么发送到服务器的数据将被追加到URL。

<form action="http://foo.com" method="get">
  <div>
    <label for="say">What greeting do you want to say?</label>
    <input name="say" id="say" value="Hi">
  </div>
  <div>
    <label for="to">Who do you want to say it to?</label>
    <input name="to" id="to" value="Mom">
  </div>
  <div>
    <button>Send my greetings</button>
  </div>
</form>

提交请求时，地址会变为：http://foo.com/?say=Hi&to=Mom 

POST方法略有不同。这是浏览器在请求响应时使用的一种方法，它需要考虑到HTTP请求体中提供的数据:“嘿，服务器，看一下这些数据，然后给我回一个适当的结果。”如果使用该方法发送表单，则将数据追加到HTTP请求的主体中。

<form action="http://foo.com" method="post">
  <div>
    <label for="say">What greeting do you want to say?</label>
    <input name="say" id="say" value="Hi">
  </div>
  <div>
    <label for="to">Who do you want to say it to?</label>
    <input name="to" value="Mom">
  </div>
  <div>
    <button>Send my greetings</button>
  </div>
</form>

正如我们上面提到的，使用GET请求用户将在他们的URL栏中看到数据，但是使用POST请求用户将不会看到。这一点很重要，有两个原因：

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

   ---常见的安全问题

每次向服务器发送数据时，都需要考虑安全性。到目前为止，HTML表单是最常见的攻击媒介(可能发生攻击的地方)。这些问题从来都不是来自HTML表单本身，它们来自于服务器如何处理数据。

跨站脚本(XSS)和跨站点请求伪造(CSRF)是常见的攻击类型，它们发生在当您将用户发送的数据显示给用户或另一个用户时。

XSS允许攻击者将客户端脚本注入到其他用户查看的Web页面中。攻击者可以使用跨站点脚本攻击的漏洞来绕过诸如同源策略之类的访问控制。这些攻击的影响可能从一个小麻烦到一个重大的安全风险。

CSRF攻击类似于XSS攻击，因为它们以相同的方式攻击——向Web页面中注入客户端脚本——但它们的目标是不同的。CSRF攻击者试图将特权升级到特权用户(比如站点管理员)的权限，以执行他们不应该执行的操作(例如，将数据发送给一个不受信任的用户)。

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

为了防止这些攻击，您应该始终检查用户发送给服务器的数据(如果需要显示)，尽量不要显示用户提供的HTML内容。相反，您应该处理用户提供的数据，这样您就不会逐字地显示它。当今市场上几乎所有的框架都实现了一个最小的过滤器，它可以从任何用户发送的数据中删除HTML<script>、<iframe> 和<object> 元素。这有助于降低风险，但并不一定会消除风险。

SQL 注入是一种试图在目标web站点使用的数据库上执行操作的攻击类型。这通常包括发送一个SQL请求，希望服务器能够执行它（通常，当应用服务器试图存储由用户发送的数据时）。这实际上是攻击网站的主要途径之一。 

其后果可能是可怕的，从数据丢失到通过使用特权升级控制整个网站基础设施的攻击。这是一个非常严重的威胁，您永远不应该存储用户发送的数据，而不执行一些清理工作(例如，在php/mysql基础设施上使用mysql_real_escape_string()。

当您的应用程序基于表单上用户的数据输入构建HTTP头部或电子邮件时，就会出现这种类型的攻击。这些不会直接损害您的服务器或影响您的用户，但是它们是一个更深入的问题，例如会话劫持或网络钓鱼攻击。

这些攻击大多是无声的，并且可以将您的服务器变成僵尸。

那么，你如何应对这些威胁呢?这是一个远远超出本指南的主题，但是有一些规则需要牢记。最重要的原则是:永远不要相信你的用户，包括你自己；即使是一个值得信赖的用户也可能被劫持。

所有到达服务器的数据都必须经过检查和消毒。总是这样。没有例外。

• 有潜在危险的字符转义。应该如何谨慎使用的特定字符取决于所使用的数据的上下文和所使用的服务器平台，但是所有的服务器端语言都有相应的功能。
• 限制输入的数据量，只允许有必要的数据。
• 沙箱上传文件(将它们存储在不同的服务器上，只允许通过不同的子域访问文件，或者通过完全不同的域名访问文件更好)。

如果你遵循这三条规则，你应该避免很多问题，但是如果你想要得到一个有能力的第三方执行的安全检查，这是一个好主意。不要以为你已经看到了所有可能的问题。

如您所见，发送表单数据很容易，但要确保应用程序的安全性是很棘手的。请记住，前端开发人员不是应该定义数据安全模型的人。是的，我们将看到，执行客户端数据验证是可能的，但是服务器不能信任这种验证，因为它无法真正知道客户端到底发生了什么。

-------------------------------------校验表单数据------------------------------------------

在 Web 中，你可能会遇见各种不同的表单验证：

• 客户端验证发生在浏览器端，表单数据被提交之前，这种方式相较于服务器端校验来说，用户体验更好，它能实时的反馈用户的输入校验结果，这种类型的校验可以通过下面这些方式实现：
  • JavaScript 校验，这是可以完全自定义的实现方式；
  • HTML5 内置的校验，这不需要 JavaScript ，而且性能更好，但是不能自定义校验过程。
• 服务器端校验则是发生在浏览器提交数据并被服务器端程序接收之后 —— 通常服务器端校验都是发生在将数据写入数据库之前，如果数据有错误，则会直接从服务器端返回错误消息，并且告诉浏览器端发生错误的具体位置和原因，服务器校验不像浏览器端校验那样有好的用户体验，但是对于服务器端应用来说，它又是必须的 —— 这是你能保证数据正确性的最后一步了，在这之后，数据将被持久化至数据库。当今所有的服务端框架都提供了数据校验与清洗功能（让数据更安全）。

在真实的项目开发过程中，开发者一般都倾向于使用客户端校验与服务器端校验的组合校验方式以更好的保证数据的正确性与安全性。

  ---使用内置表单校验数据

     ---required属性可以使input不能为空

     ---pattern属性可以指定正则表达式以规范化input输入（正则表达式是一个硬骨头，需要专门抽出时间好好学习它）

     注意: 一些 <input> 元素类型不需要pattern 属性进行验证. 指定特定 email 类型 就会使用匹配电子邮件格式的正则表达式来校验(如果有 multiple 属性请用逗号来分割多个邮箱). 进一步来说, 字段 url 类型则会自动校验输入的是否为一个合法的链接.

     注意: 该 <textarea> 元素不支持pattern 属性.

     使用内置表单校验数据的缺点：出现错误时无法自定义提醒样式和内容，样式和内容由浏览器内置，且不同浏览器的样式和内容都不相同。

    自定义这些消息的外观和文本, 你必须使用 JavaScript; 不能使用 HTML 和 CSS 来改变.

  ---使用JavaScript校验数据

如果你想控制原生错误信息的外观和感觉，或者你想处理不支持HTML内置表单验证的浏览器，则必须使用 Javascript。

        ---HTML5用于校验约束的API

        ---不使用内部API进行校验

  ---自定义表单组件（select）