HTML(四) - 旧游无处不堪寻

前三篇已经讲解完大部分常用的标记，这一篇准备讲解其余的标记。

figure 元素(Figure)

figure 标记用来表示图片，图表，插图等内容。

<figure>
  <img src="a.jpg" alt="a">
</figure>

figcaption 元素(Figure caption)

figcaption 标记是为图片增加标题或者说明，是 figure 标记的子标记。

<figure>
  <img src="a.jpg" alt="a">
  <figcaption>a</figcaption>
</figure>

address 元素(Address)

address 标记一般用于联系方式的描述，如住址，邮件信息等。

<address>
  如果你有问题，请跟我联系(<a href="mailto:[email protected]">给我发邮件</a>)。
</address>

time 元素(Time)

time 标记用于定义时间。

The game starts at <time datetime="2018-07-12T10:00">10:00</time>.

audio 元素(Audio)

audio 标记允许在网页内嵌入音频。
重要的属性:

src: 定义资源文件的位置
volume: 范围从0 - 1的声音大小
autoplay: 布尔属性，自动播放
controls: 布尔属性，是否展示内建的控件
loop: 布尔属性，循环播放
muted: 布尔属性，是否初始静音
preload: 三个属性值可供设置:

“none”: 不缓冲文件
“auto”: 缓冲音频文件
“metadata”: 仅仅缓冲文件的元数据

<audio src="foo.mp3" controls loop autoplay preload="auto"></audio>

video 元素(Audio)

video 标记允许在网页内嵌入视频。
重要的属性:

src: 定义资源文件的位置
autoplay: 布尔属性，自动播放
controls: 布尔属性，是否展示内建的控件
loop: 布尔属性，循环播放
muted: 布尔属性，是否初始静音
poster: 封面海报
preload: 三个属性值可供设置:

“none”: 不缓冲文件
“auto”: 缓冲视频文件
“metadata”: 仅仅缓冲文件的元数据

<video src="foo.mp3" controls loop autoplay preload="auto" poster="foo.jpg"></video>

picture 元素(Picture)

picture 标记为网页嵌入图片资源，内部有0到多个 source 子元素以及一个 img 元素。
浏览器选择 source 元素中最佳匹配来展示，如果都无法展示，则最终显示 img 元素。

<picture>
  <source srcset="foo.png" media="(min-width: 1000px)">
  <img src="bar.png">
</picture>

source 元素(Source)

为 audio 元素，video 元素，picture 元素定义资源。
重要的属性:

src: 定义资源位置
srcset: 定义同一个媒体的不同资源，浏览器将选择最佳的来使用
sizes: 定义一组不同的资源尺寸
type: MIME 类型

<video controls>
  <source src="foo.webm" type="video/webm">
  <source src="foo.ogg" type="video/ogg"> 
  <source src="foo.mov" type="video/quicktime">
  I'm sorry; your browser doesn't support HTML5 video.
</video>

details 元素(Detail)

使用下摘要和详情定义一个下拉块。与 summary 元素配合使用。
重要属性:

open: 布尔属性，确定初始状态

<details open>
  <summary>Read more</summary>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
</details>

sub 元素(Subscripted text)

sub 标记定义下标。

The formula of carbon dioxide is CO<sub>2</sub>.

sup 元素(Superscripted text)

sup 标记定义上标。

The "power of two" is 2<sup>n</sup> where n is an integer.

var 元素(Variable)

var 标记定义数学或程序中的变量。

The value of <var>x</var> is 12.

button 元素(Button)

定义可点击的按钮。
重要属性:

name: 定义表单内唯一标识符
value: 当提交时，发送给服务器的值
disabled: 布尔属性，是否禁用
type: 有四个值可选择:

submit: 提交表单
reset: 刷新表单
button: default
menu: 菜单

<button>submit</button>

datalist 元素(Data list)

当时有 input 元素时，定义了一组可自动补全的可选项。与 option 元素配合使用。
input 元素的 list 属性要与 datalist 的 id 属性相同。

<label>South American countries</label><br>
<input list="countries" placeholder="Type a country">

<datalist id="countries">
  <option value="Argentina">
  <option value="Bolivia">
  <option value="Brazil">
  <option value="Chile">
  <option value="Colombia">
  <option value="Ecuador">
  <option value="Guyana">
  <option value="Paraguay">
  <option value="Peru">
  <option value="Suriname">
  <option value="Uruguay">
  <option value="Venezuela">
</datalist>

label 元素(Label)

定义表单控件的标签。
重要属性:

for: 要与关联的表单子控件的 id 属性值相同，点击 label，则关联控件获取焦点

<label for="first_name">First name</label>
<br>
<input type="text" name="first_name" id="first_name">

input 元素(Input)

定义一组与表单可交互的控件。

重要属性:

required: 布尔属性，是否必须填写
name: 定义input唯一标识符
placeholder: 占位符
type: 定义控件类型，有以下可选值:

text: 普通文本
password: 密码
number: 数字
checkbox: 多选框
radio: 单选框
submit: 提交按钮
search: 搜索框
email: 邮件
tel: 电话号码
url: 网址
file: 文件

<input type="text" name="first_name" placeholder="e.g. Alex">

option 元素(Option)

option 标记定义下拉框的一个选项。
重要属性:

value: 提交到服务器的值
selected: 默认选中的选项

<select name="country">
  <option value="Argentina">Argentina</option>
  <option value="Bolivia">Bolivia</option>
  <option value="Brazil">Brazil</option>
  <option value="Chile">Chile</option>
  <option value="Colombia">Colombia</option>
  <option value="Ecuador">Ecuador</option>
  <option value="Guyana">Guyana</option>
  <option value="Paraguay">Paraguay</option>
  <option value="Peru">Peru</option>
  <option value="Suriname">Suriname</option>
  <option value="Uruguay">Uruguay</option>
  <option value="Venezuela">Venezuela</option>
</select>

optgroup 元素(Option group)

optgroup 标记定义选项分组。
重要属性:

label: 定义选项所在分组名

<select>
  <optgroup label="South America">
    <option>Uruguay</option>
    <option>Brazil</option>
    <option>Argentina</option>
  </optgroup>
  <optgroup label="Europe">
    <option>Italy</option>
    <option>Germany</option>
    <option>England</option>
    <option>France</option>
    <option>Spain</option>
  </optgroup>
</select>