# HTML Element

# 一、文档结构

# 基础结构

<!DOCTYPE html>
<html>
  <head>...</head>
  <body>...</body>
</html>

# body

body (opens new window) 元素表示文档的内容。

# 元数据元素

元素	作用	重要属性
<head> (opens new window)	文档元数据容器
<title> (opens new window)	页面标题
<meta> (opens new window)	定义字符集/视口/关键词等	`charset`, `name`, `content`
<link> (opens new window)	外部资源引用	`rel`, `href`
<style> (opens new window)	内联样式表	`type="text/css"`

# head

head (opens new window) 元素表示 Document (opens new window) 的元数据集合。

<head>
  <meta charset="utf-8" />
  <title>Sample page</title>
</head>

# title

title (opens new window) 元素表示文档的标题或名称。

<title>Sample page</title>

# meta

meta (opens new window) 元素表示无法使用 title，base，link，style 和 script 元素表示的各种元数据。

charset

charset (opens new window) 属性指定文档使用的字符编码。
```
<meta charset="utf-8">
```

# link

link (opens new window) 元素将文档链接到其他资源。

例如，页面添加图标。

<link rel="icon" href="favicon.ico">

例如，应用 CSS。

<link rel="stylesheet" href="index.css">

# style

style (opens new window) 元素在文档中嵌入 CSS 样式表。

# 二、内容元素

# 文本内容

元素	作用	重要属性
<p> (opens new window)	段落
<ol> (opens new window)	有序项目列表
<ul> (opens new window)	无序项目列表
<dl> (opens new window)	关联列表
<a> (opens new window)	超链接
<span> (opens new window)

# p

p (opens new window) 元素代表一个段落。

# ol

ol (opens new window) 元素表示一个有序项目列表。

列表的项是 ol 元素的 li 元素子节点。

<ol>
  <li>沿着这条路走到头</li>
  <li>右转</li>
  <li>直行穿过第一个十字路口</li>
  <li>在第三个十字路口处左转</li>
  <li>继续走 300 米，学校就在你的右手边</li>
</ol>

# ul

ul (opens new window) 元素表示一个无序项目列表。

列表的项是 ul 元素的 li 元素子节点。

<ul>
  <li>豆浆</li>
  <li>油条</li>
  <li>豆汁</li>
  <li>焦圈</li>
</ul>

# dl

dl (opens new window) 元素表示由零个或多个 name-value groups 组成的关联列表。

<dl>
  <dt>内心独白</dt>
    <dd>戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。</dd>
  <dt>语言独白</dt>
    <dd>戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。</dd>
  <dt>旁白</dt>
    <dd>戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。</dd>
</dl>

# a

如果 a (opens new window) 元素具有 href 属性，则它表示由其内容标记的超链接。

<a href="https://youtu.be/tFXGhrHRLiA">星星点灯</a>

可以使用 title 属性添加支持信息。

<a href="https://youtu.be/tFXGhrHRLiA" title="星星点灯-郑智化">星星点灯</a>

# span

span (opens new window) 元素本身没有任何意义。

# 语义化元素

元素	语义
<header> (opens new window)	页眉/章节头
<nav> (opens new window)	导航链接集合
<article> (opens new window)	独立内容区块
<section> (opens new window)	文档通用分区
<aside> (opens new window)	侧边栏/附属内容
<footer> (opens new window)	页脚/章节尾

# 三、表单系统

元素	作用	重要属性
<form> (opens new window)	表单
<label> (opens new window)	标题
<button> (opens new window)	按钮
<datalist> (opens new window)	预定义选项
<fieldset> (opens new window)	表单控件组
<input> (opens new window)	数据字段	`type`、`value`、`checked`
<select> (opens new window)	选项字段
<textarea> (opens new window)	多行纯文本

# 表单容器

# form

form (opens new window) 元素允许用户通过填写表单字段来提交数据给服务器进行处理。

表单可以包含一组与之关联的控件元素，如文本框、下拉列表、单选按钮等。

这些控件可以充当编辑器，允许用户输入或选择所需的信息，最终将这些信息打包成 HTTP 请求，发送给服务器。

