网站的内容显然是一个网站的核心，当今大多数网站的内容无非是由文字和多媒体资源组成的，HTML 提供了非常多具有相关语义和样式的元素，包括 <h1> - <h6>、<p>、<b>、<strong>、<i>、<em>、<mark>、<small>、<u>、<ins> 等等，下面咱们就简单的介绍一下它们。
文本
咱们的中文体系中，一篇文章主要是由标题和段落组成的，在 HTML 代码中，我们可以使用 <h1> - <h6> 来标记不同级别的标题，使用 <p> 来标记段落。除此之外，还有一些不常用的其它标签：
| 元素 | 效果 | 作用 |
|---|---|---|
<b> | 加粗 | 用于加粗效果文字 |
<strong> | 加粗 | 一般效果和 <b> 相同，只不过 <strong> 更强调语义上的行为，<b> 更像是外观上的改变。 |
<i> | 斜体 | 用于斜体效果的文字，英文中可以增加辨识度，中文很少有特殊的应用场景，看设计师的喜好吧。 |
<em> | 斜体 | 一般效果和 <i> 相同，同 <strong> 类似更强调语义性。 |
<mark> | 高亮 | 一般用于标记某段文本。 |
<small> | 缩小 | 使用缩小的方式描述，主要用于版权或者法律文本。 |
<s> | 删除 | 用于删除效果的文字。 |
<del> | 删除 | 更强调删除的语义。 |
<u> | 波浪线 | 一般用于注释文本，一些浏览器会显示下划线效果，但正确的下划线应该使用 CSS 设置。 |
<ins> | 下划线 | 增加的文本，可以和 <del> 进行配合，展示修改的内容。 |
<kbd> | 按键 | 浏览器一般用等宽字体表示。 |
<code> | 代码 | 显示代码片段。 |
<sub> | 下标 | 下标文本。 |
<sup> | 上标 | 上标文本。 |
<a> | 链接 | 常见的文本链接，可以点击跳转到其它网页。 |
下面展示一下浏览器的默认效果：
具体代码如下：
<body>
<h1>HTML 语言</h1>
<p>
HTML的全称为<del>一门语言</del><ins>超文本标记语言</ins>，是一种<strong>标记语言</strong>。它包括一系列<em>标签</em>．通过这些标签可以将网络上的文档格式统一，使分散的 <small>Internet</small> 资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML 命令可以说明文字，图形、动画、声音、表格、链接等。<sup>[1]</sup>
</p>
<p>下面是一段代码：</p>
<pre>
<code>
<figure>
<blockquote>
<p>It was a bright cold day in April, and the clocks were striking thirteen.</p>
</blockquote>
<figcaption>First sentence in <cite><a href="http://www.george-orwell.org/1984/0.html">Nineteen Eighty-Four</a></cite> by George Orwell (Part 1, Chapter 1).</figcaption>
</figure>
</code>
</pre>
<p>按下 <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> 运行</p>
</body>
上面表格里面的元素基本上都是内联元素，说白了就是行内的文字效果，还有一些是行间效果的，这里也简单的介绍一下。
blockquote 元素
块引用，一般用于标注其他来源的文本内容，浏览器一般会给视觉上的缩进效果。
dl、dt、dd 元素
三者相互配合，用来标记列表项。dl 用来标记整个列表，dt 用来标记列表项标题，dd 用来标记列表项的内容。
figure、figcaption 元素
用于标记图形图像的元素，可以使用 figcaption 定义标题内容。和 img 元素配合，具体参考效果如下：
li、ol、ul 元素
li 用于定义列表子项，父标签 ol 标记有序列表，ul 标记无序列表。
pre 元素
pre 元素可以标记具有特殊格式文本，它允许文本内容中保留原始的空格和换行数量，并且文本默认会以等宽字体显示。常用来标注代码之类自带格式的内容。
多媒体
如果仅仅用文字来表达网页内容，显然会让网页看起来有些单调。HTML 为了丰富网页内容引入了多种多媒体资源，包括不限于图片、视频、音频等内容。
图片
图片可以增加网页的视觉效果，在 HTML 中使用 <img> 标签来插入图像，它是一个空元素。
<img src="kites.jpg" alt="Flying Kites">
<img src="sky.jpg" alt="Cloudy Sky">
<img src="balloons.jpg" alt="Balloons">
你可以使用 src 属性告诉浏览器去哪里加载图片，使用 alt 属性定义图片的替代文本，如果加载失败，浏览器会显示该属性的内容。
除此之外，你还可以通过 width 和 height 属性指定图片显示的具体大小。默认情况下会以像素为单位：
<img src="kites.jpg" alt="Flying Kites" width="300" height="300">
<img src="sky.jpg" alt="Cloudy Sky" width="250" height="150">
<img src="balloons.jpg" alt="Balloons" width="200" height="200">
当然大多数时候，你可以使用 CSS 样式来做这些事情。
picture 元素
在现代浏览器中，因为存在高分辨率屏幕之类的问题，如果仅使用原始图片做自适应的方式适配不同的屏幕，有时候会让图片看起来效果很差，HTML5 引入 <picture> 标签，该标签允许你定义多种图片适配不同的设备类型。
<picture>
<source media="(min-width: 1000px)" srcset="logo-large.png">
<source media="(max-width: 500px)" srcset="logo-small.png">
<img src="logo-default.png" alt="My logo">
</picture>
picture 元素内可以包含多个 source 元素，每个元素引入不同的图片，最后一个节点必须为 img 元素。浏览器在显示 picture 元素的时候会自动适配不同的媒体属性，如果匹配成功，会显示 source 节点对应的图片，否则会显示 img 元素提供的图片内容。
图像热点
图像热点是一个有意思的功能，它的作用类似于文字版的超链接。
<img src="objects.png" usemap="#objects" alt="Objects">
<map name="objects">
<area shape="circle" coords="137,231,71" href="clock.html" alt="Clock">
<area shape="poly" coords="363,146,273,302,452,300" href="sign.html" alt="Sign">
<area shape="rect" coords="520,160,641,302" href="book.html" alt="Book">
</map>
img 元素可以使用 usemap 属性指定图片热点地图。map 元素可以定义具体的热点地图样式，area 元素定义具体的热点范围，当点击该元素定义的区域时，浏览器可以跳转到指定的第三方链接。
虽然效果看起很酷，但是现实中使用的并不多，可能因为这种导航方式对于 SEO 的效果并不是很好，对于部分网站来说可能太另类了。
SVG
SVG 是可缩放矢量图形的简称，它是一种基于 XML 的图像格式，用于定义 web 端的二维矢量图形，和光栅图像（jpg、gif、png）不同，矢量图形可以等比放大缩小而不失真。
SVG 图像规范比较复杂，这里并不详细展开，只是单纯的介绍一下如何将其引入到浏览器中：
<body>
<svg width="300" height="200">
<text x="10" y="20" style="font-size:14px;">
Your browser support SVG.
</text>
Sorry, your browser does not support SVG.
</svg>
</body>
在 HTML5 中，你可以使用 svg 元素将整个 SVG 图形直接嵌入到网页中。
Canvas
Canvas 是 HTML5 新引入的元素，你可以通过 Javascript 来在该节点上绘制你想要的内容。该元素更多的作用是制作在线游戏，因为你可以在该元素上进行像素级别的绘制。
该元素和普通的窗口类似，坐标体系的原点都在左上角：
你可以通过一些指定的 API 接口进行绘制操作。具体的 HTML 代码如下：
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
因为具体的绘制过程是用 Javascript 描述的，这里就不详细展开了，有兴趣的同学可以网上搜索一下相关的教程，基本操作还是非常简单的。
SVG 和 Canvas 之间的差异：
| SVG | Canvas |
|---|---|
| 基于矢量（由形状组成） | 基于光栅（由像素组成） |
| 多个图形元素，DOM 树的一部分 | 单个元素和 img 元素的效果类似，可以将内容保持为图片 |
| 通过脚本和CSS 修改 | 只能通过脚本修改 |
| 良好的文字渲染能力 | 较差的文字渲染能力 |
| 使用少对象大表面绘制形状，主要用于插画、图标特效 | 使用多对象小表面绘制形状，实时性能好，常用于游戏 |
| 扩展性好，适合任何分辨率，无需额外调整既可适配大多数网页 | 扩展性差，同样的绘制方式高分辨率会显示像素化，需要调整绘制逻辑 |
音频
HTML5 引入 audio 元素来播放网页中的音频，然而该元素较新，有些旧版的浏览器并不支持。
下面是插入音频的代码：
<audio controls="controls" src="media/birds.mp3">
Your browser does not support the HTML5 Audio element.
</audio>
该元素和 img 元素类似，都使用 src 属性引入外部资源，其中 controls 属性用于说明是否显示控制条。
除了上面这种方法之外，你还可以使用 embed 元素，将音频文件嵌入到网页中：
<embed src="media/wind.mp3">
<embed src="media/wind.ogg">
视频
HTML5 引入了 video 元素来播放网页中的视频，该元素一样比较新，旧的浏览器大概率不支持。
下面是插入视频的代码：
<video controls="controls" src="media/shuttle.mp4">
Your browser does not support the HTML5 Video element.
</video>
整个效果和音频类似，你也可以通过 embed 元素将其嵌入：
<embed src="media/blur.swf" width="400px" height="200px">
