手把手教你基于HTML、CSS搭建我的相册（上）

显示全部楼层 · 2023-8-23 11:42:30

写在前面

其实有过一些粉丝咨询前端该从什么开始学，那固然是我们的前端底子三件套开始学起，HTML、CSS、javaScript，前端的大部分框架的底层还是围绕着前端三件套来搭建的，信赖大家可以大概在许多平台中去找到一些前端三件套的体系教程，借着原力筹划呢，凉哥也为大家带来前端三件套的一些内容分享，只不过这里可不是纯底子知识的输出，而是会联合一些给予前端三件套的底子知识来做一些风趣的小项目、小demo，会由简朴到复杂，由静态到动态的过程来资助大家把握前端三件套的使用及搭配，以是这里针对的人群是前端初学者或者你还没有开始学前端想感受一些前端代码那这个专栏很适合你。下面呢我们也先来相识一下我们的HTML、CSS都是什么？

HTML是什么？

HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。它是 Web 技能的底子，通过使用标记（标签）来描述文档的结构和内容，使得浏览器可以大概准确地呈现网页。HTML 中的标记以尖括号（<>）包围，而且通常是成对出现的。标记之间的文本是元素的内容，它们可以包罗其他元素。HTML 中最常见的元素包罗标题、段落、链接、图像、列表等等。除了描述文本内容外，HTML 还支持添加超链接、表格、表单、嵌入多媒体等其他功能。此外，HTML 还提供了一些元数据标签，如标题、描述和关键字，可以提供更多有关文档的信息，资助搜索引擎理解网页内容。HTML 是 Web 开辟的入门语言，易于学习，需要把握的基本语法和标记较少。随着 Web 技能的发展，HTML 的版本也在不绝更新，当前版本为 HTML5，它提供了更多的功能和特性，比方本地存储、音频视频、Canvas 画图等等，使得 Web 应用步伐更加丰富多彩和交互性强。
HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作体系平台(如UNIX， Windows等)。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即我们所见到的网页。
其实上面说了这么多，可能有的大家可以大概看明确，有的对于初学者来说可能又有点懵懂，固然关于上面的理论内容我还是建议大家抽时间本身百度相识一下，毕竟知其然知其以是然，下面我也用一句话来描述HTML毕竟可以做什么？你可以使用 HTML 来创建本身的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。也就是说你可以通过HTML来搭建本身的网页，好吧，是不是够直白，好了如果你对我上面这句话还是不敷理解，好吧，那就看下面这张你非常熟悉的图；

上面就是我们的百度的官网，我们可以在页面任意位置右键鼠标然后点击查抄，或者我们直接点击页面按F12键，即可打开我们右边的控制台，我们可以在Elements中发今世码，这就是HTML，这也是渲染成我们百度的HTML代码，固然不愿定是通过HTML搭建的，有可能是通过框架，不过即便是通过框架搭建的，但是终极编译后肯定是HTML，以是是不是这就理解了我上面说的那句话我们可以通过HTML来搭建网页。

CSS是什么？

层叠样式表(英文全称：Cascading Style Sheets)是一种用来体现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的盘算机语言。CSS不光可以静态地修饰网页，还可以共同各种脚本语言动态地对网页各元素举行格式化。它与 HTML 相互联合，通过选择器来指定要样式化的 HTML 元素，然后界说这些元素的样式属性。CSS 可以界说元素的字体、颜色、间距、边框、配景等表面样式，还可以用于实现结构和交互结果。CSS 具有以下特点：
丰富的样式界说CSS提供了丰富的文档样式表面，以及设置文本和配景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的间隔，以及元素边框与元素内容间的间隔；允许随意改变文本的巨细写方式、修饰方式以及其他页面结果。易于使用和修改CSS可以将样式界说在HTML元素的style属性中，也可以将其界说在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明同一存放，举行同一管理。别的，可以将相同样式的元素举行归类，使用同一个样式举行界说，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明举行修改。多页面应用CSS样式表可以单独存放在一个CSS文件中，如许我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。如许就可以实现多个页面风格的同一。层叠简朴的说，层叠就是对一个元素多次设置同一个样式，这将使用末了一次设置的属性值。比方对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独界说一个样式表应用到页面中。这些后来界说的样式将对前面的样式设置举行重写，在浏览器中看到的将是最背面设置的样式结果。页面压缩在使用HTML界说页面结果的网站中，往往需要大量或重复的表格和font元素形成各种规格的笔墨样式，如许做的结果就是会产生大量的HTML标签，从而使页面文件的巨细增长。而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，如许在加载页面时使用的时间也会大大的减少。别的，CSS样式表的复用更大程度的缩减了页面的体积，减少下载的时间。
上面这些呢都是网上对于CSS的表明，可能你还并没有很好的理解CSS，下面我也用一句话来描述CSS毕竟可以做什么？上面我们说到了HTML可以搭建网页，那么我们可以粗暴的理解为HTML就是积木，那我们的CSS就是决定我们积木的颜色、形状、结构，就是为我们的HTML添加呈现色彩；看下面这张你非常熟悉的图；我们的网站之以是很漂亮都是依靠我们的CSS代码，下图中的圈中的就是我们的CSS代码；

