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. 添加事件方法


  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值