众所周知，web 前端主要包括 HTML+CSS+JavaScript 三部分组成，其中 HTML 是超文本标记语言，CSS 是层叠样式表，JavaScript 是脚本语言。

以下学习的内容都是静态网页而非动态网页，不涉及服务器数据库之类的知识，目标之一是了解最基本的网页知识，例如可以写出几个简单的静态网页，并且利用 Hexo+Github Pages 部署，目的之二是看懂 Hexo 搭建博客的样式配置等。参考教程：https://developer.mozilla.org

HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 控制了网页的行为

HTML

1. 元素

一个典型的 html 元素如下：

1	<p class="note">content</p>

其中<p>是开始标签，</p>是结束标签，中间的content是元素的内容，class="note"是标签的属性。

上述元素是成对的，包括开始标签和结束标签，元素可以相互嵌套，例如

1	<p>My cat is <strong>very</strong> grumpy.</p>

嵌套时注意结束标签的顺序，否则可能出现显示的异常。

除了上述类型的元素之外，还有不含内容不成对的元素，例如典型的<img>元素，用于在网页中嵌入一个图像：

1	<img src="url-to-image" alt="image description" />

元素按照呈现效果大体上分成两类：块级元素和内联元素：

块级元素在页面中以块的形式展现——相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。一个以 block 形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。
内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行：它通常出现在一堆文字之间例如超链接元素<a>或者斜体强调元素<em>和粗体强调元素<strong>。

注：

HTML 元素不区分大小写，但是建议全部使用小写字符；
解析 HTML 元素时使用了若干个特殊符号，包括：" ' < > &，如果在文本中希望直接使用这些符号，则需要特殊处理，使用下面的<等作为替代，注意结尾包括分号；
浏览器解析 HTML 文本的时候使用的是宽松模式——对于简单的语法错误会尝试自动进行修复，尽量呈现正确的效果，可以把 html 文件或者 URL 发送给 W3C 机构提供的标记验证服务，它会检查并反馈网页的语法错误。
HTML 支持注释，形如；
HTML 会自动忽略连续的空格，只视为一个空格，对于代码块等含有连续空格的文本需要特殊处理。

原义字符	等价字符引用
<	`<`
>	`>`
"	`"`
'	`'`
&	`&`

属性

以超链接元素 <a> 为例：

1	<a href="https://www.baidu.com" title="baidu" target="_blank">百度一下</a>

属性名="属性值"，这里属性值使用单引号或双引号包括(有时不用引号也可以正确解析，如果本身含有双引号，则可以用单引号包括)，多个属性之间以空格分开。上述元素包括三个属性：

href 超文本链接地址，也就是超链接指向的 URL；
title 标题，当鼠标移动到超链接上时会呈现；
target 表明如何打开这个链接，默认在当前标签页，"_blank"指的是在新标签页打开。

效果如下：百度一下 (在元素内容"百度一下"下方增加下划线，点击这部分跳转到指定网页)

有的属性是没有特定值的，只有开关两种状态，例如下面的 disabled 属性含义为禁止输入，只能选择开启或关闭，属性值与属性名相同，此类属性称为布尔属性，可以简写

1
2
3

<input type="text" disabled="disabled" />

<input type="text" disabled />

下面是两个输入框的例子作为直观对比，第二个是开启了 disabled 属性的，无法输入：

2. 基本框架

如下是一个最基本的 HTML 文件结构，包括

文档类型 <!DOCTYPE html>；
根元素 <html> </html> 包括整个页面的内容，可以使用 lang 属性声明整个网页的语言，例如"zh-CN"或"en"，包括以下两部分：
- 头部 <head> </head> 不可见的内容，包括页面数据的描述等；
- 主体 <body> </body> 可见的内容，包括主要的数据。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My Test Page</title>
  </head>

  <body>
    <img src="url-to-image" width="100%" alt="My Test Image" />
  </body>
</html>

头部

HTML 文件的头部通常包括如下内容：

文档字符集，使用 utf-8 即可，<meta charset="utf-8">
页面标题，会在浏览器标签页上显示(而不是正文中)，<title> </title>

还可以包括其他内容，例如：

<!--字符集 charset-->
<meta charset="utf-8" />

<!--页面标题 title-->
<title>The Page Title</title>

<!--页面图标 icon-->
<link
  rel="icon"
  href="https://developer.mozilla.org/static/img/favicon32.png"
/>

<!--网页作者 author-->
<meta name="author" content="Chris Mills" />