demo搭建

在上面呢我们就相识了我们的前端底子三件套中的HTML、CSS的概念和作用，那我们就开始我们本节的小目的吧，我们本节使用的技能栈就是HTML+CSS，不需要你的电脑上安装任何情况，只要你有一款可以编码的软件就可以了，在这里呢我比力推荐的就是VSCode，固然其他的也行，乃至你是用记事本编码都是可以，只不过没有语法提示，下面呢我就先来展示一下我们本日要做的这个小小的demo吧，非常简朴的一个个人相册的页面，结构简朴，帮我们相识底子的前端代码；

创建index.html
我们可以看到上面的页面非常简朴，那我们就用最简朴的代码来实现上面的页面吧，起首呢就需要我们去创建一个html为后缀名的文件，这个文件的名称可以本身决定，在这里呢我就起名叫做demo.html，注意我们的后缀名哦是html，然后我们用编辑器打开我们刚创建的文件。

初始化代码
我们在上面有在讲过我们的HTML代码都是成对出现的，如果你使用的也是前端编辑器，那么编辑器会主动为你补全代码，起首我们先来初始化一下代码，注意：这里呢我没有用快捷方式，为了初学者更轻易理解以是代码使用了最精简的版本，老手勿质疑；

<html>
<head>
</head>
<body>
</body>
</html>

复制代码

我们可以大概看到最外层的标签就是HTML，然后内里有两组标签，一个是head，这个就是来控制我们的网页的头部，比如我们一会呈现的页签名称我们可以在这里设置，另一个呢就是我们的 body 这个故名思义就是我们的页面身材部分，也就是我们页面中的内容都写在这里；
设置页签name运行文件
我们上面所讲的在我们的<head></dead>标签中我们可以设置一些内容信息，比如我们的页签name，以及一些网站的信息，比如网站的作者、先容、版权、关键字等，其实我们的CSS样式也是写在这里，我们先来看前几项的内容吧！

<head>
<title>我的相册</title>
<meta name="author" content="（作者）几何心凉"/>
<meta name="description" content="网页的描述"/>
<meta name="copyright" content="这里是版权信息"/>
<meta name="keywords" content="网页的关键字"/>
</head>

复制代码

可以看到我们内里有title标签还有meta标签，我们的title标签就是我们设置的页签name，meta标签的差别属性设置差别的内容，下面我们运行一下我们的网页然后来看一下我们的页签name的结果吧；起首我们的运行非常简朴，我们找到我们刚刚新建的index.html，然后双击这个文件就会在浏览器中被打开了，这里建议是使用我们的谷歌浏览器哦。大家可以任意设置观察结果哦。

头部部分搭建
其实我们在正式的开辟中我们的head中还要设置几项内容的，但在本节中我们先不讨论，我们就先初体验一把我们的HTML+CSS代码，下面我们就来写一下网页中的内容吧，起首我们完成的就是我们的头部内容，也就是我们这部分内容。

这里呢我们可以大概发现其实这里就是一个盒子然后内里包裹着一个‘我的相册‘四个字，那我们就在我们的body中可以写我们的主体代码了，这里呢我们可以用语义化标签也搭建，但是大家可能理解还是不太好理解我们就直接都用div来体现吧！我们就用一个div盒子，然后在中心我们参加我们的h1标签，h1标签就是我们的标题标签，标题的范围可以从<h1>到<h6>。最重要的标题是<h1>，最不重要的标题是<h6>。这句话很好理解哈，这里呢我们是用最大的h1标签来呈现；