<form action="my-handling-form-page" method="post"></form>

# 辅助元素

# label

label (opens new window) 元素表示用户界面中的标题。

<label for="name">Name:</label>
<input type="text" id="name" name="user_name">

# button

button (opens new window) 元素表示一个由其内容标记的按钮。

<button type="submit">Send your message</button>

button 元素接受一个 type (opens new window) 属性：

submit
reset
button

还可以使用相应类型的 input 元素来生成一个按钮。

<input type="submit">

button 元素的主要优点是，input 元素只允许纯文本作为其标签，而 button 元素允许完整的 HTML 内容，允许更复杂、更有创意的按钮内容。

# datalist

datalist (opens new window) 元素代表一组 option (opens new window) 元素，这些元素代表其他控件的预定义选项。

在渲染中，datalist 元素不代表任何内容，它及其子元素应该被隐藏。

<label for="myFruit">What's your favorite fruit?</label>
<input type="text" name="myFruit" id="myFruit" list="mySuggestion">
<datalist id="mySuggestion">
  <option>Apple</option>
  <option>Banana</option>
  <option>Blackberry</option>
  <option>Blueberry</option>
  <option>Lemon</option>
  <option>Lychee</option>
  <option>Peach</option>
  <option>Pear</option>
</datalist>

# fieldset

fieldset (opens new window) 元素表示一组组合在一起的表单控件，可选地带有标题。

标题由作为 fieldset 元素的子元素的第一个 legend 元素给出。

<form>
  <fieldset>
    <legend>Fruit juice size</legend>
    <p>
      <input type="radio" name="size" id="size_1" value="small">
      <label for="size_1">Small</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_2" value="medium">
      <label for="size_2">Medium</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_3" value="large">
      <label for="size_3">Large</label>
    </p>
  </fieldset>
</form>

# 输入控件

# input

input (opens new window) 元素表示一个类型化的数据字段，通常带有一个表单控件以允许用户编辑数据。

value (opens new window) 属性是输入控件的值。当在 HTML 中指定时，为 input 元素的默认值。

<input type="text" value="by default this element is filled with this text">

所有文本框都有一些通用规范：

可以被标记为 readonly (opens new window)，用户不能修改输入值。
甚至是 disabled (opens new window)，输入值永远不会与表单数据的其余部分一起发送。
可以有一个 placeholder (opens new window)，这是文本输入框中出现的文本，用来简略描述输入框的目的。
可以使用 size (opens new window)（框的物理尺寸）和 maxlength (opens new window)（可以输入的最大字符数）进行限制。

所有选择框都有一些通用规范：

任何带有 checked (opens new window) 属性的复选框和单选按钮在加载时都会匹配 :default (opens new window) 伪类，即使它们后面不再被选中。
任何当前被选中的元素，都会匹配 :checked (opens new window) 伪类。

通过 type (opens new window) 指定要渲染的控件的类型：

text

单行纯文本编辑控件。

<input type="text" value="I'm a text field">

password

单行纯文本编辑控件，浏览器会隐藏该值，以便用户以外的其他人无法看到。
```
<input type="password">
```

hidden

不打算由用户检查或操纵的值。

<input type="hidden" id="timestamp" name="timestamp" value="1286705410">

checkbox

<input type="checkbox" id="questionOne" name="subscribe" value="yes" checked>

radio

<input type="radio" id="soup" name="meal" checked>

file

<input type="file" name="file" id="file" accept="image/*" multiple>

IDL 属性和方法：

files

HTMLInputElement.files (opens new window) 属性允许访问使用 <input type="file"> 元素选择的 FileList (opens new window)。

<input type="file">

<script>
  let input = document.querySelector('input');

  input.addEventListener('change', function () {
    let files = input.files;
    for (let i = 0; i < files.length; i++) {
      console.log(files[i].name);
    }
  });
</script>

# select

select (opens new window) 元素表示用于在一组选项中进行选择的控件。

<select id="simple" name="simple">
  <option>Banana</option>
  <option selected>Cherry</option>
  <option>Lemon</option>
