前端开发概论

news2025/3/19 9:30:19

HTML,CSS,JS三者关系

html是骨架，决定呈现什么内容，而css定义样式，是华丽的外衣，javascript是操作逻辑，实现按钮等等，是人的灵魂

HTML文件存储着一个网页的骨架，CSS则是外衣，javascript则决定其行为逻辑
可以说，html决定了显示什么，而CSS决定了html决定的那些东西显示出来是怎样的
而我们使用的Vue,则是更高层次的框架，简化了语法
html有特定的结构，其由各种标签组成

标签(tag)和元素(element)？
简单来说，标签是构成元素的语法部分，而元素是包含标签、属性和内容的完整实体。

HTML和CSS是相互独立的，虽然css经常写在html中，但是切莫以为css是html的子集
html与css结合的方式有三种:

<!--内联式,直接在style属性里写CSS-->
<p style="color: blue;">这是一个蓝色文本的段落。</p>

内部样式表：在 HTML 文件的 <head> 标签里使用 <style> 标签定义 CSS 代码。你当前编辑的文件就是这种方式：

<head>
    <style>
        .container {
            width: 80%;
            margin: 0 auto;
            background-color: #f0f0f0;
            padding: 20px;
        }
        .header {
            background-color: #4CAF50;
            color: white;
            text-align: center;
            padding: 10px 0;
        }
    </style>
</head>

外部样式表：把 CSS 代码存到独立的 .css 文件中，再通过 HTML 文件的 <link> 标签引入。示例：

<head>
    <link rel="stylesheet" href="styles.css">
</head>

虽然我们日常经常见到内联和内部样式表的写法，但是CSS不是html的子集

学前端当从html学起，因为它是骨架。

html又是由标签所组成的一个个元素所组成的

html基本骨架

<!DOCTYPE html>  <!--文档类型声明，告诉浏览器，这是一个html文件-->
<html lang="zh-CN">  <!--根标签root element of an HTML page-->
<head><!--head里存放页面标题、框架和样式-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例页面</title> 
    <style>
        .container {
            width: 80%;
            margin: 0 auto;
            background-color: #f0f0f0;
            padding: 20px;
        }
        .header {
            background-color: #4CAF50;
            color: white;
            text-align: center;
            padding: 10px 0;
        }
    </style>
</head>
<body><!--body是血肉，给用户看的内容-->
    <div class="container">
        <div class="header">
            这是页眉
        </div>
        <p>这是一个段落，位于页眉下方。</p>
    </div>
    
</body>
</html>