<body>
<div>
<h1>我的相册</h1>
</div>
</body>

复制代码

代码参加后我们回到浏览器要刷新页面哦，刷新后我们发现我的相册就呈现出来了，但是我们如今的呈现结果跟我们要求的差距比力大，这时候我们可以追念上面所讲的我们html是积木，我们的css才是决定积木的展示情势，以是这时候我们就用到我们的CSS代码喽。
CSS样式语法
起首是我们的CSS要写在哪里呢？这里我们建议大家是卸载我们的head标签中，我们的CSS也可以称之为样式，以是我们的CSS代码也有一个标签就是 <style></style> 我们把style标签参加head中就可以在style中编写我们的样式了哦，

我们相识到我们的CSS是跟HTML来搭配使用的，我们就可以理解为CSS是可以直接让谁人HTML元素酿成什么样子的，但是我们如何指定元素呢？我们CSS中有标签选择器、id选择器、类选择器、派生选择器等等，是不是听得一头雾水呢？没关系哈我们先跟着敲就好了；起首在这里我们都来给大家使用一下哈；标签选择器就是我们可以拿到对应的标签元向来举行样式的设置，类选择器呢是阐明我们要给标签设置类名，然后在style中可以通过类名指定元向来举行样式的设置，id选择器固然就是我们给标签设置id值，然后在style中可以通过id来指定元素设置样式，起首呢我们先来对body标签设置点样式：

<style>
/* 这里编写样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
}
</style>

复制代码

这里我们看到style中我们写入的是body，这个body呢就是我们html中的body标签，然后背面花括号中的代码就是样式，这里呢我们的 font-family是设置字体体，然后margin是设置元素外边距，间隔上下左右多少单元，这里是0，margin:0;也是我们在现实开辟中初始化写入的样式，我们可以发现如果给标签添加样式需要一个花括号，样式代码每行都是键值对的情势，而且每行代码都是;竣事，这就是CSS的语法啦；你可以写上后刷新我们的页面，你会发现一些些的厘革哦；
头部实现
下面我们就来看一下我们我的相册如何设置样式吧，起首呢我们可以大概发现我们的头部一长条的配景颜色为灰色，然后我们的笔墨是居中的，我们一起来实现一下吧，上面我们用到了标签选择器，那这里我们运用一下我们的类选择器吧，我们先来给我们body中的div设置一个类名，比如我们叫做header，如何设置呢，很简朴通过class属性；

<body>
<div class="header">
<h1>我的相册</h1>
</div>
</body>

复制代码

然后我们在style中如何获通过类名设置样式呢？其实就是通过 .类名这里就是.header，我们可以看到下面的代码，background-color用来设置配景颜色，color用来设置笔墨颜色，text-align用来设置元素内的字体的对齐方式，这里我们center就是剧中，我们常用的还是left、right大家可以自行实验一下，padding是内边距，我们上面说的margin是外边距，恰好是对应关系，这个是我们内部元素间隔该元素上下左右的间隔，这里是20px也就是说我们上下左右至少是20px；我们刷新看一下结果；

<style>
/* 这里编写样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
}
.header {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
}
</style>

复制代码

完备代码

<html><head> <title>我的相册</title> <meta name="author" content="（作者）多少心凉" /> <meta name="description" content="网页的描述" /> <meta name="copyright" content="这里是版权信息" /> <meta name="keywords" content="网页的关键字" /> <style>
/* 这里编写样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
}
.header {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
}
</style>
</head><body>
<div class="header">
<h1>我的相册</h1>
</div>
</body>
</html>

复制代码

写在末了

各位小伙伴们记得实验一下哦，可以多实验一些不容的样式，差别的值来看一下差别的结果，那我也把上面包罗的全部代码提供出来，下篇文章呢我们继续来领导大家完成剩下的部分；如果你以为本篇内容对你有所资助，盼望你可以大概给个三连支持哦；
本期推荐

来源：https://blog.csdn.net/JHXL_/article/details/129544630
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

[web教学] 手把手教你基于HTML、CSS搭建我的相册（上）

本帖子中包含更多资源