小小觉醒
前端
获得徽章 0
- HTML标签的结构
标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。
HTML标签与标签之间的关系
父子关系（嵌套关系）
<head>
<title></title>
</head>
兄弟关系（并列关系）
<head></head>
<body></body>
HTML常用标签
段落标签
特点：
段落之间存在间隙
独占一行
<P>
我是段落标签
</P>
换行标签
特点：
单标签
让文字强制换行
<br>
水平线标签
特点：
单标签
在页面中显示一条水平线
<hr>
展开32 - 图片标签
特点：
单标签
img标签需要展示对应的效果，需要借助标签的属性进行设置
< img src=" " alt=" ">
属性名：src
属性值：目标图片的路径
属性名：alt
属性值：替换文本
当图片加载失败时，才显示alt的文本
当图片加载成功时，不会显示alt的文本
链接标签
特点：
双标签，内部可以包裹内容
如果需要a标签点击之后去指定页面，需要设置a标签的href属性
```html
<a href=" ">超链接</a >
```
属性名：href
属性值：点击之后跳转去哪一个网页（目标网页的路径）
无序列表
标签名 说明
ul 表示无序列表的整体，用于包裹li标签
li 表示无序列表的每一项，用于包含每一行
有序列表
标签名 说明
ol 表示有序列表的整体，用于包裹li标签
li 表示有序列表的每一项，用于包含每一行
自定义列表
标签名 说明
dl 表示有序列表的整体，用于包裹dt/dd标签
dt 表示自定义列表的主题
dd 表示自定义列表对主题的没一项内容
表格标签
标签名 说明
table 表格整体，可用于包裹多个tr
tr 表格每行，可用于包裹td
td 表格单元格，可用于包裹内容
展开评论1 - input标签
标签名 type属性值 说明
input text 文本框，用于输入单行文本
input password 密码框，用于输入密码
input radio 单选框，用于多选一
input checkbox 多选框，用于多选多
input file 文件选择，用于之后上传文件
input submit 提交按钮，用于提交
input reset 重置按钮，用于重置
input button 普通按钮，默认无功能
下拉菜单标签 标签组成： select标签：下拉菜单的整体 option标签：下拉菜单的每一项
文本域标签
<textarea>文本内容</textarea>
常见属性：
cols:规定了文本域内可见宽度
rows：规定了文本域内可见行数
lable标签 把表单内容包裹起来，作为表头
无语义化标签 div、span
实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签
div标签：一行只显示一个（独占一行）
span标签：一行可以显示多个
<div>
<span></span>
</div>
展开评论1 - 审核中 Flex布局模型构成
目标：能够使用Flex布局模型灵活、快速的开发网页
基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
Flex布局非常适合结构化布局
父元素添加 display: flex，子元素可以自动的挤压或拉伸
父元素为弹性容器,子元素为弹性盒子
开启弹性容器 flex布局 display: flex;
每个盒子左右都有间隙 2倍 justify-content: space-around
两侧没有间隙 justify-content: space-between
间隙 一样大 justify-content: space-evenly
垂直居中对齐 align-items: center
拉伸 需要把子盒子的高度注释 align-items: stretch;展开评论4 - 一、定位
1.1 网页常见布局方式
1. 标准流
1. 块级元素独占一行 → 垂直布局
2. 行内元素/行内块元素一行显示多个 → 水平布局
2. 浮动
1. 可以让原本垂直布局的 块级元素变成水平布局
3. 定位
1. 可以让元素自由的摆放在网页的任意位置
2. 一般用于 盒子之间的层叠情况
相对定位
介绍：自恋型定位，相对于自己之前的位置进行移动
代码：position : relative
特点：
1. 需要配合方位属性实现移动
2. 相对于自己原来位置进行移动
3. 在页面中占位置 → 没有脱标
➢ 应用场景：
.配合绝对定位组CP（子绝父相）
用于小范围的移动
绝对定位
介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动
代码：position : absolute
特点：
1. 需要配合方位属性实现移动
2. 默认相对于浏览器可视区域进行移动
3. 在页面中不占位置 → 已经脱标
应用场景：
1. 配合绝对定位组CP（子绝父相）
固定定位
介绍：死心眼型定位，相对于浏览器进行定位移动
代码：position : fixed
特点：
1. 需要配合方位属性实现移动
2. 相对于浏览器可视区域进行移动
3. 在页面中不占位置 → 已经脱标
应用场景：
1. 让盒子固定在屏幕中的某个位置
子绝父相的含义是什么？
• 子元素：绝对定位
• 父元素：相对定位
➢ 子绝父相的应用场景是什么？
• 让子元素相对于父元素进行自由移动
➢ 子绝父相的好处是什么？
• 父元素是相对定位，则对网页布局影响最小展开评论2 - 让盒子垂直水平居中的三种方法:
1:定位,子绝父相
.father {
position: relative;
}
.son {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
2:flex布局(最常用)
.father {
display: flex;
justify-content: center;
align-items: center;
}
.son {
}
3:transform
.father {
position: relative;
}
.son {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}展开23 - 传统圣杯，两边固定，中间自适应
.box {
display: flex;
width: 100%;
height: 40px;
background-color: #999;
text-align: center;
line-height: 40px;
}
并集选择器
.box div:nth-child(1),
.box div:nth-child(3) {
width: 60px;
height: 40px;
background-color: pink;
}
.box div:nth-child(2) {
flex: 1;
}
</style>
</head>
<body>
<div class="box">
<div>左边</div>
<div>中间</div>
<div>右边</div>
</div>展开34 - 3D空间呈现
<style>
.box {
/* 1.2 添加透视 */
perspective: 800px;
position: relative;
width: 200px;
height: 200px;
margin: 100px auto 0;
/* 1.4 添加过渡 */
transition: all 3s;
/* 1.5 让子元素保持3d立体空间效果 */
/*给父元素添加 让子元素保持3d立体空间 */
transform-style: preserve-3d;
}
.box div {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.box div:first-child {
background-color: pink;
}
.box div:last-child {
background-color: skyblue;
/* 1.1 沿着x轴进行旋转 */
transform: rotateX(80deg);
}
/* 1.3 box旋转 */
.box:hover {
transform: rotateY(-80deg);
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
</div>
</body>展开评论1 - 走马灯（动画）
<style>
li {
list-style: none;
}
img {
width: 200px;
}
.box ul {
width: 2000px;
animation: move 5s infinite linear;
}
.box li {
float: left;
}
.box {
overflow: hidden;
width: 600px;
height: 112px;
border: 5px solid #000;
margin: 100px auto;
}
/* 定义动画 */
@keyframes move {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-1400px, 0, 0);
}
}
/* 鼠标经过暂停动画 */
.box:hover ul {
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="./images/1.jpg" alt="" /></li>
<li><img src="./images/2.jpg" alt="" /></li>
<li><img src="./images/3.jpg" alt="" /></li>
<li><img src="./images/4.jpg" alt="" /></li>
<li><img src="./images/5.jpg" alt="" /></li>
<li><img src="./images/6.jpg" alt="" /></li>
</ul>
</div>
</body>展开评论2
