自己复习前端基础，仅用于记忆，初学者不太适合
示例代码 - HTML
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="<b>"><b>离离原上草</b></abbr>
<abbr title="<strong>"><strong>一岁一枯荣</strong></abbr>
<abbr title="<i>"><i>野火烧不尽</i></abbr>
<abbr title="<em>"><em>春风吹又生</em></abbr>
<abbr title="<s>"><s>远芳侵古道</s> </abbr>
<abbr title="<del>"><del>晴翠接荒城</del></abbr>
<abbr title="<u>"><u>又送王孙去</u></abbr>
<abbr title="<mark>"><mark>萋萋满别情</mark></abbr>
</pre>
</div>
<aside>
<pre>
显然：
b与strong、em与i、s与del的
效果相同，只是含义不同；u是
下划线的装饰作用，mark是标记
的作用，不建议使用HTML的装饰
标签，推荐CSS来做相关操作
</pre>
</aside>
</main>
<footer>© 2023 My Website. All rights reserved.</footer>
</body>
</html>示例代码 - CSS
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;
}效果
框架元素
html
<!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>装饰元素
html
<abbr title="<b>"><b>离离原上草</b></abbr>
<abbr title="<strong>"><strong>一岁一枯荣</strong></abbr>
<abbr title="<i>"><i>野火烧不尽</i></abbr>
<abbr title="<em>"><em>春风吹又生</em></abbr>
<abbr title="<s>"><s>远芳侵古道</s> </abbr>
<abbr title="<del>"><del>晴翠接荒城</del></abbr>
<abbr title="<u>"><u>又送王孙去</u></abbr>
<abbr title="<mark>"><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属性的简写形式
justify-content：flex-start | flex-end | center | space-between | space-around | stretch
align-items：flex-start | flex-end | center | baseline | stretch （单行）
align-content：flex-start | flex-end | center | space-between | space-around | 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
auto | flex-start | flex-end | center | baseline | stretch