<!--网页描述 description 可能出现在搜索引擎的页面中-->
<meta
  name="description"
  content="The MDN Web Docs 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."
/>

3. 典型的网页元素

除了纯文本信息，在网页内容中最常见的元素就是图片和超链接，因此首先关注这两种元素的用法和属性。

图像

图像元素最简单的用法如下：

the alt

<img
  src="http://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg"
  alt="the alt"
  title="the title"
  width="30%"
/>

其中必要的属性：

src: 图片源文件的 URL；
alt: 替代文本，通常是图片的描述，只会在图片加载失败时才显示出来！可以使用alt=""设置空的文本。

可选的属性：

title: 图片标题，注意只会在鼠标悬停到图片上时显示；
height: 图片的高度(可以是数值，也可以是比例)；
width: 图片的宽度(同上)；
loading: 加载选项，包括立刻加载 eager 和延迟加载 lazy，延迟加载会推迟加载处于屏幕外的图像。

通常我们希望图片自带一些显示的描述性文字，可以使用<figure>元素把<img>图片元素和<figcaption>图片说明元素包括起来，用法如下

一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。 — 曼彻斯特大学博物馆展出的一只霸王龙的化石

源代码为：

<figure>
  <img
    src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
    alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
    width="200"
    height="171"
  />
  <figcaption>曼彻斯特大学博物馆展出的一只霸王龙的化石</figcaption>
</figure>

超链接

超链接元素典型的用法如下：

1	<a href="https://www.baidu.com" title="baidu" target="_blank">百度一下</a>

由于超链接元素是含有内容的，内容通常是文本，但是也可以是其他内容，比如一个元素，一个图片，甚至一个块级元素，例如下文的图片同时是指向 baidu 的超链接。

4. 文本类元素

和 Markdown 语法一样，HTML 的文本也包括常见的多级标题，有序无序列表等组成。(处理 Markdown 时通常首先整理为 HTML 格式)

标题

有六个标题元素标签——<h1>、<h2>、<h3>、<h4>、<h5>、<h6>。每个元素代表文档中不同级别的内容; <h1> 表示主标题，<h2> 表示二级子标题，<h3> 表示三级子标题等。建议一个文本中只使用一个<h1>主标题。通常希望主标题居中，可以通过 align 属性实现，但更建议的用法是不使用属性而通过样式 CSS 实现。

1	<h1 align="center">Title 1</h1>

段落,换行,分割线

使用<p>标签代表段落，浏览器会使用默认的样式进行处理，<p>是块级元素，会自动在段落前后加入空行，将段落展示为独立的块。

使用<hr />元素可以添加一个下划线，作为分割的含义。(非成对的元素)

使用<br />元素可以强制回车换行，适合在段落内部进行强制换行。

注：这里可以不加后面的斜杠/，对于自闭合标签在某些标准中要求加斜杠，某些不需要，但是通常都可以正确解析。

列表

分为无序列表<ul>和有序列表<ol>，效果如下：

豆浆
油条
豆汁
焦圈

沿着条路走到头
右转
直行穿过第一个十字路口
在第三个十字路口处左转
继续走 300 米，学校就在你的右手边

直接上代码即可，可以相互嵌套形成多级的列表。

<ul>
  <li>豆浆</li>
  <li>油条</li>
  <li>豆汁</li>
  <li>焦圈</li>
</ul>

<ol>
  <li>沿着条路走到头</li>
  <li>右转</li>
  <li>直行穿过第一个十字路口</li>
  <li>在第三个十字路口处左转</li>
  <li>继续走 300 米，学校就在你的右手边</li>
</ol>

强调(斜体, 粗体)

强调元素是<em>，默认样式是斜体；更加强调的元素的<strong>，默认样式是粗体。这两种元素的使用都代表着明确的强调语义，而在 HTML 早期，还有无语义的几种元素：

斜体字<i>;
粗体<b>;
下划线<u>。

这三种是纯粹的样式，而且现在网页中的下划线通常都被视作超链接的标志，因此不建议使用这三个无语义的元素。

代码块

元素<pre>的内容不会自动去除连续的空格或者换行等，而是会保留原样输出。元素<code>的内容是代码块。

printf("hello,world")

源代码为：

1 2	<pre><code>printf("hello,world") </code></pre>

简单表格

简单的例子如下，

Table caption
	Knocky	Flor	Ella	Juan
