块级元素和内联元素
在HTML中有两种你需要知道的重要元素类别，块级元素和内联元素。
- 块级元素在页面中以块的形式展现，相对于其前面的内容会出现在新的一行，其后的内容也会被挤到下一行。块级元素通常用来展示页面的结构化内容，例如段落、列表、导航菜单、页脚等。一个以block形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它的块级元素中。
- 内联元素通常出现在块级元素中并包裹文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行：它通常出现在一堆文字之间例如超链接元素
<a>或者强调元素<em>和<strong>。
空元素
不是所有元素都拥有来说标签，内容和结束标签，一些元素只有一个标签，通常用来在此元素位置插/嵌入一些东西。例如：例如：元素<img>是用来在元素<img>所在位置插入一张指定的图片。
属性
元素也可以拥有属性
属性包含元素的额外信息，不出现在实际内容中。在这个例子中，class属性给元素赋予了一个识别的名字（id），这个名字此后被用来识别此元素的样式和其他信息。
一个属性必须包含如下内容:
- 在元素和属性之间有个space（如果有一个或多个已存在的属性，就与前一个属性之间有一个空格）。
- 属性后面紧跟着=号。
- 有一个属性值，由一对引号“”引起来。
为<a>元素添加属性
元素<a>是锚，它使被标签包裹的内容成为一个链接。此元素也可以添加大量的属性，其中几个如下。
-
href:这个属性声明超链接的web地址，当这个链接被点击浏览器会跳转至声明的web地址。 -
title:标题title属性为超链接声明额外的信息，当鼠标悬停链接时，将出现一个工具提示。 -
target:目标target属性指定将用于显示链接的浏览上下文。例如，target="_blank"将在新标签页中显示链接。如果你希望在目标标签页显示链接，只需要忽略这个属性。
布尔属性
没有值的属性也是合法的，这是布尔属性，他们只能有跟它的属性名一样的属性值。例如disabled属性，他们可以标记表单输入使之变为不可用（变为灰色)，此时用户不能输入任何数据。
<input type="text" disabled="disabled">
分析HTML文档
<!DOCTYPE html> 声明文档类型，最短有效的文档声明
<html> <!--这个元素包含完整的页面，根元素-->
<head> 这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。
<meta charset="utf-8"> 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。
<title>My test page</title> 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
</head>
<body> 包含了你访问页面时所有显示在页面上的内容，文本，图片，音频，游戏等等。
<p>This is my page</p>
</body>
</html>
HTML中的空格
下面的两个代码是等价的：
<p>Dogs are silly.</p>
<p>Dogs are
silly.</p>
无论用了多少空格（包括白字符，包括换行），当渲染这些代码的时候，HTML解释器会将这些连续出现的空白字符减少为一个单独的空格符。为了代码的可读性我们会使用多的空白，在HTML代码中，我们让每个嵌套的元素以两个空格缩进。
实体引用：在HTML中包含特殊字符
在HTML中，字符 <, >,",'和 & 是特殊字符. 它们是HTML语法自身的一部分, 那么你如何将这些字符包含进你的文本中呢, 比如说如果你真的想要在文本中使用符号&或者小于号, 而不想让它们被浏览器视为代码并被解释?
必须使用字符引号——表示字符的特殊编码
每个字符引用以符号&开始，以;结束。
原义字符 等价字符引用
| 原义字符 | 等价字符引用 |
|---|---|
| < | < |
| > | > |
| " | " |
| ' | ' |
| & | & |
例子
<p>In HTML, you define a paragraph using the <p> element.</p>
<p>In HTML, you define a paragraph using the <p> element.</p>
元数据：<meta>元素
元素就是描述数据的数据，而HTML有一个“官方的”方式来为一个文档添加元数据<meta>元素。然而，其他在这篇文章中提到的东西也可以被当作元数据。有很多不同类型的<meta>元素可以被包含进你的页面<head>元素.
指定你文档中字符的编码
<meat charset="utf-8">
这个元素简单的指定文档的字符编码，在这个文档中被允许使用的字符集。utf-8是一个通用的字符集，它包含了任何人类语言中的大部分字符。这意味着你的web页面可以显示任意语言；所以对于你的每一个页面，使用这个设置是很好的。
添加作者和描述
许多<meta> 元素包含了name 和 content 特性：
- name指定了meta元素的类型；说明该元素包含了是什么类型信息。
- content指定了实际的元数据内容
这两个meta元素对于定义你的页面作者和提供页面的描述内容是很有用的。
<meta name="author" content="Chris Mills">
<meta name="description" content="The MDN Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications.">
其他类型的metadata
当你在网站上查看源码时，你也会发现其他类型的元数据。你在网站上看到的许多功能都是专有创作，旨在向某些网站(如社交网站)提供可使用的特定信息。
例如，Facebook 编写的元数据协议 Open Graph Data 为网站提供了更丰富的元数据
Twitter 还拥有自己的类型的专有元数据协议，当网站的 URL 显示在 twitter.com 上时，它具有相似的效果。例如下面：
<meta name="twitter:title" content="Mozilla Developer Network">
为你的站点增加自定义图标
为进一步丰富网站设计，可以在元素据中添加对自定义图标的引用，这些将在特定的场合中显示。
这个不起眼的图标已经存在很多年了，16×16像素是这种图标的第一种类型。
页面添加图标的方式有：
- 将其保存在与网站页面相同的目录中，以.ico格式保存（大多数浏览器将支持更通用的格式，如.gif或.png，但使用ICO格式将确保它能在如Internet Explorer 6一样久远的浏览器显示）
- 将以下行添加到HTML<head>中以引用它：
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
现代浏览器在各种场合使用favicons，如打开的页面标签页和书签面板中的书签页面。下面是一个favicon 出现在书签面板中的例子：
如今还有很多其他的图标类型可以考虑。例如，你可以在 MDN 主页的源代码中找到它：
<!-- third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
<!-- iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
<!-- basic favicon -->
<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">
这些注释解释了每个图标的用途 - 这些元素涵盖的东西提供一个高分辨率图标，这些高分辨率图标当网站保存到iPad的主屏幕时使用。
在HTML中应用css和JavaScript
如今，几乎你使用的所有网站都会使用 CSS 让网页更加炫酷，使用JavaScript让网页有交互功能，比如视频播放器，地图，游戏以及更多功能。这些应用在网页中很常见，它们分别使用 <link>元素以及 <script> 元素。
-
<link>元素经常位于文档的头部。这个link元素有2个属性，rel="stylesheet"表明这是文档的样式表，而 href包含了样式表文件的路径：
<link rel="stylesheet" href="my-css-file.css">
-
<script>部分没必要非要放在文档头部；实际上，把它放在文档的尾部（在</body>标签之前）是一个更好的选择，这样可以确保在加载脚本之前浏览器已经解析了HTML内容（如果脚本加载某个不存在的元素，浏览器会报错）。
<script src="my-js-file.js"></script>
为文档设置主语言
最后，值得一提的是你可以（而且确实应该）为你的站点设定语言， 这个可以通过添加lang属性到HTML开始标签中来实现 (参考 meta-example.html)，如下所示：
<html lang="en-US">
这在很多方面都很有用。如果你的HTML文档的语言设置好了，那么你的HTML文档就会被搜索引擎更有效地索引 (例如，允许它在特定于语言的结果中正确显示)，对于那些使用屏幕阅读器的视障人士也很有用(比如， 法语和英语中都有“six”这个单词，但是发音却完全不同)。
你还可以将文档的分段设置为不同的语言。例如，我们可以把日语部分设置为日语，如下所示：
<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>
在下载链接时使用下载属性节
当您链接到要下载的资源而不是在浏览器中打开时，您可以使用下载属性来提供一个默认的保存文件名。下面是一个下载链接到Firefox 的 Windows最新版本的示例：
<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>
电子邮件链接节
当点击一个链接或按钮时，打开一个新的电子邮件发送信息而不是连接到一个资源或页面，这种情况是可能做到的。这样做是使用<a>元素和mailto：URL的方案。
其最基本和最常用的使用形式为一个mailto:link （链接），链接简单说明收件人的电子邮件地址。例如:
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
这会创建一个链接，看起来像这样： Send email to nowhere.
实际上，邮件地址甚至是可选的。如果你忘记了（也就是说，你的[href](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a#attr-href)仅仅只是简单的"mailto:"），一个新的发送电子邮件的窗口也会被用户的邮件客户端打开，只是没有收件人的地址信息，这通常在“分享”链接是很有用的，用户可以发送给他们选择的地址邮件
具体细节节
除了电子邮件地址，您还可以提供其他信息。事实上，任何标准的邮件头字段可以被添加到你提供的邮件URL。 其中最常用的是主题(subject)、抄送(cc)和主体(body) (这不是一个真正的头字段，但允许您为新邮件指定一个短内容消息)。 每个字段及其值被指定为查询项。
下面是一个包含cc、bcc、主题和主体的示例：
<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email &body=The%20body%20of%20the%20email">
Send mail with cc, bcc, subject and body
</a>
注意: 每个字段的值必须是URL编码的。 也就是说，不能有非打印字符（不可见字符比如制表符、换行符、分页符）和空格 percent-escaped. 同时注意使用问号（?）来分隔主URL与参数值，以及使用&符来分隔mailto:中的各个参数。 这是标准的URL查询标记方法。阅读 The GET method 以了解哪种URL查询标记方法是更常用的。
网友评论