八、列出常见的标签，并简单介绍这些标签用在什么场景？

8.1 <head>标签

该标签的内容不会在浏览器中显示，它的作用是包含一些页面的元数据（Metadata）

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用来表示整个HTML文档大致内容的元数据</title>
</head>

指定文档编码
<meta charset="utf-8">
适配移动页面
<meta name="viewport" content="width=device-width, initial-scale=1.0>
定制页面图标
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
设置 referer
<meta name="referrer" content="never">
添加页面描述
<meta name="description" content="袋鼠云(www.dtstack.com)，数据智能，让未来变成现在">

8.2 文本

8.2.1

<h1>一级标题</h1>

<h2>二级标题</h2>
<p>段落<p>

<h3>三级标题</h3>
<p>段落<p>

<h3>三级标题</h3>
<p>段落</p>

8.2.2 列表

8.2.2.1 无序列表

<ul>
<li>橘子</li>
<li>苹果</li>
<li>梨</li>
</ul>

8.2.2.2有序列表

<ol>
<li>第一步：睁眼</li>
<li>第二步：起身</li>
<li>第三步：下床</li>
</ol>

8.2.3 强调： 、

8.2.3.1

<p>大家都好<em>棒棒</em></p>

8.2.3.2

请以后不要再瞎BB!

8.2.4 描述列表

  <dt>数学</dt>
  <dd>代数、几何，抽象思维<dd>
  <dt>语文<dt>
  <dd>词汇、语法、修辞<dd>
  <dt>地理</dt>
  <dd>气候、地质、地貌等自然现象、人口、城市等人文地理<dd>
</dl>

8.2.5 缩写

这个故事有一个<abbr title="Happy Ending">HE</abbr>。

8.3 超链接

8.3.1 简单链接

<a href="www.dtstack.com">袋鼠云</a>：数据智能，让未来变成现在。

袋鼠云：数据智能，让未来变成现在。

8.3.2 外部链接: 将 target 设置成 _blank

时，点击链接浏览器会新开一个 Tab 打开该网页。
<a href="www.dtstack.com" title="打开一个新标签页" target="_blank">袋鼠云</a>

8.3.3 返回顶部链接：锚点

<a href="#">返回页面顶部</a>

8.3.4 文档内部链接

用于定位到文档的某一部分，<a> 的 href 要对应文档内某个元素的 id（id的值在文档内要唯一）。
<a href="#title1">标题1</a>

8.3.5 图片链接

</a>

袋鼠云

8.3.6 下载链接

<a href="https://assets.dtstack.com/homepage/logo2@1x.png" download>请下载袋鼠云Logo</a>

8.3.7 电话链接

8.3.8 Email链接

<a href="mailto:2392781997@qq.com">发封邮件给子衿的QQ邮箱</a>
<a href="mailto:2392781997@qq.com?cc=huili.sun@dtstack.com">发封邮件给子衿的QQ邮箱并抄送到子衿的公司邮箱</a>

8.4 图像

![Vue.js logo](http://upload-images.jianshu.io/upload_images/6197002-cd8ebacafa9ea76b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

8.4.1 带说明的图像

<figure>
  <img src="https://imgsa.baidu.com/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=cbcb7644c811728b24208470a995a8ab/43a7d933c895d143b7801df676f082025baf0774.jpg"
       alt="傍晚的珠海渔女雕像，旁边还有一群游客"
       width="400"
       height="300">
  <figcaption>傍晚的珠海渔女</figcaption>
</figure>

8.5 表格

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>学号</th>
      <th>院系</th>
      <th>分数</th>
    <tr>
  </thead>
  <tbody>
    <tr>
      <td>李白</td>
      <td>201130072001</td>
      <td>计算机学院</td>
      <td>87</td>
    </tr>
    <tr>
      <td>王石</td>
      <td>201130072002</td>
      <td>计算机学院</td>
      <td>88</td>
    </tr>
    <tr>
      <td>张丽</td>
      <td>201130087009</td>
      <td>纺织学院</td>
      <td>70</td>
    </tr>
  </tbody>
</table>

8.6 音视频

视频

<video controls width="400" height="400"
       autoplay loop muted
       poster="nab-finals.png">
  <source src="nba-finals2017-game-1.webm.mp4" type="video/mp4">
  <source src="nba-finals2017-game-1.webm" type="video/webm">
  <p>你的浏览器不支持 HTML5 视频。</p> 
</video>

音频

<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>你的浏览器不支持 HTML5 音频。</p>
</audio>

任务四——课程作业8