HTML5列表标签、多媒体和语义化标签

一、列表标签

列表是一个父子组合标签，上阵父子兵，不能单独出现。

当HTML标签形成嵌套，必须注意代码的缩进（Tab键），<li>标签不能单独使用，它必须放到<ul>或者<ol>中使用，<ul>和<ol>的子标签只能是<li>，绝对不能出现其它任何标签。
<li>标签是容器，内部可以放任何其他标签。

1.1 无序列表 <ul>

无序列表使用<ul></ul>标签，每个列表项都是<li></li>标签。

• 无序列表有type属性，可以定义前导符号的样式，但是在HTML5中已经被废弃，建议使用CSS替代。

type属性值	描述
disc	默认值，实心圆
circle	空心圆
square	实心方块

<ul>
    <li>牛奶</li>
    <li>
        咖啡
        <!-- <li>标签里面可以有其他标签 -->
        <p>有的咖啡会很苦</p>
    </li>
    <li>
        水果
        <!-- <li>标签里面可以嵌套<ul>标签 -->
        <ul>
            <li>苹果</li>
            <li>香蕉</li>
            <li>葡萄</li>
        </ul>
    </li>
</ul>

1.2 有序列表 <ol>

有序列表使用<ol></ol>标签，每个列表项都是<li></li>标签。

• ol标签可以设置type属性，用来设置编号的类型：

type属性值	描述
a	表示小写英文字母编号
A	表示大写英文字母编号
i	表示小写罗马数字编号
I	表示大写罗马数字编号
1	表示大写罗马数字编号

• start属性值必须是一个整数，指定了列表编号的起始值，此属性的值应为阿拉伯数字，尽管列表条目的编号类型 type属性可能指定为了罗马数字编号等其他类型的编号。
• reversed属性指定列表中的条目是否是倒序排列的，reversed属性不需要值，只需要写reversed单词即可，这是HTML5的全新特性

<ol type="1" start="10" reversed>
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
    <li>赵六</li>
</ol>

1.3 定义列表 <dl>、<dt>和<dd>

需要逐条给出定义描述的列表，就是定义列表，<dl>是定义列表标签，内容交替出现<dt>、<dd>标签。也允许<dt>和<dd>不交替出现，而是分别处于不同的定义列表中。

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dt>CSS</dt>
    <dd>层叠式样式表</dd>
</dl>
<dl>
    <dt>js</dt>
    <dd>js脚本程序</dd>
</dl>

二、多媒体和语义化标签

相对路径：
描述从网页出发，如何找到图片。随着网页和图片的位置关系不同，插入图片的代码随之改变。如果需要回退层级，使用“../”这样的写法。

<img src="images/gugong.jpg">

绝对路径：
描述图片精准地址。不管网页在哪里，绝对路径不需要改变。

<img src="https://www.arbor.com/static/img/index/logo-recommended.png">

2.1 图片 <img>

<img>标签用来在网页中插入图片，图片必须要复制到项目文件夹中，一般将图片保存到项目文件夹中的images子文件夹中。

图片本质上没有被插入到网页中，只是被引入到了网页中，所以将来要将图片也一起上传到服务器上，将图片复制到项目文件中，即可整体上传。

• <img>标签的src属性，是source(来源)的缩写，参数是图片的存储目录和完整文件名。
• <img>标签的alt属性是alternate“替代品”的缩写，它是对图像的文本描述，不是强制性的。如果由于某种原因无法加载图像，浏览器会在页面上显示alt属性中的备用文本。供视力不方便的朋友使用的网页朗读器，也会朗读alt中的文本。
• <img>标签的width、height属性分别设置宽度和高度，单位是像素，但是不需要写单位。如果省略其中一个属性，则表示按原始比例缩放图片。

网页上支持的图片格式：

格式	描述
.bmp	windows画图软件默认保存的格式，位图
.gif	支持动画（比如表情包）
.jpeg(.jpg)	有损压缩图片，用于照片
.png	便携式网络图像，用于logo、背景图形等，支持透明和半透明
.svg	矢量图片
.webp	最新的压缩算法非常优秀的图片格式

<img src="images/tupian.jpg" alt="这是一个图片">
<img src="images/tupian.jpg" alt="这是一个图片" width="200">

2.2 超级链接 <a>

超级链接是将网页和网页连结到一起的方法，是互联网成“网”的原因，使用<a>标签制作超级链接。

