首页 > 代码库 > WEB前端开发学习----6.CSS 和 JS 在html的使用方法
WEB前端开发学习----6.CSS 和 JS 在html的使用方法
CSS的导入总共有四大方法：
1. 行内式：直接在html标签元素内嵌入css样式（不推荐）
2.嵌入式：在html头部head部分内插入style声明
3.导入式：使用@import引用外部CSS文件方法：<style type="text/css">
@import "mystyle.css";
</style>
4.链接式：使用link来调用外部的css文件（推荐）：<link href="http://www.mamicode.com/mystyle.css" rel="stylesheet" type="text/css"/>
外部css文件中，不用<style>标签。
一般来，常见的是2,3,4三种方法。
2方法的优点：速度快，所有的CSS控制都针对本页面标签，没有多余的CSS命令
2方法的缺点：不利于改版，单个页面显得臃肿。CSS不能共享，造成代码重复。
3方法的优点：和2方法比起来，可以进行CSS共享，页面比较简洁、
3方法的缺点：@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候比较明显
4方法的优点：
a. 有利于SEO，使用此方法引用外部css文件，将使得html页面的源代码少很多比起直接加入css样式，因为搜索引擎蜘蛛爬行网页的时候是不爬行css文件的，这样使得html源代码很少，使得蜘蛛爬行更快，处理更少，增大了此网页的权重，有利于排名。
b. 节约html使得浏览器下载网页时候分开线程了，就像加载一个页面同时有两条线在打开一个页面道理，使得网页打开格外快。（用户浏览此网页的时候html源代码和css文件同时下载，使得网页加载更加快速）
c. 修改网页的样式方便，只需修改css样式即可修改网页的美工样式，如果在网站项目中此方法，因整站应用了共用的css基本样式，这样修改整站风格样式根据快捷方便。
d. 当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
4方法的缺点：会对网站服务器产生过多的HTTP请求，以前是一个文件，而现在却是两个或更多文件了，服务器的压力增大，浏览量大的网站还是谨慎使用。有兴趣的可以观察一下像新浪等网站的首页或栏目首页代码，他们总会把css或js直接写在html里，而不用外部文件
一般来说：如果仅需要引入一个CSS文件，则使用链接方式；如果需要引入多个CSS文件，则首先用连接方式引入一个“目录”CSS文件，这个“目录”CSS文件中再使用导入式引入其他CSS文件。
如果希望用javascript来动态决定引入哪个css文件，则必须使用连接式才能实现。
Javascript 使用方法：
1.在 HTML 文档中放入不限数量的脚本。
脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。
注意：多个script 在同一页面中是相关联的。尽量避免同名。
2.对于外部的js脚本，只需引入即可：
<script src="http://www.mamicode.com/myScript.js"></script>
注意：在外部脚本中不能包含 <script> 标签。
可以引入多个js文件，但是是相关联的。所以可以互相调用。注意同名和导入顺序。
3. 在 a 标签 ，form标签等标签中添加js方法或调用函数，如：
- <a href=http://www.mamicode.com/"javascript:alert(‘我在a标签中‘)"></a>
- <form action="javascript:alert(‘我在form标签中‘)"></form>
4. 添加事件方法
WEB前端开发学习----6.CSS 和 JS 在html的使用方法