HTML和CSS和JavaScript的区别

一、从代码外观直接区分

1.1 HTML：尖括号包裹的标签

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

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

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

1.2 CSS：三种表现形式

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

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

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

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

1<style>
2    .my-class {
3        color: blue;
4        font-size: 20px;
5        background-color: #f0f0f0;
6    }
7    #my-id {
8        border: 1px solid black;
9    }
10</style>

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

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

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

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

1.3 JavaScript：两种表现形式

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

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

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

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

<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依然存在。

《HTML和CSS和JavaScript的区别》是转载文章，点击查看原文。