前端知识总结(4):html、css、js之间的联系

上一篇:前端知识总结(3):常用BOM属性对象方法及状态码

HTML

​ 超文本标记语言,它包括一系列标签,通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。

css

​ 对html进行视觉上的装饰

js

​ 对html进行逻辑上的装饰,使人机交互变为可能

html、css、js之间是如何联系起来的呢?

​ 首先,我们来看一下HTML的通用模板:

<html>
<head>
<title>Document name goes here</title>
</head>
<body>
Visible text goes here
</body>
</html>

这三者就是一般来说在head部分进行联系的,那么,具体是如何联系的呢?

  1. html与css
// 方法1(链接方式)
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
// 方法2:直接在html中写css,有在标签内加入style属性(内联方式);head部分加入style标签进行编写(内嵌方式)

tip:css是在head中引入的

  1. html与js
// 方法1(链接方式)
<script src="myScript.js"></script>

// 方法2:直接在html中写js,有在标签内写的(内联方式),例如
<input name="btn" type="button" value="弹出消息框" onclick="javascript:alert('欢迎你');"/>
// ;使用script标签进行编写(内嵌方式)

tip:js一般是在html的尾部进行联系的,当然这个地方很可变,但是只要使这个js文件生效即可,如果深究的话是有很多学问的,可以看一下这篇文章 该把JS文件放在HTML文档的哪个位置 (TODO:有空就写一篇相关的吧)

questions:

  • 为什么说一般在head部分进行的呢?因为我们至少都在这个部分引入过css、js文件吧

好了,我觉得这样这三者之间的联系算是清楚了

发布了92 篇原创文章 · 获赞 21 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/qq_42317011/article/details/104352924