CSS实现hover状态隐藏
CSS 中的 hover 状态可以在用户鼠标悬停在元素上时触发特定样式。
一、定义一个 CSS 类
我们需要定义一个 CSS 类，让它能够隐藏元素。可以通过设置元素的 display 属性为 none 来实现。
.hide{
display: none;
}
二、将这个类应用于需要隐藏的元素的初始状态
<div class="hide">
<p>这是需要隐藏的元素</p>
</div>
这样，在元素没有被悬停时就会隐藏。
三、将:hover 选择器与上面定义的 .hide 类组合使用
用 CSS 中的 hover 状态去控制这个元素的显示与隐藏
<div class="hoverable">
<p class="hide">这是需要隐藏的元素</p>
</div>
.hoverable:hover .hide{
display: block;
}
参考：https://www.yzktw.com.cn/post/1553789.html
v-show
根据真假切换元素的显示状态
- 原理是修改元素的display，实现显示隐藏，指令后面的内容，最终都会解析为布尔值
- 值为true元素显示，值为false元素隐藏（操作地址，频繁切换时使用，切换小消耗小）
v-if
根据真假切换元素的显示状态（操作dom元素）（不频繁切换时使用）
align
- 设置文字在元素内显示的位置
- align=“center”/left/right
无序列表/有序列表/自定义列表
有序列表
<ol type="I" start="4">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ol>
无序列表
自定义列表
用 dl 标签表示自定义列表，其中的 dt 是代表列表项，而 dd 是列表项的描述。
<dl>
<dt>芍药花</dt>
<dd>列表项一的描述</dd>
<dt>列表项二</dt>
<dd>列表项二的描述</dd>
</dl>
行内标签（可以显示在同一行）
a 标签，span 标签（span 标签最大的特点时可以把很多标签放在同一行），strong 标签，img 标签
块级标签
div 标签， <h1> ~ <h6>标签，无序列表（ul）、有序列表（ol）、自定义列表（dl）
form标签
- form 标签有两个重要的属性，action 和 method 属性，其中 action 的属性值是表单提交的地址，method 的属性值是提交的方法。
- method 属性规定了表单提交方式，最常用的有两种方式，分别是 GET 和 POST。其中 GET 是把表单中的参数放置在 HTTP 请求的头部发送给服务器，而 POST 是将请求参数置于请求体内发送。
<form action="表单提交地址" method="提交方法"></form>
文本类表单元素
<input type="text" />
选择类表单元素
注意：使用单选框时，每个选项一定要设置相同的 name 值，否则就没有单选的效果。
- type=“reset” 是重置按钮
<form>
<!--单选框-->
<input type="radio" name="选项名" value="提交值" />
<!--复选框-->
<input type="checkbox" name="选项名" value="提交值" />
<input type="reset" />
</form>
文件和发送类型表单
type=“file” 表示文件类型表单元素
<input type="file" name="表单名字" accept="上传文件的格式" />
<input type="submit" name="表单名字" value="表单名" />
效果如下：
下拉列表
通过 select 和 option 标签可以实现下拉列表框，select 标签用于显示可供用户选择的下拉列表，其中的每个选项都由 option 标签标识。
<select>
<option>选项一</option>
<option>选项二</option>
<option>选项三</option>
</select>
<form>
<p>
学历：
<select name="edu">
<option value="0">初中</option>
<option value="1">高中</option>
<option value="2">大专</option>
<option value="3" selected="selected">本科</option>
<option value="4">硕士</option>
<option value="5">博士</option>
<option value="6">其他</option>
</select>
就业城市：
<select name="city" multiple="multiple">
<option value="A" selected="selected">北京</option>
<option value="B">上海</option>
<option value="C">深圳</option>
<option value="D">广州</option>
<option value="E">其他</option>
</select>
</p>
<p><input type="submit" name="submit" value="提交" /></p>
</form>
