前言

学校最近开始实训周了，一上就是一个月，本来想在课上学点考研的东西的，但是无奈任务重，而且最后还能有点小奖励，就认真学了，再者说，html也挺重要的，学一学也不算浪费时间。

软件配置

VScode扩展

请添加图片描述

HBuildrX

Google Chrome

第一个小项目

我们这次的目标是做一个类似网易云音乐启动页面的html。包含两个标题和一个logo。
先创建好工作文件夹，创建index.html，在vs code中输入英文感叹号回车之后就会出现

</body></html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

title里面夹住的就是你这个标签页的名字

下面是完整的html代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>木子音乐</title><!-- css --><style>h1,h4 {/* 设置文本颜色 */color: #ffffff;/* 文本水平对齐方式 */text-align: center;/* 字体线宽 */font-weight: 400;}body {background-color: red;}h1 {/* 上外边距 */margin-top: 200px;/* 字体大小 */font-size: 48px;}h4 {margin-top: 360px;font-size: small;/* 把元素设置为弹性盒子 *//* 弹性盒子的子元素变成弹性子元素 */display: flex;/* 让所有元素水平居中 */justify-content: center;/* 让所有元素垂直居中 */align-items: center;}img {/* 设置图片的大小 */width: 15px;height: 15px;margin-right: 10px;}</style>
</head><!-- html写在body里面 --><body><h1>音乐的力量</h1><h4><img src="img/logo.png" alt="加载">木子云音乐</h4>

在这里插入图片描述
点击手机，选择适合手机的屏幕尺寸。

第二个项目

弹性盒子测试

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex_demo</title>
</head>
<style>div {width: 500px;height: 500px;border: 5px solid black;/* 想让哪些元素水平限制，就把它的父元素设置成弹性盒子 */display: flex;/* 交叉轴默认方向是从上到下，上边起点，下面终点 */align-items: center;justify-content: center;}h2 {width: 100px;height: 100px;background-color: red;}h3 {width: 100px;height: 120px;background-color: blue;}h4 {width: 100px;height: 140px;background-color: yellow;}
</style>
<body><div><h2></h2><h3></h3><h4></h4></div>
</body>
</html>

想让元素一行，就要将其父元素设置成弹性盒子
运行出来就是这样的
在这里插入图片描述

知识点

HTML
超文本标记语言
超文本：超出了普通文本范围
标记：也叫标签，是网页的基本组成部分
CSS
层叠样式表，样式表

注意
html和css都是弱类型语言，也就是当你语法不规范的时候也不会报错，甚至在某些程度上可以执行

元素
标签+内容=元素
标签：

元素：
这是div里面的内容

行元素
宽度是根据内容大小决定，水平排列
行元素不能设置宽高
行元素不能设置上下外边距,可以设置左右外边距
块元素
默认宽度占父元素的100%,垂直排列

弹性布局
display: flex; 设置为弹性盒子
注意想让哪些元素水平显示并且和设置宽高和边距
就把它的父元素设置为弹性盒子
主轴
弹性盒子内部有一个主轴
主轴的默认方向是从左向右,左边为起点右边为终点
所有弹性子元素默认是靠近起点
justify-content 设置弹性子元素在主轴上的排列方式
交叉轴
弹性盒子内部还有个跟主轴垂直的交叉轴
交叉轴默认方向是从上向下,上边为起点下边为终点
所有弹性子元素默认是靠近起点
align-items 设置弹性子元素在交叉轴上的排列方式