当前位置：首页 > news >正文

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

news 2025/7/7 0:34:20

一、遇到的不懂的标签属性详解
- 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) {// 获取子菜单元素ulevt.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) {// 获取子菜单元素ulevt.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类

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

目录一、遇到的不懂的标签属性详解1、meta 标签的 http-equiv 属性(元标签)二、遇到的 CSS 不懂的属性详解vertical-align三、如何规避 HTML 自动换行 - 脱离文档流配置属性 display: inline-block理解 inline、inline-block、blockinline总结：四、导航栏自动弹出子…...

编程日记 2023/3/12 3:54:26

【C语言】每日刷题 —— 牛客语法篇（4）

🚀🚀前言大家好，继续更新专栏 c_牛客，不出意外的话每天更新十道题，难度也是从易到难，自己复习的同时也希望能帮助到大家，题目答案会根据我所学到的知识提供最优解。 🏡个人主页&am…...

编程日记 2023/3/12 3:53:22

HashMap ConcurrentHashMap介绍

目录 HashMap 数据结构重要成员变量 Jdk7-扩容死锁分析单线程扩容多线程扩容 Jdk8-扩容 ConcurrentHashMap 数据结构并发安全控制源码原理分析重要成员变量协助扩容helpTransfer 扩容transfer 总结 CopyOnWrite机制源码原理 HashMap 数据结构数组…...

编程日记 2023/3/12 3:52:17

C++语法规则3（C++面向对象）

多态 C多态意味着调用成员函数时，会根据调用函数的对象的类型来执行不同的函数； 形成多态必须具备三个条件： 必须存在继承关系；继承关系必须有同名虚函数（其中虚函数是在基类中使用关键字 virtual 声明的函数&#…...

编程日记 2023/3/12 3:51:14

Python tkinter 如何实现网站下载工具？将所有数据一键获取

前言铁汁们有没有想过，如何把几个代码的功能结合到一起呢？ 有想过的话，有没有实现过呢？ 其实很简单的啊，咱就写一个界面就好了，想要哪个代码运行，鼠标轻轻一点就行开发环境 python 3.8: 解…...

编程日记 2023/3/12 3:50:10

第六章：C语言数据结构与算法初阶之栈

系列文章目录文章目录系列文章目录前言一、栈二、栈的实现三、接口函数的实现1、初始化2、销毁栈3、压栈与出栈4、判空5、元素个数6、返回栈顶元素四、栈中元素的访问总结前言栈：一种特殊的线性表，其只允许在固定的一端进行插入和删除元素操作。一、…...

编程日记 2023/3/12 3:47:58

Android学习之WebView

什么是WebView WebView是Android中UI组件的一种，WebView基于webkit内核，不过由于兼容性的原因在Android5.0后改为了Chromium内核。 WebView可以用来展示网页，常用于我们不想打开浏览器但又想浏览网页的情况。 WebView的使用 WebVeiw的常用…...

编程日记 2023/3/12 3:46:55

3/11 考试总结

时间安排 7:30–7:50 读题，T1 是个利用随机性的题目，T2 dp,T3 不知道是啥。 7:50–8:30 T1,对于随机有个结论时最值突变不超过 log ，于是可以处理出所有 log 个区间然后统计答案，但这暴力做是个 3log 铁定过不去。 8:30–8:50 T2…...

编程日记 2023/3/12 3:44:42

Leetcode 141.环形链表 142环形链表II

141环形链表文章目录快慢指针快慢指针代码思路： slow 和fast 指向 head slow走一步，fast走两步没有环： fast每次走2步 ，如果 fast 最终遇到NULL(链表中的元素是偶数)或者fast->next(链表中的元素是奇数)遇到NULL&#xf…...

编程日记 2023/3/12 3:43:38

hibernate学习（五）

hibernate学习（五） hibernate的一对多关联映射： 一、数据库表与表之间关系一对多建表原则： 多对多的建表原则： 一对一建表原则： （1）唯一外键对应： （…...

编程日记 2023/3/12 3:42:36

STM32CubeIDE 快速开发入门指南

描述 STM32CubeIDE是一体式多操作系统开发工具，是STM32Cube软件生态系统的一部分。 STM32CubeIDE是一种高级C/C开发平台，具有STM32微控制器和微处理器的外设配置、代码生成、代码编译和调试功能。它基于Eclipse/CDT™框架和用于开发的GCC工具链&#xf…...

编程日记 2023/3/12 3:41:33

华为OD机试 - 火星文计算（C 语言解题）【独家】

最近更新的博客华为od 2023 | 什么是华为od，od 薪资待遇，od机试题清单华为OD机试真题大全，用 Python 解华为机试题 | 机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南）华为od机试，独家整理已参加机试人员的实战技巧文章目录使用说明本期题目：火星文计…...

编程日记 2023/3/12 3:39:17

超超超超保姆式详解——字符函数和字符串函数（学不会打我）上

目录长度不受限制的字符串函数 strlen部分 strlen函数的易错小知识 strlen函数的实现 strcpy部分 strcat部分自己实现strcat strstr函数部分简单例子： 分析 strcmp部分长度受限制的字符串函数 strncpy 简单例子 strncat strncmp 简单例子 &…...

编程日记 2023/3/12 3:38:13

Data mesh 笔记

有用的网站 https://www.datamesh-architecture.com/ https://www.agilelab.it/data-mesh-in-action https://learn.microsoft.com/en-us/azure/cloud-adoption-framework/scenarios/cloud-scale-analytics/well-architected-framework https://www.datamesh-architecture.com…...

编程日记 2023/3/12 3:37:12

目录