• href属性支持相对路径和绝对路径
• title属性用于设置鼠标的悬停文本
• target属性设置为blank，即可在新标签页中打开网页，HTML4代，blank之前有一个下划线
• 图片也可以设置超级链接，只需要用<a>标签包裹img标签即可
• 较长的页面，可以适当的给h系列标签添加id属性，它将成为页面的“锚点”，当网址后面添加#时，页面将自动滚动到锚点所在位置，其他页面的超级链接，可以链接到指定锚点

<h1 id="wuxi">无锡美景</h1>
<a href="lvyou.html#wuxi">看无锡美景</a>

• 指向exe、zip、rar等文件格式的链接，将自动成为下载链接
• 有mailto:前缀的链接是邮件链接，系统将自动打开Email相关软件

<a href="mailto:me@test.com">给小编发邮件</a>

• 有tel:前缀的链接是电话连接，系统将自动打开拨号盘

<a href="tel:12306">打电话买火车票</a>

2.3 音频 <audio>

在浏览器中插入音频需要使用标签，兼容到IE9。常用音频格式是mp3和ogg格式

• controls：显示播放控件

<audio controls src="音频地址">
抱歉，您的浏览器不支持audio标签，请升级浏览器  <!-- 标签对中是对不兼容audio标签的浏览器的显示文字-->
</audio>

• autoplay属性：声明autoplay属性，音频会自动播放，常用的浏览器为了不打扰用户，可能会不允许自动播放音乐，必须让用户手动点击之后才能播放
• loop属性：声明loop属性，将循环播放音频

2.4 视频 <video>

在浏览器中插入视频需要使用<video>标签，兼容到IE9。常用音频格式是mp4、ogv、webm等格式。

• controls：显示播放控件

<video controls src="视频地址" loop autoplay>
抱歉，您的浏览器不支持video标签，请升级浏览器  <!-- 标签对中是对不兼容audio标签的浏览器的显示文字-->
</video>

• autoplay属性：声明autoplay属性，视频会自动播放
• loop属性：声明loop属性，将循环播放视频

2.5 区块标签

HTML5推出了众多新的区块标签。

区块标签	描述
<section>	文档的区域，语义比div大
<article>	文档的核心文章内容，会被搜索引擎主要抓取
<aside>	文档的非必要相关内容，比如广告等
<nav>	导航条
<header>	页头
<main>	网页核心部分
<footer>	页脚

2.6 语义化标签

2.6.1 <span>标签

<span>标签是文本中的“区块”标签，本身没有任何特殊的显示效果，可以结合CSS来丰富样式

<p>
    <span>北京</span>的区号是<span>010</span>
</p>
<p>
    <span>上海</span>的区号是<span>021</span>
</p>

2.6.2 <b>、<u>、<i>标签

<b>、<u>、<i>标签充满浓浓的“样式”意味，已经被CSS替代，但是在网页中也可以表示需要强调的文本

标签	描述
<b>	被加粗的文字，CSS已经替代了它的功能
<u>	加下划线的文字，CSS已经替代了它的功能
<i>	倾斜的文字，CSS已经替代了它的功能

2.6.3 <strong>、<em>、<mark>标签

<strong>、<em>、<mark>标签均表示强调语

标签	描述
<strong>	代表特别重要文字
<em>	代表强调文字
<mark>	代表一段需要被高亮的文字

2.6.4 <figure>、<figcaption>标签

<figure>元素代表一段独立的内容, 与说明<figcaption>配合使用, 它是一个独立的引用单元，比如建议读者拓展视野的图片等，当这部分转移到附录中或者其他页面时不会影响到主体

<p>
    北京是一个美丽的城市
    <figure>
        <img src="images/tupian.jpg" width="500">
        <figcaption>北京的鸟巢</figcaption>
    </figure>
</p>

三、盒子标签 <div>

div是英语division“分割”的缩写，<div></div>标签对用来将相关的内容组合到一起，以和其他内容分割，使文档结构更清晰。
比如，网页的头部要放到一个<div></div>标签对中，轮播图也要放到一个<div></div>标签对中，文章内容也要放到一个<div></div>标签对中。
<div></div>是最常见的HTML标签，因为它可以结合CSS使用，实现网页的布局，这种布局形式叫做“DIV+CSS”。<div></div>像是一个容器，什么都可以容纳，因此工程师也习惯称呼<div></div>为“盒子”。

<div>
    <div>网站的logo</div>
    <h1>北京简介</h1>
</div>

<div>标签可以添加class属性表示“类名”，类名服务于CSS

区域	类名
页头	header
logo	logo
导航条	nav
横幅	banner
内容区域	content
页脚	footer