从今天开始学习html啦，以下是我在菜鸟教程的学习笔记。
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题（显示搜索引擎页面的标题）
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题 h1-h6
<p> 元素定义一个段落
<span>span标签用来组合文档中的行内元素
<a>HTML链接 例：<p><a href="{{a}}
" target="_blank">https://www.baidu.com/">{{a}}</a></p>
<img>HTML图像 例：<img src="/images/logo.png" width="258" height="39" />
<br>换行，例：<h1>{{ msg }}</h1><br>
<hr> 标签在 HTML 页面中创建水平线。无结束标签
注释：<!-- 这是一个注释 -->
*<template>：不带任何自身属性，不影响布局的标签
大小写问题：标签写法要用小写字母（有些版本对大小写可认为相同，而xhtml中强制使用小写）
文本格式化：
加粗：<b></b>
斜体：<i></i>
上标：<sub></sub>
下标：<sup></sup>
链接：
文字链接：<a href="{{b}}" target="_blank">https://zhidao.baidu.com/">{{b}}</a>
图片链接：
<a href="" target="_blank">https://www.baidu.com/">
<img src="./assets/音符.png" width="100" height="100"></a>
在当前页面链接到指定位置：在跳转处插入ID（书签）
<p><a href="#c">{{ p }}</a></p>：单击变量p的内容即可定位到变量c的内容处
<h2><a id="c">{{ c }}</a></h2>
字体样式：
font-weight：字体，
color：颜色，background：背景颜色，
font-size：字体大小,
text-align：文本对齐方式
例：标题h1样式
<style scoped>
h1 {
font-weight: normal;
color: #42b983;
background-color: aqua;
}
</style>
图像：
图像由<img> 标签定义。<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，需要使用源属性（src）。源属性的值是图像的 URL 地址，即存储图像的位置。
<img src="url" alt="some_text">
alt属性：用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。
Html标签
<a>：超链接
<b>：粗体文字
<base> ：为页面上的所有链接规定默认地址或默认目标。
//必须在head内
<head>
<base href="http://www.w3school.com.cn/i/" />
<base target="_blank" />
</head>必需的属性
属性 | 值 | 描述 |
URL | 规定页面中所有相对链接的基准 URL。 |
可选的属性
属性 | 值 | 描述 |
| 在何处打开页面中所有的链接。 |
4. <i> ：显示斜体文本效果
5. <li> 标签定义列表项目。
<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中
6.
<link> 标签定义文档与外部资源的关系。
<link> 标签最常见的用途是链接样式表。
//必须在head内
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>7.<u> 标签为文本添加下划线：
<p>如果文本不是超链接，就不要<u>对其使用下划线</u>。</p>8.<label>标签
<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
可实现：在标签中添加图片，不用勾选复选框，直接点击图片也可以勾选
属性
css盒子模型
margin：外边距
border：边框
padding：内边距
content：内容
盒子真正的高度为：内容高度（height）+上下填充（padding）+上下边距（margin）+上下边框（border）
布局样式
常规布局：基于垂直的块（block）和基于水平的内联（inline）
优：适用于页面
缺：它们对于大型或复杂的应用程序布局来说缺乏灵活性（特别是在改变方向，调整大小，拉伸，收缩等方面）
弹性布局：flex,提供一个更有效地布局、对齐方式，并且能够使容器中的子元素大小未知或动态变化情况下仍然能够分配好子元素之间的空间。
弹性布局（display:flex;）
Flex 布局的主要思想是使父容器能够调节子元素的宽度/高度（和排列顺序），从而能够最好地填充可用空间（主要是为了适应所有类型的显示设备和屏幕尺寸）。flex布容器能够放大子元素使之尽可能填充可用空间，也可以收缩子元素使之不溢出。
设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
适合小规模布局
flex: 1即为flex-grow:1，
经常用作自适应布局，将父容器的display: flex，侧边栏大小固定后，将内容区flex: 1，内容区则会自动等分占满剩余空间。
- flex-direction:主轴方向
- justify-content：子元素的水平对齐方式
space-between 是两端对齐。
使每个矩形子元素(flex项)之间的间隔是相等的，但两端的矩形子元素(flex项)不会和容器之间产生间隔。
space-around 则会在每个矩形子元素(flex项)的两边产生一个相同大小的间隔
两端的矩形子元素(flex项)和容器之间的间隔大小正好是两个矩形子元素(flex项)之间间隔大小的一半（每个矩形子元素产生的间隔不会重叠，所以间隔变成两倍）。
- align-item（单根轴线、单行单列）：子元素的垂直对齐方式
- align-content（多根轴线、多行多列）：~
135
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
