从零开始的前端学习手记构建篇

LuooU2025-11-152025-11-20

整个学习路线构建在：HTML 简介 - 学习网络开发 | MDN Web 中文网之上。

构建，顾名思义，就是很浅地过一遍。

HTML

我开始写前端的时候已经比较晚了，因为学校有相关的作业要求，故HTML这个板块用成果为楔，慢慢道来。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>作业1</title>

</head>

<body style="text-align: center;">

    <header id="top">

        <h1 title="纯html会直接在元素里被看到吗...那很坏了">

            这是我的html网页

        </h1>

    </header>

    <main>

        <a href="http://8.137.71.164">点击跳转至我的博客（还很简陋，见谅，而且是ip地址，等成年就好了）</a>

        <p>不过既然要写自我介绍，我就先把博客里的自我介绍内容搬过来吧</p>

        <h1>你好呀</h1>
        <p>这是一篇自我介绍，接下来我将非全方位介绍自己。</p>
        <hr>
        
        <table border="1" cellpadding="10" style="margin: 20px auto; 
               border-collapse: collapse;text-align: center;">
            <thead>
                <tr>
                    <th>项目</th>
                    <th>内容</th>
                    <th>嘻嘻</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>音乐</td>
                    <td><a href="https://music.163.com/song?id=1462753116&uct2=U2FsdGVkX1+s8V8FYxSPFzs+hVRjGbk5X20skBrxebk=">
                        21 ——Gracie Abrams</a></td>
                    <td>不好听来打我。</td>
                </tr>
                <tr>
                    <td style="color:#f6cec1;">淡桃红</td>
                    <td style="color:#483332;">海报灰</td>
                    <td style="color:#f4a83a;">中国色！</td>
                </tr>
                <tr>
                    <td>状态</td>
                    <td>持续学习中，欢迎交流</td>
                    <td>有点强迫症</td>
                </tr>
            </tbody>
        </table>

    </main>

    <footer>
        <div>
            <a href="http://8.137.71.164" style="display: inline-block;width: 25%;">
                <img src="https://cdn.jsdelivr.net/gh/Shengzb0/scaling-eureka@main/image/20251107013537174.png"
                     alt="替代文本替代文本替代文本替代文本替代文本替代文本替代文本替代文本替代文本替代文本替代文本替代文本替代文本替代文本替代文本替代文本替代文本替代文本替代文本替代文本替代文本"
                     style="display:block;width:100%;height:auto;display:block;margin:0 auto;">
            </a>
        </div>
        <p style="text-align:center;">点小黑照片，也可以跳转到博客 · <a href="#top">返回顶部</a></p>
    </footer>

</body>

</html>

这是一段html代码，用浏览器打开它，我们可以得到一个网页。

网页的效果是这样的：

HTML是什么？

HTML（超文本标记语言）会告诉浏览器如何构建你访问的网页，它由一系列元素（elements）组成。

<a> </a>
<h1> </h1>
<p> </p>
<table> </table>

元素

元素就是这种由标签（tags，<>）包裹的东西，你可以使用它们来包围、封装、标记内容的不同部分，使它们以某种方式显示或运行。

现在把视角看向网页最上方的文字，

我们希望文本独立存在，就可以通过<p></p>(paragraph)元素指定。

比如第一句，这是我的html网页，将由

1
2
3

<p>
    这是我的html网页
</p>

来实现。

中间就是元素的内容。

但是，这个代码只能达到这样的效果：

我想要他居中，就需要用到元素的属性(attributes)。

属性

1
2
3

<p style="text-align:center;">
    这是我的html网页
</p>

属性包含元素的额外信息。

比如<img>元素(image)可以拥有众多属性，

src：指定图片位置（url地址/图片路径）
alt：指定图片文本描述（图片刷不出来的替代文本）
width/height：分别制定图片宽度和高度

属性有这些（从HTML 属性 | 菜鸟教程转）：

初步了解，按需使用，要用再学。

看代码：

html一般分为head和body，head代表创建一个包含html内容的容器，页面不会显示head其中的内容。

关于声明：

前两行，第一行声明必须加，声明此文件是html文件。

第二行规定页面语言，这将影响浏览器跳不跳翻译功能。

>>> 中文用zh-Hans/zh-CN，英文用en.

关于头（head）：

头元素包含的这些也很重要。

<meta charset="UTF-8">：表示元数据。其中的charset属性指定字符编码为UTF-8，通常是要加上的。
<meta name=" " content=" ">：指定这个页面将随设备宽度变化而变化，初始不缩放。
<title>代表该网站的标题，比如我们在浏览器里看到的这些。

关于体（body）：

现在再回头看代码的主体：

