HTML与CSS学习笔记【从零开始】【自用】_html+css学习与实践-CSDN博客

本文链接：https://blog.csdn.net/m0_74115482/article/details/134626177

本文介绍了HTML的基本概念和使用，包括创建HTML文件、头部元素和结构，以及CSS的作用和样式的美化，如盒模型、浮动布局和Flex布局的应用。通过实例展示了如何利用HTML和CSS完成网页布局，并强调了学习过程中需要注意的单位选择和布局技巧。

摘要由CSDN通过智能技术生成

0 了解HTML与CSS

HTML和CSS是用于创建和设计网页的两种核心技术。

HTML全称为超文本标记语言，是一种标记语言，由一系列标签组成。通过这些标签可以将网络上的文档格式统一，定义说明文字、图形、动画、声音、表格、链接等元素在网页中位置的排版。HTML提供了一种结构化方式来呈现需要表达的信息，使浏览器可以正确识别翻译并显示网页内容。

CSS（层叠样式表）是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素比如颜色、字体、大小、间距、边框等进行格式化。CSS可以将样式从HTML代码中分离出来，从而实现网页内容和样式的分离，使得修改页面样式变得更加灵活和方便。

参考：HTML_百度百科 (baidu.com)

CSS（层叠样式表）_百度百科 (baidu.com)

1 HTML入门与实践

1.1尝试编写第一个html文件

步骤非常简单，新建一个文本文档，在文档中输入几句html语言，保存后将文档文件后缀（.txt）改成（.html或.htm），用浏览器打开就可以得到一个简单的静态网站页面。

以下是我尝试编写的一个html文件的代码和页面呈现效果：

<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
</head>
<body>
<h1>这是一个标题</h1>
<h2>这是一个小一点的标题</h2>
<p>这是一个段落</p>
<p>这是另一个段落</p>
</body>
</html>

一般建议使用专业的 HTML 编辑器（如VSCode）来编辑 HTML，保存为html文件即可。

1.2 HTML学习

参考以下图文和视频教程学习了一些HTML知识，主要包括：

HTML 头部 | 菜鸟教程【head标签中的各种元素的用法】

关于绝对路径与相对路径（详细）_绝对路径和相对路径-CSDN博客【相对路径与绝对路径】

HTML 区块 | 菜鸟教程【div与span】

HTML 表单 | 菜鸟教程【form标签、input标签】

【HTML教程】【菜鸟教程】

HTML 教程 | 菜鸟教程

黑马程序员pink老师前端入门教程

黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili

以上视频本人并未看完。。。之后再补充具体学习过程和笔记

2 CSS入门与实践

2.1 CSS学习

HTML提供了网页的结构，而CSS则是根据结构对网页进行样式的美化。

网页的结构可以看成由许许多多的盒子组成，盒子的概念乍一看比较新奇，但其实很好理解，其实就是大盒子包住小盒子，大小盒子各自按特定的方式分布。

下面这篇博客详细讲解了盒模型，盒子的属性有很多，包括大小、内外边距、背景颜色、边框样式等，看完这篇文章就能了解如何构建不同的盒子。

【盒模型以及它的各种边距】

浮动布局(float)：【视频教程】
弹性盒布局(flex)：【Flex 布局教程: 语法篇】【Flex 布局教程: 实例篇】

CSS3 教程 | 菜鸟教程

3 利用HTML和CSS完成指定布局

根据所学知识尝试完成了一个简单的指定布局。了解了html和css的基础用法，和盒子结构等知识后，辅助emment语法快捷编写，完成这个任务并不难，但仍发现了一些问题：

1. 对像素单位px的大小概念不敏感，构建盒子时想达到比较和谐的大小和间距，需要经过多次反复调试预览查看效果。

2. 有时设置好了小盒子单元的属性，但预览中并未正常显示，查阅后得知是当未设置好盒子的父属性时，子单元的属性也不会生效，对大小属性的百分比设置法（%）和像素（px）设置法的具体原理还需要进行深入的学习。

3. 黄色区域中有六个小盒子，一开始直接定义了6个小盒子在一个块中，但发现会出现盒子超出页面显示区域而不换行显示的情况，便将其拆开分成了两个块，每块3个小盒子，这样能达到预期的显示效果。更多布局技巧仍需继续学习。

以下是html部分的代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class='green'>
        <div class="g1"></div>
        <div class="g2"></div>
        <div class="g3"></div>
        <div class="g4"></div>
        <div class="g5"></div>
    </div>
    <div class='bottom_box'>
        <div class="purple">
            <div class="p1"></div>
            <div class="p2"></div>
            <div class="p3"></div>
        </div>
        <div class="yellow">
        <div class="yellow1">
            <div class="y1"></div>
            <div class="y2"></div>
            <div class="y3"></div>
        </div>
        <div class="yellow2">
            <div class="y4"></div>
            <div class="y5"></div>
            <div class="y6"></div>
        </div>
    </div>
    </div>
    </div>
</body>
</html>

css部分：

<style>
    *{
        margin: 0px;/* 去除浏览器自带的内外边距 */
        padding: 0px;
    }
    html, body{
            height: 100%;
        }
    a{
        text-decoration: none;
    }
    ul{
        list-style: none;
    }
    .green{
        width: 100%;
        height: 12.5%;
        background-color: rgb(69, 240, 69);
        display: flex;
        flex-direction: row; 
    }
    .green div{
        width: 220px;
        height: 60px;
        float: left;
        background-color: rgb(236, 107, 107);
        margin-left: 15px;
        margin-top: 15px;
    }
    .bottom_box{
        height: 100%;
    }
    .bottom_box .purple{
        width: 20%;
        height: 100%;
        background-color: rgb(156, 16, 156);
        float: left;
        display: flex;
        flex-direction: column; 
    }
    .purple div{
        width: 230px;
        height: 80px;
        background-color: rgb(246, 192, 92);
        margin-left: 22px;
        margin-top: 30px;
    }
    .bottom_box .yellow{
        width: 80%;
        height: 100%;
        background-color: rgb(250, 250, 121);
        float: right;
        display: flex;
        flex-direction: row; 
    }
    .yellow1 div{
        width: 400px;
        height: 170px;
        background-color: rgb(46, 89, 184);
        float: top;
        margin: 50px;
        margin-left: 70px;
        margin-top: 30px;
    }
    .yellow2 div{
        width: 400px;
        height: 170px;
        background-color: rgb(46, 89, 184);
        float: top;
        margin: 50px;
        margin-top: 30px;
    }
    
</style>

以上代码运行后得到的网页布局效果如下：