【hover隐藏·HTML元素】

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 标签，

~

标签，无序列表（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>