从零教你快速了解Web开发

懂与应试技术团队

于 2022-10-06 23:58:00 发布

阅读量197

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/isenjouy/article/details/127189683

版权

Web前端分三层：

HTML（HyperText Markup Language）：超文本标记语言。从语义的角度描述页面的结构。相当于人的身体组织结构。
CSS（Cascading Style Sheets）：层叠样式表。从审美的角度美化页面的样式。相当于人的衣服和打扮。
JS：JavaScript。从交互的角度描述页面的行为。相当于人的动作，让人有生命力。

书写第一个 HTML 页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>我是h1</h1>
</body>
</html>

我们新建一个 .html 文件，写上以上内容，用浏览器打开上面这个文件，看看页面效果：
浏览器会显示“我是h1”这段话，到此，第一个简单的 HTML 页面就写完了

如果想输出图片的话，在目录同级添加一个 test.png,然后在 body 里面这样写，打开浏览器就能见到效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <img src="test.png">
</body>
</html>

像这种<h1>我们叫标签，在浏览器会表示成文本,<img>则表示成图片，他表现的形式是按浏览器制定的规则，所以说 HTML 是标签语言

CSS入门

先看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    #test {
        color: red;
    }
</style>

<body>
    <h1 id="test">我是h1</h1>
</body>
</html>