这是我参与「第四届青训营 」笔记创作活动的第1天
上课内容：
前端技术栈：html（内容），css（样式），js（行为）通过http协议提交到服务器端。
要求：美观、安全、兼容、无障碍、性能、体验。
前端的边界：node、electron、react、web rtc、webGL、webassembly
开发环境：编辑器vscode、vim、webstrom
html：HyperText(超文本，图片、标题等) Markup Language
doctype html说明：
- doctype：说明HTML的版本，决定渲染模式
- head：标题、编码等
- body：用户看到的 解析成DOM树
HTML语法：
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合
- 属性值推荐双引号包裹
- 某些属性值可以省略
标题：h1~h6
列表：
- 有序列表：ol和li
- 无序列表：ul和li
- 定义列表：dl和dt（描述列表的标题）、dd（描述）
链接：<a href="" target="_blank"></a>（新窗口打开）
图片：<img src="" alt="" width=""/>（图片不被加载时加载文字描述）
音频：<audio src="" controls></audio>
视频：<video src="" controls></video>
输入：
<input type="">
<input type="" min="" max="">
<texterea></texterea>
引用：
-
快捷引用：
<blockquote cite=""></blockquote>（引用地址） -
短引用
<cite></cite>（一般指引用章节）<q></q>（一般指引用具体内容） -
代码引用
<code>标签
等宽字体：<pre></pre>
<strong>加粗
<em>倾斜
内容划分：
lang属性表示内容所用语言
扩展内容：
元素分类：
graph TD
元素 --> 主根元素
元素 --> 文档元数据 --> 含有页面的相关信息
元素 --> 分区根元素 --> 明确大纲区分内容
元素 --> 内容分区
元素 --> 文本内容
元素 --> 内联文本语义 --> 定义一个单词一行内容,或任意文字的语义\结构或样式
元素 --> 图片和多媒体
元素 --> 内联内容
元素 --> SVG和MathML
元素 --> 脚本
元素 --> 编辑标识
元素 --> 表格内容
元素 --> 表单
元素 --> 交互元素
元素 --> web组件
元素 --> 弃用
元素：
）标签用来定义表中的一组列表。| 元素 | 元素 | 描述 |
|---|---|---|
| 主根元素 | html | html文档的根（顶级元素） |
| --- | --- | --- |
| 文档元数据 | base | 所有相对URL的根URL（唯一） |
| head | 配置信息，包括文档样式、脚本等 | |
| link | 常用于链接样式表 | |
| meta | 表示那些不能由其它 HTML 元相关（meta-related）元素(base、link, script、style 或 title）之一表示的任何Metadata信息。 | |
| style | 通常是css的格式 | |
| title | 标题栏或标签页上的标题，只包含文本，其他无效 | |
| --- | --- | --- |
| 分区根元素 | body | 文档内容，document.body 属性可访问脚本 |
| --- | --- | --- |
| 内容分区 | address | 提供联系信息 |
| article | 表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构 | |
| aside | 侧边栏或者标注框（call-out boxes） | |
| footer | 包含该章节作者、版权数据或者与文档相关的链接等信息 | |
| header | 一组介绍性的或是辅助导航的实用元素，如 Logo、搜索框 | |
| h1~h6 | 标题 | |
| main | 主体 | |
| nav | 在当前文档或其他文档中提供导航链接，如目录索引 | |
| section | 包含在 HTML 文档中的独立部分，它没有更具体的语义元素来表示 | |
| --- | --- | --- |
| 文本内容 | blockquote | 引用 |
| dd | 列表，dl --> dt--> dd | |
| dl | 用于展示词汇表或者元数据 (键 - 值对列表) | |
| dt | 仅能作为 dl 的子元素出现 | |
| div | 流内容容器 | |
| figcapton | 描述其父节点 figure 元素里的其他数据 | |
| figure | 与figcaption 配合，经常是在主文中引用的图片，插图，表格，代码段等 | |
| hr | 表示段落级元素之间的主题转换 | |
| li | 必须包含在一个父元素里：一个有序列表 (ol)，一个无序列表 (ul)，或者一个菜单 (menu) | |
| menu | 可能出现在屏幕顶端的列表菜单，也可是那些隐藏在按钮之下、当点击按钮后显示出来的文本菜单 | |
| ol | 有序列表 | |
| ul | 无序列表 | |
| p | 段落，块级元素 | |
| pre | 预定义格式文本，以等宽字体的形式展现出来，文本中的空白符如空格和换行符都会显示出来 | |
| --- | --- | --- |
| 内联文本语义 | a | 通过href属性创建超链接 |
| abbr | 可以通过可选的 title 属性提供完整的描述 | |
| b | 吸引读者的注意到该元素的内容上，加粗 | |
| bdi | 双向隔离元素，将其包含的文本与周围的文本隔离 | |
| bdo | 双向文本替代元素改写了文本的方向性 | |
| br | 换行 | |
| cite | 引用作品，必须包含作品的标题 | |
| code | 呈现一段计算机代码，等宽字体 | |
| data | 将一个指定内容和机器可读的翻译联系在一起。但是，如果内容是与时间或者日期相关的，则一定要使用 time | |
| time | 表示 24 小时制时间或者公历时间，若表示日期则也可包含时间和时区。 | |
| dfn | 表示术语的一个定义 | |
| em | 标记出需要用户着重阅读的内容，可嵌套 | |
| i | 区分普通文本，斜体 | |
| kdb | 键盘输入元素，行内元素 | |
| mark | 引用或符号目的而标记或突出显示的文本 | |
| q | 封闭的并且是短的行内引用的文本，长引用用blockquote | |
| rp | 为那些不能使用 ruby 元素展示 ruby 注解的浏览器，提供随后的圆括号。 | |
| rt | 包含字符的发音，字符在 ruby 注解中出现，它用于描述东亚字符的发音。这个元素始终在 ruby 元素中使用 | |
| ruby | 展示东亚文字注音或字符注释 | |
| s | 使用删除线来渲染文本，但提倡使用 del 和 ins 元素 | |
| samp | 标识计算机程序输出，通常使用浏览器缺省的 monotype 字体 | |
| small | 將使文本的字体变小一号，被重新定义为表示边注释和附属细则，包括版权和法律文本 | |
| span | 通用行内容器，行内元素 | |
| strong | 文本十分重要，一般用粗体显示 | |
| sub | 定义了一个文本区域，与主要的文本相比，应该展示得更低并且更小。 | |
| sup | 定义了一个文本区域，与主要的文本相比，应该展示得更高并且更小。 | |
| u | 需要标注为非文本化的内联文本域。实线下划线 | |
| var | 表示变量的名称，或者由用户提供的值 | |
| wbr | 一个文本中的位置，其中浏览器可以选择来换行 | |
| --- | --- | --- |
| 图片和多媒体 | area | 在图片上定义一个热点区域，可以关联一个超链接。仅在map元素内部使用。 |
| audio | 嵌入音频,可嵌入多个 | |
| img | 嵌入图像 | |
| map | 与 area 属性一起使用来定义一个图像映射 | |
| track | 被当作媒体元素—audio 和 video的子元素来使用。它允许指定时序文本字幕 | |
| video | 嵌入视频 | |
| --- | --- | --- |
| 内嵌内容 | embed | 将外部内容嵌入文档中的指定位置 |
| iframe | 内联框架元素，表示嵌套的browsing context。它能够将另一个 HTML 页面嵌入到当前页面中 | |
| object | 引入一个外部资源 | |
| picture | 通过包含零或多个 source 元素和一个 img 元素来为不同的显示/设备场景提供图像版本 | |
| source | 元素为 picture, audio 或者 video 元素指定多个媒体资源。这是一个空元素 | |
| portal | ||
| --- | --- | --- |
| SVG和MathML | svg | 一个容器，它定义了一个新的坐标系和视口。它用作 SVG 文档的最外层元素，也可以用于在 SVG 或 HTML 文档中嵌入 SVG 片段。 |
| math | MathML 中的顶级元素是 <math>。每一个有效的 MathML 实例必须包含在 <math> 标记中。此外，不可以在一个 <math> 元素中嵌套另一个，但是你可以在其中包含任意数量的其他子元素。 | |
| --- | --- | --- |
| 脚本 | canvas | 通过 JavaScript（Canvas API 或 WebGL API）绘制图形及图形动画。 |
| noscript | 定义脚本未被执行时的替代内容 | |
| script | 包含全局属性 | |
| --- | --- | --- |
| 编辑标识 | del | 表示一些被从文档中删除的文字内容 |
| ins | 已经被插入文档中的文本 | |
| --- | --- | --- |
| 表格内容 | caption | 展示一个表格的标题， 它常常作为 table 的第一个子元素出现 |
| col | 定义表格中的列，通常位于colgroup元素内 | |
| colgroup | 表格列组（Column Group | |
| table | 表示表格数据 | |
| tbody | 内容 | |
| td | 定义了一个包含数据的表格单元格 | |
| tfoot | 一组表格中各列的汇总行 | |
| th | 表格内的表头单元格。这部分特征是由 scope and headers 属性准确定义的 | |
| thead | 一组定义表格的列头的行 | |
| tr | 表格中的行。 同一行可同时出现td 和th 元素 | |
| --- | --- | --- |
| 表单 | button | 可点击的按钮 |
| datalist | 包含了一组option元素，这些元素表示其它表单控件可选值 | |
| fieldset | 包含所有全局属性 | |
| form | 文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息 | |
| input | 基于 Web 的表单创建交互式控件，以便接受来自用户的数据 | |
| label | 用户界面中某个元素的说明 | |
| legend | 用于表示其父元素 fieldset 的内容标题 | |
| meter | 显示已知范围的标量值或者分数值 | |
| option | 在 select, optgroup 或 datalist 元素中包含的项 | |
| optgroup | 为select 元素中的选项创建分组 | |
| output | 计算或用户操作的结果 | |
| progress | 用来显示一项任务的完成进度 | |
| select | 一个提供选项菜单的控件 | |
| textarea | 一个多行纯文本编辑控件 | |
| --- | --- | --- |
| 交互元素 | details | 创建一个挂件，仅在被切换成展开状态时，它才会显示内含的信息 |
| summary | 一个details元素的一个内容的摘要，标题或图例 | |
| dialog | 一个对话框或其他交互式组件，例如一个检查器或者窗口 | |
| --- | --- | --- |
| web组件 | slot | 是 Web 组件内的一个占位符 |
| template | 用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以在运行时使用 js 实例化 | |
| --- | --- | --- |
块级元素
-
display:block -
<address>联系方式信息。 -
<article>文章内容。 -
<aside>伴随内容。 -
<blockquote>块引用。 -
<dd>定义列表中定义条目描述。 -
<div>文档分区。 -
<dl>定义列表。 -
<fieldset>表单元素分组。 -
<figcaption>图文信息组标题 -
<figure>图文信息组 (参照<figcaption>)。 -
<footer>区段尾或页尾。 -
<form>表单。 -
<h1>(en-US),<h2>(en-US),<h3>(en-US),<h4>(en-US),<h5>(en-US),<h6>(en-US)标题级别 1-6. -
<header>区段头或页头。 -
<hgroup>标题组。 -
<hr>水平分割线。 -
<ol>有序列表。 -
<p>行。 -
<pre>预格式化文本。 -
<section>一个页面区段。 -
<table>表格。 -
<ul>无序列表。
