在html中引入css、js和jQuery的方法

时间：2021-04-09 17:11:38

在html中引入css代码

在html中插入CSS样式表的方法有三种：

1.外部样式表(External style sheet)：即所有的样式单独写在一个.css文件中，在html文件的head部分通过link进行引入。

<head>

　　<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

其中href表示的是外部css文件的路径和名称

2.内部样式表(Internal style sheet)：即写在html文件内，同样在head部分，但是是通过<style>······</style>进行引入的，一个选择器的多个样式之间通过分号隔开

<head>

    <style>

        body {background-image:url("images/back40.gif");}

        hr {color:red;}

        p {margin-left:20px;background-color:green}

    </style>

</head>

3.内联样式(Inline style)：即将css表现内容与html内容糅合在一起，需要在html标签内通过style=' '来引用

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

对于一个html文件，可以同时使用多种css样式，此时显示优先级为内联样式 > 内部样式 > 外部样式 > 浏览器默认样式

在html中引入js代码

1.在head部分通过script并指定src引入外部js文件

······

<head>

    <script src='js文件路径及名称'></script>

</head>

······

2.在head部分通过script编写代码块

<head>

······

    <script>

        alert('asdfghjkl')

    </script>

······

</head>

3.在body部分直接通过script编写，通过这种方法引入时推荐写在body的最后，或者body与结尾html标志之间，这样所有的html文档标签加载完毕，便于通过标签寻找到对应的js代码块。

<body>

······

    <script>

        alert('asdfghjkl')

    </script>

······

</body>

在html中引入jQuery代码

在head部分通过script并指定src引入外部js文件

<head>

    <script src='本地jQuery文件路径及名称'></script>

    <!--如果没有下载jQuery到本地，可使用大型公司的jQuery，例如src='https://libs.baidu.com/jquery/2.1.4/jquery.js'-->

</head>

相关文章