HTML – 你的第一个网页
– 基础框架教程
HTML是什么
-HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标记语言。它使用标签来描述页面的结构和内容，并将其呈现在浏览器中。
HTML基础
-HTML标签是由尖括号包围的关键字，如< html >，< head >，< title >，< body >等。标签通常以成对的形式出现，包括一个开放标签和一个关闭标签，中间是标签的内容。例如，< p >是一个段落标签，可以用来定义一个段落，它的开放标签是< p >，关闭标签是< /p >
除了标签之外，HTML还使用属性来进一步描述标签的属性。属性是放置在标签内部的，提供附加信息。例如，一个图片标签< img >可以具有src属性，用于指定图片的URL地址。
HTML还支持超链接、列表、表格、表单等元素，使开发者能够创建交互性和多媒体的网页。
-HTML是用于结构化网页的基本语言，它提供了一种简单而直观的方式来创建网页，并使其易于理解和修改。除了HTML之外，还有CSS（层叠样式表）和JavaScript等技术可以用于增强网页的样式和功能。
参考资料：
- HTML 教程 | 菜鸟教程
- 你的个人网站 – 康文昌blibli
- Visual Studio Code 中的 HTML
工具：
- 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>
————————————————————————————————————————————————————————
