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="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="myScript.js"></script>
注意:在外部脚本中不能包含 <script> 标签。
可以引入多个js文件,但是是相关联的。所以可以互相调用。注意同名和导入顺序。
3. 在 a 标签 ,form标签等标签中添加js方法或调用函数,如:
- <a href="javascript:alert(‘我在a标签中‘)"></a>
- <form action="javascript:alert(‘我在form标签中‘)"></form>
4. 添加事件方法
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。