本文介绍了HTML中的基本结构，特别是<div>标签的作用，如何使用样式属性如color控制文本颜色，以及如何利用CSS创建简单的网页布局，如红色正方形和带有线性渐变的图形。
网页的基本框架如下：
其中，<body></body>中间存放网页的具体内容，因此，如果你想要网页中显示“大家好”这三个字，代码如下：
<!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>
效果如下：
接下来进入正题。
首先，简单介绍一下什么是标签：
标签分类 ：供显示的标签 、供收集用户信息的标签
其中姓名、性别、年龄等属于供显示的标签，而要用户输入信息的部分属于供收集用户信息的标签。
标签的种类有很多种，如：
<div></div>，<p></p>，<body></body>等等。
我们现在主要了解其中的一个标签的作用，其他的以此内推。
<div style=" "></div>
接下来，你需要了解的是，<div></div>是一个标签，而stytle=""是这个标签的属性。
标签的具体作用就像一个盒子，它可以将一连串相同类型的数据进行分离，如：
<!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>
在上面的代码中，根据<body></body>中间存放网页的具体内容的理论，我们可以很容易就找到网页的具体内容为 “大家好”，现在，如果我们想对“大家”这两个字进行颜色上的改变，那么我们可以根据标签的作用来讲内容进行分离，操作如下：
<body>
<div>大家</div>
<div> 好</div>
</body>
现在，我们将“大家”和“好”进行了分开，这样就方便了我们对想要的内容进行处理了，如果你想将“大家”的字体变红，“好”的字体颜色变蓝，就可以根据更改标签的属性来更改标签的内容：
<body>
<div style="color:red">大家</div>
<div style="color:blue"> 好</div>
</body>
显而易见，在标签<div stytle="color:red">大家</div>中，color是颜色的意思，stytle="color:red"表示将<div></div>这个标签的属性变成颜色为红色，而<div>大家</div>的内容是“大家”，因此，<div stytle="color:red">大家</div>的意思是：将<div></div>标签里面的内容变为红色。
效果如下：
根据上面的描述，你应该对<div stytle=" "></div>有了基本的了解，那么我们就可以简单的用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 style="height: 100px; width: 100px; background: red;"></div>
</body>
</html>
代码内容很好理解，我们先找到<body></body>，不难找到 <div style="height: 100px; width: 100px; background: red;"></div>。这是一个<div></div>的标签，其中标签的内容是空，标签的属性分为三个部分：(height)高为100px，(width) 宽为100px，(background)背景为红色。那么就会有人问了，“哎呀100px的px是什么意思啊？”，你现在就只要找到它是一个单位就行。
效果如下：
好了。有了上面的知识，我们就可以做一个比较好看的图案了。
<!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 style="background: black;height: 100vh;/*弹性盒子*/display: flex;/*调整内容水平居中*/justify-content: center;/*调整内容垂直居中*/align-items: center;">
<div style="width: 300px;height: 400px;background: linear-gradient(30deg, red,blue);borderradius: 5px;position: relative; /*绝对位置*/">
<div style="width: 120%;height: 120%;background: red;position: absolute;/*相对位置*/z-index: -1; top: -10%;left: -10%;filter: blur(90px);"></div>
</div>
</body>
</html>
其效果如下：
（其中重要但是你可能看不懂的部分以用文字进行标明和解释了，哪些你看不懂又没有注释的地方则目前不需要过多的了解。）
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
