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

HTML CSS 基础复习笔记 - 框架、装饰、弹性盒子

news 2026/2/7 18:39:50

自己复习前端基础，仅用于记忆，初学者不太适合

示例代码 - HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="base.css"><title>框架元素 装饰元素 弹性盒子</title>
</head>
<body><header><h1>frame、decoration element</h1><nav><ul class="navbar"><li><a href="#">首页</a></li><li><a href="#">框架元素</a></li><li><a href="#">装饰元素</a></li><li><a href="#">弹性盒子</a></li></ul></nav></header><main><div><pre><h2>赋得古原草送别</h2><abbr title="&lt;b&gt;"><b>离离原上草</b></abbr><abbr title="&lt;strong&gt;"><strong>一岁一枯荣</strong></abbr><abbr title="&lt;i&gt;"><i>野火烧不尽</i></abbr><abbr title="&lt;em&gt;"><em>春风吹又生</em></abbr><abbr title="&lt;s&gt;"><s>远芳侵古道</s> </abbr><abbr title="&lt;del&gt;"><del>晴翠接荒城</del></abbr><abbr title="&lt;u&gt;"><u>又送王孙去</u></abbr><abbr title="&lt;mark&gt;"><mark>萋萋满别情</mark></abbr></pre></div><aside><pre>显然：b与strong、em与i、s与del的效果相同，只是含义不同；u是下划线的装饰作用，mark是标记的作用，不建议使用HTML的装饰标签，推荐CSS来做相关操作</pre></aside></main><footer>&copy; 2023 My Website. All rights reserved.</footer>
</body>
</html>

示例代码 - CSS

* {padding: 0;margin: 0;
}li, a {padding: 1rem;text-decoration: none;color: black;list-style-type: none;
}body {display: flex;flex-direction: column;justify-items: center;
}header {text-align: center;background-color: #8fb1c7;padding-top: 1.5rem;
}.navbar {display: flex;justify-content: space-around;
}main {display: flex;
}div {padding: 2rem;flex: 3;font-size: 18px;text-align: center;background-color: #72927e;
}aside {flex: 2;background-color: #735b73;padding: 2rem;font-size: 18px;
}footer {text-align: center;background-color: #727c48;
}h2 {margin: 2rem;
}

效果

框架元素

<!DOCTYPE html>                                # 说明文档类型是HTML5
<html lang="en">                               # 项目根元素
<head>                                         # 头元素，存储元数据<meta charset="UTF-8">                       # 元数据，不为用户所看见<link rel="stylesheet" href="base.css">      # 链接元素，指向css、js<title> </title>                             # 标题元素 
</head>
<body>                                         # 用户可见元素的主体<header>                                     # 头部元素，如标题、导航等最上方内容<nav>  </nav>                              # 导航</header><main>                                       # 内容主体<div>  </div>                              # 块级容器，    <aside>   </aside>                         # 侧边栏内容 </main><footer></footer>                            # 页脚内容
</body>
</html>

装饰元素

<abbr title="&lt;b&gt;"><b>离离原上草</b></abbr>
<abbr title="&lt;strong&gt;"><strong>一岁一枯荣</strong></abbr>
<abbr title="&lt;i&gt;"><i>野火烧不尽</i></abbr>
<abbr title="&lt;em&gt;"><em>春风吹又生</em></abbr>
<abbr title="&lt;s&gt;"><s>远芳侵古道</s> </abbr>
<abbr title="&lt;del&gt;"><del>晴翠接荒城</del></abbr>
<abbr title="&lt;u&gt;"><u>又送王孙去</u></abbr>
<abbr title="&lt;mark&gt;"><mark>萋萋满别情</mark></abbr>

说明：

abbr：缩写元素，鼠标悬停显示title内容

<、> ：分别对应<、>

b、strong：效果是加粗

em、i：效果是斜体

s、del：效果是删除线

u：效果是下划线

mark：效果是标记

弹性盒子

详细介绍

弹性盒子 - 学习 Web 开发 | MDN (mozilla.org)

概念

用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间，收缩以适应更小的空间。

用法

设置父元素为flex，为一个容器，其直接子元素为项目（item）可控制排版。

基础介绍

父元素属性

flex-direction：row | row-reverse | column | column-reverse;

flex-wrap：nowrap | wrap | wrap-reverse;

flex-flow：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式

align-items：flex-start | flex-end | center | baseline | stretch （单行）

子元素属性

order：属性定义项目的排列顺序。数值越小，排列越靠前，默认为0

flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

flex-shrink：定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

flex-basis：定义了在分配多余空间之前，项目占据的主轴空间，默认值为auto

flex：是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)

align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值

为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

HTML CSS 基础复习笔记 - 框架、装饰、弹性盒子

自己复习前端基础，仅用于记忆，初学者不太适合示例代码 - HTML <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initi…...

