html入门2

超链接：

超链接可以链接到html文档的特定部分（被称为文档片段），而不仅仅是文件的顶部。要做到这一点你必须首先分配一个id属性的元素到链接。通常链接到一个特定的标题是有意义的，所以这看起来像下面的内容：

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

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

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

你甚至可以用它自己的文档片段参考链接到同一份文件的另一部分：

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

URL使用路径查找文件：

指向相同目录：如果index.html（顶层的index.html）想要包含一个超链接指向contacts.html，你只需要指定想要链接的文件名，因为它与当前文件是在同一个目录的.  所以你应该使用的URL是contacts.html

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

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

eg:

<p>A link to my <a href="../pdfs/project-brief.pdf">project brief</a>.</p>

电子邮件链接：

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

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

描述列表

描述列表使用与其他列表类型不同的闭合标签— <dl>; 此外，每一项都用  <dt> (description term)  元素闭合。每个描述都用 <dd> (description description) 元素闭合。例如：

<dl>
  <dt>soliloquy</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>monologue</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>

soliloquy

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

monologue

In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.

aside

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 addtional background information.

引用

缩略语

另一个你在web上看到的相当常见的元素是<abbr>——它常被用来包裹一个缩略语或缩写，并且提供缩写的解释（包含在title属性中）。

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

上标和下标Section

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

<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>

标记时间和日期Section

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

<time datetime="2016-01-20">20 January 2016</time>

文档的基本内容：HTML提供了可以用来表示这些部分的专用标签，例如：

• 标题: <header>.
• 导航栏: <nav>.
• 主要内容: <main>, 具有代表性的内容段落主题可以使用 <article>, <section>, 和 <div> 元素.
• 侧栏: <aside>; 经常嵌套在 <main> 中.

• 页脚: <footer>.

 

换行与水平分割线

<br> 和<hr>将会是你偶尔使用并且想要了解的两个元素:

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

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

除错

最好的方法就是让你的HTML页面通过 Markup Validation Service — 由W3C创立并维护的，这个网站紧跟定义 HTML，CSS，和其他网络技术的具体内容. 这个网页将 HTML 文档作为输入,并运行 ，然后给你一个报告告诉你你的 HTML 有哪些错误.

让我们用sample document尝试一下：

1. 在浏览器中打开 Markup Validation Service 。
2. 点击或者激活 Validate by Direct Input 栏。
3. 将整个示范文档的代码（不仅仅是body部分）复制粘贴到在Markup Validation Service中显示的巨大的文本框。
4. 点击Check按钮。

然后就会出现一张列表，显示了文档中的错误或者其他信息。