html文件与css与js文件关联总结

时间 2019-12-01

标签 html 文件 css 关联总结栏目 HTML 繁體版

原文原文链接

在网站开发项目中，常常会结合使用html，css,js,jquery,因为常常会忘记如何添加关联标签，咱们会花费一些时间上网去找，影响开发效率。故在此进行一些总结。javascript

一、html中使用css的方法css

（1）、内联样式表html

内联样式表是在标签内部使用css,虽然能到达到改变html样式的目的，可是具备代码看起来杂乱，修改不方便等缺点。java

例：jquery

<div data-for="result" style="height:0;width:0;overflow:hidden;" id="swfsocketdiv">内容</div>

其中的

style="height:0;width:0;overflow:hidden;

就是css代码。ajax

（2）、嵌入样式表api

嵌入样式表是指css代码嵌入到html中，通常是在一对<style>标签内。dom

<style type="text/css">#ty_msg_mod *,#ty_msg_mod{margin:0px;padding:0px;}</style>

（3）、外部样式表socket

外部样式表的css代码保存在单独的文件中，经过一个<link>标签来进行关联。网站

<link type="text/css" charset="utf-8" rel="stylesheet" href="http://static.tianyaui.com/global/ty/resources/css/TY.ui.pop.css?_v=20150519">

二、html中使用JavaScript

（1）、内联样式表

例：

<td><button width="45" height="15" onclick=btn1()>按钮1</button></td>

其中的 onclick=btn1()就是js语句。

（2）、嵌入样式表

能够写在<head>或<body>中，在<head>中在页面加载前执行，在<body>中则在页面加载后执行。

例：

<script type="text/javascript">
        var protocol = window.location.protocol;
        document.write('<script type="text/javascript" src="' + protocol + '//csdnimg.cn/pubfooter/js/repoAddr2.js?v=' + Math.random() + '"></' + 'script>');
    </script>

（3）、外部样式表

外部样式表是单独的js文件，经过<script>标签进行关联。

例：

<script src="http://139.129.220.86/js/jsstyle-yy.js"></script>

三、html中使用jquery

（1）、引用本地文件

与js第三种方式同样。

<script type="text/javascript" src="scripts/jquery-1.5.2.min.js"></script>

（2）、引用公共库文件

引用谷歌的，以下：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

引用百度的，以下：

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>