<body style="text-align: center;">

    <header id="top">

        <h1 title="纯html会直接在元素里被看到吗...那很坏了">

            这是我的html网页

        </h1>

    </header>

    <main>

        <a href="http://8.137.71.164">点击跳转至我的博客（还很简陋，见谅，而且是ip地址，等成年就好了）</a>

        <p>不过既然要写自我介绍，我就先把博客里的自我介绍内容搬过来吧</p>

        <h1>你好呀</h1>
        <p>这是一篇自我介绍，接下来我将非全方位介绍自己。</p>
        <hr>
        
        <table border="1" cellpadding="10" style="margin: 20px auto; 
               border-collapse: collapse;text-align: center;">
            <thead>
                <tr>
                    <th>项目</th>
                    <th>内容</th>
                    <th>嘻嘻</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>音乐</td>
                    <td><a href="https://music.163.com/song?id=1462753116&uct2=U2FsdGVkX1+s8V8FYxSPFzs+hVRjGbk5X20skBrxebk=">
                        21 ——Gracie Abrams</a></td>
                    <td>不好听来打我。</td>
                </tr>
                <tr>
                    <td style="color:#f6cec1;">淡桃红</td>
                    <td style="color:#483332;">海报灰</td>
                    <td style="color:#f4a83a;">中国色！</td>
                </tr>
                <tr>
                    <td>状态</td>
                    <td>持续学习中，欢迎交流</td>
                    <td>有点强迫症</td>
                </tr>
            </tbody>
        </table>

    </main>

    <footer>
        <div>
            <a href="http://8.137.71.164" style="display: inline-block;width: 25%;">
                <img src="https://cdn.jsdelivr.net/gh/Shengzb0/scaling-eureka@main/image/20251107013537174.png"
                     alt="替代文本替代文本替代文本替代文本替代文本替代文本替代文本替代文本替代文本替代文本替代文本替代文本替代文本替代文本替代文本替代文本替代文本替代文本替代文本替代文本替代文本"
                     style="display:block;width:100%;height:auto;display:block;margin:0 auto;">
            </a>
        </div>
        <p style="text-align:center;">点小黑照片，也可以跳转到博客 · <a href="#top">返回顶部</a></p>
    </footer>

</body>

第一行：body

body是和head相对应的元素。

我在这里直接style="text-align: center;"，给了他一个居中的属性，意味着在这个body之中的所有元素全部默认居中。
header（页眉）

header元素相当于这个网站内容的一个标题（其实就是字体变大）。当然现在的header更加自由，已经变成了<h1>至<h6>，拥有更加多的字体大小。

其中<h1>元素的属性title，是将鼠标悬停时将看到的文字。
main：

像main主函数一样，这里就是我们网页内容的主体。
- <a></a>超链接：
  
  拥有一个href属性，该属性表示前往的链接。
- <p></p>段落：
  
  正常文本。
- <hr>：
  
  水平分割线(horizontal rule)，类似于：
- <table></table>：
  
  表格，其中的属性有通用的id,class,style等，表格的样式一般都已经靠class+CSS的组合来控制了。
  但是单html，我们使用border作为边框宽度、cellpadding作为单元格内边距、cellspacing作为单元格之间的间距、width/height作为表格宽高、align作为表格对齐方式、bgcolor作为背景色，还有不太常用的frame(控制表格外边框哪几边显示)、rules控制内部线条显示方式。
  
  依然是按需取用。
  - style中的参数都是什么？
    
    margin:外边距，写两个值时分别是上下外边距和左右外边距。
    
    这里就是让表格上下空出20px的距离。
    
    border-collapse:是表格的特有属性，用来控制单元格边框的合并方式。
    
    默认是separate->每个单元格有自己的边框。
    
    而collapse->把相邻单元格的边框合并成一条线。
    
    text-align:控制文字的对齐方式，将被子元素(<td>/<th>)继承。
    
    有left/right/center.
  - <thead></thead>:
    
    表头(table head)，就是第一行的内容。
    - <tr></tr>:
      
      表格的一行(table row)。
    - <th></th>:
      
      表头单元格(table header cell)。
  - <tbody></tbody>:
    
    表格主体(table body)。
    - <td></td>:普通单元格
      然后其中有一行嵌套了一个超链接，所以嵌套元素也就这样，
      
      依然可以被style等修改样式，这个是改的字体颜色。
  总结一下：
  - <thead>：表头
  - <tbody>：表格内容
    
    <thead>/<tbody>需要搭配<tr>(表格的一行)使用，内部需要<th>(表头单元格)/<td>普通单元格来填充。

footer（页脚）:

页脚就是页面最下面的内容。

<div>:定义一个块级容器，没有什么含义，但是方便CSS控制样式。
在这里我规定超链的宽度为父容器宽度的25%，那么在我超链内的图片，就也默认继承超链区域的宽度。
我们介绍一下display:inline-block;

display：规定元素怎么在页面里排队占位，其中三种常见的参数，可以看一看：


`block`(块级元素)	独占一整行（前后自动换行）	可以设置宽高、调整内外边距	`<div> <p> <h1>`默认就是 block
`inline`(行内元素)	不会换行，元素会像文字排在一整行里	不能设置宽高（宽高由内容决定）	`<a>, <span>, <em>` 默认是 inline
`inline-block`(行内块元素)	可以一行放多个、不一定换行	可以设置宽高、调整内外边距	适合按钮、卡片、图标一行排多个的布局