编程日记 2024/7/12 21:11:48

C++：创建线程

在C中创建线程，最直接的方式是使用C11标准引入的<thread>库。这个库提供了std::thread类，使得线程的创建和管理变得简单直接。以下是一个简单的示例，展示了如何在C中使用std::thread来创建和启动线程： 示例1：…...

编程日记 2024/7/12 21:10:47

python如何查看类的函数

Python非常方便，它不需要用户查询文档，只需掌握如下两个帮助函数，即可查看Python中的所有函数（方法）以及它们的用法和功能： dir()：列出指定类或模块包含的全部内容（包括函数、方法、…...

编程日记 2024/7/12 21:09:46

P6. 对局列表和排行榜功能

P6. 对局列表和排行榜功能 0 概述1 对局列表功能1.1 分页配置1.2 后端按页获取对局列表接口1.3 前端展示传回来的对局列表1.4 录像回放功能1.4.1 录像回放的流程1.4.2 录像回放的实现 1.5 前端分页展示 2 排行榜功能2.1 排行榜的实现 0 概述本节主要介绍了如何实现对局列表和…...

编程日记 2024/7/12 21:08:46

uniapp easycom组件冲突

提示信息 easycom组件冲突：[/components/uni-icons/uni-icons.vue,/uni_modules/uni-icons/components/uni-icons/uni-icons.vue] 问题描述老项目，在uniapp插件商城导入了一个新的uniapp官方开发的组件》uni-data-picker 数据驱动的picker选择器 …...

编程日记 2024/7/12 21:02:39

总结24个Python接单赚钱平台与详细教程，兼职月入5000+

如果说当下什么编程语言最靠谱或者比较适合搞副业？ 答案肯定100%是：Python。 python是所有语法中最简单易上手的语言，不需要特别的的英语词汇量，逻辑思维也不需要很差就能上手。而且学会了之后就能编写代码爬取各种数据&#xf…...

编程日记 2024/7/12 20:58:34

macOS 的电源适配器设置

在 macOS 的电源适配器设置中，有四个选项，每个选项都有特定的功能： Prevent your Mac from automatically sleeping when the display is off（当显示屏关闭时，防止你的 Mac 自动进入睡眠状态）：…...

编程日记 2024/7/12 20:54:31

视觉SLAM与定位之一前端特征点及匹配

视觉SLAM中的特征点及匹配参考文章或链接特征点性能的评估传统特征点和描述子（仅特征点或者特征点描述子）传统描述子基于深度学习的特征点基于深度学习的描述子基于深度学习的特征点描述子特征匹配参考文章或链接 Image Matching from Handcrafted t…...

编程日记 2024/7/12 20:49:25

开源项目的认识理解

目录开源项目有哪些机遇与挑战？ 1.开源项目的发展趋势 2.开源的经验分享（向大佬请教与上网查询） 3.开源项目的挑战开源项目有哪些机遇与挑战？ 1.开源项目的发展趋势 1. 持续增长与普及 - 开源项目将继续增长&#xff0c…...

编程日记 2024/7/12 20:48:24

