初级篇 3 - HTML 或 CSS 文件中不懂的标签属性详解

news2024/11/25 1:57:06

一、遇到的不懂的标签属性详解
- 1、meta 标签的 http-equiv 属性(元标签)
二、遇到的 CSS 不懂的属性详解
- vertical-align
三、如何规避 HTML 自动换行 - 脱离文档流
- 配置属性 display: inline-block
- - 理解 inline、inline-block、block
  - - inline
- 总结：
四、导航栏自动弹出子菜单 - 需点击主菜单后才弹出子菜单
- 导航栏自动弹出子菜单代码演示：
- 导航需要点击才能显示隐藏的子菜单
- 解析 js 代码和 CSS 代码
- - let 关键字的作用 - var 定义变量的缺点
  - 关于鼠标弹出菜单的方法解析

一、遇到的不懂的标签属性详解

1、meta 标签的 http-equiv 属性(元标签)

下面是 http-equiv 属性的三个参数

content-type

规定文档的字符编码。

实例：

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

default-style

规定要使用的预定义的样式表。

实例：

<meta http-equiv="default-style" content="the document's preferred stylesheet">

注释：上面 content 属性的值必须匹配同一文档中的一个 link 元素上的 title 属性的值，或者必须匹配同一文档中的一个style 元素上的 title 属性的值。

refresh

定义文档自动刷新的时间间隔。

实例：

<meta http-equiv="refresh" content="300">

注释：值 “refresh” 应该慎重使用，因为它会使得页面不受用户控制。在 W3C’s Web 内容可访问性指南中使用 “refresh” 会到导致失败。

二、遇到的 CSS 不懂的属性详解

vertical-align

基线属性

分三种参数

top
middle
bottom

middle 可以将图片和文字居中对齐

用法：
可以在 HTML 文件内的标签内定义 style="vertical-align:middle" 或者在 CSS 文件内的类内定义vertical-align:middle;

三、如何规避 HTML 自动换行 - 脱离文档流

配置属性 display: inline-block

理解 inline、inline-block、block

inline

inline
不会保存之前在 CSS 文件内配置的 width、height ，即不会保留上下外边距/内边距。

inline-block
如果设置了 display: inline-block，将保留上下外边距/内边距。允许在元素上设置宽度和高度。

display: block
自动添加换行符 <br>

总结：

关键在于 display: inline-block 属性

四、导航栏自动弹出子菜单 - 需点击主菜单后才弹出子菜单

导航栏自动弹出子菜单代码演示：

<!DOCTYPE>
<html>
<head>
<title>菜单栏</title>
<style type="text/css">
.sub_menue{
	display:none;              /*先将子菜单设置为隐藏*/
}
li:hover .sub_menue{
	display:block;             /*设置鼠标滑过动作，以块级元素的形式显示出子菜单*/
}
</style>
</head>
 
<body>
<ul class="menue">
<li>菜单1
    <ul class="sub_menue">
      <li>子菜单1</li>
      <li>子菜单2</li>
    </ul>
</li>
  <li>菜单2
     <ul class="sub_menue">
       <li>子菜单3</li>
	   <li>子菜单4</li>
     </ul>
  </li>
</ul>	
</body>
</html>

效果图
在这里插入图片描述
先说明，并没有用鼠标点击菜单，而是鼠标划过去了，就会自动弹出子菜单栏。

导航需要点击才能显示隐藏的子菜单

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品信息</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>后台界面</header>
<main>
    <aside id="menu">
        <li>
            <strong>主菜单</strong>
            <ul class="display">
                <li>子菜单</li>
                <li>子菜单</li>
            </ul>
        </li>
        <li><strong>产品管理</strong></li>
        <li><strong>库存管理</strong></li>
        <li><strong>权限设置</strong></li>
        <li><strong>系统设置</strong></li>
    </aside>
</main>

<script>
    // 控制导航折叠
    let menus = document.querySelectorAll("#menu > li");
    let sub = document.querySelector("#menu > li > ul");
    menus.forEach(function (menu) {
        menu.firstElementChild.addEventListener('click', function (evt) {
            // 获取子菜单元素ul
            evt.target.nextElementSibling.classList.toggle('display');
        })
    }, false);
</script>
</body>
</html>

style.css

* {
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
}

body{
    height: 100vh;
    display: flex;
    flex-flow: column nowrap;
    /*控制鼠标双击复制文本*/
    -ms-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
header{
    display: flex;
    height: 70px;
    background-color: #464d5f;
    align-items: center;
    font-size: 1.8rem;
    padding-left: 24px;
    color: white;
}
main{
    flex: 1;
    background-color: #ccddcc;
    overflow: hidden;
}
main > aside {
    display: flex;
    flex-flow: column nowrap;
    width: 300px;
    height: 100%;
    padding-top: 10px;
    background-color: #4d5669;

}
main > aside > li{
    cursor: pointer;
}

main > aside > li strong{
    display: block;
    padding-left: 24px;
    height: 60px;
    line-height: 60px;
    color: #f2f2f2;
}
main > aside > li > ul {
    background-color: #464d5f;
}
/*控制子菜单隐藏*/
.display{
    display: none;
}

main > aside > li > ul > li{
    padding: 5px 48px ;
    color: #f2f2f2;
}

目录结构：
在这里插入图片描述
效果图：

解析 js 代码和 CSS 代码

let 关键字的作用 - var 定义变量的缺点

let 声明的变量只在 let 命令所在的代码块内有效。
const 声明一个只读的常量，一旦声明，常量的值就不能改变。

其实就是定义一个局部变量，如下所示：

使用 var 定义变量

{ 
    var x = 2; 
}
// 这里可以使用 x 变量

在 ES6 之前，是没有块级作用域的概念的。
ES6 可以使用 let 关键字来实现块级作用域。
let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问。

{ 
    let x = 2;
}
// 这里不能使用 x 变量

使用 var 关键字重新声明变量可能会带来问题。

在块中重新声明变量也会重新声明块外的变量：

var x = 10;
// 这里输出 x 为 10
{ 
    var x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 2

let 关键字就可以解决这个问题，因为它只在 let 命令所在的代码块 {} 内有效。

var x = 10;
// 这里输出 x 为 10
{ 
    let x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 10

关于鼠标弹出菜单的方法解析

这是 html 文件内的内容

<ul id="menu">
        <li><a href="#home"><b>主页</b></a>
        <ul class="display">
            <li>
                <a href="../test.html" title="子菜单1"><b>子菜单1</b></a>
            </li>
        </ul>

<script>
        // 控制导航折叠
        let menus = document.querySelectorAll("#menu");
        menus.forEach(function (menu) {
            menu.firstElementChild.addEventListener('click', function (evt) {
                // 获取子菜单元素ul
                evt.target.nextElementSibling.classList.toggle("display");
            })
        }, false);
    </script>

classList.toggle

会自动对id为menu的全部元素进行查找，获得了类似字典的类型的对象，然后添加按钮"click"的事件，该按钮事件被之前的 menu对象绑定了，当触发了按钮事件，也就是id 为menu里面的其他元素，ul标签，在这里是 evt 变量，自动执行了类似这种语句 let ul= document.querySelectorAll("#menu li ul"); 的操作，然后获取了id为 menu下的 li > ul 标签对象，然后对这个对象进行判断，如果存在 display 类，则删除该类，又或者没有 display类，就会自动加上 display类