在这里我将超链设置为行内块元素，意味着我可以调整这个“超链盒子”的宽高了。

而超链盒子，又意味着这一整块区域都将是超链区域，点击跳转。它的子容器img，我调整宽度100%，意味着图片将铺满这个25%宽度的盒子。

这样，就避免了超链可点区域远大于图片显示区域的问题。

最后超链返回顶部，#top锁定页眉的top.

（这个id就是CSS给的钩子）

然后我们就可以过渡到CSS阶段了🤓，虽然说用style很方便很高级，但是既然要学css，就少用这种内联样式，单独开css文件写样式才是正解。

CSS

在这里，我们目标是修饰html阶段的结业文件，让他更有网页味。

我们以html为锚点向外推进。

了解CSS

什么是CSS？

CSS（Cascading Style Sheets，层叠样式表）可以给HTML文档和XML应用添加样式，扩展名是.css.

听过html的很难没听过css，后者功能的强大有目共睹。
如何引入CSS？

只需要在html文件的<head>里添加一行：
1
<link href="style.css" rel="stylesheet" />
注意href要指向css文件。
怎么使用CSS？

需要了解基本选择器（元素选择器例：h1、类选择器例：.card、ID选择器例：#top）、声明块。

CSS规则由两个主要的部分构成：选择器、一条或多条声明。
- 选择器通常是需要改变样式的HTML元素，声明由一个属性和一个值组成。
  声明以分号结束，由大括号括起。
例如，我想给我的top一个红色字体，我就可以在css中写：
1
2
3
#top{
color:red;
}
然后在head里用link指向该css文件就可以了。

盒子模型（Box Model）：

任何HTML元素都可以看成矩形的盒子。

在这里我们弄懂margin(外边距)/padding(内边距)/border(边框).

margin是边框外的透明区域，

border是内边距和内容外的边框，你可以把他变粗变细，甚至是删除他。

padding是内容周围的透明区域，

content就是盒子的内容，比如文本、图像。

当然盒子还有宽高width/height。

Flexbox布局：

flexbox（弹性盒子）是一种响应式布局方式，这种布局方式在显示设备不同（屏幕大小、设备类型）的情况下，可以依然确保元素拥有恰当的行为。
可以尽量规避CSS中元素溢出和奇怪缩放的问题。

当我们写display: flex，我们就开启了一个flexbox。（只要html元素可以容纳文本等内容，就可以成为flexbox）

让我们用Flexbox Froggy - A game for learning CSS flexbox打开flexbox的新篇章。

一个池塘，代表一个容器。既然已经是flexbox，那他就会有flexbox拥有的所有属性。我们慢慢讲：

横着的叫主轴（初始方向从左到右），竖着的叫交叉轴（初始方向从上到下）。

正常情况下，我们的元素将从两个轴的起点开始堆叠–>青蛙的位置，如果存在两个元素，那将先按主轴的方向堆叠，比如第二关的青蛙：

关于`justify-content`属性:

我们需要知道justify-content属性，控制对齐位置的属性。其中三个值：

flex-start（默认）	flex-end	center
把flex项目对齐到主轴的起点	把flex项目对齐到主轴的终点	把flex项目对齐到主轴的中央
左对齐	居中对齐	右对齐

那很明显，这一关我们要把青蛙放到右边，只需要写一行:

1	justify-content: flex-end;

第二关写:

1	justify-content: center;

还有三个值：

space-between	space-around	space-evenly
两侧紧贴边缘，间隙平均	两侧不贴边缘，但是由于中间容器将共用间隙，因此中央间隙是两侧间隙的两倍大小	中央两侧间隙等大

关于`align-items`属性：

如果要在交叉轴上对齐这几个青蛙，就要用到align-items属性，其中几个值：flex-start/flex-end/center都和上面主轴的justify-content类似。

我们同时写:

1 2	align-items: center; justify-content: center;

就可以让元素在屏幕上居中。

此外，使用align-self将定义单个元素的交叉轴对齐逻辑，这将覆盖父容器align-items属性的继承。

关于`flex-direction`属性：

还有一个属性：flex-direction，默认值为row，表示主轴水平从左到右；row-reverse表示主轴水平从右到左；column表示主轴竖直从上到下；column-reverse表示主轴竖直从下到上。

这些将影响justify-content和align-items的逻辑。

关于`order`属性：

你可以使用order属性指定单个项目，更改它的显示位置。

order值范围是：-2~2.

关于`flex-wrap`属性：

flex-wrap属性接受以下取值：

nowrap(默认)	wrap	wrap-reverse
元素将固定在一行里，收缩页面对应元素也会收缩。	元素在空间不够时会绕到第二行。	元素将反向绕行，从下到上排列。