八、列出常见的标签，并简单介绍这些标签用在什么场景？
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 强调：<em> 、 <strong>
8.2.3.1<em>
<p>大家都好<em>棒棒</em></p>
8.2.3.2<strong>
<p>请以后<strong>不要</strong>再瞎BB!</p>
8.2.4 描述列表
<dt>数学</dt>
<dd>代数、几何，抽象思维<dd>
<dt>语文<dt>
<dd>词汇、语法、修辞<dd>
<dt>地理</dt>
<dd>气候、地质、地貌等自然现象、人口、城市等人文地理<dd>
</dl>
8.2.5 缩写
<p>这个故事有一个<abbr title="Happy Ending">HE</abbr>。</p>
8.3 超链接
8.3.1 简单链接
<p><a href="www.dtstack.com">袋鼠云</a>：数据智能，让未来变成现在。</p>
袋鼠云：数据智能，让未来变成现在。
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 href="www.dtstack.com" title="数据智能，让未来变能现在">
</a>
袋鼠云
8.3.6 下载链接
<a href="https://assets.dtstack.com/homepage/logo2@1x.png" download>请下载袋鼠云Logo</a>
8.3.7 电话链接
<a href="tel:+15868482281">+86 15868482281</a>
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 图像
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>
网友评论