【零基础学Web-Day1】HTML 基础标签 + CSS 样式规范，附实战案例

陈辛chenxin2026-03-12 9:56

文章目录

一、网页三件套

HTML：网页显示的内容

CSS：网页显示内容的属性

Javascript：网页显示内容的逻辑

1.HTML

HTML=超文本标记语言=文本+非文本+标签

格式：

复制代码 
<上标签名 属性1=值1 属性2=值2 ....> 内容 </下标签名>

事实上每个标签都是每个内容的显示方式

2.网页布局原理

2.1 象限坐标轴原理
  1. X-Y轴

原点：在一个网页之中，我们把左上角的位置叫做远点，坐标为(0,0),一原点为起点。向右X增大，向下Y增大

矩阵：在网页中，每一个标签都是一个矩阵，所以知道矩阵左上角的(X，Y)坐标，我们就知道这个矩阵位于网页中哪一个位置了

  1. X-Y-Z轴

实际上每个标签都是一个矩形，也是一个盒子，所以事实上标签也有Z轴

页面内容就是标签的排列组合

3.文档流原理

每一个标签在网页中都会占据一定的网页位置大小，遵循从左至右，从上至下的排列原则

学好HTML = 学好每一个标签所占据的文档的位置是如何计算的

每一个矩阵文档流大小 = 宽 × 高

4.分割思想

原理/思想：将页面切割好，划分区域，将区域分割乘可用的最小单元

二.HTML页面组成

1.VSCode快捷键

  1. ctrl+r ：刷新页面
  2. (英文)！：生成标准网页格式

1.网页格式

在html文件中输入!生成标准网页格式如下

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>
    
