1.网站应该使用什么结构？
在我们创建的任何网站项目中，最常见的是一个主页 HTML 文件和包含图像、样式文件和脚本文件的文件夹。现在让我们来创建这些：
- index.html：这个文件一般会包含主页内容，也就是人们第一次进入网站时看到的文字和图片。使用文本编辑器，创建一个名为index.html的新文件，并将其保存在test-site文件夹内。
- images 文件夹：这个文件夹包含网站上使用的所有图片。在 test-site 文件夹内创建一个名为 images 的文件夹。
- styles 文件夹：这个文件夹包含用于设置内容样式的 CSS 代码（例如，设置文本和背景颜色）。在你的 test-site 文件夹内创建一个名为 styles 的文件夹。
- scripts 文件夹：这个文件夹包含所有用于向网站添加交互功能的 JavaScript 代码（例如，点击时加载数据的按钮）。在 test-site 文件夹内创建一个名为 scripts 的文件夹。
2.文件路径
文件路径的一些通用规则：
- 若引用的目标文件与 HTML 文件同级，只需直接使用文件名，例如：my-image.jpg。
- 要引用子目录中的文件，请在路径前面写上目录名，再加上一个正斜杠。例如：subdirectory/my-image.jpg。
- 若引用的目标文件位于 HTML 文件的上级，需要加上两个点。举个例子，如果 index.html 在 test-site 的一个子文件夹内，而 my-image.jpg 在 test-site 内，你可以使用../my-image.jpg 从 index.html 引用 my-image.jpg。
- 以上方法可以随意组合，比如：../subdirectory/another-subdirectory/my-image.jpg。
3.关于大小写和空格的提示
我们要求你完全用小写字母命名文件夹和文件，没有空格。这是因为：
- 许多计算机，特别是网络服务器，是区分大小写的。因此，假如你把一张图片放在你的网站上 test-site/MyImage.jpg，然后在一个不同的文件中，你试图以 test-site/myimage.jpg 来调用该图片，它可能无法工作。
- 浏览器、网络服务器和编程语言对空格的处理并不一致。例如，如果你在文件名中使用空格，一些系统可能将其视为两个文件名。一些服务器会用“%20”（URL 中空格的字符代码）替换文件名中的区域，导致所有链接被破坏。最好用连字符而不是下划线来分隔单词。对比 my-file.html 与 my_file.html。
简言之，文件名中应使用连字符。谷歌搜索引擎把连字符当作单词的分隔符，但不会识别下划线。基于此，最好在一开始就养成习惯，文件夹和文件名使用小写，用短横线来分隔。这可以避免许多问题。
4.标签大小写
HTML 标签不区分大小写。也就是说，输入标签时既可以使用大写字母也可以使用小写字母。例如，标签 <title> 可以写作 <title>、<TITLE>、<Title>、<TiTlE> 等，也都可以正常工作。不过，从一致性、可读性来说，最好仅使用小写字母。
5.使用单引号还是双引号
在目前为止，本章内容所有的属性都是由双引号来包裹。然而，你也许在一些 HTML 中也见过单引号。这只是风格的问题，你可以从中选择一个你喜欢的。以下两种情况都可以：
<a href="https://www.example.com">示例站点链接</a><a href='https://www.example.com'>示例站点链接</a>但应该注意单引号和双引号不能在一个属性值里面混用。下面的语法是错误的：
<a href="https://www.example.com'>示例站点链接</a>在一个 HTML 中已使用一种引号，你可以在此引号中嵌套另外一种引号：
<a href="https://www.example.com"title="你觉得'好玩吗'？">示例站点链接</a>如果你想将英文引号（单引号或双引号）当作文本显示在 html 中，你就必须使用 HTML 实体引用。像这样的代码就会破坏显示：
<a href='https://www.example.com'title='Isn'tthisfun?'>示例站点链接</a>要这样做：
<a href='https://www.example.com' title='Isn't this fun?'>示例站点链接</a>6.HTML中的空格
无论你在 HTML 元素的内容中使用多少空格（包括一个或多个空白字符或换行），当渲染这些代码的时候，HTML 解释器会将连续出现的空白字符减少为一个单独的空格符。
如果你的代码有很好的格式化，就会更容易理解你的代码中发生了什么。在我们的HTML中，每个嵌套元素都比它所在的元素多缩进了两个空格。你可以选择格式化的风格（例如，每一级缩进多少个空格），但你至少应该考虑格式化。
7.meta 元数据
<meta charset="utf-8"/>这个元素简单的指定了文档的字符编码——在这个文档中被允许使用的字符集。utf-8 是一个通用的字符集，它包含了任何人类语言中的大部分的字符，意味着该 web 页面可以显示任意的语言；所以对于你的每一个页面都使用这个设置会是一个好主意！比如说，你的页面可以很好的处理英文和日文：
备注： 一些浏览器（比如 Chrome）会自动修正错误的编码，所以根据你所使用的浏览器不同，你或许不会看到这个问题。无论如何，你仍然应该为你的页面手动设置编码为 utf-8，来避免在其他浏览器中可能出现的问题。
8.在你的站点增加自定义图标
<link rel="icon" href="favicon.ico" type="image/x-icon"/>9.为文档设置主语言
<html lang="zh-CN">
…
</html>这在很多方面都很有用。如果你的 HTML 文档的语言设置好了，那么你的 HTML 文档就会被搜索引擎更有效地索引（例如，允许它在特定于语言的结果中正确显示），对于那些使用屏幕阅读器的视障人士也很有用（例如，法语和英语中都有“six”这个单词，但是发音却完全不同）。
你还可以将文档的分段设置为不同的语言。例如，我们可以把日语部分设置为日语，如下所示：
<p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>10. a 标签download属性
当你链接到要下载的资源而不是在浏览器中打开时，你可以使用 download 属性来提供一个默认的保存文件名。下面是一个 Firefox 的 Windows 最新版本下载链接的示例：
<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=zh-CN"download="firefox-latest-64bit-installer.exe">
下载最新的 Firefox 中文版 - Windows（64 位）
</a>11. iframe 标签嵌入注意设置sendbox
始终使用 sandbox 属性
想尽可能减少攻击者在你的网站上做坏事的机会，那么你应该给嵌入的内容仅能完成自己工作的权限。当然，这也适用于你自己的内容。一个允许包含在其里的代码以适当的方式执行或者用于测试，但不能对其他代码库（意外或恶意）造成任何损害的容器称为沙盒。
未沙盒化（Unsandboxed）内容可以做得太多（执行 JavaScript，提交表单，弹出窗口等）默认情况下，你应该使用没有参数的 sandbox 属性来强制执行所有可用的限制，如我们前面的示例所示。
如果绝对需要，你可以逐个添加权限（sandbox=""属性值内）——请参阅 sandbox 所有可用选项的参考条目。其中重要的一点是，你永远不应该同时添加 allow-scripts 和 allow-same-origin 到你的 sandbox 属性中——在这种情况下，嵌入式内容可以绕过阻止站点执行脚本的同源安全策略，并使用 JavaScript 完全关闭沙盒。
12. 响应式设计
这章节中充满了响应式图像——希望你享受学习新技术的过程。总而言之，我们讨论了两个不同的问题：
- 美术设计：当你想为不同布局提供不同剪裁的图片——比如在桌面布局上显示完整的、横向图片，而在手机布局上显示一张剪裁过的、突出重点的纵向图片，可以用 <picture> 元素来实现。
- 分辨率切换：当你想要为窄屏提供更小的图片时，因为小屏幕不需要像桌面端显示那么大的图片；以及你想为高/低分辨率屏幕提供不同分辨率的图片时，都可以通过矢量图（SVG 图片）、srcset 以及 sizes 属性来实现。
13.html表格无障碍
scope 属性，可以添加在 <th> 元素中，以告诉屏幕阅读器该表头的类型——它是所在行的表头，还是所在列的表头。回想一下我们前面的消费记录例子，你可以像这样明确地把表头定义为所在列的头部：
<thead>
<tr>
<th scope="col">Purchase</th>
<th scope="col">Location</th>
<th scope="col">Date</th>
<th scope="col">Evaluation</th>
<th scope="col">Cost (€)</th>
</tr>
</thead>
而每一行都可以有一个像这样定义的标题（如果我们把行的标题和列的标题都加上）：
<tr>
<th scope="row">Haircut</th>
<td>Hairdresser</td>
<td>12/09</td>
<td>Great idea</td>
<td>30</td>
</tr>
屏幕阅读器会识别这种结构化的标记，并一次读出整列或整行。
scope 还有两个可选的值： colgroup 和 rowgroup。这些用于位于多个列或行的顶部的标题。如果你回顾这部分文章开始部分的“2016 年 8 月出售的物品”表格，你会看到“衣物”单元格在“长裤”、“衬衫”和“裙子”单元格的上面。这几个单元格都应该被标记为表头（<th>），但是“衣物”是一个位于顶部且定义了其他三个子标题的表头。因此“衣物”应该有一个 scope="colgroup" 属性，而另外三个子标题应该有 scope="col" 属性。
id 和标题属性
如果要替代 scope 属性，可以使用 id 和 headers 属性来创建标题与单元格之间的联系。使用方法如下：
- 为每个 <th> 元素添加一个唯一的 id 。
- 为每个 <td> 元素添加一个 headers 属性。每个单元格的 headers 属性需要包含它从属于的所有标题的 id，之间用空格分隔开。
这会给你的 HTML 表格中每个单元格的位置一个明确的定义。像一个电子表格一样，通过 headers 属性来定义属于哪些行或列。为了让它工作良好，表格同时需要列和行标题。
9万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
