这是我参与「第四届青训营 」笔记创作活动的的第1天
前端
前端主要实现图形界面的人机交互。
前端技术栈：HTML（内容）、CSS（样式）、JavaScript（行为）
前端需要关注的几个方面：功能、美观、无障碍、兼容、性能、安全 （注重用户体验）
HTML基础
1. HTML文档基本结构
<!DOCTYPE html>
<html>
<head>
<title></title>
<style></style>
</head>
<body>
<p></p>
</body>
</html>
< ！doctype >声明html文档的类型，位于文档的最开头，向浏览器说明文档的规范< html >根标签，用于告知浏览器自身是一个html的文档< head >头部标签，用于定义HTML文档的头部信息，head标签中可以嵌套< body >主体标签，用于定义网页的主要显示的内容，文本图片音频视频等
2. HTML语法
- 标签属性不区分大小写，一般用小写
- 空标签不闭合，如：input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，如：required、readonly
3. HTML常用标签
标题标签：h1-h6(从大到小）
<h1>h1标签</h1>
<h2>h2标签</h2>
<h3>h3标签</h3>
<h4>h4标签</h4>
<h5>h5标签</h5>
<h6>h6标签</h6>
列表标签
- 有序列表ol:在ol内输入需要数量的li标签，内容需要写在li标签内部
<ol>
<li>有序标签</li>
<li>有序标签</li>
<li>有序标签</li>
<li>有序标签</li>
</ol>
- 无序列表ul:在ul内输入需要数量的li标签，内容需要写在li标签内部
<ul>
<li>无序标签</li>
<li>无序标签</li>
<li>无序标签</li>
<li>无序标签</li>
</ul>
- 自定义列表dl：dt是列表中每个元素的标题标签，内容需写在dd标签内部（dt、dd可以多对多）
<dl>
<dt>电视剧</dt>
<dd>导演:xxx</dd>
<dd>演员:xxx、xxx、xxx</dd>
</dl>
链接标签
<a>标签定义超链接，用于从一张页面链接到另一张页面，其最重要的属性是 href 属性，它指示链接的目标。
常用的属性:
1）href：链接指向的页面的URL
2）target：规定在何处打开链接文档
<a href="#" target="">超链接</a>
图片标签
<img>标签向网页中嵌入一幅图像。
注意，从技术上讲， 标签并不会在网页中插入图像，而是从网页上链接图像。
标签创建的是被引用图像的占位空间。
| 属性 | 值 | 描述 |
|---|---|---|
| alt | text | 规定图像的替代文本。 |
| src | URL | 规定显示图像的 URL。 |
音频标签
<audio>标签是 HTML 5 的新标签。
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放。 |
| muted | muted | 规定视频输出应该被静音。 |
| preload | preload | 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 |
| src | url | 要播放的音频的 URL。 |
视频标签
<video>标签定义视频，比如电影片段或其他视频流， 也是 HTML 5 的新标签。
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| height | pixels | 设置视频播放器的高度。 |
| loop | loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放。 |
| muted | muted | 规定视频的音频输出应该被静音。 |
| poster | URL | 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。 |
| preload | preload | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 |
| src | url | 要播放的视频的 URL。 |
| width | pixels | 设置视频播放器的宽度。 |
input标签
<input>标签用于搜集用户信息。 根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。在 HTML 中，<input>标签没有结束标签,且必须被正确地关闭。
以下是input标签的常用属性：
| 属性 | 值 | 描述 |
|---|---|---|
| accept | mime_type | 规定通过文件上传来提交的文件的类型。 |
| align | left right top middle bottom | 不赞成使用。规定图像输入的对齐方式。 |
| alt | text | 定义图像输入的替代文本。 |
| autocomplete | on off | 规定是否使用输入字段的自动完成功能。 |
| autofocus | autofocus | 规定输入字段在页面加载时是否获得焦点。（不适用于 type="hidden"） |
| checked | checked | 规定此 input 元素首次加载时应当被选中。 |
| dirname | inputname.dir | 规定将提交的文本方向。 |
| disabled | disabled | 当 input 元素加载时禁用此元素。 |
| form | formname | 规定输入字段所属的一个或多个表单。 |
| formaction | URL | 覆盖表单的 action 属性。（适用于 type="submit" 和 type="image"） |
| formenctype | 见注释 | 覆盖表单的 enctype 属性。（适用于 type="submit" 和 type="image"） |
| formmethod | get post | 覆盖表单的 method 属性。（适用于 type="submit" 和 type="image"） |
| formnovalidate | formnovalidate | 覆盖表单的 novalidate 属性。如果使用该属性，则提交表单时不进行验证。 |
| formtarget | _blank self parent top framename | 覆盖表单的 target 属性。（适用于 type="submit" 和 type="image"） |
| height | pixels % | 定义 input 字段的高度。（适用于 type="image"） |
| list | datalist-id | 引用包含输入字段的预定义选项的 datalist 。 |
| max | numbe date | 规定输入字段的最大值。请与 "min" 属性配合使用，来创建合法值的范围。 |
| maxlength | number | 规定输入字段中的字符的最大长度。 |
| min | number date | 规定输入字段的最小值。请与 "max" 属性配合使用，来创建合法值的范围。 |
| minlength | number | 规定输入字段中所需的最小字符数。 |
| multiple | multiple | 如果使用该属性，则允许一个以上的值。 |
| name | field_name | 定义 input 元素的名称。 |
| pattern | regexp_pattern | 规定输入字段的值的模式或格式。例如 pattern=[0-9]" 表示输入值必须是 0 与 9 之间的数字。 |
| placeholder | text | 规定帮助用户填写输入字段的提示。 |
| readonly | readonly | 规定输入字段为只读。 |
| required | required | 指示输入字段的值是必需的。 |
| size | number_of_char | 定义输入字段的宽度。 |
| src | URL | 定义以提交按钮形式显示的图像的 URL。 |
| step | number | 规定输入字的的合法数字间隔。 |
| type | button checkbox file hidden image password radio reset submit text | 规定 input 元素的类型。 |
| value | value | 规定 input 元素的值。 |
| width | pixels % | 定义 input 字段的宽度。（适用于 type="image"） |
引用标签
长引用
<blockquote>标签定义块引用。
<blockquote>与</blockquote>之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。
| 属性 | 值 | 描述 |
|---|---|---|
| cite | URL | 规定引用的来源。 |
短引用
-
<cite>标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。通常引用的文本将以斜体显示。
用<cite>标签把指向其他文档的引用分离出来，尤其是分离那些传统媒体中的文档，如书籍、杂志、期刊，等等。如果引用的这些文档有联机版本，还应该把引用包括在一个<a>标签中，从而把一个超链接指向该联机版本。
<cite>标签还有一个隐藏的功能：它可以使你或者其他人从文档中自动摘录参考书目。我们可以很容易地想象一个浏览器，它能够自动整理引用表格，并把它们作为脚注或者独立的文档来显示。 -
<q>标签定义短的引用。浏览器经常在引用的内容周围添加引号。<q>标签在本质上与<blockquote>是一样的。不同之处在于它们的显示和应用。<q>标签用于简短的行内引用。如果需要从周围内容分离出来比较长的部分（通常显示为缩进的块），请使用<blockquote>标签。
代码引用
<code>用于应用计算机代码，引用内容可长可短，展示时采用特殊的编程字体。<pre><code> </code></pre>引用多行代码。
强调标签
-
<strong>把文本定义为语气更强的强调的内容。 -
<em>用来呈现为被强调的文本。
两者区别：
<em>标签是告诉浏览器把其中的文本表示为强调的内容，把这段文字用斜体来表示。如果只想使用斜体字来显示文本的话，使用<i>标签。除了强调以外，当引入新的术语或者在引用特定类型的术语或概念时作为固定样式的时候，也可以使用<em>标签。<strong>标签和<em>标签一样，用于强调文本，但它强调的程度更高。<strong>标签中的内容用加粗的字体来显示其中的内容。- em用来局部强调，strong则是全局强调。
- em表示内容的着重点，strong表示内容的重要性。strong不会改变句子所在的语意，只是强调重要性，但是em会改变句子所在的语义。
内容划分
<header>标签定义文档的页眉（介绍信息）。<nav>标签定义导航链接的部分。<main>标签规定文档的主要内容。main中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。<article>标签规定独立的自包含内容。一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。<aside>标签定义其所处内容之外的内容。aside 的内容应该与附近的内容相关。<footer>标签定义文档或节的页脚。footer元素应当含有其包含元素的信息。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。可以在一个文档中使用多个 footer元素。