</body>
</html>
  1. ``<html lang="en"（语言是英语）>内容`
  2. 内容 = head + body

三.CSS编写规范

1.CSS编写步骤

（1）设置选择器class属性

CSS要控制HTML元素，首先需要给元素命名[id/class]

  • class属性：可重复使用（多个元素可共用同一个class），使用.连接
  • id属性：唯一（一个页面只能有一个），使用#连接
html 复制代码 
<!-- 给a标签加class，命名为"btn" -->
<a href="https://www.baidu.com" target="_self" class = "tiaozhuan">跳转至百度</a>
（2）确定 CSS 代码的书写位置

CSS 代码可以写在 3 个地方

  1. 内嵌样式：放在HTML 元素的 style 属性中
html 复制代码 
  <a href="https://www.baidu.com" target="_self" class = "tiaozhuan" style="color:red;">跳转至百度</a>
  1. 内部样式：放在文件的<head>的<style>标签里
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Day01</title>
    <style>
        .tiaozhuan{
            color:rgb(25, 83, 54);
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com" target="_self" class = "tiaozhuan">跳转至百度</a>
</body>
</html>
  1. 外部样式:放在单独的.css文件中，使用link连接

单独css文件：

html 复制代码 
.ceshi{
    color:blueviolet;
}

原文件

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Day01</title>
    <style>
        .tiaozhuan{
            color:rgb(25, 83, 54);
        }
    </style>
    <link rel="stylesheet" href="01.css">
</head>
<body>
    <a href="https://www.baidu.com" target="_self" class = "tiaozhuan">跳转至百度</a>
    <a href="https://www.baidu.com" target="_self" class = "ceshi">外部测试1</a>
</body>
</html>

2.常用css属性

布局类（控制元素大小 / 位置）

  1. width：设置宽度
  2. height：设置高度
  3. margin：元素外边距
  4. padding：内容与边框间距
  5. float：浮动

外观类（控制元素样式）

  1. background-color：背景色
  2. background-image：背景图
  3. border：边框
  4. opacity：透明度

文字/字体类

  1. color：文字颜色
  2. font-size：字体大小
  3. text-align：文字/图像水平对齐方式(left/center/right)
  4. text-indent首行缩进

四.浮动float属性

特点：俯瞰，给div设置该属性后该div标签所在矩阵漂浮在网页上方，不占据网页位置，可以选择漂浮在左边(float:left)也可以选择漂浮在右边(float:right)，达到一个文字环绕的效果

改变：设置浮动后的div容器的宽度仍为100%，但其高度为0，因为其不占据文档流

页面紊乱

但这样会导致一个页面紊乱的问题

可以看到，青色并不是从蓝色和黄色中间开始的，而是从原点开始的，因为蓝色和黄色的div1的文档流为0

页面紊乱解决方案

解决方案：给蓝色和黄色的div套上一个父视图div0，然后给div0固定高度

五.Day1训练-秦皇汉武复现

1.划分区域

1和2左右浮动

2.区域设计

现在显示高度，但待会要删掉，因为我们要让高度随着内容自动变化，宽度不要动，7：3即可

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>
    <style>
        .dataDiv{

            width:80%;
            background-color: antiquewhite;
            margin:auto;
        }
        /* 左边最大部分CSS */
        .dataLeft{
            width:70%;

            float:left;
        }
        .title{
            font-size: 50px;
            font-weight:700
        }
        .author{
            font-size: 17px;
            color: #000000cc;
        }
        .time{
            font-size: 16px;
            color: #808080;
        }
        .line{
            height: 1px;
            width: 92%;
            background-color: #80808056;
        }
        /* 要想给图片居中，需要给图片的父视图添加text-align:center; */
        .img1{
            width: 92%;
        }
        .imgDiv{
            text-align:center;
            width: 92%;
        }

        .text1{
            width: 92%;
        }



        /* 右边最大部分CSS */
        .dataRight{
            width:30%;
            height: 1000px;
            background-color: rgb(220, 170, 33);
            float:right;
        }
    </style>
</head>
<body>
    <!-- 作为中间最大的div -->
    <div class="dataDiv">
        <!-- left -->
        <div class="dataLeft">
            <div class="title">汉武帝凭什么能跟秦始皇并称秦皇汉武？</div>
            <div class="author">人民资讯 &nbsp;&nbsp; <span class="time">2021-12-12 12:05</span></div>
            <div class="line"></div>

            <div >「本文来源：亮剑东南」</div>
            <div class="text1">汉武帝刘彻在位期间汉朝国力强盛，外国臣服，强汉之名始于汉武帝。汉武帝是一位杀伐决断的铁血皇帝，他为汉王朝做出的贡献，使他可以与秦始皇并称"秦皇汉武"，汉景帝刘启是汉武帝的父亲，起初汉武帝和他的母亲王美人在后宫不受宠，汉景帝却宠爱栗姬和刘荣。栗姬得罪了馆陶长公主，王美人趁机与馆陶长公主联手，二人结为儿女亲家，为刘彻争夺太子之位。刘荣被废后，刘彻成为太子，馆陶长公主之女陈阿娇成为太子妃。刘彻从小就听说自己的太祖父、祖父被北匈奴包围，自己的姑母们被迫和亲，这让他感到耻辱，发誓登基后一定要改变这种悲惨的境遇。年少登基的刘彻发现，汉朝在祖父和父亲的统治下，积累了大量财富，国库丰裕，百姓生活富足安乐。但是，刘彻要想打败匈奴，就必须从祖母窦太后手中夺回国家大权，成为真正的皇帝。窦太后从汉景帝时期就掌握了权利，所以刘彻一登基，就把所有的事情都报告给窦太后，打断了刘彻万丈的野心。他多次考虑整顿吏治，改革军队，把汉朝建设成一个强大的帝国。</div>
            <div class="imgDiv">
                <img class="img1" src="./01img.png" alt="图片加载中">
            </div>
        </div>
        <!-- right -->
        <div class="dataRight"></div>
    </div>
</body>
</html>

标签

1.超链接标签<a>

（1）作用&用法

作用：跳转网页/触发文件下载

用法：

html 复制代码 
<a href="网址" target="" ..... >内容</a>
  1. href：指定链接目标(URL/本地文件路径/锚点/JavaScript)
  2. target：链接打开位置
    1. _self(默认，当前窗口)
    2. _blank(新标签页)
    3. _parent(父框架)
    4. _top(顶级框架)
  3. download：触发文件下载（不打开），值为下载后的文件名，默认源文件名
  4. rel:声明链接与当前页面的关系，提升安全性
  5. type：指定目标文件的 MIME 类型，帮助浏览器识别文件
html 复制代码 
<!-- 1. 新标签页打开网页（安全写法） -->
<a href="https://www.baidu.com" target="_blank" rel="noopener noreferrer">百度</a>

<!-- 2. 下载文件（指定文件名） -->
<a href="files/report2026.xlsx" download="2026年度报告.xlsx" type="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
  下载年度报告
</a>

<!-- 3. 跳转到页面内锚点 -->
<a href="#section1">跳转到第一部分</a>
<div id="section1" style="margin-top: 1000px;">我是第一部分内容</div>
（2）文档流计算

文档流/矩形大小 = 内容宽度 × 内容高度

2.布局容器div

（1）作用&用法

作用：布局容器，是网页中的透明盒子，你可以往里面放文字、图片、按钮、子div，将页面分割成不同的模块

html 复制代码 
    <div class="div">这是一句话</div>
    <div>这是第二句话</div>

可以看到，div标签放文字，文字可以自动换行

（2）文档流的计算规则

文档流大小：每一个标签都会占据一定的网页位置大小

宽度：div的宽度，无论如何都会占据一整行

高度：

  1. 没有指定高度，则高度由内容决定
  2. 指定高度height：高度固定（若内容超出，会溢出）。
（3）div嵌套布局

div 支持无限嵌套，这是复杂布局的核心

html 复制代码 
    <div class="div1">
        <div class="div2">这是第一句话</div>
        <div class="div3">这是第二句话</div>
    </div>

此时div1的高度 = (div1高度 + div2高度)*100%

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Day01</title>
    <style>
        .div1{
            height:170px;
            background-color: antiquewhite;
        }
        .div3{
            height: 50px;
            BACKGROUND-COLOR:red;
        }
        .div2{
            height: 70px;
            background-color: aquamarine;
        }
    </style>

    <link rel="stylesheet" href="01.css">
</head>
<body>
    <div class="div1">
        <div class="div2">这是第一句话</div>
        <div class="div3">这是第二句话</div>
        
    </div>
    我水火无敌
</body>
</html>
（4）练习：
  1. 首先进行一个分割

2.写代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Day01-2</title>
    <style>
        .div0{
            background-color:azure;
            font-size: 20px;
            color: black;
            width:50%;
            margin: auto;
        }
        .div1{
            height: 170px;
            background-color: antiquewhite;
            width:50%;
            margin:auto;
        }
        .div2{
            width: 30%;
            height: 30%;
            font-size: 30px;
            COLOR:RED;
            BACKGROUND-COLOR:YELLOW;
            FLOAT:LEFT;
            margin-left: 10px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="div0">数据库</div>
    <div class="div1">
        <div class="div2">盒子1</div>
        <div class="div2">盒子2</div>
        <div class="div2">盒子3</div>
        <div class="div2">盒子4</div>
        <div class="div2">盒子5</div>
        <div class="div2">盒子6</div>
    </div>

</body>
</html>

3.图片标签img

（1）作用&用法

作用：HTML中用来插入图片(本地/网络)

用法：<img> 是单标签（没有闭合标签 </img>），最基础的写法必须包含 src 和 alt 两个属性：

HTML 复制代码 
<!-- 基础写法 -->
<img src="图片路径" alt="图片描述">
  1. src:指定图片的路径（地址）
  2. alt:图片加载失败时显示的替代文本
  3. width/height：设置图片宽度/高度(宽度/高度会等比例缩放，但最好修改宽度)
  4. title：鼠标悬浮在图片上是显示的提示文本

4.span标签

（1）作用&用法

作用：是无语义的行内容器，作用是在不改变文档流的前提下，给一段文字/部分行内元素单独设置样式（比如改颜色、加下划线）

相关推荐
asyxchenchong8882 小时前
ArcGIS水文分析、HEC-RAS模拟技术在洪水危险性及风险评估
经验分享·arcgis
三流架构师2 小时前
Word排版资源合集
经验分享
Naisu Xu2 小时前
数学笔记：最小二乘法（直线拟合）
笔记·算法·最小二乘法
猹叉叉（学习版）2 小时前
【ASP.NET CORE】 7. Identity标识框架
笔记·后端·c#·asp.net·.netcore
智者知已应修善业2 小时前
【输入矩阵将其按副对角线交换后输出】2024-11-27
c语言·c++·经验分享·笔记·线性代数·算法·矩阵
harrain2 小时前
让svg的path标签跟随鼠标拖动而实时移动
html·svg
Felicia-侧听2 小时前
PDF转长图的2个方法
经验分享·pdf·pdf转图片·pdf转长图
Metaphor6922 小时前
将 Word 文档转换为 PDF 【Python 详细教程】
经验分享
xx24062 小时前
RN学习笔记
笔记·学习
热门推荐
01GitHub 镜像站点02OpenClaw 使用和管理 MCP 完全指南03本地部署 OpenClaw + DeepSeek-R1 完全指南04得物前端部门，没了05OpenClaw 连接飞书完整指南：插件安装、配置与踩坑记录06OpenClaw 飞书机器人不回复消息？3 小时踩坑总结07Window 10部署openclaw报错node.exe : npm error code 12808OpenClaw macOS 完整安装与本地模型配置教程（实战版）09npm-error code 128问题解决方法10OpenClaw 接入 QQ Bot 完整实践指南