gongmi层序遍历模板 vector<vector<int>> levelOrder(TreeNode *root){queue<TreeNode*> que;vector<vector<int>> res;if(root ! nullptr)que.push(root);while(!que.empty()){int size que.size();vector<int> storey;for(int i 0; i …...

编程日记 2024/7/12 20:46:23

【从零开始AI绘画6】StableDiffusionWebUI拓展的安装方法以及推荐的几个拓展

这里写自定义目录标题拓展Extention安装方法（以双语对照插件为例）1、WebUI内置的下载方式（推荐）2、git clone安装（更推荐）3、github下载安装包后解压（不推荐） 强力推荐安装的几个插…...

编程日记 2024/7/12 20:44:20

HTML5表单的自动验证、取消验证、自定义错误信息

1、自动验证通过在元素中使用属性的方法，该属性可以实现在表单提交时执行自动验证的功能。下面是关于对元素内输入内容进行限制的属性的指定。属性说明required输入内容是否不为空pattern输入的内容是否符合指定格式min、max输入的数值是否在min~max范围step判断…...

编程日记 2024/7/12 20:36:10

SpringMVC系列九: 数据格式化与验证及国际化

SpringMVC 数据格式化基本介绍基本数据类型和字符串自动转换应用实例-页面演示方式Postman完成测试特殊数据类型和字符串自动转换应用实例-页面演示方式Postman完成测试验证及国际化概述应用实例代码实现注意事项和使用细节注解的结合使用先看一个问题解决问题数据类型转换…...

编程日记 2024/7/12 20:35:09

判断链表中是否有环（力扣141.环形链表）

这道题要用到快慢指针。先解释一下什么是快慢指针。快慢指针有两个指针，走得慢的是慢指针，走得快的是快指针。在这道题，我们规定慢指针一次走一步，快指针一次走2步。如果该链表有环，快慢指针最终会在环中相遇&a…...

编程日记 2024/7/12 20:31:04

Kubernetes基于helm部署jenkins

Kubernetes基于helm安装jenkins jenkins支持war包、docker镜像、系统安装包、helm安装等。在Kubernetes上使用Helm安装Jenkins可以简化安装和管理Jenkins的过程。同时借助Kubernetes，jenkins可以实现工作节点的动态调用伸缩，更好的提高资源利用率。通过…...

编程日记 2024/7/12 20:29:02

【Linux】vim详解

1.什么是vi/vim? 简单来说，vi是老式的文本编辑器，不过功能已经很齐全了，但是还是有可以进步的地方。vim则可以说是程序开发者的一项很好用的工具，就连 vim的官方网站（ http://www.vim.org）自己也说vim是一…...

编程日记 2024/7/12 20:23:58

Android11 mtk 第二次设置壁纸，锁屏壁纸不变的问题

1、情景：近日测试人员发现第一次更换壁纸后，主屏幕壁纸和锁屏壁纸均会改变；但第二次更换壁纸后，主屏幕壁纸会改变而锁屏壁纸不会改变。 2、要求：主屏幕壁纸和锁屏壁纸军改变 3、解决路径：****\frameworks\base\services\core\java\com\android\server\wallpaper\Wallp…...

编程日记 2024/7/12 20:22:57

Java学习路线

目录友情提醒第一章、Java基础1.1）第一部分：Java 入门1.2）第二部分：Java数组1.3）第三部分：Java面向对象1.4）第四部分：常用工具类1.5）第五部分：集合体系1.6&a…...

编程日记 2024/7/12 20:20:55

java 实现人脸检测

1. 安装必要的库确保你已经安装了JPEG库、BLAS和LAPACK库。在Ubuntu或Debian系统上，可以使用以下命令安装： sudo apt-get update sudo apt-get install libjpeg-dev libblas-dev liblapack-dev 在CentOS或Fedora系统上，可以使用以下命令安…...

编程日记 2024/7/12 20:14:50

VSCode神仙插件——Codeium (AI编程助手)

1、安装&登录插件安装过程中会让你登录Codeium账户，可以通过Google账户登录，或者可以注册一个Codeium账户（如果没有弹出让你登录账户的界面，可以等安装结束后在右下角找到登录的地方） 右下角显示如下图所示&#…...

编程日记 2024/7/12 20:09:47

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统题目开始操作： 1）、切换集群 2）、切换节点 3）、切换到 apparmor 的目录 4）、执行 apparmor 策略模块 5）、修改 pod 文件 6）、…...

编程新知 2026/1/29 2:11:35

【WiFi帧结构】

文章目录帧结构MAC头部管理帧帧结构 Wi-Fi的帧分为三部分组成：MAC头部frame bodyFCS，其中MAC是固定格式的，frame body是可变长度。 MAC头部有frame control，duration，address1，address2，addre…...

编程新知 2026/2/7 17:33:19

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景随着HarmonyOS 5.0对Web兼容层的增强，React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。二、核心实现方案 1. 环境配置 （1）使用React Native…...

编程新知 2025/8/19 2:57:37

【学习笔记】深入理解Java虚拟机学习笔记——第4章虚拟机性能监控，故障处理工具

第2章虚拟机性能监控，故障处理工具 4.1 概述略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具命令：jps [options] [hostid] 功能：本地虚拟机进程显示进程ID（与ps相同），可同时显示主类&#x…...

编程新知 2026/1/15 1:34:10

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件，所以得把软件用docker打包起来，大部分功能都没问题，出了一个奇怪的事情。同样的代码，在本机上用vscode可以运行起来，但是打包之后在docker里出现了问题。使用的是dialog组件，…...

编程新知 2025/9/24 3:05:06

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。一、智能合约修改为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...

编程新知 2025/9/27 12:03:43

基于Java+MySQL实现（GUI）客户管理系统

客户资料管理系统的设计与实现第一章需求分析 1.1 需求总体介绍本项目为了方便维护客户信息为了方便维护客户信息，对客户进行统一管理，可以把所有客户信息录入系统，进行维护和统计功能。可通过文件的方式保存相关录入数据，对…...

编程新知 2026/1/25 10:12:06

A2A JS SDK 完整教程：快速入门指南

目录什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/12/12 8:42:24

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

编程新知 2026/1/31 6:01:08

恶补电源：1.电桥

一、元器件的选择搜索并选择电桥，再multisim中选择FWB，就有各种型号的电桥: 电桥是用来干嘛的呢？ 它是一个由四个二极管搭成的“桥梁”形状的电路，用来把交流电（AC）变成直流电（DC）。…...

编程新知 2026/1/29 8:28:23