</select>

选择框的默认值可以由要指定默认值的 option 元素中的 selected 属性设置，这样在页面加载后，该选项可以预先选中。

如果一个 option 元素明确设置了 value 属性，当表单提交时会提交那个选项对应的值。

如果像上面的例子那样省略了 value 属性，option 元素的内容会作为提交的值。

<select id="simple" name="simple">
  <option value="banana">Big, beautiful yellow banana</option>
  <option value="cherry">Succulent, juicy cherry</option>
  <option value="lemon">Sharp, powerful lemon</option>
</select>

默认情况下，选择框的高度足以显示单个值。可选的 size 属性控制在选择框不处于聚焦状态时，可见选项的数量。

默认情况下，选择框只允许用户选择单个值。通过向 select 元素添加 multiple 属性，可以允许用户使用操作系统提供的机制选择多个值，如按下 Ctrl 并先后单击多个值。

<select id="multi" name="multi" multiple size="2">
  <optgroup label="fruits">
    <option>Banana</option>
    <option selected>Cherry</option>
    <option>Lemon</option>
  </optgroup>
  <optgroup label="vegetables">
    <option>Carrot</option>
    <option>Eggplant</option>
    <option>Potato</option>
  </optgroup>
</select>

在多选选择框的情况下，选择框不再以下拉内容的形式显示数值，相反，所有的值都会一次性显示在一个列表中，可选的 size 属性决定了控件的高度。

option (opens new window) 元素可以嵌套在 optgroup (opens new window) 元素中，以在视觉上关联一组取值。

<select id="groups" name="groups">
  <optgroup label="fruits">
    <option>Banana</option>
    <option selected>Cherry</option>
    <option>Lemon</option>
  </optgroup>
  <optgroup label="vegetables">
    <option>Carrot</option>
    <option>Eggplant</option>
    <option>Potato</option>
  </optgroup>
</select>

在 optgroup (opens new window) 元素中，label (opens new window) 属性的值在嵌套选项之前显示。

浏览器往往在视觉上将它们与选项分开，以避免它们与实际选项混淆。

# textarea

textarea (opens new window) 元素表示元素原始值的多行纯文本编辑控件，控件的内容代表控件的默认值。

<textarea>
by default this element is filled with this text
</textarea>

# 四、交互功能

# 脚本支持

script (opens new window) 元素允许作者在他们的文档中包含动态脚本和数据块。

type (opens new window) 属性指定脚本类型：

在 HTML4 标准中，要求 script 标签有 type 特性。通常是 type="text/javascript"。
现在已经不再需要。
现代 HTML 标准已经完全改变了此特性的含义。

如果有大量的 JavaScript 代码，可以将它放入一个单独的文件。

脚本文件可以通过 src (opens new window) 添加到 HTML 文件中。

<script>
  // 内联脚本
</script>
<script src="app.js" async defer></script>

integrity (opens new window) 属性表示该元素负责的请求的完整性元数据，值为文本。未指定 src 属性时，不得指定 integrity 属性。

integrity (opens new window) 是用来解决由于 CDN 资源被污染而导致的 XSS。当浏览器检测加载脚本签名与给定的签名不一致时，会拒绝执行该脚本。

启用 SRI 策略后，浏览器会对资源进行 CORS 校验，这就要求被请求的资源必须同域，或者配置了 Access-Control-Allow-Origin 响应头。

要使用 SRI，只需要在原有的标签里增加 integrity 属性即可，这个属性的签名算法支持 sha256、sha384 和 sha512，签名算法和摘要签名内容用 - 分隔。

<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous">

可以使用 openssl 生成摘要签名，并进行 Base64 编码。

curl -fsSL https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css \
  | openssl dgst -sha384 -binary \
  | openssl enc -base64 -A

# 多媒体嵌入

# video

video (opens new window) 元素用于播放视频或电影，以及带有字幕的音频文件。

<video controls>
  <source src="movie.mp4" type="video/mp4">
</video>

# audio

audio (opens new window) 元素表示声音或音频流。

<audio src="sound.ogg"></audio>