Breed	Jack Russell	Poodle	Streetdog	Cocker Spaniel
Age	16	9	10	5
Owner	Mother-in-law	Me	Me	Sister-in-law
Eating Habits	Eats everyone's leftovers	Nibbles at food	Hearty eater	Will eat till he explodes

源代码如下：

<table>
  <caption>
    Table caption
  </caption>
  <tr>
    <td>&nbsp;</td>
    <td>Knocky</td>
    <td>Flor</td>
    <td>Ella</td>
    <td>Juan</td>
  </tr>
  <tr>
    <td>Breed</td>
    <td>Jack Russell</td>
    <td>Poodle</td>
    <td>Streetdog</td>
    <td>Cocker Spaniel</td>
  </tr>
  <tr>
    <td>Age</td>
    <td>16</td>
    <td>9</td>
    <td>10</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Owner</td>
    <td>Mother-in-law</td>
    <td>Me</td>
    <td>Me</td>
    <td>Sister-in-law</td>
  </tr>
  <tr>
    <td>Eating Habits</td>
    <td>Eats everyone's leftovers</td>
    <td>Nibbles at food</td>
    <td>Hearty eater</td>
    <td>Will eat till he explodes</td>
  </tr>
</table>

表格暂时用不上，更详细的用法可以参考HTML 表格教程。

上下标

和 Latex 一样，也支持上下标，但是更麻烦，例如

咖啡因的化学方程式是 C₈H₁₀N₄O₂。

如果 x² 的值为 9，那么 x 的值必为 3 或 -3。

源代码为：

<p>
  咖啡因的化学方程式是 C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>。
</p>
<p>如果 x<sup>2</sup> 的值为 9，那么 x 的值必为 3 或 -3。</p>

(根据需求，在 JS 的学习中，还会考虑如何在 HTML 中调用 MathJax 渲染 Latex 公式)

时间

有专门的时间元素<time>，这里使用的 datetime 属性是为了提供一种简单的可被机器识别的日期格式，因为内容文本中的时间可能受到语言格式等影响。

<!-- 标准简单日期 -->
<time datetime="2016-01-20">20 January 2016</time>
<!-- 只包含年份和月份-->
<time datetime="2016-01">January 2016</time>
<!-- 只包含月份和日期 -->
<time datetime="01-20">20 January</time>
<!-- 只包含时间，小时和分钟数 -->
<time datetime="19:30">19:30</time>

5. 无语义元素

对于块级元素和内联元素，如果有特殊的语义不适合使用上述的内置元素，或者根本没有什么含义，只是为了划分元素，则可以使用无语义元素

<div> 块级的无语义元素；
<span> 内联级的无语义元素。

此时可以标注特殊的类名 class，通常需要结合样式表文件定义这一类元素的样式，例如

<div class="shopping-cart">
  <h2>购物车</h2>
  <ul>
    <li>
      <p>
        <a href=""><strong>银耳环</strong></a
        >：$99.95.
      </p>
      <img src="../products/3333-0985/" alt="Silver earrings" />
    </li>
    <li>...</li>
  </ul>
  <p>售价：$237.89</p>
</div>

6. URL

关于 URL，全称是统一资源定位器（Uniform Resource Locator），不仅是指向一个新的网址，还有更丰富的用法，例如基于 URL 可以完成文件的下载等。

指向特定元素

如果给 HTML 元素赋予 id 属性，则 URL 后用井号#加 id 值，可以让超链接具体指向那个元素。

例如，在开头的一个图片中加入了 id 属性，使用下面的 URL 可以指向它，由于在同一个文件内，可以使用相对路径。

Go to baidulogo

源代码为如下，注意到文件中的 id 值需要是唯一的，并且严格区分大小写，与之类似的是 name 属性，它不具有唯一性。

<a href="#baidulogo"> Go to baidulogo </a>

<!--跳转的元素-->
<img
  id="baidulogo"
  src="http://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg"
  alt="the alt"
  title="the title"
  width="30%"
/>

自动下载元素

下载百度 Logo 图片
 下载一个测试的 PDF

源代码如下：

<a
  href="http://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg"
  download
>
  下载百度Logo图片
</a>
<br />
<a href="https://orimi.com/pdf-test.pdf" download> 下载一个测试的PDF </a>
<br />

但是遇到了一些问题，比如 PDF 和图片，浏览器会试图缓存然后直接在新页面打开它，而非下载它，比如加不加 download 属性似乎没什么区别。HTML 就学到这里吧。