HTML和CSS和JavaScript的区别

一、从代码外观直接区分

1.1 HTML：尖括号包裹的标签

HTML的特点是尖括号<>包围的标签，成对出现（开始标签和结束标签）。

html 复制代码

<div>这是一个div容器</div>
<p>这是一个段落</p>
<h1>这是一个标题</h1>
<img src="图片.jpg">  <!-- 自闭合标签 -->
<a href="链接.html">这是一个链接</a>
<table>...</table>
<form>...</form>

识别口诀 ：看到<xxx>和</xxx>，这就是HTML。

1.2 CSS：三种表现形式

形式一：style属性（内联样式）

html 复制代码

<div style="color: red; font-size: 16px; margin: 10px;">
    这是红色文字
</div>

识别特征 ：出现在HTML标签的style="..."属性中，里面是属性:值对，用分号分隔。

形式二：style标签（内部样式表）

html 复制代码

<style>
    .my-class {
        color: blue;
        font-size: 20px;
        background-color: #f0f0f0;
    }
    #my-id {
        border: 1px solid black;
    }
</style>

识别特征 ：被<style>和</style>包裹，里面是选择器（.类名、#ID名）和大括号{}。

形式三：link标签引入外部CSS文件

html 复制代码

<link rel="stylesheet" href="/static/css/style.css">

识别特征 ：<link>标签，rel="stylesheet"属性，href指向.css文件。

1.3 JavaScript：两种表现形式

形式一：script标签（内部脚本）

html 复制代码

<script>
    // 这是JavaScript代码
    var myChart = echarts.init(document.getElementById('mains'));
    myChart.setOption({
        title: { text: '我的图表' },
        series: [{ data: [10, 20, 30] }]
    });
    
    function myFunction() {
        alert('Hello');
    }
</script>

识别特征 ：被<script>和</script>包裹，里面是JavaScript语法（变量、函数、对象、方法调用）。

形式二：script标签引入外部JS文件

html 复制代码

<script src="/static/echarts.min.js"></script>

识别特征 ：<script>标签有src属性，指向.js文件。

如何判断是HTML还是CSS？

用这个简单的替换法：

问：如果把样式去掉，剩下的还是不是完整的？

<div class="pagetitle" style="display: flex; align-items: center">
↓ 去掉样式 ↓
<div class="pagetitle">

去掉style="..."后，剩下的<div class="pagetitle">仍然是完整的HTML标签，可以正常工作（只是没有样式了）。

这说明：CSS是附加在HTML上的额外信息，去掉后HTML依然存在。