vsode (Visual Studio Code) HTML -- 你的第一个网页

置顶 -熟

已于 2024-06-03 18:24:34 修改

阅读量2.8k

点赞数 32

文章标签： vscode html redis

于 2024-05-11 19:50:27 首次发布

本文链接：https://blog.csdn.net/liye100866/article/details/138725763

版权

HTML – 你的第一个网页

– 基础框架教程

HTML是什么

-HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标记语言。它使用标签来描述页面的结构和内容，并将其呈现在浏览器中。

HTML基础

-HTML标签是由尖括号包围的关键字，如< html >，< head >，< title >，< body >等。标签通常以成对的形式出现，包括一个开放标签和一个关闭标签，中间是标签的内容。例如，< p >是一个段落标签，可以用来定义一个段落，它的开放标签是< p >，关闭标签是< /p >
除了标签之外，HTML还使用属性来进一步描述标签的属性。属性是放置在标签内部的，提供附加信息。例如，一个图片标签< img >可以具有src属性，用于指定图片的URL地址。
HTML还支持超链接、列表、表格、表单等元素，使开发者能够创建交互性和多媒体的网页。

-HTML是用于结构化网页的基本语言，它提供了一种简单而直观的方式来创建网页，并使其易于理解和修改。除了HTML之外，还有CSS（层叠样式表）和JavaScript等技术可以用于增强网页的样式和功能。

参考资料：

工具：

Visual Studio Code
或
Re01 HTML工具
图床
注意：今日份课程由 Visual Studio Code 工具使用，HTML工具也可以用，但最好下一个 Visual Studio Code

————————————————————————————————————————————————————————

插件安装

-1.HTML(主要用于代码的编辑)

在这里插入图片描述

-2.Live Preview(用于预览)

在这里插入图片描述

编写程序

-新建html文件，输入html:5，点击回车插入模板

在这里插入图片描述

-接下来的是一个简单的后台系统
分为3个盒子（div）

-大致写出三个盒子的位置

在这里插入图片描述

温馨提醒

在这里插入图片描述

-先来给最上边的盒子加一个图片，属性sty
使用img插入图片，在设置图片的长宽高
PS：这里的图片🔗经过了图床
在设置下盒子一的颜色——灰色

在这里插入图片描述

底部盒子和上端盒子一样，复制就行
中间盒子为内容

在这里插入图片描述

预览效果

俸上代码

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="
        background-color: #f1f1f1; 
        text-align: center;
        padding: 30px;
    ">
        <img src="https://img2.imgtp.com/2024/05/11/ZOjkykNb.png" alt="CSDN-熟 博客" width="80px" height="80px"/>
    </div>
    <div>
        <h2>CSDN-熟 -个人简介</h2>
        <p>  HOLA，我是CSDN的-熟，一名计算机爱好者</p>
        <p>今天也来做一个往期回顾叭~~~~~</p>

        <h3>Zhlil C++系列:</h3>
        <p>  九九乘方表：<a href="https://blog.csdn.net/liye100866/article/details/138444180?spm=1001.2014.3001.5501">Zhlil-PJ-A. 执理1818 - 九九乘方表</a></p>
        <p>  幸运数字：<a href="https://blog.csdn.net/liye100866/article/details/138449725?spm=1001.2014.3001.5501">Zhili-PJ-A. 执理1849-幸运数字</a></p>
        <p>  角谷猜想：<a href="https://blog.csdn.net/liye100866/article/details/138458875?spm=1001.2014.3001.5501">Zhili-PJ-A. 执理1775 - 角谷猜想</a></p>
        <p>想看更多：<a href="https://blog.csdn.net/liye100866?spm=1011.2415.3001.5343">个人主页</a></p>
        <p>归——CSDN-熟 所有</p>

        <h3>编程-杂项系列</h3>
        <p>  vscode配置：<a href="https://blog.csdn.net/liye100866/article/details/138584162?spm=1001.2014.3001.5501">VSCode（Visual Studio Code）配置保姆级教程（1.89版）</a></p>
        <p>  vscode配置python：<a href="https://blog.csdn.net/liye100866/article/details/138584162?spm=1001.2014.3001.5501">VSCode（Visual Studio Code）python配置保姆级教程（1.89版）</a></p>
    </div>
    <div style="
        background-color: #f1f1f1; 
        text-align: center;
        padding: 30px;
        font-size: 12px;
    ">
    <p>版权：CSDN -熟</p>
    <a href="https://blog.csdn.net/liye100866?spm=1011.2415.3001.5343">CSDN主页</a>
    </div>
</body>
</html>